/* Platform shell -- every color/font/radius/spacing value below is a design token (see
   includes/class-npca-design-tokens.php), never a hardcoded brand value. Changing deployment
   config changes the rendered result without touching this file. */

/* 2026-07-05 visual QA pass (Nathan, first live look): layout was too narrow and text too small
   for an app-like feel; both widened/enlarged here. See CHANGELOG.md for the full list of fixes
   from this pass.

   2026-07-05, round 2: 1080px was still called out as "entirely too narrow for Desktop viewing"
   (fine on mobile, not on desktop). Confirmed via the live page's own markup/CSS that nothing
   upstream (#brx-content is width:100%, no wrapping .brxe-container around this shortcode's
   output, no boxed body width) constrains this further -- this rule alone is the true visual
   boundary, so raised it more decisively rather than nudging it again. min() keeps it from
   overflowing narrower browser windows instead of a flat px value. */
.npca-v2-shell {
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--match-ink, #272F3D);
    max-width: min(96vw, 1440px);
    margin: 0 auto;
    padding: var(--space-card, 24px);
}

/* 2026-07-05, dashboard only: less top padding so the compact portal header (see
   templates/components/portal-header.php) and the portal nav/content below it sit higher on the
   page -- Nathan's "app workspace, not a landing page" direction. Left/right/bottom padding
   unchanged; only the dashboard's own top padding is reduced. */
.npca-v2-dashboard {
    padding-top: 12px;
}

/* The theme's own page-title output ("My Exchange", from the page's post_title) is redundant
   with this shell's own brand header and was requested hidden -- scoped to the dashboard page's
   WordPress-generated body class only, so no other page is affected. See
   docs/rollback/2026-07-05-v2-in-place-preview-ROLLBACK.md for what page ID this targets and why
   a body-class scope (not a global h1 rule) was chosen. */
body.page-id-3475 #brx-content > h1 {
    display: none;
}

.npca-v2-brand-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: var(--space-card, 24px);
}

.npca-v2-brand-header__logo {
    max-height: 60px;
    max-width: 320px;
}
/* 2026-07-05: widened from 220px -- the new NPCA logo (registration/onboarding header, per
   Nathan's direction to incorporate the real NPCA mark) is a full wordmark + tagline ("National
   PACE Capital Access") + map icon, a much wider composition than the previous plain MGB logo.
   At 220px the tagline text shrank to near-illegibility; 320px matches the size already used for
   this same logo on the WordPress login page (see npca-match-v2.php's login_enqueue_scripts). */

