/* MFE-specific styles - add layout and component CSS for this micro-frontend here. */

/* The top bar is not a clipping container; the grouped search floats over page content. */
.topbar { position: relative; z-index: 30; overflow: visible; }
.topbar .global-search-container { position: relative; }
.topbar .global-search { display: flex; cursor: text; }
.topbar .global-search input { width: 205px; }
.topbar .global-search input:focus { outline: none; }
.topbar .global-search:focus-within { border-color: var(--green); }
.global-search-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 7px);
    right: 0;
    width: min(410px, calc(100vw - 30px));
    max-height: min(65vh, 530px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: 0 12px 35px #17342225;
    font-size: 12px;
}
.global-search-group-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px 6px;
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}
.global-search-option {
    display: block;
    padding: 8px 14px;
    color: var(--ink);
    text-decoration: none;
}
.global-search-option:hover, .global-search-option.selected { background: var(--green-soft); text-decoration: none; }
.global-search-option strong { display: block; font-weight: 600; }
.global-search-option small { display: block; color: var(--muted); line-height: 1.4; }
.global-search-message, .global-search-failure { padding: 10px 14px; color: var(--muted); }
.global-search-failure { color: var(--red); }
.global-search-footer { border-top: 1px solid var(--line); padding: 10px 14px; color: var(--muted); font-size: 10px; }
@media (max-width: 950px) {
    .topbar .global-search input { width: 150px; }
}
@media (max-width: 650px) {
    .topbar .global-search { padding: 7px; }
    .topbar .global-search input { width: 110px; }
    .topbar .global-search span { display: none; }
}

.docs-browser {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.docs-nav {
    border-right: 1px solid #d8dde6;
    padding-right: 1rem;
}

.docs-nav-group h2 {
    margin: 0 0 0.5rem;
    color: #4b5563;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
}

.docs-nav-item {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #1f2937;
    cursor: pointer;
    font: inherit;
    margin: 0.125rem 0;
    padding: 0.625rem 0.75rem;
    text-align: left;
}

.docs-nav-item:hover,
.docs-nav-item:focus {
    background: #eef4ff;
    outline: 2px solid transparent;
}

.docs-nav-item.is-selected {
    background: #dbeafe;
    color: #0f3b71;
    font-weight: 700;
}

.docs-article {
    min-width: 0;
}

.docs-placeholder {
    color: #4b5563;
    margin: 0;
}

.docs-content {
    min-width: 0;
}

.docs-content table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%;
}

.docs-content th,
.docs-content td {
    border: 1px solid #d8dde6;
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.docs-content pre {
    background: #111827;
    border-radius: 4px;
    color: #f9fafb;
    overflow-x: auto;
    padding: 1rem;
}

.docs-content code {
    font-family: Consolas, "Courier New", monospace;
}

.validation-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    margin: 1.25rem 0;
}

.validation-panel {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #d8dde6;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    padding: 1rem;
}

.validation-panel h3 {
    color: #0f172a;
    font-size: 1rem;
    margin: 0 0 0.75rem;
}

.validation-panel dl {
    display: grid;
    gap: 0.45rem 0.85rem;
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 0;
}

.validation-panel dt {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.validation-panel dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.validation-wide {
    margin: 1.25rem 0;
}

.validation-toolbar {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.azure-dev-message {
    color: #64748b;
    font-size: 0.92rem;
    margin: 0.85rem 0 1rem;
}

.azure-dev-action-list {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, max-content));
    list-style: none;
    margin: 0;
    padding: 0;
}

.validation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.validation-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-height: 2.25rem;
    padding: 0.55rem 0.85rem;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
    white-space: nowrap;
}

.validation-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
    outline: 0;
}

.validation-button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.validation-button.is-primary {
    background: #0b5cad;
    border-color: #0b5cad;
    color: #ffffff;
}

.validation-button.is-primary:hover:not(:disabled) {
    background: #084b8f;
    border-color: #084b8f;
}

.validation-button.is-secondary {
    background: #ffffff;
    border-color: #94a3b8;
    color: #0f3b71;
}

.validation-button.is-secondary:hover:not(:disabled) {
    background: #eef4ff;
    border-color: #4f7fb7;
}

.validation-button.is-ghost {
    background: transparent;
    border-color: transparent;
    color: #475569;
}

.validation-button.is-ghost:hover:not(:disabled) {
    background: #e2e8f0;
    color: #0f172a;
}

.validation-results {
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 1rem;
    table-layout: fixed;
    width: 100%;
}

