/* ============================================================
   Cosmic site skin — the DARK version of the site
   ------------------------------------------------------------
   Enqueued only while the dark site is switched on (axl_cosmic_site() in
   functions.php); the light site is simply this stylesheet not loading, with
   no rule in theme.css to undo. So EVERY dark-site style belongs in here —
   never edit theme.css to make the dark version work, or the light version
   inherits it and the switch stops being clean.

   The gradient ground and particle field themselves come from cosmic.css,
   which stays loaded in both modes because it is scoped under .axl-cosmic and
   is what powers the per-section "Cosmic" background too. What is here is only
   what changes when the whole site goes dark: the chrome was drawn for light
   paper (.axl-nav, .menu-panel and .foot are all opaque #fff in theme.css) and
   would otherwise cover the backdrop up.
   ============================================================ */

body.axl-cosmic {
  min-height: 100vh;
  /* Viewport-locked, so a long page keeps ONE ground instead of stretching the
     four gradient stops over several screens of scroll. */
  background-attachment: fixed;
}

/* Header, mobile panel and footer become glass so the ground reads through. */
body.axl-cosmic .axl-nav,
body.axl-cosmic .menu-panel,
body.axl-cosmic .foot {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

/* Chrome ink. Scoped to the chrome rather than set as tokens on <body>, so it
   cannot leak into page content that is still drawn on light paper. */
body.axl-cosmic .navmenu a,
body.axl-cosmic .navmenu span,
body.axl-cosmic .menu-panel a,
body.axl-cosmic .fcol .up,
body.axl-cosmic .ftag {
  color: #F4F3FA;
}

body.axl-cosmic .menu-panel a {
  border-bottom-color: rgba(255, 255, 255, .12);
}

/* Menu hover/selected accent (theme.css) in the dark palette's link cyan, with
   a faint glow under the bar so the selected item reads on glass. Declared
   after the chrome ink above, which these out-rank for the states they cover. */
body.axl-cosmic .axl-header {
  --axl-nav-accent: #64E8FF;
  --axl-nav-tint: rgba(100, 232, 255, .08);
}

body.axl-cosmic .navmenu-list > li > a:hover,
body.axl-cosmic .navmenu-list > li > a:focus-visible,
body.axl-cosmic .navmenu-list > li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_item, .current_page_parent) > a,
body.axl-cosmic .menu-panel a:hover,
body.axl-cosmic .menu-panel li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_item, .current_page_parent) > a {
  color: #64E8FF;
}

body.axl-cosmic .navmenu-list > li > a::after {
  box-shadow: 0 0 10px rgba(100, 232, 255, .6);
}

/* Footer dividers — dimmer than the base --axl-line remap (rgba(255,255,255,
   .12), used by other components too, so it's not touched globally) for a
   subtler line against the gradient. */
body.axl-cosmic .fcol,
body.axl-cosmic .fbar,
body.axl-cosmic .fcol.fcol--contact {
  border-color: rgba(255, 255, 255, .08);
}

/* Static footer copy — tagline, copyright, "Made with..." — explicit against
   the actual gradient stops (#0B0E2D / #1A1F5E / #2D1B69) rather than left to
   --axl-muted's inherited value, same as every other block in this file. */
body.axl-cosmic .fcopy,
body.axl-cosmic .fmade {
  color: #A8B4FF;
}

/* "Have a question?" card: glass, a step brighter than the glass footer it sits in
   (same pane as the countdown tiles). Declared after the divider rule above so its
   border wins. The white badge knockout becomes a small glass disc too, and the
   mail icon's brand blue (an SVG attribute) is lifted to link cyan. */
