/* ============================================================
   New Intake — Unified Form Styles
   Derived from falcon-west-intake-form v1.7.0
   + result panels from insurance-triage-plugin v2.3.7
   ============================================================ */

/* ---------- Design Tokens ----------
   Single source of truth for brand colors, borders, and type. Change a
   value here and every form updates together — never restyle an
   individual form or field type with literal values.

   CORE-GOVERNED since v3.7.0; house-aligned since v3.16.30: every
   --ni-* token aliases Falcon West Core Material (mu-core 1.2.8
   falcon-west-material.css) with a house fallback. Tokens that fought
   house (Montserrat, #D2793D labeled fill, 6/8/20px radii, 3px glow
   focus, navy H1) map to Core / house: Raleway, rust-700 fill,
   4px controls, ink text, 2px focus replacing the border.
   Change brand values in mu-core, never here.

   Division themes override these tokens in .ni-division-{key} scope;
   the values live in NI_Division::divisions()['colors'] and are emitted
   via wp_add_inline_style — do not hand-edit per-division colors here. */
:root {
    --ni-navy: var(--md-secondary, #15445D);            /* navy-900 chrome + selected tiles — never a button fill */
    --ni-page: var(--ni-navy);                          /* Insurance doors: navy. Energy doors override to ink. /card to line-100. */
    --ni-navy-tint: #eef4f7; /* no Core secondary-layer token exists — frozen literal */
    --ni-orange: var(--md-primary-decorative, #D2793D); /* decorative accent only (progress) — NEVER text or overlines */
    --ni-btn: var(--md-primary, #a85f2e);               /* rust-700 labeled fill — not --button-fill / #D2793D */
    --ni-btn-hover: var(--md-primary-variant, #8a4d25); /* rust-800 */
    --ni-btn-muted: transparent;
    --ni-btn-muted-hover: var(--md-layer-primary-hover, #fbe9db);
    --ni-btn-muted-text: var(--md-primary, #a85f2e);
    --ni-error: var(--md-error, #d63638);
    --ni-text: var(--md-on-surface, #080808);           /* ink-900 text */
    --ni-line: var(--md-outline, #e2e8f0);
    --ni-border-color: var(--md-outline-strong, #8a8a8a); /* field rest */
    --ni-border-width: 1px;
    --ni-radius: var(--shape-medium, 4px);              /* controls / cards */
    --ni-radius-lg: var(--shape-medium, 4px);
    --ni-card-radius: var(--shape-medium, 4px);          /* cards 4px; page/canvas radius 0 */
    --ni-focus-border: var(--md-primary, #a85f2e);      /* 2px rust replacing the border — no glow */
    --ni-focus-ring: transparent;
    --ni-font: var(--font-body, 'Raleway'), sans-serif;
}

/* ---------- Wrapper ---------- */
.ni-wrapper {
    padding: 2rem 1rem;
    min-height: 100%;
    font-family: var(--ni-font);
    color: var(--ni-text);
}

/* Dark fill for the shortcode wrapper. On Applications public pages
   body.ni-page paints the full HTML page; this class matches the island
   to that fill (navy, or ink on Energy Start doors). */
.ni-wrapper-dark {
    background-color: var(--ni-page);
}

/* Full-page fill on Applications public pages (v3.14.2). Insurance
   doors stay navy. Energy public doors (Start, Welcome, File Transfer)
   override --ni-page to ink-900. /card overrides to line-100 #ececec
   — never put #ececec on Start doors. Pages are plain HTML — do not
   restyle page-builder / Astra chrome. The one Astra hook (v3.16.20)
   is hiding the theme footer so it cannot double-print over .ni-legal.
   body.ni-page is added only on plugin front doors and other public pages
   that embed a plugin shortcode — never wp-admin, never / or /tools.
   The white .ni-card is unchanged; chrome on the fill (phone banner,
   editor notices above the shortcode) stays readable. */
html:has(body.ni-page),
body.ni-page,
body.ni-page #page,
body.ni-page #content,
body.ni-page #primary,
body.ni-page .site,
body.ni-page .site-content,
body.ni-page .site-main,
body.ni-page article.page,
body.ni-page .entry-content,
body.ni-page .site-footer {
    background-color: var(--ni-page) !important;
    background-image: none !important;
}

body.ni-page {
    color: #ffffff;
}

body.ni-page .entry-title,
body.ni-page .page-title,
body.ni-page .entry-header {
    color: #ffffff;
}

/* Form island keeps dark text; the card stays white. */
body.ni-page .ni-wrapper {
    color: var(--ni-text);
}

/* Theme footer off on Applications doors (v3.16.20). The in-page
   .ni-legal closer is the only legal. Live sites may already hide
   the WP/Astra footer in the customizer; the plugin must hide it
   so turning that footer back on does not bring it back here.
   Do not restyle Astra beyond this hide. */
body.ni-page .site-footer,
body.ni-page .ast-below-footer-wrap,
body.ni-page .site-below-footer-wrap {
    display: none !important;
}

/* ---------- Phone Banner ---------- */
.ni-phone-banner {
    max-width: 540px;
    margin: 0 auto 1.25rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--ni-radius-lg);
    padding: 0.75rem 1.25rem;
    color: #ffffff;
    font-family: var(--ni-font);
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.5;
}

.ni-phone-banner a {
    color: #f5c49b;
    font-weight: 700;
    text-decoration: none;
}

.ni-phone-banner a:hover {
    text-decoration: underline;
}

/* ---------- Card ---------- */
.ni-card {
    max-width: 540px;
    margin: 2rem auto;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.06));
    padding: 36px;
}

/* Soft card corners everywhere (v2.9.2) — high specificity + !important
   so page-builder/theme card resets can't square them off again. */
.ni-wrapper .ni-card {
    border-radius: var(--ni-card-radius) !important;
}

/* Maintenance card (v2.9.8): served in place of a form toggled OFF in
   the Forms Library. */
.ni-card.ni-maintenance {
    text-align: center;
    color: var(--ni-navy);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Public broker card — house paper face (v3.16.30).
   Canvas is line-100 #ececec with a white card (elevation 1, radius 4,
   no border). Same face for /card/{slug} and /card/?broker=. Energy
   ink stays off /card. Do not put #ececec on Applications Start doors. */
html:has(body.ni-page #ni-card.ni-broker-card),
body.ni-page:has(#ni-card.ni-broker-card) {
    --ni-page: var(--color-line-100, #ececec);
    color: var(--md-on-surface, #080808);
}
.ni-broker-card-wrap,
.ni-wrapper:has(#ni-card.ni-broker-card) {
    --ni-card-sans: 'Raleway', var(--font-body, sans-serif);
    min-height: 100vh;
    margin: 0;
    padding: 20px 12px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--color-line-100, #ececec);
    font-family: var(--ni-card-sans);
}
#ni-card.ni-broker-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    font-family: var(--ni-card-sans);
}
.ni-wrapper .ni-broker-card .ni-card {
    max-width: none;
    width: 100%;
    margin: 0;
    background: var(--md-surface, #ffffff);
    border: 0;
    border-radius: var(--shape-medium, 4px) !important;
    box-shadow: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, 0.12));
}
.ni-wrapper .ni-broker-card .ni-card-face {
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.ni-wrapper .ni-broker-card .ni-card-apps {
    padding: 0;
    overflow: hidden;
}
.ni-card-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ni-card-photo {
    flex: none;
    width: 80px;
    height: 80px;
    margin: 0;
}
.ni-card-photo img,
.ni-card-photo-img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: none;
}
.ni-card-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ni-card-name {
    margin: 0;
    font-family: var(--ni-card-sans);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.1;
    color: var(--md-text-high, rgba(8, 8, 8, 0.87));
}
.ni-card-title {
    margin: 0;
    font-family: var(--ni-card-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    color: var(--md-primary, #a85f2e);
}
.ni-card-firm {
    margin: 0;
    font-family: var(--ni-card-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--md-text-medium, rgba(8, 8, 8, 0.60));
}
.ni-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.ni-card-license {
    margin: 0;
    font-family: var(--ni-card-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--md-text-medium, rgba(8, 8, 8, 0.60));
}
/* House Badge tone=brand — tokens, never hand-paired rust pills. */
.ni-broker-card .md-badge[data-tone="brand"] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 10px;
    border: 0;
    border-radius: var(--shape-pill, 999px);
    background: var(--semantic-brand-bg, #fbe9db);
    font-family: var(--ni-card-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--semantic-brand-text, #8a4d25);
    cursor: default;
}
.ni-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}
.ni-card-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ni-card-actions-row:has(:only-child) .ni-card-btn {
    grid-column: 1 / -1;
}
.ni-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 36px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--shape-medium, 4px);
    font-family: var(--ni-card-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.25px;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease, border-color 150ms ease;
}
/* Rust fills beat Astra button:hover navy. Scope + !important —
   Call or text / Email are anchors; Save contact is a <button>. */
.ni-broker-card .ni-card-btn-contained,
body.ni-page .ni-broker-card .ni-card-btn-contained {
    background: var(--md-primary, #a85f2e) !important;
    background-color: var(--md-primary, #a85f2e) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid var(--md-primary, #a85f2e) !important;
    box-shadow: var(--elevation-2, 0 2px 4px rgba(0, 0, 0, 0.16));
}
.ni-broker-card .ni-card-btn-outlined,
body.ni-page .ni-broker-card .ni-card-btn-outlined {
    background: var(--md-surface, #ffffff) !important;
    background-color: var(--md-surface, #ffffff) !important;
    background-image: none !important;
    color: var(--md-primary, #a85f2e) !important;
    border: 1px solid var(--md-primary, #a85f2e) !important;
    box-shadow: none;
}
.ni-broker-card .ni-card-btn-contained:hover,
body.ni-page .ni-broker-card .ni-card-btn-contained:hover {
    background: #8a4d25 !important;
    background-color: #8a4d25 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #8a4d25 !important;
    box-shadow: var(--elevation-2, 0 3px 6px rgba(0, 0, 0, 0.2));
    text-decoration: none !important;
}
.ni-broker-card .ni-card-btn-outlined:hover,
body.ni-page .ni-broker-card .ni-card-btn-outlined:hover {
    background: var(--md-layer-primary-hover, rgba(168, 95, 46, 0.08)) !important;
    background-color: var(--md-layer-primary-hover, rgba(168, 95, 46, 0.08)) !important;
    background-image: none !important;
    color: var(--md-primary, #a85f2e) !important;
    border-color: var(--md-primary, #a85f2e) !important;
    text-decoration: none !important;
}
.ni-broker-card .ni-card-btn:focus,
.ni-broker-card .ni-card-btn:focus-visible,
.ni-broker-card .ni-card-cat-btn:focus,
.ni-broker-card .ni-card-cat-btn:focus-visible {
    outline: 2px solid #15445D !important;
    outline-offset: 2px !important;
}
.ni-card-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--md-outline, #dcdcdc);
    font-family: var(--ni-card-sans);
    font-size: 13px;
}
.ni-card-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    text-decoration: none !important;
}
.ni-card-contact a:hover,
.ni-card-contact a:focus {
    text-decoration: none !important;
}
.ni-card-contact-phone {
    color: var(--md-text-high, rgba(8, 8, 8, 0.87));
    font-weight: 600;
}
.ni-broker-card .ni-card-contact-email,
body.ni-page .ni-broker-card .ni-card-contact-email {
    color: var(--md-text-high, rgba(8, 8, 8, 0.87)) !important;
    background: none !important;
    background-color: transparent !important;
    width: auto;
    height: auto;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}
/* Rust LinkedIn square — house mock. Core a:hover underline is killed. */
.ni-broker-card .ni-card-linkedin,
body.ni-page .ni-broker-card .ni-card-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    margin-top: 4px;
    background: var(--md-primary, #a85f2e) !important;
    background-color: var(--md-primary, #a85f2e) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: var(--shape-medium, 4px);
    box-shadow: none !important;
    font-family: var(--ni-card-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none !important;
    text-transform: lowercase;
    overflow: hidden;
    font-size: 0;
}
.ni-broker-card .ni-card-linkedin::after,
body.ni-page .ni-broker-card .ni-card-linkedin::after {
    content: 'in';
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    color: #ffffff;
}
.ni-broker-card .ni-card-linkedin:hover,
body.ni-page .ni-broker-card .ni-card-linkedin:hover {
    background: #8a4d25 !important;
    background-color: #8a4d25 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
/* LinkedIn logo sits bottom-left, under applications (v3.18.0). */
.ni-card-linkedin-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 4px;
    padding: 0 4px;
}
.ni-card-apps-label {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--md-outline, #dcdcdc);
    font-family: var(--ni-card-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--md-text-medium, rgba(8, 8, 8, 0.60));
}
.ni-card-cat {
    border-bottom: 1px solid var(--md-outline, #dcdcdc);
}
.ni-card-cat:last-child {
    border-bottom: 0;
}
.ni-card-cat-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    cursor: pointer;
    text-align: left;
    color: var(--md-text-high, rgba(8, 8, 8, 0.87));
    transition: background-color 150ms ease;
}
.ni-broker-card .ni-card-cat-btn:hover,
body.ni-page .ni-broker-card .ni-card-cat-btn:hover {
    background: var(--md-layer-primary-hover, rgba(168, 95, 46, 0.08)) !important;
    background-color: var(--md-layer-primary-hover, rgba(168, 95, 46, 0.08)) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--md-text-high, rgba(8, 8, 8, 0.87));
}
.ni-card-cat-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ni-card-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--md-text-high, rgba(8, 8, 8, 0.87));
}
.ni-card-cat-count {
    flex: none;
    font-family: var(--ni-card-sans);
    font-size: 12px;
    font-weight: 400;
    color: var(--md-text-medium, rgba(8, 8, 8, 0.60));
}
.ni-card-marker {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    margin-right: 2px;
    border-right: 2px solid var(--md-primary, #a85f2e);
    border-bottom: 2px solid var(--md-primary, #a85f2e);
    transform: rotate(45deg);
    color: transparent;
    font-size: 0;
    line-height: 0;
    transition: transform 150ms ease;
}
.ni-card-marker::before {
    content: none;
}
.ni-card-cat-btn[aria-expanded="true"] .ni-card-marker {
    transform: rotate(-135deg);
}
.ni-card-cat-btn[aria-expanded="true"] .ni-card-marker::before {
    content: none;
}
.ni-card-cat-panel {
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
    background: var(--md-surface, #ffffff);
}
.ni-card-cat-panel[hidden] {
    display: none;
}
.ni-card-app {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    padding: 8px 16px 8px 28px;
    text-decoration: none !important;
    font-family: var(--ni-card-sans);
    font-size: 14px;
    color: var(--md-text-high, rgba(8, 8, 8, 0.87));
    transition: background-color 150ms ease, color 150ms ease;
}
.ni-card-app-label {
    font-family: var(--ni-card-sans);
    font-size: 14px;
    color: inherit;
}
.ni-card-app-arrow {
    display: none;
}
.ni-broker-card .ni-card-app:hover,
body.ni-page .ni-broker-card .ni-card-app:hover {
    background: var(--md-layer-primary-hover, rgba(168, 95, 46, 0.08));
    color: var(--md-primary, #a85f2e);
    text-decoration: none !important;
}
.ni-card-page-footer {
    margin-top: 8px;
    padding: 0;
    text-align: center;
    font-family: var(--ni-card-sans);
    font-size: 11px;
    line-height: 1.7;
    color: var(--md-text-medium, rgba(8, 8, 8, 0.60));
}
.ni-card-page-footer-line {
    margin: 0;
}
.ni-broker-card .ni-card-page-footer a,
body.ni-page .ni-broker-card .ni-card-page-footer a {
    color: var(--md-text-medium, rgba(8, 8, 8, 0.60)) !important;
    text-decoration: none !important;
}
.ni-broker-card .ni-card-page-footer a:hover,
body.ni-page .ni-broker-card .ni-card-page-footer a:hover {
    text-decoration: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .ni-card-btn,
    .ni-card-cat-btn,
    .ni-card-marker,
    .ni-card-app {
        transition-duration: 1ms;
    }
}

/* Energy Consultants Stage 1 prep list (v3.16.25). Cove hyperlink —
   never a themed button. Theme button:hover painted a navy fill over
   the words (same failure as .ni-save-later-btn). */
.ni-prep-link-wrap {
    margin: 0.75rem 0 0;
    text-align: center;
}
.ni-prep-helper {
    margin: 0.35rem 0 1rem;
    font-family: var(--ni-font);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--md-text-medium, #6c757d);
}
dialog.ni-prep-dialog .ni-prep-helper {
    margin: 0.35rem 0 1rem;
}
a.ni-prep-link,
.ni-prep-link {
    appearance: none;
    -webkit-appearance: none;
    display: inline;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    font-family: var(--ni-font);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--link-color, #2D78AD) !important;
    text-decoration: none !important;
    cursor: pointer;
}
a.ni-prep-link:hover,
a.ni-prep-link:focus,
a.ni-prep-link:focus-visible,
.ni-prep-link:hover,
.ni-prep-link:focus,
.ni-prep-link:focus-visible {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--link-hover, #266690) !important;
    text-decoration: underline !important;
}
dialog.ni-prep-dialog.ni-card {
    /* fixed is the containing block for .ni-prep-x (not the viewport). */
    position: fixed;
    margin: 2rem auto auto;
    top: 0;
    bottom: auto;
    width: calc(100% - 2rem);
    max-width: 540px;
    max-height: calc(100% - 3rem);
    overflow: auto;
    padding-top: 52px;
}
dialog.ni-prep-dialog::backdrop {
    background: color-mix(in srgb, var(--ni-navy) 45%, transparent);
}
.ni-prep-x {
    position: absolute;
    top: 12px;
    right: 12px;
    appearance: none;
    -webkit-appearance: none;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0;
    box-shadow: none !important;
    padding: 4px 8px;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--md-text-medium, rgba(8, 8, 8, 0.60));
    cursor: pointer;
}
.ni-prep-x:hover,
.ni-prep-x:focus,
.ni-prep-x:focus-visible {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--md-text-high, rgba(8, 8, 8, 0.87));
}
.ni-prep-step {
    font-family: var(--ni-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ni-navy);
    margin: 1rem 0 0.4rem;
}
.ni-prep-list {
    margin: 0 0 0.6rem;
    padding-left: 1.25rem;
}

/* In-page legal closer (v3.16.20). No bar, no hairline, no extra
   surface — the door fill is the background. Cove type: Raleway 600,
   10pt (13px), line-height 1.3, letter-spacing 1px, uppercase,
   centered, #ffffff. 72px from the white card to the block; 20px
   top/bottom padding so the first line sits ~92px under the card.
   Full door width, not the Start button stack. Links stay white + underline (no sky,
   no rust, no navy-as-text). Energy sky is Start buttons only. */
.ni-wrapper .ni-card:has(+ .ni-legal) {
    margin-bottom: 0;
}

.ni-legal {
    width: 100%;
    max-width: none;
    margin-top: 72px;
    padding: 20px 0;
    background: none;
    border: none;
    box-shadow: none;
    text-align: center;
    color: #ffffff;
    font-family: 'Raleway', var(--font-body, sans-serif);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ni-legal .ni-legal-line {
    margin: 0;
    padding: 0;
    color: #ffffff;
}

body.ni-page .ni-legal,
body.ni-page .ni-legal .ni-legal-line,
body.ni-page .ni-legal a {
    color: #ffffff;
}

.ni-legal a {
    color: #ffffff;
    text-decoration: underline;
}

.ni-legal a:hover,
.ni-legal a:focus {
    color: #ffffff;
    opacity: 0.7;
}

/* ---------- Progress Bar ---------- */
.ni-progress {
    margin-bottom: 1.75rem;
}

.ni-progress-track {
    width: 100%;
    height: 4px;
    border-radius: 9999px;
    background: var(--ni-line);
    overflow: hidden;
}

.ni-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 9999px;
    background: var(--ni-orange);
    transition: width 0.25s ease;
}

.ni-progress-text {
    margin-top: 0.5rem;
    text-align: center;
    font-family: var(--ni-font);
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---------- Step Title ---------- */
/* Title/subtitle pair sits tight (v2.9.995): clean small margins
   instead of the old negative-margin hack, and the .ni-wrapper prefix
   (0-2-0 specificity) outguns theme heading rules like
   .entry-content h2 that used to blow the gap wide open. */
.ni-wrapper .ni-step-title {
    font-family: var(--ni-font);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ni-text);
    margin: 0 0 0.15rem;
    line-height: 1.25;
}

.ni-wrapper .ni-step-subtitle {
    font-family: var(--ni-font);
    font-size: 0.9rem;
    font-weight: 400;
    color: #606a73;
    margin: 0 0 1.25rem;
    line-height: 1.45;
}

/* ---------- Fields ---------- */
.ni-field {
    margin-bottom: 1.1rem;
}

.ni-field-row {
    display: flex;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.ni-field-row .ni-field {
    flex: 1 1 0;
    min-width: 0;
}

.ni-field-row.ni-field-row-address .ni-field-city {
    flex: 3;
}

.ni-field-sm {
    flex: 1 !important;
    min-width: 70px;
    max-width: 110px;
}

.ni-field-hint {
    display: block;
    font-size: 0.85em;
    font-style: italic;
    line-height: 1.3;
    margin-top: 0.1rem;
    margin-bottom: 0.4rem;
    opacity: 0.7;
}

.ni-field label {
    display: block;
    font-family: var(--ni-font);
    font-weight: 600;
    color: var(--ni-text);
    font-size: 1rem;
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

/* Directed Start (v3.14.0): coverage is locked — label stays, value is text. */
.ni-locked-value {
    margin: 0.15rem 0 0;
    font-weight: 600;
}

/* Address groups are real <fieldset>/<legend> since v3.9.0 (a11y) — reset
   the UA chrome so the look is identical to the old <div>/<label>. */
.ni-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.ni-legend {
    display: block;
    width: 100%;
    padding: 0;
    font-family: var(--ni-font);
    font-weight: 600;
    color: var(--ni-text);
    font-size: 1rem;
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

.ni-required {
    color: #c0392b;
}

.ni-helper-text {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0.1rem 0 0.6rem;
    line-height: 1.4;
}

/* Helper variant matching the step subtitle ("Let's start with your
   contact information.") — used for the coverage-date guidance. */
.ni-helper-text.ni-helper-text-subtitle {
    font-family: var(--ni-font);
    font-size: 0.9rem;
    font-weight: 400;
    color: #606a73;
    font-style: italic;
}

/* Soft Welcome valuation gate note (v3.9.1) */
.ni-welcome-valuation-note {
    margin: 0.75rem 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ni-line);
    border-radius: var(--ni-radius);
    background: var(--ni-navy-tint);
    color: var(--ni-navy);
    font-family: var(--ni-font);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* ---------- Inputs, Selects & Textareas ----------
   One universal rule (clear black outline on white) so every form —
   Business, Personal Lines, Landlord, Energy — renders identically. */
.ni-wrapper input[type="text"],
.ni-wrapper input[type="email"],
.ni-wrapper input[type="tel"],
.ni-wrapper input[type="number"],
.ni-wrapper input[type="date"],
.ni-wrapper select,
.ni-wrapper textarea {
    width: 100%;
    height: 56px;
    background: #ffffff;
    border: 1px solid #8a8a8a;
    border-radius: var(--ni-radius);
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    font-family: var(--ni-font);
    color: var(--ni-text);
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color 0.15s, border-width 0.15s, background 0.15s;
    appearance: none;
    -webkit-appearance: none;
}

.ni-wrapper select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
    cursor: pointer;
}

/* With appearance:none an EMPTY date input has no intrinsic content on
   iOS Safari, so the box collapses to a sliver — pin it to the same
   height as every text input (content + padding + borders; border-box). */
.ni-wrapper input[type="date"] {
    min-height: 56px;
    height: 56px;
}

/* iOS Safari shows no inline hint in an empty date input; paint an
   MM/DD/YYYY placeholder while it's empty (.ni-date-empty is kept in
   sync by ni-form.js). Desktop/Android keep their native hint. */
@supports (-webkit-touch-callout: none) {
    .ni-wrapper input[type="date"].ni-date-empty::before {
        content: "MM/DD/YYYY";
        color: #6b7280;
    }
}

.ni-wrapper input[type="text"]:focus,
.ni-wrapper input[type="email"]:focus,
.ni-wrapper input[type="tel"]:focus,
.ni-wrapper input[type="number"]:focus,
.ni-wrapper input[type="date"]:focus,
.ni-wrapper select:focus,
.ni-wrapper textarea:focus {
    outline: none;
    background: #ffffff;
    /* House focus: 2px rust-700 replaces the 1px rest border. No glow. */
    border: 2px solid var(--ni-focus-border);
    box-shadow: none;
}

/* Inputs with an inline unit suffix (e.g. Occupancy Rate %). The input
   shrinks to the value's scale so the suffix reads as part of the
   number (98%), instead of floating at the far edge of the box. */
.ni-input-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ni-wrapper .ni-input-wrapper input[type="text"],
.ni-wrapper .ni-input-wrapper input[type="number"] {
    width: 7rem;
    flex: 0 0 auto;
}

.ni-input-suffix {
    color: #6b7280;
    pointer-events: none;
    font-family: var(--ni-font);
    font-size: 0.95rem;
}

/* Currency: $ sits inside the box so an empty field still reads as dollars. */
.ni-input-affix {
    position: relative;
    display: block;
    width: 100%;
}

.ni-input-prefix {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    pointer-events: none;
    font-family: var(--ni-font);
    font-size: 0.95rem;
    font-weight: 600;
}

.ni-wrapper .ni-input-affix input[type="text"] {
    padding-left: 1.65rem;
}

.ni-wrapper.ni-text-white .ni-input-prefix {
    color: rgba(255, 255, 255, 0.7);
}

.ni-wrapper textarea {
    resize: vertical;
    height: auto;
    min-height: 90px;
}

/* ---------- Tile Groups (radio buttons styled as tiles) ---------- */
.ni-tile-group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Vertical stack variant — used for scheduling */
.ni-tile-group-stack {
    flex-direction: column;
    flex-wrap: nowrap;
}

/* Day-group wrapper for schedule step */
.ni-schedule-day-group {
    margin-top: 0.75rem;
}

.ni-schedule-day-label {
    font-family: var(--ni-font);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ni-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

/* Two-column grid variant — used for scheduling day/time pairs */
.ni-tile-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0;
}

.ni-tile-group-grid .ni-tile {
    width: 100%;
}

.ni-tile-group-grid .ni-tile span {
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
}

.ni-tile {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.ni-tile-group-stack .ni-tile {
    width: 100%;
}

/* Clip-rect hiding since v3.9.0 (was 0×0 + opacity 0): zero-size elements
   are treated as non-rendered by some assistive tech and Windows High
   Contrast — the standard visually-hidden geometry keeps them focusable
   AND reliably announced. Focus styling is unchanged (:focus-visible on
   the sibling span). */
.ni-tile input[type="radio"],
.ni-tile-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.ni-tile span {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 1rem;
    border: 1px solid #8a8a8a;
    border-radius: 4px;
    font-family: var(--ni-font);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ni-text);
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
    white-space: normal;
}

.ni-tile-group-stack .ni-tile span {
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
}

.ni-tile.ni-tile-center span {
    text-align: center;
    justify-content: center;
}

.ni-tile:hover span {
    border-color: var(--ni-navy);
    background: var(--ni-navy-tint);
}

.ni-tile input[type="radio"]:checked + span,
.ni-tile-toggle input[type="checkbox"]:checked + span {
    border-color: var(--ni-navy);
    background: var(--ni-navy);
    color: #ffffff;
    font-weight: 700;
}

/* ---------- Segmented Toggle (single-row three-way choice) ---------- */
.ni-segment-group {
    display: flex;
    border: var(--ni-border-width) solid var(--ni-border-color);
    border-radius: var(--ni-radius);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
}

.ni-segment-group .ni-segment-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    padding: 0.45rem 0.25rem;
    font-family: var(--ni-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ni-text);
    border-right: var(--ni-border-width) solid var(--ni-border-color);
    background: #ffffff;
    transition: background 0.15s, color 0.15s;
    user-select: none;
    margin: 0;
    line-height: 1.4;
}

.ni-segment-btn:last-child {
    border-right: none;
}

.ni-segment-btn:hover {
    background: var(--ni-navy-tint);
}

/* Clip-rect since v3.9.0 — same reasoning as the tile inputs above. */
.ni-segment-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.ni-segment-btn:has(input:checked) {
    background: var(--ni-navy);
    color: #ffffff;
    font-weight: 700;
}

/* ---------- Checklist (plain vertical checkboxes, no tile boxes) ---------- */
.ni-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ni-checklist .ni-checklist-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ni-font);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ni-text);
    cursor: pointer;
    margin-bottom: 0;
}

.ni-checklist-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--ni-navy);
    margin: 0;
    cursor: pointer;
}

.ni-tile-group-value .ni-tile span {
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
}

/* Scheduling tile sub-label */
.ni-tile-sublabel {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 0.15rem;
}

.ni-tile input[type="radio"]:checked + span .ni-tile-sublabel {
    color: #c8dce6;
}

/* ---------- Checkbox ---------- */
.ni-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-family: var(--ni-font);
    font-size: 0.9rem;
}

.ni-checkbox-label input[type="checkbox"] {
    width: auto;
    height: auto;
    appearance: auto;
    -webkit-appearance: auto;
    background: none;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}

/* require_scroll (v3.16.6): locked until the disclosure box is read. */
.ni-checkbox-label:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.65;
}

.ni-checkbox-label input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

/* Locked ack: red X circle on hover until the disclosure is fully read. */
.ni-field[data-ni-require-scroll="1"] .ni-checkbox-label:has(input:disabled) {
    position: relative;
}

.ni-field[data-ni-require-scroll="1"] .ni-checkbox-label:has(input:disabled):hover::after {
    content: "\00D7";
    position: absolute;
    left: -0.15rem;
    top: 0;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--ni-error);
    color: var(--md-on-error, #ffffff);
    font-size: 0.85rem;
    line-height: 1.15rem;
    text-align: center;
    pointer-events: none;
}

.ni-field[data-ni-require-scroll="1"] > .ni-helper-text[hidden] {
    display: none;
}

/* ---------- Consent Gate (Step 1) ---------- */
.ni-consent-gate {
    border: 1.5px solid color-mix(in srgb, var(--ni-navy) 18%, transparent);
    background: #ffffff;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--ni-navy) 8%, transparent);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Submit attempted without ticking I Agree (v2.9.98): the box itself
   lights up alongside the banner message, and clears when checked. */
.ni-consent-gate.ni-consent-error {
    border-color: var(--ni-error);
    box-shadow: 0 0 0 1px var(--ni-error);
}

/* Save & Resume (v2.9.99): the quiet "finish later" affordance under
   the step buttons, and the neutral (non-error) banner used for the
   welcome-back note. */
.ni-save-later {
    margin-top: 0.75rem;
    text-align: center;
}

.ni-save-later-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--ni-font);
    font-size: 0.8rem;
    color: var(--ni-navy);
    text-decoration: underline;
    cursor: pointer;
}

/* Plain text rollover only (v2.9.992): the theme's global button:hover
   painted a partial background highlight over the text. */
.ni-save-later-btn:hover,
.ni-save-later-btn:focus {
    background: none;
    color: var(--md-primary, #a85f2e);
}

.ni-save-later-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.ni-save-later-note {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--ni-navy);
}

.ni-error-banner.ni-banner-info {
    color: var(--ni-navy);
    border-left-color: var(--ni-navy);
    background: var(--ni-navy-tint);
}

.ni-consent-text {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--color-charcoal-700, #434343);
    line-height: 1.6;
}

.ni-consent-text a {
    color: var(--ni-navy);
    text-decoration: underline;
}

.ni-consent-divider {
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--ni-navy) 15%, transparent);
    margin: 0.75rem 0;
}

/* Standard consent checkbox layout (v2.8.0) — uses a higher specificity selector
   (.ni-wrapper) to ensure it overrides generic .ni-field label rules in every
   form type (welcome, start, simple). */
.ni-wrapper .ni-consent-check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.85rem !important; /* breathing room between the checkbox and "I Agree" */
    cursor: pointer;
    font-family: var(--ni-font);
    font-size: 0.85rem;
    color: var(--ni-text);
    line-height: 1.5;
    margin-bottom: 0;
}

.ni-consent-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    appearance: auto;
    -webkit-appearance: auto;
    background: none;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    margin-top: 1px;
    accent-color: var(--ni-navy);
    cursor: pointer;
}

/* Engine-rendered consent lives inside a .ni-field wrapper, whose generic
   `.ni-field label { display: block }` rule outranks .ni-consent-check and
   collapses the flex row (the checkbox loses its gap from "I Agree").
   Force the reference [start_application] layout in every context. */
.ni-wrapper .ni-consent-check,
.ni-field .ni-consent-check {
    display: flex !important;
    align-items: flex-start;
    gap: 0.85rem !important;
    margin-bottom: 0 !important;
}

/* The .ni-field wrapper already provides the bottom margin — without this
   the engine-rendered gate stacks both and sits lower than the reference. */
.ni-field > .ni-consent-gate {
    margin-bottom: 0;
}

/* ---------- Buttons ---------- */
.ni-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 4px;
    font-family: var(--ni-font);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.1s;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.ni-btn:hover,
.ni-btn:focus,
a.ni-btn:hover,
a.ni-btn:focus {
    text-decoration: none;
}

.ni-btn:active {
    transform: scale(0.98);
}

/* Primary — the universal button color (v2.9.993): blue on every
   division and every form; orange is accent-only now. */
.ni-btn-next,
.ni-btn-submit {
    background: var(--ni-btn);
    color: #ffffff;
    box-shadow: var(--elevation-4, 0 4px 12px rgba(0, 0, 0, 0.25));
}

.ni-btn-next:hover,
.ni-btn-submit:hover {
    background: var(--ni-btn-hover);
    color: #ffffff;
}

.ni-btn-submit:disabled,
.ni-btn-next:disabled {
    background: color-mix(in srgb, var(--ni-btn) 40%, #ffffff);
    cursor: not-allowed;
}

/* Standalone next button (only child) — center it */
.ni-btn-row-right .ni-btn-next {
    display: block;
    margin: 0 auto;
}

/* Secondary — outlined rust-700. Navy is never a button. */
.ni-btn-secondary {
    background: transparent;
    color: var(--md-primary, #a85f2e);
    border: 1px solid var(--md-primary, #a85f2e);
    box-shadow: none;
}

.ni-btn-secondary:hover {
    background: var(--md-layer-primary-hover, rgba(168, 95, 46, 0.08));
    color: var(--md-primary, #a85f2e);
}

/* Upload & Send (Stage-2b submit) — same universal button color. */
.ni-btn-upload {
    background: var(--ni-btn);
    color: #ffffff;
    box-shadow: var(--elevation-4, 0 4px 12px rgba(0, 0, 0, 0.25));
}

.ni-btn-upload:hover {
    background: var(--ni-btn-hover);
}

/* Muted secondary CTA (Stage 1's "Upload Current Policies Instead"):
   outlined rust-700 — navy is a surface/focus color, never a page
   button fill (design-system.md). Same footprint as primary inside
   .ni-start-actions; smaller type kept from v2.9.995. */
.ni-btn-muted {
    background: var(--ni-btn-muted);
    color: var(--ni-btn-muted-text);
    border: var(--ni-border-width) solid var(--ni-border-color);
    box-shadow: none;
    font-size: 0.75rem;
}

.ni-btn-muted:hover {
    background: var(--ni-btn-muted-hover);
    color: var(--ni-btn-muted-text);
    border-color: var(--ni-btn-hover);
}

.ni-btn-muted:disabled {
    background: transparent;
    color: var(--md-text-disabled, #94a3b8);
    border-color: var(--md-outline, #e2e8f0);
    cursor: not-allowed;
}

/* Stage-1 path buttons (v3.16.19 / Cove): stacked, centered, 340
   content width. Begin on top, Upload underneath, 16px gap. Both
   are 340 × 36, radius 4, 14/500/1.25px uppercase nowrap — not
   the house 56px pill. Compound selector beats .ni-btn-row's
   space-between and the mobile wrap / .ni-btn { flex: 1 }.
   No reserved hole: a hidden Upload collapses the column so
   Begin stays top and centered. NetGuard is the same single Begin.
   v3.16.23: ≤540px wraps the label and grows height — see the
   mobile block. Desktop stays this 340 × 36 nowrap face. */
.ni-btn-row.ni-start-actions,
.ni-btn-row.ni-start-actions-split {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--space-4, 16px);
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.ni-start-actions .ni-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: none;
    width: 100%;
    max-width: 340px;
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Slot is not a box — a [hidden] Upload must not leave a 36+16
   hole under Begin. */
.ni-start-upload-slot {
    display: contents;
}

.ni-start-upload-slot:has([hidden]) {
    display: none;
}

/* Outlined rust-700 Upload. Same 14/500 as Begin — do not shrink
   type. Desktop nowrap "UPLOAD CURRENT POLICIES INSTEAD"; v3.16.23
   wraps that label on narrow viewports (see the 540px block). */
.ni-start-actions .ni-start-upload-btn {
    background: transparent;
    color: var(--md-primary, #a85f2e);
    border: var(--ni-border-width) solid var(--md-primary, #a85f2e);
    box-shadow: none;
}

.ni-start-actions .ni-start-upload-btn:hover {
    background: var(--ni-btn-muted-hover);
    color: var(--md-primary, #a85f2e);
    border-color: var(--md-primary, #a85f2e);
}

.ni-start-actions .ni-start-upload-btn:focus,
.ni-start-actions .ni-start-upload-btn:focus-visible {
    outline: 2px solid #15445D;
    outline-offset: 2px;
    box-shadow: none;
}

/* Enabled Start Begin: contained rust-700, white, 14/500 uppercase,
   elevation 2. Never logo orange #D2793D (Cove 2026-08-28). */
.ni-start-actions .ni-start-begin {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
}

.ni-start-actions .ni-start-begin:not(:disabled) {
    background: var(--md-primary, #a85f2e);
    color: #ffffff;
    box-shadow: var(--elevation-2, 0 2px 4px rgba(0, 0, 0, 0.2));
}

.ni-start-actions .ni-start-begin:not(:disabled):hover {
    background: #8a4d25;
    color: #ffffff;
}

.ni-start-actions .ni-start-begin:not(:disabled):focus,
.ni-start-actions .ni-start-begin:not(:disabled):focus-visible {
    outline: 2px solid #15445D;
    outline-offset: 2px;
    box-shadow: var(--elevation-2, 0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Disabled Start Begin: Material contained disabled (house portal).
   Scoped — other .ni-btn-next:disabled keep rust-at-40%. */
.ni-start-actions .ni-start-begin:disabled,
.ni-start-actions .ni-start-begin[aria-disabled="true"] {
    background: rgba(8, 8, 8, 0.12);
    color: rgba(8, 8, 8, 0.38);
    box-shadow: none;
    cursor: default;
    pointer-events: none;
    transform: none;
}

.ni-start-actions .ni-start-begin:disabled:hover,
.ni-start-actions .ni-start-begin:disabled:focus,
.ni-start-actions .ni-start-begin:disabled:active,
.ni-start-actions .ni-start-begin[aria-disabled="true"]:hover,
.ni-start-actions .ni-start-begin[aria-disabled="true"]:focus,
.ni-start-actions .ni-start-begin[aria-disabled="true"]:active {
    background: rgba(8, 8, 8, 0.12);
    color: rgba(8, 8, 8, 0.38);
    box-shadow: none;
    transform: none;
}

/* Energy public doors (v3.16.30): ink-900 page. Start already
   passed; Welcome Energy + /file-transfer/ join it. Insurance
   doors stay navy. Do not emit #080808 from NI_Division (that
   would pin a literal over Core). Disabled Begin stays the
   Material gray above — do not fade sky. */
html:has(body.ni-page-energy),
body.ni-page-energy,
html:has(body.ni-page-energy #ni-start),
body.ni-page-energy:has(#ni-start) {
    --ni-page: #080808;
}

#ni-start[data-division="energy"] .ni-start-actions .ni-start-begin:not(:disabled) {
    background: #3D96D2;
    color: #ffffff;
    box-shadow: var(--elevation-2, 0 2px 4px rgba(0, 0, 0, 0.2));
}

#ni-start[data-division="energy"] .ni-start-actions .ni-start-begin:not(:disabled):hover {
    background: #2F78A7;
    color: #ffffff;
}

#ni-start[data-division="energy"] .ni-start-actions .ni-start-upload-btn {
    background: transparent;
    color: #3D96D2;
    border: 1px solid #3D96D2;
    box-shadow: none;
}

#ni-start[data-division="energy"] .ni-start-actions .ni-start-upload-btn:hover {
    background: transparent;
    color: #2F78A7;
    border-color: #2F78A7;
}

#ni-start[data-division="energy"] .ni-start-actions .ni-start-begin:not(:disabled):focus,
#ni-start[data-division="energy"] .ni-start-actions .ni-start-begin:not(:disabled):focus-visible,
#ni-start[data-division="energy"] .ni-start-actions .ni-start-upload-btn:focus,
#ni-start[data-division="energy"] .ni-start-actions .ni-start-upload-btn:focus-visible {
    outline: 2px solid #3D96D2;
    outline-offset: 0;
    box-shadow: none;
}

/* Energy prep dialog Close is the same sky primary as Start Begin. */
#ni-start[data-division="energy"] .ni-prep-dialog .ni-btn-next {
    background: #3D96D2;
    color: #ffffff;
    box-shadow: var(--elevation-2, 0 2px 4px rgba(0, 0, 0, 0.2));
}
#ni-start[data-division="energy"] .ni-prep-dialog .ni-btn-next:hover {
    background: #2F78A7;
    color: #ffffff;
}

/* Energy chrome (v3.16.30): overline, progress, NEXT / Upload /
   SELECT FILES, field focus. No rust on Energy. Start Begin/Upload
   keep the #ni-start sky rules above. */
.ni-division-energy .ni-brand-line,
body.ni-page-energy .ni-brand-line {
    color: #3D96D2;
}
.ni-division-energy .ni-progress-fill {
    background: #3D96D2;
}
.ni-division-energy .ni-btn-next,
.ni-division-energy .ni-btn-submit,
.ni-division-energy .ni-btn-upload {
    background: #3D96D2;
    color: #ffffff;
}
.ni-division-energy .ni-btn-next:hover,
.ni-division-energy .ni-btn-submit:hover,
.ni-division-energy .ni-btn-upload:hover {
    background: #2F78A7;
    color: #ffffff;
}
.ni-division-energy .ni-btn-secondary {
    background: transparent;
    color: #3D96D2;
    border: 1px solid #3D96D2;
}
.ni-division-energy .ni-btn-secondary:hover {
    background: transparent;
    color: #2F78A7;
    border-color: #2F78A7;
}
.ni-division-energy .ni-file-select-btn,
.ni-division-energy .ni-btn-add-files {
    border: 1px solid #3D96D2;
    color: #3D96D2;
    background: none;
}
.ni-division-energy .ni-file-select-btn:hover,
.ni-division-energy .ni-btn-add-files:hover {
    background: transparent;
    color: #2F78A7;
    border-color: #2F78A7;
}
.ni-division-energy input[type="text"]:focus,
.ni-division-energy input[type="email"]:focus,
.ni-division-energy input[type="tel"]:focus,
.ni-division-energy input[type="number"]:focus,
.ni-division-energy input[type="date"]:focus,
.ni-division-energy select:focus,
.ni-division-energy textarea:focus,
.ni-division-energy .ni-tile input:focus-visible + span {
    border: 2px solid #3D96D2;
    box-shadow: none;
}
.ni-division-energy .ni-prop-edit,
.ni-division-energy .ni-vin-edit {
    border: 1px solid #3D96D2;
    color: #3D96D2;
    background: transparent;
}
.ni-division-energy .ni-prop-edit:hover,
.ni-division-energy .ni-vin-edit:hover {
    background: transparent;
    color: #2F78A7;
    border-color: #2F78A7;
}
.ni-division-energy .ni-review-edit,
.ni-division-energy .ni-save-later-btn:hover,
.ni-division-energy .ni-save-later-btn:focus {
    color: #3D96D2;
}

/* Button rows */
.ni-btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    gap: 0.75rem;
}

.ni-btn-row-right {
    justify-content: center;
}

/* ---------- Inline error ---------- */
.ni-error {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--ni-error);
}

/* ---------- Error Banner ---------- */
.ni-error-banner {
    display: none;
    margin-bottom: 1rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
    color: var(--ni-error);
    background: #fcf0f1;
    border-left: 4px solid var(--ni-error);
    border-radius: 3px;
}

.ni-error-banner.visible {
    display: block;
}

/* ---------- Error Message ---------- */
.ni-error-message {
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--ni-radius);
    color: #b91c1c;
    font-size: 0.875rem;
}

/* ---------- Validation Error States ---------- */
.ni-field-error input,
.ni-field-error select,
.ni-field-error textarea {
    border-color: var(--ni-error);
    box-shadow: 0 0 0 1px var(--ni-error);
}

.ni-field-error-msg {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--ni-error);
}

/* ---------- Success Message ---------- */
.ni-success-message {
    text-align: center;
    padding: 1.5rem 0;
}

.ni-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ni-orange);
    color: #ffffff;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.ni-success-message h2 {
    font-family: var(--ni-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ni-text);
    margin: 0 0 0.75rem;
}

.ni-success-message p {
    font-size: 0.95rem;
    color: #444;
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

/* Opt-in 2pt bump for a form's success_message (v3.16.6, NetGuard). */
.ni-success-message .ni-success-text-larger {
    font-size: calc(0.95rem + 2pt);
}

/* ---------- Result Panel (Choice Panel after Stage 1) ---------- */
.ni-result {
    text-align: center;
    padding: 2rem 1rem;
}

.ni-result h4 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    color: #00a32a;
}

.ni-result p {
    font-size: 0.95rem;
    color: #3c434a;
    line-height: 1.55;
}

.ni-result .ni-btn-next,
.ni-result .ni-btn-upload {
    display: block;
    margin: 1rem auto 0;
}

/* ---------- Spinner ---------- */
.ni-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ni-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}

@keyframes ni-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Admin Badges ---------- */
.ni-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.ni-badge-business { background: #dbeafe; color: #1e40af; }
.ni-badge-personal { background: #d1fae5; color: #065f46; }
.ni-badge-current  { background: #ede9fe; color: #5b21b6; }
.ni-badge-general  { background: #f3f4f6; color: #374151; }

/* ---------- Privacy Notice ---------- */
.ni-privacy-notice {
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    color: #606a73;
    line-height: 1.4;
}

/* ---------- Responsive ---------- */
@media (max-width: 540px) {
    /* The card keeps its rounded corners on mobile (v2.9.2) — a slim
       gutter keeps the radius visible instead of full-bleed hard edges.
       v3.16.23: the leftover 2rem card sit stacked on this gutter and
       parked the white card too far down the navy/ink door. Wrapper
       padding is the gutter; do not steal it from .ni-legal (72px
       under the card). Astra stays footer-hide only. */
    .ni-card {
        padding: 1.25rem;
        margin: 0 auto;
    }

    .ni-wrapper {
        padding: 0.75rem 0.5rem;
    }

    .ni-field-row {
        flex-direction: column;
        gap: 0;
    }

    .ni-field-row.ni-field-row-address {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .ni-field-row.ni-field-row-address .ni-field-city {
        flex: 100%;
    }

    .ni-field-sm {
        max-width: none;
        flex: 1 !important;
    }

    .ni-tile-group-value {
        gap: 0.4rem;
    }

    .ni-tile-group-value .ni-tile span {
        font-size: 0.78rem;
        padding: 0.38rem 0.6rem;
    }

    .ni-btn-row {
        flex-wrap: wrap;
    }

    /* Door chips (v3.16.23): same type size; wrap and grow so
       "UPLOAD CURRENT POLICIES INSTEAD", Next, Submit, and
       Upload & Send sit inside the chip. Column is 100% of the
       card — not a 340px overflow past it. */
    .ni-btn-row.ni-start-actions,
    .ni-btn-row.ni-start-actions-split {
        max-width: 100%;
    }

    .ni-start-actions .ni-btn {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 36px;
        padding: 8px 16px;
        font-size: 0.875rem;
        letter-spacing: 0.5px;
        white-space: normal;
    }

    .ni-btn {
        flex: 1;
        text-align: center;
        white-space: normal;
        height: auto;
        min-width: 0;
    }
}

@media (max-width: 380px) {
    .ni-card {
        padding: 1rem 0.85rem;
    }

    .ni-tile-group {
        gap: 0.4rem;
    }

    .ni-tile span {
        padding: 0.4rem 0.65rem;
        font-size: 0.82rem;
    }

    .ni-tile-group-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- White text mode (for dark BB backgrounds) ---------- */
.ni-wrapper.ni-text-white .ni-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.ni-wrapper.ni-text-white .ni-field label,
.ni-wrapper.ni-text-white .ni-step-title,
.ni-wrapper.ni-text-white .ni-consent-check,
.ni-wrapper.ni-text-white .ni-checkbox-label {
    color: #ffffff;
}

.ni-wrapper.ni-text-white .ni-step-subtitle,
.ni-wrapper.ni-text-white .ni-helper-text {
    color: rgba(255, 255, 255, 0.7);
}

.ni-wrapper.ni-text-white input[type="text"],
.ni-wrapper.ni-text-white input[type="email"],
.ni-wrapper.ni-text-white input[type="tel"],
.ni-wrapper.ni-text-white input[type="number"],
.ni-wrapper.ni-text-white input[type="date"],
.ni-wrapper.ni-text-white select,
.ni-wrapper.ni-text-white textarea {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.ni-wrapper.ni-text-white .ni-consent-gate,
.ni-wrapper.ni-text-white .ni-consent-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

.ni-wrapper.ni-text-white .ni-consent-text {
    color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   v2.2 component styles composed from the tokens above:
   repeater rows (spec §15).
   ============================================================ */

/* ---------- Repeater ---------- */
.ni-repeater-row {
    border: 1px solid var(--ni-line);
    border-radius: var(--ni-radius-lg);
    background: #ffffff; /* consistent white — no shaded sections */
    margin-bottom: 0.75rem;
}

.ni-repeater-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    user-select: none;
}

.ni-repeater-row-title {
    font-family: var(--ni-font);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ni-navy);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.ni-repeater-remove {
    background: transparent;
    border: none;
    color: var(--ni-error);
    font-size: 1.4rem; /* slightly larger remove target (v2.7) */
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
}

.ni-repeater-row-body {
    padding: 0.25rem 0.85rem 0.85rem;
}

.ni-repeater-row.ni-collapsed .ni-repeater-row-body {
    display: none;
}

/* Known property facts (REAPI / already answered): one summary line + Edit.
   Unfilled questions on the same step stay visible. */
.ni-prop-known-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--ni-line);
    border-radius: var(--ni-radius-lg);
    background: var(--ni-navy-tint);
}

.ni-prop-known-summary[hidden] {
    display: none;
}

.ni-prop-known-text {
    font-family: var(--ni-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ni-navy);
    line-height: 1.35;
}

.ni-prop-edit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    background: transparent;
    border: 1px solid var(--md-primary, #a85f2e);
    color: var(--md-primary, #a85f2e);
    border-radius: 4px;
    padding: 0 16px;
    font-family: var(--ni-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.ni-prop-edit:hover {
    background: var(--md-layer-primary-hover, rgba(168, 95, 46, 0.08));
    color: var(--md-primary, #a85f2e);
    text-decoration: none;
}

.ni-step.ni-prop-row:not(.ni-prop-editing) .ni-field.ni-prop-known {
    display: none !important;
}

.ni-wrapper.ni-text-white .ni-prop-known-summary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

.ni-wrapper.ni-text-white .ni-prop-known-text {
    color: rgba(255, 255, 255, 0.9);
}

.ni-wrapper.ni-text-white .ni-prop-edit {
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.9);
}

.ni-well-mix-total {
    font-family: var(--ni-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ni-navy);
    margin: 0.15rem 0 0.75rem;
}

.ni-well-mix-total[hidden] {
    display: none;
}

.ni-wrapper.ni-text-white .ni-well-mix-total {
    color: rgba(255, 255, 255, 0.9);
}

.ni-wrapper.ni-text-white .ni-repeater-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

.ni-wrapper.ni-text-white .ni-repeater-row-title {
    color: rgba(255, 255, 255, 0.8);
}

/* VIN decode summary: year / make / model collapse to one line + Edit. */
.ni-vin-vehicle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--ni-line);
    border-radius: var(--ni-radius-lg);
    background: var(--ni-navy-tint);
}

.ni-vin-vehicle[hidden] {
    display: none;
}

.ni-vin-vehicle-text {
    font-family: var(--ni-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ni-navy);
    line-height: 1.35;
}

.ni-vin-edit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    background: transparent;
    border: 1px solid var(--md-primary, #a85f2e);
    color: var(--md-primary, #a85f2e);
    border-radius: 4px;
    padding: 0 16px;
    font-family: var(--ni-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 1.25px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.ni-vin-edit:hover {
    background: var(--md-layer-primary-hover, rgba(168, 95, 46, 0.08));
    color: var(--md-primary, #a85f2e);
    text-decoration: none;
}

.ni-repeater-row:not(.ni-vin-editing) .ni-vin-detail,
.ni-vin-row:not(.ni-vin-editing) .ni-vin-detail {
    display: none !important;
}

.ni-wrapper.ni-text-white .ni-vin-vehicle {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

.ni-wrapper.ni-text-white .ni-vin-vehicle-text {
    color: rgba(255, 255, 255, 0.9);
}

.ni-wrapper.ni-text-white .ni-vin-edit {
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.9);
}

/* Discrete option slider (annual miles). */
.ni-slider {
    margin: 0.25rem 0 0.5rem;
}

.ni-slider-readout {
    font-family: var(--ni-font);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ni-navy);
    margin-bottom: 0.45rem;
}

.ni-slider input[type="range"] {
    display: block;
    width: 100%;
    height: 28px;
    margin: 0;
    accent-color: var(--ni-orange);
    cursor: pointer;
}

.ni-slider-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--ni-muted, #6b6b6b);
}

.ni-wrapper.ni-text-white .ni-slider-readout {
    color: rgba(255, 255, 255, 0.92);
}

.ni-ink-burst {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

@media (prefers-reduced-motion: no-preference) {
    .ni-success-message.ni-success-stamp {
        animation: ni-stamp 0.45s cubic-bezier(0.22, 1.35, 0.36, 1);
    }

    .ni-success-message.ni-success-stamp .ni-success-icon {
        animation: ni-stamp-icon 0.4s cubic-bezier(0.22, 1.55, 0.36, 1) 0.04s both;
    }
}

@keyframes ni-stamp {
    0% {
        transform: translateY(-10px) scale(0.97);
        opacity: 0;
    }
    62% {
        transform: translateY(2px) scale(1.015);
        opacity: 1;
    }
    100% {
        transform: none;
    }
}

@keyframes ni-stamp-icon {
    0% {
        transform: scale(0.45);
    }
    72% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* ---------- Honeypot (bots only — never visible to humans) ---------- */
.ni-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Info boxes & inline section headings (form content) ---------- */
.ni-info-box {
    background: var(--ni-navy-tint);
    border: 1px solid color-mix(in srgb, var(--ni-navy) 18%, transparent);
    border-radius: var(--ni-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.1rem;
    font-size: 0.9rem;
    color: var(--ni-text);
    line-height: 1.6;
}

.ni-info-box h3 {
    font-family: var(--ni-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ni-navy);
    margin: 0 0 0.6rem;
}

.ni-info-box p {
    margin: 0 0 0.6rem;
}

.ni-info-box p:last-child {
    margin-bottom: 0;
}

.ni-info-box ul {
    margin: 0 0 0.6rem;
    padding-left: 1.25rem;
}

.ni-section-heading {
    font-family: var(--ni-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ni-navy);
    margin: 1.25rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ni-line);
}

/* ============================================================
   v2.7 additions
   ============================================================ */

/* ---------- Brand line + form name header ---------- */
.ni-form-header {
    text-align: center;
    margin-bottom: 1rem;
}

.ni-brand-line {
    font-family: var(--ni-font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--md-primary, #a85f2e); /* rust-700 — never decorative orange */
    margin-bottom: 0.2rem;
}

.ni-form-name {
    font-family: var(--ni-font);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--md-on-surface, #080808); /* H1 ink — not navy, not serif */
    margin: 0;
    line-height: 1.25;
}

/* ---------- Indented follow-up inputs (Update and Year Details) ---------- */
.ni-field.ni-field-indent {
    margin-left: 1.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--ni-line);
}

/* ---------- Start page choice panel: equal-size CTAs ---------- */
.ni-result .ni-btn-next,
.ni-result .ni-btn-upload {
    width: 100%;
    max-width: 340px;
    text-align: center;
}

/* ---------- Checkbox spacing (v2.7.2 normalization) ----------
   One rhythm for every checkbox variant, matching the approved
   [start_application division="energy"] consent checkbox: an 18px
   box, 0.85rem gap between box and text, top-aligned with the first
   text line, and an even vertical gap between items. */
.ni-checklist {
    gap: 0.75rem;
}

.ni-checklist .ni-checklist-item,
.ni-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.ni-tile-group .ni-tile-check {
    gap: 0.85rem; /* bordered tile keeps center alignment; box-to-tile gap matches */
}

.ni-tile-group .ni-tile-check,
.ni-checkbox-label {
    margin: 0.375rem 0;
}

.ni-checklist-item input[type="checkbox"],
.ni-tile-check input[type="checkbox"],
.ni-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--ni-navy);
    margin: 0.1em 0 0;
    cursor: pointer;
}

/* ---------- Simple (file transfer) intro: condensed, not double-spaced ---------- */
.ni-form-simple .ni-step-subtitle {
    line-height: 1.45;
    margin: 0 0 1rem;
}

/* ---------- Upload progress (v2.9.9: prominent percentage bar; the
   submitting button stays locked until every file is stored) ---------- */
.ni-upload-progress {
    margin-top: 0.75rem;
}

.ni-upload-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.ni-upload-progress-label {
    font-family: var(--ni-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ni-navy);
    overflow-wrap: anywhere;
}

.ni-upload-progress-percent {
    font-family: var(--ni-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ni-navy);
}

.ni-upload-bar {
    width: 100%;
    height: 10px;
    border-radius: 9999px;
    background: var(--ni-line);
    overflow: hidden;
}

.ni-upload-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 9999px;
    background: var(--ni-orange);
    transition: width 0.2s ease;
}

/* ---------- Cumulative file picker (v2.9.995) ----------
   The native input is visually hidden (1px, opacity 0 — NOT
   display:none, so it keeps submitting in FormData and stays
   targetable by tests) behind a Select Files box; picked files list
   with a per-file remove and an Add More box that merges further
   picks into the selection. */
.ni-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.ni-file-ui {
    margin-top: 0.25rem;
}

.ni-file-select-btn,
.ni-btn-add-files {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    padding: 0 16px;
    background: none;
    border: 1px solid var(--md-primary, #a85f2e);
    border-radius: 4px;
    color: var(--md-primary, #a85f2e);
    font-family: var(--ni-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.25px;
    line-height: 1.25;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.ni-file-select-btn:hover,
.ni-btn-add-files:hover {
    background: var(--md-layer-primary-hover, rgba(168, 95, 46, 0.08));
    color: var(--md-primary, #a85f2e);
    text-decoration: none;
}

.ni-file-list-items {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.ni-file-list-items li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--ni-line);
    border-radius: var(--ni-radius);
    font-size: 0.85rem;
    color: var(--ni-text);
    overflow-wrap: anywhere;
}

.ni-file-size {
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.75rem;
    white-space: nowrap;
}

.ni-file-remove {
    padding: 0.15rem 0.35rem;
    background: none;
    border: none;
    color: var(--ni-error);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Signature pad (v3.6.0, merged from NetGuard Cyber) ---------- */

.ni-signature-wrap {
    border: 1px dashed var(--ni-border-color);
    border-radius: var(--ni-radius-lg);
    padding: 12px;
    background: #fff;
}

.ni-signature-canvas {
    width: 100%;
    height: auto;
    touch-action: none;
    background: #fff;
    border-bottom: 2px solid var(--ni-line);
    cursor: crosshair;
    display: block;
}

.ni-signature-actions {
    margin-top: 10px;
    text-align: right;
}

.ni-signature-actions .ni-signature-clear,
.ni-signature-actions .ni-signature-type-toggle {
    padding: 0.5rem 1.25rem;
    font-size: 0.8rem;
}

/* Typed-name signature path (v3.9.0) — keyboard-accessible alternative to
   drawing; the Apply button renders the name onto the canvas. */
.ni-signature-typed {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.ni-signature-typed .ni-signature-typed-input {
    flex: 1;
    min-width: 0;
}

.ni-signature-typed .ni-signature-typed-apply {
    padding: 0.5rem 1.25rem;
    font-size: 0.8rem;
    flex: none;
    width: auto;
}

/* ---------- Disclosure box (scrollable legal copy, v3.6.0) ---------- */

.ni-disclosure-box {
    background: var(--ni-navy-tint);
    border: 1px solid var(--ni-line);
    border-radius: var(--ni-radius-lg);
    padding: 16px 18px;
    margin-bottom: 20px;
    max-height: 340px;
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}

.ni-disclosure-box p {
    margin: 0 0 12px;
}

.ni-disclosure-box h3 {
    margin: 20px 0 10px;
    font-size: 0.9rem;
    font-weight: 700;
}

.ni-disclosure-box h3:first-child {
    margin-top: 0;
}

/* ==================== v3.8.0 UX round ==================== */

/* Screen-reader-only text (the aria-live step announcement). */
.ni-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Tile / checklist / segment groups show their error state on the
   visible control — the native inputs are hidden, so the generic
   .ni-field-error input border never surfaced for them. */
.ni-field-error .ni-tile span,
.ni-field-error .ni-checklist-item,
.ni-field-error .ni-segment-btn {
    border-color: var(--ni-error);
    box-shadow: 0 0 0 1px var(--ni-error);
}

/* Keyboard focus on hidden-input controls: the ring lands on the
   visible tile, matching the text-input focus treatment. */
.ni-tile input:focus-visible + span,
.ni-segment-btn input:focus-visible + span,
.ni-checklist-item input:focus-visible + span {
    border: 2px solid var(--ni-focus-border);
    box-shadow: none;
}

.ni-wrapper button:focus-visible,
.ni-file-ui button:focus-visible {
    outline: 2px solid #15445D;
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Review step ---------- */
.ni-review-heading {
    margin: 0 0 0.25rem;
    color: var(--ni-navy);
}

.ni-review-note {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.ni-review-group {
    border: var(--ni-border-width) solid var(--ni-line);
    border-radius: var(--ni-radius-lg);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.ni-review-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ni-review-group-head h4 {
    margin: 0;
    color: var(--ni-navy);
    font-size: 0.95rem;
}

.ni-review-edit {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-family: var(--ni-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--md-primary, #a85f2e);
    cursor: pointer;
    text-decoration: underline;
    border-radius: var(--ni-radius);
}

.ni-review-group dl {
    margin: 0.5rem 0 0;
}

.ni-review-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.3rem 0;
    border-top: 1px solid var(--ni-line);
    font-size: 0.875rem;
}

.ni-review-row:first-child {
    border-top: none;
}

.ni-review-row dt {
    flex: 0 0 45%;
    margin: 0;
    font-weight: 600;
}

.ni-review-row dd {
    flex: 1;
    margin: 0;
    overflow-wrap: anywhere;
}

/* ---------- Status-only upload line (small files) ---------- */
.ni-upload-progress-status .ni-upload-bar,
.ni-upload-progress-status .ni-upload-progress-percent {
    display: none;
}

/* ---------- Pre-selected default cue (e.g. own_rent "Own") ---------- */
.ni-field.ni-preselected::after {
    content: attr(data-ni-preselected-note);
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--ni-navy);
    opacity: 0.75;
}

/* ---------- Conditional reveal (show only — hiding stays instant:
   display/hidden semantics are load-bearing for fieldValue()) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .ni-field[data-show-if]:not([hidden]) {
        animation: ni-reveal 0.18s ease-out;
    }
}

@keyframes ni-reveal {
    from {
        opacity: 0.3;
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}