.validation-results th {
    background: #eef2f7;
    border-bottom: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.65rem 0.8rem;
    text-align: left;
    text-transform: uppercase;
}

.validation-results th:nth-child(1) {
    width: 21rem;
}

.validation-results th:nth-child(2) {
    width: 7rem;
}

.validation-results td {
    border-bottom: 1px solid #d8dde6;
    color: #111827;
    line-height: 1.3;
    overflow-wrap: anywhere;
    padding: 0.75rem 0.8rem;
    vertical-align: top;
}

.validation-results tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.74);
}

.validation-results tbody tr:nth-child(even) {
    background: rgba(241, 245, 249, 0.9);
}

.validation-results tbody tr:hover {
    background: #eaf2ff;
}

.validation-test-id {
    color: #0f172a;
    display: block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0.2rem;
}

.validation-test-name {
    color: #64748b;
    display: block;
    font-size: 0.82rem;
    line-height: 1.25;
}

.validation-status {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0;
}

.validation-status.is-pass {
    color: #0b5cad;
}

.validation-status.is-fail {
    color: #b42318;
}

.validation-status.is-pending {
    color: #64748b;
}

@media (max-width: 720px) {
    .docs-browser {
        grid-template-columns: 1fr;
    }

    .docs-nav {
        border-right: 0;
        border-bottom: 1px solid #d8dde6;
        padding: 0 0 1rem;
    }

    .validation-actions {
        justify-content: flex-start;
    }

    .validation-toolbar {
        display: grid;
    }

    .validation-results {
        table-layout: auto;
    }

    .validation-results th:nth-child(1),
    .validation-results th:nth-child(2) {
        width: auto;
    }
}

/* ---------------------------------------------------------------------------------------------------
   Storyboard & Parity: the two rules the design package expresses as inline `style` attributes.

   The package's own ui.css is carried across VERBATIM (its SHA-256 is recorded in that file's header) and
   is never edited. But two of its helpers centre content with an inline style attribute, and the SOC2
   content-security policy this host enables blocks inline styles outright. The declarations live here, in
   the host's own stylesheet, so the rendered result matches the render without touching the package file
   and without weakening the policy.
   --------------------------------------------------------------------------------------------------- */

/* fullState(): `<div class="row" style="justify-content:center">` around the state's actions. */
.empty .row {
    justify-content: center;
}

/* radio(): `<span class="small muted" style="display:block;margin-top:…">` beneath a radio card's title. */
.radio-card .small.muted {
    display: block;
    margin-top: 4px;
}

/* radio() again, and this one is a layout bug rather than a carried inline style. The package's
   field(label, control) wraps its control in `.field`, and ui.css sets `.field input{width:100%}` for text
   boxes. A radio card's `<input type="radio">` is also `.field input`, so it was stretched to the full row:
   the dot rendered centred in a full-width box and the card's title wrapped underneath it, instead of
   sitting beside it as renders/P14-recording-setup.png shows. Found by reading the P14 capture against the
   render (QA-20260921-0015), not by a test — no test in this repo renders a page.

   The selector needs BOTH classes. `.radio-card input` alone is specificity (0,1,1) — identical to
   ui.css's `.field input` — and app.css is linked BEFORE spm-ui.css, so an equal-specificity tie goes to
   ui.css and the rule silently does nothing. Proven: QA-20260921-0018 still showed the stretched radio. */
.field .radio-card input {
    width: auto;
    flex-shrink: 0;
}

/* SPM comparison dialog (D05) and image viewer (D04). The package's ui.css is carried verbatim and not
   edited; the host's own rules live here. */

/* The dialog heads use the package's own .row and .close classes for their icon cluster, so they need no
   rule here: a rule here reached the harness's cache-less browser and not the owner's (2026-09-19). */

/* The image viewer's well: tall enough to be a viewer, scrolls in both axes, and the image's width is set
   through the CSSOM by the zoom controls (the content-security policy forbids inline styles). */
/* A FIXED height, not a maximum: with a maximum the well was as tall as the image at 100 % and grew or
   shrank with every zoom step, and the dialog with it (the owner: "mouse scrolling the image is also
   changing the entire modal dialog window size", 2026-09-19). The image scrolls inside a well that does not
   move. */
