/* =====================================================================
   CustomCSS - shared Nimble community stylesheet

   SERVED TO TWO LIVE SITES. The <link> comes from
   <apex:stylesheet value="{!CustomStylesheetResourceUrl}"/>, which
   appears in exactly two templates in this org:
       EdtaTemplate     (unmanaged) -> Community Hub
       NC.CoreTemplate  (managed)   -> Chapter Portal
   Both wrappers render identical markup, so there is no selector that
   can distinguish them. Every edit here lands on both sites.

   DO NOT RENAME OR DELETE THIS RESOURCE. The name is resolved inside
   managed NC.CoreTemplateController; if it stops matching, the
   stylesheet silently disappears from both sites with no error.

   Loaded last in the <link> chain (after nc__Resources/Bootstrap.css,
   font-awesome.min.css and BoldCore-min.css), but BEFORE the theme
   <style> block that NC generates inline in <head>.

   Consequence: any property the inline theme block also sets must be
   declared !important here to win. The theme block itself uses zero
   !important, so !important always wins against it. Properties only
   set by BoldCore need no !important, because this file loads later.

   Rules marked [THEME] below are overriding an inline-theme property.
   ===================================================================== */


/* =====================================================================
   SECTION 1 - PRE-EXISTING FUNCTIONAL RULES
   Layout and flow-runtime fixes. Behaviour-critical, not cosmetic.
   Preserved byte-for-byte from the previous revision.
   ===================================================================== */

.navbar {
	min-height: 60px;
}

.m-logo-retina {
    height: 45px;
}

/* Indents and shrinks Community Hub navigation items */
.nav-child {
    margin-left: 2em;
    font-size: .9em;
}
/*CSS to control checkbox option display within flow on CH */
.nu-lightning-wrapper .uiBlock .bBody .slds-form-element__control .slds-checkbox {
    width: auto;
}

/*CSS to control text area label display within flow on CH */
.nu-lightning-wrapper .bBody .inputHeader .richTextLabel {
    display: inline-block;
    float: none;
    text-align: left;
	width: 100%;
}

/*CSS to control previous button display within flow on CH */
.slds-button.slds-button--neutral.uiButton--default.uiButton{
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid rgb(217, 219, 221);
    transition: border .15s linear;
    background-color: rgb(0, 112, 210);
    border-color: rgb(0, 112, 210);
    color: rgb(255, 255, 255);
}

/*CSS to allow Address lightning component country picklist to behave correctly within flow on CH */
.slds-scope .slds-form_compound .slds-form-element__group .slds-form-element__row{
	display: inherit;
}

/*CSS to relocate the required asterisk */
.nu-lightning-wrapper .uiBlock .bBody .inputHeader .required{
	margin-right: auto;
	margin-left: auto;
}

/*CSS to add padding to radio button inputs within a flow in Community Hub*/
.flowruntimeRadioButtonInput .bBody .slds-form-element__control{
    padding-top: 25px;
}

@media  (min-width:768px) {
  .container {
    width: 100%;
  }
}


/* =====================================================================
   SECTION 2 - DESIGN TOKENS (reference only)

   Palette is derived from schooltheatre.org's live stylesheet:
     #012169  Elementor --e-global-color-primary  (11 applied uses)
     #F3D03E  Elementor --e-global-color-accent   (12 applied uses)
     #424242  Elementor --e-global-color-text

   Blues below are the Community Hub's own existing anchor colour
   family, darkened where needed to clear WCAG AA on white.

     ink        #012169   headings, footer, high-emphasis text
     sky        #0085CA   decorative fills, active indicators, focus
     sky-600    #0071AE   link + button colour        5.28:1 on white
     sky-700    #005B8C   hover / pressed             7.18:1 on white
     gold       #F3D03E   BUTTON FILL (see Section 6) + accent rules.
                          Never use as text on white: 1.51:1.
     gold-600   #DFBB28   button hover
     gold-700   #C4A21C   button pressed
     text       #424242   body copy                   9.74:1 on white
     muted      #6B7683   secondary copy
     sky-100    #A9E4F3   footer + social strip ground. schooltheatre.org's
                          own footer colour, verified as a computed style.
                          #424242 on it is 7.22:1, navy 10.6:1; the muted
                          #5B6670 is 4.21:1 and must NOT be used here.
     surface    #F4F8FC   zebra rows, wells (was the page-header band
                          until 2026-08-18; the band is navy again)
     border     #DCE4EC   hairlines, card edges

   Rules are written as a literal hex followed by the var() form:
       color: #424242 !important;
       color: var(--edta-text) !important;
   This is for READABILITY and for engines with no custom-property
   support (which drop the second declaration and keep the literal).

   It is NOT a safety net against a bad token name. If a var() resolves
   to nothing, CSS treats the declaration as invalid AT COMPUTED-VALUE
   TIME, which computes to `inherit` - it does NOT fall back to the
   literal on the line above. Verified accidentally: disabling this
   stylesheet in devtools removes :root, and the affected elements
   inherited rather than reverting to their literals.

   So if you add a token, add it to :root above. If you want a real
   fallback, put it inside the function: var(--edta-text, #424242).
   ===================================================================== */

:root {
    --edta-ink:      #012169;
    --edta-sky:      #0085CA;
    --edta-sky-600:  #0071AE;
    --edta-sky-700:  #005B8C;
    --edta-gold:     #F3D03E;
    --edta-gold-600: #DFBB28;
    --edta-gold-700: #C4A21C;
    --edta-text:     #424242;
    /* #6B7683 measured 4.33:1 on --edta-surface, under the 4.5:1 AA
       floor. #5B6670 is 4.97:1 and reads the same. */
    --edta-muted:    #5B6670;
    --edta-surface:  #F4F8FC;
    /* Footer ground. This IS schooltheatre.org's own footer colour, read
       off the live site as a computed background rather than inferred:
       the bottom section of the home page measures rgb(169,228,243) over
       1365px.

       An earlier revision of this file used #D4F1F9 and claimed in a
       comment that EdTA's light blues are "applied to nothing". That was
       wrong, and the reasoning is worth keeping because it is a general
       trap. The claim came from counting hex literals in the site's CSS,
       where #A9E4F3 appears exactly ONCE. It appears once because it is
       applied through a custom property, not by literal:

           --e-global-color-ca4076c: #A9E4F3;
           .elementor-element-1e416889 { background-color: var(--e-global-color-ca4076c) }

       A grep for the hex cannot see any application made through var(),
       so "appears once" measured the swatch and missed every use. Read
       the rendered value, not the source text. */
    --edta-sky-100:  #A9E4F3;
    --edta-border:   #DCE4EC;
    --edta-radius:   10px;
    --edta-radius-sm: 6px;
    --edta-shadow:   0 1px 2px rgba(1,33,105,.06), 0 4px 12px rgba(1,33,105,.07);
}


/* =====================================================================
   SECTION 3 - TYPOGRAPHY

   The inline theme block sets font-family 'Helvetica Neue', sans-serif
   and a 14px base. Helvetica Neue is absent on Windows and Android, so
   the effective render there is Arial. Swapped for a system-native
   stack: San Francisco on Apple, Segoe UI on Windows, Roboto on
   Android. No webfont request, so no CspTrustedSite entry is needed
   (the org has 5 trusted sites, none of them a font host).
   ===================================================================== */

/* [THEME] overrides body{font-family}.

   The selector list is deliberately exhaustive rather than relying on
   inheritance from body. Three separate rules in the cascade set a
   font-family on descendants, and each would otherwise keep its own
   face and break the single-typeface look:

     BoldCore  body                                  'Quicksand'
     BoldCore  .nu-lightning-wrapper .slds-scope     'Quicksand'
               (+ its h1-h6, th, td)
     BoldCore  .header-topper .slds-scope            'Quicksand'
     Bootstrap input, button, select, textarea       inherit/sans-serif

   Quicksand has NO @font-face anywhere in the loaded stylesheets
   (verified: zero @font-face blocks in Bootstrap.css and
   BoldCore-min.css, and no external font <link> on the served pages),
   so it never actually loads. Those elements were silently falling
   back to generic `sans-serif` - Helvetica on macOS, Arial on Windows
   - while everything else used the stack below. That is a real,
   visible mismatch on any page that renders a flow or an SLDS
   component inside the Community Hub shell. */
