/* FEAT-ONEDOOR-01 (#564) Slice 1a-i — in-shell findings READ view styles.
 *
 * Relocated from findings.html's inline <style> (read list/table subset: filters, stats cards, table,
 * badges, placeholder). EVERY selector is scoped under #view-findings so these rules cannot bleed into the
 * dashboard shell or the hidden #findings-export-content capture area. Colour uses design TOKENS only — no
 * raw hex / rgb(a) literals (M-3 / token-literal gates); tints use color-mix with a token. Final light/dark
 * fidelity is confirmed in the Preview V-walk; the detail modal / advanced-search styling land in 1a-ii. */

/* ── Pop-up toolbar (V4 #564: the moved search/filter controls live in the W9 card pop-up) ── */
#view-findings .fn-card-toolbar, #view-issues .fn-card-toolbar {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0; flex-wrap: wrap;
}
#view-findings .fn-card-toolbar input[type="text"],
#view-findings .fn-card-toolbar select,
#view-issues .fn-card-toolbar input[type="text"],
#view-issues .fn-card-toolbar input[type="date"],
#view-issues .fn-card-toolbar select {
    height: 36px; padding: 0 0.85rem; border-radius: 9999px;
    background: var(--bg-secondary); border: 1px solid var(--glass-border);
    color: var(--text-primary); font-family: var(--font-family); font-size: 0.82rem;
    outline: none; transition: var(--transition);
}
#view-findings .fn-card-toolbar input[type="text"], #view-issues .fn-card-toolbar input[type="text"] { width: 230px; padding-left: 1rem; }
/* Keyboard focus must stay visible (CR a11y): a token-based focus-visible ring replaces the removed outline. */
#view-findings .fn-card-toolbar input[type="text"]:focus-visible,
#view-findings .fn-card-toolbar select:focus-visible,
#view-issues .fn-card-toolbar input:focus-visible,
#view-issues .fn-card-toolbar select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-findings .fn-card-toolbar select option, #view-issues .fn-card-toolbar select option { background: var(--bg-secondary); color: var(--text-primary); }

#view-findings .fn-clear-btn, #view-issues .fn-clear-btn {
    height: 36px; padding: 0 1rem; border-radius: 9999px; cursor: pointer;
    background: var(--bg-secondary); border: 1px solid var(--glass-border);
    color: var(--text-secondary); font-family: var(--font-family); font-size: 0.82rem;
    transition: var(--transition); display: flex; align-items: center; gap: 0.35rem;
}
#view-findings .fn-clear-btn:hover, #view-issues .fn-clear-btn:hover { border-color: var(--c-red); color: var(--text-primary); }
#view-findings .fn-filter-count, #view-issues .fn-filter-count { margin-left: auto; font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }
#view-findings .fn-norp, #view-issues .fn-norp {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.1rem 0.45rem; border-radius: 9999px;
    color: var(--text-secondary); background: color-mix(in srgb, var(--c-gray) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-gray) 28%, transparent);
}
#view-findings .fn-muted, #view-issues .fn-muted { color: var(--text-secondary); }
#view-findings .fn-rp-date, #view-issues .fn-rp-date { font-size: 0.8rem; }
#view-findings .fn-desc-cell, #view-issues .fn-desc-cell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Stats ── */
/* #565 slice 3 (V-FAIL fix): the stat-card vocabulary is a SHARED component — the Findings overview/watchlist
   grid (#view-findings) AND the Issues breach grid (#view-issues #fn-issues-cards, built by the same
   FindingsView.renderCardGroup). Dual-scope the selectors so the same declarations style both views (single
   source; no duplicated rule bodies). Specificity is unchanged (one ID either way). Findings-only rules —
   #view-findings.active flex layout, .fn-cr-mode hide, the table — are NOT dual-scoped. */
#view-findings .fn-stats, #view-issues .fn-stats { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.75rem 1.5rem 0; flex-shrink: 0; }
#view-findings .fn-stat-group, #view-issues .fn-stat-group { border-radius: 16px; padding: 0.75rem 1rem 0.85rem; border: 1px solid var(--glass-border); }
#view-findings .fn-stat-group-label, #view-issues .fn-stat-group-label {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--text-secondary); opacity: 0.85; margin: 0 0 0.4rem 0.1rem;
    display: flex; align-items: center; gap: 0.4rem;
}
#view-findings .fn-stat-group-label::before, #view-issues .fn-stat-group-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
#view-findings .fn-stat-group.attention .fn-stat-group-label, #view-issues .fn-stat-group.attention .fn-stat-group-label { color: var(--text-secondary); opacity: 0.95; } /* #617 slice 8: yellow-text ban — legible header colour (was --c-yellow) */
#view-findings .fn-stats-grid, #view-issues .fn-stats-grid { display: grid; gap: 0.65rem; }
#view-findings .fn-stats-overview, #view-issues .fn-stats-overview  { grid-template-columns: repeat(6, 1fr); }
#view-findings .fn-stats-attention, #view-issues .fn-stats-attention { grid-template-columns: repeat(5, 1fr); }
#view-findings .fn-stat, #view-issues .fn-stat {
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: 13px; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem;
    cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
#view-findings .fn-stat:hover, #view-issues .fn-stat:hover { border-color: color-mix(in srgb, var(--primary) 55%, transparent); transform: translateY(-1px); }
#view-findings .fn-stat.active, #view-issues .fn-stat.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
#view-findings .fn-stat.active-danger, #view-issues .fn-stat.active-danger { border-color: var(--c-red); box-shadow: 0 0 0 1px var(--c-red) inset; }
#view-findings .fn-stat-icon, #view-issues .fn-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
#view-findings .fn-stat-icon.primary, #view-issues .fn-stat-icon.primary { background: var(--primary-gradient); color: var(--c-white); }
#view-findings .fn-stat-icon.success, #view-issues .fn-stat-icon.success { background: var(--success-gradient); color: var(--c-white); }
#view-findings .fn-stat-icon.danger, #view-issues .fn-stat-icon.danger  { background: var(--danger-gradient);  color: var(--c-white); }
#view-findings .fn-stat-icon.warning, #view-issues .fn-stat-icon.warning { background: var(--warning-gradient); color: var(--c-white); }
#view-findings .fn-stat-label, #view-issues .fn-stat-label { font-size: 0.76rem; color: var(--text-secondary); margin-bottom: 0.05rem; }
#view-findings .fn-stat-value, #view-issues .fn-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
#view-findings .fn-stat-subline, #view-issues .fn-stat-subline { font-size: 0.74rem; color: var(--text-secondary); font-weight: 600; margin-top: 2px; line-height: 1.2; }

/* ── #606 per-card delta badges + "what changed" popover (ported #454/#458) ── */
/* value becomes a wrap flow so the inline badge drops below the number in a tight (6-up/5-up/2-up) card
   instead of overflowing the grid column. */
#view-findings .fn-stat-value, #view-issues .fn-stat-value { display: flex; align-items: center; flex-wrap: wrap; column-gap: 0; row-gap: 1px; }
#view-findings .fn-stat-delta, #view-issues .fn-stat-delta {
    display: inline-flex; align-items: center; gap: 1px; margin-left: 0.4rem; padding: 1px 5px 1px 3px;
    border-radius: 999px; font-size: 0.6rem; font-weight: 800; line-height: 1.4; letter-spacing: .01em; white-space: nowrap;
}
#view-findings .fn-stat-delta i, #view-issues .fn-stat-delta i { font-size: 0.62rem; }
#view-findings .fn-stat-delta.up, #view-issues .fn-stat-delta.up    { color: var(--tint-success-ink); background: color-mix(in srgb, var(--c-green) 12%, transparent); }
#view-findings .fn-stat-delta.down, #view-issues .fn-stat-delta.down  { color: var(--tint-danger-ink);  background: color-mix(in srgb, var(--c-red) 10%, transparent); }
#view-findings .fn-stat-delta.churn, #view-issues .fn-stat-delta.churn { color: var(--text-secondary); background: color-mix(in srgb, var(--c-yellow) 14%, transparent); } /* #617 slice 8: yellow-text ban — legible ink (was --tint-warning-ink); warning tint stays on the background */