.viewer-well { height: calc(100vh - 320px); min-height: 280px; overflow: auto; background: #f2f5ee; padding: 10px; }
.viewer-well img { display: block; width: 100%; max-width: none; }

/* Drag-to-pan on the viewer well: the hand says it can be dragged; the closed hand says it is being. */
.viewer-well { cursor: grab; user-select: none; touch-action: none; }
.viewer-well.panning { cursor: grabbing; }
.viewer-well img { pointer-events: none; }

/* P22: an indexed artifact can be present while its image bytes are unavailable (BR-626). */
.evidence-unavailable {
    height: 180px;
    display: grid;
    place-items: center;
    background: #f2f5ee;
    border-bottom: 1px solid #e0e7d9;
    color: var(--muted);
    font-size: 12px;
}

/* ---------------------------------------------------------------------------------------------------
   The official Birches Group mark, replacing the placeholder "C" in the sidebar and heading the
   sign-in page. The logo is a circular mark on transparency whose outer ring is dark green, so it is
   given a light disc behind it: on the sidebar's near-black gradient that ring would otherwise vanish
   and the mark would read as a broken ring of dots.
   --------------------------------------------------------------------------------------------------- */
.brandmark-img { width: 25px; height: 25px; display: block; border-radius: 50%; background: #f4f7f2; }

/* Beside the sign-in heading, on a light surface — so no backing disc, unlike the sidebar mark. */
.auth-heading { display: flex; align-items: center; gap: 14px; }

.auth-logo { width: 46px; height: 46px; display: block; flex-shrink: 0; }

/* Was an inline style on the sign-in eyebrow, which the content-security policy forbids. */
.auth-eyebrow { color: #bbd4ad; }

/* ---------------------------------------------------------------------------------------------------
   The company wordmark. Both variants ship in wwwroot/img: `birches-group.webp` is black on
   transparency for light surfaces, `birches-group-reverse.webp` is white for dark ones. Every use
   below sits on the sidebar or the sign-in art panel, both dark green, so all of them use the reverse
   variant — the standard mark would render invisible there.
   --------------------------------------------------------------------------------------------------- */
.company-mark { display: block; width: 116px; height: auto; margin-bottom: 12px; opacity: .85; }

.auth-company-mark { display: block; width: 150px; height: auto; margin-bottom: 26px; opacity: .9; }

/* ---------------------------------------------------------------------------------------------------
   Sidebar brand alignment. Two problems with dropping the official mark into the design's "C" tile:
   the tile is a rounded SQUARE with a 1px border, so a circular logo inside it read as double framing;
   and `.brand` centres its items, so against a two-line label the mark floated in the middle of
   "Community / STORYBOARD & PARITY" instead of sitting with the name.

   Both rules need `.sidebar` in front of them. app.css is linked BEFORE spm-ui.css, so a bare
   `.brand` or `.brandmark` here loses the tie to the design sheet — the same specificity trap that
   made the first radio-card fix silently do nothing.
   --------------------------------------------------------------------------------------------------- */
.sidebar .brand { align-items: flex-start; }

.sidebar .brandmark { width: 31px; height: 31px; border: 0; border-radius: 50%; }

/* Linkable conversion of the design package's pagesFoot pagination buttons. */
.pagination a,
.pagination .ellipsis {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    border-radius: 4px;
    min-width: 27px;
    height: 27px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    text-decoration: none;
}

.pagination a.active {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

/* P15: retained capture preview and selectable capture timeline. */
.recording-preview { border: 1px solid #d7e2cd; border-radius: 8px; background: #f5f8ef; overflow: hidden; }
.recording-preview img { display: block; width: 100%; height: auto; }
.capture-timeline { list-style: none; padding: 0 0 0 12px; margin: 0; border-left: 1px solid #d7e2cd; }
.capture-timeline li { position: relative; margin: 0 0 10px 0; }
.capture-timeline li::before { content: ""; position: absolute; left: -17px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: #4e8050; }
.capture-event { display: block; width: 100%; text-align: left; border: 1px solid transparent; border-radius: 7px; background: transparent; padding: 9px 12px; color: inherit; }
.capture-event:hover, .capture-event.selected { background: #f3f8ef; border-color: #d7e2cd; }
.capture-event strong, .capture-event span { display: block; }
.capture-event span { color: #63725e; font-size: 12px; overflow-wrap: anywhere; }

/* P02: keep all seven render columns, including Actions, inside the available panel width. */
.storyboard-library-table .table-wrap { overflow-x: hidden; }
.storyboard-library-table table { table-layout: fixed; width: 100%; }
.storyboard-library-table th { white-space: normal; overflow-wrap: anywhere; }
.storyboard-library-table th,
.storyboard-library-table td { padding-left: 7px; padding-right: 7px; min-width: 0; overflow-wrap: anywhere; }
.storyboard-library-table th:nth-child(1) { width: 18%; }
.storyboard-library-table th:nth-child(2) { width: 13%; }
.storyboard-library-table th:nth-child(3) { width: 12%; }
.storyboard-library-table th:nth-child(4) { width: 15%; }
.storyboard-library-table th:nth-child(5) { width: 14%; }
.storyboard-library-table th:nth-child(6) { width: 15%; }
.storyboard-library-table th:nth-child(7) { width: 13%; }
.storyboard-library-table td .stack { gap: 5px; align-items: flex-start; }
.storyboard-library-table td.actions { white-space: normal; }
.storyboard-library-table td.actions .btn { max-width: 100%; white-space: normal; text-align: center; }
.storyboard-library-table .docs-buttons { max-width: 100%; }
.storyboard-library-table .docchip { max-width: 100%; }
.storyboard-library-table .clipped,
.journey-overview-page .clipped { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* P03: IDs and measured history can wrap within the panel while retaining the full value on hover. */
.journey-overview-page .titlebar > div:first-child { min-width: 0; }
.journey-overview-page .titlebar .eyebrow,
.journey-overview-page .titlebar h1 { overflow-wrap: anywhere; }
.journey-overview-page .workspace-meta { flex-wrap: wrap; }
.journey-overview-page .workspace-meta .clipped { max-width: min(100%, 260px); }
.journey-overview-page .table-wrap table { table-layout: fixed; width: 100%; }
.journey-overview-page .table-wrap th { white-space: normal; }
.journey-overview-page .table-wrap td { overflow-wrap: anywhere; }
.journey-overview-page .table-wrap td.actions { white-space: normal; }
.journey-overview-page .table-wrap td.actions .btn { margin: 2px; }

/* WO-UI-3: P13 six-column recordings table and P01 dashboard render spacing. */
.recordings-page .table-wrap { overflow-x: hidden; }
.recordings-page .table-wrap table { table-layout: fixed; width: 100%; }
.recordings-page .table-wrap th,
.recordings-page .table-wrap td { min-width: 0; padding-left: 8px; padding-right: 8px; overflow-wrap: anywhere; }
.recordings-page .table-wrap th { white-space: normal; }
.recordings-page .table-wrap th:nth-child(1) { width: 20%; }
.recordings-page .table-wrap th:nth-child(2) { width: 19%; }
.recordings-page .table-wrap th:nth-child(3) { width: 11%; }
.recordings-page .table-wrap th:nth-child(4) { width: 13%; }
.recordings-page .table-wrap th:nth-child(5) { width: 20%; }
.recordings-page .table-wrap th:nth-child(6) { width: 17%; }
.recordings-page .table-wrap .clipped { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recordings-page .table-wrap td.actions { white-space: normal; }
.recordings-page .table-wrap td.actions .btn { max-width: 100%; margin: 2px; white-space: normal; text-align: center; }
.dashboard-page .dashboard-filters { margin-bottom: 16px; }
.dashboard-page .banner { margin-bottom: 16px; }
.dashboard-page .dashboard-coverage-track { display: block; width: 100%; height: 7px; margin-top: 7px; accent-color: #668f59; }
/* End WO-UI-3. */

/* WO-UI-5: space P15's capture panels from the events and context row. */
.content > .metrics.five + .grid2 + .grid21 { margin-top: 18px; }
/* End WO-UI-5. */

/* Owner 2026-09-25: a notice that follows a panel or grid touched it (Recording setup's "The recording was not
   started" sat flush under the configuration panels). Every notice after other content gets the package's
   18px vertical rhythm above it; vertical margins collapse, so a sibling's own bottom margin is not doubled. */
.banner:not(:first-child) { margin-top: 18px; }

/* WO-UI-6: P15 panel rows use the shared stack and field rhythm. */
.recording-session-panels .panelbody { overflow-wrap: anywhere; }
.recording-session-panels .panelbody > .stack > .field,
.recording-session-lower .panelbody > .stack > .field { margin-bottom: 0; }
.recording-session-panels .field > span,
.recording-session-lower .field > span { display: block; margin-bottom: 6px; }
.recording-session-panels .panelbody > .stack > ul { margin: 0; }
/* Owner 2026-09-24: the lower row (Captured events, Session context) sits 18px below the capture panels, the grid's own gap. */
.recording-session-lower { margin-top: 18px; }
/* Owner 2026-09-24: the Storyboard library's Recording now strip sits 22px above the metric tiles, the tiles' own bottom gap; rows are 12px apart with none after the last. */
.recording-now-strip { margin-bottom: 22px; }
.recording-now-strip .recording-now-row + .recording-now-row { margin-top: 12px; }
.recording-session-lower .capture-timeline { display: flex; flex-direction: column; gap: 14px; }
.recording-session-lower .capture-timeline li { margin-bottom: 0; }
.recording-session-lower .capture-event.stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.recording-session-lower .capture-event .pill { align-self: flex-start; }
.recording-session-panels .pill,
.recording-session-lower .capture-event .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* End WO-UI-6. */

/* Owner 2026-09-24 03:3x: buttons side by side need a gap; the rename pencil sits left of the capture name. */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* A narrow cell stacks its buttons evenly, with the same gap, instead of wrapping them into a stagger. */
.row-actions.stacked { flex-direction: column; align-items: stretch; }
td.actions { white-space: nowrap; }
/* Owner 2026-09-26 ("how many bug fixes we have in these gap issues"): any two buttons side by side in a table
   cell get the gap, not only cells someone remembered to mark td.actions. Flex containers keep their own gap. */
td > .btn + .btn { margin-left: 8px; }
.capture-name-editor { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.capture-name-editor .input { min-width: 280px; }
.capture-name-line { margin: 4px 0 14px; }
.capture-row { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: start; }
.capture-row > .capture-name-editor { padding-top: 6px; }
.capture-row > .capture-name-editor.editing { grid-column: 1 / -1; padding-top: 0; }
.capture-rename { padding: 2px 8px; }

/* WO-PM-1.h: P03 acting-client row sits in the definition grid like its neighbours. */
dl.kv + dl.kv { margin-top: 12px; }
.acting-client-editor { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acting-client-editor .input { min-width: 240px; min-height: 30px; padding: 5px 9px; }
.acting-client-editor .help { flex-basis: 100%; font-size: 11px; color: var(--muted); font-weight: 400; }
.acting-client-editor [role="alert"] { flex-basis: 100%; color: var(--red); }

/* Owner 2026-09-24: a lighter subtext explains what each counterpart verdict means. */
.verdict-explain { color: #6b7a66; line-height: 1.45; margin: 2px 0 6px; max-width: 72ch; }

/* Owner 2026-09-24: the exclude box is its own group — gaps between field, button and note, set apart from Link. */
.exclude-box { display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid #e3e8df; }
.exclude-box > .field { width: 100%; margin: 0; }
.exclude-box > .verdict-explain { margin: 0; }

/* Owner 2026-09-24: the copied ticket block, shown above the capture so it can also be copied by hand. */
.capture-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px;
    padding: 12px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.capture-bar-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ticket-copy { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ticket-copied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 20px; font-size: 12px; font-weight: 600; }
.ticket-copy > .ticket-text { width: 100%; font-family: Consolas, monospace; font-size: 11px; line-height: 1.6; resize: vertical; }
.values-comparison thead th { font-size: 11px; color: var(--muted); }
.values-comparison tr.values-different td { color: var(--red); font-weight: 600; }
.values-comparison tr.values-missing td { color: var(--muted); font-style: italic; }
.run-recheck-panel { margin-bottom: 18px; }
.run-recheck-panel .recheck-summary { gap: 7px; }
.run-recheck-panel .recheck-reasons { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.danger { background: var(--red-soft); border-color: #f0c9c3; color: var(--red); }

/* Owner 2026-09-26 03:09: the value table's page-spec cell - Ignore and 'Same as' stacked evenly, compact, aligned. */
td.spec-cell { min-width: 190px; }
td.spec-cell > * + * { margin-top: 8px; }
td.spec-cell .checkbox { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; }
td.spec-cell .checkbox input { margin: 0; }
td.spec-cell select { display: block; width: 100%; max-width: 220px; min-height: 30px; padding: 4px 26px 4px 9px; font-size: 11px; }

/* Owner 2026-09-26 03:18: legacy and new site told apart at a glance - two labelled cards, one colour edge each. */
.page-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.page-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; }
.page-side.legacy { border-left-color: #9b7424; }
.page-side.newsite { border-left-color: var(--green); }
.page-side .side-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.page-side.legacy .side-label, .side-label-legacy b { color: #805d1f; }
.page-side.newsite .side-label, .side-label-newsite b { color: var(--green); }
.page-side .side-path { font-size: 13px; overflow-wrap: anywhere; }
.page-side .subtext { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.surface-label.side-label-legacy { border-bottom: 3px solid #9b7424; }
.surface-label.side-label-newsite { border-bottom: 3px solid var(--green); }

/* A long run id (RC-<32 hex>) must not run past its column; the full id stays in the title. */
.run-id-clip { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }