/* [PAID-ONLY] Added 2026-05-28; restructured 2026-05-28 Phase 3.
   Strip from free tool before re-release.

   Rail+canvas layout for PSDA, behind the `?ui=rail` flag. Scoped to
   `.psda-rail-mode` / `#psdaRail` so nothing here touches the wizard fallback.

   Phase 3 (this version) drops the drawer pattern in favor of inline deal-phase
   sections — Purchase, Debt, Sale, Cash Flows, Reserves, CapEx, Property — with
   collapsible headers and a single status pill in the rail head. Each section's
   open/closed state persists per user. Heavy editors (multi-loan debt, reserves,
   capex) land inline in their section instead of a separate modal.

   Audit fixes carried forward from the prior cleanup:
   C-1 (layout escape)            — .psda-rail-grid breaks out of the parent
                                    .container so canvas uses real page width
   C-3 (canvas-width KPI strip)   — see _DealMetrics.cshtml .dm-kpi-grid
   H-2 (1200px breakpoint)        — side-by-side gates at >=1200px
   H-3 (rail scrolls itself)      — rail owns a max-height + overflow-y:auto
   H-4 (inert canvas)             — set by psda-rail.js on mobile slide-over
   H-6 (theme cascade)            — page emit also sets --cre-blue
   H-7 (touch targets)            — @media (pointer:coarse) coarsens controls
   M-1 (Run sensitivity)          — distinct ghost button, not "Edit…" chrome
   M-2/M-3 (tokens)               — local --cre-* tokens, brand-blue Needs banner
   L-3 (print)                    — explicit fold-down for export */


/* ── Local tokens ────────────────────────────────────────────────────────────
   --cre-blue / --primary-color come from custom.css + the page's theme block.
   The other neutrals get local fallbacks so this file is self-contained. */
.psda-rail-mode,
.psda-rail-grid {
    --cre-border: #dee2e6;
    --cre-border-strong: #c8d7f0;
    --cre-text-muted: #6c757d;
    --cre-surface: #ffffff;
    --cre-surface-soft: #f5f8ff;
    /* Status pill */
    --status-idle-bg: #f1f3f5;
    --status-idle-fg: #495057;
    --status-busy-bg: #e8f1fb;
    --status-busy-fg: #0d3a6e;
    --status-ok-bg: #e8f5ec;
    --status-ok-fg: #1b5e20;
    --status-err-bg: #fde8e8;
    --status-err-fg: #a51c1c;
}


/* ── Wizard hide in rail mode ────────────────────────────────────────────────
   Wizard markup stays in the DOM (its inputs power buildDebtInputs); we just
   hide the scaffold. psda-rail.js lifts #DealMetrics into the canvas. */
.psda-rail-mode #dealAssumpTabs { display: none !important; }
.psda-rail-mode #dealAssumpTabsContent { display: none; }


/* ── Layout: the rail+canvas grid ────────────────────────────────────────────
   C-1: ESCAPE THE CONTAINER CAP. _Layout.cshtml wraps every page in
   <div class="container"> (BS4, max 1140px at >=1200px viewport). We break
   out with the standard "full-bleed" trick so canvas gets real page width.

   Rail width: 380px at desktop. That's wide enough to keep the inline loan
   card readable (rate/amort/term row stays roughly tabular) without stealing
   a meaningful slice of canvas at 1920p (380/1920 ≈ 20%). At 1440p the
   canvas still gets ~1020px — more than the old 1140-340 wizard layout. */
.psda-rail-grid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 clamp(0.75rem, 2vw, 1.5rem);
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.psda-rail {
    position: sticky;
    top: 1rem;
    align-self: start;
    /* H-3: rail owns its own scroll, so a tall Advanced rail can't outgrow the viewport.
       NO overscroll-behavior:contain — once the rail bottoms out, the wheel should CHAIN to the
       page so the canvas (right side) keeps scrolling (and vice-versa). */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 0 1rem 1rem 0;
    border-right: 1px solid var(--cre-border);
}

/* min-width:0 lets the canvas shrink below its children's intrinsic width so
   wide tables get table-responsive scroll instead of blowing out the grid. */
.psda-canvas { min-width: 0; }


/* ── Rail head: title + status pill ────────────────────────────────────────── */
.psda-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
/* [2026-06-13 PSDA_UNDO_REDO_SCOPE] Right-aligned cluster: undo/redo + the status pill. The shared
   .psda-op-export-btn base + :disabled (dimmed) styling come from psda-shared.css; size the buttons
   to match onepage's account-btn here (psda-onepage.css isn't loaded on the rail), and restore the
   44×44 touch target on coarse pointers (also onepage-only otherwise). */