/* popover is appended to <body> → unscoped .fn-prov-* (single shared surface; #461 V-F5 opaque) */
.fn-prov-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--text-primary) 20%, transparent); z-index: 1200; }
.fn-prov-pop { position: fixed; background: var(--c-white); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 12px 40px color-mix(in srgb, var(--text-primary) 22%, transparent); width: min(420px,92vw); max-height: 80vh; overflow: auto; font-size: 0.82rem; }
.fn-prov-head { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-color); }
.fn-prov-title { font-weight: 800; }
.fn-prov-close { background: none; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--text-secondary); padding: 0 4px; }
.fn-prov-body { padding: 0.4rem 0.9rem 0.8rem; }
.fn-prov-sec { margin-top: 0.5rem; }
.fn-prov-sec-head { margin: 0.4rem 0 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); font-weight: 800; }
.fn-prov-sec.in .fn-prov-sec-head  { color: var(--tint-success-ink); }
.fn-prov-sec.out .fn-prov-sec-head { color: var(--tint-danger-ink); }
.fn-prov-row { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border-radius: 6px; padding: 4px 6px; cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
.fn-prov-row.empty { cursor: default; color: var(--text-secondary); }
.fn-prov-row:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.fn-prov-row.gone { cursor: default; opacity: 0.6; }
.fn-prov-row.gone:hover { background: none; }
.fn-prov-id { font-weight: 800; font-size: 0.72rem; white-space: nowrap; }
.fn-prov-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.fn-prov-note { color: var(--text-secondary); padding: 0.4rem 0; }

/* ── Table ── */
/* W1 (#564 V-walk 2026-10-03): the standalone findings page used <body> as the scroll viewport; in the shell
   .main-content is the page scroller, so #view-findings (a .domain-view block) just grew and the whole page
   scrolled — the findings table AND the CR log never got a bounded height to scroll INTERNALLY ("paging/scroll
   defective at depth", both tables). Fix: make the ACTIVE findings view a bounded flex column filling
   .main-content, with min-height:0 down the flex chain so the inner overflow:auto containers scroll internally.
   Scoped to #view-findings only — .main-content and the other domain-views are untouched. */
#view-findings.active { display: flex !important; flex-direction: column; flex: 1; min-height: 0; }
#view-findings .fn-main, #view-findings .fn-table-col, #view-findings .fn-table-panel,
#view-findings .fn-table-inner, #view-findings .fn-cr-panel, #view-findings .fn-cr-log-wrap { min-height: 0; }
#view-findings .fn-main { display: flex; flex: 1; overflow: hidden; padding: 1rem 1.25rem 1.25rem; }
#view-findings .fn-table-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#view-findings .fn-table-panel {
    flex: 1; overflow-y: auto; background: var(--bg-card);
    border: 1px solid var(--glass-border); border-radius: 20px; display: flex; flex-direction: column;
}
#view-findings .fn-table-inner { overflow: auto; flex: 1; }
#view-findings table.fn-table { width: 100%; border-collapse: collapse; }
#view-findings table.fn-table thead th {
    /* V5.1 (#564 REWALK-2): density matched to the legacy findings table (0.65rem 0.85rem). */
    padding: 0.55rem 0.85rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--c-white); background: var(--primary); border-bottom: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
    white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
#view-findings table.fn-table thead th:hover { color: var(--c-white); }
#view-findings table.fn-table thead th.sorted { color: var(--c-red); }
#view-findings table.fn-table tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--c-gray) 12%, transparent); transition: background 0.15s; }
#view-findings table.fn-table tbody tr:last-child { border-bottom: none; }
#view-findings table.fn-table tbody tr:hover { background: color-mix(in srgb, var(--c-gray) 7%, transparent); }
#view-findings table.fn-table tbody tr.selected { background: color-mix(in srgb, var(--primary) 18%, transparent); }
#view-findings table.fn-table tbody td {
    /* V5.1 (#564 REWALK-2): legacy density — 0.65rem 0.85rem / 0.8rem (was 0.85rem 1.25rem / 0.875rem: tall rows). */
    padding: 0.65rem 0.85rem; font-size: 0.8rem; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
#view-findings table.fn-table tbody td.fn-remark-cell {
    white-space: normal; overflow: visible; text-overflow: clip; min-width: 240px; max-width: 380px;
    word-break: break-word; vertical-align: top;
}
#view-findings .fn-remark-list, #view-issues .fn-remark-list { margin: 0; padding-left: 1.05em; }
#view-findings .fn-remark-list li, #view-issues .fn-remark-list li { margin: 0.12rem 0; line-height: 1.3; }
#view-findings .fn-id, #view-issues .fn-id { font-weight: 700; color: var(--c-red); font-size: 0.82rem; }
/* rp_updated_no_cr drill-down separator row ("Closed — unresolved breach (N)") */
#view-findings .fn-breach-sep { background: color-mix(in srgb, var(--c-gray) 8%, transparent); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--text-secondary); padding: 0.4rem 0.6rem; }

/* Status badges (scoped so they can't collide with any dashboard .badge) */
#view-findings .badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
#view-findings .badge-closed { background: color-mix(in srgb, var(--c-green) 15%, transparent);  color: var(--c-green); }
#view-findings .badge-open   { background: color-mix(in srgb, var(--c-red) 12%, transparent);    color: var(--c-red); }
#view-findings .badge-inprog { background: color-mix(in srgb, var(--c-orange) 16%, transparent); color: var(--c-orange); }
#view-findings .badge-other  { background: color-mix(in srgb, var(--c-gray) 14%, transparent);   color: var(--text-secondary); }

/* Loading / empty */
#view-findings .fn-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; color: var(--text-secondary); padding: 3rem; text-align: center; }
#view-findings .fn-placeholder i { font-size: 2.5rem; opacity: 0.3; }
#view-findings .fn-placeholder p { font-size: 0.9rem; }

/* ── Detail panel (Slice 1a-ii) — width-animated side panel inside .fn-main ── */
#view-findings .fn-detail-panel { width: 0; overflow: hidden; transition: width 0.25s ease; flex-shrink: 0; }
#view-findings .fn-detail-panel.open { width: 460px; overflow-y: auto; margin-left: 1rem; }
#view-findings .fn-detail-inner { min-width: 420px; padding: 1rem 1.1rem; background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 20px; }
#view-findings .fn-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; }
#view-findings .fn-detail-id { font-weight: 700; color: var(--c-red); font-size: 0.82rem; }
/* D-5 (#564 REWALK-3e): the `name` column value — its own line between the ID and the finding description. */
#view-findings .fn-detail-ref { font-weight: 600; color: var(--text-secondary); font-size: 0.78rem; margin: 0.1rem 0; }
#view-findings .fn-detail-name { font-weight: 700; color: var(--text-primary); font-size: 1rem; line-height: 1.25; }
#view-findings .fn-close-btn { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#view-findings .fn-close-btn:hover { color: var(--text-primary); border-color: var(--c-red); }
#view-findings .fn-section-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin: 0.9rem 0 0.4rem; }
#view-findings .fn-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.9rem; }
#view-findings .fn-field { min-width: 0; }
#view-findings .fn-field.full { grid-column: 1 / -1; }
#view-findings .fn-field-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.1rem; }
#view-findings .fn-field-value { font-size: 0.84rem; color: var(--text-primary); word-break: break-word; }
#view-findings .fn-field-value.muted { color: var(--text-secondary); }
#view-findings .fn-field-value.arabic { direction: rtl; text-align: right; line-height: 1.5; }
#view-findings .fn-rri-card, #view-findings .fn-rp-card { border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.7rem 0.8rem; margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
/* W2 (#564 V-walk 2026-10-03): restore legacy's tinted detail-section panels — the Linked-RRI block its
   lavender (violet = --primary), the RP cards a subtle neutral — lost in the flat in-shell port. Tokens only. */
#view-findings .fn-rri-card { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: color-mix(in srgb, var(--primary) 32%, transparent); }
#view-findings .fn-rp-card { background: color-mix(in srgb, var(--c-gray) 7%, transparent); }
#view-findings .fn-rp-id { font-weight: 700; color: var(--primary); font-size: 0.8rem; }
/* mobile: dim backdrop behind the detail panel when open */
@media (max-width: 720px) {
    #view-findings.detail-open::after { content: ""; position: fixed; inset: 0; background: color-mix(in srgb, var(--c-ink) 35%, transparent); z-index: 40; }
    #view-findings .fn-detail-panel.open { position: fixed; inset: auto 0 0 0; width: auto; max-height: 85vh; margin: 0; border-radius: 16px 16px 0 0; z-index: 50; }
}

/* ── Advanced search (Slice 1a-ii): button, chip, builder modal ── */
#view-findings .fn-adv-btn {
    height: 36px; padding: 0 1rem; border-radius: 9999px; cursor: pointer;
    background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    color: var(--primary); font-family: var(--font-family); font-size: 0.82rem; transition: var(--transition);
    display: flex; align-items: center; gap: 0.35rem;
}
#view-findings .fn-adv-btn:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }
#view-findings .fn-adv-chip { align-items: center; gap: 0.6rem; margin: 0 1.25rem 0.5rem; padding: 0.4rem 0.7rem; border-radius: 9999px; width: fit-content; max-width: calc(100% - 2.5rem); background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
#view-findings .fn-adv-chip-label { color: var(--primary); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
#view-findings .fn-adv-chip-x { background: transparent; border: none; color: var(--primary); cursor: pointer; display: flex; align-items: center; padding: 0.15rem; border-radius: 50%; }
#view-findings .fn-adv-chip-x:hover { color: var(--text-primary); background: color-mix(in srgb, var(--c-gray) 14%, transparent); }
/* modal shell (scoped to the findings view).
   B4 (ruling 2026-10-03): the modal SURFACE is SOLID var(--c-white) (no translucent bleed).
   P-9 (REWALK-3b, option (a) — STANDARD-MODAL, owner to adjudicate on the walk): the backdrop is a LIGHT dim
   through which the page stays clearly visible — no backdrop-filter, no heavy dark edge-bands. Narrow modals keep
   inset:0 centered (unchanged — they passed); the wide CARD modal covers ONLY the content region (left offset by
   the live sidebar width) so the sidebar stays visible + clickable (D-1).
   P-5 (REWALK-3b): the earlier card overlay used `inset:0` on a position:fixed overlay → it filled the WHOLE
   viewport (covering the sidebar — hence D-1's "nav does nothing", P-9's near-full-bleed, and "reclaims nothing"
   because inset:0 is always the full viewport). THE OPERATIVE FIX: pin the overlay to the content region with
   `left: var(--fn-rail); right: 0` (rail tracks the live sidebar width via a sibling-combinator var), so the
   sidebar stays uncovered and collapsing it genuinely WIDENS the overlay + the calc(100%) modal (self-walk
   measures this at a wide viewport, asserting the overlay starts at the sidebar edge AND reaches the viewport edge
   AND the width grows on collapse). This requires #view-findings NOT to be a containing block for the fixed
   overlay — handled at the ROOT: the fadeInDomain keyframe is now opacity-only (no transform, styles.css), so
   #view-findings never establishes a CB and the overlay is always viewport-relative. No per-open `animation:none`
   toggle, and no re-fade on close. The overlay-position rule below is now ID-based (NOT gated on .fn-modal-open);
   .fn-modal-open is purely the "card modal is open" MARKER the D-2 inter-module nav hook keys off.
   P-9a / D-6 (REWALK-3c/3d): ALL findings modal overlays share ONE pattern — a LIGHT dim backdrop (var(--c-ink)
   22%) through which the page stays visible, not a dark void. */
