/* Auto-generated at Thu, 03 Sep 26 15:32:10 +0000. */

/* ===================================================================
   DoW CORE - APPENDED STYLESHEET
   Mission Control > Setup > Styling > Platform.
   Identical in core.collaboration.ai and tec-core.preview.

   ORDER
   1. Design system   - tokens, type, components, layout (scoped .core)
   2. Page components - built on the system (how-to step, site footer)
   3. Platform overrides - fixes to innosabi's own chrome (not scoped)
   4. Organization pages - TEMPORARY demo scaffolding, see its header

   Fonts are loaded by a <link> in the head, not by @import here.
   An @import only works as the first rule in a stylesheet, and this
   field is appended after other rules, so it was being discarded.

   The government banner has its own stylesheet inside the head block.
   Nothing banner-related belongs in this file.

   The two environments run different platform builds. Preview is
   ahead of production. Where a rule below depends on which build is
   underneath it, the comment says so.
   =================================================================== */


/* ###################################################################
   1. DESIGN SYSTEM
   Put class="core" on the outermost element of a section to opt in.
   Everything is scoped under .core so it cannot leak onto platform
   pages. !important appears where the CMS master sheet reliably wins:
   text colour and margin/padding.
   ################################################################### */


/* --- Tokens: brand colours and the spacing scale ----------------- */
.core {
    --core-space:  #15263b;   /* Space Blue - dark section bg */
    --core-ocean:  #254267;   /* Ocean Blue - panels on dark, hover */
    --core-blue:   #355e93;   /* Primary Blue - fills, stylized headings */
    --core-hl:     #56ACFF;   /* Highlight - borders/hover on dark */
    --core-steel:  #aebfd4;   /* Steel Blue - muted on dark */
    --core-cadet:  #728fb4;   /* Cadet Blue - accents */
    --core-hazy:   #ebeff5;   /* Hazy Blue - light card tint */
    --core-gray:   #333333;   /* primary text on light */
    --core-anchor: #717171;   /* muted text */
    --core-line:   #d4dbe6;   /* hairline / divider on light */
    --core-card:   #ffffff;   /* card surface */
    --core-pass:   #3a6b5c;   /* positive result */
    --core-fail:   #9a2a2a;   /* negative result */
    --core-black:  #000000;   /* platform chrome black */

    --core-space-sm: 16px;    /* within a component */
    --core-space-md: 28px;    /* between related elements */
    --core-space-lg: 48px;    /* section header to body */
    --core-section-pad: 80px; /* section top/bottom padding */

    font-family: 'Lato', Arial, sans-serif;
    color: var(--core-gray);
    box-sizing: border-box;
}

.core *,
.core *::before,
.core *::after {
    box-sizing: border-box;
}

/* Kills the margins on <p> wrappers the CMS injects around content. */
.core p {
    margin: 0 !important;
    padding: 0 !important;
}


/* --- Typography -------------------------------------------------
   Body floor is 1.1rem. Labels, eyebrows and captions are the only
   things allowed below it. */

/* Small uppercase kicker above a title. */
.core .core-eyebrow {
    font-family: 'Oswald', 'Franklin Gothic Medium Condensed', Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 14px !important;
}