body,
.card .card-heading,
.card .card-detail,
.card .card-detail-label,
.card .card-detail-value,
.card-list .card-list-heading,
.list-group,
.list-group-item,
.navbar .navbar-nav > li > a,
.page-header,
.page-header h1,
h1, h2, h3, h4, h5, h6,
.table, .table th, .table td,
.btn,
input, select, textarea, button,
.nu-lightning-wrapper .slds-scope,
.nu-lightning-wrapper .slds-scope h1,
.nu-lightning-wrapper .slds-scope h2,
.nu-lightning-wrapper .slds-scope h3,
.nu-lightning-wrapper .slds-scope h4,
.nu-lightning-wrapper .slds-scope h5,
.nu-lightning-wrapper .slds-scope h6,
.nu-lightning-wrapper .slds-scope th,
.nu-lightning-wrapper .slds-scope td,
.header-topper .slds-scope,
.m-footer {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* [THEME] overrides the 14px base. 15px with a 1.55 measure. */
body,
.card .card-detail,
.navbar .navbar-nav > li > a,
.page-header {
    font-size: 15px !important;
}

body,
.l-canvas {
    line-height: 1.55;
}

/* [THEME] body/.l-canvas colour is #000000. Pure black on white reads
   as harsh and dated; #424242 is schooltheatre.org's own text colour. */
body,
.l-canvas {
    color: #424242 !important;
    color: var(--edta-text) !important;
}

h1, h2, h3, h4, h5,
.card .card-heading {
    letter-spacing: -.01em;
}


/* =====================================================================
   SECTION 4 - LINKS
   [THEME] a{color:#0085ca} measures 4.03:1 on white, under the 4.5:1
   AA floor for body-size text. Darkened one step to clear it while
   staying in the same sky family.
   ===================================================================== */

a {
    color: #0071AE !important;
    color: var(--edta-sky-600) !important;
    transition: color .12s ease-in-out;
}

a:hover,
a:focus {
    color: #005B8C !important;
    color: var(--edta-sky-700) !important;
}

/* --- Exemptions from the blanket rule above ---------------------------
   The `a{}` rule carries !important so it can beat the inline theme
   block, but that also captures links the theme deliberately painted
   for a dark or chrome surface. Each exemption below restores one of
   those. Any NEW dark-background surface needs adding here too.

   One exemption deliberately does NOT live here: the footer social
   strip, `.edta-social`, is exempted in SECTION 14B instead. Its links
   change colour again on hover and focus, so keeping the base colour
   here and the states there would be two sections fighting over the
   same anchors. Left unexempted it would render #0071AE on #012169,
   which measures 2.79:1. If you add another dark surface with its own
   interaction states, follow that pattern rather than this one.
   -------------------------------------------------------------------- */

/* Footer ground moved from #012169 to #A9E4F3 on 2026-08-18, so this
   exemption INVERTED: white here would now be 1.39:1. #424242 is 7.22:1
   and is the colour schooltheatre.org's own footer links use, so this
   matches the live site rather than inventing a treatment. Still
   exempted rather than left to the blanket rule, because that would
   paint #0071AE, which is 3.8:1 on this ground and fails outright. */
.m-footer a,
.m-footer a:link,
.m-footer a:visited {
    color: #424242 !important;
    color: var(--edta-text) !important;
}

/* The page-header band became navy on 2026-08-18, so it is now a dark
   surface and needs the exemption this comment block asks for. No
   member page is known to put a link in the header, so this is a guard
   rather than a fix: left to the blanket rule any such link would be
   #0071AE on #012169, which is 2.79:1. */
.page-header.page-header-anchor a,
.page-header.page-header-anchor a:link,
.page-header.page-header-anchor a:visited {
    color: #FFFFFF !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-header.page-header-anchor a:hover,
.page-header.page-header-anchor a:focus {
    color: #F3D03E !important;
    color: var(--edta-gold) !important;
}

/* Sidebar navigation reads as page furniture, not inline links, so it
   takes the body text colour rather than the link colour.
   Covered as both `a.list-group-item` (anchor IS the item) and
   `.list-group a` (anchor nested inside an li), because the member
   pages and the off-canvas drawer do not use the same markup. */
.list-group .list-group-item,
.list-group a,
.list-group a:link,
.list-group a:visited,
a.list-group-item,
a.list-group-item:link,
a.list-group-item:visited,
.m-tertiary-list-group-nav a,
.nav-child,
.nav-child a {
    color: #424242 !important;
    color: var(--edta-text) !important;
}

.list-group .list-group-item:hover,
a.list-group-item:hover,
a.list-group-item:focus {
    color: #012169 !important;
    color: var(--edta-ink) !important;
}

/* The off-canvas drawer keeps white-on-navy. Its selector is more
   specific than the sidebar rule above, so it already wins, but it is
   restated with :link/:visited for parity. */
.l-off-canvas a,
.l-off-canvas a:link,
.l-off-canvas a:visited,
.l-off-canvas .m-off-canvas-nav .list-group-item {
    color: #FFFFFF !important;
}

/* Visible keyboard focus. BoldCore ships no focus style of its own. */
a:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #0085CA;
    outline: 2px solid var(--edta-sky);
    outline-offset: 2px;
    border-radius: 3px;
}


/* =====================================================================
   SECTION 5 - PAGE HEADER BAND

   NAVY, restored 2026-08-18 at the boss's request. History, because
   this element has now been all three things and the reasoning matters:
   the theme shipped a full-bleed #012169 slab, the 2026-08-14 redesign
   replaced it with a pale #F4F8FC tint carrying navy type, and it is
   now navy again with the redesign's typography and gold base rule
   kept. The gold 3px inset is retained and is the only place gold is
   load-bearing.

   SITE-WIDE AND UNSCOPEABLE, exactly as SECTION 14D documents for the
   entrance animation: the header comes from the managed
   {!HeaderComponent} and nothing in the ancestor chain names the page.
   So this navy lands on "Personal Snapshot", on the login screen's
   "Welcome", on "Checkout", and on every Chapter Portal page.

   EVERY FOREGROUND IN THIS BLOCK HAD TO MOVE WITH THE GROUND. Measured
   on #012169: white 14.76:1, #D1D7E4 10.23:1, gold 9.77:1, but the
   redesign's muted #5B6670 subtitle is 2.52:1 and its navy h1 would be
   1.00:1 - invisible, not merely low contrast. That is the same failure
   mode SECTION 15 exists to prevent, arriving from the other direction.
   ===================================================================== */

/* [THEME] background-color + border-bottom-color were both #012169, so
   this restates the theme's own colour rather than overriding it. The
   border is set to the band colour so only the gold inset rule reads;
   the redesign's #DCE4EC hairline is 11.49:1 here and would draw a
   visible light line across the bottom of a navy slab. */
.page-header.page-header-anchor {
    background-color: #012169 !important;
    background-color: var(--edta-ink) !important;
    border-bottom: 1px solid #012169 !important;
    border-bottom: 1px solid var(--edta-ink) !important;
    box-shadow: inset 0 -3px 0 0 #F3D03E;
    box-shadow: inset 0 -3px 0 0 var(--edta-gold);
    padding-top: 34px;
    padding-bottom: 34px;
}

.page-header.page-header-anchor,
.page-header.page-header-anchor h1 {
    color: #FFFFFF !important;
}

.page-header.page-header-anchor h1 {
    font-weight: 700;
    letter-spacing: -.02em;
}

/* Subtitle. #D1D7E4 is 10.23:1 on the navy and is the same de-emphasised
   light the social strip's title uses, so the two agree. */
.page-header.page-header-anchor p {
    color: #D1D7E4 !important;
    margin-top: 6px;
}


/* =====================================================================
   SECTION 6 - BUTTONS
   ===================================================================== */

.btn {
    border-radius: 6px;
    border-radius: var(--edta-radius-sm);
    font-weight: 600;
    padding: 9px 18px;
    transition: background-color .12s ease-in-out,
                border-color .12s ease-in-out,
                color .12s ease-in-out;
}

/* ---------------------------------------------------------------------
   GOLD BUTTONS - Wil's direction, 2026-08-14

   Every button takes the brand accent #F3D03E with navy #012169 text.
   Primary, secondary and default are deliberately IDENTICAL now: one
   action colour, no filled/outline hierarchy. That is the requested
   design, not an oversight.

   This is also what schooltheatre.org itself does - gold button, dark
   text - and it clears WCAG AA on all three states:

       navy on gold      #012169 on #F3D03E   9.77:1
       navy on gold-600  #012169 on #DFBB28   7.71:1   (hover)
       navy on gold-700  #012169 on #C4A21C   5.99:1   (pressed)

   White text was built first and measured 1.51:1, failing both the
   4.5:1 body floor and the 3:1 large-text floor. Do not go back to it.

   Scope line, so this stays consistent as things are added: anything
   carrying a `btn` class is an action and goes gold. State indicators
   that carry no btn class - the selected sidebar row, the current page
   number - stay in the sky family below, because painting them gold
   would make navigation look like a set of buttons.
   --------------------------------------------------------------------- */

/* [THEME] primary fill/border were #0033a0; secondary was a solid
   #768591 slate; btn-default text was #2A94D6. All three collapse to
   one gold treatment here. */
.btn-primary,
.btn-secondary,
.btn-default,
.btn-group > .m-btn-selected {
    background-color: #F3D03E !important;
    background-color: var(--edta-gold) !important;
    border: 1px solid #F3D03E !important;
    border: 1px solid var(--edta-gold) !important;
    color: #012169 !important;
    color: var(--edta-ink) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-default:hover,
.btn-default:focus,
.btn-group > .m-btn-selected:hover,
.btn-group > .m-btn-selected:focus {
    background-color: #DFBB28 !important;
    background-color: var(--edta-gold-600) !important;
    border-color: #DFBB28 !important;
    border-color: var(--edta-gold-600) !important;
    color: #012169 !important;
    color: var(--edta-ink) !important;
}

.btn-primary:active,
.btn-secondary:active,
.btn-default:active {
    background-color: #C4A21C !important;
    background-color: var(--edta-gold-700) !important;
    border-color: #C4A21C !important;
    border-color: var(--edta-gold-700) !important;
    color: #012169 !important;
    color: var(--edta-ink) !important;
}

/* The mobile toggle was previously bundled into the .btn-primary rule,
   so splitting the buttons out would have dropped its fill entirely.
   It keeps the sky treatment; its white text is set in Section 15.

   `a.list-group-item.active` used to ride along in this rule and has
   been REMOVED rather than carried over. It was dead code: SECTION 9
   styles the selected sidebar row as a pale #F4F8FC tint with navy text
   and a sky leading edge, using the identical selector at identical
   specificity (0,2,1) from a later point in the file, so it has always
   won. Measured live on /personalsnapshot to confirm rather than
   inferred: the computed background is rgb(244,248,252), not the sky
   fill this rule asks for. Section 9 is the real treatment - edit it
   there, not here. */
a.m-toggle-active,
a.m-toggle-active:hover,
a.m-toggle-active:focus {
    background-color: #0071AE !important;
    background-color: var(--edta-sky-600) !important;
    border-color: #0071AE !important;
    border-color: var(--edta-sky-600) !important;
}

/* [THEME] disabled fill was #7ABAE3, close enough to the live sky to
   read as enabled. Neutralised so disabled is unambiguous. */
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn[disabled],
.btn[disabled]:hover,
.btn[disabled]:focus,
span.btn,
span.btn:hover,
span.btn:focus {
    background-color: #C9D6E2 !important;
    border-color: #C9D6E2 !important;
    color: #FFFFFF !important;
    opacity: 1;
}

/* [THEME] active pagination was #2A94D6. The selected segmented control
   (.m-btn-selected) used to share this rule and has MOVED to the gold
   block above. It had to move rather than be added there, because this
   rule sits LATER in the file at equal specificity (0,2,0) and both
   carry !important, so leaving it here would have silently beaten the
   gold and left one lone sky button on the page. */
.m-paging-nav .pagination > .active > a,
.m-paging-nav .pagination > .active > a:focus,
.m-paging-nav .pagination > .active > a:hover,
.m-paging-nav .pagination > .active > span,
.m-paging-nav .pagination > .active > span:focus,
.m-paging-nav .pagination > .active > span:hover {
    background-color: #0071AE !important;
    background-color: var(--edta-sky-600) !important;
    border-color: #0071AE !important;
    border-color: var(--edta-sky-600) !important;
}

.m-paging-nav .pagination > li > a,
.m-paging-nav .pagination > li > a:hover,
.m-paging-nav .pagination > li > a:focus,
.m-paging-nav .pagination > li > span,
.m-paging-nav .pagination > li > span:hover,
.m-paging-nav .pagination > li > span:focus {
    color: #0071AE !important;
    color: var(--edta-sky-600) !important;
}

/* [THEME] disabled pagination shared the #7ABAE3 fill used for disabled
   buttons. Against the new sky palette that reads as enabled, so it is
   neutralised to the same grey-blue as a disabled button. */
.m-paging-nav .pagination > .disabled > a,
.m-paging-nav .pagination > .disabled > a:hover,
.m-paging-nav .pagination > .disabled > a:focus,
.m-paging-nav .pagination > .disabled > span,
.m-paging-nav .pagination > .disabled > span:hover,
.m-paging-nav .pagination > .disabled > span:focus {
    background-color: #F4F8FC !important;
    background-color: var(--edta-surface) !important;
    border-color: #DCE4EC !important;
    border-color: var(--edta-border) !important;
    color: #9AA7B4 !important;
}


/* =====================================================================
   SECTION 7 - CARDS

   Three defects fixed here.

   (a) BoldCore sets `.card{border-top:3px solid #c4d600}`, a lime
       green from the stock template. The inline theme block then
       recolours it to #ffffff without resetting the width, so the
       measured pre-change state was a 3px WHITE top edge - invisible
       against the page, not visibly lime, but still 3px of dead space
       and no real card boundary. Replaced with a 1px hairline on all
       four sides. (Measured in-cascade: was `3px solid #FFFFFF`,
       now `1px solid #DCE4EC`.)
   (b) BoldCore sets `.card .card-detail-label{font-size:16px}` while
       the inline theme block resets only `.card .card-detail` to 14px.
       Labels and values therefore rendered two pixels apart. Both are
       now pinned to the same 15px.
   (c) The theme block's zebra fill was #dadfe1, dark enough to read as
       a table from an older design language. Replaced with the pale
       surface tint.
   ===================================================================== */

/* (a) [THEME] sets border-color:#ffffff but not width/style, so the
   lime green survives as a white-coloured 3px edge unless reset here. */
.card,
.card-list {
    border: 1px solid #DCE4EC !important;
    border: 1px solid var(--edta-border) !important;
    border-radius: 10px;
    border-radius: var(--edta-radius);
    box-shadow: 0 1px 2px rgba(1,33,105,.06), 0 4px 12px rgba(1,33,105,.07);
    box-shadow: var(--edta-shadow);
    background-color: #FFFFFF !important;
    overflow: hidden;
    margin-bottom: 22px;
}

.card-list .card {
    box-shadow: none;
    border: 0 !important;
    border-radius: 0;
    margin-bottom: 0;
}

/* [THEME] heading colour was #0033a0. BoldCore additionally boxes the
   heading in a 1px #ddd border; replaced with a single hairline rule. */
.card .card-heading,
.card-list .card-list-heading,
.card-list .card-list-heading > h3 {
    color: #012169 !important;
    color: var(--edta-ink) !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    padding: 16px 20px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #DCE4EC;
    border-bottom: 1px solid var(--edta-border);
    background-color: #FFFFFF;
}

/* (b) Label and value pinned to one size. The label keeps its weight
   contrast; it no longer also carries a size difference. */
.card .card-detail,
.card .card-detail-label,
.card .card-detail-value {
    font-size: 15px !important;
    line-height: 1.55 !important;
}

/* Emphasis is deliberately INVERTED from the usual form convention.
   BoldCore ships the label at font-weight 700, which pulls the eye to
   the field name rather than to the member's own data. These cards are
   a read-only summary, not a form, so the value carries the weight and
   the label recedes to a muted signpost.

   The bold was also redundant here: values are right-aligned and rows
   are zebra-striped, so the two columns are already separated by
   position and tint. That frees weight to signal importance instead of
   structure.

   Both sides sit at weight 400. The value briefly carried 500, which
   still read as bold at this size, so the label/value distinction is
   now carried entirely by COLOUR - muted grey label against darker
   body-text value - with no weight difference at all. Position and the
   zebra tint do the structural work.

   Contrast on both row states: label #5B6670 = 5.31:1 on white and
   4.97:1 on the #F4F8FC zebra; value #424242 = 10.05:1 and 9.13:1. */
.card .card-detail-label {
    font-weight: 400 !important;
    color: #5B6670 !important;
    color: var(--edta-muted) !important;
}

.card .card-detail-value {
    font-weight: 400 !important;
    color: #424242;
    color: var(--edta-text);
}

/* [THEME] card body colour was #000000 */
.card .card-detail,
.card .card-list {
    color: #424242 !important;
    color: var(--edta-text) !important;
    padding-left: 20px;
    padding-right: 20px;
}

.card .card-detail:first-of-type {
    padding-top: 4px;
}

.card .card-actions {
    padding: 0 20px 18px;
}

/* (c) [THEME] zebra fill was #dadfe1 */
.card ul.card-detail.m-card-detail-striped li:nth-child(even) {
    background: #F4F8FC !important;
    background: var(--edta-surface) !important;
}

.card ul.card-detail.m-card-detail-striped li {
    padding: 9px 20px !important;
    border-radius: 4px;
}

/* The store variant deliberately runs unstriped in BoldCore; keep it
   that way rather than inheriting the tint above. */
.card ul.card-detail.m-card-detail-striped.m-store-details li:nth-child(even) {
    background: #FFFFFF !important;
}

.card ul.card-detail.m-card-detail-striped.m-store-details li {
    padding: 9px 0 !important;
}

/* Alert-flavoured cards keep their semantic fills but adopt the new
   geometry, otherwise they read as a different component family. */
.card.m-card-as-alert {
    border-radius: 10px;
    border-radius: var(--edta-radius);
}

/* Name block at the top of a profile-style card. */
.card ul.m-profile-info li:first-of-type {
    font-size: 24px;
    font-weight: 700;
    color: #012169;
    color: var(--edta-ink);
    line-height: 1.2;
}


/* =====================================================================
   SECTION 8 - TABLES
   ===================================================================== */

.table > thead > tr > th {
    border-bottom: 1px solid #DCE4EC;
    border-bottom: 1px solid var(--edta-border);
    color: #012169;
    color: var(--edta-ink);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top: 1px solid #EDF2F7;
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #F4F8FC;
    background-color: var(--edta-surface);
}


/* =====================================================================
   SECTION 9 - SIDEBAR / LIST GROUP NAVIGATION
   ===================================================================== */

/* BoldCore puts the SAME 3px lime #c4d600 top border on `.list-group`
   and `.m-social-login` as it does on `.card`. Section 7 reset only
   `.card, .card-list`, so the left sidebar - which is a `.list-group`,
   not a card - kept its lime edge and it was the most visible
   off-brand element left on the member pages. Removed here.
   Grep `#c4d600` in BoldCore-min.css: exactly three rules carry it,
   and all three are now covered. */
.list-group,
.m-social-login {
    border-top: 0 !important;
}

.list-group {
    border-radius: 8px;
    overflow: hidden;
}

/* The off-canvas drawer runs edge to edge, so it keeps square corners. */
.l-off-canvas .list-group,
.l-off-canvas .m-off-canvas-nav .list-group {
    border-radius: 0;
    overflow: visible;
}

.list-group-item {
    border-color: #DCE4EC;
    border-color: var(--edta-border);
    transition: background-color .12s ease-in-out, color .12s ease-in-out;
}

.list-group-item:hover {
    background-color: #F4F8FC;
    background-color: var(--edta-surface);
}

/* Sidebar active state: tinted rather than filled, with a sky rule on
   the leading edge. Keeps the nav quiet next to page content. */
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    background-color: #F4F8FC !important;
    background-color: var(--edta-surface) !important;
    border-color: #DCE4EC !important;
    border-color: var(--edta-border) !important;
    color: #012169 !important;
    color: var(--edta-ink) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 #0085CA;
    box-shadow: inset 3px 0 0 0 var(--edta-sky);
}


/* =====================================================================
   SECTION 10 - TOP NAVIGATION
   Bar stays white per the theme; only the active/hover treatment moves
   into the sky family so the header reads as one system.
   ===================================================================== */

.navbar-default .navbar-nav > li > a {
    font-weight: 600;
    color: #012169 !important;
    color: var(--edta-ink) !important;
    transition: color .12s ease-in-out, box-shadow .12s ease-in-out;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #0071AE !important;
    color: var(--edta-sky-600) !important;
    box-shadow: inset 0 -3px 0 0 #0085CA;
    box-shadow: inset 0 -3px 0 0 var(--edta-sky);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #012169 !important;
    color: var(--edta-ink) !important;
    box-shadow: inset 0 -3px 0 0 #F3D03E;
    box-shadow: inset 0 -3px 0 0 var(--edta-gold);
}


/* =====================================================================
   SECTION 11 - OFF-CANVAS (MOBILE) NAVIGATION
   [THEME] item fill was the same #768591 slate as the old secondary
   button. Moved to navy so the mobile drawer matches the footer.
   ===================================================================== */

.l-off-canvas .m-off-canvas-nav .list-group-item {
    background: #012169 !important;
    background: var(--edta-ink) !important;
    border-bottom-color: rgba(255,255,255,.14) !important;
    box-shadow: none;
    color: #FFFFFF !important;
}

.l-off-canvas .m-off-canvas-nav .list-group-item:hover {
    background: #0071AE !important;
    background: var(--edta-sky-600) !important;
}

.l-off-canvas .list-group-item,
.l-off-canvas .list-group {
    border-bottom-color: rgba(255,255,255,.14) !important;
}


/* =====================================================================
   SECTION 12 - FOOTER

   LIGHT BLUE as of 2026-08-18, at the boss's request, paired with the
   navy header band in SECTION 5. It was navy until then.

   [THEME] The background is set here for the first time. The redesign
   never declared one: .m-footer's navy came from the inline theme
   block, which loads AFTER this file, so the !important is doing real
   work and removing it silently returns the footer to navy.

   THE WHOLE BOTTOM OF THE PAGE HAD TO MOVE TOGETHER. The social strip
   in SECTION 14B is a separate element rendered after the footer in
   EdtaTemplate, with its own ground, its own text colour and its own
   hover states. Changing only .m-footer would have left a navy strip
   sitting directly under a pale blue footer.

   Gold is gone from the footer's interaction states: it is 1.28:1 on
   this ground. It survives as the 3px top rule, which is a graphic
   element rather than text.
   ===================================================================== */

/* `html` MOVES WITH THE FOOTER, and this pairing is not decoration.
   The inline theme block declares them together in ONE rule:

       html, .m-footer { background-color: #012169; }

   so the page ground below the content has always been the same colour
   as the footer. Overriding only .m-footer splits that pair, and on any
   page shorter than the viewport `html` keeps painting navy from the
   end of the content to the bottom of the window - a hard navy band
   directly under a pale blue footer. Found on the staging login page,
   which is short: content ended at 1472px in a 2000px viewport and
   elementFromPoint below the social strip returned HTML with
   rgb(1,33,105). Not visible on a long page like Personal Snapshot,
   which is exactly why it would have shipped unnoticed.

   This also sets the overscroll / rubber-band colour. The off-canvas
   drawer is unaffected: `.l-off-canvas` paints its own navy ground. */
html,
.m-footer {
    background-color: #A9E4F3 !important;
    background-color: var(--edta-sky-100) !important;
}

.m-footer {
    border-top: 3px solid #F3D03E;
    border-top: 3px solid var(--edta-gold);
    padding-top: 26px;
    padding-bottom: 26px;
}

/* [THEME] The theme paints footer copy white for the navy ground it
   assumed. Non-link text needs moving too, not just the anchors in
   SECTION 4: white is 1.39:1 on this ground, #424242 is 7.22:1 and is
   what schooltheatre.org's own footer uses. */
.m-footer,
.m-footer p,
.m-footer li,
.m-footer span,
.m-footer div {
    color: #424242 !important;
    color: var(--edta-text) !important;
}

.m-footer a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Was gold, which is 1.08:1 on this ground. Navy is 10.6:1 and keeps the
   hover a visible state change from the #424242 resting colour, which is
   the pairing the live site's footer uses. */
.m-footer a:hover,
.m-footer a:focus {
    color: #012169 !important;
    color: var(--edta-ink) !important;
}


/* =====================================================================
   SECTION 13 - FORM CONTROLS
   ===================================================================== */

.form-control {
    border: 1px solid #DCE4EC;
    border: 1px solid var(--edta-border);
    border-radius: 6px;
    border-radius: var(--edta-radius-sm);
    box-shadow: none;
    font-size: 15px;
    height: auto;
    padding: 9px 12px;
    transition: border-color .12s ease-in-out, box-shadow .12s ease-in-out;
}

.form-control:focus {
    border-color: #0085CA;
    border-color: var(--edta-sky);
    box-shadow: 0 0 0 3px rgba(0,133,202,.16);
}

.control-label,
label {
    color: #012169;
    color: var(--edta-ink);
    font-weight: 600;
}


/* =====================================================================
   SECTION 14 - MOBILE REFINEMENTS
   ===================================================================== */

@media (max-width: 767px) {
    .page-header.page-header-anchor {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .card,
    .card-list {
        border-radius: 8px;
        margin-bottom: 16px;
    }

    .card .card-heading {
        padding: 14px 16px;
        font-size: 16px;
    }

    .card .card-detail,
    .card .card-list {
        padding-left: 16px;
        padding-right: 16px;
    }

    .card ul.card-detail.m-card-detail-striped li {
        padding: 9px 16px !important;
    }
}


/* =====================================================================
   SECTION 14B - FOOTER SOCIAL LINKS

   Numbered 14B on purpose. SECTION 15 has to stay LAST in this file
   (see its own header), and several comments plus the prod go-package
   refer to it by number, so a new section slots in here rather than
   renumbering and invalidating those references.

   WHAT THIS STYLES, AND WHERE THE MARKUP LIVES

   The markup is NOT in this repo's CSS and not in any managed component.
   It is a <nav class="edta-social"> block in the unmanaged Visualforce
   page force-app/main/default/pages/EdtaTemplate.page, placed directly
   after the footer dynamic component and inside div.l-canvas.

   It could not go inside <footer class="m-footer"> itself: that element
   is emitted by managed NC.CoreTemplateController, whose markup a
   subscriber cannot edit. The footer's own link row (How to Use this
   Portal / Privacy Policy / Accessibility Statement) comes from Nimble's
   theme settings, which live in the PROTECTED custom setting
   NC__ThemeSettings__c - zero fields are visible to the subscriber, so
   that content is Setup-UI-only and not version-controllable. The
   template page is the version-controllable equivalent.

   BLAST RADIUS IS NARROWER THAN THE REST OF THIS FILE

   This stylesheet is served to Community Hub AND Chapter Portal. The
   markup is not. Probed anonymously 2026-08-15: Community Hub pages
   (/communityhub/NC__Login, /nc__upcomingevents, /nc__store) all carry
   EdtaTemplate's GTM-WVD9N74 container, and Chapter Portal pages
   (/ChapterPortal/*) carry zero - Chapter Portal renders the managed
   NC.CoreTemplate instead. So these rules are INERT on Chapter Portal:
   they load, and nothing there matches them. Do not "fix" that by
   loosening a selector.

   WHY THE COLOUR RULES CARRY THEIR OWN SPECIFICITY

   SECTION 4's blanket `a { color: sky-600 !important }` would otherwise
   paint these links #0071AE, which is 4.47:1 on the current pale ground
   and was 2.79:1 on the navy this strip used to carry - a fail either
   way. Section 4's exemption list handles the other surfaces
   (.m-footer, .page-header, .l-off-canvas); this one is handled here
   instead, because the hover and focus states need to move the colour
   again and splitting that across two sections invites a conflict.
   The selectors are (0,2,0) and (0,3,0) against the blanket rule's
   (0,0,1), so they win on specificity and do NOT depend on source order.

   INVERTED 2026-08-18. The strip was white-on-navy; the footer above it
   went light blue, and this element renders AFTER the footer in
   EdtaTemplate, so leaving it navy would have put a dark band below a
   pale one. Every colour in it flipped, including the focus ring, which
   was white and would now be 1.39:1.

   THE TITLE COLOUR IS THE ONE TO WATCH. On the first pass this ground
   was #D4F1F9 and the label used the muted #5B6670 at 4.96:1. Moving to
   schooltheatre.org's real #A9E4F3 drops that same pairing to 4.21:1 -
   under the floor. A ground change is never just a ground change; every
   foreground has to be re-measured against the new one, and the ones
   that were comfortable before are exactly the ones nobody re-checks.

   CONTRAST, measured not assumed:
     resting icon   #424242 on #A9E4F3                 7.22:1
     hover icon     #012169 on rgba(1,33,105,.08)
                    over #A9E4F3, i.e. #9CD4E8         9.13:1
     title          #424242 on #A9E4F3                 7.22:1
     focus ring     #012169 on #A9E4F3                10.60:1
   Gold is absent here now: it is 1.08:1 on this ground. It survives as
   the footer's 3px top rule, which is a graphic element, not text.
   #424242 for the icons and the label matches the live site's footer.

   ICON SIZING IS DELIBERATELY NOT SET IN CSS. The inline SVGs carry
   width="24" height="24" AND viewBox="0 0 24 24", so they render at the
   right size whether or not Visualforce preserves the camelCase viewBox
   attribute. Setting a CSS width/height here would reintroduce that
   dependency. Leave it alone.
   ===================================================================== */

.edta-social {
    background-color: #A9E4F3;
    background-color: var(--edta-sky-100);
    border-top: 1px solid rgba(1,33,105,.14);
    padding: 14px 0 26px;
}

.edta-social-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.edta-social-title {
    /* NOT --edta-muted: #5B6670 is 4.21:1 on this ground and fails. */
    color: #424242;
    color: var(--edta-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 0 18px 0 0;
}

.edta-social-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Margin rather than flex `gap`, so spacing does not depend on gap
   support in a flex container. */
.edta-social-item {
    margin: 0 6px 0 0;
    padding: 0;
}

.edta-social-item:last-child {
    margin-right: 0;
}

/* 44x44 hit target around a 24px icon. WCAG 2.2 target-size minimum is
   24x24 CSS px, which the bare icon would only just meet; the padding
   buys real margin on a phone without adding visible chrome. */
.edta-social .edta-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: transparent;
    color: #424242 !important;
    color: var(--edta-text) !important;
    text-decoration: none !important;
    transition: background-color .12s ease-in-out, color .12s ease-in-out;
}

.edta-social .edta-social-link:hover,
.edta-social .edta-social-link:focus {
    background-color: rgba(1,33,105,.08);
    color: #012169 !important;
    color: var(--edta-ink) !important;
    text-decoration: none !important;
}

/* SECTION 4's generic a:focus-visible paints a #0085CA ring, which is
   2.30:1 on this pale ground. Navy is 10.60:1. The ring sits on the
   ground rather than the hover fill because of the offset, so it stays
   visible even while the hover tint is showing. */
.edta-social .edta-social-link:focus-visible {
    outline: 2px solid #012169;
    outline-offset: 2px;
    border-radius: 8px;
}

/* fill="currentColor" on the SVG means the two rules above recolour the
   glyph. display:block kills the inline baseline gap. No width/height:
   see the header note. */
.edta-social .edta-social-icon {
    display: block;
}

/* Visually hidden, still in the accessibility tree, and still visible if
   this stylesheet ever fails to load - which is the whole reason the
   name is real text rather than an aria-label alone. */
.edta-social .edta-social-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .edta-social {
        padding: 12px 0 20px;
    }

    /* Full width forces a wrap, so the icons get their own row rather
       than crowding the label on a narrow screen. */
    .edta-social-title {
        width: 100%;
        margin: 0 0 4px;
    }
}


/* =====================================================================
   SECTION 14C - ANNOUNCEMENTS CARD (Personal Snapshot)

   Scoped to .edta-announce, set on NC__Card2.RushOrderAnnoucement via
   NC__CSSClass__c. That card is linked only to NC__ProfileSnapshot on
   Community Hub, so nothing here can match on Chapter Portal even
   though this stylesheet is served there too. Card-level scoping is
   what makes that true; there is still no site-level CSS hook.

   The card was five undifferentiated grey paragraphs that mixed one
   current service notice in with evergreen order policy, so everything
   read at the same weight and the whole block scanned as a terms page.
   The copy now carries the hierarchy and this section paints it: one
   lead notice on a tinted panel, then demoted policy items.

   Selectors are deliberately two classes deep. The Nimble theme block
   loads AFTER this stylesheet and sets colour on `.card p`, which is
   (0,1,1) and would otherwise beat a bare `.edta-announce-item`.
   Descendant form makes these (0,2,0) and avoids needing !important.

   Numbered 14C so SECTION 15 stays last. Same reason as 14B.
   ===================================================================== */

/* !important is required, and NOT because of the Nimble theme block.
   SECTION 5 of this stylesheet already sets `.card, .card-list` to
   `border: 1px solid var(--edta-border) !important`, and an important
   declaration beats an unweighted one whatever the specificity, so
   `.card.edta-announce` at (0,2,0) still lost to `.card` at (0,1,0).
   Verified on the live page: computed border-left came back as
   1px #DCE4EC until this was marked important. */
.card.edta-announce {
    border-left: 3px solid #F3D03E !important;
    border-left: 3px solid var(--edta-gold) !important;
}

/* The Nimble theme block sets a bare `p { text-align: center }`, so every
   paragraph in this card centres unless something says otherwise. The old
   label body worked around it with an align="left" attribute on each <p>;
   those are gone, so the alignment is declared here instead. Centred
   multi-line policy copy is a readability problem, not a style choice.

   No !important needed: these selectors are (0,2,0) against the theme's
   (0,0,1), and specificity beats source order. Contrast with the border
   rule above, which genuinely needed it. */
.edta-announce .edta-announce-title,
.edta-announce .edta-announce-lead,
.edta-announce .edta-announce-item {
    text-align: left;
}

.edta-announce .edta-announce-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #012169;
    color: var(--edta-ink);
}