/* #614 slice 4: the card-modal chrome is dual-scoped to #view-issues so the breaches pop-up (#iss-brk-overlay,
   cloned classes) reuses the SAME declarations — single source, specificity unchanged (one id either branch). The
   #view-findings-specific rules (.fn-cards-entry, #fn-card-modal-overlay rail position) are NOT dual-scoped; the
   Issues overlay's rail position + the Option B toggle live in issuesView.css. */
#view-findings .fn-modal-overlay, #view-issues .fn-modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--c-ink) 22%, transparent); z-index: 1200; align-items: center; justify-content: center; }
#view-findings .fn-modal, #view-issues .fn-modal { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 16px; box-shadow: 0 16px 48px color-mix(in srgb, var(--c-ink) 30%, transparent); margin: auto; transition: width 0.2s ease; }
/* P-5 content-region rail: the card overlay starts after the sidebar and reclaims width on collapse. Tracks the
   live sidebar width (240 / 80 collapsed; 0 on mobile where the sidebar is hidden) via a sibling-combinator var. */
.main-content { --fn-rail: 240px; }
.sidebar.collapsed ~ .main-content { --fn-rail: 80px; }
@media (max-width: 768px) { .main-content { --fn-rail: 0px; } }
/* (REWALK-3b residual root-fix) #view-findings is no longer a containing block for the fixed overlay — the
   fadeInDomain keyframe is now opacity-only (styles.css), so NO per-open `animation:none` toggle is needed and
   there is NO re-fade on close. .fn-modal-open is purely the "card modal is open" MARKER. */
/* D-6 (#564 REWALK-3d): the wide modals (findings card pop-up + Submit-CR) share ONE frame — both cover the
   content region (right of the sidebar) with a LIGHT dim, and both reflow because `left` tracks --fn-rail. ID-based
   (not gated on .fn-modal-open) since the opacity-only keyframe means #view-findings is never a containing block.
   The narrow modals (adv / export / cr-detail) keep the base inset:0 centered rule above. */
#view-findings #fn-card-modal-overlay, #view-findings #fn-cm-add-overlay {
    inset: auto; top: 0; right: 0; bottom: 0; left: var(--fn-rail, 240px);
    background: color-mix(in srgb, var(--c-ink) 22%, transparent);
}
/* P-6 (REWALK-3b): a visible loading state during the table→detail swap (no blank frame). */
#view-findings .fn-detail-loading { display: flex; align-items: center; gap: 0.6rem; padding: 2rem 1rem; color: var(--text-secondary); font-size: var(--fs-1, 0.85rem); justify-content: center; }
#view-findings .fn-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--c-purple) 22%, transparent); border-top-color: var(--c-purple); animation: fn-spin 0.7s linear infinite; }
@keyframes fn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #view-findings .fn-spinner { animation-duration: 2.4s; } }
#view-findings .fn-modal.fn-adv-modal { width: min(920px, calc(100% - 2rem)); max-width: none; max-height: 88vh; padding: 0; display: flex; flex-direction: column; }
#view-findings .fn-modal-header, #view-issues .fn-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.2rem; border-bottom: 1px solid var(--glass-border); }
#view-findings .fn-modal-title, #view-issues .fn-modal-title { font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; }
#view-findings .fn-modal-close, #view-issues .fn-modal-close { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.1rem; display: flex; }
#view-findings .fn-modal-close:hover, #view-issues .fn-modal-close:hover { color: var(--text-primary); }
/* B1 (#564 W9): cards are the ENTRY surface — hide the inline table + side detail panel (the pop-up is the
   visible table). B2 then adds the top view toggle + relocates the admin controls. */
#view-findings.fn-cards-entry .fn-table-panel, #view-findings.fn-cards-entry .fn-detail-panel { display: none; }
/* card drill-down pop-up — a wide modal holding the filtered table (or the in-window detail). */
#view-findings .fn-modal.fn-card-modal, #view-issues .fn-modal.fn-card-modal {
    /* V5.2-R / P-5 (#564 REWALK-3): FILL the content-area overlay (calc(100%) of #view-findings); it reflows
       automatically when the sidebar collapses (the content area grows), and the fixed-layout table grows the
       Description column to show more. */
    width: calc(100% - 2rem); max-width: none;
    max-height: 92vh; padding: 0; display: flex; flex-direction: column; transition: width 0.2s ease;
}
/* P-2 (#564 REWALK-3): size the body to CONTENT (flex 0 1 auto) so a small population gives a SHORT modal — no
   tall dark void around a 2-row table — while a full page still scrolls within the modal's max-height. */
#view-findings .fn-card-modal-body, #view-issues .fn-card-modal-body { overflow: auto; overscroll-behavior: contain; padding: 0.4rem 0.75rem 0.75rem; min-height: 0; flex: 0 1 auto; }
#view-findings .fn-card-table-wrap, #view-issues .fn-card-table-wrap { overflow: auto; }
/* V5.1-R / V5.2-R (#564 REWALK-3): the pop-up table IS the site-standard .rd-table (solid white, zebra striping,
   --rd-line borders, --fs/--rd-font). `.fn-rd` keeps the findings cells + makes the Description column the
   FLEXIBLE one: it takes the remaining width, so collapsing the rail (wider modal) shows MORE of it. Free-text
   columns WRAP to full text (no ellipsis): Description (D-11), the Watchlist Remark column (P-3) and the
   Regulatory Requirement column (D-7) — row height follows the wrapped content. Short-value cells stay dense.
   table-layout:fixed gives that scaling; HEADERS wrap (white-space:normal) so they are never truncated. */
#view-findings .rd-table.fn-rd { table-layout: fixed; width: 100%; }
#view-findings .rd-table.fn-rd th { white-space: normal; vertical-align: bottom; }                 /* headers wrap, no truncation */
#view-findings .rd-table.fn-rd td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }  /* dense single-line + ellipsis; D-10: vertically centered */
#view-findings .rd-table.fn-rd th:nth-child(1), #view-findings .rd-table.fn-rd td:nth-child(1) { width: 88px; }  /* Finding ID */
/* D-7 (#564 REWALK-3d): the Regulatory Requirement column gets MORE width and WRAPS (no few-word ellipsis) — row
   heights already accommodate the remark bullets, so wrapping is free. Description (col 2) remains the flexible
   remainder; the wider col 3 reclaims the dead space the ellipsis left. */
#view-findings .rd-table.fn-rd th:nth-child(3), #view-findings .rd-table.fn-rd td:nth-child(3) { width: 18%; text-align: right; direction: rtl; }  /* Regulatory requirement (wider than the old 12%; 18% balances vs the Description remainder at narrow widths) */
#view-findings .rd-table.fn-rd td:nth-child(3) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; vertical-align: middle; }
/* D-11 (owner-ruled 2026-10-05): the pop-up Description column WRAPS to full text (was ellipsised) — matching the
   Regulatory Requirement column (col 3), which already wraps; the row height is already paid, so both are full. */
#view-findings .rd-table.fn-rd td:nth-child(2), #view-findings .rd-table.fn-rd td.fn-desc-cell { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
#view-findings .rd-table.fn-rd th:nth-child(4), #view-findings .rd-table.fn-rd td:nth-child(4) { width: 12.5%; }  /* Classification */
#view-findings .rd-table.fn-rd th:nth-child(5), #view-findings .rd-table.fn-rd td:nth-child(5) { width: 10%; }   /* Status */
#view-findings .rd-table.fn-rd th:nth-child(6), #view-findings .rd-table.fn-rd td:nth-child(6) { width: 11%; }   /* RP planned closure */
#view-findings .rd-table.fn-rd th:nth-child(7), #view-findings .rd-table.fn-rd td:nth-child(7) { width: 11%; }   /* RP actual closure */
#view-findings .rd-table.fn-rd th:nth-child(8), #view-findings .rd-table.fn-rd td:nth-child(8) { width: 12.5%; } /* Watchlist remark — col 2 (Description) takes the remainder */
/* P-3 (#564 REWALK-3b): the Watchlist Remark column renders FULLY (independent of reflow) — it WRAPS instead of
   the dense single-line ellipsis (UI_SPEC table rule: wrap, don't clip, a free-text column). word-break breaks a
   long unbreakable token so it can't spill past the column; cells are vertically centered (D-10). */
#view-findings .rd-table.fn-rd td:nth-child(8), #view-findings .rd-table.fn-rd td.fn-remark-cell { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; vertical-align: middle; }
#view-findings .rd-table.fn-rd .fn-desc-cell { max-width: none; }  /* the flexible column — no fixed cap */
#view-findings .rd-table.fn-rd .fn-id { font-weight: 700; color: var(--rd-ink); }  /* site standard — not the old red */
/* V5.3/V5.4 (#564 REWALK-2): the pop-up pager (bottom) + the toolbar; both hide while the in-pop-up DETAIL is
   shown (they belong to the list, not a single finding). */
