/* ============================================
   LAYOUT SHARED STYLES - Role Switcher & Mobile Nav
   Add this file AFTER main.css
   ============================================ */

/* Header Center Container (for layouts that use it like Investor) */
.header-center {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    justify-content: center;
    flex-wrap: nowrap;
}

/* Header Navigation Flex Fix */
.header-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
}

/* Role Switcher (Desktop) */
.role-switcher {
    position: relative;
    cursor: pointer;
    margin-right: 0; /* Remove extra margin that pushes to next line */
    flex-shrink: 0; /* Prevent shrinking */
}

.role-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap; /* Prevent text wrapping */
}

.role-badge:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.role-badge-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #e5e7eb;
}

.role-badge-arrow {
    font-size: 0.7rem;
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.role-switcher.active .role-badge-arrow {
    transform: rotate(180deg);
}

.role-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--color-bg-panel);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    min-width: 280px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.role-switcher.active .role-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.role-dropdown-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.role-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.role-dropdown-item:last-of-type {
    border-bottom: none;
}

.role-dropdown-item:hover {
    background: rgba(96, 165, 250, 0.1);
}

.role-dropdown-item.active {
    background: rgba(34, 197, 94, 0.1);
}

.role-dropdown-item-info h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #e5e7eb;
}

.role-dropdown-item-info p {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #9ca3af;
}

.role-dropdown-item .checkmark {
    margin-left: auto;
    color: var(--success);
    font-size: 1.1rem;
}

.role-dropdown-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.role-dropdown-footer a {
    display: block;
    color: #60a5fa;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.role-dropdown-footer a:hover {
    color: #93c5fd;
}

/* Mobile Role Switcher */
.mobile-role-switcher {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(235, 209, 161, 0.2);
    background: rgba(235, 209, 161, 0.05);
}

.mobile-role-switcher-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.mobile-role-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--color-text-main);
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-role-option:hover {
    background: rgba(235, 209, 161, 0.1);
    border-color: rgba(235, 209, 161, 0.3);
}

.mobile-role-option.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    font-weight: 600;
}

.mobile-role-option:last-child {
    margin-bottom: 0;
}

/* Header User Dropdown Active State */
.header-user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Hide desktop role switcher on mobile */
    .role-switcher,
    .role-switcher.active,
    .header-nav .role-switcher,
    .originator-layout .role-switcher,
    .partner-layout .role-switcher,
    .entrepreneur-layout .role-switcher,
    .investor-layout .role-switcher {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Show mobile role switcher */
    .mobile-role-switcher {
        display: block;
    }

    /* Hide desktop header nav on mobile - use hamburger menu instead */
    .admin-layout .header-nav,
    .entrepreneur-layout .header-nav,
    .investor-layout .header-nav,
    .partner-layout .header-nav,
    .originator-layout .header-nav {
        display: none !important;
    }

    /* Hide header-center on mobile (used by Investor layout) */
    .header-center {
        display: none !important;
    }
    
    /* Prevent header collapse for role layouts */
    .entrepreneur-layout .header,
    .investor-layout .header,
    .originator-layout .header,
    .partner-layout .header,
    .admin-layout .header {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* Show mobile menu toggle for role layouts */
    .entrepreneur-layout .mobile-menu-toggle,
    .investor-layout .mobile-menu-toggle,
    .originator-layout .mobile-menu-toggle,
    .partner-layout .mobile-menu-toggle,
    .admin-layout .mobile-menu-toggle {
        display: block !important;
    }
}

@media (min-width: 769px) {
    /* Hide mobile role switcher on desktop */
    .mobile-role-switcher {
        display: none;
    }

    /* Ensure role switcher is visible on desktop */
    .role-switcher {
        display: block !important;
    }
}

/* ─── Header nav dropdown (admin "MEMBERS" group) ─────────────────────────── */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--color-text-soft);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color var(--transition-fast);
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
    color: var(--color-gold-soft);
}

.nav-caret {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.nav-dropdown.open .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 200px;
    background: #0f1830;
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 1200;
}

.nav-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 7px;
    color: #e5e7eb;
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-menu a:hover {
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
}

