/* ══════════════════════════════════════════════════════════════════════════
   hub-chrome.css — THE ONE BACK BUTTON, EVERYWHERE ELSE.
   public/src/hubui/hub-chrome.css   (served as /src/hubui/hub-chrome.css)

   THE CLAUSE THIS FILE ANSWERS — docs/hub-ui-bar.md
     §4 "One back button. A single component, identical on every page — the
         tab-plaque form from Comp B. No page invents its own."
     §4 "Every state earns its keep": rest · hover · active · focus-visible ·
         disabled. Disabled is desaturated gold at 40% with the frame dropped
         to hairline only — never a bare `opacity:.5`.
     §1 / §4 "No sans-serif, no rounded rectangles" — applied here to the Card
         Shop entry chrome, which is the first thing a player sees after
         leaving the main menu.

   WIRING (already done in index.html, keep this order):
       <link rel="stylesheet" href="src/hubui/hub-keep.css">      ← tokens + .keep-tab
       <link rel="stylesheet" href="src/hubui/hub-tiles.css">
       <link rel="stylesheet" href="src/hubui/hub-chrome.css">    ← this file
       <link rel="stylesheet" href="src/hubui/hub-transitions.css">

   ── WHAT THIS FILE OWNS ─────────────────────────────────────────────────
     1. THE BACK CONTROL on every screen that is NOT a sub-hub. The sub-hub
        breadcrumb is two `.keep-tab` plaques and belongs to hub-keep.css §B3;
        this file drags the ~40 legacy back controls scattered through
        index.html onto that same object.
     2. THE CARD SHOP ENTRY CHROME (`.campaign-header.keep-header`) — the
        header of renderCardShop only. Title, sub-label, balance plaque, exit.
     3. The pill-level typography of the top-right HUD rail. The rail's PLAQUE
        (frame, fill, bevel) is hub-keep.css §C4; only the segments inside it
        are dressed here.

   ── WHAT THIS FILE DOES NOT OWN ─────────────────────────────────────────
     · TOKENS. Every colour, bevel, easing and shadow below comes from the
       `--keep-*` dictionary declared once in hub-keep.css. This file declares
       NONE. (The four face-gradient literals in §1 are the single exception
       and they are copied verbatim from `.keep-tab::before` — see the note
       there before changing either copy.)
     · `.hub-breadcrumb`. That capsule is GONE from the markup — renderTitle()
       now emits `<nav class="keep-tabs">` with two `.keep-tab` children. The
       old §2 of this file styled an element that no longer exists; it was
       deleted rather than left to rot.
     · The Card Shop BODY: the 3D store, the tabs, the listings, and every
       line of card/economy logic. Chrome only.

   ── WHY SO MUCH `!important` ────────────────────────────────────────────
   index.html:606-676 and index.html:679-698 declare the old rounded gold
   capsule with `!important` on nearly every line — background, border,
   border-radius, colour, padding, box-shadow, font, display. There is no way
   to replace a declaration like that from a separate sheet without
   `!important` of our own. This file is the ONLY sanctioned place for it, and
   only against those rules. hub-keep.css contains none and must stay that way.

   ── WHY THE `html body :is(…):not(#hc-never)` PREFIX ────────────────────
   `!important` vs `!important` is decided by specificity first and source
   order second — and the link tag's position relative to the inline <style>
   is not something a stylesheet can rely on. So every contested selector is
   deliberately lifted above anything index.html can say:
     html body                → +(0,0,2)
     :is(…) with an #id arg   → the whole list reads as (1,0,0)
     :not(#hc-never)          → +(1,0,0)   (#hc-never matches nothing, ever)
   Total (2,0,2), which outranks the worst offender in index.html
   (`.spellbook-hub.is-sub .hub-back-btn`, (0,3,0)) no matter the order.
   Ugly, and load-bearing. Do not "clean it up" into a bare class.

   ── WHAT THIS FILE MUST NEVER DO ────────────────────────────────────────
   REPOSITION ANYTHING. index.html:660-676 records the bug this cost us: a
   back button pinned `position:fixed; top:16px; left:16px` tore itself out of
   whatever header its screen had laid out, dropped on the viewport corner
   over the page title — and on any screen with a TRANSFORMED ancestor it
   re-rooted into that ancestor and stretched into a giant gold capsule across
   the middle of the page. `.dsx .dsx-back` still carries
   `position:absolute !important; left:40px; top:26px` for exactly that reason.
   Every control here keeps the placement its own screen gives it. We set
   `position:relative` ONLY where the element has no position of its own, so
   the frame pseudo-element has a containing block — and never an
   inset/top/left/right/bottom/float/margin that moves a control.

   🐛 AND HERE IS HOW THAT RULE WAS BROKEN ONCE, BY THIS FILE, IN A WAY THAT
      LOOKED LIKE A NO-OP. The legacy block ships
        @media (max-width:640px){ button[id^="btn-back"]…{ top:10px; left:10px } }
      a leftover from the `position:fixed` era. It was DEAD as long as the
      legacy rule two lines above it held `position:static` — offsets do
      nothing on a static box. Changing `position` to `relative` here (needed
      for the `::before` face) brought those two offsets back to life, and on
      any viewport under 640px every `btn-back-*` control slid 10px down and
      10px right of where its own header had put it. Measured, not guessed:
      computed `top=10px left=10px`, rect (28,28) instead of (20,20).
      That is why the base block below sets `inset: auto`. It moves nothing;
      it cancels an offset that only ever reached the control because WE
      changed `position`. Any future `position` change here must come with the
      same audit.
   ══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   1 · THE BACK CONTROL — the tab plaque from Comp B
   ─────────────────────────────────────────────────────────────────────────
   This is `.keep-tab` (hub-keep.css §B3), restated with `!important` for the
   legacy family. The class is now ALSO on the markup of the named controls
   (renderCardShop's `[data-cs="cs-back"]`, #btn-back-forge,
   #btn-back-forge-bottom, #btn-back-tutor, #btn-back-market, #btn-back-camp,
   #btn-back-profile, #gym-back, .dsx-back#btn-back, #cft-back, #vm-back) so
   there is genuinely ONE component rather than a lookalike. The selector list
   below is what covers the rest of the family — the backs whose markup this
   unit does not touch — and what out-shouts index.html:606-698 for all of
   them at once.

   THE LIST IS THE WHOLE MECHANISM, so it is deliberately long. Every id in it
   is a real way OUT of a real screen: the Crafting Station (opened by a tab
   inside the Card Shop this file re-cuts, so a player met a gold capsule one
   click from the new plaque), the Vendor Market, the Cosmic Tree, the roguelike
   campaign map and its two admin editors, the Bazaar's two dialogs, the dojo,
   the research bench, the Cloud error card, the Grand Slam Draft and the
   Fantasy Cup. Deliberately EXCLUDED, and they must stay excluded:
   `#btn-tutorial-back`, `#btn-back-to-decks`, `#onb-tour-back`,
   `#btn-cancel-card` — step controllers and a cancel, not a way out.

   ⚠ THE FOUR LITERALS. `#181309/#0d0a07` (rest face), `#221a0f/#120d08`
     (hover face) are copied verbatim from `.keep-tab::before` in hub-keep.css
     §B3. They are not tokens there either — they are that component's own
     surface. If one copy changes the other MUST change with it, or the sub-hub
     breadcrumb and every other back button stop being the same object, which
     is the entire clause this file answers.

   ⚠ THE FRAME IS A `::before`, NOT A BORDER. The button's own background is
     the gold gradient, cut by `clip-path: --keep-oct-10`. `::before` is the
     dark face at `inset:1px` cut by `--keep-oct-9`, so exactly 1px of gold
     survives on all EIGHT sides — a `border` + `clip-path` loses the edge on
     the four diagonals and the control stops looking cut. (That trap is not
     hypothetical: the Card Shop's balance plaque in §2 shipped as `border` +
     `clip-path` for a round and rendered as four detached hairlines with a
     visible gap at every corner. It is built the two-layer way now, like
     everything else on this page.) The face sits at `z-index:-1`, which paints
     above the parent's own background and below the parent's inline content:
     precisely the sandwich needed when there is no inner wrapper to add (this
     sheet cannot touch markup, and ~40 legacy buttons ship bare text).
     `isolation:isolate` pins that -1 inside the button; without it the pseudo
     escapes to the nearest stacking context and paints behind whatever panel
     the button sits on, i.e. vanishes.
   ═══════════════════════════════════════════════════════════════════════ */