#view-findings .fn-card-pager, #view-issues .fn-card-pager { flex-shrink: 0; padding: 0.45rem 0.75rem; border-top: 1px solid var(--glass-border); }
#view-findings .fn-card-pager:empty, #view-issues .fn-card-pager:empty { display: none; }
#view-findings .fn-card-toolbar, #view-issues .fn-card-toolbar { flex-shrink: 0; }
#view-findings .fn-card-modal.fn-detail-open .fn-card-toolbar,
#view-findings .fn-card-modal.fn-detail-open .fn-card-pager,
#view-issues .fn-card-modal.fn-detail-open .fn-card-toolbar,
#view-issues .fn-card-modal.fn-detail-open .fn-card-pager { display: none; }
#view-findings .fn-card-back, #view-issues .fn-card-back { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; margin-right: auto; }
#view-findings .fn-card-back:hover, #view-issues .fn-card-back:hover { color: var(--text-primary); }
/* B2 (#564 W10): top view toggle — Findings / Change Requests / Audit + actions (New CR under CR, Export). */
/* B2→W11: the top view toggle moved to the sidebar; what remains here is the content-area action toolbar. */
#view-findings .fn-content-toolbar { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; margin: 0 0 0.9rem; }
/* B3 (#564, folds #578): predefined Submit-CR filter row (narrows the finding picker). */
#view-findings .fn-cm-filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
/* P-8 (#564 REWALK-3): UI_SPEC token styling for the Submit-CR filter selects (were unstyled native selects). */
#view-findings .fn-cm-filter-row select {
    flex: 1; min-width: 130px; height: 36px; padding: 0 0.85rem; border-radius: 9999px;
    background: var(--bg-secondary); border: 1px solid var(--glass-border); color: var(--text-primary);
    font-family: var(--font-family); font-size: 0.82rem; outline: none; transition: var(--transition); cursor: pointer;
}
#view-findings .fn-cm-filter-row select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-findings .fn-cm-filter-row select option { background: var(--bg-secondary); color: var(--text-primary); }
#view-findings .fn-adv-body { padding: 1rem 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem; }
#view-findings .fn-adv-group { border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; background: color-mix(in srgb, var(--primary) 6%, transparent); }
#view-findings .fn-adv-or { text-align: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: var(--primary); margin: 0.1rem 0; }
#view-findings .fn-adv-and { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-secondary); padding-left: 0.2rem; }
#view-findings .fn-adv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
#view-findings .fn-adv-row select, #view-findings .fn-adv-row input { height: 34px; padding: 0 0.55rem; border-radius: 8px; font-family: var(--font-family); font-size: 0.8rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--glass-border); }
#view-findings .fn-adv-field { flex: 1 1 190px; min-width: 160px; }
#view-findings .fn-adv-op { flex: 0 1 150px; min-width: 125px; }
#view-findings .fn-adv-val { flex: 1 1 130px; min-width: 110px; }
#view-findings .fn-adv-n { width: 58px; flex: 0 0 auto; }
#view-findings .fn-adv-unit { flex: 0 0 auto; }
#view-findings .fn-adv-sep { font-size: 0.75rem; color: var(--text-secondary); }
#view-findings .fn-adv-list { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; flex: 1 1 100%; padding: 0.15rem 0; }
#view-findings .fn-adv-chk { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--text-primary); cursor: pointer; }
#view-findings .fn-adv-chk input { height: auto; }
#view-findings .fn-adv-nolist { font-size: 0.76rem; color: var(--text-secondary); font-style: italic; }
#view-findings .fn-adv-row-x { margin-left: auto; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.2rem; display: flex; }
#view-findings .fn-adv-row-x:hover { color: var(--c-red); }
#view-findings .fn-adv-add, #view-findings .fn-adv-add-group { align-self: flex-start; background: transparent; border: 1px dashed color-mix(in srgb, var(--primary) 50%, transparent); color: var(--primary); border-radius: 8px; padding: 0.32rem 0.7rem; font-size: 0.76rem; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; font-family: var(--font-family); }
#view-findings .fn-adv-add:disabled, #view-findings .fn-adv-add-group:disabled { opacity: 0.4; cursor: not-allowed; }
#view-findings .fn-adv-add-group { border-style: solid; }
#view-findings .fn-adv-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.8rem 1.2rem; border-top: 1px solid var(--glass-border); }
#view-findings .fn-adv-count { font-size: 0.75rem; color: var(--text-secondary); }
#view-findings .fn-adv-footer-btns { display: flex; gap: 0.5rem; }
#view-findings .fn-adv-search-btn { height: 36px; padding: 0 1.2rem; border-radius: 9999px; cursor: pointer; border: none; background: var(--primary-gradient); color: var(--c-white); font-family: var(--font-family); font-size: 0.82rem; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }

/* Slice 1b-i — admin-only toolbar anchor (1b-ii mounts the CR + export buttons into it). Shown only in admin
   mode via the shell's global body.admin-mode gate; :empty collapses it when a slice has mounted nothing yet. */
#view-findings .fn-cr-toggle-btn, #view-findings .fn-export-btn, #view-issues .fn-export-btn {
    height: 34px; padding: 0 0.9rem; border-radius: 9999px; cursor: pointer;
    background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    color: var(--primary); font-family: var(--font-family); font-size: 0.8rem; transition: var(--transition);
    display: flex; align-items: center; gap: 0.35rem;
}
#view-findings .fn-cr-toggle-btn:hover, #view-findings .fn-export-btn:hover, #view-issues .fn-export-btn:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }

/* ── CR (Change Request) read/export sub-view (Slice 1b-ii): shown when #view-findings carries fn-cr-mode ── */
#view-findings .fn-cr-panel { display: none; flex-direction: column; flex: 1; min-height: 0; padding: 1rem 1.25rem 1.25rem; gap: 0.6rem; }
#view-findings.fn-cr-mode .fn-main { display: none; }
#view-findings.fn-cr-mode .fn-detail-panel { display: none; }
/* V3 (#564 REWALK-2): the CR view shows ALONE — hide the overview/watchlist cards + the adv-filter chip
   (they sit outside .fn-main, so the rule above didn't catch them → the cards bled into the CR view). */
#view-findings.fn-cr-mode .fn-stats { display: none; }
#view-findings.fn-cr-mode .fn-adv-chip { display: none; }
#view-findings.fn-cr-mode .fn-cr-panel { display: flex; }
#view-findings .fn-cr-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
#view-findings .fn-cr-search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 180px; }
#view-findings .fn-cr-search-wrap i { position: absolute; left: 0.7rem; color: var(--text-secondary); font-size: 0.9rem; pointer-events: none; }
#view-findings .fn-cr-search { width: 100%; height: 36px; padding: 0 0.85rem 0 2.1rem; border-radius: 9999px; background: var(--bg-secondary); border: 1px solid var(--glass-border); color: var(--text-primary); font-family: var(--font-family); font-size: 0.82rem; outline: none; }
#view-findings .fn-cr-search:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-findings .fn-cr-count { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }
#view-findings .fn-cr-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
#view-findings .fn-cr-summary .widget { display: flex; align-items: center; gap: 0.6rem; background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.6rem 0.8rem; }
#view-findings .fn-cr-summary .widget-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--c-white); flex-shrink: 0; }
#view-findings .fn-cr-summary .widget-icon.primary { background: var(--primary-gradient); }
#view-findings .fn-cr-summary .widget-icon.success { background: var(--success-gradient); }
#view-findings .fn-cr-summary .widget-icon.danger  { background: var(--danger-gradient); }
#view-findings .fn-cr-summary .widget-info h3 { margin: 0; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
#view-findings .fn-cr-summary .widget-info p { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
#view-findings .fn-cr-log-wrap { flex: 1; overflow: auto; background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 16px; }
#view-findings table.fn-cr-log-table { width: 100%; border-collapse: collapse; }
#view-findings table.fn-cr-log-table thead th { padding: 0.7rem 0.9rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-white); background: var(--primary); white-space: nowrap; position: sticky; top: 0; z-index: 1; text-align: left; }
#view-findings table.fn-cr-log-table thead th.sorted { color: var(--c-red); }
#view-findings table.fn-cr-log-table tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--c-gray) 12%, transparent); cursor: pointer; transition: background 0.15s; }
#view-findings table.fn-cr-log-table tbody tr:last-child { border-bottom: none; }
#view-findings table.fn-cr-log-table tbody tr:hover { background: color-mix(in srgb, var(--c-gray) 7%, transparent); }
#view-findings table.fn-cr-log-table tbody tr:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
#view-findings table.fn-cr-log-table tbody td { padding: 0.65rem 0.9rem; font-size: 0.82rem; color: var(--text-primary); white-space: nowrap; }
#view-findings .fn-cr-num-badge { font-weight: 700; color: var(--primary); font-size: 0.8rem; }
#view-findings .fn-cr-finding-id { font-weight: 600; color: var(--primary); }
#view-findings .fn-cr-finding-sub { font-size: 0.72rem; color: var(--text-secondary); }
#view-findings .fn-cr-rev { text-align: center; font-weight: 700; }
#view-findings .fn-cr-muted { color: var(--text-secondary); font-size: 0.76rem; }
#view-findings .fn-cr-att-link { color: var(--primary); font-size: 0.76rem; display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; white-space: nowrap; }
#view-findings .fn-cr-att-link:hover { text-decoration: underline; }
#view-findings .fn-cr-status-badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
#view-findings .fn-cr-status-badge.open        { background: color-mix(in srgb, var(--c-red) 12%, transparent);    color: var(--c-red); }
#view-findings .fn-cr-status-badge.in-progress { background: color-mix(in srgb, var(--c-orange) 16%, transparent); color: var(--c-orange); }
#view-findings .fn-cr-status-badge.accepted    { background: color-mix(in srgb, var(--c-green) 15%, transparent);  color: var(--c-green); }
#view-findings .fn-cr-status-badge.rejected    { background: color-mix(in srgb, var(--c-red) 14%, transparent);    color: var(--c-red); }
#view-findings .fn-cr-risk-badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
#view-findings .fn-cr-risk-badge.critical   { background: color-mix(in srgb, var(--c-red) 15%, transparent);    color: var(--c-red); }
#view-findings .fn-cr-risk-badge.high        { background: color-mix(in srgb, var(--c-orange) 16%, transparent); color: var(--c-orange); }
#view-findings .fn-cr-risk-badge.medium      { background: color-mix(in srgb, var(--c-yellow) 18%, transparent); color: var(--text-primary); } /* #617 slice 8: yellow-text ban — legible text (was --c-yellow); yellow tint stays on the background */
#view-findings .fn-cr-risk-badge.low         { background: color-mix(in srgb, var(--c-green) 14%, transparent);  color: var(--c-green); }
#view-findings .fn-cr-risk-badge.negligible  { background: color-mix(in srgb, var(--c-gray) 14%, transparent);   color: var(--text-secondary); }
#view-findings .fn-cr-actions { white-space: nowrap; text-align: center; }
#view-findings .fn-cr-approval-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--bg-secondary); color: var(--primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#view-findings .fn-cr-approval-btn:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
#view-findings .fn-cr-empty, #view-issues .fn-cr-empty { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 2.5rem; color: var(--text-secondary); font-size: 0.86rem; }
#view-findings .fn-cr-empty.error, #view-issues .fn-cr-empty.error { color: var(--c-red); }
#view-findings .fn-cr-norp { font-size: 0.84rem; color: var(--text-secondary); }
/* CR detail overlay (reuses the 1a-ii detail styles above: fn-field-*, fn-rri-card, fn-rp-card, badge) */
#view-findings .fn-modal.fn-cr-detail-modal, #view-findings .fn-modal.fn-export-modal { width: min(860px, calc(100% - 2rem)); max-width: none; max-height: 88vh; padding: 0; display: flex; flex-direction: column; }
/* W3 (#564 V-walk 2026-10-03): contain overlay scroll so reaching a body's end doesn't chain-scroll the page
   behind it. Applies to every scrollable overlay body (CR detail · New-CR · analysis-view · edit). */