.nav-dropdown-menu a.active {
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.nav-dropdown-divider {
    height: 1px;
    margin: 0.35rem 0.25rem;
    background: rgba(255, 255, 255, 0.08);
}

/* Mobile: a non-clickable section label that groups the member links */
.mobile-nav-group-label {
    margin-top: 0.75rem;
    padding: 0.25rem 0;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7280;
}

/* ============================================================================
   MOBILE OFF-CANVAS DRAWER — canonical definition
   ----------------------------------------------------------------------------
   Every role layout (Investor, Entrepreneur, Ally, Originator) renders the same
   .mobile-nav markup, but these rules used to live in admin-dashboard.css and
   originator-dashboard-only.css. Since index.html links every stylesheet on
   every page, load order alone decided the color — originator's purple won, so
   the Investor and Ally drawers rendered in the wrong role's accent.

   This file is linked after both of those, so one brand-gold definition here
   covers all four roles. Keep drawer styling here rather than re-declaring it
   per layout.
   ============================================================================ */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-gold-soft);
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
}

.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.mobile-nav-overlay.active {
    display: block;
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100%;
    background: var(--color-bg-alt);
    z-index: 999;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(235, 209, 161, 0.2);
}

.mobile-nav-close,
.mobile-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-gold-soft);
    cursor: pointer;
}

.mobile-nav-links {
    padding: 1rem 0;
}

.mobile-nav-links a,
.mobile-nav-link {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--color-text-main);
    text-decoration: none;
    transition: background 0.2s ease;
    border-left: 3px solid transparent;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active,
.mobile-nav-link:hover {
    background: rgba(235, 209, 161, 0.1);
    border-left-color: var(--color-gold-soft);
}

.mobile-nav-footer {
    padding: 1rem 0;
    border-top: 1px solid rgba(235, 209, 161, 0.2);
}

.mobile-nav-footer a {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--color-text-main);
    text-decoration: none;
    transition: background 0.2s ease;
}

.mobile-nav-footer a:hover {
    background: rgba(235, 209, 161, 0.1);
}