/* Hero headline. Fluid so it flexes with the hero design. */
.core .core-headline {
    font-family: 'Oswald', 'Franklin Gothic Medium Condensed', Arial, sans-serif;
    font-size: clamp(2.6rem, 5.5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.04;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0 0 20px !important;
}

/* Section headline. */
.core .core-section-title {
    font-family: 'Oswald', 'Franklin Gothic Medium Condensed', Arial, sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.08;
    text-transform: uppercase;
    margin: 0 0 18px !important;
}

/* Lede under a section title. */
.core .core-section-sub {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 !important;
}

/* Card headline. Serif, used consistently across a card set. */
.core .core-card-title {
    font-family: 'Crimson Pro', 'Times New Roman', Georgia, serif;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 12px !important;
}

/* Standout callout line. Use sparingly. */
.core .core-lede {
    font-family: 'Crimson Pro', 'Times New Roman', Georgia, serif;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 400;
    line-height: 1.4;
    margin: 0 !important;
}

/* Body copy. Every sentence of reading text sits here or larger. */
.core .core-body {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.45;
    margin: 0 !important;
}

/* Micro-label inside a component. */
.core .core-label {
    font-family: 'Oswald', 'Franklin Gothic Medium Condensed', Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 !important;
}

/* Fine print and disclaimers. */
.core .core-caption {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.55;
    margin: 0 !important;
}

/* Text colour helpers. */
.core .core-on-dark { color: #ffffff !important; }
.core .core-accent  { color: var(--core-blue) !important; }


/* --- Card ------------------------------------------------------- */

/* White panel with a hairline border and a soft shadow. */
.core .core-card {
    background: var(--core-card);
    border: 1px solid var(--core-line);
    border-radius: 10px;
    padding: 36px;
    box-shadow: 0 18px 40px -24px rgba(21, 38, 59, 0.45);
}

/* Dark card: Space Blue fill, white text. */
.core .core-card--dark {
    background: var(--core-space) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
.core .core-card--dark .core-card-title { color: #ffffff !important; }
.core .core-card--dark .core-body { color: rgba(255, 255, 255, 0.82) !important; }

/* Keeps a card light while it sits on a dark section. */
.core .core-card--light {
    background: var(--core-card) !important;
    border-color: var(--core-line) !important;
    color: var(--core-gray) !important;
}

/* Soft tinted panel for quiz options and callouts. */
.core .core-card--tint {
    background: var(--core-hazy) !important;
    border-color: #dbe2ee !important;
}

/* Pass and fail result tints. */
.core .core-card--pass {
    background: #eef4f1 !important;
    border-color: #cfe0d8 !important;
}
.core .core-card--fail {
    background: #faf0ee !important;
    border-color: #e6cdc8 !important;
}

/* Whole card is a link. Hover lift waits until after the reveal so
   the two transforms don't fight. */
.core a.core-card--link {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.core a.core-card--link.gs-reveal--in:hover,
.core a.core-card--link:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -24px rgba(21, 38, 59, 0.55);
    border-color: var(--core-steel) !important;
    outline: none;
}


/* --- Buttons ----------------------------------------------------
   Text colour needs !important in every variant or the CMS link
   colour wins and ghost buttons show dark text. Pick the variant
   that matches the background the button sits on. */

.core .core-btn {
    display: inline-block;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1.0rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    padding: 16px 30px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.18s ease;
}

/* On a dark background: white fill. */
.core .core-btn--primary {
    background: #ffffff;
    color: var(--core-space) !important;
}
.core .core-btn--primary:hover,
.core .core-btn--primary:focus-visible {
    background: var(--core-steel);
    color: var(--core-space) !important;
    outline: none;
}

/* On a light background: brand blue fill. */
.core .core-btn--primary-light {
    background: var(--core-blue);
    color: #ffffff !important;
}
.core .core-btn--primary-light:hover,
.core .core-btn--primary-light:focus-visible {
    background: var(--core-ocean);
    color: #ffffff !important;
    outline: none;
}

/* Outline button on a dark background. */
.core .core-btn--ghost {
    background: transparent;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.7);
}
.core .core-btn--ghost:hover,
.core .core-btn--ghost:focus-visible {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    outline: none;
}

/* Outline button on a light background. */
.core .core-btn--ghost-light {
    background: transparent;
    color: var(--core-space) !important;
    border-color: var(--core-steel);
}
.core .core-btn--ghost-light:hover,
.core .core-btn--ghost-light:focus-visible {
    border-color: var(--core-space);
    background: rgba(21, 38, 59, 0.05);
    color: var(--core-space) !important;
    outline: none;
}

/* Smaller button for dense rows. */
.core .core-btn--sm {
    padding: 11px 20px;
    font-size: 0.9rem;
}


/* --- Divider ----------------------------------------------------
   Use sparingly. Prefer whitespace or a background change. Equal
   margin above and below is baked in. */
.core .core-divider {
    border: 0;
    border-top: 1px solid var(--core-line);
    margin: var(--core-space-lg) 0 !important;
}
.core .core-divider--on-dark {
    border-top-color: rgba(174, 191, 212, 0.25);
}


/* --- Icons ------------------------------------------------------ */

/* Aligns a Material Symbols glyph with adjacent text. */
.core .core-icon {
    line-height: 1;
    vertical-align: middle;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.core .core-icon--sm { font-size: 18px; }
.core .core-icon--lg { font-size: 30px; }

/* Circle behind an icon. Recolour per section by setting --badge-bg
   and --badge-fg on the badge. */
.core .core-icon-badge {
    --badge-bg: var(--core-hazy);
    --badge-fg: var(--core-blue);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--badge-bg);
    color: var(--badge-fg);
}
.core .core-icon-badge .material-symbols-outlined,
.core .core-icon-badge .core-icon {
    font-size: 22px;
    line-height: 1;
    color: var(--badge-fg);
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.core .core-icon-badge--lg { width: 58px; height: 58px; }
.core .core-icon-badge--lg .material-symbols-outlined,
.core .core-icon-badge--lg .core-icon { font-size: 28px; }


/* --- Freshness signal -------------------------------------------
   Uppercase micro-label with a pulsing dot, for "new content here"
   cues. Tuned for dark sections; override the colour on light. */
.core .core-freshness {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Oswald', 'Franklin Gothic Medium Condensed', Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--core-hl) !important;
}
.core .core-freshness > p { display: contents; }
.core .core-freshness .core-freshness-dot {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--core-hl);
}
.core .core-freshness .core-freshness-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--core-hl);
    transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: no-preference) {
    .core .core-freshness .core-freshness-dot {
        animation: core-freshness-glow 1.6s ease-in-out infinite;
    }
    .core .core-freshness .core-freshness-dot::after {
        animation: core-freshness-ring 1.6s ease-out infinite;
    }
}
@keyframes core-freshness-glow {
    0%, 100% {
        box-shadow: 0 0 4px 0 rgba(86, 172, 255, 0.55);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 12px 2px rgba(86, 172, 255, 0.95);
        transform: scale(1.18);
    }
}
@keyframes core-freshness-ring {
    0%   { width: 10px; height: 10px; opacity: 0.7; }
    100% { width: 30px; height: 30px; opacity: 0; }
}


/* --- Scroll reveal (look only) ----------------------------------
   The trigger script lives in the head. Sections add directional
   variants and stagger locally.

   visibility:hidden is load-bearing: opacity:0 alone leaves content
   focusable, so a keyboard user could tab to something invisible. */
@media (prefers-reduced-motion: no-preference) {
    .core .gs-reveal {
        opacity: 0;
        visibility: hidden;
        transform: translateY(34px);
        transition:
            opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s;
        will-change: opacity, transform;
    }
    .core .gs-reveal.gs-reveal--in {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}


/* --- Hover lift -------------------------------------------------
   Only for genuinely interactive elements. */
.core .core-hover-lift {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.core .core-hover-lift.gs-reveal--in:hover,
.core .core-hover-lift:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -24px rgba(21, 38, 59, 0.55);
    border-color: var(--core-steel) !important;
    outline: none;
}


/* --- Layout primitives ------------------------------------------ */

/* Centres a section and sets its side padding. */
.core .core-section {
    max-width: 1180px;
    margin: 0 auto !important;
    padding: var(--core-section-pad) 20px;
}
.core .core-section--mid    { max-width: 1080px; }
.core .core-section--narrow { max-width: 880px; }

/* Equal-column card row. */
.core .core-grid {
    display: grid;
    gap: var(--core-space-md);
}
.core .core-grid--2 { grid-template-columns: repeat(2, 1fr); }
.core .core-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Horizontal row of inline children (tags, chips, buttons, icon +
   text). Use this for ANY such row: the CMS wraps a run of inline
   siblings in one <p>, which becomes the only flex child and
   collapses gap to nothing. The dissolve below fixes that. If
   changing gap has no visible effect, this is why. */
.core .core-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--core-space-sm);
}
.core .core-row--tight { gap: 10px; }
.core .core-row--loose { gap: var(--core-space-md); }