#view-findings .fn-cr-detail-body, #view-findings .fn-cm-add-body,
#view-findings .fn-cm-analysis-view-body, #view-findings .fn-cm-edit-body { overscroll-behavior: contain; }
#view-findings .fn-cr-detail-body { padding: 1rem 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
#view-findings .fn-cr-detail-section { border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.75rem 0.85rem; }
#view-findings .fn-cr-detail-section-title { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
#view-findings .fn-cr-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.9rem; }
#view-findings .fn-cr-detail-att { grid-column: 1 / -1; }
#view-findings .fn-field.fn-field-top { margin-top: 0.6rem; }
#view-findings .fn-field.fn-field-gap { margin-top: 0.5rem; }
#view-findings .fn-detail-badge-row { margin-top: 0.45rem; }
/* Export modal field list */
#view-findings .fn-export-note { font-size: 0.78rem; color: var(--text-secondary); margin: 0.9rem 1.2rem 0.75rem; }
#view-findings .fn-export-note strong { color: var(--text-primary); }
#view-findings .fn-export-actions-top { display: flex; gap: 0.5rem; padding: 0 1.2rem 0.6rem; }
#view-findings .fn-export-field-list { padding: 0 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; }
#view-findings .fn-export-group { border: 1px solid var(--glass-border); border-radius: 10px; padding: 0.5rem 0.6rem; }
#view-findings .fn-export-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
#view-findings .fn-export-group-title { font-size: 0.74rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.35rem; }
#view-findings .fn-export-group-toggle { background: transparent; border: 1px solid var(--glass-border); border-radius: 8px; padding: 0.2rem 0.5rem; font-size: 0.7rem; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 0.25rem; font-family: var(--font-family); }
#view-findings .fn-export-group-toggle:hover { color: var(--primary); border-color: var(--primary); }
#view-findings .fn-export-field-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.1rem; }
#view-findings .fn-export-field-row.unselected { opacity: 0.55; }
#view-findings .fn-export-field-row label { flex: 1; display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-primary); cursor: pointer; min-width: 0; }
#view-findings .fn-export-move-btn { background: transparent; border: 1px solid var(--glass-border); border-radius: 6px; width: 24px; height: 24px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#view-findings .fn-export-move-btn:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }
#view-findings .fn-export-move-btn:disabled { opacity: 0.35; cursor: not-allowed; }
#view-findings .fn-export-footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.85rem 1.2rem; border-top: 1px solid var(--glass-border); }
#view-findings .fn-export-footer .fn-export-btn { height: 34px; border: none; background: var(--primary-gradient); color: var(--c-white); font-weight: 600; }

/* ── CR CREATE (Log path) — Slice 1b-iii-a: add overlay + picker + RP list + choice + form + file (tokens only) ── */
/* D-6 (#564 REWALK-3d): the Submit-CR modal width-utilizes + reflows like the findings card pop-up (calc(100%) of
   the content-region overlay, NOT a fixed min(1040px) box). transition for the collapse reflow. */
#view-findings .fn-modal.fn-cm-add-modal { width: calc(100% - 2rem); max-width: none; max-height: 92vh; padding: 0; display: flex; flex-direction: column; transition: width 0.2s ease; }
#view-findings .fn-cm-add-body { padding: 1rem 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; }
#view-findings .fn-cm-empty { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem; color: var(--text-secondary); font-size: 0.84rem; }
#view-findings .fn-cm-empty.error { color: var(--c-red); }
/* finding search */
#view-findings .fn-cm-search-wrap { position: relative; display: flex; align-items: center; }
#view-findings .fn-cm-search-icon { position: absolute; left: 0.75rem; color: var(--text-secondary); font-size: 0.95rem; pointer-events: none; }
#view-findings .fn-cm-search-input { width: 100%; height: 38px; padding: 0 2.2rem; border-radius: 9999px; background: var(--bg-secondary); border: 1px solid var(--glass-border); color: var(--text-primary); font-family: var(--font-family); font-size: 0.85rem; outline: none; }
#view-findings .fn-cm-search-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-findings .fn-cm-search-clear { position: absolute; right: 0.6rem; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: none; padding: 0.2rem; }
#view-findings #fn-cm-search:not(:placeholder-shown) ~ .fn-cm-search-clear { display: block; }
#view-findings .fn-cm-search-clear:hover { color: var(--text-primary); }
/* finding results — D-6 (#564 REWALK-3d): a dense site-standard .rd-table picker (matches the findings pop-up),
   not a loose card-list. Rows are clickable (role=button); the Description column is the flexible, rtl one. */