body.axl-cosmic .fcol.fcol--contact {
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 28px -18px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.axl-cosmic .fcol--contact .f-badge {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

body.axl-cosmic .fcol--contact .f-badge [stroke] {
  stroke: #64E8FF;
}

body.axl-cosmic .fcol--contact .f-badge [fill]:not([fill="none"]) {
  fill: #64E8FF;
}

body.axl-cosmic .f-contact-text {
  color: #E4E2F2;
}

/* Cards given a background colour in the editor become TINTED glass. The colour
   arrives as --axl-tint (added at render by functions.php — a palette var or the
   custom value), so it can be made translucent here; a raw inline background-color
   could not. !important is needed to beat core's own !important preset-colour class
   and the inline style. Gradient backgrounds carry no --axl-tint and are untouched. */
/* Gradient backgrounds: a gradient's stops can't be faded from CSS, so the card
   itself becomes clear glass and the gradient (--axl-glass-gradient, also from
   functions.php) is painted on a ::before layer at reduced opacity behind the
   content. isolation keeps that z-index:-1 layer inside the card. */
body.axl-cosmic .card.has-background[style*="--axl-glass-gradient"] {
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 28px -18px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.axl-cosmic .card.has-background[style*="--axl-glass-gradient"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--axl-glass-gradient);
  opacity: .35;
  pointer-events: none;
}

/* Glass effect switched off on a gradient card (functions.php adds the class and
   leaves out --axl-glass-gradient): the gradient shows at full strength, so the
   frosted blur and glass rim go. */
body.axl-cosmic .card.axl-glass-off {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}

body.axl-cosmic .card.has-background[style*="--axl-tint"] {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--axl-tint) 40%, transparent),
    color-mix(in srgb, var(--axl-tint) 18%, transparent)
  ) !important;
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 28px -18px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Footer links get their own colour so they stand out from the static copy
   above (brand blue itself is unreadable on the gradient) — the same link
   cyan / hover violet pair cosmic.css already sets as --bs-link-color /
   --bs-link-hover-color for the rest of the dark site. */
body.axl-cosmic .fcol .flist a,
body.axl-cosmic .f-social__row,
body.axl-cosmic .flegal a,
body.axl-cosmic .fcredit {
  color: #64E8FF;
}

/* Connect icon discs / tiles: the brighter glass pane the contact card uses. */
body.axl-cosmic .f-social__tile {
  border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
}

body.axl-cosmic .f-social__row:hover .f-social__tile,
body.axl-cosmic .f-social__row:focus-visible .f-social__tile {
  border-color: rgba(167, 139, 250, .6);
  background: rgba(167, 139, 250, .14);
}

body.axl-cosmic .f-social__row:focus-visible .f-social__tile {
  box-shadow: 0 0 0 2px #64E8FF;
}

body.axl-cosmic .fcol .flist a:hover,
body.axl-cosmic .f-social__row:hover,
body.axl-cosmic .flegal a:hover,
body.axl-cosmic .fcredit:hover {
  color: #A78BFA;
}

/* ---- Episode / crew type on the gradient -----------------------------
   The light-paper guard is gone, so those templates now sit on the cosmic
   ground. The main group panels (.card) turn to the chrome's glass further
   down; the small light pieces — .badge, .btn, .pill, .ep2, .paper, .tile .box
   — keep their own white backgrounds and read as the approved design floating
   on the gradient.

   What did break is the type that sat DIRECTLY on the white page. episode.css
   hardcodes its ink as literals rather than tokens, so there is nothing to
   remap — each one has to be lifted to the dark palette by hand. If episode.css
   is ever refactored onto --axl-* variables, this whole block collapses into
   the token list in cosmic.css. */
body.axl-cosmic .axl-episode,
body.axl-cosmic .axl-crew {
  color: #E4E2F2;
}

body.axl-cosmic .axl-episode .h1 {
  color: #F4F3FA;
}

body.axl-cosmic .axl-episode .lede {
  color: #E4E2F2;
}

/* Breadcrumb links: the light theme's hover is dark blue, which vanishes on the
   dark ground, so they lift to off-white instead. Covers the .crumbs trail on
   episode, crew and blog pages and the Breadcrumbs block. */
body.axl-cosmic .crumbs a:hover,
body.axl-cosmic .crumbs a:focus-visible,
body.axl-cosmic .axl-breadcrumbs .breadcrumb a:hover,
body.axl-cosmic .axl-breadcrumbs .breadcrumb a:focus-visible {
  color: #F4F3FA;
}

/* Card titles in a .cardgrid (episode feed, Episode Grid, downloads) are links
   whose hover is the accent blue; on the glass card that is as unreadable as the
   breadcrumbs', so they lift to the same off-white. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .cardgrid .card .h3 a:hover,
body.axl-cosmic :is(.axl-ui, .axl-episode) .cardgrid .card .h3 a:focus-visible {
  color: #F4F3FA;
}

/* Muted greys (#6B7484 / #5A6478) → the dark theme's muted periwinkle. */
body.axl-cosmic .axl-episode .crumbs,
body.axl-cosmic .axl-episode .vidcap,
body.axl-cosmic .axl-episode .mapview,
body.axl-cosmic .axl-episode .fld,
body.axl-cosmic .axl-episode .meta span {
  color: #A8B4FF;
}