.psda-rail-head-actions { display: flex; align-items: center; gap: 8px; }
.psda-rail-undo { display: inline-flex; gap: 6px; }
.psda-rail-undo .psda-op-account-btn { height: 28px; padding: 0 10px; font-size: 12px; }
@media (pointer: coarse) {
    .psda-rail-undo .psda-op-export-btn {
        min-height: 44px; min-width: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
}
.psda-rail-title {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

/* Status pill — replaces the old psdaRailPending spinner AND the wizard's
   Calculate button. One element drives by data-state: idle / busy / ok / err.
   Click affordance is real (focuses first missing input when state=needed). */
.psda-rail-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    background: var(--status-idle-bg);
    color: var(--status-idle-fg);
    /* keep the pill from elbowing the title on long state labels */
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.psda-rail-status:focus-visible {
    outline: 2px solid var(--cre-blue, #1565C0);
    outline-offset: 2px;
}
.psda-rail-status[data-state="needed"] {
    background: var(--status-idle-bg); color: var(--status-idle-fg);
}
.psda-rail-status[data-state="busy"] {
    background: var(--status-busy-bg); color: var(--status-busy-fg);
}
.psda-rail-status[data-state="ok"] {
    background: var(--status-ok-bg); color: var(--status-ok-fg);
}
.psda-rail-status[data-state="err"] {
    background: var(--status-err-bg); color: var(--status-err-fg);
}
.psda-rail-status-icon { font-size: 0.85em; }
.psda-rail-status[data-state="busy"] .psda-rail-status-icon { animation: psdaStatusSpin 0.9s linear infinite; }
@keyframes psdaStatusSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .psda-rail-status[data-state="busy"] .psda-rail-status-icon { animation: none; }
}


/* ── Detail (Simple/Advanced) toggle ───────────────────────────────────────── */
.psda-rail-detail {
    display: inline-flex;
    border: 1px solid var(--cre-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.psda-detail-btn {
    background: var(--cre-surface);
    border: none;
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cre-text-muted);
    cursor: pointer;
    min-height: 32px;
}
.psda-detail-btn + .psda-detail-btn { border-left: 1px solid var(--cre-border); }
.psda-detail-btn[aria-pressed="true"] { background: var(--cre-blue, #1565C0); color: #fff; }
.psda-detail-btn:focus-visible { outline: 2px solid var(--cre-blue, #1565C0); outline-offset: 1px; }

/* Simple collapses all .psda-rail-advanced inside the rail (whether they're
   a whole section or just advanced fields inside a Simple section). */
#psdaRail[data-detail="simple"] .psda-rail-advanced { display: none; }
#psdaRail[data-detail="advanced"] .psda-rail-advanced { animation: psdaRailFadeIn 160ms ease-out; }
@keyframes psdaRailFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    #psdaRail[data-detail="advanced"] .psda-rail-advanced { animation: none; }
}


/* ── Deal-phase sections ────────────────────────────────────────────────────
   Each section is a collapsible <section>: a header button + a body div.
   The body uses grid-template-rows 0fr/1fr for an animatable collapse without
   measuring scrollHeight in JS (modern technique; degrades to instant on
   older browsers). State persisted in localStorage by psda-rail.js. */
.psda-rail-section {
    border-top: 1px solid var(--cre-border);
    /* The first section's top border collapses with the rail head divider above;
       trim it cleanly by zeroing for the first section. */
}
.psda-rail-section:first-of-type { border-top: none; }

.psda-rail-section-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: none;
    padding: 0.7rem 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1f2328;
    cursor: pointer;
    text-align: left;
}
.psda-rail-section-head:focus-visible {
    outline: 2px solid var(--cre-blue, #1565C0);
    outline-offset: 2px;
    border-radius: 3px;
}
.psda-section-chevron {
    color: var(--cre-text-muted);
    font-size: 0.8em;
    transition: transform 180ms ease;
}
.psda-rail-section-head[aria-expanded="false"] .psda-section-chevron {
    transform: rotate(-90deg);
}
@media (prefers-reduced-motion: reduce) {
    .psda-section-chevron { transition: none; }
}
.psda-rail-section-title { flex: 1; }
.psda-rail-section-status {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--cre-text-muted);
    /* Filled by psda-rail.js (e.g. "NOI imported"). Empty when no per-section
       hint applies. */
}

.psda-rail-section-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 220ms ease;
    /* Vertical overflow MUST clip for the collapse animation (grid-rows 0fr).
       Horizontal we leave to the inner wrapper below so a rare overflow can
       scroll instead of getting clipped off the left edge of the rail. */
    overflow: hidden;
}
.psda-rail-section-body > * {
    min-height: 0; /* required for inner content to clip when row-template = 0fr */
    /* Horizontal-scroll fallback (2026-05-28): if anything inside a section
       happens to exceed the rail width (an unexpected wide table, a long
       overflow-anchor word, an inline editor we haven't tightened yet) the
       user CAN scroll it horizontally instead of seeing it cut off. By default
       no scrollbar should appear because the rail content fits. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.psda-rail-section[data-collapsed="true"] > .psda-rail-section-body {
    grid-template-rows: 0fr;
}
/* When collapsed, the grid clips to 0 height — but the inputs underneath stay focusable
   (tabbable) and a hairline of them can still show. visibility:hidden takes them out of the
   tab order + AT tree and hides any residual sliver; padding-bottom:0 removes the leftover gap
   so the section truly tucks away. (visibility is instant, but the row-height still animates.) */
.psda-rail-section[data-collapsed="true"] > .psda-rail-section-body > .psda-rail-section-inner {
    visibility: hidden;
    padding-bottom: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
    .psda-rail-section-body { transition: none; }
}
/* Inside the body, add some bottom padding so the chevron of the next section
   doesn't sit right against the last input. We wrap children in a div so the
   grid-row collapse trick can clip cleanly. */
.psda-rail-section-body > :first-child { padding-bottom: 0.6rem; }


/* ── Inline editor anchors ──────────────────────────────────────────────────
   Each section can have [data-inline-slot] empty divs where psda-rail.js
   relocates the wizard's heavy editors (#psdaDebtEditor, #psdaReservesEditor,
   #advancedCapexSection). The relocated card chrome is stripped so it reads
   as native section content, not as a card-inside-section. */
.psda-rail-inline > .card,
.psda-rail-inline .card {
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin: 0;
}
.psda-rail-inline .card > .card-body,
.psda-rail-inline .card-body { padding: 0; }
.psda-rail-inline > h5,
.psda-rail-inline .card-title {
    display: none; /* the section header already names this group */
}
/* Reserves and Debt editors render their own tables; let them flow. */
.psda-rail-inline table { width: 100%; }


/* ── Rail field rows: label-left / input-right, NOT block ───────────────────
   Keeps short inputs (LTV %, Loan Term months) from rendering at full width.
   At 380px rail width, splitting 45/55 gives each side ~165px which is
   plenty for currency/percent values. */
.psda-rail .psda-rail-slot { margin-bottom: 0.45rem; }

.psda-rail .psda-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 0.6rem;
    min-height: 36px;
    margin-bottom: 0;
}
.psda-rail .psda-field-row > label {
    display: block;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.25;
}
.psda-rail .psda-field-input { min-width: 0; width: 100%; }

/* Loan card / multi-loan editor lives inline in the Debt section. Bootstrap 4's
   `.row` has margin-left:-15px (and `.col` has compensating padding:0 15px). The
   wizard's loan card also uses `flex-nowrap` to force cols side-by-side, which
   doesn't fit in a narrow rail. We:
     1. Zero the .row negative margins so content doesn't bleed off the rail's
        left edge (THE 2026-05-28 indentation bug).
     2. Override flex-nowrap → flex-wrap so cols stack vertically.
     3. Force each .col to full-width inside the rail.
   Result: each loan field (Loan Size Method, LTV%, Interest Rate, …) renders
   as a full-width row inside the section. */
.psda-rail .row,
.psda-rail-inline .row {
    margin-left: 0;
    margin-right: 0;
    flex-wrap: wrap !important;
}
.psda-rail .col {
    flex: 0 0 100% !important;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: 0.4rem;
}
.psda-rail .col:last-child { margin-bottom: 0; }
.psda-rail .loan-field-group { margin-bottom: 0.6rem; }
.psda-rail .loan-field-group-label {
    font-size: 0.7rem;
    margin-bottom: 0.4rem;
}
.psda-rail .loan-field-group label {
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}
/* The loan-meta-block (Start/Refinances on Loans 2+) has its own padded bg-light
   container; tighten it to match the rail rhythm. */
.psda-rail .loan-meta-block { padding: 0.5rem !important; margin-bottom: 0.6rem !important; }

/* Property block: tighten form-group spacing. */
.psda-rail .form-group { margin-bottom: 0.4rem; }
.psda-rail .form-group label { font-size: 0.82rem; font-weight: 500; margin-bottom: 0.2rem; }

/* NOI textarea + section-internal labels use the full slot width. */
.psda-rail textarea { width: 100%; }
.psda-rail .psda-rail-slot > label.psda-rail-group-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cre-text-muted);
    margin: 0.1rem 0 0.35rem 0;
}

/* Harden: keep long values/labels from blowing out the rail. */
.psda-rail input,
.psda-rail select,
.psda-rail textarea { max-width: 100%; }
.psda-rail .input-group input,
.psda-rail .input-group select,
.psda-rail .input-group textarea { max-width: none; }
.psda-rail label,
.psda-rail .psda-field-row > label { overflow-wrap: anywhere; }

/* [2026-06-10] Same container reflow the onepage editing rail applies (psda-onepage.css):
   viewport-keyed col-md-* turn into slivers inside a 380px rail — stack them, then re-grid
   the clusters that should stay side-by-side. */
.psda-rail .row > [class*="col-"] {
    flex: 0 0 100%; width: 100%; max-width: 100%;
    padding-left: 0; padding-right: 0;
}
.psda-rail .psda-pi-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 1fr);
    column-gap: 8px;
}
.psda-rail .psda-pi-row > .psda-pi-addr { grid-column: 1 / -1; }
.psda-rail .psda-field-row.psda-sale-noi-row {
    grid-template-columns: minmax(0, 1fr);   /* the rail's field rows are grids — single column = stacked */
}
.psda-rail .psda-sale-noi-pair > .col-6 { flex: 0 0 50%; width: 50%; max-width: 50%; }
.psda-rail #saleNoiF12Display,
.psda-rail #saleNoiT12Display { white-space: nowrap; }
.psda-rail #advancedCapexSection .card-header { flex-wrap: wrap; gap: 4px 10px; }
.psda-rail #advancedCapexSection .card-header > div { white-space: nowrap; }