#view-findings .fn-cm-rd { table-layout: fixed; width: 100%; }
#view-findings .fn-cm-rd th { white-space: normal; vertical-align: bottom; }
#view-findings .fn-cm-rd td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
/* D-9 (#564 REWALK-3e): the ID column renders every finding_id ("FND-1824") in FULL — wider + no ellipsis. */
#view-findings .fn-cm-rd th:nth-child(1), #view-findings .fn-cm-rd td:nth-child(1) { width: 120px; }        /* ID */
#view-findings .fn-cm-rd td:nth-child(1) { white-space: nowrap; overflow: visible; text-overflow: clip; }
#view-findings .fn-cm-rd th:nth-child(3), #view-findings .fn-cm-rd td:nth-child(3) { width: 9%; }           /* RRI */
#view-findings .fn-cm-rd th:nth-child(4), #view-findings .fn-cm-rd td:nth-child(4) { width: 14%; }          /* Classification */
#view-findings .fn-cm-rd th:nth-child(5), #view-findings .fn-cm-rd td:nth-child(5) { width: 11%; }          /* Status — Description (col 2) takes the remainder */
#view-findings .fn-cm-rd td.fn-cm-result-id { font-weight: 700; color: var(--rd-ink); }
#view-findings .fn-cm-rd td.fn-cm-result-desc { direction: rtl; text-align: right; }
#view-findings .fn-cm-result-row { cursor: pointer; }
#view-findings .fn-cm-result-row:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
#view-findings .fn-cm-result-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* finding card */
#view-findings .fn-cm-finding-card { border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.75rem 0.85rem; background: color-mix(in srgb, var(--primary) 5%, transparent); }
#view-findings .fn-cm-card-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.45rem; display: flex; align-items: center; gap: 0.35rem; }
#view-findings .fn-cm-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem 0.9rem; }
#view-findings .fn-cm-card-field { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.1rem; }
#view-findings .fn-cm-card-val { font-size: 0.82rem; color: var(--text-primary); }
#view-findings .fn-cm-card-desc { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.4rem; direction: rtl; text-align: right; }
/* RP list */
#view-findings .fn-cm-rp-list-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin: 0.6rem 0 0.35rem; }
#view-findings .fn-cm-rp-item { border: 1px solid var(--glass-border); border-radius: 10px; margin-bottom: 0.4rem; overflow: hidden; }
#view-findings .fn-cm-rp-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; cursor: pointer; }
#view-findings .fn-cm-rp-header:hover { background: color-mix(in srgb, var(--c-gray) 8%, transparent); }
#view-findings .fn-cm-rp-header:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
#view-findings .fn-cm-rp-id { font-weight: 700; color: var(--primary); font-size: 0.8rem; }
#view-findings .fn-cm-rp-desc { flex: 1; font-size: 0.76rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-findings .fn-cm-rp-status-badge { font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 999px; }
#view-findings .fn-cm-rp-status-badge.open { background: color-mix(in srgb, var(--c-red) 12%, transparent); color: var(--c-red); }
#view-findings .fn-cm-rp-status-badge.closed { background: color-mix(in srgb, var(--c-green) 15%, transparent); color: var(--c-green); }
#view-findings .fn-cm-rp-due { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }
#view-findings .fn-cm-rp-expand { padding: 0.5rem 0.7rem; border-top: 1px solid var(--glass-border); }
#view-findings .fn-cm-prev-crs { display: flex; flex-direction: column; gap: 0.3rem; }
#view-findings .fn-cm-prev-cr-row { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; font-size: 0.74rem; }
#view-findings .fn-cm-prev-cr-num { font-weight: 700; color: var(--primary); }
#view-findings .fn-cm-prev-cr-field { color: var(--text-secondary); }
#view-findings .fn-cm-prev-cr-val { color: var(--text-primary); }
#view-findings .fn-cm-select-rp-btn { margin-top: 0.5rem; background: transparent; border: 1px dashed color-mix(in srgb, var(--primary) 50%, transparent); color: var(--primary); border-radius: 8px; padding: 0.35rem 0.75rem; font-size: 0.78rem; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; font-family: var(--font-family); }
#view-findings .fn-cm-select-rp-btn:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
/* choice panel */
#view-findings .fn-cm-choice-title { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
#view-findings .fn-cm-choice-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
#view-findings .fn-cm-choice-btn { flex: 1 1 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.75rem 0.9rem; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--bg-card); cursor: pointer; font-family: var(--font-family); text-align: left; color: var(--text-primary); }
#view-findings .fn-cm-choice-btn:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
#view-findings .fn-cm-choice-btn strong { font-size: 0.85rem; }
#view-findings .fn-cm-choice-btn span { font-size: 0.72rem; color: var(--text-secondary); }
/* Log form */
#view-findings .fn-cm-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.3rem; }
#view-findings .fn-cm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.2rem; }
#view-findings .fn-cm-form-group { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
#view-findings .fn-cm-form-group.full { grid-column: 1 / -1; }
#view-findings .fn-cm-form-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
#view-findings .fn-cm-req { color: var(--c-red); }
#view-findings .fn-cm-label-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
#view-findings .fn-cm-form-value, #view-findings .fn-cm-form-readonly { font-size: 0.84rem; color: var(--text-primary); }
#view-findings .fn-cm-form-readonly { padding: 0.4rem 0; color: var(--text-secondary); }
#view-findings .fn-cm-form-input { height: 36px; padding: 0 0.6rem; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--glass-border); color: var(--text-primary); font-family: var(--font-family); font-size: 0.82rem; }
#view-findings .fn-cm-form-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-findings .fn-cm-log-date-alert { align-items: center; gap: 0.35rem; margin-top: 0.3rem; padding: 0.35rem 0.6rem; border-radius: 7px; font-size: 0.74rem; font-weight: 600; background: color-mix(in srgb, var(--c-orange) 14%, transparent); color: var(--c-orange); border: 1px solid color-mix(in srgb, var(--c-orange) 32%, transparent); }
#view-findings .fn-cm-form-footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--glass-border); }
#view-findings .fn-cm-save-btn { height: 36px; padding: 0 1.2rem; border-radius: 9999px; border: none; background: var(--primary-gradient); color: var(--c-white); font-family: var(--font-family); font-size: 0.82rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.35rem; }
#view-findings .fn-cm-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* file attach */
#view-findings .fn-cm-file-drop { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem; border: 1px dashed var(--glass-border); border-radius: 10px; cursor: pointer; color: var(--text-secondary); font-size: 0.78rem; }
#view-findings .fn-cm-file-drop:hover, #view-findings .fn-cm-file-drop.drag-over { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
#view-findings .fn-cm-file-drop-icon { font-size: 1.1rem; }
#view-findings .fn-cm-file-chosen { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid color-mix(in srgb, var(--c-green) 25%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--c-green) 10%, transparent); font-size: 0.78rem; color: var(--text-primary); }
#view-findings .fn-cm-file-chosen-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-findings .fn-cm-file-remove { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.2rem; display: flex; }
#view-findings .fn-cm-file-remove:hover { color: var(--c-red); }

/* ── CR ANALYZE (engine) — Slice 1b-iii-b: choice · prefill · analysis form · results · scorecard · view (tokens only) ── */
#view-findings .fn-cm-choice-btn.analyze { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
#view-findings .fn-cm-choice-btn.analyze:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
/* prefill / case-information box */
#view-findings .fn-cm-prefill-box { border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.75rem 0.85rem; background: color-mix(in srgb, var(--primary) 4%, transparent); }
#view-findings .fn-cm-prefill-box.full { grid-column: 1 / -1; }
#view-findings .fn-cm-prefill-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.45rem; display: flex; align-items: center; gap: 0.35rem; }
#view-findings .fn-cm-prefill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem 0.9rem; }
#view-findings .fn-cm-prefill-field { display: flex; flex-direction: column; min-width: 0; }
#view-findings .fn-cm-prefill-key { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
#view-findings .fn-cm-prefill-val { font-size: 0.82rem; color: var(--text-primary); }
#view-findings .fn-cm-prefill-desc { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.4rem; direction: rtl; text-align: right; }
/* analysis form */
#view-findings .fn-cm-analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.2rem; margin-top: 0.3rem; }
#view-findings .fn-cm-analysis-group { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
#view-findings .fn-cm-analysis-group.full { grid-column: 1 / -1; }
#view-findings .fn-cm-analysis-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
#view-findings .fn-cm-analysis-input { height: 36px; padding: 0 0.6rem; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--glass-border); color: var(--text-primary); font-family: var(--font-family); font-size: 0.82rem; }
#view-findings .fn-cm-analysis-textarea { padding: 0.5rem 0.6rem; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--glass-border); color: var(--text-primary); font-family: var(--font-family); font-size: 0.82rem; resize: vertical; }
#view-findings .fn-cm-analysis-input:focus-visible, #view-findings .fn-cm-analysis-textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-findings .fn-cm-generate-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.8rem; }
#view-findings .fn-cm-generate-hint { font-size: 0.76rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.3rem; }
#view-findings .fn-cm-generate-hint.ready { color: var(--c-green); }
#view-findings .fn-cm-generate-btn { height: 36px; padding: 0 1rem; border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-family: var(--font-family); font-size: 0.8rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.35rem; }
#view-findings .fn-cm-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#view-findings .fn-cm-analysis-footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding-top: 0.7rem; margin-top: 0.7rem; border-top: 1px solid var(--glass-border); }
#view-findings .fn-cm-analysis-submit-btn { height: 36px; padding: 0 1.2rem; border-radius: 9999px; border: none; background: var(--primary-gradient); color: var(--c-white); font-family: var(--font-family); font-size: 0.82rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.35rem; }
#view-findings .fn-cm-analysis-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* results */
#view-findings .fn-cm-results-panel { margin-top: 0.9rem; border-top: 1px dashed var(--glass-border); padding-top: 0.7rem; }
#view-findings .fn-cm-results-section-title { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin: 0.7rem 0 0.4rem; display: flex; align-items: center; gap: 0.35rem; }
#view-findings .fn-cm-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; }
#view-findings .fn-cm-metric { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.6rem; border: 1px solid var(--glass-border); border-radius: 9px; background: var(--bg-secondary); }
#view-findings .fn-cm-metric-key { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-secondary); }
#view-findings .fn-cm-metric-val { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
#view-findings .fn-cm-status-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 9999px; font-size: 0.82rem; font-weight: 600; }
#view-findings .fn-cm-status-pill.on-track { background: color-mix(in srgb, var(--c-green) 15%, transparent); color: var(--c-green); }
#view-findings .fn-cm-status-pill.achievable { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
#view-findings .fn-cm-status-pill.exceed { background: color-mix(in srgb, var(--c-orange) 16%, transparent); color: var(--c-orange); }
#view-findings .fn-cm-status-pill.conflict, #view-findings .fn-cm-status-pill.cant-achieve { background: color-mix(in srgb, var(--c-red) 14%, transparent); color: var(--c-red); }
#view-findings .fn-cm-pill-note { opacity: 0.75; font-weight: 400; font-size: 0.76rem; }
#view-findings .fn-cm-alert { display: flex; align-items: flex-start; gap: 0.4rem; padding: 0.45rem 0.65rem; border-radius: 8px; font-size: 0.78rem; margin-top: 0.35rem; }
#view-findings .fn-cm-alert.danger { background: color-mix(in srgb, var(--c-red) 12%, transparent); color: var(--c-red); }
#view-findings .fn-cm-alert.warning { background: color-mix(in srgb, var(--c-orange) 13%, transparent); color: var(--c-orange); }
#view-findings .fn-cm-checks-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
#view-findings .fn-cm-checks-table td { padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--glass-border); color: var(--text-primary); vertical-align: top; }
#view-findings .fn-cm-checks-table td:last-child { white-space: nowrap; font-weight: 600; }
#view-findings .fn-cm-check-pass { color: var(--c-green); }
#view-findings .fn-cm-check-fail { color: var(--c-red); }
#view-findings .fn-cm-check-na { color: var(--text-secondary); }
#view-findings .fn-cm-just-text { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; padding: 0.4rem 0; }
/* scorecard + donut */
#view-findings .fn-cm-scorecard-viz { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
#view-findings .fn-cm-donut { flex: 0 0 auto; }
#view-findings .fn-cm-donut-bg { stroke: color-mix(in srgb, var(--primary) 16%, transparent); }
#view-findings .fn-cm-donut-arc.score-good { stroke: var(--c-green); }
#view-findings .fn-cm-donut-arc.score-warn { stroke: var(--c-orange); }
#view-findings .fn-cm-donut-arc.score-bad { stroke: var(--c-red); }
#view-findings .fn-cm-donut-pct { font-size: 1.4rem; font-weight: 700; fill: var(--text-primary); }
#view-findings .fn-cm-donut-lbl { font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--text-secondary); }
#view-findings .fn-cm-score-bars { flex: 1 1 220px; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
#view-findings .fn-cm-score-row { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 0.5rem; }
#view-findings .fn-cm-score-label { font-size: 0.74rem; color: var(--text-secondary); }
#view-findings .fn-cm-score-bar-wrap { height: 8px; border-radius: 9999px; background: color-mix(in srgb, var(--c-gray) 18%, transparent); overflow: hidden; }
#view-findings .fn-cm-score-bar-fill { height: 100%; border-radius: 9999px; }
#view-findings .fn-cm-score-bar-fill.score-good { background: var(--c-green); }
#view-findings .fn-cm-score-bar-fill.score-warn { background: var(--c-orange); }
#view-findings .fn-cm-score-bar-fill.score-bad { background: var(--c-red); }
#view-findings .fn-cm-score-pct { font-size: 0.76rem; font-weight: 600; text-align: right; }
#view-findings .fn-cm-score-pct.score-good { color: var(--c-green); }
#view-findings .fn-cm-score-pct.score-warn { color: var(--c-orange); }
#view-findings .fn-cm-score-pct.score-bad { color: var(--c-red); }
/* analysis-view modal */
#view-findings .fn-cm-analysis-view-modal { width: min(760px, 95vw); max-width: 95vw; max-height: 90vh; padding: 0; display: flex; flex-direction: column; }
#view-findings .fn-cm-analysis-view-actions { display: flex; align-items: center; gap: 0.5rem; }
#view-findings .fn-cm-approval-dl-btn { height: 32px; padding: 0 0.8rem; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--bg-secondary); color: var(--text-primary); font-family: var(--font-family); font-size: 0.76rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; }
#view-findings .fn-cm-approval-dl-btn:hover { border-color: var(--primary); color: var(--primary); }
#view-findings .fn-cm-analysis-view-body { padding: 1rem 1.2rem; overflow-y: auto; }