body.axl-cosmic .axl-episode .meta,
body.axl-cosmic .axl-episode .meta b {
  color: #F4F3FA;
}

/* The hero meta icons are drawn in navy (#131C3F) and vanish on the gradient;
   CSS stroke beats the SVG's presentation attribute. */
body.axl-cosmic .axl-episode .meta .ic [stroke] {
  stroke: #64E8FF;
}

/* Mission timeline rail + dots (episode.css) in the dark theme's cyan. */
body.axl-cosmic .axl-episode {
  --axl-tl-rail: rgba(168, 180, 255, .3);
  --axl-tl-dot: #64E8FF;
  --axl-tl-halo: rgba(100, 232, 255, .2);
}

/* "New Episode In" countdown units: the solid #F1F2F4 tiles become panes of glass,
   a step brighter than the glass card they sit in so they still read as tiles. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .cd div {
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -12px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Brand blue (#1245C4) is unreadable on the gradient — use the link cyan the
   rest of the dark theme already uses for the same job. */
body.axl-cosmic .axl-episode .cdhead,
body.axl-cosmic .axl-episode .tl,
body.axl-cosmic .axl-episode .vidlinks a {
  color: #64E8FF;
}

/* ---- Main groups become glass ------------------------------------------
   The section/episode panels (.card — e.g. `card card--lg` on every section's
   main group), crew's matching feature-grid panels and the "Appears in" strip
   take the SAME glass as the header and footer above, so the page reads as one
   surface system on the gradient. Everything below this block exists because
   the panels are now dark: their contents get the dark-palette ink too. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .card,
body.axl-cosmic .axl-crew .axl-feature-grid--panel .axl-feature-grid__item,
body.axl-cosmic .axl-crew-ep {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  box-shadow: none;
  color: #E4E2F2;
}

/* The few light pieces that stay light inside a glass panel keep dark ink,
   or they would inherit the panel's light colour above. */
body.axl-cosmic .axl-episode .paper,
body.axl-cosmic .axl-episode .ep2 {
  color: #1A2547;
}

/* ---- Generic AXL sections on the gradient -----------------------------
   Same job as the episode block above, for the `.axl-ui` section library.
   With the cards now glass, type wants the same light ink whether it sits on
   the ground or inside a panel, so these apply everywhere in the scope. */
