@import url('tokens.css');

/* ============================================================================
   The recorded-run browser (ADR 0024 §9 / ADR 0031) — the Histories root's detail panel
   inside the Process content panel: a flat run LIST with its filters beside the selected
   run's record and the inline datalog chart, and one toggle that gives the record the whole
   panel. All themed values resolve through var(--…) tokens.
   ============================================================================ */

/* ---- The browser inside the Process detail card ----
   The surface fills the card and scrolls each of its two columns on its own, so it takes the
   card's gutter over: the shared padding would push the bottom of both columns past the fold and
   leave the whole card scrolling by exactly that much. Each part pads itself instead, and the card
   body becomes the flex line the browser stretches along (the read-only wrapper between them is
   display:contents, so the browser really is this body's own flex item). */
.ui-md-detail-body:has(.hist-browser) {
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* The panel's own header is the shared one, and it is drawn in the card's pinned head above
   (shared.css), so what stands here is the split, and it takes the whole height. */
.hist-browser {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--space-5) var(--space-5) 0;
}

/* The list keeps a fixed measure so every pixel the window gains goes to the record. Reading one
   run alone drops the column entirely — a layout state of this panel, never another address. */
.hist-browser-split {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--space-5);
}
.hist-browser.is-solo .hist-browser-split { grid-template-columns: minmax(0, 1fr); }

.hist-browser-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    padding-right: var(--space-5);
    border-right: 1px solid var(--color-stroke);
}

/* The record is the tall column, so it owns the scroll the detail card used to own. */
.hist-browser-run { min-width: 0; min-height: 0; overflow-y: auto; }

@media (max-width: 1180px) {
    .hist-browser-split { grid-template-columns: 264px minmax(0, 1fr); }
}

/* ---- Run-list column: header + filters ---- */
.hist-list-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0; }
.hist-list-title { font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.hist-list-actions { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

/* Import .glab: a file picker that opens the OS dialog (local shell AND browser), wearing the
   shared .ui-icon-btn surface so it reads as a peer of the Refresh next to it. The native input
   covers the whole button transparently — a <label> takes no focus, so the ring goes on the label
   via :focus-within, and the disabled opacity mirrors .ui-icon-btn:disabled. */
.hist-import { position: relative; overflow: hidden; }
.hist-import:focus-within { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: var(--focus-ring-offset); }
.hist-import.is-disabled { opacity: 0.35; pointer-events: none; }
.hist-import-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hist-divider { height: 1px; background: var(--color-stroke); margin: var(--space-3) 0; }

/* The column narrows with the content panel, so the filter strip is built to survive its narrow
   end: a single column of pairs that auto-fit — two per row while there is room for both, stacked
   as soon as there is not. Each control is allowed to shrink below the 200px .ui-select floor
   (min-width:0), which is what clipped the second combo's chevron. It is recessed the same way as
   the bulk bar below it — background + inset shadow, since the ambient here is already the well
   tone (see .hist-bulk and the depth contract in tokens.css) — so the strip reads as its own search
   block, set apart from the "Runs" header above and from the run list the divider now opens into. */
.hist-filters {
    display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
    margin-top: var(--space-3); padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt); box-shadow: var(--shadow-inset-well);
}
.hist-filter-pair {
    --hist-pair-min: 8rem;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--hist-pair-min), 1fr));
    gap: var(--space-3); min-width: 0;
}
/* A native date field carries its own dd/mm/yyyy text and picker chrome, so it needs more room
   than a combo before it may share a row. */
.hist-filter-dates { --hist-pair-min: 10rem; }
/* "Model · Unit" and an operator's full name are long values, so this pair holds out for a wider
   column than the short verdict/state words do before it stops stacking. */
.hist-filter-who { --hist-pair-min: 11rem; }
.hist-filters .ui-select,
.hist-filters .ui-input { min-width: 0; width: 100%; }
.hist-filter-combo { width: 100%; }
.hist-filter-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.hist-filter-label { color: var(--color-text-secondary); font-size: var(--font-size-eyebrow); }
.hist-filter-date { padding-right: var(--space-2); }

