/* MAGMA — chrome styles.
 *
 * The <style> blocks of site-header.dc.html and site-footer.dc.html, lifted
 * verbatim. They are the rules the chrome's markup depends on: the nav underline
 * that must sit on the label and not the control, the compact sticky band, the
 * three-step surrender of the header row before it gives up and shows the burger,
 * and the footer's own grid.
 *
 * Extracted mechanically rather than retyped. Regenerate from the reference
 * documents if the chrome changes; do not hand-edit.
 */

/* ═══ from site-header.dc.html ═══ */
/* The rule underlines the LABEL, never the whole control: a decoration on the
   flex box itself would run through the Services caret. */
[data-nav],[data-nav]:hover,[data-nav]:active,[data-nav][aria-current="true"]{text-decoration:none !important}
[data-nav] [data-label]{text-decoration:underline 2px transparent;text-underline-offset:6px;transition:color 160ms var(--ease-standard),text-decoration-color 160ms var(--ease-standard)}
[data-nav]:hover [data-label]{color:var(--magma-flame-3) !important;text-decoration-color:var(--magma-flame-3) !important}
[data-nav][aria-current="true"] [data-label],[data-nav][data-current="true"] [data-label]{color:#100C0B !important;text-decoration:underline 2px var(--magma-flame-3) !important;text-underline-offset:6px !important}
[data-panel] a:hover{background:var(--magma-bone-100);color:var(--magma-flame-3) !important}
[data-magma="drawer"] a[aria-current="true"]{color:var(--magma-flame-3) !important}

/* Sticky behaviour: the band compacts once the page has moved, the logo settles
   with it, the warm shadow lifts it off the content, and a flame hairline reports
   reading progress — flame is the system's live-signal colour. */
[data-magma="site-header"]{transition:height 260ms var(--ease-standard),box-shadow 260ms var(--ease-standard),background 260ms var(--ease-standard)}
[data-magma="site-header"][data-compact="true"]{height:68px;box-shadow:inset 0 0 0 1px var(--border-header),8px 11px 36px rgba(25,22,6,0.11)}
[data-chrome="logo"]{transform-origin:left center;transition:transform 260ms var(--ease-standard),opacity 220ms var(--ease-standard)}
[data-magma="site-header"][data-compact="true"] [data-chrome="logo"]{transform:scale(0.82)}
[data-chrome="logo"]:hover{opacity:0.88}
[data-chrome="progress"]{transition:width 90ms linear}
@media (prefers-reduced-motion:reduce){
  [data-magma="site-header"],[data-chrome="logo"],[data-chrome="progress"]{transition:none !important}
}
/* The swap to the burger is measured, not guessed: the logic marks the header
   [data-cramped] the moment the menu stops fitting between the logo and the
   actions. The 900 query is only a floor for when the script never runs. */
[data-magma="site-header"] [data-magma="utility-nav"] > *{white-space:nowrap}
/* The row gives ground in three steps before it gives up, so the full menu survives
   as far down as it possibly can:
   1 — gaps close · 2 — the LinkedIn chip goes and the buttons tighten
   3 — the secondary call (Open account) leaves the bar; it is still in the drawer. */
/* The design system's plate hover is flame-2 (#BB1E00); next to every other hover on
   the site (flame-3) it reads red. Restated for the LinkedIn chip, same as the footer. */
[data-magma="site-header"] a[data-plate="light"]:hover{box-shadow:0 0 0 1px var(--magma-flame-3) !important}
[data-magma="site-header"] a[data-plate="light"]:hover,[data-magma="site-header"] a[data-plate="light"]:hover *{color:var(--magma-flame-3) !important}
[data-magma="site-header"][data-tight="1"],
[data-magma="site-header"][data-tight="2"],
[data-magma="site-header"][data-tight="3"]{gap:14px !important}
[data-tight="1"] [data-magma="utility-nav"],
[data-tight="2"] [data-magma="utility-nav"],
[data-tight="3"] [data-magma="utility-nav"]{gap:14px !important}
[data-tight="2"] [data-magma="utility-nav"],
[data-tight="3"] [data-magma="utility-nav"]{gap:10px !important}
[data-tight="2"] [data-plate="light"],
[data-tight="3"] [data-plate="light"]{display:none !important}
[data-tight="2"] [data-magma="header-actions"],
[data-tight="3"] [data-magma="header-actions"]{gap:8px !important}
[data-tight="2"] [data-magma="header-actions"] a[class*="btn"],
[data-tight="3"] [data-magma="header-actions"] a[class*="btn"]{padding-left:14px !important;padding-right:14px !important}
[data-tight="3"] [data-magma="header-secondary"]{display:none !important}
[data-magma="site-header"][data-cramped="1"] [data-desk]{display:none !important}
/* One synchronous frame with the row laid out but invisible, so the fit can be
   re-measured while the burger is showing. Never painted. */
[data-magma="site-header"][data-measuring="1"] [data-desk]{display:flex !important;visibility:hidden !important;position:absolute !important;left:-9999px !important}
[data-magma="site-header"][data-cramped="1"] [data-burger]{display:grid !important}
@media (max-width:900px){
  [data-desk]{display:none !important}
  [data-burger]{display:grid !important}
}
@media (max-width:900px){
  [data-magma="site-header"]{height:72px !important}
  [data-magma="site-header"][data-compact="true"]{height:64px !important}
}

/* ═══ from site-footer.dc.html ═══ */
/* Badge links are plates with artwork on them, not text links: the system's bare-control
   hover paints a 10% flame wash (reads pink on white) and its footer-link hover adds an
   underline under the logo. Both are wrong here — a badge answers with its label going
   flame and a flame hairline around the plate. */
footer [data-badge-link]:hover,footer [data-badge-link]:active{background:transparent !important;box-shadow:none !important;text-decoration:none !important;color:var(--magma-flame-3) !important}
footer [data-badge-link] *{transition:color 180ms var(--ease-standard)}
footer [data-badge-link]:hover [data-badge-label]{color:var(--magma-flame-3) !important}
footer [data-badge-plate]{transition:box-shadow 180ms var(--ease-standard)}
footer [data-badge-plate]:hover{box-shadow:0 0 0 1px var(--magma-flame-3)}
footer [data-badge-plate]:focus-visible{outline:2px solid var(--magma-flame-3);outline-offset:3px}
/* The ISO 20022 plate is vector artwork drawn in currentColor, so the footer's flame
   hover repainted the whole mark. The colour is pinned inside the plate; the ring is
   the only thing that reacts, exactly like the raster badges beside it. */
footer [data-badge-plate="vector"]:hover,footer [data-badge-plate="vector"]:hover *{color:var(--magma-white) !important}
/* The design system's plate hover is flame-2 (#BB1E00) — beside every other hover on
   the site, which is flame-3 (#F95C04), it reads red. Restated so the store badges and
   the LinkedIn chip speak the same colour, with flame-2 kept for the press. */
footer .magma-pressable[data-plate="ink"]:hover{background:var(--magma-flame-3) !important}
footer .magma-pressable[data-plate="ink"]:active{background:var(--magma-flame-2) !important}
footer .magma-pressable[data-plate="light"]:hover{color:var(--magma-flame-3) !important}
footer .magma-pressable[data-plate="light"]:active{color:var(--magma-flame-2) !important}
/* Account tiles: square, hairline, icon over label. Flame on hover like the rest. */
[data-account-tile]{transition:border-color 220ms var(--ease-standard),background 220ms var(--ease-standard),transform 220ms var(--ease-standard)}
[data-account-tile]:hover{border-color:var(--magma-flame-3) !important;background:var(--magma-bone-100,#F5F3F0) !important;transform:translateY(-2px)}
[data-account-tile] [data-tile-icon],[data-account-tile] [data-tile-label]{transition:color 220ms var(--ease-standard)}
[data-account-tile]:hover [data-tile-icon],[data-account-tile]:hover [data-tile-label]{color:var(--magma-flame-3) !important}
[data-account-tile]:active{transform:translateY(1px);border-color:var(--magma-flame-2) !important}
[data-account-tile]:focus-visible{outline:2px solid var(--magma-flame-3);outline-offset:3px}
@media (prefers-reduced-motion:reduce){[data-account-tile]:hover,[data-account-tile]:active{transform:none}}