.npca-v2-brand-header__app-name {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 2rem;
    color: var(--match-ink, #272F3D);
    margin: 0;
}

.npca-v2-brand-header__org-name {
    margin: 4px 0 0;
    color: var(--brand-secondary, #76BC21);
}

/* NPCA Match wordmark (2026-07-05) -- see templates/components/npca-wordmark.php. The "app
   identity" used inside the NPCA Match app experience itself (dashboard, the shared logged-out
   gate), as opposed to .npca-v2-brand-header above (MGB logo), which remains on marketing-facing
   pages. No dedicated logo asset exists yet -- text only, deliberately, not a placeholder passed
   off as final. Base styles live here since both the dashboard (dashboard.css) and the shared
   login-required layout use this component. */
.npca-v2-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.npca-v2-wordmark__app-name {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--match-ink, #272F3D);
}

.npca-v2-wordmark__tagline {
    font-size: 0.8rem;
    color: var(--match-ink, #272F3D);
    opacity: 0.65;
}

/* Two-tone wordmark accent (2026-07-05) -- see includes/template-functions.php's
   npca_app_name_wordmark_html(), the ONE place that decides which word of the app name gets this
   class, so brand-header.php and npca-wordmark.php (and anywhere else that calls the helper) never
   need their own copy of this rule. Green matches this deployment's own brand_primary -- the same
   green already used as live text color on the /match/ landing page (its --base token, used for
   the tagline directly under its own "NPCA Match" heading) -- fact-found from that page, not
   invented, even though that heading's own text is not itself two-toned there today. */
.npca-v2-wordmark-accent {
    color: var(--brand-primary, #009245);
}

/* Login modal (2026-07-05) -- see templates/components/login-modal.php. Replaces redirecting to
   /wp-login.php: the "Log In" button on the shared logged-out gate (login-required-notice.php)
   opens this in place instead, per Nathan's direction that the user should never leave the NPCA
   Match experience to authenticate. WordPress's own wp_signon() still does the actual
   authentication (modules/auth/class-npca-auth-handler.php) -- this is just the styled form. */
.npca-v2-login-modal[hidden] {
    display: none;
}

.npca-v2-login-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.npca-v2-login-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(39, 47, 61, 0.55);
}

.npca-v2-login-modal__panel {
    position: relative;
    background: #fff;
    border-radius: var(--radius-card, 16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: var(--space-card, 24px);
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.npca-v2-login-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--match-ink, #272F3D);
    opacity: 0.6;
}

.npca-v2-login-modal__close:hover {
    opacity: 1;
}

.npca-v2-login-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

body.npca-v2-modal-open {
    overflow: hidden;
}

/* Explicit heading scale -- the theme resets default h1-h6 sizing to near body-text size, so
   every heading inside the shell needs its size set here rather than relying on browser
   defaults. Applies once, covers registration/dashboard/onboarding-section headings alike. */
.npca-v2-shell h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0 0 12px;
}

.npca-v2-shell h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 8px;
}

/* Card treatment fact-found from the live /match/ landing page 2026-07-04 (Bricks + Automatic
   CSS): a neutral border rather than a brand-colored one, a clean white surface, and a soft lift
   -- "clean card-based UI... white/light backgrounds... strong rounded cards" per Nathan's
   direction. See docs/20-v2-runtime-configuration-architecture.md addendum. */
.npca-v2-status-card {
    background: #fff;
    border: 2px solid var(--match-border, #E2E8EE);
    border-radius: var(--radius-card, 14px);
    box-shadow: 0 2px 8px rgba(39, 47, 61, 0.06);
    padding: var(--space-card, 24px);
    margin-bottom: var(--space-card, 24px);
}

.npca-v2-status-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.npca-v2-status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85em;
}

.npca-v2-status-pill--ok {
    background: rgba(46, 125, 50, 0.15);
    color: var(--brand-primary, #2E7D32);
}

.npca-v2-status-pill--down {
    background: rgba(140, 31, 23, 0.15);
    color: #8A1F17;
}

/* Persistent unverified-email banner (2026-07-06) -- see
   templates/components/email-verification-notice.php. Deliberately calm, not alarming (amber
   tint, not red) -- per Nathan's direction this should read as a normal account step, not a
   warning that something is wrong. Shown on every dashboard state until verified; never blocks
   anything below it. */
.npca-v2-verify-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FFF8E8;
    border: 1px solid #F0DFB0;
    border-radius: var(--radius-card, 12px);
    padding: 12px 18px;
    margin-bottom: var(--space-card, 24px);
}

.npca-v2-verify-banner__text {
    margin: 0;
    font-size: 0.95em;
    color: var(--match-ink, #272F3D);
}

.npca-v2-verify-banner__form {
    margin: 0;
    flex-shrink: 0;
}

/* Dismissible Contractor-only encouragement banner (2026-07-07) -- see
   templates/components/contractor-encouragement-banner.php and assets/js/onboarding.js for the
   dismiss behavior. Deliberately thinner and quieter than .npca-v2-verify-banner (a neutral tint,
   not the amber "account step" color) -- this is a soft nudge toward optional fields, not
   anything the user needs to act on. Starts `hidden` in markup and is revealed by JS only if not
   already dismissed this session, to avoid a flash of the banner before JS can hide it. */
.npca-v2-encouragement-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: var(--match-surface-tint, #F3F9F5);
    border: 1px solid var(--match-border, #E2E8EE);
    border-radius: var(--radius-card, 10px);
    padding: 10px 16px;
    margin-bottom: var(--space-card, 24px);
}

.npca-v2-encouragement-banner[hidden] {
    display: none;
}

.npca-v2-encouragement-banner__text {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--match-ink, #272F3D);
}

.npca-v2-encouragement-banner__dismiss {
    flex-shrink: 0;
    border: none;
    background: none;
    color: #000;
    font-size: 1.1em;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}

.npca-v2-encouragement-banner__dismiss:hover {
    opacity: 0.7;
}

.npca-v2-support-contact {
    color: var(--brand-secondary, #76BC21);
    font-size: 14px;
}

.npca-v2-shell-error {
    color: #8A1F17;
    font-weight: 600;
}

/* Legal document viewer / EULA modal (2026-07-05) -- see
   templates/components/legal-document-viewer.php. Same overlay pattern as .npca-v2-login-modal
   above, sized larger (a legal document needs real reading room) and with its own internal scroll
   region so the header/accept row stay pinned while the document body scrolls -- that scroll
   region is exactly what assets/js/legal-viewer.js watches to unlock acceptance. */
.npca-v2-legal-viewer[hidden] {
    display: none;
}

.npca-v2-legal-viewer {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.npca-v2-legal-viewer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(39, 47, 61, 0.55);
}

.npca-v2-legal-viewer__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-card, 16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: var(--space-card, 24px);
    max-width: 780px;
    width: 100%;
    max-height: 88vh;
}

.npca-v2-legal-viewer__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--match-ink, #272F3D);
    opacity: 0.6;
}

.npca-v2-legal-viewer__close:hover {
    opacity: 1;
}

.npca-v2-legal-viewer__scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    margin: 12px 0;
    padding: 4px 16px 4px 0;
    border: 1px solid var(--match-border, #E2E8EE);
    border-radius: calc(var(--radius-card, 16px) / 2);
    line-height: 1.6;
}

.npca-v2-legal-viewer__scroll h3,
.npca-v2-legal-viewer__scroll h4,
.npca-v2-legal-viewer__scroll h5 {
    color: var(--match-ink, #272F3D);
    margin: 1.2em 0 0.4em;
}

.npca-v2-legal-viewer__scroll table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.npca-v2-legal-viewer__scroll td {
    border: 1px solid var(--match-border, #E2E8EE);
    padding: 8px;
    vertical-align: top;
}

.npca-v2-legal-viewer__accept-row {
    padding-top: 12px;
    border-top: 1px solid var(--match-border, #E2E8EE);
}

.npca-v2-legal-viewer__accept-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 600;
    margin: 8px 0;
}

.npca-v2-legal-viewer__accept-label input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.npca-v2-legal-viewer__scroll-hint {
    margin: 0;
    color: #8A1F17;
}