/* ---- Bulk selection bar (only present while runs are ticked) ---- */
.hist-bulk {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-2); margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    background: var(--color-surface-alt); box-shadow: var(--shadow-inset-well);
}
.hist-bulk-count { color: var(--color-text); font-size: var(--font-size-description); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.hist-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---- Pager ---- */
.hist-pager {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3);
    padding: var(--space-2) 0 var(--space-3);
    border-top: 1px solid var(--color-stroke-subtle); flex: 0 0 auto;
}
.hist-pager-range { color: var(--color-text-secondary); font-size: var(--font-size-eyebrow); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- The run's verbs: export group, and the generate + template clusters ----
   The strip mixes two natures — portable copies of the recorded data (CSV / XLSX / GLAB) and
   documents generated from it (PDF / label) — so it is read in groups instead of one queue: the
   exports sit together, a hairline separates them, and each generation encloses its own template
   picker. The enclosure is what makes the choice legible: a picker inside the button's box can
   only belong to that button, whereas a loose combo between two buttons belongs to neither.
   It heads the record's own column, and stays there while the record scrolls, because the verbs
   act on the open run — the page's toolbar above follows the workspace selection instead. */
.hist-run-toolbar {
    position: sticky; top: 0; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-stroke);
    background: var(--color-surface-alt);
}
.hist-run-toolbar-end { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.hist-tool-group { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.hist-tool-sep {
    flex: 0 0 auto; width: 1px; height: 20px; margin: 0 var(--space-1);
    background: var(--color-stroke);
}
.hist-tool-cluster {
    flex: 0 0 auto; display: inline-flex; align-items: stretch; min-width: 0;
    border: 1px solid var(--color-stroke); border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
}
/* The two halves share one box: the button keeps the left corners, the picker the right, and a
   hairline between them keeps each half's own hover/focus readable. */
.hist-tool-cluster > .ui-toolbar-btn {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right-color: var(--color-stroke);
}
.hist-tool-cluster > .ui-select {
    border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: transparent; min-width: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-description);
}
.hist-report-combo { width: 190px; }
.hist-label-combo { width: 210px; }

/* ---- Run-list: rows ---- */
/* Takes the height left between the filters and the pager, and scrolls inside it: the pager is
   what walks the archive, so it must stay in place rather than ride away under the rows. */
.hist-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-1); overflow-y: auto; }
.hist-list-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-description); }
/* The row carries the tick box beside the open button (a checkbox cannot live inside a
   button), so hover and selection are painted by the row rather than the button. */
.hist-run-row {
    display: flex; align-items: center; gap: var(--space-2); min-width: 0;
    padding-left: var(--space-2); border-radius: var(--radius-md);
}
.hist-run-row:hover { background: var(--color-overlay-hover); }
.hist-run-row.selected { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-stroke); }
.hist-run-check { flex: 0 0 auto; }
.hist-run {
    display: flex; flex-direction: column; gap: var(--space-2);
    flex: 1 1 auto; min-width: 0; text-align: left; padding: var(--space-3); border: 0;
    background: transparent; border-radius: var(--radius-md); cursor: pointer;
    color: var(--color-text);
}
.hist-run-line { display: flex; align-items: center; gap: var(--space-3); }
.hist-run-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-weight-semibold); }
.hist-run-sub { font-size: var(--font-size-eyebrow); color: var(--color-text-secondary); }
/* The row's subline says state, responsible and start instant, and keeps to one line whatever the
   column measures: it trims rather than wrapping the row taller. What gives way is the responsible's
   name, at the end of the first half — the same conduct as the run name giving way to the badges
   above it — while the instant holds its width, so "when" is never the half that disappears. The
   middle dot belongs to the join, so it rides the instant instead of either half's text. */
.hist-run > .hist-run-sub { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.hist-run-sub-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-run-sub-when { flex: 0 0 auto; white-space: nowrap; }
.hist-run-sub-when::before { content: "\00b7"; margin-right: var(--space-2); }

/* ---- Verdict / recording badges (semantic colour via tokens) ---- */
.hist-badge {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
    font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold);
    color: var(--color-text-on-accent);
}
.hist-badge-ok { background: var(--color-success-fill); }
.hist-badge-nok { background: var(--color-critical-fill); }
.hist-badge-indeterminate {
    color: var(--color-caution);
    background: var(--color-caution-bg);
    border: 1px solid var(--color-caution);
}
.hist-badge-lg { font-size: var(--font-size-eyebrow); padding: var(--space-2) var(--space-4); }
/* Origin + Imported markers (neutral pills in the list row + the detail header). */
.hist-origin,
.hist-imported-badge {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    padding: var(--space-1) var(--space-3); border: 1px solid var(--color-stroke);
    border-radius: var(--radius-sm); background: var(--color-surface);
    color: var(--color-text-secondary); font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
}
.hist-origin-lg,
.hist-imported-badge-lg { padding: var(--space-2) var(--space-4); font-size: var(--font-size-eyebrow); }
.hist-chip-recording {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
    border: 1px solid var(--color-accent); background: transparent;
    color: var(--color-accent-text);
    font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-semibold);
}