.core .core-row > p,
.core .core-grid > p { display: contents; }

/* Vertical spacing between siblings. */
.core .core-stack-sm > * + * { margin-top: var(--core-space-sm) !important; }
.core .core-stack-md > * + * { margin-top: var(--core-space-md) !important; }
.core .core-stack-lg > * + * { margin-top: var(--core-space-lg) !important; }

/* Invisible on screen, read by screen readers. Use wherever the
   sanitizer strips an ARIA attribute, since text always survives. */
.core .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap !important;
}


/* --- Design system: mobile -------------------------------------
   767px to match the platform header breakpoint below. */
@media (max-width: 767px) {
    .core { --core-section-pad: 48px; }

    .core .core-section-title { font-size: 2rem; }
    .core .core-section-sub   { font-size: 1.15rem; }

    .core .core-grid--2,
    .core .core-grid--3 { grid-template-columns: 1fr; }
}


/* ###################################################################
   2. PAGE COMPONENTS
   Built on the design system. Still scoped under .core.
   ################################################################### */


/* --- How-to step (Resource Center guides) -----------------------
   Numbered circle on the left, content on the right. Content can
   hold text, an image, a Loom embed, and tip/warning callouts.
   Markup:
     <div class="core"><div class="ht-step">
       <div class="ht-step__rail"><span class="ht-step__num">1</span></div>
       <div class="ht-step__body"> ... </div>
     </div></div> */
.core .ht-step {
    margin: 0 auto !important;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
}

.core .ht-step__rail {
    display: flex;
    justify-content: center;
}
.core .ht-step__rail > p { display: contents; }

.core .ht-step__num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--core-blue);
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', 'Franklin Gothic Medium Condensed', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
}

.core .ht-step__body {
    min-width: 0;
    padding-top: 4px;
}

.core .ht-step__title {
    font-family: 'Oswald', 'Franklin Gothic Medium Condensed', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.12;
    color: var(--core-gray) !important;
    margin: 0 0 12px !important;
}

.core .ht-step__body .core-body {
    color: var(--core-gray) !important;
    margin: 0 0 16px !important;
}
.core .ht-step__body .core-body:last-child {
    margin-bottom: 0 !important;
}

/* Shared frame for an image or a video. */
.core .ht-step__media {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--core-line);
    background: #f4f6fa;
    box-shadow: 0 18px 40px -28px rgba(21, 38, 59, 0.4);
}
.core .ht-step__media > p { display: contents; }
.core .ht-step__media img {
    display: block;
    width: 100%;
    height: auto;
}
.core .ht-step__media-cap {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 0.82rem;
    color: var(--core-anchor) !important;
    padding: 10px 14px;
    background: #ffffff;
    border-top: 1px solid var(--core-line);
}

/* Holds a Loom embed at a true 16:9 shape. */
.core .ht-step__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
}
.core .ht-step__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Tip callout. Add --warn for the scarlet variant. */
.core .ht-step__callout {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--core-hazy);
    border-left: 4px solid var(--core-blue);
}
.core .ht-step__callout > p { display: contents; }
.core .ht-step__callout .material-symbols-outlined {
    font-size: 24px;
    color: var(--core-blue);
}
.core .ht-step__callout-label {
    font-family: 'Oswald', 'Franklin Gothic Medium Condensed', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--core-blue) !important;
    margin: 0 0 4px !important;
}
.core .ht-step__callout .core-body {
    margin: 0 !important;
    font-size: 1.02rem;
}

.core .ht-step__callout--warn {
    background: #faf0ee;
    border-left-color: var(--core-fail);
}
.core .ht-step__callout--warn .material-symbols-outlined {
    color: var(--core-fail);
}
.core .ht-step__callout--warn .ht-step__callout-label {
    color: var(--core-fail) !important;
}

@media (max-width: 767px) {
    .core .ht-step {
        grid-template-columns: 40px 1fr;
        gap: 16px;
    }
    .core .ht-step__num {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}


/* --- Site footer ------------------------------------------------
   Injected via Mission Control > Setup > Integrations. Replaces the
   platform footer, which still supplies the surrounding <footer>
   landmark, so our root is a <div class="core core-footer">.

   Three bands: link columns plus identity rail, then the crisis
   badge plus federal required links, separated by a hairline.

   Its breakpoints are 1024px and 640px rather than the 767px used
   above, because the column structure differs from page content. */

/* Full-bleed black band, matching the header. */
.core.core-footer {
    background: var(--core-black);
    padding: 0 20px;
}

/* Centres footer content on the site content width. */
.core .core-footer-inner {
    max-width: 1180px;
    margin: 0 auto !important;
}

/* Suppresses the platform's external-link pseudo-element. It renders
   nothing but occupies 16px as a flex item, which pins the social
   glyph left and pads every external link in the footer. */
.core.core-footer a[target="_blank"]::after,
.core.core-footer a[target="_blank"]::before {
    content: none !important;
    display: none !important;
}


/* Band 1: four link columns, a hairline, then the identity rail. */
.core .core-footer-top {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 1px minmax(300px, 1.25fr);
    gap: 32px;
    padding: 56px 0 44px;
}
.core .core-footer-top > p { display: contents; }

/* Vertical hairline between the link columns and the rail. */
.core .core-footer-divider-v {
    background: rgba(174, 191, 212, 0.22);
}

/* Column heading. Label-size and steel so it sits quieter than the
   links beneath it. */
.core .core-footer-head {
    font-family: 'Oswald', 'Franklin Gothic Medium Condensed', Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--core-steel) !important;
    margin: 0 0 16px !important;
}