/* The one genuinely time-sensitive notice. Tinted panel rather than
   bold body text, so it reads as current rather than as more policy. */
.edta-announce .edta-announce-lead {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 6px;
    border-radius: var(--edta-radius-sm);
    background-color: #F4F8FC;
    background-color: var(--edta-surface);
    font-size: 15px;
    line-height: 1.5;
    color: #424242;
    color: var(--edta-text);
}

.edta-announce .edta-announce-lead strong {
    color: #012169;
    color: var(--edta-ink);
}

/* Evergreen policy. Muted is #5B6670, 4.97:1 on white, chosen in :root
   over #6B7683 which failed AA at 4.33:1. Do not darken-by-eye. */
.edta-announce .edta-announce-item {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #5B6670;
    color: var(--edta-muted);
}

.edta-announce .edta-announce-item:last-child {
    margin-bottom: 0;
}

.edta-announce .edta-announce-item strong {
    color: #424242;
    color: var(--edta-text);
}

/* Staged entrance. Runs ONCE and is fully settled at 1.12s (the last
   element's .40s delay plus the .72s duration), so WCAG 2.2.2 (Pause,
   Stop, Hide) does not apply and no pause control is needed: 2.2.2 only
   bites on motion lasting more than five seconds.

   Scoped to this card's own children rather than to `.card` generally.
   A generic staggered-card reveal would also animate Chapter Portal,
   which shares this stylesheet and was not part of this change.

   Gated on `no-preference`, so the still state is the DEFAULT and the
   motion is the opt-in. This is the first reduced-motion guard in the
   file; the site had none before. */