html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never) {
  /* — geometry: NO offsets, NO float, NO margin. See the header note. — */
  position: relative;
  /* NOT a reposition — a cancellation. See the 🐛 note in the header: these
     four are the legacy `@media (max-width:640px)` offsets, dead under
     `position:static` and live the instant we made the box `relative`. Every
     screen that positions its own back button does so with `!important`
     (`.dsx .dsx-back`) or an inline style (`#pp-back`, `#fc-back`), both of
     which outrank this, so nothing that placed itself is disturbed. */
  inset: auto;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px !important;
  min-height: 0;
  /* Symmetric padding + `text-indent` to pay back the trailing letterspace,
     exactly as `.keep-tab` does — an evenly padded letterspaced label reads as
     sitting left of centre otherwise. */
  padding: 0 22px !important;
  white-space: nowrap;
  /* — strip the legacy capsule down to bare metal — */
  -webkit-appearance: none; appearance: none;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  outline: none;
  transform: none !important;
  /* — the frame: gold gradient, notched — */
  background: linear-gradient(180deg, rgba(200, 168, 105, 0.60), rgba(138, 111, 60, 0.34)) !important;
  clip-path: var(--keep-oct-10);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.62));
  /* — the keep's voice — */
  font-family: var(--keep-cinzel) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.11em !important;
  text-indent: 0.11em;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #b0996f !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8) !important;
  cursor: pointer;
  transition: filter var(--keep-fast) var(--keep-ease),
              color  var(--keep-fast) var(--keep-ease) !important;
}

