/* [PAID-ONLY] Rewritten 2026-06-09 (replaces the always-on ?ui=rail mode). Strip from free tool
   before re-release.

   Deal Metrics editing rail for the Waterfall page, mirroring the PSDA onepage rail-in-report-mode.
   Everything is scoped to `.wf-shell.wf-dm-active` / the `#wfDmRail*` ids, and the rail is hidden by
   the native [hidden] attribute when not on the Deal Metrics tab — so nothing here touches the plain
   tabbed wizard on the other tabs (or on any tab when JS hasn't added .wf-dm-active). */

/* ── Layout: report-mode 2-col grid (rail | report), mirroring #psdaOnePage.op-report-active ──
   KEEP the wizard's report at its non-rail size and just ADD the rail on the left, shifting the
   content right. The shell breaks out of Bootstrap's centered .container (full-bleed) only to create
   the rail's left gutter; the report column stays capped at the non-rail .container width
   (--wf-content-w, BS4 .container max at >=1200px) so it reads identically to the no-rail view.
   The rail is hidden (native [hidden]) until JS enters Deal Metrics mode. */
.wf-shell.wf-dm-active {
    --wf-rail-w: 380px;
    --wf-rail-gap: 1.5rem;
    --wf-content-w: 1140px;   /* BS4 .container max-width at >=1200px viewports */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 clamp(0.75rem, 2vw, 1.5rem);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--wf-rail-w) minmax(0, var(--wf-content-w));
    column-gap: var(--wf-rail-gap);
    align-items: start;   /* the rail is sticky-positioned, not stretched */
}
/* Editing rail → left column, sticky from the top. */
.wf-shell.wf-dm-active > #wfDmRail {
    grid-column: 1;
    position: sticky;
    top: 8px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0 12px 0 0;
    border-right: 1px solid #e6e8eb;   /* the rail's divider */
}
/* Report column. min-width:0 lets it shrink below the wide per-tier cash-flow table's intrinsic
   width so that table gets its own .table-responsive scroll instead of blowing out the grid. */
.wf-shell.wf-dm-active > #calcForm {
    grid-column: 2;
    min-width: 0;
}