@media (prefers-reduced-motion: no-preference) {
    /* THE CARD carries the grow, not the text.

       Three rounds of scaling the four text elements read as "too
       subtle" because a paragraph has no trackable edge: at 573x91 the
       lead is a 6:1 block of glyphs on white, and an 8% scale on it is
       a few px of reflowed text that the eye cannot follow. The card
       has a 1px border, a 3px gold rule and a tinted inner panel, all
       of which are hard edges moving against white, so the identical
       scale is plainly legible on the box and invisible on the copy.

       Transform on a card in normal flow does NOT move its neighbours,
       so the 12 cards below hold still while this one grows.

       Known cosmetic side effect, accepted: scaling the card takes the
       3px gold rule to 2.7px and the 1px border to 0.9px for the
       duration. That is a sub-pixel transient over .7s, not a layout
       artefact, and it is the price of the only version that reads. */
    .card.edta-announce {
        animation: edta-grow .70s cubic-bezier(.34, .68, .24, 1) both;
    }

    /* Contents cascade by OPACITY ONLY. They deliberately carry no
       transform: a transform here would multiply against the card's
       (.90 x .90 = .81) and overshoot into a pop. */
    .edta-announce .edta-announce-title,
    .edta-announce .edta-announce-lead,
    .edta-announce .edta-announce-item {
        animation: edta-fade .45s ease-out both;
    }
    /* Stagger. Chained sibling combinators, NOT :nth-of-type().
       Nimble renders the label body into `div.card-detail` wrapped in an
       empty <p> on each side, so the six paragraphs in the live DOM are
       (1) empty, (2) title, (3) lead, (4) item, (5) item, (6) empty.
       The nth-of-type(3)/(4) this used to carry therefore matched the
       LEAD and the FIRST item: the second item matched nothing, fell
       back to the shorthand's 0s, and animated BEFORE the title. Read
       off the live page as delay .4s on item one and 0s on item two.

       Counting by class instead is immune to the wrapper paragraphs,
       and to any further empty ones Nimble may add. A third item would
       degrade to .50s rather than silently jumping the queue. */
    .edta-announce .edta-announce-title { animation-delay: .16s; }
    .edta-announce .edta-announce-lead  { animation-delay: .26s; }
    .edta-announce .edta-announce-item  { animation-delay: .36s; }
    .edta-announce .edta-announce-item + .edta-announce-item { animation-delay: .44s; }
    .edta-announce .edta-announce-item + .edta-announce-item + .edta-announce-item { animation-delay: .52s; }
}