/* The dark face. */
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never)::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--keep-oct-9);
  background: linear-gradient(180deg, #181309 0%, #0d0a07 100%);
  box-shadow: var(--keep-emboss), var(--keep-liner);
  transition: background var(--keep-fast) var(--keep-ease),
              box-shadow var(--keep-fast) var(--keep-ease);
  pointer-events: none;
}

/* Nothing in the legacy sheets draws a second decoration on these buttons, and
   a stray `::after` from a future rule would paint over the label. Neutralised
   once, here, rather than discovered later on one screen. */
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never)::after {
  content: none;
}

/* — HOVER. The tab lights up. It does not move and it does not scale. — */
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):hover:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  color: var(--keep-gold-hi) !important;
  transform: none !important;
  box-shadow: none !important;
}
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):hover:not(:disabled):not([disabled]):not([aria-disabled="true"])::before {
  background: linear-gradient(180deg, #221a0f 0%, #120d08 100%);
}

/* — ACTIVE. A physical press: the drop shadow collapses and the face sinks. — */
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):active:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
  filter: var(--keep-drop-lo);
  color: var(--keep-gold) !important;
  transform: none !important;
}
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):active:not(:disabled):not([disabled]):not([aria-disabled="true"])::before {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.85), var(--keep-liner);
}