/* ── "Run sensitivity" — text-link affordance, not chunky chrome ──────────── */
.psda-run-sens-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cre-blue, #1565C0);
    cursor: pointer;
    min-height: 36px;
}
.psda-run-sens-btn:hover { background: var(--cre-surface-soft); }
.psda-run-sens-btn:focus-visible { outline: 2px solid var(--cre-blue, #1565C0); outline-offset: 2px; }
.psda-run-sens-btn:disabled { opacity: 0.65; cursor: progress; }


/* ── Canvas toolbar (Run sensitivity + shared export menu) ─────────────────── */
.psda-canvas-tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 0.75rem; }
/* P2 (§9.2): the shared download-export menu replaces the report's own Export/Share/Push
   buttons on the rail too — hide those (kept in the DOM; the menu forwards clicks to them). */
.psda-rail-mode #dm-exportPdf,
.psda-rail-mode #dm-shareLink,
.psda-rail-mode #dm-pushWaterfall { display: none !important; }


/* ── Canvas report tabs (Phase 1: dashboard redesign) ───────────────────────
   Splits the long Deal Metrics scroll into 4 tabs. Deliberately the LIGHT
   underline-active treatment from DashboardRedesignSample.png — NOT the page's
   filled-blue .nav-tabs (which would read heavy and consumer-ish on the report).
   The shell is relocated into #dealMetricsResults by psda-rail.js, so it inherits
   that wrapper's show/hide gate. */
/* Header row built by psda-rail.js (wireCanvasTabs): tab strip on the left, the canvas tools
   (Run sensitivity / Export) on the right, sharing one baseline rule. */
.psda-dm-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--cre-border);
    margin-bottom: 1.25rem;
}
.psda-dm-header .psda-dm-tabs { border-bottom: 0; margin-bottom: 0; flex: 1 1 auto; }
.psda-dm-header .psda-canvas-tools { margin: 0; padding-bottom: 0.4rem; flex: 0 0 auto; }