/* ---------------------------------------------------------------------
   DO NOT let a comment lapse anywhere between the @media block above and
   the @keyframes rule below. From 2026-08-14 until 2026-08-15 the comment
   that used to sit here was missing its opening delimiter (the slash-star
   was simply absent, while the closing star-slash was present), so seven
   lines of prose stood as raw CSS immediately before the @keyframes rule.
   The parser read that prose as a selector prelude and then swallowed the
   ENTIRE keyframes rule as that invalid rule's block, so `edta-rise` was
   never registered and the animation never ran in any browser.

   Guard against a repeat, and note the OBVIOUS version of this check is
   wrong: comparing the raw count of openings to the count of closings
   reports an imbalance on this healthy file, because SECTION 14B's
   comment contains the literal path glob /ChapterPortal/* as prose. The
   check that actually holds is to scan left to right pairing each
   opening with the NEXT closing, then assert two things: no opening is
   left unterminated, and no closing is left unpaired. The 2026-08-14
   breakage produced exactly one unpaired closing.

   The runtime half of the guard, which is the one that would have
   caught this on day one: the CSSOM must list EVERY keyframe name this
   section declares among its CSSKeyframesRule names. As of 2026-08-15
   those are `edta-grow` and `edta-fade`; the historical references to
   `edta-rise` below describe the animation as it was named when the
   bug landed, and that name no longer exists. Check the current names,
   not these. Never settle for the computed `animation-name`, which
   reads correct in both the broken and the working state.

   It presented as a nightmare to diagnose because every cheap check
   passes in that state: the stylesheet SERVES the keyframes text, so
   reading the resource looks fine, and `animation-name` still COMPUTES
   to `edta-rise` because a name resolves to a string whether or not any
   keyframes rule answers to it. The honest check is to enumerate
   `CSSKeyframesRule` names out of `document.styleSheets`, or to note
   that `getAnimations()` returns `[]` on an element whose computed
   `animation-name` is set. Both were observed and both are conclusive.

   Because the animation had never actually run, every "measured" figure
   in the tuning notes that used to live here described nothing, so the
   values below were re-derived from scratch against real motion.
   ---------------------------------------------------------------------

   Opacity and transform are DECOUPLED on purpose, and the split point
   is the single biggest lever on whether this reads. Motion spent below
   full opacity is largely wasted, so opacity finishes at 22% (158ms of
   the 720ms) and the remaining 78% of the transform is watched at full
   strength. The easing matters just as much: a steeply front-loaded
   curve spends its travel early, under the fade, however large the
   translate is.

   Tuned by measuring the travel that survives to opacity 1, sweeping
   both levers. Comparative sweep, per element at a 585px width:

     opacity lands / easing            rise@op1   widthgrowth@op1
     30% / cubic-bezier(.2,.7,.3,1)      6.7px          14.3px
     18% / cubic-bezier(.2,.7,.3,1)     11.3px          24.0px
     20% / cubic-bezier(.33,.45,.25,1)  14.9px          31.6px
     22% / cubic-bezier(.38,.40,.25,1)  15.2px          32.4px  <= chosen
     12% / cubic-bezier(.4,.35,.25,1)   19.1px          40.7px

   The bottom row moves more but lands opacity in 86ms, which stops
   reading as a fade at all and turns the effect into a plain slide.
   22% keeps a perceptible fade AND most of the travel.

   Confirmed against the LIVE Personal Snapshot page, seeking the real
   Animation object frame by frame. At the 527.6px the paragraphs
   actually render there: 22px total rise and 42.2px total width
   growth, of which 15.0px and 28.7px happen at opacity 1, with
   opacity reaching 1 at 330ms on the lead (180ms delay + 150ms fade).
   Rise is width-independent; the width growth scales with the element,
   so expect a different figure at a different viewport.

   22px and scale(.92) are deliberately larger than the 8px / scale(.95)
   first tried, which was reported as too subtle twice. Note the scale
   is on the card's CHILDREN, never on `.card` itself: scaling the card
   would thin the 3px gold rule and the 1px border, both visible. */