/* — FOCUS-VISIBLE. The ring is INSET: an outside outline would be shaved off
     at all four notched corners by the clip-path, leaving four broken stubs. — */
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):focus-visible {
  outline: none !important;
  color: var(--keep-gold-hi) !important;
  box-shadow: none !important;
}
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):focus-visible::before {
  box-shadow: inset 0 0 0 2px var(--keep-gold-hi), var(--keep-liner);
}
/* A mouse click must not leave a ring behind. `.btn-mini:focus-visible` in the
   legacy sheet paints a 4px halo; :focus without :focus-visible must be silent. */
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* — DISABLED. §4: desaturated gold at 40% with the frame dropped to hairline
     only. The legacy `.btn-secondary:disabled{opacity:.4}` is exactly the
     "never just opacity" the bar names, so it is overridden above and the
     gold is taken out of the metal properly here. — */
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):is(:disabled, [disabled], [aria-disabled="true"], .btn-disabled) {
  cursor: not-allowed !important;
  background: rgba(138, 111, 60, 0.28) !important;
  filter: none;
  color: rgba(201, 171, 114, 0.40) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8) !important;
}
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never):is(:disabled, [disabled], [aria-disabled="true"], .btn-disabled)::before {
  background: linear-gradient(180deg, #141210 0%, #0b0a08 100%);
  box-shadow: var(--keep-liner);
}

/* The `←` most of these labels ship as literal text. It is a hair too loud at
   full body gold next to the letterspaced caps, so it is dimmed the same way
   `.keep-tab .keep-tab-arrow` is — but only where the markup wraps it. Where
   it is bare text (most screens) it simply inherits the label colour, which is
   what the comp's arrow does at rest anyway. */
html body :is(
  .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
  .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
  #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
  #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
  #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
  #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
  #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
  #cx-err-back, #gsd-back, #fc-back, #pp-back,
  [data-cs="cs-back"],
  button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
):not(#hc-never) .keep-tab-arrow {
  color: #8d7a55;
  text-indent: 0;
  margin-right: 1px;
  transition: color var(--keep-fast) var(--keep-ease);
}

/* Narrow screens: the control shrinks, it does not change species. The numbers
   match `.keep-tab`'s own 900px step in hub-keep.css §D so the breadcrumb and
   every other back button stay the same size as each other. */
@media (max-width: 900px) {
  html body :is(
    .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
    .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
    #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
    #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
    #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
    #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
    #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
    #cx-err-back, #gsd-back, #fc-back, #pp-back,
    [data-cs="cs-back"],
    button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks)
  ):not(#hc-never) {
    height: 38px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
    letter-spacing: 0.09em !important;
    text-indent: 0.09em;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   2 · THE CARD SHOP ENTRY CHROME
   ─────────────────────────────────────────────────────────────────────────
   `renderCardShop()` is reached straight off the main menu's Card Shop nav
   row, so it is the first screen a player sees after the keep. It used to
   greet them with a purple glass rounded rect, a sans-ish sub-label and a
   plain `← Menu` btn-secondary — a cliff edge two clicks from the comp.

   SCOPE. `.campaign-header` is shared with the campaign screen and Gym Core
   Wars. Only renderCardShop's copy carries the extra `keep-header` class, so
   nothing else on the app moves. Everything below the header — the tabs, the
   listings, the 3D store, all card and economy logic — is untouched.

   LAYOUT. The legacy `.campaign-header` is `grid-template-columns:1fr auto
   auto` and the Card Shop puts FOUR children in it, so the exit button was
   already wrapping onto a second row of its own. A flex row with the title
   block taking the slack seats all four on one line. That is a chrome fix,
   not a redesign: no child is added, removed, reordered or re-parented, and
   every `data-cs` hook is exactly where it was.

   ⚠ EVERY FRAME ON THIS HEADER IS THE SAME TWO-LAYER CUT — gold gradient on
     the element, dark face on a `::before` at `inset:1px` one notch smaller.
     The header, the balance plaque, the 3D toggle and the exit tab are four
     sizes of one object. Do not "simplify" any of them to `border` +
     `clip-path`: the clip shaves the border off all four diagonals and the
     frame renders as four detached hairline segments with a gap at every
     corner. That is exactly how the balance plaque shipped for a round, and
     40px away from a correctly-built tab it read as a CSS box next to a
     carved one.
   ═══════════════════════════════════════════════════════════════════════ */

html body .campaign-header.keep-header:not(#hc-never) {
  position: relative;
  isolation: isolate;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 17px 24px 21px !important;
  margin-bottom: 1.5rem;
  /* Bevelled dark stone: gold gradient frame + `::before` face, the same two
     layers as the tab. NOT a rounded rect and NOT a purple wash (§1). */
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(200, 168, 105, 0.50), rgba(138, 111, 60, 0.26)) !important;
  clip-path: var(--keep-oct-10);
  filter: var(--keep-drop);
  font-family: var(--keep-cinzel);
}
/* THE HEADER FACE IS ONE STOP DARKER THAN THE PLAQUES IT HOLDS.
   In the comp the exit tab sits on painted art, so its own face reads against
   a different material. Here it sits on another plaque, and the first cut gave
   the two nearly the same gradient (#171208→#0c0906 holding #181309→#0d0a07):
   a plaque nested in a plaque, ~1 luminance step apart, which flattened both.
   Dropping the HOST rather than lifting the guest keeps `.keep-tab`'s own
   surface byte-identical to hub-keep.css §B3 — the component must not change
   identity just because of where it is standing. */
html body .campaign-header.keep-header:not(#hc-never)::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--keep-oct-9);
  background: linear-gradient(180deg, #100c06 0%, #070503 100%);
  box-shadow: var(--keep-emboss), var(--keep-liner);
  pointer-events: none;
}
/* The title block takes the slack so the balance plaque and the exit tab sit
   hard right. `min-width:0` keeps a long sub-label from forcing an overflow. */
html body .campaign-header.keep-header:not(#hc-never) > div:first-child {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
  padding-bottom: 15px;
}
/* §1 ORNAMENT — the gold hairline with a diamond boss at ITS CENTRE, drawn
   entirely from this block's own two pseudo-elements because a stylesheet
   cannot add the three `<i>` children that `.keep-rule` (hub-keep.css §B5) is
   built from. `.keep-rule` is two gradients running INTO a centred diamond;
   the single gradient below reproduces that with a transparent gap at 50%,
   fading to nothing at both ends. Round 1 anchored the boss at the left end,
   which is not what §1 draws. */
html body .campaign-header.keep-header:not(#hc-never) > div:first-child::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--keep-gold-hi-2), #a67f3c);
  box-shadow: 0 0 12px rgba(232, 200, 119, 0.50), inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 1;
}
html body .campaign-header.keep-header:not(#hc-never) > div:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(138, 111, 60, 0.72) 26%,
    rgba(200, 168, 105, 0.85) 45%,
    transparent 45.6%,
    transparent 54.4%,
    rgba(200, 168, 105, 0.85) 55%,
    rgba(138, 111, 60, 0.72) 74%,
    transparent 100%);
  pointer-events: none;
}

/* THE TITLE — gold stamped metal (§1), not coloured text.
   ⚠ The hard dark shadow comes from `filter: drop-shadow()`, NEVER
     `text-shadow`. Chromium paints text-shadow ON TOP of a
     `background-clip:text` fill, which hollows every glyph into an outline.
     `text-shadow:none` below is therefore load-bearing, not tidying.
   ⚠ THE EMOJI IS GONE FROM THE MARKUP, not hidden here. `🛒 Card Shop` opened
     a line of stamped gold Cinzel with a multicolour glyph. A colour font is
     painted as an image, so it ignores `-webkit-text-fill-color` and survives
     the transparent fill — round 1 read that as "it still works", which is the
     wrong test: it works by being the one thing on the header made of a
     different material. §1 allows one gold family in menu chrome. The `<h2>`
     now reads `Card Shop` and the ornament below carries the decoration. */
html body .campaign-header.keep-header:not(#hc-never) .section-title {
  font-family: var(--keep-cinzel) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-indent: 0.10em;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, #fdf3d2 0%, #f2dda2 34%, #d8b25c 66%, #9a742c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 26px rgba(232, 200, 119, 0.22));
}
/* The sub-label — italic serif in muted gold-grey (§1 Type). */
html body .campaign-header.keep-header:not(#hc-never) .small-text {
  font-family: var(--keep-serif-it) !important;
  font-style: italic;
  font-size: 0.92rem !important;
  letter-spacing: 0.02em;
  color: var(--keep-gold-grey) !important;
}

/* THE BALANCE — the same plaque as the exit tab beside it, two sizes down.
   The number itself is still whatever `_csCinders()` returned; only the frame
   around it changed.

   🐛 HOW THIS SHIPPED WRONG, since the fix is invisible in a diff: it was
      `border: 1px solid var(--keep-gold-line)` PLUS `clip-path: --keep-oct-6`.
      A clip-path cuts the border with the box, so all four 6px diagonals took
      the hairline with them and the frame rendered as four disconnected
      segments — at 7x the top rule stopped ~6px short at each end, and so did
      the sides. Forty pixels from a tab whose gold survives all eight edges,
      the difference is not subtle: one is carved, the other is a CSS box.
      The element is the gold now, and `::before` at `inset:1px` is the face,
      exactly as §1 of this file and `.keep-tab` do it. */
html body .campaign-header.keep-header:not(#hc-never) .shop-balance-stack { gap: 10px; }
html body .campaign-header.keep-header:not(#hc-never) .shop-gems-pill {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--keep-oct-6);
  background: linear-gradient(180deg, rgba(200, 168, 105, 0.55), rgba(138, 111, 60, 0.30)) !important;
  box-shadow: none !important;
  filter: var(--keep-drop-lo);
  padding: 0.4rem 0.95rem !important;
  min-width: 132px;
}
html body .campaign-header.keep-header:not(#hc-never) .shop-gems-pill::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--keep-oct-5, polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px));
  background: linear-gradient(180deg, #171208 0%, #0c0906 100%);
  box-shadow: var(--keep-emboss), var(--keep-liner);
  pointer-events: none;
}
html body .campaign-header.keep-header:not(#hc-never) .shop-gems-num {
  font-family: var(--keep-cinzel) !important;
  font-size: 1.4rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--keep-gold-hi) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
}
html body .campaign-header.keep-header:not(#hc-never) .shop-gems-pill .small-text {
  font-style: normal;
  font-family: var(--keep-cinzel) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* THE 3D-STORE TOGGLE sits shoulder to shoulder with the exit tab in the same
   header. Left as a btn-secondary it would be the one rounded rectangle on the
   screen, so it is cut from the same plaque — SAME OBJECT, different label.
   Its `data-cs="cs-3d-toggle"` hook and its handler are untouched; this is
   skin only. Its inline `style="margin-right:6px"` is left alone: the flex gap
   already spaces the row and overriding an inline margin would be a
   repositioning this file has no business doing. */
html body .campaign-header.keep-header:not(#hc-never) [data-cs="cs-3d-toggle"] {
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, rgba(200, 168, 105, 0.60), rgba(138, 111, 60, 0.34)) !important;
  clip-path: var(--keep-oct-10);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.62));
  font-family: var(--keep-cinzel) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.11em !important;
  text-indent: 0.11em;
  text-transform: uppercase !important;
  color: #b0996f !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--keep-fast) var(--keep-ease),
              color  var(--keep-fast) var(--keep-ease) !important;
}
html body .campaign-header.keep-header:not(#hc-never) [data-cs="cs-3d-toggle"]::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--keep-oct-9);
  background: linear-gradient(180deg, #181309 0%, #0d0a07 100%);
  box-shadow: var(--keep-emboss), var(--keep-liner);
  transition: background var(--keep-fast) var(--keep-ease),
              box-shadow var(--keep-fast) var(--keep-ease);
  pointer-events: none;
}
html body .campaign-header.keep-header:not(#hc-never) [data-cs="cs-3d-toggle"]:hover {
  color: var(--keep-gold-hi) !important;
  transform: none !important;
  box-shadow: none !important;
}
html body .campaign-header.keep-header:not(#hc-never) [data-cs="cs-3d-toggle"]:hover::before {
  background: linear-gradient(180deg, #221a0f 0%, #120d08 100%);
}
html body .campaign-header.keep-header:not(#hc-never) [data-cs="cs-3d-toggle"]:active {
  filter: var(--keep-drop-lo);
  color: var(--keep-gold) !important;
  transform: none !important;
}
html body .campaign-header.keep-header:not(#hc-never) [data-cs="cs-3d-toggle"]:active::before {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.85), var(--keep-liner);
}
html body .campaign-header.keep-header:not(#hc-never) [data-cs="cs-3d-toggle"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  color: var(--keep-gold-hi) !important;
}
html body .campaign-header.keep-header:not(#hc-never) [data-cs="cs-3d-toggle"]:focus-visible::before {
  box-shadow: inset 0 0 0 2px var(--keep-gold-hi), var(--keep-liner);
}
html body .campaign-header.keep-header:not(#hc-never) [data-cs="cs-3d-toggle"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  html body .campaign-header.keep-header:not(#hc-never) {
    gap: 12px;
    padding: 12px 16px !important;
  }
  html body .campaign-header.keep-header:not(#hc-never) .section-title { font-size: 1.5rem !important; }
  html body .campaign-header.keep-header:not(#hc-never) [data-cs="cs-3d-toggle"] {
    height: 38px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
    letter-spacing: 0.09em !important;
  }
}

/* The Card Shop's OTHER exit — the one floating over the full-screen 3D store
   — sits on a dark canvas with no plaque behind it, so it needs its drop
   shadow deepened to stay legible against a bright shelf. Same object, same
   size, one shadow value. */
html body .cs-3d-topbar [data-cs="cs-back"]:not(#hc-never) {
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.85));
}