/* Link list inside a column. */
.core .core-footer-list {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
.core .core-footer-list > p { display: contents; }
.core .core-footer-list li {
    margin: 0 0 11px !important;
    padding: 0 !important;
}
.core .core-footer-list li:last-child { margin-bottom: 0 !important; }

/* Base footer link. 82% white holds 4.5:1 on the black band. */
.core.core-footer a {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1.0rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none !important;
    transition: color 0.16s ease;
}
.core.core-footer a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.core.core-footer a:focus-visible {
    color: #ffffff !important;
    outline: 2px solid var(--core-hl);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Emphasis link. One per column at most. */
.core .core-footer-link--hl { color: var(--core-hl) !important; }
.core .core-footer-link--hl:hover { color: #ffffff !important; }

/* External-link glyph, scaled to the text it follows. */
.core .core-footer-ext {
    width: 0.72em;
    height: 0.72em;
    margin-left: 5px;
    vertical-align: baseline;
    fill: currentColor;
    opacity: 0.65;
}

/* Identity rail: mark, address and actions all centre on one axis. */
.core .core-footer-rail {
    text-align: center;
}

/* Office mark. */
.core .core-footer-mark {
    display: block;
    width: 120px;
    height: auto;
    margin: 0 auto 22px !important;
}

/* Office address block. */
.core .core-footer-address {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 0.85rem;
    line-height: 1.55;
    font-style: normal;
    color: var(--core-steel) !important;
    margin: 0 0 20px !important;
}

/* Social tile and both buttons on one centred row. */
.core .core-footer-rail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.core .core-footer-rail-actions > p { display: contents; }

/* Square social tile. Same fill, border, radius and height as the
   buttons beside it. */
.core .core-footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--core-blue);
    border: 1px solid var(--core-blue);
    border-radius: 4px;
    line-height: 0;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}
.core.core-footer .core-footer-social:hover,
.core.core-footer .core-footer-social:focus-visible {
    background: var(--core-ocean);
    border-color: var(--core-ocean);
    text-decoration: none !important;
}
.core .core-footer-social img {
    display: block;
    width: 18px;
    height: 18px;
}

/* Footer action button. Solid brand fill, sentence case, matching the
   war.gov button treatment rather than the uppercase core-btn. */
.core .core-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    background: var(--core-blue);
    border: 1px solid var(--core-blue);
    border-radius: 4px;
    color: #ffffff !important;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}
.core.core-footer .core-footer-btn:hover,
.core.core-footer .core-footer-btn:focus-visible {
    background: var(--core-ocean);
    border-color: var(--core-ocean);
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Hairline separating the footer bands. */
.core .core-footer-rule {
    height: 1px;
    background: rgba(174, 191, 212, 0.22);
    border: 0;
    margin: 0 !important;
}

/* Band 2: crisis badge, then the required links across the rest. */
.core .core-footer-mid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 24px 0 30px;
}
.core .core-footer-mid > p { display: contents; }

/* Collapses the anchor's line box so it hugs the badge and both grid
   items centre on the same axis. */
.core .core-footer-crisis a {
    display: block;
    line-height: 0;
}
.core .core-footer-crisis img {
    display: block;
    width: 132px;
    height: auto;
}

/* Federal required-links row. Flex gap rather than pipe characters,
   which screen readers announce between every item. */
.core .core-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 24px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
.core .core-footer-legal > p { display: contents; }
.core .core-footer-legal li { margin: 0 !important; padding: 0 !important; }

/* Required links run smaller and dimmer than the column links. */
.core.core-footer .core-footer-legal a {
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.62) !important;
}
.core.core-footer .core-footer-legal a:hover {
    color: #ffffff !important;
}

/* Footer tablet: columns drop to two up, rail takes its own row. */
@media (max-width: 1024px) {
    .core .core-footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px 28px;
        padding: 48px 0 36px;
    }
    .core .core-footer-divider-v { display: none; }
    .core .core-footer-rail { grid-column: 1 / -1; }
}

/* Footer mobile: everything stacks to a single column. */
@media (max-width: 640px) {
    .core .core-footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0 32px;
    }
    .core .core-footer-mid {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 20px;
        padding: 22px 0 28px;
    }
}


/* ###################################################################
   3. PLATFORM OVERRIDES
   Rules that target innosabi's own elements, so deliberately NOT
   scoped under .core. This is the one sanctioned exception to the
   scoping rule.
   ################################################################### */


/* --- Sticky header ---------------------------------------------
   !important on position is required. The platform sets its own
   position at higher specificity and without this the header
   silently does not stick, which looks like nothing happened.

   Measured header heights:
     <= 767px    120px, shrunk to 72px below
     768-999px   158px  (the nav wraps to two rows)
     >= 1000px   120px

   scroll-padding-top keeps in-page anchor targets below the header
   instead of behind it, so it tracks those heights. */