@keyframes edta-grow {
    0%   { opacity: .35; transform: translateY(26px) scale(.90); }
    30%  { opacity: 1; }
    100% { opacity: 1; transform: none; }
}

@keyframes edta-fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}


/* =====================================================================
   SECTION 14D - PAGE HEADER ENTRANCE

   SITE-WIDE AND UNSCOPEABLE. Read this before changing it.

   Unlike SECTION 14C, this CANNOT be limited to one page. The header
   is emitted by the managed {!HeaderComponent}, so there is no
   NC__CSSClass__c hook the way there is on a card, and the page
   carries no page-identifying class or id anywhere in the ancestor
   chain: body is `ext-webkit ext-chrome ext-mac` (browser sniffing),
   above the h1 is only `.page-header.page-header-anchor.m-page-header`
   then `.l-canvas` then body. Nothing names the page.

   So this animates EVERY page title on BOTH sites: "Personal Snapshot",
   "Welcome" on the login screen, "Checkout" on the payment page,
   and every Chapter Portal page too. It is written to be tasteful at
   that blast radius rather than eye-catching on one page. Anything
   showy here would be showy on the checkout screen.

   A SHAKE WAS REQUESTED AND DELIBERATELY NOT BUILT. Two reasons, both
   worth preserving so it does not get re-proposed. Oscillation is the
   established UI signal for rejection (the invalid-password gesture),
   so a shaking title on a normal page load reads as an error on a
   system of record for memberships and payments. And per the paragraph
   above it could not have been confined to one page anyway, so it
   would have shaken the login and checkout headings as well.

   Scale is safe on this element in a way it was NOT on the announcement
   body copy: an h1 is a short high-contrast string, so its edges are
   trackable. See 14C for why the same treatment was imperceptible on a
   573px paragraph.
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .page-header.page-header-anchor h1 {
        animation: edta-title-in .55s cubic-bezier(.34, .68, .24, 1) both;
        /* Grows from the left so the title never drifts out of line with
           the content below it, same reasoning as the card. */
        transform-origin: left center;
    }
}