@media (max-width: 768px) {
    .mobile-menu-toggle,
    .mobile-nav {
        display: block;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Two-row role header (shared) — row 1: logo + Workspace pill + bell/user;
   row 2: a dedicated nav bar. Applied to the investor/entrepreneur/originator/
   partner(ally) layouts. Admin uses its own shell and is unaffected.
   ══════════════════════════════════════════════════════════════════════ */
.entrepreneur-layout .header-center,
.originator-layout .header-center,
.partner-layout .header-center { justify-content: flex-start; }

.ws-badge-labels { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.ws-badge-eyebrow { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #9ca3af; }
.ws-badge-labels .role-badge-text { font-size: 0.95rem; font-weight: 700; color: #f3f6fc; }
.header-user-caret { color: #9ca3af; font-size: 0.7rem; margin-left: 0.15rem; }

/* Sticky chrome: freeze the header + tab row together on scroll (design handoff). The Nova inline
   bar lives in page content below it and hands off to the floating pill. z-index 300 keeps the
   header's own dropdowns above page content but below the Nova pill (1400) / docked panel (1500).
   Layouts opt in by wrapping their <header> + tab-row nav in .app-sticky-chrome. */
.app-sticky-chrome {
    position: sticky;
    top: 0;
    z-index: 300;
    background: rgba(2, 6, 25, 0.92);
}

.role-subnav {
    display: flex; align-items: center; gap: 2rem;
    /* Match the header's computed gutter so the nav lines up with the logo + page content. */
    padding: 0 max(var(--app-gutter), calc((100% - var(--app-content-max)) / 2 + var(--app-gutter)));
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.role-subnav a,
.role-subnav .nav-link {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.85rem 0;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: #9aa7bd; text-decoration: none; border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s; background: none;
}
.role-subnav a:hover,
.role-subnav .nav-link:hover { color: #e5e7eb; }
.role-subnav a.active,
.role-subnav .nav-link.active { color: #ffffff; border-bottom-color: var(--color-gold-soft, #d4af37); }
.role-subnav .nav-link-disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 900px) { .role-subnav { display: none; } }

/* Investor Hive lockup (Components/InvestorHiveLockup.razor) — right of the Workspace pill inside .header-center,
   which already spaces it with its 1.5rem gap. Sized to the 40px header logo rather than the handoff's 72px
   mock, so the header keeps its height. Phones get nothing extra: .header-center is hidden at ≤768px. */
.ih-divider { width: 1px; height: 36px; background: #2a3150; flex: none; }
.ih-lockup { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; border-radius: 6px; }
.ih-lockup .ih-mark { width: 44px; height: 44px; object-fit: contain; display: block; transition: filter 0.15s; }
a.ih-lockup:hover .ih-mark { filter: drop-shadow(0 0 8px rgba(240, 201, 135, 0.45)); }
a.ih-lockup:focus-visible { outline: 2px solid #f0c987; outline-offset: 4px; }
.ih-text { display: flex; flex-direction: column; white-space: nowrap; }
.ih-name { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; color: #f0c987; line-height: 1; }
.ih-tag { margin-top: 4px; font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: #8b93a8; }

/* The header row is nowrap and none of its children shrink, so the lockup steps down before it can push the
   user menu off-screen: wordmark from 1320px, mark only to 1100px, hidden below. The name cap keeps long
   member names from doing the same. */
@media (max-width: 1319px) { .ih-text { display: none; } }
@media (max-width: 1099px) { .ih-divider, .ih-lockup { display: none; } }
.investor-layout .header-user-name,
.entrepreneur-layout .header-user-name,
.originator-layout .header-user-name,
.partner-layout .header-user-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phone: the compact mark sits between the Next Edge logo and the hamburger. The logo drops from 40px to 32px
   and the group tightens so the row is no wider than it was before the mark was added. */
.ih-lockup.ih-compact { display: none; }
@media (max-width: 768px) {
    .header-logo:has(.ih-compact) { gap: 0.6rem; }
    .header-logo:has(.ih-compact) > img { height: 32px; width: auto; }
    .ih-lockup.ih-compact { display: flex; }
    .ih-lockup.ih-compact .ih-mark { width: 34px; height: 34px; }
}

/* Pre-launch workspace cover (Components/PreLaunchOverlay.razor): Nova's docked panel is hidden while a page is covered,
   so drop the space nova-assistant.css reserves for it if the panel was open when the cover came up. */
body.nova-assistant-docked:has(.plo-covered) { padding-right: 0; }

/* Accordions that bring an opened section's header back to the top of the view (js/filedownload.js, neaKeepInView):
   the margin keeps the header clear of the sticky app chrome when it is scrolled to. */
details[data-nea-scroll-top] > summary,
[data-nea-scroll-top]:not(details) { scroll-margin-top: calc(var(--app-sticky-offset, 124px) + 8px); }

/* Native modal dialogs (wwwroot/js/admin-dialog.js showModal) are centered by the browser's own `margin: auto`.
   MudBlazor's global reset (`* { margin: 0 }`) removes it, pinning every modal to the top-left corner whenever
   MudBlazor.min.css is loaded — which, since <base href> moved above the stylesheets, is on every route. */
dialog:modal { margin: auto; }

/* House gold primary button — the onboarding "Begin Application" look (investor first-step card, 2FA Verify).
   Pages add their own margin/width; the inline-flex keeps a spinner and label side by side. */
.nea-gold-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font: 700 1rem 'DM Sans', system-ui, sans-serif; color: #1a1306;
    background: linear-gradient(180deg, #f5d79c, #c9a85c); border: 1px solid #f5d79c; border-radius: 12px;
    padding: 15px 36px; cursor: pointer; box-shadow: 0 8px 24px rgba(201, 168, 92, 0.25);
    transition: filter 0.15s, opacity 0.15s;
}
.nea-gold-btn:hover:not(:disabled) { filter: brightness(1.05); }
.nea-gold-btn:focus-visible { outline: 2px solid #f0c987; outline-offset: 3px; }
.nea-gold-btn:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: none; filter: saturate(0.7); }
.nea-gold-btn .nea-gold-btn-spinner {
    width: 1em; height: 1em; border-radius: 50%; flex: none;
    border: 2px solid rgba(26, 19, 6, 0.3); border-top-color: #1a1306;
    animation: nea-gold-btn-spin 0.7s linear infinite;
}
@keyframes nea-gold-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nea-gold-btn .nea-gold-btn-spinner { animation-duration: 2s; } }

/* House button system (owner, 2026-10-15): gold is the primary (.nea-gold-btn above), a medium brown the secondary,
   and a clear red the destructive one-time decline (Pass). Pages size them; these carry the color and states. */
.nea-brown-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    font: 700 0.85rem 'DM Sans', system-ui, sans-serif; color: #fff6ea;
    background: linear-gradient(180deg, #94623a, #7c5126); border: 1px solid #a8743f; border-radius: 10px;
    padding: 9px 18px; cursor: pointer; white-space: nowrap; transition: filter 0.15s, opacity 0.15s;
}
.nea-brown-btn:hover:not(:disabled) { filter: brightness(1.08); }
.nea-brown-btn:focus-visible { outline: 2px solid #f0c987; outline-offset: 3px; }
.nea-brown-btn:disabled { cursor: not-allowed; opacity: 0.55; }

.nea-red-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    font: 700 0.9rem 'DM Sans', system-ui, sans-serif; color: #fff;
    background: #dc2626; border: 1px solid #ef4444; border-radius: 10px;
    padding: 10px 22px; cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.nea-red-btn:hover:not(:disabled) { background: #b91c1c; }
.nea-red-btn:focus-visible { outline: 2px solid #fca5a5; outline-offset: 3px; }
.nea-red-btn:disabled { cursor: not-allowed; opacity: 0.55; }

/* Text links in the sign-in purple (Login.razor .nm-link / .nm-referral-link), for the pages around sign-in. */
.nea-signin-link {
    color: #C9A0FF; text-decoration: underline; text-underline-offset: 2px;
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.nea-signin-link:hover { color: #D4B26A; }
.nea-signin-link:focus-visible { outline: 2px solid #C9A0FF; outline-offset: 2px; border-radius: 2px; }
.nea-signin-link:disabled { color: #8b93a8; text-decoration: none; cursor: default; }

/* ── Deal Data tiers (owner, 2026-10-19) ─────────────────────────────────────────────────────────────────────
   DealDataTierTag / DealDataTierLegend / DealDataTierUi. A blank Required field has a red border, a blank
   Recommended field a blue one, an Optional field nothing. The border goes on the field's container; any input,
   select or textarea inside it picks it up. Focus keeps a visible gold ring over the colored border (WCAG 2.4.7). */
/* Same shape and Required look as the Deal Intake badge (.required-badge-gold): mustard with dark text. The red
   border on an empty field, not the tag, is what says "still missing". */
.dd-tag {
    display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; padding: 2px 8px; border-radius: 4px;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; vertical-align: middle;
    white-space: nowrap; border: 1px solid transparent;
}
.dd-tag.req { color: #1a1a2e; background: linear-gradient(135deg, #d4a849 0%, #b8942e 100%); box-shadow: 0 1px 3px rgba(212, 168, 73, 0.3); }
.dd-tag.rec { color: #9dc3ff; background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.5); }
.dd-missing-req :is(input, select, textarea) {
    border-color: rgba(240, 133, 124, 0.75) !important; box-shadow: 0 0 0 1px rgba(240, 133, 124, 0.25) inset;
}
.dd-missing-rec :is(input, select, textarea) {
    border-color: rgba(96, 165, 250, 0.7) !important; box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.22) inset;
}
:is(.dd-missing-req, .dd-missing-rec) :is(input, select, textarea):focus-visible { outline: 2px solid #f0c987; outline-offset: 2px; }
.dd-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; padding: 0.6rem 0.85rem; margin-bottom: 1rem;
    border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem; line-height: 1.45; color: var(--color-text-soft, #c9ced8);
}
.dd-legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.dd-legend-swatch { width: 1.6rem; height: 0.95rem; border-radius: 4px; background: rgba(255, 255, 255, 0.04); flex: none; }
.dd-legend-swatch.req { border: 2px solid rgba(240, 133, 124, 0.85); }
.dd-legend-swatch.rec { border: 2px solid rgba(96, 165, 250, 0.8); }
.dd-legend-swatch.opt { border: 1px solid rgba(255, 255, 255, 0.18); }
.dd-legend-note { flex-basis: 100%; color: var(--color-text-muted, #9aa3b5); font-size: 0.76rem; }
/* A soft, non-blocking check (e.g. a burn that looks like a percentage): amber, distinct from red errors. The
   container stays rendered with role="status" and only its text changes, so screen readers announce it. */
.dd-soft-warn { display: block; margin-top: 0.25rem; color: #f5c451; font-size: 0.76rem; line-height: 1.4; }
.dd-soft-warn:empty { display: none; }