/* ═══════════════════════════════════════════════════════════════════════
   3 · THE TOP-RIGHT HUD RAIL — segments only
   ─────────────────────────────────────────────────────────────────────────
   The rail's PLAQUE (gold frame, dark face, bevel, drop shadow) belongs to
   hub-keep.css §C4 `html body .keep-hud .hub-currency-rail:not(#keep-none)`,
   which is deliberately specific enough to win against this file. What is
   left here is the inside of the pod: the type, the colour, and the four
   states of the segments that are actually buttons (cloud dropdown, rank →
   Colosseum, music mute, sync-error fix).

   No pill is removed, reordered or re-parented: `_hubCurrencyRailHtml()`
   still emits exactly what it emitted, `_wireHubCurrencyRail()` still finds
   every id, and every live number keeps its place in the row.
   ═══════════════════════════════════════════════════════════════════════ */

html body .hub-currency-rail:not(#hc-never) {
  gap: 0 !important;
  align-items: stretch;
}

html body .hub-currency-rail .hub-cur-pill:not(#hc-never) {
  position: relative;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 0.58rem 0.9rem !important;
  gap: 0.55rem !important;
  font-family: var(--keep-cinzel) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.06em !important;
  color: var(--keep-gold) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
  transition: color var(--keep-fast) var(--keep-ease),
              background var(--keep-fast) var(--keep-ease);
}

