/* ── THE BUILD-VARIANT STRIP ───────────────────────────────────────────────
   MOVED OUT OF public/d4theorycraft/index.html, 7 Sep 2026, UNCHANGED. The
   comment sitting two lines above it in that file already said why this is the
   right home: *"the hub and the comparison page get the same look by loading
   one file instead of copying twenty lines"* — written when the game-words
   palette moved to entity-tips.css on 4 Sep.

   The Gear Comp page grew the same strip today, on the owner's word: *"we
   should bring over those Variant buttons in the Gear Comp page ... Same style
   as on the planner page, except no + button for adding a variant on the Gear
   Comp page."* Same style means one file, not a second copy that drifts.

   `.vtabPlus`, `.vtabAsk` and the `.vtab` pencil/✕ rules ride along because the
   PLANNER still uses all three. The comparison page renders none of them, so
   those selectors simply never match there — which is the cheap half of the
   trade and the reason the block moved whole instead of being split. */
  /* THE STRIP SAYS WHAT IT IS. The owner, 28 Aug 2026: the tabs are the BUILD
     VARIANT and are not tied to the build's title — *"The build variant should
     have the text 'Build Variant (Tower/Pit, Endgame, Bossing, etc)' above
     them"*. Their own words, and the examples in the parentheses are theirs
     too, so they are quoted rather than paraphrased. */
  .vtabLabel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
    letter-spacing:.16em;text-transform:uppercase;color:#d8a24a;margin:0 0 .45rem}
  /* THE LOADOUT TABS, "Red background, white text, white glow on border." */
  .vtab{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
    font-family:'IBM Plex Sans Condensed',system-ui,sans-serif;font-weight:700;
    font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:#fff;
    background:#7e120d;border:1px solid rgba(255,255,255,.28);border-radius:5px;
    padding:.5rem .95rem}
  .vtab:hover{background:#9c1510}
  .vtab.on{background:#b8110b;border-color:rgba(255,255,255,.9);
    box-shadow:0 0 12px rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.25)}
  .vtab .bhPencil{color:rgba(255,255,255,.55);font-size:12px;padding:0 2px}
  .vtab .bhPencil:hover{color:#fff;background:transparent}
  .vtab .vtabX{font-size:13px}
  .vtab .vtabX:hover{color:#ffb3ab}
  .vtabAsk{flex:1 1 100%;background:#1d1216;border:1px solid #7e120d;
    border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.6);padding:10px 12px;font-size:13px;
    color:#e8e0cd;max-width:24rem}
  .vtabAsk .row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
  .vtabPlus{cursor:pointer;color:#fff;background:#3a0f0c;border:1px solid rgba(255,255,255,.28);
    border-radius:5px;font:700 16px/1 'IBM Plex Sans Condensed',system-ui,sans-serif;
    padding:.5rem .7rem}
  .vtabPlus:hover{background:#7e120d;border-color:rgba(255,255,255,.6)}

/* ── AND THE HALF THE COMPARISON PAGE ADDS ─────────────────────────────────
   The planner's strip is an EDITOR: its tabs rename, delete and add. This one
   is a SWITCH over a build somebody imported, so it needs one thing the
   planner's never did — a way to say that the gear you have parked in the
   comparison rails is not going anywhere when you press a tab. The owner's
   requirement, verbatim: *"We should be able to add comparison gear, and
   seamlessly switch between the variants with that comparison gear remaining
   intact but the numbers updating/adjusting for the variant to see if it's an
   upgrade for different variants."* The note below the tabs is that sentence,
   said once, in the page's own hint voice. */
  /* `--muted` is what both pages call their hint colour; the fallback is the
     Gear Comp page's own value of it, so the file still reads correctly if it
     is ever loaded somewhere that has not defined the token. */
  .vtabNote{font:11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
    color:var(--muted,#9a9188);margin:.5rem 0 0}
  .vtabWrap{margin:14px 0 12px}
  .vtabWrap[hidden]{display:none}
  /* the tab is a real <button> here, so the planner's <span role="tab">
     defaults (a UA button's own border, background and font) have to be
     stated away rather than inherited */
  button.vtab{-webkit-appearance:none;appearance:none}