.header-container {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

html { scroll-padding-top: 120px; }

/* Mobile: shrink the header from 120px to 72px. Every level of the
   chain sets an explicit height, so all of them come down together
   or you get dead black space. The logo is 268x60 natively; height
   40 with width auto holds the ratio. */
@media (max-width: 767px) {
    .header-container,
    .header-container header,
    .header-container fe-header,
    .header-container header-mobile,
    .header-container header-mobile .actions {
        height: 72px !important;
    }
    .header-container header-mobile header-logo,
    .header-container header-mobile .nav-brand,
    .header-container header-mobile .nav-brand img {
        height: 40px !important;
        width: auto !important;
    }
    html { scroll-padding-top: 72px; }
}

/* Tablet band: the header is 158px here. */
@media (min-width: 768px) and (max-width: 999px) {
    html { scroll-padding-top: 158px; }
}


/* --- Platform UI we don't use ---------------------------------- */

/* Hide the platform's "powered by" credit. */
frontend-root footer .powered-by {
    display: none;
}

/* Hide the platform search in the header. */
.frontend header-search {
    display: none !important;
}

/* Hide the secondary accessibility widget. The real skip links live
   in nav.a11y-menu and are untouched by this. */
.frontend .accessibility-nav {
    display: none !important;
}

/* Hide badges and stat counters on content cards. */
.frontend featured-content .featured-content-card .card-badges {
    display: none !important;
}
.frontend featured-content .featured-content-card .card-content .card-content-footer > .card-content-footer-stats {
    display: none !important;
}
.frontend row-card a .card-content .badge-wrapper {
    display: none !important;
}

/* Drop the icons from nav menu items. */
.frontend desktop-menu button[role="menuitem"] inn-icon,
.frontend desktop-menu a[role="menuitem"] inn-icon {
    display: none !important;
}


/* --- Nav menu appearance -------------------------------------- */

/* Type size in the main nav and its dropdowns. 1.125rem is the
   production value, 18px. This was var(--font-size-sm), which the
   section 4 type ladder moves to 21.1px, so it is pinned to a
   literal instead. Revert to var(--font-size-sm) when section 4 and
   the Prepend field come out. */
.frontend desktop-menu a[role="menuitem"],
.frontend desktop-menu button[role="menuitem"],
.frontend .cdk-overlay-pane.navigation-dropdown a[role="menuitem"],
.frontend .cdk-overlay-pane.navigation-dropdown button[role="menuitem"] {
    font-size: 1.125rem !important;
}

/* Dropdown border matches the black header. */
.frontend .cdk-overlay-pane.navigation-dropdown {
    border-color: #1a1a1a !important;
}


/* --- Topic row cards ------------------------------------------
   These cards read the raw size scale directly and bypass the
   Mission Control typography slots. Redefining the tokens on the
   card host scopes the change to these cards only. */
sbir-topic-row-card {
    --font-size-xs:   1.35rem;
    --font-size-xxs:  1.1rem;
    --font-size-xxxs: 0.82rem;
}

.frontend sbir-topic-row-card .sbir-topic-row-card__badge {
    border-color: #717171;
}
.frontend sbir-topic-row-card .sbir-topic-row-card__close-date {
    color: #717171;
}


/* --- Placeholder avatars --------------------------------------
   Duotones the platform's default avatar into the brand blues.
   178 lands in the blue family; lower saturate is closer to grey. */
[style*="profileimage"],
header-user-icon > div,
inn-user .user-img,
fe-profile-image .profile-image {
    filter:
        grayscale(1)
        sepia(1)
        hue-rotate(178deg)
        saturate(0.8)
        brightness(0.90)
        !important;
}


/* --- Avatar menu: organization section ------------------------
   Baseline for the section. The dropdown panel renders on #000, so
   text, names and icons are set light. Platform defaults here are
   light-background values (--body-color #141414, --gray-basic
   #adadad). */
header-user-menu-organization {
    --nav-item-color: #ffffff;
    --body-color:     #ffffff;
    --gray-basic:     #aebfd4;
}

/* Checkmark on the active row. The platform fills it with
   --brand-primary (#355e93), 3.2:1 on black. Set the fill directly
   rather than moving --brand-primary, which also themes the
   invitation buttons. */
header-user-menu-organization .org-item__check inn-icon svg path {
    fill: #ffffff;
}

/* BUILD DIFFERENCE. The rule above ties the platform's own
   .org-item__check rule on specificity, and the platform sheet is
   injected into the head AFTER this one loads, so on the older build
   the platform wins and the check renders #355e93. On the newer build
   a higher-specificity platform rule (.org-item--active .org-item__check)
   already paints it white, so the tie never comes up. Scoping to
   --active and forcing it gives white on both. */
header-user-menu-organization .org-item--active .org-item__check inn-icon svg path {
    fill: #ffffff !important;
}

/* Settings gear. The platform ships it at 0.7 opacity. */
header-user-menu-organization .org-item__settings {
    opacity: 1;
}

/* Awaiting-approval and pending-invitation rows. A faint fill groups
   them without a divider. The class is doubled because the platform's
   .org-item { background: none } has equal specificity and loads
   later, so a single class loses. */
header-user-menu-organization .org-item.org-item--pending,
header-user-menu-organization .org-item.org-item--invitation {
    background: rgba(255, 255, 255, 0.043);
    border-radius: 6px;
}

/* Active org row, the only row with its own background: #254267 at
   rest, #355e93 on hover. Both are dark, so rest and hover take the
   same text values. The sub-line runs brighter than the section
   baseline because #aebfd4 is only 3.5:1 on the hover blue. */
header-user-menu-organization .org-item--active,
header-user-menu-organization .org-item--active:hover {
    --nav-item-color: #ffffff;
    --body-color:     #ffffff;
    --gray-basic:     #dbe7fa;
}

/* BUILD DIFFERENCE. The background is declared here rather than left
   to the platform, because the two builds read different tokens for
   this row:
     newer (preview)  rest --nav-item-bg-active   hover --nav-item-bg-hover
     older (prod)     rest --gray-lightest        hover --gray-light
   The older build therefore fills the row #fafafa and the white text
   set above disappears into it. Both builds define
   --nav-item-bg-active #254267 and --nav-item-bg-hover #355e93, so
   naming those tokens produces the same result on each and stays
   correct after production is upgraded.

   !important because the platform rule ties on specificity and its
   sheet is injected after this one. Do NOT fix this by redefining
   --gray-lightest, which is a global surface token. */
header-user-menu-organization .org-item--active {
    background: var(--nav-item-bg-active) !important;
}
header-user-menu-organization .org-item--active:hover {
    background: var(--nav-item-bg-hover) !important;
}

/* Accept and decline controls on the invitation row. Both are
   token-driven. Accept moves off the platform olive (--status-success
   #849261) to the site pass green. Decline needs all its outline
   tokens: they default to dark on a dark panel, and its hover
   background must be set via --btn-outline-bg-hover, not
   --button-bg-hover, which the button overrides on itself. */
header-user-menu-organization .org-item__actions {
    --btn-success-bg:           #3a6b5c;
    --btn-success-color:        #ffffff;
    --btn-success-bg-hover:     #2f574a;
    --btn-success-border-hover: 1px solid #2f574a;
    --btn-success-color-hover:  #ffffff;

    --btn-outline-bg:           transparent;
    --btn-outline-bg-hover:     rgba(255, 255, 255, 0.08);
    --btn-outline-border:       1px solid rgba(255, 255, 255, 0.45);
    --btn-outline-color:        #ffffff;
    --btn-outline-border-hover: 1px solid #ffffff;
    --btn-outline-color-hover:  #ffffff;
}

/* The accept button has no border at rest because the platform writes
   border: var(--btn-success-bg), a bare colour, which is an invalid
   shorthand. The hover rule is valid, so the button grew 2px and
   pushed the row. Declaring the rest border holds the box at 40x28,
   matching decline. */
.frontend header-user-menu-organization .org-item__actions button.btn.btn-success {
    border: 1px solid #3a6b5c;
}


/* --- User profile pages --------------------------------------- */

/* Hide My Challenges: the nav item and its overview panel. */
.frontend a[href="/profile/mychallenges"] {
    display: none !important;
}
.frontend fe-panel:has(.card-badge):has(a.more-link[href="/profile/mychallenges"]) {
    display: none !important;
}

/* Hide the Achievements panel on the profile overview. */
.frontend fe-panel:has([data-test-id="profile-statistics"]) {
    display: none !important;
}

/* Reorder the profile settings nav. Needs flex-direction column for
   the order values below to apply. */
.frontend nav.profile-settings-nav {
    display: flex;
    flex-direction: column;
}
.frontend nav.profile-settings-nav a[href="/profile/about"]                  { order: 1 !important; }
.frontend nav.profile-settings-nav a[href="/profile/settings/general"]       { order: 2 !important; }
.frontend nav.profile-settings-nav a[href="/profile/myideas"]                { order: 3 !important; }
.frontend nav.profile-settings-nav a[href="/profile/following"]              { order: 4 !important; }
.frontend nav.profile-settings-nav a[href="/profile/communities"]            { order: 5 !important; }
.frontend nav.profile-settings-nav a[href="/profile/settings/security"]      { order: 6 !important; }
.frontend nav.profile-settings-nav a[href="/profile/settings/notifications"] { order: 7 !important; }
.frontend nav.profile-settings-nav a[href="/profile/mychallenges"]           { order: 8 !important; }
.frontend nav.profile-settings-nav a[href="/profile/lottery"]                { order: 9 !important; }


/* ###################################################################
   4. ORGANIZATION PAGES  -  TEMPORARY
   Demo scaffolding. Not scoped under .core: these target innosabi's
   own components and Angular Material.

   Pairs with core-prepend-type-scale.css in the Prepend field.

   TO REMOVE: delete everything from here to the end of the file,
   then set the nav rule in section 3 back to var(--font-size-sm),
   then empty the Prepend field. In that order.
   ################################################################### */


/* ----- 4.1 TYPE ---------------------------------------------------- */

/* Org name shares --title-4-size with the tab heading below it, so
   both render the same and neither leads. Set directly rather than
   moving the H4 slot, which drives card titles platform-wide. */
.frontend organization-page .org-page-header__name {
    font-size: 2.15rem;
}

/* Intro paragraph on the certification and audit tabs. Reads a label
   token; pinned to the body floor. */
.frontend organization-page .form-description {
    font-size: 1.1rem;
}

/* Data grid header, hardcoded 14px upstream. */
.frontend inn-datatable .ngx-datatable .datatable-header .datatable-header-cell {
    font-size: 1.1rem;
}

/* Status badges: hero pills and keyword tags, same component. The
   platform sets height: 25px with 5px padding, leaving a 15px content
   box, and line-height 1.3. At the eyebrow size that line box is
   18.3px, so the text overflows downward and sits low. Flex centring
   with line-height 1 holds it in the middle at any size. */
.frontend inn-status-badge .status-badge {
    height: auto;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Exception tier: markers, not sentences. The only things allowed
   below the 1.1rem floor. */
.frontend organization-users .org-members-status,
.frontend organization-page .org-settings-nav__monogram,
.frontend inn-datatable .ngx-datatable .datatable-footer-inner {
    font-size: var(--font-size-xxxxs);
}


/* ----- 4.2 FORM CONTROLS ------------------------------------------
   Checkboxes and radios are Angular Material, themed from a separate
   mat-accent palette (#0085ff) that was never wired to the brand
   tokens. The checkmark shipped as #0c1030 on the blue box, 1.6:1.

   SPECIFICITY: these tokens are declared at
   ".frontend .mat-mdc-radio-button.mat-accent" in app.css, which is
   (0,3,0). A :root or .frontend block loses. Do not simplify. */

.frontend .mat-mdc-checkbox,
.frontend .mat-mdc-checkbox.mat-accent,
.frontend .mat-mdc-checkbox.mat-primary {
    --mat-checkbox-selected-icon-color:                #355e93;
    --mat-checkbox-selected-hover-icon-color:          #254267;
    --mat-checkbox-selected-focus-icon-color:          #254267;
    --mat-checkbox-selected-pressed-icon-color:        #254267;
    --mat-checkbox-selected-checkmark-color:           #ffffff;
    --mat-checkbox-selected-focus-state-layer-color:   #355e93;
    --mat-checkbox-selected-hover-state-layer-color:   #355e93;
    --mat-checkbox-selected-pressed-state-layer-color: #355e93;
    --mat-checkbox-unselected-icon-color:              #949494;  /* see contrast note */
    --mat-checkbox-unselected-hover-icon-color:        #355e93;
    --mat-checkbox-unselected-focus-icon-color:        #355e93;
    --mat-checkbox-unselected-hover-state-layer-color: #355e93;
    --mat-checkbox-unselected-focus-state-layer-color: #355e93;
    --mat-checkbox-label-text-color:                   #333333;
}

.frontend .mat-mdc-radio-button,
.frontend .mat-mdc-radio-button.mat-accent,
.frontend .mat-mdc-radio-button.mat-primary {
    --mat-radio-selected-icon-color:         #355e93;
    --mat-radio-selected-hover-icon-color:   #254267;
    --mat-radio-selected-focus-icon-color:   #254267;
    --mat-radio-selected-pressed-icon-color: #254267;
    --mat-radio-checked-ripple-color:        #355e93;
    --mat-radio-ripple-color:                #355e93;
    --mat-radio-unselected-icon-color:       #949494;  /* see contrast note */
    --mat-radio-unselected-hover-icon-color: #355e93;
    --mat-radio-unselected-focus-icon-color: #355e93;
    --mat-radio-label-text-color:            #333333;
}

/* Answer row. Platform ships padding: 0 0.5em, so the hover bar is
   exactly as tall as the control. Colour is pinned rather than left
   on the platform's color-mix(--gray-basic 25%), which the token
   change in 4.3 would darken. Add width: fit-content if you
   want the pill to hug the label instead of filling the row.

   The :not(inn-datatable ...) is required. Without it this also hits
   the row-select checkboxes in the data grids, where the padded box
   and its hover fill render as a pale patch offset inside the
   highlighted row. */
.frontend mat-radio-group mat-radio-button .mdc-form-field,
.frontend mat-checkbox:not(.cdk-overlay-filter-bar mat-checkbox):not(inn-datatable mat-checkbox) .mdc-form-field,
.frontend .mat-mdc-checkbox:not(.cdk-overlay-filter-bar .mat-mdc-checkbox):not(inn-datatable .mat-mdc-checkbox) .mdc-form-field {
    padding: 8px 0.5em;
    border-radius: 6px;
}
.frontend mat-radio-group mat-radio-button .mdc-form-field:hover,
.frontend mat-checkbox:not(.cdk-overlay-filter-bar mat-checkbox):not(inn-datatable mat-checkbox) .mdc-form-field:hover,
.frontend .mat-mdc-checkbox:not(.cdk-overlay-filter-bar .mat-mdc-checkbox):not(inn-datatable .mat-mdc-checkbox) .mdc-form-field:hover {
    background: #ebeff5;
}

/* Data grid checkboxes have no hover of their own. The platform
   still applies color-mix(--gray-basic 25%) to .mdc-form-field, which
   shows as a grey patch behind the box once the exclusion above
   removes our version. */
.frontend inn-datatable mat-checkbox .mdc-form-field,
.frontend inn-datatable mat-checkbox .mdc-form-field:hover,
.frontend inn-datatable .mat-mdc-checkbox .mdc-form-field,
.frontend inn-datatable .mat-mdc-checkbox .mdc-form-field:hover {
    background: transparent !important;
}

/* Empty controls: 1px hairline in a light neutral grey, matching the
   Figma. Applies to form and data grid alike.

   The 2px comes from a "border: 2px solid var(--gray-basic)"
   shorthand, not the mat tokens, so the token block above never
   reaches it and the --fe-gray-basic change in 4.3 darkens it.
   !important because the platform selector is a long :is() chain.

   :not(...checked) is required. Without it the grey also rings the
   filled blue box, which reads as a halo.

   #949494 is 3.03:1 on white, the lightest neutral that still clears
   1.4.11 for a control boundary. Anything lighter fails: #adadad is
   2.24:1, #d0d5dd is 1.47:1. */
.frontend .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked):not(.mat-mdc-checkbox-indeterminate) .mdc-checkbox__background {
    border-width: 1px !important;
    border-color: #949494 !important;
}
.frontend .mat-mdc-radio-button:not(.mat-mdc-radio-checked) .mdc-radio__outer-circle {
    border-width: 1px !important;
    border-color: #949494 !important;
}

/* Vertical rule beside an indented sub-question. */
.frontend organization-page fe-sub-element,
.frontend organization-section fe-sub-element {
    border-left-color: #aebfd4;
}


/* Row hover on every org data grid. The platform reads
   --brand-primary-light, which is Cadet Blue at :root and far too
   heavy for a hover. REPLACES the existing "organization-users
   inn-datatable" rule further up this sheet, which only covered the
   members table. Topics, Proposals and Active Releases each mount
   their own inn-datatable under a different host. */
organization-page inn-datatable {
    --brand-primary-light: #ebeff5;
}


/* ----- 4.3 PLATFORM GREYS -----------------------------------------
   Theme tokens, so these reach the whole frontend, not just the org
   pages. --fe-gray-basic is the one that matters: #adadad is 2.24:1
   on white, a 1.4.3 failure, and it colours every muted label on the
   platform. */
:root {
    --fe-body-color:   #333333;   /* was #141414, off-palette */
    --fe-gray-basic:   #717171;   /* was #adadad, 2.24:1 */
    --fe-gray-lighter: #d4dbe6;   /* was #f4f4f4, hairlines invisible at 1.10:1 */
}

/* --gray-lighter also fills the logo disc. Pinned so the hairline
   change does not darken it. */
.frontend organization-page .org-page-header__logo {
    background: #ffffff;
}


/* ----- 4.4 SETTINGS NAV -------------------------------------------- */

/* Completion ring, sized only. Colours are the platform's and stay.
   Two rendered states are different elements, so both need sizing or
   the ring changes size when a section completes. Scaled 24/18:
   check 18->24, arc 16->21, mask inset 2->2.7px. The inset is the
   donut hole; leaving it at 2px thins the stroke on a larger circle. */
.frontend organization-page inn-completion-ring .completion-ring__check,
.frontend organization-page inn-completion-ring .completion-ring__check svg {
    width: 24px;
    height: 24px;
}
.frontend organization-page inn-completion-ring .completion-ring__arc {
    width: 21px;
    height: 21px;
}
.frontend organization-page inn-completion-ring .completion-ring__arc::after {
    inset: 2.7px;
}
.frontend organization-page nav.org-settings-nav .org-settings-nav__completion {
    width: 24px;
    height: 24px;
}

/* Collapse toggle. Shipped 28px with a grey chevron on the panel
   seam, no visible affordance. */
.frontend organization-page nav.org-settings-nav .org-settings-nav__toggle {
    width: 32px;
    height: 32px;
    color: #355e93;
    background: #ffffff;
    border: 1px solid #aebfd4;
    border-radius: 50%;
    box-shadow: 0 2px 6px -2px rgba(21, 38, 59, 0.3);
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.frontend organization-page nav.org-settings-nav .org-settings-nav__toggle:hover,
.frontend organization-page nav.org-settings-nav .org-settings-nav__toggle:focus-visible {
    background: #ebeff5;
    border-color: #355e93;
    color: #254267;
}
.frontend organization-page nav.org-settings-nav .org-settings-nav__toggle svg {
    width: 18px;
    height: 18px;
}

/* Centres the toggle on the content panel edge: gutter 20px + half of
   32px = 36px. Collapsed state tracks for free.

   MEDIA QUERY IS LOAD-BEARING. Below 768px the nav goes static, the
   toggle resolves against a different containing block and lands off
   the right edge. The platform already overflows 14px there at its
   own -14px; -36px would make it 36px. */
@media (min-width: 768px) {
    .frontend organization-page .org-settings-container.grid-desktop nav.org-settings-nav .org-settings-nav__toggle {
        right: -36px;
        z-index: 3;
    }
}


/* ===================================================================
   NOTES

   Empty control outlines, 1px #949494. An unchecked control is a UI
   component boundary, so 1.4.11 wants 3:1 on white:
     #d0d5dd typical Figma grey  1.47:1  fail
     #adadad Smoke Gray          2.24:1  fail
     #949494 used here           3.03:1  pass, lightest that does
     #728fb4 Cadet Blue          3.33:1  pass
     #717171 Anchor Gray         4.88:1  pass, reads too heavy
   #949494 is off-palette. It is the lightest value that satisfies
   both the Figma and 1.4.11; the palette has nothing between
   #adadad and #728fb4.

   Data grid columns. ngx-datatable writes each width as an inline
   style from the component's width/flexGrow values. Content-agnostic,
   and cells clip with ellipsis. Clipped cells per column on the
   members table, at 14px / 16px / 17.6px:
     Name    2/16  3/16  4/16
     Email   6/15  6/15  6/15
     Role    0/16  0/16  0/16
     Status  0/16  0/16  0/16
     Joined  0/12  0/12  2/12
   Email clips at the original size and never improves. Dev-team ask,
   in order: widen Email or add a tooltip; widen Name and Joined;
   Role and Status are over-provisioned. Not fixable from CSS without
   misaligning header and body cells, which are positioned separately.

   Mobile toggle overflow, 14px at 500px, pre-existing. Belongs with
   the 1.4.10 horizontal-overflow backlog item.

   sbir-topic-row-card further up this sheet sets --font-size-xxxs to
   0.82rem. Now the only place breaking the 1.1rem floor that is not
   a pill or a label.

   Data grid checkbox outline reads var(--gray-basic) via a border
   shorthand, so it tracks the 4.3 grey rather than the mat
   tokens. Overridden per grid above.

   Header nav lives in section 3, pinned to 1.125rem. It read
   var(--font-size-sm), which the ladder moves 18px -> 21.1px.

   Platform build drift. Preview runs a newer innosabi build than
   production: app.css is 11,614 rules on preview against 11,213 on
   prod. Two rules in the avatar menu carry a BUILD DIFFERENCE comment
   because of it. When another rule works on one host and not the
   other, check whether the platform changed which token it reads
   before assuming this sheet is at fault. This sheet is byte
   identical on both.
   =================================================================== */