/* ── EDIT CR — Slice 1b-iii-c: status + attachment overlay (tokens only; reuses .fn-cm-file-* for the drop/chosen) ── */
#view-findings .fn-cm-edit-modal { width: min(520px, 94vw); max-width: 94vw; max-height: 88vh; padding: 0; display: flex; flex-direction: column; }
#view-findings .fn-cm-edit-body { padding: 1rem 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.9rem; }
#view-findings .fn-cm-edit-group { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
#view-findings .fn-cm-edit-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
#view-findings .fn-cm-edit-select { height: 38px; padding: 0 0.6rem; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--glass-border); color: var(--text-primary); font-family: var(--font-family); font-size: 0.84rem; }
#view-findings .fn-cm-edit-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-findings .fn-cm-edit-footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--glass-border); }
#view-findings .fn-cr-edit-btn, #view-findings .fn-cr-view-btn { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.25rem; border-radius: 6px; }
#view-findings .fn-cr-edit-btn:hover, #view-findings .fn-cr-view-btn:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
#view-findings .fn-cm-approval-regen-btn { height: 32px; padding: 0 0.8rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c-orange) 40%, transparent); background: color-mix(in srgb, var(--c-orange) 10%, transparent); color: var(--c-orange); font-family: var(--font-family); font-size: 0.76rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; }
#view-findings .fn-cm-approval-regen-btn:hover { background: color-mix(in srgb, var(--c-orange) 18%, transparent); }

/* responsive — tablet: let the table scroll horizontally rather than clip */
@media (max-width: 900px) {
    #view-findings .fn-stats-overview, #view-issues .fn-stats-overview  { grid-template-columns: repeat(3, 1fr); }
    #view-findings .fn-stats-attention, #view-issues .fn-stats-attention { grid-template-columns: repeat(3, 1fr); }
    #view-findings .fn-main { padding: 0.75rem 1rem 1rem; }
}

/* ── FEAT-ONEDOOR-01 #564 Slice 3 (cutover) — S5-M V-walk FAIL fix (2026-10-05): full-screen SHEET for the card
   drill-down pop-up + the Submit-CR modal at phone widths. The desktop content-region overlay + calc(100%-2rem)
   box broke at ~375px: transparent surface bleeding the page, the filter controls stacked full-height, the table
   pushed out of view, the title clipped. The sheet pattern — the overlay fills the viewport with a solid-enough
   backdrop; the modal is a SOLID, full-screen panel (fixed header, compact wrapping filter row, scrollable body)
   so the table is always reachable. Both modals share this frame (D-6). ── */
@media (max-width: 640px) {
    /* M-5 (S5-M2 BLOCKER): the full-screen sheet must stack ABOVE the shell chrome. The shell .mob-header and
       .mob-bottom-nav are z-index 8000 (styles.css); the sheet overlay was 1200, so the sheet's own header
       (title + × / the detail Back) rendered UNDER the "Findings" shell header and was UNREACHABLE. Raise the
       open sheet above both (8500) — it covers the header AND the nav, so every sheet control is tappable and
       the list rows can no longer ghost through the nav (M-7). */
    #view-findings #fn-card-modal-overlay,
    #view-findings #fn-cm-add-overlay { inset: 0; left: 0; z-index: 8500; background: color-mix(in srgb, var(--c-ink) 55%, transparent); }
    #view-findings .fn-modal.fn-card-modal,
    #view-findings .fn-modal.fn-cm-add-modal {
        width: 100%; max-width: none;
        height: 100vh; height: 100dvh; max-height: none;   /* 100vh fallback for browsers without dvh */
        margin: 0; border: none; border-radius: 0;
        background: var(--c-white);                 /* SOLID surface — no page bleed */
    }
    /* M-2: the header is pinned at the top of the sheet — title + close ALWAYS visible (flex-shrink:0). */
    #view-findings .fn-modal-header { padding: 0.8rem 1rem; flex-shrink: 0; }
    #view-findings .fn-modal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* title never clipped off-frame */
    /* M-2: the filter row is a SINGLE horizontal-scroll strip — it no longer wraps to ~5 rows (182px) that ate
       the first screen and hid the table. One compact row; swipe to reach the rest; the table sits right below. */
    #view-findings .fn-card-toolbar {
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 0.5rem;
        padding: 0.55rem 1rem; flex-shrink: 0; -webkit-overflow-scrolling: touch;
    }
    /* M-6: EVERY toolbar child is non-shrinking in the scroll strip, so nothing collides (e.g. "Advanced" over
       the "2 of 2" count). The count's base margin-left:auto is cleared so it sits inline, not pushed onto a
       neighbour. gap:0.5rem (set above) separates them; the strip scrolls horizontally to reach the rest. */
    #view-findings .fn-card-toolbar > * { flex: 0 0 auto; }
    #view-findings .fn-card-toolbar input[type="text"],
    #view-findings .fn-card-toolbar select { width: auto; min-width: 8.5rem; height: 34px; }
    #view-findings .fn-filter-count { margin-left: 0; }
    #view-findings .fn-cm-search-row { gap: 0.5rem; }
    /* the sheet body scrolls (bottom-nav CLEARANCE is in the 768px block below — the nav shows at <=768px). */
    #view-findings .fn-card-modal-body,
    #view-findings .fn-cm-add-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
    /* M-1: REDUCED COLUMNS. At phone width the 8-column table is unreadable (Description crushed to ~9px). Show
       the three orienting columns — Finding ID / Description / Status — and reach every other field via the row's
       DETAIL (tap a row → in-sheet detail with the full field set). Chosen over card-stacking because the detail
       already renders all fields, so this reuses it rather than adding a second render path. (UI_SPEC mobile
       "priority columns" pattern.) */
    #view-findings .rd-table.fn-rd { table-layout: auto; }
    #view-findings .rd-table.fn-rd th:nth-child(3), #view-findings .rd-table.fn-rd td:nth-child(3),
    #view-findings .rd-table.fn-rd th:nth-child(4), #view-findings .rd-table.fn-rd td:nth-child(4),
    #view-findings .rd-table.fn-rd th:nth-child(6), #view-findings .rd-table.fn-rd td:nth-child(6),
    #view-findings .rd-table.fn-rd th:nth-child(7), #view-findings .rd-table.fn-rd td:nth-child(7),
    #view-findings .rd-table.fn-rd th:nth-child(8), #view-findings .rd-table.fn-rd td:nth-child(8) { display: none; }
    #view-findings .rd-table.fn-rd th:nth-child(1), #view-findings .rd-table.fn-rd td:nth-child(1) { width: 4.5rem; }
    #view-findings .rd-table.fn-rd td:nth-child(2) { width: auto; white-space: normal; overflow: visible; text-overflow: clip; }  /* Description takes the remainder + wraps */
    #view-findings .rd-table.fn-rd th:nth-child(5), #view-findings .rd-table.fn-rd td:nth-child(5) { width: 5rem; }
    #view-findings .fn-card-table-wrap { overflow-x: hidden; }   /* three columns fit — no sliver horizontal scroll */
    /* M-4: the overview/watchlist stat cards — 2 compact columns at phone width (was a cramped 3-up). */
    #view-findings .fn-stats-overview, #view-findings .fn-stats-attention,
    #view-issues .fn-stats-overview, #view-issues .fn-stats-attention { grid-template-columns: repeat(2, 1fr); }
}

/* M-3 (pre-gate conf-50): the fixed mobile bottom-nav appears at <=768px (styles.css:2100), NOT only <=640px — so
   the bottom-nav CLEARANCE must span the SAME breakpoint, else the 641–768px band (iPad-mini portrait, large
   phones in landscape) hides the last content under the nav. The sheet CHROME stays phone-only (<=640px, above);
   the CLEARANCE lives here, matching the nav. 76px = the ~62px nav + a small margin, plus the safe-area inset. */