.psda-dm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    border-bottom: 1px solid var(--cre-border);
    margin-bottom: 1.25rem;
}
.psda-dm-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* overlap the strip's 1px rule so the active underline sits on it */
    padding: 0.6rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cre-text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.psda-dm-tab:hover { color: #1f2328; }
.psda-dm-tab.active {
    color: var(--cre-blue, #1565C0);
    border-bottom-color: var(--cre-blue, #1565C0);
}
.psda-dm-tab:focus-visible {
    outline: 2px solid var(--cre-blue, #1565C0);
    outline-offset: 2px;
    border-radius: 3px;
}
.psda-dm-panel[hidden] { display: none; }
.psda-dm-sens-hint { margin: 0.25rem 0 0; }

@media (pointer: coarse) {
    .psda-dm-tab { min-height: 44px; }
}
@media print {
    /* Tear-sheet shows the whole report, not just the active tab. */
    .psda-dm-tabs { display: none !important; }
    .psda-dm-panel[hidden] { display: block !important; }
    .psda-dm-sens-hint { display: none !important; }
}


/* ── Sale Summary card re-skin (Phase 3: dashboard redesign) ────────────────
   Re-skins the relocated Sale Summary (#dm-saleSummaryRow) on the Purchase & Sale
   tab from the heavy bordered key-value table into the clean card register used by
   the single page's input cards (.psda-op-card) + the Sources & Uses block above it
   — white card, soft-grey head band, hairline row separators, muted labels, dark
   tabular values, NO vertical gridlines. Scoped to rail mode; the wizard fallback
   and the single page (.psda-onepage-mode) keep the original table. Output ids are
   untouched, so renderDealMetrics keeps filling the cells. */
.psda-dm-report #dm-saleSummaryRow .card {
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.psda-dm-report #dm-saleSummaryRow .card-body { padding: 0; }
.psda-dm-report #dm-saleSummaryRow .card-title {
    margin: 0;
    padding: 10px 16px;
    background: #f5f6f8;           /* same soft-grey band as the S&U heads */
    border-bottom: 1px solid #e6e8eb;
    font-size: 13px;
    font-weight: 600;
    color: #1f2328;
}
.psda-dm-report #dm-saleSummaryRow .table-responsive { padding: 4px 16px 10px; }
.psda-dm-report #dm-saleSummaryRow table { margin: 0; }
/* Kill Bootstrap's table-bordered gridlines; use hairline horizontal separators only. */
.psda-dm-report #dm-saleSummaryRow table td {
    border: 0;
    border-top: 1px solid #f0f1f3;
    padding: 7px 8px;
    font-size: 13px;
    vertical-align: middle;
}
.psda-dm-report #dm-saleSummaryRow table tr:first-child td { border-top: 0; }
/* Label cells (.font-weight-bold in the markup) read as quiet labels; value cells
   (.text-right) are the dark tabular hero numbers. */
.psda-dm-report #dm-saleSummaryRow table td.font-weight-bold {
    font-weight: 500;
    color: #5c636a;
}
.psda-dm-report #dm-saleSummaryRow table td.text-right {
    font-weight: 600;
    color: #1f2328;
    font-variant-numeric: tabular-nums;
}


/* ── Summary dashboard content (Phase 6a: dashboard redesign) ────────────────
   Cap-rate block (3 quiet cells), per-year decision table (Cash-on-Cash / DSCR /
   IRR-if-sold), and a mini Sources & Uses (equity/debt split + per-loan rate).
   Sits below the soft-blue KPI grid in the Summary tab. */
.psda-dm-summary[hidden] { display: none; }
.psda-dm-summary { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 0.5rem; }
/* [2026-06-12 review] The Summary cards now sit inside #psdaDmSumLeft/#psdaDmSumRight column
   wrappers (shared partial; the ONEPAGE styles them as balanced flex columns). On the RAIL the
   wrappers are dissolved with display:contents so every card stays a direct flex child of
   .psda-dm-summary and keeps the 1.25rem rhythm — without this, Sources of Return and the
   Location map rendered flush (0px gap) inside the unstyled wrapper. */
.psda-rail-mode .psda-dm-summary > .psda-dm-sum-col { display: contents; }
/* [2026-06-11 item 8] The Annual Cash Flow & Returns table sits in the same bordered card
   family as the charts/S&U — it was the only bare block on the Summary. */
.psda-dm-sum-byyear {
    background: #ffffff; border: 1px solid #e6e8eb; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 12px 14px;
}
.psda-dm-sum-byyear:empty { display: none; }
.psda-dm-sum-title {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
    color: #6c757d; font-weight: 700; margin-bottom: 8px;
}
/* Title row holding the segmented "Units" control (right-aligned via space-between). */
.psda-dm-sum-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* [2026-06-11 item 20] Breathing room between "Operating Financials" and the "(Annual)" scale
   label — the markup's gap-2 is a Bootstrap 5 utility this BS4 app never defines. */