/* ── Rail head ────────────────────────────────────────────────────────────────── */
.wf-dm-rail-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.85rem;
}
.wf-dm-rail-title {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

/* The relocated _Inputs2 form was laid out for a full-width tab; in a 380px rail trim the heavy
   inner padding and let Bootstrap's responsive columns stack so the controls stay usable. */
#wfDmRail .row { margin-left: 0; margin-right: 0; }
#wfDmRail .p-2 { padding: 0.35rem !important; }
#wfDmRail .card-body { padding: 0.5rem; }
#wfDmRail input,
#wfDmRail select,
#wfDmRail textarea { max-width: 100%; }
#wfDmRail .input-group input,
#wfDmRail .input-group select { max-width: none; }
#wfDmRail .bg-light { background: #f7f9fc !important; }

/* ── Accessibility fixes for the relocated _Inputs2 markup (scoped to the rail) ───
   Bootstrap defaults that fall under WCAG AA on white once surfaced in the rail; darkened to clear
   AA while keeping the intended semantics. Scoped to #wfDmRail so the tabbed wizard is untouched. */
#wfDmRail .btn-link { color: #0a58ca; }
#wfDmRail .text-muted { color: #595f66 !important; }
#wfDmRail #summlength { color: #c81e1e !important; }
#wfDmRail .text-success { color: #1b6e2e !important; }   /* Add-Tier affordance */
#wfDmRail .text-danger { color: #c1121f !important; }    /* Remove-Tier affordance */

/* ── Hide / Edit inputs collapse ──────────────────────────────────────────────────
   "Hide inputs" lives at the top of the rail; "Edit inputs" is a child of #calcForm (top of the
   report column) shown ONLY when collapsed. Collapsing reverts the grid so the report re-centers at
   its non-rail width — exactly the onepage behavior. */
.wf-dm-rail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color, #1565C0);
    background: #f4f8fd;
    border: 1px solid #cfe0f3;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s ease;
}
.wf-dm-rail-toggle:hover { background: #e8f1fb; }
.wf-dm-rail-toggle:focus-visible {
    outline: 2px solid var(--primary-color, #1565C0);
    outline-offset: 2px;
}
/* [2026-06-11 item 21] Reopen = the PSDA onepage's left-edge vertical "Assumptions" handle
   (~3/4 up the page); chevron nudges outward on hover; the rail slides in on open. */
.wf-dm-rail-reopen { display: none; }
.wf-shell.wf-dm-active.rail-collapsed .wf-dm-rail-reopen {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    position: fixed; left: 0; top: 25%; z-index: 240;
    padding: 12px 7px 14px;
    background: #ffffff;
    border: 1px solid #d7dbe0; border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.07);
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--primary-color, #1565C0);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), background 0.15s ease, border-color 0.15s ease;
}
.wf-shell.wf-dm-active.rail-collapsed .wf-dm-rail-reopen:hover {
    transform: translateX(2px);
    background: #f4f8fd;
    border-color: var(--primary-color, #1565C0);
}
.wf-shell.wf-dm-active.rail-collapsed .wf-dm-rail-reopen:focus-visible {
    outline: 2px solid var(--primary-color, #1565C0); outline-offset: 2px;
}
.wf-dm-rail-reopen .fa-chevron-right { font-size: 10px; transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1); }
.wf-shell.wf-dm-active.rail-collapsed .wf-dm-rail-reopen:hover .fa-chevron-right { transform: translateX(2px); }
.wf-dm-rail-handle-txt { writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; }
@keyframes wfDmRailEnter {
    from { transform: translateX(-14px); opacity: 0.55; }
    to   { transform: translateX(0);     opacity: 1; }
}
.wf-dm-rail.wf-dm-rail-enter { animation: wfDmRailEnter 0.2s cubic-bezier(0.25, 1, 0.5, 1); }
@media (prefers-reduced-motion: reduce) {
    .wf-shell.wf-dm-active.rail-collapsed .wf-dm-rail-reopen,
    .wf-dm-rail-reopen .fa-chevron-right { transition: none; }
    .wf-dm-rail.wf-dm-rail-enter { animation: none; }
}
/* Collapsed: undo the 2-col grid (report re-centers at non-rail width) and hide the rail. */
.wf-shell.wf-dm-active.rail-collapsed {
    display: block;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}
.wf-shell.wf-dm-active.rail-collapsed > #wfDmRail { display: none; }

/* ── Responsive: stack the rail above the report below ~1600px ─────────────────────
   The grid needs rail (380) + gap (24) + report (1140) + shell padding ≈ 1600px. Below that, drop
   to a single column (rail as a full-width block above the report) rather than squeezing two columns
   into a too-narrow viewport (which would scroll the page sideways). Mirrors the onepage's stack. */
@media (max-width: 1599.98px) {
    .wf-shell.wf-dm-active {
        display: block;
        width: auto;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
    .wf-shell.wf-dm-active > #wfDmRail {
        position: static;
        max-height: none;
        overflow: visible;
        grid-column: auto;
        margin-bottom: 1rem;
        padding: 0 0 1rem 0;
        border-right: 0;
        border-bottom: 1px solid #e6e8eb;
    }
    .wf-dm-rail-toggle { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wf-dm-rail-toggle { transition: none; }
}

/* ── Print: the rail is screen-only; the report prints as the existing exhibit ──── */
@media print {
    #wfDmRail,
    .wf-dm-rail-toggle,
    .wf-dm-rail-reopen { display: none !important; }
    .wf-shell.wf-dm-active {
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
    }
}

/* [2026-06-11 item 18] Cross-promo banner — quiet hairline strip, brand-blue icon/link,
   dismissible. Never a saturated marketing band. */
.psda-promo {
    display: flex; align-items: flex-start; gap: 10px;
    background: #f4f8fd; border: 1px solid #cfe0f3; border-radius: 8px;
    padding: 10px 12px; margin: 0 0 14px;
    font-size: 12.5px; color: #3d4750; line-height: 1.45;
}
.psda-promo[hidden] { display: none; }
.psda-promo > i { color: var(--primary-color, #1565C0); font-size: 13px; margin-top: 2px; }
.psda-promo a { color: var(--primary-color, #1565C0); font-weight: 600; }
.psda-promo-close {
    margin-left: auto; border: none; background: transparent; color: #8a929b;
    font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 4px;
}
.psda-promo-close:hover { color: #1f2328; }
.psda-promo-close:focus-visible { outline: 2px solid var(--primary-color, #1565C0); outline-offset: 2px; }