/* ============================================================================
   next-steps.css — the "Your Next Steps" card family (gold header + priority-railed rows).
   Shared by the Investor Dashboard and the portfolio-monitoring Documents page so both render
   one definition. Colors are literal (not --dash-* tokens) to match the approved handoff exactly.
   ========================================================================== */

/* Full-width GOLD header bar: bleeds past the host card's 20px padding (overflow:hidden on the card clips it
   to the rounded top corners) with dark bolt/title/subtitle and a dark pending pill (gold text). */
.ns-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: -20px -20px 0;
    padding: 18px 24px;
    background: linear-gradient(135deg, #f0cd7e, #d9a53f);
}
.ns-head-left { display: flex; align-items: center; gap: 12px; }
.ns-bolt {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    background: #241a04;
    align-items: center;
    justify-content: center;
    color: #f0cd7e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.ns-title { font-size: 20px; font-weight: 800; color: #241a04; letter-spacing: -.01em; }
/* Where the title is a real heading, undo the investor layout's heading styles so it looks the same as the div version. */
h2.ns-title { margin: 0; line-height: 1.25; text-transform: none; font-family: inherit; }
.ns-subtitle { font-size: 13px; color: #4a3410; margin-top: 2px; }
.ns-pending-pill {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    padding: 6px 14px;
    border-radius: 999px;
    background: #241a04;
    color: #f0cd7e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

.ns-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 4px 16px 14px;
    border-top: 1px solid #1a2032;
}
.ns-rail {
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: #2a3142;
}
.ns-row.pri-high .ns-rail { background: #e2554f; }
.ns-row.pri-medium .ns-rail { background: #d9a53f; }
.ns-row.pri-low .ns-rail { background: #3a4256; }
.ns-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #161c2c;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ns-body { flex: 1; min-width: 0; }
.ns-row-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #f4f6fa;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ns-urgent-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    background: #3a1616;
    color: #f5a3a0;
}
.ns-desc { font-size: 13.5px; color: #9aa3b8; margin-top: 4px; }
.ns-meta { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.ns-type { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a94a8; }
.ns-actions { flex: none; display: flex; align-items: center; }

/* Rows stack their action button under the content on narrow screens so nothing overflows. */
@media (max-width: 600px) {
    .ns-row { flex-wrap: wrap; }
    .ns-actions { width: 100%; margin-top: 8px; }
    .ns-actions .dash-action-btn,
    .ns-actions .ns-action-btn { width: 100%; text-align: center; justify-content: center; }
}

/* ── Standalone host (pages without the dashboard's .dash-action-card--full frame) ──────────────
   Gives .ns-head the 20px padding + overflow clip its full-bleed negative margins rely on. */
.ns-card {
    position: relative;
    padding: 20px;
    border: 1px solid #d9a53f;
    border-radius: 14px;
    background: #0d1220;
    overflow: hidden;
}

/* Due-date chip in a row's meta line — the "when is this needed" the row exists to state. */
.ns-due { font-size: 12px; font-weight: 700; color: #c9d6ef; }
.ns-due.overdue { color: #f5a3a0; }

/* Primary row action — the investor-wide green confirm/primary convention (#10b981). */
.ns-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 9px;
    border: 1px solid #10b981;
    background: #10b981;
    color: #04140d;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.ns-action-btn:hover:not(:disabled) { background: #0ea372; border-color: #0ea372; color: #04140d; text-decoration: none; }
.ns-action-btn:disabled { opacity: 0.6; cursor: default; }
.ns-action-btn:focus-visible { outline: 2px solid #bcd4ff; outline-offset: 2px; }

/* Compact "You're up to date" state, with the next upcoming due date so timing stays visible. */
.ns-done {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 4px 4px;
    font-size: 14px;
    color: #9aa3b8;
}
.ns-done-check {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.16);
    color: #6fe0b0;
}
.ns-done strong { color: #f4f6fa; }

/* Pager — a long list shows a page at a time so the card never pushes the page content out of view. */
.ns-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 4px 0;
    border-top: 1px solid #1a2032;
}
.ns-pager-status { font-size: 12.5px; color: #9aa3b8; margin-right: auto; font-variant-numeric: tabular-nums; }
.ns-pager-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #e6ecf7;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.ns-pager-btn:hover:not([aria-disabled="true"]) { background: rgba(255, 255, 255, 0.06); }
.ns-pager-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }

/* The next not-yet-due item, as one compact line under the open steps on every page. */
.ns-upcoming {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px 4px;
    border-top: 1px solid #1a2032;
    font-size: 13.5px;
    color: #9aa3b8;
}
.ns-upcoming strong { color: #c9d6ef; }
.ns-upcoming-icon { display: inline-flex; flex: none; color: #9aa3b8; }
.ns-upcoming-icon svg { width: 16px; height: 16px; }
.ns-pager-btn:focus-visible { outline: 2px solid #bcd4ff; outline-offset: 2px; }

/* Where the monitoring section nav lands the page: just below the sticky header + tab row (about 112px on
   desktop; the tab row is hidden under 900px). On desktop the anchor sits above "Your Next Steps", so the card is
   at the top on every section switch. On phones the card and the wrapped nav together fill the screen, so the card
   is reordered above the anchor: the page lands on the nav and the section's content starts on-screen, with the
   card one scroll up. The wrapper's children keep their DOM order otherwise.
   --deal-nav-h is 0 everywhere: the investor deal pages' shell (DealSubNav) scrolls with the page instead of joining the
   sticky chrome. It stays in the sum in case a sticky deal bar returns. The
   maintenance bar (Components/MaintenanceBar) adds its measured height, which js/site-notices.js keeps in --site-notice-bar-h. */
:root { --app-sticky-offset: calc(124px + var(--deal-nav-h, 0px) + var(--site-notice-bar-h, 0px)); }
@media (max-width: 900px) { :root { --app-sticky-offset: calc(76px + var(--deal-nav-h, 0px) + var(--site-notice-bar-h, 0px)); } }
.pm-nav-block { display: flex; flex-direction: column; }
.ns-scroll-anchor { scroll-margin-top: var(--app-sticky-offset); }
/* Tall enough below the anchor that the browser can always scroll it to the top — a section that's still loading,
   or short, would otherwise stop the scroll early and the nav would land lower on each switch. */
.pm-sections-scope { min-height: calc(100vh - var(--app-sticky-offset)); min-height: calc(100dvh - var(--app-sticky-offset)); }
@media (max-width: 900px) {
    .pm-nav-block > .ns-card { order: -1; }
}