#dm-operatingScaleLabel { margin-left: 0.4rem; }

/* Per-year decision table: borderless ledger, hairline row separators, tabular. */
.psda-dm-byyear-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.psda-dm-byyear-table th,
.psda-dm-byyear-table td { padding: 7px 10px; font-size: 13px; text-align: right; border-top: 1px solid #eef0f2; }
.psda-dm-byyear-table thead th { border-top: 0; border-bottom: 1px solid #dee2e6; color: #6c757d; font-size: 11px; font-weight: 600; }
.psda-dm-byyear-table tbody th[scope="row"] { text-align: left; font-weight: 500; color: #5c636a; border-top: 1px solid #eef0f2; padding-left: 1.5rem; }
/* Bold headline lines (NOI, Levered Cash Flow) sit flush; the rest are indented under them. */
.psda-dm-byyear-table tbody tr.psda-dm-byyear-strong th[scope="row"] { padding-left: 10px; }
.psda-dm-byyear-table thead th:first-child { text-align: left; }
/* [2026-06-15 user] Center the Y1..Yn column headers over their columns (data cells stay right-
   aligned for the numbers) so each year header sits centered over its column — and over the bar
   above it in the combined cash-flow exhibit. */
.psda-dm-byyear-table thead th:not(:first-child) { text-align: center; }
.psda-dm-byyear-hint { text-align: left !important; color: #8a6d3b; font-style: italic; }
/* Headline $ lines (NOI, Levered Cash Flow) read bold-dark; the ratio block (Cash-on-Cash,
   DSCR, IRR) is separated from the $ lines by a heavier rule. */
.psda-dm-byyear-table tbody tr.psda-dm-byyear-strong th[scope="row"],
.psda-dm-byyear-table tbody tr.psda-dm-byyear-strong td { font-weight: 700; color: #1f2328; }
.psda-dm-byyear-table tbody tr.psda-dm-byyear-sep th,
.psda-dm-byyear-table tbody tr.psda-dm-byyear-sep td { border-top: 2px solid #dee2e6; }
/* [2026-06-10] Rule marking the operating→financing boundary (between NOI and Levered Cash
   Flow). Same weight as the .sep rule under Levered Cash Flow so the two boundaries match. */
.psda-dm-byyear-table tbody tr.psda-dm-byyear-divide th,
.psda-dm-byyear-table tbody tr.psda-dm-byyear-divide td { border-top: 2px solid #dee2e6; }

/* Summary charts (Phase 6c): two side-by-side cards on wide canvases, stacked when narrow. */
.psda-dm-sum-charts[hidden] { display: none; }
.psda-dm-sum-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
.psda-dm-chart {
    background: #ffffff; border: 1px solid #e6e8eb; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 8px 10px; min-height: 220px;
}

/* Summary property map (Phase 6d): small, SECONDARY locator — numbers stay the hero.
   [2026-06-09] Per user feedback the map was dominating the Summary tab. It now renders as a compact,
   full-width SHORT strip BELOW the per-year table + charts (the default .psda-dm-summary flex column
   stacks them), rather than a half-page block stretched to match the charts column. Satellite (hybrid)
   basemap is set in psda-report.js buildSummaryMap. */
.psda-dm-sum-map[hidden] { display: none; }
/* [2026-06-11 item 9] The Location block is a REAL card now (title + map inside the same
   bordered chrome as every other Summary card); the map itself goes flat inside it. */
.psda-dm-sum-map {
    background: #ffffff; border: 1px solid #e6e8eb; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 12px 14px;
}
.psda-dm-map {
    height: 220px; border: 1px solid #eef0f2; border-radius: 6px; overflow: hidden;
    background: #f5f6f8;
}
/* [2026-06-11 item 7] Demographics / Traffic-count deep links under the map. */
.psda-dm-map-links { display: flex; gap: 18px; margin-top: 10px; }
.psda-dm-map-links[hidden] { display: none; }
.psda-dm-map-links a {
    font-size: 12px; font-weight: 600; color: var(--primary-color, #1565C0);
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.psda-dm-map-links a:hover { text-decoration: underline; }
.psda-dm-map-links a i { font-size: 11px; color: #6c757d; }
/* Charts stay side-by-side (their own auto-fit grid); the map drops underneath as a short locator. */

/* [2026-06-09] Sources of Return — two-segment attribution bar (operating CF vs sale) + insight on the
   Summary tab. Brand blue = operating cash flow; quiet slate = the sale/reversion leg. */
.psda-dm-retmix[hidden] { display: none; }
.psda-dm-retmix {
    background: #ffffff; border: 1px solid #e6e8eb; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 14px 16px;
}
.psda-dm-retmix-title {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
    color: #6c757d; font-weight: 700; margin-bottom: 10px;
}
.psda-dm-retmix-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #eef0f2; }
/* [2026-06-10] Legend-in-bar variant: taller bar carrying white in-segment labels (saves the
   legend row). The renderer falls back to the legend line when a segment is under ~22%. */
.psda-dm-retmix-bar-labeled { height: 26px; border-radius: 6px; }
.psda-dm-retmix-seg { height: 100%; display: flex; align-items: center; min-width: 0; }
.psda-dm-retmix-seg.psda-dm-retmix-sale { justify-content: flex-end; }
.psda-dm-retmix-seglbl {
    font-size: 11px; font-weight: 600; color: #ffffff; padding: 0 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.psda-dm-retmix-op { background: var(--primary-color, #1565C0); }
/* Slate darkened (#90a4ae → #546e7a) so the white in-bar label meets WCAG AA 4.5:1. */
.psda-dm-retmix-sale { background: #546e7a; }
.psda-dm-retmix-legend { display: flex; gap: 20px; margin-top: 10px; font-size: 13px; color: #495057; }
.psda-dm-retmix-key { display: inline-flex; align-items: center; gap: 6px; }
.psda-dm-retmix-key strong { color: #1f2328; font-variant-numeric: tabular-nums; }
.psda-dm-retmix-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.psda-dm-retmix-dot.psda-dm-retmix-op { background: var(--primary-color, #1565C0); }
.psda-dm-retmix-dot.psda-dm-retmix-sale { background: #546e7a; }
.psda-dm-retmix-insight { margin-top: 8px; font-size: 13px; color: #5c636a; }

/* [2026-06-09] 50/50 row: Sources of Return (left) + All-In Cost vs Gross Sale (right). Flex (not
   grid) so that when only ONE card is shown (the two have independent hide-guards — e.g. a loss deal
   hides Sources of Return but not the cost/sale comparison) the survivor takes the full width instead
   of stranding at half width beside an empty column. Stacks on narrow viewports. */
.psda-dm-sum-pair { display: flex; gap: 1.25rem; align-items: stretch; flex-wrap: wrap; }
.psda-dm-sum-pair > .psda-dm-retmix,
.psda-dm-sum-pair > .psda-dm-acqsale { flex: 1 1 0; min-width: 0; margin: 0; }
@media (max-width: 991.98px) {
    .psda-dm-sum-pair > .psda-dm-retmix,
    .psda-dm-sum-pair > .psda-dm-acqsale { flex-basis: 100%; }
}

/* All-In Cost vs Gross Sale — two scaled magnitude bars (reuses the retmix card chrome via its own
   class so the two cards in the row match). Cost = quiet slate, Gross Sale = brand blue. */
.psda-dm-acqsale[hidden] { display: none; }
.psda-dm-acqsale {
    background: #ffffff; border: 1px solid #e6e8eb; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 14px 16px;
}
.psda-dm-cvx-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.psda-dm-cvx-row:first-of-type { margin-top: 0; }
.psda-dm-cvx-lbl { flex: 0 0 86px; color: #495057; }
.psda-dm-cvx-track { flex: 1 1 auto; height: 14px; background: #eef0f2; border-radius: 7px; overflow: hidden; }
.psda-dm-cvx-bar { display: block; height: 100%; border-radius: 7px; }
.psda-dm-cvx-bar.psda-dm-cvx-cost { background: #90a4ae; }
.psda-dm-cvx-bar.psda-dm-cvx-sale { background: var(--primary-color, #1565C0); }
.psda-dm-cvx-val { flex: 0 0 auto; color: #1f2328; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }


/* ── 10-Year Pro Forma table polish (Phase 5; de-coloured 2026-06-03) ─────────
   Match the sample's clean ledger: drop the .table-bordered vertical gridlines in
   favor of hairline horizontal separators only, a quiet uppercase header, and
   comfortable row padding. Negatives stay parenthesized in normal color (no red —
   locked decision). 2026-06-03 (user: "too many colors"): the saturated blue NOI
   row + blue Total rows are GONE on the rail — subtotals now read as bold dark
   ledger lines with a rule above (like DashboardRedesignSample.png), and the table
   sits in a rounded white card. Scoped to rail mode; the wizard fallback + single
   page keep the bordered table and the blue rows. */

/* Rounded card container (sample's panel): clip the table corners. */
.psda-dm-report #dm-operatingRow .card {
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.psda-dm-report #dm-operatingTable table { border: 0; margin-bottom: 0; }

/* Neutralize the legacy .noi-table shading (inline <style> in _Assumptions.cshtml): it paints
   EVERY row #eef3f7 and every label cell a darker #dfe7ef, plus a blue header/border — that
   table-wide blue-grey was the "too much shading". Scoped with the #id so it out-ranks the
   single-class legacy rules. Flat white rows; only the .table-secondary section bands keep a band. */
.psda-dm-report #dm-operatingTable tbody tr { background: #ffffff; }
.psda-dm-report #dm-operatingTable tbody td:first-child { background: #ffffff; }
.psda-dm-report #dm-operatingTable thead th { background: #ffffff !important; } /* beat inline #f0f0f0 on the Closing header */
.psda-dm-report #dm-operatingTable table.table-bordered td,
.psda-dm-report #dm-operatingTable table.table-bordered th { border: 0; }
.psda-dm-report #dm-operatingTable td,
.psda-dm-report #dm-operatingTable th {
    border-top: 1px solid #eef0f2;  /* hairline horizontal separators only */
    padding: 7px 12px;
}
.psda-dm-report #dm-operatingTable thead th {
    border-top: 0;
    border-bottom: 1px solid #dee2e6;
    background: #ffffff;
    color: #6c757d;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Section header rows (.table-secondary): soft-grey band, no gridlines, and a bold uppercase
   label so the sections read as dividers (a key readability anchor in the dense table). */
.psda-dm-report #dm-operatingTable tr.table-secondary td {
    background: #f5f6f8;
    border-top: 1px solid #e6e8eb;
    font-size: 11px;
    font-weight: 700;
    color: #1f2328;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Readability pass (2026-06-03, user: "hard to read"): one consistent body size with tabular
   numerals, lighter indented sub-line-items, and the subtotal/headline rows kept bold so the eye
   has anchors. */
.psda-dm-report #dm-operatingTable table { font-variant-numeric: tabular-nums; }
.psda-dm-report #dm-operatingTable tbody td,
.psda-dm-report #dm-operatingTable tbody th { font-size: 13px; }
.psda-dm-report #dm-operatingTable .op-subrow > td { color: #5c636a; font-weight: 400; }
.psda-dm-report #dm-operatingTable tr.font-weight-bold > td { font-weight: 700; color: #1f2328; }

/* Sensitivity matrices: the row-label column was far wider than its short cap/% labels need.
   Shrink it to its content so the data cells get the room. */
.psda-dm-report #dm-sensitivitySection .psda-sens-rowhead,
.psda-dm-report #dm-holdSensSection .psda-sens-rowhead { width: 1%; white-space: nowrap; }

/* De-blue the subtotal rows. The two Total rows carry an INLINE blue fill
   (SUMMARY_STYLE = "background:#1565C0;color:#fff" in _DealMetrics.cshtml) — only
   !important beats inline. Repaint them as bold dark ledger lines with a rule above. */
/* [2026-06-11 item 19] The td[style*=1565C0] + .noi-emphasis-row neutralizers are GONE:
   _DealMetrics.cshtml now emits the quiet treatment at the source (no inline SUMMARY_STYLE,
   no blue fill), so the specificity war they fought — and on the NOI row LOST (equal
   specificity, later source order) — no longer exists. */


/* ── Stale-sensitivity nudge + subtle canvas settle ───────────────────────── */
#dealMetricsResults .psda-sens-stale { opacity: 0.45; transition: opacity 150ms ease; }
#dealMetricsResults #dm-sensitivitySection.psda-sens-stale::after {
    content: "Inputs changed \2014 re-run sensitivity";
    display: block; margin-top: 0.35rem; font-size: 0.78rem; color: #8a6d3b;
}
@keyframes psdaCanvasSettle { from { opacity: 0.82; } to { opacity: 1; } }
.psda-canvas-updated { animation: psdaCanvasSettle 160ms ease-out; }
@media (prefers-reduced-motion: reduce) { .psda-canvas-updated { animation: none; } }


/* ── Canvas KPI grid: container-query reflow ───────────────────────────────
   Lives in _DealMetrics.cshtml as `.row.dm-kpi-grid` with col-* fallbacks.
   Cards reflow based on canvas width, not viewport. */
.dm-kpi-grid {
    container-type: inline-size;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem 0;
}
.dm-kpi-grid > [class*="col-"] {
    flex: none;
    max-width: none;
    width: auto;
    padding: 0;
}
.dm-kpi-grid .card { margin-bottom: 0; }

/* Phase 4 (dashboard redesign): the returns KPI cards go BACK to blue — but a SOFT, semi-transparent
   tint of the theme blue (not the saturated fill), keeping the current number text styling + size
   (dark tabular numerals, muted uppercase label). The tint is a dialable variable (--dm-kpi-tint).
   color-mix tints the per-user theme --cre-blue and stays AA-legible with dark numbers; a solid
   #eef4fb fallback covers browsers without color-mix.
   NOTE: this DELIBERATELY reverses the prior "quiet white card" ruling (memory
   project_psda_kpi_strip / CLAUDE.md Returns-KPI ruling) at the user's explicit request — do not let
   an /impeccable:audit flip it back to white without checking with the user first. Scoped to rail
   mode; the single page hides .dm-kpi-grid entirely. */
.psda-rail-mode .dm-kpi-grid { --dm-kpi-tint: 8%; }
.psda-rail-mode .dm-kpi-grid .card.bg-primary {
    background: #eef4fb !important; /* ≈8% blue-on-white fallback (no color-mix) */
    background: color-mix(in srgb, var(--cre-blue, #1565C0) var(--dm-kpi-tint), #ffffff) !important;
    color: #5c636a !important;
    border: 1px solid #d7e3f4;
    border-top: 2px solid var(--cre-blue, #1565C0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.psda-rail-mode .dm-kpi-grid .card.bg-primary .card-body { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 600; }
.psda-rail-mode .dm-kpi-grid .card.bg-primary h3 {
    color: #1f2328 !important;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: -0.01em;
}

/* ── Quiet capital/basis strip (rail only) ──────────────────────────────────
   Sits under the hero return tiles, above the tab strip. Carries acq basis + capital stack +
   going-in cap (PP) as a tabular line — NOT blue tiles — so returns stay the hero. Hidden on the
   wizard / single page (where psda-rail.js / buildCapStrip don't run, so it'd read all "—"). */
#dm-capStrip { display: none; }
.psda-rail-mode #dm-capStrip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    padding: 11px 2px;
    margin: 0 0 1rem;
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
}
.psda-rail-mode .dm-cap-seg { padding: 2px 16px; border-right: 1px solid #eef0f2; white-space: nowrap; }
.psda-rail-mode .dm-cap-seg:last-child { border-right: 0; }
.psda-rail-mode .dm-cap-label { color: #6c757d; margin-right: 7px; }
.psda-rail-mode .dm-cap-value { color: #1f2328; font-weight: 600; }
.psda-rail-mode .dm-cap-sub { color: #6c757d; font-weight: 400; margin-left: 6px; }
@media (max-width: 760px) {
    .psda-rail-mode .dm-cap-seg { border-right: 0; padding: 2px 12px 2px 2px; }
}

/* Locked (not-ready) report tabs: greyed + non-interactive; the hover title states what's needed. */
.psda-dm-tab-locked { color: #aeb4ba !important; cursor: not-allowed; }
.psda-dm-tab-locked:hover { color: #aeb4ba; }


/* ── NOI verification panel ─────────────────────────────────────────────
   Shown after paste, before user confirms the annual values look correct.
   Mirrors the Waterfall's Import → chart → confirm flow, client-side. */
.psda-rail-noi-verify {
    margin: 0.5rem 0 0.6rem;
    border: 1px solid var(--cre-border);
    border-radius: 6px;
    padding: 0.6rem 0.75rem 0.65rem;
    background: #f8fafc;
}
.psda-rail-noi-verify-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}
.psda-rail-noi-verify-summary {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cre-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.psda-rail-noi-clear-btn {
    font-size: 0.75rem;
    color: #6c757d;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.psda-rail-noi-clear-btn:hover { color: #1f2328; }
.psda-rail-noi-clear-btn:focus-visible {
    outline: 2px solid var(--cre-blue, #1565C0);
    outline-offset: 2px;
    border-radius: 2px;
}
.psda-rail-noi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin-bottom: 0.55rem;
    font-variant-numeric: tabular-nums;
}
.psda-rail-noi-table th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
    font-weight: 600;
    padding: 0 0 0.2rem;
    text-align: left;
}
.psda-rail-noi-table th:last-child,
.psda-rail-noi-table td:last-child { text-align: right; }
.psda-rail-noi-table td {
    padding: 0.18rem 0;
    color: #1f2328;
    border-top: 1px solid #eceff2;
}
.psda-rail-noi-confirm-btn {
    width: 100%;
    padding: 0.45rem 0.5rem;
    background: var(--cre-blue, #1565C0);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 0.12s ease;
}
.psda-rail-noi-confirm-btn:hover { background: #0d47a1; }
.psda-rail-noi-confirm-btn:focus-visible {
    outline: 2px solid var(--cre-blue, #1565C0);
    outline-offset: 2px;
    border-radius: 5px;
}
@media (pointer: coarse) {
    .psda-rail-noi-confirm-btn,
    .psda-rail-noi-clear-btn { min-height: 44px; }
}


/* ── NOI gate hint (§7.3) ────────────────────────────────────────────────
   Shown between the Cash Flows section and the gated sections while NOI is
   missing. psda-rail.js hides it once noiPresent() is true. */
.psda-rail-noi-hint {
    font-size: 0.8rem;
    /* [2026-06-13] #6c757d on the #f5f8ff tint was ~4.3:1 (axe serious: under WCAG AA 4.5);
       darkened to clear AA. */
    color: #565d64;
    margin: 0.35rem 0 0.6rem;
    padding: 0.45rem 0.6rem;
    background: #f5f8ff;
    border-left: 3px solid var(--cre-blue, #1565C0);
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
}


/* ── Hide the wizard's Calculate button in rail mode ──────────────────────
   The live recompute + status pill replace it. The wizard fallback keeps
   it; this rule only fires under .psda-rail-mode. */
.psda-rail-mode #debtCalcButton,
.psda-rail-mode .psda-debt-calc-btn { display: none !important; }


/* ── Responsive: off-canvas rail (<1200px) ──────────────────────────────── */
.psda-rail-toggle { display: none; }
.psda-rail-backdrop { display: none; }

@media (max-width: 1199.98px) {
    .psda-rail-grid {
        grid-template-columns: 1fr;
        padding: 0 clamp(0.5rem, 2vw, 1rem);
    }
    .psda-rail-toggle {
        display: inline-flex; align-items: center; gap: 0.45rem;
        align-self: start; margin-bottom: 0.75rem;
        background: var(--cre-surface); border: 1px solid var(--cre-border); border-radius: 6px;
        padding: 0.55rem 0.95rem;
        font-weight: 600; color: var(--cre-blue, #1565C0); cursor: pointer;
        min-height: 44px;
    }
    .psda-rail-toggle:focus-visible { outline: 2px solid var(--cre-blue, #1565C0); outline-offset: 1px; }

    .psda-rail {
        position: fixed; top: 0; left: 0; height: 100vh; z-index: 1050;
        width: min(380px, 92vw); max-width: 92vw;
        background: var(--cre-surface); overflow-y: auto;
        padding: 1rem 1.25rem;
        border-right: 1px solid var(--cre-border);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
        transform: translateX(-100%);
        transition: transform 200ms ease;
        max-height: none;
    }
    .psda-rail-grid.rail-open .psda-rail { transform: none; }

    .psda-rail-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1040;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0; pointer-events: none;
        transition: opacity 200ms ease;
    }
    .psda-rail-grid.rail-open .psda-rail-backdrop { opacity: 1; pointer-events: auto; }
}
@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
    .psda-rail, .psda-rail-backdrop { transition: none; }
}


/* ── Touch-pointer affordances ──────────────────────────────────────────── */
@media (pointer: coarse) {
    .psda-detail-btn { padding: 0.55rem 1rem; font-size: 0.85rem; min-height: 44px; }
    .psda-rail-section-head { padding: 0.85rem 0; min-height: 44px; }
    .psda-rail-toggle { min-height: 44px; padding: 0.7rem 1rem; }
    .psda-rail-status { padding: 0.4rem 0.85rem; min-height: 36px; }
}


/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
    #psdaRail,
    .psda-rail-toggle,
    .psda-rail-backdrop,
    .psda-canvas-tools { display: none !important; }

    .psda-rail-grid {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .psda-canvas { min-width: 0; width: 100%; }
}