@keyframes edta-title-in {
    0%   { opacity: 0; transform: translateY(10px) scale(.96); }
    40%  { opacity: 1; }
    100% { opacity: 1; transform: none; }
}


/* =====================================================================
   SECTION 14E - NC__Login HERO FULL-BLEED EXEMPTION

   Numbered 14E so SECTION 15 stays last. Same reason as 14B and 14C.

   SECTION 5 sets `overflow: hidden` on `.card` so children clip to the
   10px radius. The NC__Login hero block breaks OUT of its card using
   `width: 100vw` plus negative side margins, and the form is pulled back
   over it by `margin-bottom: -120px`. That markup is inline style in the
   page itself, not here. The clip cancelled the breakout: the image
   stayed laid out at 1382px on a 1440px viewport but PAINTED at only the
   card's 698px, roughly half its intended width.

   Verified on prod 2026-08-18 with `document.elementFromPoint` sampled
   inside the image box and outside the card: DIV while clipped, IMG once
   exempt, DIV again when the rule is removed. Note
   `getBoundingClientRect` cannot see this: it reports 1382px in BOTH
   states, because the clip is paint-time, not layout-time.

   Scoped with :has() to the one card that actually contains a full-bleed
   child, so every other card keeps its corner clipping. Matches 1 of the
   3 cards on NC__Login. Specificity (0,3,1) beats SECTION 5's `.card`
   at (0,1,0), so no !important is needed.
   ===================================================================== */

.card:has(> .card-detail > div[style*="100vw"]) {
    overflow: visible;
    /* [THEME] sets .card{margin-top:-30px !important}, which pulled the
       card's white top edge 10px ABOVE the header's 3px gold inset
       box-shadow, so the card interrupted the gold rule. -15px puts the
       top 5px BELOW the gold band, which is where the pre-redesign
       stylesheet left it. Needs !important to beat the theme block, and
       (0,3,1) to outrank its `.card` at (0,1,0): important alone loses.
       NOTE this contradicts the note in the wiki claiming the theme
       block carries no !important of its own. It does, at least here. */
    margin-top: -15px !important;
}

/* The remaining gap between the card's top and the image was 19px of
   inherited spacing, not design: 4px of .card-detail padding plus an
   EMPTY <p> that Nimble injects ahead of a label body, whose 15px
   margin-bottom collapses with the hero wrapper's inline 8px margin-top.
   Zeroing all three seats the image flush against the card's top edge,
   matching the pre-redesign render, which measured 0. The wrapper's
   margin is inline, so only !important reaches it. */