@media (max-width: 768px) {
    /* The full-screen modal sheets (card pop-up, Submit-CR) sit ABOVE the nav (M-5, z-8500) so they COVER it and
       need no nav-clearance. The NON-modal surfaces — the detail bottom-sheet and the main findings view — the
       nav renders OVER them, so they reserve the clearance. */
    #view-findings .fn-detail-panel.open,
    #view-findings .fn-main,
    /* belt (pre-gate conf-35): the modal sheet bodies ALSO keep the clearance so that on a browser WITHOUT :has()
       (where the chrome-yield below does not fire) the 641–768px sheet's last rows still clear the nav — no worse
       than pre-fix. With :has() the sheet covers the nav and this padding is merely harmless trailing space. */
    #view-findings .fn-card-modal-body,
    #view-findings .fn-cm-add-body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    /* #624 CR#5: Analytics REPLACES .fn-main (setFindingsMode hides .fn-main and shows #fn-analytics), so the
       charts need their own nav-clearance — the last stacked panel would otherwise sit under the fixed
       bottom-nav. The active-state class raises specificity above the desktop `#fn-analytics { padding }`
       rule (later in source, equal 2-ID specificity) so this clearance actually wins at ≤768px. 76px =
       the ~62px nav + margin, plus the safe-area inset (matching the other non-modal surfaces). */
    body.fn-analytics-active #view-findings #fn-analytics { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    /* keyboard focus ring (2px outline + 2px offset) must clear the nowrap strip's overflow-y:hidden */
    #view-findings .fn-card-toolbar { padding-top: 0.65rem; padding-bottom: 0.65rem; }
    /* M-5/M-7 (S5-M2 BLOCKER): a z-index raise on the sheet can't reliably beat the top-level shell chrome — the
       sheet lives inside .main-content's stacking context, below the body-level .mob-header / .mob-bottom-nav
       (z 8000). So while a Findings OVERLAY is OPEN the shell header + bottom-nav YIELD: the sheet's own ×/Back
       become tappable and list rows can no longer ghost through the nav. The rule keys off the overlay's OWN open
       state (inline display:flex when open, display:none when closed), NOT a #view-findings marker — the card
       pop-up sets fn-modal-open but the Submit-CR sheet (findingsCr.openModal) does not, so matching the overlays
       directly covers BOTH sheets plus the Advanced-search sheet uniformly. :has() is modern-browser; without it
       the chrome stays, but the modal bodies above keep the nav clearance so it's no worse than the pre-fix state
       (and the owner's phone is Chrome/Android where :has() is supported). The non-modal detail panel keeps the
       nav + its own clearance. */
    body:has(#fn-card-modal-overlay[style*="flex"]) .mob-header,
    body:has(#fn-card-modal-overlay[style*="flex"]) .mob-bottom-nav,
    body:has(#fn-cm-add-overlay[style*="flex"]) .mob-header,
    body:has(#fn-cm-add-overlay[style*="flex"]) .mob-bottom-nav,
    body:has(#fn-adv-overlay[style*="flex"]) .mob-header,
    body:has(#fn-adv-overlay[style*="flex"]) .mob-bottom-nav { display: none !important; }
}

/* ══ #565 slice 7: Analytics charts + Dashboard↔Analytics toggle (restored from pre-#564 e5966c63^) ══════════
   Layout from the original inline styles; colours via palette tokens ONLY (no raw hex — token-literal-gate);
   the original amber "warning" bar is recolored to the primary gradient (yellow-text ban). AA: the value number
   is NOT inside the coloured fill (white-on-gradient fails AA) — it sits in .fn-bar-value after the track in
   --text-primary, legible on the panel background. Scoped to #view-findings. The in-shell content area is
   narrower than the old standalone page, so the grid defaults to 2×2
   (4 panels, even) rather than the old 3-col; ≤640px collapses to a single column. */
/* Toggle (owner V round-7 2026-10-16): a COMPACT segmented pill, content-sized — NOT stretched full-width.
   width:fit-content + align-self:flex-start stop it being blockified/stretched as a flex item of the (column)
   content area (that stretch made the inactive half read as a bare label across a huge pale area). The whole
   pill is a visible TRACK (--bg-secondary + border); both halves are SYMMETRIC in shape (equal flex width,
   same height/padding/radius); the ACTIVE half is distinguished by FILL ONLY (--primary pill), the inactive
   half is transparent over the track. */
#view-findings .fn-view-toggle { display: inline-flex; width: fit-content; max-width: 100%; align-self: flex-start; background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: 9999px; padding: 3px; gap: 3px; margin-bottom: 0.9rem; flex-shrink: 0; }
#view-findings .fn-view-toggle .fn-view-btn { flex: 1 1 0; min-width: 9rem; height: 32px; padding: 0 1.1rem; border: none; border-radius: 9999px; background: transparent; color: var(--text-secondary); font-family: var(--font-family); font-size: 0.82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; transition: var(--transition); }
#view-findings .fn-view-toggle .fn-view-btn:hover { color: var(--text-primary); }
#view-findings .fn-view-toggle .fn-view-btn.active { background: var(--primary); color: var(--c-white); }
/* #624 CR#2: the focus ring is INSET (negative offset) so it stays fully inside the rounded pill track —
   an outward 2px offset pushed the ring past the 3px track padding and its square corners escaped the
   pill's border-radius. Inset keeps it visible AND contained within the toggle. */
#view-findings .fn-view-toggle .fn-view-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Analytics escapes the shell's 1400px content cap (body.fn-analytics-active, set in setFindingsMode) so the
   chart tables use the FULL window — most of all when the sidebar is collapsed. Dashboard keeps the cap. */
body.fn-analytics-active .main-content { max-width: none; }
/* Panel grid (owner V 2026-10-16): a FIXED 2-column layout so the panels land in deliberate rows — row 1 =
   RRIs + Age (the longest-label panels), row 2 = Regulations + Business Unit. (auto-fit is avoided here: on a
   very wide full-window view it would pack 3 across and break the intended pairing.) Stacks to a single column
   below 1024px; ≤640px is covered by the same single-column rule. */
#view-findings #fn-analytics { padding: 0 0 1.25rem; }
#view-findings .fn-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
#view-findings .fn-chart-panel { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.25rem 1.5rem; box-shadow: var(--rd-shadow); min-width: 0; }
#view-findings .fn-chart-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); margin-bottom: 1rem; }
#view-findings .fn-chart-empty { font-size: 0.84rem; color: var(--text-secondary); }
#view-findings .fn-chart-legend { display: flex; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.72rem; color: var(--text-secondary); }
#view-findings .fn-legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 0.3rem; vertical-align: middle; }
/* Owner redesign: each chart is a 2-COLUMN TABLE (grid). Col 1 = the text (id bold + description muted);
   full text WRAPS, never truncates; dir=auto (set in JS) makes direction follow the content (Latin LTR /
   Arabic RTL). Col 2 = the bar + value. align-items:center keeps the bar centred against a multi-line label. */
/* Col 1 (text) is WIDER than col 2 (bar) — the text needs the room, the bar does not. */
#view-findings .fn-chart-table { display: grid; grid-template-columns: minmax(12rem, 1.6fr) minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0.6rem; align-items: center; }
/* Row anatomy (owner ruling 2026-10-16, round-7b): the label is a LTR flex row with the identifier as a fixed
   leading element pinned to the LEFT edge (top-aligned) in EVERY chart — direction:ltr keeps flex-start = left
   even when the text is RTL. The text span carries dir="auto" (set in JS) so Arabic flows RTL BESIDE the
   left-anchored id; the id never mirrors to the right. */
#view-findings .fn-chart-cell-label { min-width: 0; display: flex; direction: ltr; align-items: flex-start; gap: 0.45rem; font-size: 0.78rem; line-height: 1.35; }
#view-findings .fn-chart-id { flex: 0 0 auto; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
/* The text is clamped to a FIXED 3 lines (uniform row height); the full text stays available on demand via the
   cell's title tooltip. A name with no identifier (Regulations / Business Unit) is the whole label → primary. */
#view-findings .fn-chart-desc { flex: 1 1 auto; min-width: 0; font-weight: 400; color: var(--text-secondary); overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#view-findings .fn-chart-desc:only-child { color: var(--text-primary); font-weight: 600; }
#view-findings .fn-chart-cell-bar { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
#view-findings .fn-bar-value { flex-shrink: 0; min-width: 2.5rem; text-align: right; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
#view-findings .fn-bar-track { flex: 1; height: 12px; background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 9999px; overflow: hidden; }
#view-findings .fn-bar-fill { height: 100%; border-radius: 9999px; min-width: 6px; }
#view-findings .fn-bar-track-stacked { display: flex; }
#view-findings .fn-bar-track-stacked .fn-bar-fill { border-radius: 0; flex-shrink: 0; min-width: 0; }
#view-findings .fn-bar-track-stacked .fn-bar-fill:first-child { border-radius: 9999px 0 0 9999px; }
#view-findings .fn-bar-track-stacked .fn-bar-fill:last-child { border-radius: 0 9999px 9999px 0; }
#view-findings .fn-bar-track-stacked .fn-bar-fill:first-child:last-child { border-radius: 9999px; }
#view-findings .fn-bar-primary { background: var(--primary-gradient); }
#view-findings .fn-bar-success { background: var(--success-gradient); }
#view-findings .fn-bar-danger  { background: var(--danger-gradient); }
@media (max-width: 1024px) {
    #view-findings .fn-analytics-grid { grid-template-columns: 1fr; }
}