body.axl-cosmic :is(.axl-ui, .axl-episode) :is(.h1, .h2, .h3),
body.axl-cosmic :is(.axl-ui, .axl-episode) .cd b {
  color: #F4F3FA;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) :is(.lede, .dotlist, .iconrow),
body.axl-cosmic :is(.axl-ui, .axl-episode) .linklist li::after {
  color: #E4E2F2;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) :is(.caption, .axl-ih__note, .fld label, .fld__label, .tile span, .tile__cat, .cd span, .stat__label),
body.axl-cosmic :is(.axl-ui, .axl-episode) button.tab:not(.off),
body.axl-cosmic :is(.axl-ui, .axl-episode) .tab:not(.off) > .wp-block-button__link {
  color: #A8B4FF;
}

/* Brand blue (#1245C4) is unreadable on the gradient — the link cyan the rest
   of the dark theme already uses for the same job. */
body.axl-cosmic :is(.axl-ui, .axl-episode) :is(.bighead, .bighead .axl-ih__icon),
body.axl-cosmic :is(.axl-ui, .axl-episode) :is(.stat__num, .cdhead),
body.axl-cosmic :is(.axl-ui, .axl-episode) .iconrow--stack .axl-ih__text,
body.axl-cosmic .axl-episode .tlrows tr > td:first-child {
  color: #64E8FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .tab.on,
body.axl-cosmic :is(.axl-ui, .axl-episode) .tab.on > .wp-block-button__link {
  color: #64E8FF;
  box-shadow: inset 0 -3px 0 #64E8FF;
}

/* Hairlines drawn for white paper (#EAEDF3 / #E3E7F0) glare on glass. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .linklist li,
body.axl-cosmic :is(.axl-ui, .axl-episode) .tabs {
  border-color: rgba(255, 255, 255, .12);
}

/* ---- Episode archive: sidebar cards + Free Resources band ---------------
   The archive's sidebar ("About the Episodes", "New Episodes", "Start Here")
   and its Free Resources band are glass cards like everything else, but their
   icons, facts and copy were drawn in navy / slate / brand blue for white. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .muted {
  color: #A8B4FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .hr {
  border-top-color: rgba(255, 255, 255, .14);
}

/* Icon tones. Declared after the cyan .bighead rule above, which these tie
   with on specificity, so the ink/muted tones win where they apply. */
body.axl-cosmic :is(.axl-ui, .axl-episode) :is(.bighead--ink, .iconrow--ink) .axl-ih__icon {
  color: #F4F3FA;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) :is(.bighead--muted, .iconrow:not(.iconrow--green)) .axl-ih__icon {
  color: #A8B4FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .iconrow--brand .axl-ih__icon {
  color: #64E8FF;
}

/* The download icon's pale #F1F2F5 panel becomes a brighter pane of the same
   glass. Both bare variants (--bare, and any band holding a .bandsplit) are
   excluded explicitly: this selector out-ranks axl-ui.css's reset for them.

   From 640px only, because that is where the panel itself exists: below it the
   band puts the icon on the title's line as a plain glyph, and this rule — which
   out-ranks everything in axl-ui.css — would otherwise paint a small pane of
   glass around it. This is the file's ONE media query for that reason; if the
   band's breakpoint moves, move this with it. */
@media (min-width: 640px) {
  body.axl-cosmic :is(.axl-ui, .axl-episode) .dlband:not(:has(.bandsplit)) .dlband__icon:not(.dlband__icon--bare) {
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  }
}

/* ---- Card ink ---------------------------------------------------------
   Inside a glass card the palette is just two colours: every heading in link
   cyan, every line of copy (muted captions and notes included) in the one
   body tint. Kept last so it wins the ties with the general rules above.
   Plain paragraphs already inherit the tint from the card's own colour, so
   only classed copy is listed — a bare `p`/`li` here would also repaint the
   white .badge, .stat__num and the green stamp on the light .paper. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .card :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .bighead, .iconrow--stack .axl-ih__text),
body.axl-cosmic .axl-crew .axl-feature-grid--panel .axl-feature-grid__title,
body.axl-cosmic .axl-crew-ep .card-title a {
  color: #64E8FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .card :is(.muted, .lede, .prose, .dotlist, .caption, .iconrow, .axl-ih__note, .tile span, .tile__cat, .stat__label, .cd span),
body.axl-cosmic .axl-crew .axl-feature-grid--panel .axl-feature-grid__text {
  color: #E4E2F2;
}

/* The bullet dot is a ::before painted navy in axl-ui.css, which vanishes on the
   glass — the list text above is already lifted, so lift the dot with it. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .card .dotlist li::before {
  background: #fff;
}

/* Mission at a Glance on glass: field labels are small headings (cyan), values are
   copy (body tint), and the status keeps its green — lifted so it reads on the
   gradient. Pattern (.fld__label / .fld__value / .iconrow--green) and legacy
   (label / div / .status) markup both covered. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .card .fld :is(.fld__label, label) {
  color: #64E8FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .card .fld,
body.axl-cosmic :is(.axl-ui, .axl-episode) .card .fld :is(.fld__value, div) {
  color: #E4E2F2;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .card .fld :is(.iconrow--green, .iconrow--green .axl-ih__icon, .status) {
  color: #4ADE80;
}

/* ---- AXL & Rusty page (axl-ui.css §11b) ----------------------------------
   The callouts, inner panels, fact-row and strip dividers were drawn as hairlines
   for white paper; on glass they take the same faint line as every other panel,
   and the panel title bar and empty-image ground become panes of glass. */
body.axl-cosmic :is(.axl-ui, .axl-episode) :is(.callout, .subpanel, .subpanel__title, .mini, .factlist .iconrow, .iconstrip > .wp-block-column) {
  border-color: rgba(255, 255, 255, .14);
}

/* A callout that is NOT inside a card — the closing note at the bottom of the
   partnership pages' hero sidebars — sits straight on the gradient, and nothing
   has given it the dark palette's ink: every other callout inherits #E4E2F2 from
   the glass card around it, and the `.card` rule above is the only thing lifting
   copy off axl-ui.css's `:is(.axl-ui, .axl-episode) { color: #1A2547 }`. So its
   paragraphs stayed navy and disappeared into the ground. Same tint as copy inside
   a card, so a standalone note and a nested one read alike.

   Harmless on the nested ones: it sets the colour they already inherit. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .callout {
  color: #E4E2F2;
}

/* World Rules (section-world-rules.php): the bold half of each rule and the tile
   captions take the headline white, so they stand out of the body tint. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .worldrules :is(.callout strong, .worldrules__law) {
  color: #F4F3FA;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) :is(.subpanel__title, .ph img[src$="placeholder.svg"], .worldrules .cover img[src$="placeholder.svg"]) {
  background: rgba(255, 255, 255, .06);
}

/* Back to top: the same brighter pane as the "Have a question?" card and the
   countdown tiles, so the disc reads as a piece of the site's glass rather
   than a floating widget. theme.css's blue-tinted frost is the light site's
   version of this and is fully replaced here. The arrow takes chrome ink and
   lifts to link cyan on hover, matching the nav. */
body.axl-cosmic .to-top {
  border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  color: #F4F3FA;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 28px -18px rgba(0, 0, 0, .6);
}

body.axl-cosmic .to-top:hover,
body.axl-cosmic .to-top:focus-visible {
  border-color: rgba(255, 255, 255, .3);
  color: #64E8FF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 16px 32px -16px rgba(0, 0, 0, .7);
}

body.axl-cosmic .to-top:focus-visible {
  outline-color: #64E8FF;
}

/* ---- Downloads page (axl-ui.css §11c) ---------------------------------------
   The filter selects were drawn on white; on glass they become a brighter pane
   with chrome ink and a cyan chevron. The label joins the card's muted copy.

   The guideline columns' green / red icons move to the lighter tints the dark
   palette uses for status (#4ADE80 is .iconrow--green's). The selectors repeat
   `.iconrow:not(.iconrow--green)` to match the weight of the muted-icon rule
   above, which would otherwise repaint the list icons periwinkle.

   The popup sits outside the page, straight on <body>, so it is given the
   cosmic ground itself and its card turns to glass on that, exactly as a card
   on the page does. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlfilter__label {
  color: #A8B4FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlfilter__select {
  border-color: rgba(255, 255, 255, .22);
  background-color: rgba(255, 255, 255, .08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%2364E8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color: #F4F3FA;
}

/* The open list is drawn by the platform on its own white ground. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlfilter__select option {
  color: #151D40;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlfilter__select:focus-visible {
  outline-color: #64E8FF;
}

/* ---- Downloads blocks (axl-ui.css §11e) --------------------------------------
   The plugin's tiles, cards and filter form on glass: the artwork placeholder
   and the tile's icon box take the pane tint, file links and the episode link
   go cyan like every other link on the dark site, sizes join the muted copy. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .card .cover .dlcard__placeholder {
  background: rgba(255, 255, 255, .14);
  border-bottom-color: rgba(255, 255, 255, .18);
  color: #F4F3FA;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlcard__placeholder svg {
  opacity: .8;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .tile.dl .box {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .tile__files a,
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlcard__episode {
  color: #64E8FF;
}

/* A tile title is a label, not a card heading: it stays in the body colour
   rather than taking the cyan the card heading rule above gives headings. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .card .tile .tile__title {
  color: #F4F3FA;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-download__size,
body.axl-cosmic :is(.axl-ui, .axl-episode) .tile__excerpt {
  color: #A8B4FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) a.axl-download__file:focus-visible,
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlfilters__count:focus-visible {
  outline-color: #64E8FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlgrid__empty {
  border-color: rgba(255, 255, 255, .16);
}

/* ---- Downloads page: level chooser and episode groups (axl-ui.css §11f) ----
   Level cards and "coming soon" tiles go to glass; each level keeps its own
   colour for the icon disc, the active ring and the check. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlevels__title,
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlgroup__title,
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlmore__link--static {
  color: #F4F3FA;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlevel {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: #F4F3FA;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlevel__icon {
  background: color-mix(in srgb, var(--dlevel-color) 22%, transparent);
  color: color-mix(in srgb, var(--dlevel-color) 55%, #fff);
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlevel__desc,
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlsoon,
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlmore__text {
  color: #A8B4FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlevel:hover {
  border-color: rgba(255, 255, 255, .32);
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlevel.is-active {
  background: color-mix(in srgb, var(--dlevel-color) 18%, transparent);
  border-color: color-mix(in srgb, var(--dlevel-color) 70%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dlevel-color) 70%, #fff);
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlevel:focus-visible {
  box-shadow: 0 0 0 2px #151D40, 0 0 0 4px #64E8FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlevels__all a,
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlmore__link,
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlmore__newer {
  color: #64E8FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlgroup__tabs .tab.on {
  color: #64E8FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlpack__intro,
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlpack__how {
  color: #F4F3FA;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlpack__intro--levels {
  color: #A8B4FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlpack__foot {
  background: rgba(255, 255, 255, .08);
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlpack__how-icon {
  background: #64E8FF;
  color: #151D40;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlpack__free {
  color: #4ADE80;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlsoon {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .2);
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlsoon__icon,
body.axl-cosmic :is(.axl-ui, .axl-episode) .dlsoon__lock {
  color: rgba(168, 180, 255, .8);
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlmore__icon {
  background: rgba(255, 255, 255, .1);
  color: #64E8FF;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlmore__chev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%2364E8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlguide__col .checks .iconrow + .iconrow {
  border-color: rgba(255, 255, 255, .14);
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlguide__col--welcome :is(.bighead, .iconrow:not(.iconrow--green)) .axl-ih__icon {
  color: #4ADE80;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlguide__col--dont :is(.bighead, .iconrow:not(.iconrow--green)) .axl-ih__icon {
  color: #F87171;
}

body.axl-cosmic :is(.axl-ui, .axl-episode) .dlguide__cta a {
  color: #64E8FF;
}

body.axl-cosmic .axl-dialog {
  background: linear-gradient(135deg, var(--axl-cosmic-1) 0%, var(--axl-cosmic-2) 40%, var(--axl-cosmic-3) 70%, var(--axl-cosmic-1) 100%);
  color: #E4E2F2;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 80px -20px rgba(0, 0, 0, .8);
}

body.axl-cosmic .axl-dialog__close {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: #F4F3FA;
}

body.axl-cosmic .axl-dialog__close:hover {
  background: rgba(255, 255, 255, .18);
  color: #64E8FF;
}

body.axl-cosmic .axl-dialog__close:focus-visible {
  outline-color: #64E8FF;
}

/* ---- 404 page on the gradient ----------------------------------------
   Sits outside any .card, so it needs its own light ink. The disc takes a
   glass rim and a cyan glow instead of the white paper frame. */
body.axl-cosmic .axl-404__title { color: #F4F3FA; }
body.axl-cosmic .axl-404__lead  { color: #A8B4FF; }
body.axl-cosmic .axl-404 .axl-eyebrow { color: #64E8FF; }
body.axl-cosmic .axl-404__disc {
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 0 40px rgba(100, 232, 255, .25), 0 14px 32px -14px rgba(0, 0, 0, .6);
}

/* ---- Hero video embed on the gradient --------------------------------
   The hairline becomes a glass edge and the shadow deepens to read on the
   dark ground, with a faint cyan glow like the 404 disc. */
body.axl-cosmic .axl-hero__video {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 0 40px rgba(100, 232, 255, .12), 0 18px 40px -22px rgba(0, 0, 0, .7);
}

/* ---- Legal pages: "On This Page" nav + policy on the gradient ----------
   The nav and the policy sit in glass cards, whose light ink covers the body
   copy; the nav's own greys and blues need the dark palette. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .pagenav__title,
body.axl-cosmic :is(.axl-ui, .axl-episode) .pagenav__item--h3 .pagenav__link,
body.axl-cosmic :is(.axl-ui, .axl-episode) .legal__updated {
  color: #A8B4FF;
}
body.axl-cosmic :is(.axl-ui, .axl-episode) .pagenav__link { color: #E4E2F2; }
body.axl-cosmic :is(.axl-ui, .axl-episode) .pagenav__link:hover { background: rgba(255, 255, 255, .06); color: #64E8FF; }
body.axl-cosmic :is(.axl-ui, .axl-episode) .pagenav__link[aria-current="true"] {
  border-left-color: #64E8FF;
  background: rgba(100, 232, 255, .08);
  color: #64E8FF;
}
body.axl-cosmic :is(.axl-ui, .axl-episode) :is(.pagenav__link, .pagenav__title):focus-visible { outline-color: #64E8FF; }
body.axl-cosmic :is(.axl-ui, .axl-episode) .legal .legal__h { border-top-color: rgba(255, 255, 255, .1); }

/* Reading progress bar: link cyan with a soft glow, matching the nav's
   current-section highlight. */
body.axl-cosmic .axl-progress__bar {
  background: #64E8FF;
  box-shadow: 0 0 10px rgba(100, 232, 255, .6);
}

/* ---- Press releases (axl-ui.css §11d) ------------------------------------
   The single release's breadcrumb sits on the ground, not in a card; the rest
   is card copy that the general card-ink rules miss because it is classed for
   the light brand blue. */
body.axl-cosmic .axl-blog .crumbs {
  color: #A8B4FF;
}

body.axl-cosmic .axl-blog .crumbs span {
  color: #F4F3FA;
}

body.axl-cosmic .axl-blog :is(.postcard__cat, .postsingle__meta, .entry a, .postlist a:hover) {
  color: #64E8FF;
}

body.axl-cosmic .axl-blog .postlist a {
  color: #F4F3FA;
}

body.axl-cosmic .axl-blog :is(.postlist li, .postsingle__about, .entry hr) {
  border-color: rgba(255, 255, 255, .14);
}

body.axl-cosmic .axl-blog .entry blockquote {
  border-left-color: #64E8FF;
}

body.axl-cosmic .axl-blog .entry figcaption {
  color: #A8B4FF;
}

/* The pager: the number track turns to glass like the cards, the idle numbers
   and "Page 2 of 3" take the light ink, and the outline Newer button keeps its
   white (the small light pieces stay light — see the episode note above). The
   filled current page and Older button read on the gradient as they are. */
body.axl-cosmic .axl-blog .pagerbar__pages {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
}

body.axl-cosmic .axl-blog .pagerbar__num:not(.is-current),
body.axl-cosmic .axl-blog .pagerbar__count {
  color: #E4E2F2;
}

body.axl-cosmic .axl-blog a.pagerbar__num:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, .12);
  color: #64E8FF;
}

body.axl-cosmic .axl-blog .pagerbar__gap {
  color: #A8B4FF;
}

body.axl-cosmic .axl-blog .pagerbar__num.is-current {
  box-shadow: 0 0 18px rgba(100, 232, 255, .35);
}

/* ---- Forms (axl-ui.css, .axl-form) ------------------------------------------
   Only the tokens change: fields become brighter glass panes with chrome ink and
   a cyan focus ring, status colours move to the lighter tints the dark palette
   uses. color-scheme: dark makes the platform pickers (date, time, colour, the
   open select list's scrollbar) draw light-on-dark. The open <option> list stays
   on its own white ground with dark ink, as for the Downloads filter. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form {
  --f-ink: #F4F3FA;
  --f-label: #F4F3FA;
  --f-muted: #A8B4FF;
  --f-bg: rgba(255, 255, 255, .08);
  --f-bg-disabled: rgba(255, 255, 255, .04);
  --f-line: rgba(255, 255, 255, .22);
  --f-line-hover: rgba(255, 255, 255, .4);
  --f-focus: #64E8FF;
  --f-focus-ring: rgba(100, 232, 255, .22);
  --f-accent: #1245C4;
  --f-error: #FF8A9B;
  --f-ok: #4ADE80;
  --f-ok-ink: #0B1530;
  --f-track: rgba(255, 255, 255, .2);
  --f-placeholder: rgba(228, 226, 242, .5);
  --f-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%2364E8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* Ticked boxes and the filled radio keep the brand blue, but on glass the blue
   needs a light edge to read. The secondary button and file button switch to cyan. */
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form :is(input[type="checkbox"], input[type="radio"]):checked {
  border-color: #64E8FF;
}
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form input[type="radio"]:checked {
  box-shadow: inset 0 0 0 4px #1A1F5E;
}
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form__btn--secondary,
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form input[type="file"]::file-selector-button {
  color: #64E8FF;
  border-color: #64E8FF;
}
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form__btn--secondary:hover,
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form input[type="file"]::file-selector-button:hover {
  background: #64E8FF;
  color: #0B0E2D;
}
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form output {
  color: #64E8FF;
}
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form progress::-webkit-progress-value { background: #64E8FF; }
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form progress::-moz-progress-bar { background: #64E8FF; }
body.axl-cosmic :is(.axl-ui, .axl-episode) .axl-form__btn:focus-visible {
  box-shadow: 0 0 0 2px #1A1F5E, 0 0 0 4px #64E8FF;
}