/* Interactive segments each earn their states — a warm wash, no geometry
   change, exactly as the tab lights up without moving. */
html body .hub-currency-rail button.hub-cur-pill:not(#hc-never) { cursor: pointer; }
html body .hub-currency-rail button.hub-cur-pill:not(#hc-never):hover {
  color: var(--keep-gold-hi) !important;
  background: linear-gradient(180deg, rgba(200, 168, 105, 0.16), rgba(200, 168, 105, 0.05)) !important;
}
html body .hub-currency-rail button.hub-cur-pill:not(#hc-never):active {
  background: rgba(0, 0, 0, 0.42) !important;
  color: var(--keep-gold) !important;
}
/* The ring is INSET: the rail's clip-path would shave an outside outline. */
html body .hub-currency-rail button.hub-cur-pill:not(#hc-never):focus-visible {
  outline: 2px solid var(--keep-gold-hi) !important;
  outline-offset: -3px !important;
  color: var(--keep-gold-hi) !important;
}
html body .hub-currency-rail button.hub-cur-pill:not(#hc-never):focus:not(:focus-visible) {
  outline: none !important;
}
html body .hub-currency-rail button.hub-cur-pill:not(#hc-never):is(:disabled, [disabled], [aria-disabled="true"]) {
  cursor: not-allowed !important;
  color: rgba(201, 171, 114, 0.40) !important;
  background: none !important;
}

/* Glyphs carry the colour; the frame never changes personality. */
html body .hub-currency-rail .hub-cur-pill .rail-glyph:not(#hc-never) {
  font-size: 1.02rem; line-height: 1; flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
}
html body .hub-currency-rail .hub-cur-pill .rail-sub:not(#hc-never) {
  color: var(--keep-gold-grey) !important;
  font-weight: 500 !important;
}
/* The XP bar reads as a hairline gauge, not a web progress bar. */
html body .hub-currency-rail .acc-pill-bar:not(#hc-never) {
  border-radius: 0 !important;
  border: 1px solid var(--keep-gold-line) !important;
  background: rgba(0, 0, 0, 0.6) !important;
  height: 5px;
}
html body .hub-currency-rail .acc-pill-bar-fill:not(#hc-never) {
  background: linear-gradient(90deg, #a67f3c 0%, var(--keep-gold-hi-2) 100%) !important;
  box-shadow: 0 0 8px rgba(232, 200, 119, 0.45) !important;
}

/* Narrow screens: the rail wraps, and a wrapped row cannot share one frame
   without the hairlines landing in nonsense places. So below 900px each
   segment becomes its own small plaque — the same bevel, just repeated. */
@media (max-width: 900px) {
  html body .hub-currency-rail:not(#hc-never) { gap: 0.4rem !important; }
  html body .hub-currency-rail .hub-cur-pill:not(#hc-never) {
    padding: 0.42rem 0.7rem !important;
    font-size: 0.82rem !important;
    border: 1px solid var(--keep-gold-line) !important;
    background: linear-gradient(180deg, #171208 0%, #0c0906 100%) !important;
    box-shadow: var(--keep-emboss), var(--keep-liner) !important;
    clip-path: var(--keep-oct-6) !important;
  }
  html body .hub-currency-rail .hub-cur-pill + .hub-cur-pill:not(#hc-never)::before { display: none; }
  html body .hub-currency-rail button.hub-cur-pill:not(#hc-never):focus-visible { outline-offset: -2px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   4 · REDUCED MOTION (§4)
   Every control above still has all five states — they just stop moving and
   stop transitioning. Colour, fill and the focus ring are untouched, so the
   states remain fully distinguishable without motion. Nothing here animates
   position in the first place, so the honest reading of "drops to a plain
   opacity change" is: drop the transitions.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html body :is(
    .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
    .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
    #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
    #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
    #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
    #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
    #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
    #cx-err-back, #gsd-back, #fc-back, #pp-back,
    [data-cs="cs-back"],
    button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks),
    .campaign-header.keep-header [data-cs="cs-3d-toggle"],
    .hub-currency-rail .hub-cur-pill
  ):not(#hc-never) {
    transition: none !important;
  }
  html body :is(
    .hub-back-btn, .wfa-back, .br-back, .cx-back-btn, .pbl-back-btn, .pledge-back-btn,
    .fgx-back, .dsx-back, .tw-wm-back, .cft-back,
    #cr-back, #vault-back, #cs-back, #hl-back, #tr-hub-back, #gym-back,
    #um-back, #tw-back, #tw-admin-back, #btn-lb-back, #btn-sp-back, #btn-sprites-back,
    #pox-back, #cft-back, #vm-back, #ct-back, #dj-leave, #dj-back,
    #rlc-map-back, #rlc-back-title, #rlc-adm-back, #rlc-ed-back,
    #bma-back, #bmt-back, #sp-admin-back, #ult-admin-back, #btn-research-back,
    #cx-err-back, #gsd-back, #fc-back, #pp-back,
    [data-cs="cs-back"],
    button[id^="btn-back"]:not(#btn-tutorial-back):not(#btn-back-to-decks),
    .campaign-header.keep-header [data-cs="cs-3d-toggle"]
  ):not(#hc-never)::before {
    transition: none !important;
  }
}