.card:has(> .card-detail > div[style*="100vw"]) > .card-detail {
    padding-top: 0;
}

.card:has(> .card-detail > div[style*="100vw"]) > .card-detail > p:first-child {
    margin: 0;
}

.card:has(> .card-detail > div[style*="100vw"]) > .card-detail > div[style*="100vw"] {
    margin-top: 0 !important;
}


/* =====================================================================
   SECTION 15 - TEXT ON FILLED SURFACES

   MUST STAY LAST IN THE FILE. Several rules here need to beat other
   rules in THIS stylesheet that carry equal specificity, so they win on
   document order, not weight. Moving this block up silently reintroduces
   invisible text.

   The problem: the blanket `a { color: sky !important }` in Section 4
   paints EVERY anchor, including anchors that Section 6 gives a sky or
   navy FILL. Where both apply, the text colour equals its own
   background and the label becomes literally invisible - measured at
   1.00:1, not merely low contrast.

   `a.m-toggle-active` and the active pagination link are the certain
   cases: this stylesheet writes both the fill and the text colour for
   them. The `a.btn-*` variants are defensive - Nimble's own stylesheets
   never emit an anchor carrying a btn class, but NC.SubmitButton
   produces PageRef links and Bootstrap convention is to style them as
   buttons, so the guard costs nothing and removes a whole failure mode.

   ADDED 2026-08-14 with the gold buttons:

   - `a.btn-secondary` / `a.btn-default`. These used to be outline
     buttons whose text was SUPPOSED to be sky, so they were correctly
     absent from this list. Now they carry a gold fill, and they sit in
     the NAVY rule below rather than the white one - gold is the only
     filled surface in this stylesheet that takes dark text.

   `a.list-group-item.active` was briefly added here too, and REMOVED
   after measuring. Worth recording because the reasoning was seductive:
   Section 6 gives that selector a sky fill and Section 4 paints
   .list-group anchors body-grey, which computes to 1.90:1 ON PAPER. It
   is not what renders. Section 9 restyles the same selector at the same
   specificity from further down the file - pale tint, navy text - so it
   wins, and the real contrast is fine. Adding white here put white on
   #F4F8FC at 1.07:1 and made the selected nav row invisible. Caught by
   reading computed styles on the live page, not by reading the file.
   The lesson is the file's own: three rules in this stylesheet target
   that selector, so source order decides, and only the browser knows.

   Note the `a.btn-*` guards are now belt-and-braces rather than load
   bearing, because the Section 6 gold rule sets `color` itself at
   (0,1,0), which already beats the blanket `a` at (0,0,1). They stay
   because that is one Section 6 edit away from being untrue again.
   ===================================================================== */

/* GOLD-FILLED surfaces take navy, matching Section 6. Split out from the
   white rule below on 2026-08-14 when buttons went gold: white on gold
   is 1.51:1, navy is 9.77:1. Anchors have to be restated here because
   `a.btn-primary` (0,1,1) outweighs Section 6's `.btn-primary` (0,1,0),
   so without this the blanket `a` chain would still reach them. */
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-secondary,
a.btn-secondary:link,
a.btn-secondary:visited,
a.btn-secondary:hover,
a.btn-secondary:focus,
a.btn-default,
a.btn-default:link,
a.btn-default:visited,
a.btn-default:hover,
a.btn-default:focus,
.btn-group > a.m-btn-selected,
.btn-group > a.m-btn-selected:hover,
.btn-group > a.m-btn-selected:focus {
    color: #012169 !important;
    color: var(--edta-ink) !important;
}

/* SKY-filled and semantic-filled surfaces keep white. m-toggle-active
   and the active page number are still sky (Sections 6 and 6), and
   danger/success/info/warning keep Bootstrap's own fills. */
a.m-toggle-active,
a.m-toggle-active:link,
a.m-toggle-active:visited,
a.m-toggle-active:hover,
a.m-toggle-active:focus,
.m-paging-nav .pagination > .active > a,
.m-paging-nav .pagination > .active > a:link,
.m-paging-nav .pagination > .active > a:visited,
.m-paging-nav .pagination > .active > a:hover,
.m-paging-nav .pagination > .active > a:focus,
.m-paging-nav .pagination > .active > span,
a.btn-danger, a.btn-success, a.btn-info, a.btn-warning,
a.badge {
    color: #FFFFFF !important;
}

/* The off-canvas panel ground is BoldCore's teal #00B0B9, against which
   white measures 2.65:1. Section 11 restated the white text without
   repainting the ground it sits on. Navy matches the drawer items and
   the footer, and takes white to 14.76:1. */
.l-off-canvas,
.l-off-canvas .m-off-canvas-nav {
    background-color: #012169 !important;
    background-color: var(--edta-ink) !important;
}

/* BoldCore fills the selected row of a multi-select list group with a
   dark #5B6770. The Section 4 sidebar exemption set anchors inside any
   .list-group to body-text grey, which lands that grey on the dark
   fill at 1.73:1. Selected rows take white instead. */
.m-list-group-select .list-group-item.active,
.m-list-group-select .list-group-item.active a,
.m-list-group-select .list-group-item.active a.m-checkbox,
.m-list-group-select div.list-group-item.active a.m-checkbox {
    color: #FFFFFF !important;
}

/* ...but white is only correct for ONE of the two row forms this list
   group ships, and the checkout payment list uses the other one.

   BoldCore supports both `div.list-group-item` (label inside a nested
   `a.m-checkbox`) and `a.list-group-item` (the anchor IS the row).
   Their grounds diverge under this stylesheet:

     div form     nothing here overrides BoldCore, so the ground stays
                  its dark #5B6770 and white is right. Measured 5.80:1.
     anchor form  Section 9's `a.list-group-item.active` sets
                  `background-color: var(--edta-surface) !important` at
                  (0,2,1), and an important declaration beats BoldCore's
                  unweighted (0,3,1), so the ground is PALE #F4F8FC.
                  White on it is 1.07:1, i.e. invisible.

   The rule above is (0,3,0) and outranks Section 9's navy at (0,2,1),
   so on the anchor form white wins and the selected row disappears.
   That is the 2026-08-18 checkout report: on the member checkout page
   every Payment Type option is an `a.list-group-item`, so whichever
   option the member selects renders white on pale, label and radio
   glyph together. The selected card in My Payment Methods is the same
   element and was equally invisible.

   Two notes for whoever reads this next. It presents as affecting only
   SOME options, which is an artefact: Section 9 also carries `:hover`
   and `:focus` at (0,3,1), which DO outrank the white rule, so the row
   is legible navy while the pointer rests on it and vanishes when the
   pointer leaves. The option a tester has just clicked therefore looks
   correct while its siblings look broken, and nothing about the markup
   differs between them. And this is the same trap already recorded a
   few paragraphs up, where `a.list-group-item.active` was added to the
   white list and removed again after measuring 1.07:1 on #F4F8FC. That
   removal was incomplete: this selector reaches the identical elements
   whenever they sit inside a `.m-list-group-select`, and at higher
   specificity.

   Restated at (0,3,1) so it beats the white rule on specificity rather
   than on source order, and scoped to `a.list-group-item` so the div
   form keeps its white untouched. Deliberately ADDITIVE: the rule above
   is left byte-identical and is simply outranked on the anchor form.
   Measured after: 13.83:1 for both label and glyph, in all three
   selected states. */
.m-list-group-select a.list-group-item.active,
.m-list-group-select a.list-group-item.active:link,
.m-list-group-select a.list-group-item.active:visited,
.m-list-group-select a.list-group-item.active:hover,
.m-list-group-select a.list-group-item.active:focus {
    color: #012169 !important;
    color: var(--edta-ink) !important;
}

/* Bootstrap's open/active navbar states use a mid-blue #2481BB fill.
   Navy on it is 3.47:1 and the open state is 1.24:1. */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .m-toggle-button.s-active,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #FFFFFF !important;
    color: #012169 !important;
    color: var(--edta-ink) !important;
}