/* ---- Detail empty state ---- */
/* Empty state uses the shared .ui-empty-state. */

/* ---- The run's record ---- */
/* The column it scrolls in is already inset from the card edge, so the record only spaces itself
   away from the verb strip above and the card's bottom edge below. */
.hist-detail { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4) 0 var(--space-6); }
.hist-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.hist-detail-titles { min-width: 0; }
.hist-run-title { margin: 0; font-size: var(--font-size-section); font-weight: var(--font-weight-semibold); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; }
.hist-run-status { margin-top: var(--space-2); font-size: var(--font-size-description); color: var(--color-text-secondary); }
.hist-imported-line { margin-top: var(--space-1); font-size: var(--font-size-eyebrow); color: var(--color-text-secondary); }

/* Who ran it: the pair reads as one line while there is room and wraps as two when there is not,
   each label staying attached to the name it introduces. The label is the quiet half — the answer
   is what the eye should land on. */
.hist-run-actors {
    margin-top: var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
    font-size: var(--font-size-eyebrow);
}
.hist-run-actor { display: inline-flex; align-items: baseline; gap: var(--space-1); min-width: 0; }
.hist-run-actor-label { color: var(--color-text-secondary); }
.hist-run-actor-name {
    color: var(--color-text); font-weight: var(--font-weight-semibold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist-detail-chips { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }

/* ---- Inline datalog chart card (gives ChartView its height) ---- */
.hist-chart-card {
    height: 320px; border: 1px solid var(--color-stroke); border-radius: var(--radius-lg);
    overflow: hidden; background: var(--color-surface);
}

/* ---- Detail sections (criteria / occurrences / comments / annotations) ---- */
.hist-section { display: flex; flex-direction: column; gap: var(--space-3); }
.hist-section-title { font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); color: var(--color-text); }
/* A grid wider than the record column scrolls as a whole, never in halves: .ui-grid clips while
   .ui-grid-body scrolls, so an unwrapped wide grid loses its header off the right edge and lets the
   rows slide out from under it. The wrapper owns the horizontal scroll and each grid declares the
   width its own column tracks need. */
.hist-grid-scroll { width: 100%; max-width: 100%; overflow-x: auto; }
.hist-criterion-grid { min-width: 1300px; }
.hist-episode-grid { min-width: 1160px; }
.hist-event-grid { min-width: 760px; }
.hist-occurrence-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-occurrence-status { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.hist-occurrence-status.active { color: var(--color-accent-text); }
.hist-occurrence-status.uncertain {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: var(--color-caution-bg);
}
.hist-occurrence-audit { padding-top: var(--space-1); }
.hist-occurrence-audit > :not(summary) { margin-top: var(--space-2); }
.hist-entry-row { display: flex; align-items: center; gap: var(--space-3); }
.hist-entry-row .ui-input { flex: 1 1 auto; }
.hist-anno-time { flex: 0 0 90px; width: 90px; }

/* ---- Frozen label dossier -------------------------------------------------- */
/* Evidence leads; send/generate controls sit in recessed wells and never compete
   with the run header. Semantic colour describes only durable queue state. */
.hist-labels-panel {
    padding-top: var(--space-2);
}

.hist-labels-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.hist-labels-head .field-description {
    margin-top: var(--space-1);
}

.hist-label-count {
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-bg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

.hist-label-empty {
    padding: var(--space-6);
    border: 1px dashed var(--color-stroke);
    border-radius: var(--radius-lg);
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    text-align: center;
    font-size: var(--font-size-description);
}

.hist-label-artifacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.hist-label-artifact {
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
}

.hist-label-artifact > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    color: var(--color-text);
    box-sizing: border-box;
    width: 100%;
}

.hist-label-artifact > summary:hover {
    background: var(--color-overlay-hover);
}

.hist-label-artifact[open] > summary {
    border-bottom: 1px solid var(--color-stroke-subtle);
}

.hist-label-summary-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 auto;
    min-width: 0;
}

.hist-label-action {
    overflow: hidden;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hist-label-template {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--font-size-description);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hist-label-summary-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-eyebrow);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hist-label-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.hist-label-status.sent {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.hist-label-status.uncertain {
    color: var(--color-caution);
    background: var(--color-caution-bg);
}

.hist-label-status.failed {
    color: var(--color-critical);
    background: var(--color-critical-bg);
}

.hist-label-status.neutral {
    color: var(--color-text-secondary);
    background: var(--color-neutral-bg);
}

.hist-label-artifact-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
}

.hist-label-raw-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    box-shadow: var(--shadow-inset-well);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-size-eyebrow);
}

.hist-label-raw-kind {
    color: var(--color-accent-text);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
}

.hist-label-raw-strip code {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-secondary);
}

.hist-label-evidence-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
}

.hist-label-evidence-block {
    min-width: 0;
}

.hist-label-block-title {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-description);
    font-weight: var(--font-weight-semibold);
}

.hist-label-block-empty {
    padding: var(--space-3) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-description);
}

.hist-label-value-list,
.hist-label-attempt-list {
    border-top: 1px solid var(--color-stroke-subtle);
}

.hist-label-value-row {
    display: grid;
    grid-template-columns: minmax(100px, 0.75fr) minmax(120px, 1fr) minmax(140px, 1.25fr);
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-stroke-subtle);
    min-width: 0;
}

.hist-label-value-row code {
    overflow: hidden;
    color: var(--color-accent-text);
    font-size: var(--font-size-eyebrow);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hist-label-value {
    overflow: hidden;
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hist-label-source {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--font-size-description);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hist-label-attempt {
    display: grid;
    grid-template-columns: auto minmax(100px, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-stroke-subtle);
}

.hist-label-attempt-queue {
    overflow: hidden;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hist-label-attempt-time {
    color: var(--color-text-secondary);
    font-size: var(--font-size-eyebrow);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hist-label-attempt-error {
    grid-column: 1 / -1;
    color: var(--color-critical);
    font-size: var(--font-size-description);
}

.hist-label-send-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 320px) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

.hist-label-send-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.hist-label-queue,
.hist-label-template-select,
.hist-label-source-select {
    width: 100%;
}

/* ---- Explicit generation from frozen evidence ----------------------------- */
.hist-label-compose {
    border-top: 1px solid var(--color-stroke-subtle);
    padding-top: var(--space-2);
}

.hist-label-compose-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3) 0 0 var(--space-6);
}

.hist-label-template-picker {
    display: grid;
    grid-template-columns: 160px minmax(240px, 420px);
    gap: var(--space-4);
    align-items: center;
}

.hist-label-template-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-size-eyebrow);
}

.hist-label-template-facts span {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-bg);
}

.hist-label-mapping-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-stroke-subtle);
}

.hist-label-mapping-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.65fr) minmax(300px, 2fr) minmax(170px, 0.8fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-stroke-subtle);
    border-left: 2px solid transparent;
}

.hist-label-mapping-row.confirmed {
    border-left-color: var(--color-success);
    background: var(--color-success-bg);
}

.hist-label-marker {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.hist-label-marker code {
    overflow: hidden;
    color: var(--color-accent-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hist-label-marker span,
.hist-label-format-na {
    color: var(--color-text-secondary);
    font-size: var(--font-size-eyebrow);
}

.hist-label-format {
    min-width: 0;
}

.hist-label-confirm {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    color: var(--color-text);
    font-size: var(--font-size-description);
    cursor: pointer;
    white-space: nowrap;
}

.hist-label-confirm input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
}

.hist-label-confirm:has(input:disabled) {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.hist-label-generate-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
}

.hist-label-map-progress {
    color: var(--color-text-secondary);
    font-size: var(--font-size-description);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
    .hist-label-evidence-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hist-label-send-row {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr);
    }

    .hist-label-send-copy {
        grid-column: 1 / -1;
    }

    .hist-label-mapping-row {
        grid-template-columns: minmax(130px, 0.6fr) minmax(260px, 1.4fr);
    }
}

@media (max-width: 760px) {
    .hist-label-artifact > summary,
    .hist-labels-head,
    .hist-label-summary-meta,
    .hist-label-generate-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .hist-label-summary-meta {
        gap: var(--space-2);
    }

    .hist-label-send-row,
    .hist-label-template-picker,
    .hist-label-mapping-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .hist-label-compose-body {
        padding-left: 0;
    }

    .hist-label-value-row,
    .hist-label-attempt {
        grid-template-columns: minmax(0, 1fr);
    }

    .hist-label-attempt-error {
        grid-column: auto;
    }
}

/* ---- Report dossier: reuses the label evidence classes; only the open/download well
   is new (open XOR resend, so a single copy column plus its action button). ---------- */
.hist-report-file-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

@media (max-width: 760px) {
    .hist-report-file-row {
        grid-template-columns: minmax(0, 1fr);
    }
}