/* WoW Forever talent planner, embedded in the SkillCarry blog tool page.
   Every rule is scoped under "#sb-store #wf-planner" (two ids) and every class carries the "wfp-" prefix,
   so site rules (#sb-store h2, #sb-store :is(input,select), .btn, .grid, .hint ...) can't restyle the planner
   and planner rules can't leak into the site header, menu, search or article. Page-layout rules for the
   tool page itself are scoped under "#sb-store .tp-article" and only load on this page. */

/* ---------- page layout (tool page only) ---------- */
#sb-store .tp-article { max-width: 1280px; }
#sb-store .tp-article .tp-header { margin: 0 0 14px; max-width: none; }
#sb-store .tp-article .tp-header h1 { font-size: clamp(26px, 3vw, 40px); max-width: 32ch; margin: 0 0 10px; }
#sb-store .tp-article .tp-header .lead { font-size: 16px; line-height: 1.6; max-width: 80ch; margin: 0; }
#sb-store .tp-article .tp-stage { margin: 0 0 40px; min-width: 0; }
#sb-store .tp-article .article-reader-layout { border-top: 1px solid rgba(142, 160, 191, .14); padding-top: 34px; }
@media (max-width: 1100px) {
  #sb-store .tp-article { max-width: 1280px; }
  #sb-store .tp-article .article-reader-layout { max-width: 820px; margin: 0 auto; }
}

/* ---------- planner shell ---------- */
#sb-store #wf-planner {
  --wfp-bg: #050b18;
  --wfp-panel: #101a2e;
  --wfp-panel-2: #0b1426;
  --wfp-line: #1e2c47;
  --wfp-text: #e6edf8;
  --wfp-muted: #8ea0bf;
  --wfp-cyan: #24d7ff;
  --wfp-purple: #7c4dff;
  --wfp-orange: #ff8a00;
  --wfp-green: #22c55e;
  --wfp-red: #ff5470;
  --class: #24d7ff;
  --class-ink: var(--class);   /* class colour used as text/border; the light theme darkens it for contrast */
  --wfp-radius: 12px;
  /* surfaces and details (the light theme redefines every one of these) */
  --wfp-field: #070f20;
  --wfp-card: #0a1325;
  --wfp-card-on: #0e1a33;
  --wfp-btn-bg: #0c1730;
  --wfp-icon-bg: #1a2440;
  --wfp-talent-bg: #0a1223;
  --wfp-edge: #2a3753;
  --wfp-edge-off: #1e2840;
  --wfp-badge-bg: #050b18;
  --wfp-arrow: #3a4966;
  --wfp-rowline: rgba(142, 160, 191, .07);
  --wfp-tip-bg: #070e1d;
  --wfp-tip-line: #2f4166;
  --wfp-tip-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  --wfp-title: #fff;
  --wfp-desc: #f4d58d;
  --wfp-toast-bg: #0d1a33;
  --wfp-faint: #5c6d8c;
  --wfp-note: #b98a4e;
  --wfp-gold: #ffd08a;
  --wfp-focus: #fff;
  --wfp-locked: grayscale(1) brightness(.45);
  color-scheme: dark;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "top" "main" "promo";
  column-gap: 16px;
  color: var(--wfp-text);
  font: 15px/1.5 var(--font, "Exo 2"), system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: normal;
  text-align: left;
  min-width: 0;
}
#sb-store #wf-planner *, #sb-store #wf-planner *::before, #sb-store #wf-planner *::after { box-sizing: border-box; }
#sb-store #wf-planner :is(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
#sb-store #wf-planner :is(h2, h3, p, ul, ol, figure) { margin: 0; padding: 0; letter-spacing: normal; }
#sb-store #wf-planner img { max-width: none; }
#sb-store #wf-planner :focus-visible { outline: 2px solid var(--wfp-cyan); outline-offset: 2px; }
#sb-store #wf-planner [hidden] { display: none !important; }
#sb-store #wf-planner .wfp-head { grid-area: head; min-width: 0; }
#sb-store #wf-planner .wfp-top { grid-area: top; min-width: 0; }
#sb-store #wf-planner .wfp-main { grid-area: main; min-width: 0; }
#sb-store #wf-planner .wfp-promo-slot { grid-area: promo; min-width: 0; }
@media (min-width: 1200px) {
  /* 1200-1439px: the promo sits beside the top panels only, so the three trees keep the full width (48px talents). */
  #sb-store #wf-planner { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "head head" "top promo" "main main"; }
}
@media (min-width: 1440px) {
  /* Promo column runs beside the whole planner (class picker → trees) and follows the scroll until the planner ends. */
  #sb-store #wf-planner { grid-template-areas: "head head" "top promo" "main promo"; }
  #sb-store #wf-planner .wfp-promo-slot { align-self: stretch; }
  #sb-store #wf-planner .wfp-promo-slot .wfp-promo { position: sticky; top: calc(var(--market-header-height, 82px) + 16px); }
}

#sb-store #wf-planner .wfp-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 4px; }
#sb-store #wf-planner .wfp-beta { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--wfp-orange); border: 1px solid rgba(255, 138, 0, .5); background: rgba(255, 138, 0, .08); border-radius: 999px; padding: 3px 10px; white-space: nowrap; cursor: help; }
#sb-store #wf-planner .wfp-note { font-size: 13px; color: var(--wfp-note); line-height: 1.45; }
#sb-store #wf-planner .wfp-note--lang { color: var(--wfp-muted); }

#sb-store #wf-planner .wfp-panel { background: linear-gradient(180deg, var(--wfp-panel), var(--wfp-panel-2)); border: 1px solid var(--wfp-line); border-radius: var(--wfp-radius); padding: 14px; margin: 12px 0; }
#sb-store #wf-planner .wfp-label { margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .8px; color: var(--wfp-muted); }

/* class picker */
#sb-store #wf-planner .wfp-classes { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
#sb-store #wf-planner .wfp-cls { --c: #fff; --c-ink: var(--c); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; margin: 0; min-height: 0; border-radius: 10px; border: 1px solid var(--wfp-line); background: var(--wfp-card); box-shadow: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; }
#sb-store #wf-planner .wfp-cls img { width: 40px; height: 40px; border-radius: 8px; border: 2px solid transparent; background: var(--wfp-icon-bg); }
#sb-store #wf-planner .wfp-cls span { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#sb-store #wf-planner .wfp-cls:hover { border-color: var(--c-ink); }
#sb-store #wf-planner .wfp-cls[aria-checked="true"] { border-color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-ink), 0 0 18px -4px var(--c); background: var(--wfp-card-on); }
#sb-store #wf-planner .wfp-cls[aria-checked="true"] img { border-color: var(--c-ink); }

/* controls */
#sb-store #wf-planner .wfp-controls { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr 1.2fr; gap: 12px; }
#sb-store #wf-planner .wfp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
#sb-store #wf-planner .wfp-field label { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--wfp-muted); text-transform: uppercase; letter-spacing: .5px; margin: 0; }
#sb-store #wf-planner .wfp-field :is(input, select) { appearance: auto; background: var(--wfp-field); border: 1px solid var(--wfp-line); border-radius: 8px; padding: 8px 10px; min-height: 40px; height: auto; width: 100%; max-width: 100%; margin: 0; box-shadow: none; outline: none; font-size: 15px; line-height: 1.4; color: var(--wfp-text); }
#sb-store #wf-planner .wfp-field :is(input, select):focus { border-color: var(--wfp-cyan); outline: none; box-shadow: 0 0 0 2px rgba(36, 215, 255, .25); }
#sb-store #wf-planner .wfp-field select option { background: var(--wfp-field); color: var(--wfp-text); }

/* summary */
#sb-store #wf-planner .wfp-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
#sb-store #wf-planner .wfp-stat { display: flex; flex-direction: column; }
#sb-store #wf-planner .wfp-stat__k { font-size: 12px; color: var(--wfp-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
#sb-store #wf-planner .wfp-stat__v { font-size: 20px; font-weight: 800; line-height: 1.3; }
#sb-store #wf-planner #wfp-statPoints { color: var(--wfp-cyan); }
#sb-store #wf-planner .wfp-stat--spec .wfp-stat__v { color: var(--class-ink); }
#sb-store #wf-planner .wfp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
#sb-store #wf-planner .wfp-actions--left { margin: 0 0 12px; }

/* buttons */
#sb-store #wf-planner .wfp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--wfp-btn-bg); border: 1px solid var(--wfp-line); color: var(--wfp-text); border-radius: 8px; padding: 8px 14px; margin: 0; min-height: 40px; width: auto; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; text-transform: none; box-shadow: none; cursor: pointer; transition: border-color .15s, background .15s; }
#sb-store #wf-planner .wfp-btn::before, #sb-store #wf-planner .wfp-btn::after { content: none; }
#sb-store #wf-planner .wfp-btn:hover { border-color: var(--wfp-cyan); color: var(--wfp-text); }
#sb-store #wf-planner .wfp-btn:disabled { opacity: .45; cursor: not-allowed; }
#sb-store #wf-planner .wfp-btn--accent { background: linear-gradient(135deg, rgba(36, 215, 255, .2), rgba(124, 77, 255, .25)); border-color: rgba(36, 215, 255, .6); }
#sb-store #wf-planner .wfp-btn--small { min-height: 32px; padding: 4px 10px; font-size: 13px; }
#sb-store #wf-planner .wfp-btn--danger:hover { border-color: var(--wfp-red); color: var(--wfp-red); }
#sb-store #wf-planner .wfp-warn { flex-basis: 100%; margin: 0; color: var(--wfp-orange); font-weight: 600; font-size: 14px; }
#sb-store #wf-planner .wfp-link { color: var(--wfp-cyan); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* tabs */
#sb-store #wf-planner .wfp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wfp-line); margin-top: 18px; overflow-x: auto; }
#sb-store #wf-planner .wfp-tab { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 16px; margin: 0; min-height: 0; font-size: 15px; font-weight: 700; color: var(--wfp-muted); box-shadow: none; cursor: pointer; white-space: nowrap; }
#sb-store #wf-planner .wfp-tab[aria-selected="true"] { color: var(--wfp-text); border-bottom-color: var(--wfp-cyan); }
#sb-store #wf-planner .wfp-pane { padding: 12px 0 8px; }
#sb-store #wf-planner .wfp-hint { color: var(--wfp-muted); font-size: 13px; margin: 0 0 10px; }
/* first paint (server-rendered, see apps/blog/talent_skeleton.py): the same hint app.js picks with matchMedia */
#sb-store #wf-planner .wfp-hint--touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  #sb-store #wf-planner .wfp-hint--mouse { display: none; }
  #sb-store #wf-planner .wfp-hint--touch { display: inline; }
}

/* trees */
#sb-store #wf-planner .wfp-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#sb-store #wf-planner .wfp-tree { background: linear-gradient(180deg, var(--wfp-panel), var(--wfp-panel-2)); border: 1px solid var(--wfp-line); border-radius: var(--wfp-radius); padding: 12px; min-width: 0; }
#sb-store #wf-planner .wfp-tree__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#sb-store #wf-planner .wfp-tree__icon { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--wfp-line); flex: none; }
#sb-store #wf-planner .wfp-tree__title { flex: 1; min-width: 0; }
#sb-store #wf-planner .wfp-tree__name { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--wfp-text); }
#sb-store #wf-planner .wfp-tree__role { font-size: 12px; color: var(--wfp-muted); }
#sb-store #wf-planner .wfp-tree__pts { font-size: 20px; font-weight: 800; color: var(--wfp-cyan); min-width: 2ch; text-align: right; }
#sb-store #wf-planner .wfp-tree--main { border-color: color-mix(in srgb, var(--class-ink) 55%, var(--wfp-line)); }
#sb-store #wf-planner .wfp-tree--main .wfp-tree__pts { color: var(--class-ink); }
#sb-store #wf-planner .wfp-grid { position: relative; aspect-ratio: 4 / 7; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(7, 1fr); max-width: 320px; margin: 0 auto; }
#sb-store #wf-planner .wfp-grid svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#sb-store #wf-planner .wfp-arrow { stroke: var(--wfp-arrow); fill: var(--wfp-arrow); }
#sb-store #wf-planner .wfp-arrow line, #sb-store #wf-planner .wfp-arrow polyline { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
#sb-store #wf-planner .wfp-arrow polygon { stroke: none; }
#sb-store #wf-planner .wfp-arrow--on { stroke: var(--wfp-green); fill: var(--wfp-green); }
#sb-store #wf-planner .wfp-arrow--ready { stroke: var(--wfp-cyan); fill: var(--wfp-cyan); }
#sb-store #wf-planner .wfp-row-line { stroke: var(--wfp-rowline); stroke-width: 1; }

#sb-store #wf-planner .wfp-talent { position: relative; align-self: center; justify-self: center; width: 60%; min-height: 0; aspect-ratio: 1; padding: 0; margin: 0; border-radius: 9px; border: 2px solid var(--wfp-edge); background: var(--wfp-talent-bg); box-shadow: none; cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; transition: border-color .12s, box-shadow .12s, filter .12s; }
#sb-store #wf-planner .wfp-talent img { display: block; width: 100%; height: 100%; border-radius: 7px; pointer-events: none; }
#sb-store #wf-planner .wfp-talent .wfp-badge { position: absolute; right: -9px; bottom: -9px; min-width: 30px; padding: 0 4px; height: 19px; border-radius: 6px; background: var(--wfp-badge-bg); border: 1px solid var(--wfp-edge); font-size: 12px; font-weight: 700; line-height: 17px; color: var(--wfp-muted); text-align: center; }
#sb-store #wf-planner .wfp-talent--locked img { filter: var(--wfp-locked); }
#sb-store #wf-planner .wfp-talent--locked { border-color: var(--wfp-edge-off); }
#sb-store #wf-planner .wfp-talent--available { border-color: var(--wfp-cyan); box-shadow: 0 0 10px -3px var(--wfp-cyan); }
#sb-store #wf-planner .wfp-talent--available .wfp-badge { color: var(--wfp-cyan); border-color: rgba(36, 215, 255, .6); }
#sb-store #wf-planner .wfp-talent--partial { border-color: var(--wfp-green); box-shadow: 0 0 12px -3px var(--wfp-green); }
#sb-store #wf-planner .wfp-talent--partial .wfp-badge { color: var(--wfp-green); border-color: rgba(34, 197, 94, .6); }
#sb-store #wf-planner .wfp-talent--maxed { border-color: var(--wfp-orange); box-shadow: 0 0 14px -3px var(--wfp-orange); }
#sb-store #wf-planner .wfp-talent--maxed .wfp-badge { color: var(--wfp-orange); border-color: rgba(255, 138, 0, .7); }
#sb-store #wf-planner .wfp-talent:hover:not(.wfp-talent--locked) { filter: brightness(1.15); }
#sb-store #wf-planner .wfp-talent:focus-visible { outline: 2px solid var(--wfp-focus); outline-offset: 3px; }
#sb-store #wf-planner .wfp-tree__foot { display: flex; justify-content: flex-end; margin-top: 12px; }

/* tooltip (position: fixed; no ancestor of the planner uses transforms) */
#sb-store #wf-planner .wfp-tip { position: fixed; z-index: 1200; max-width: 340px; background: var(--wfp-tip-bg); border: 1px solid var(--wfp-tip-line); border-radius: 10px; padding: 12px 14px; box-shadow: var(--wfp-tip-shadow); font-size: 14px; line-height: 1.45; pointer-events: none; color: var(--wfp-text); }
#sb-store #wf-planner .wfp-tip--sheet { pointer-events: auto; left: 8px !important; right: 8px; bottom: 8px; top: auto !important; max-width: none; }
#sb-store #wf-planner .wfp-tip h3 { margin: 0 0 2px; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--wfp-title); }
#sb-store #wf-planner .wfp-tip__rank { color: var(--wfp-muted); font-size: 13px; margin-bottom: 6px; }
#sb-store #wf-planner .wfp-tip__req { color: var(--wfp-red); font-size: 13px; }
#sb-store #wf-planner .wfp-tip__req--ok { color: var(--wfp-muted); }
#sb-store #wf-planner .wfp-tip__label { color: var(--wfp-cyan); font-weight: 700; font-size: 13px; margin-top: 8px; }
#sb-store #wf-planner .wfp-tip p { margin: 2px 0 0; white-space: pre-line; color: var(--wfp-desc); font-size: 14px; line-height: 1.45; }
#sb-store #wf-planner .wfp-tip__hint { margin-top: 8px; color: var(--wfp-muted); font-size: 12px; white-space: normal; }
#sb-store #wf-planner .wfp-tip__btns { display: flex; gap: 8px; margin-top: 10px; }
#sb-store #wf-planner .wfp-tip__btns .wfp-btn { flex: 1; }

/* skills */
#sb-store #wf-planner .wfp-skill-opts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px; }
#sb-store #wf-planner .wfp-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; margin: 0; color: var(--wfp-text); }
#sb-store #wf-planner .wfp-check input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--wfp-cyan); }
#sb-store #wf-planner .wfp-skill-count { color: var(--wfp-cyan); font-weight: 700; margin: 0 0 8px; }
#sb-store #wf-planner .wfp-lvl { margin: 14px 0 0; }
#sb-store #wf-planner .wfp-lvl h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .6px; color: var(--wfp-muted); display: flex; align-items: center; gap: 10px; }
#sb-store #wf-planner .wfp-lvl h3::after { content: ""; flex: 1; height: 1px; background: var(--wfp-line); }
#sb-store #wf-planner .wfp-lvl--future { opacity: .45; }
#sb-store #wf-planner .wfp-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
#sb-store #wf-planner .wfp-skill { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--wfp-card); border: 1px solid var(--wfp-line); border-radius: 10px; padding: 6px 10px 6px 6px; margin: 0; min-height: 0; box-shadow: none; cursor: default; min-width: 0; }
#sb-store #wf-planner .wfp-skill:hover, #sb-store #wf-planner .wfp-skill:focus-visible { border-color: var(--wfp-cyan); }
#sb-store #wf-planner .wfp-skill img { width: 36px; height: 36px; border-radius: 7px; flex: none; background: var(--wfp-icon-bg); }
#sb-store #wf-planner .wfp-skill__txt { min-width: 0; display: flex; flex-direction: column; }
#sb-store #wf-planner .wfp-skill__name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sb-store #wf-planner .wfp-skill__meta { font-size: 12px; color: var(--wfp-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#sb-store #wf-planner .wfp-tag { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 0 6px; line-height: 17px; }
#sb-store #wf-planner .wfp-tag--new { color: var(--wfp-green); border: 1px solid rgba(34, 197, 94, .5); }
#sb-store #wf-planner .wfp-tag--chg { color: var(--wfp-orange); border: 1px solid rgba(255, 138, 0, .5); }
#sb-store #wf-planner .wfp-tag--trn { color: var(--wfp-purple); border: 1px solid rgba(124, 77, 255, .6); }
#sb-store #wf-planner .wfp-racials { margin-bottom: 8px; }

/* saved builds */
#sb-store #wf-planner .wfp-auth { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--wfp-card); border: 1px dashed rgba(36, 215, 255, .45); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
#sb-store #wf-planner .wfp-auth p { flex: 1 1 240px; color: var(--wfp-text); font-size: 14px; }
#sb-store #wf-planner .wfp-profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#sb-store #wf-planner .wfp-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--wfp-card); border: 1px solid var(--wfp-line); border-left: 4px solid var(--c-ink, var(--c, var(--wfp-cyan))); border-radius: 10px; padding: 10px 12px; margin: 0; }
#sb-store #wf-planner .wfp-profile::before { content: none; }
#sb-store #wf-planner .wfp-profile--current { box-shadow: 0 0 0 1px rgba(36, 215, 255, .35); }
#sb-store #wf-planner .wfp-profile__main { flex: 1; min-width: 180px; }
#sb-store #wf-planner .wfp-profile__name { font-weight: 800; overflow-wrap: anywhere; }
#sb-store #wf-planner .wfp-profile__name input { background: var(--wfp-field); border: 1px solid var(--wfp-cyan); border-radius: 6px; padding: 4px 8px; min-height: 34px; width: 100%; max-width: 320px; color: var(--wfp-text); }
#sb-store #wf-planner .wfp-profile__meta { font-size: 13px; color: var(--wfp-muted); }
#sb-store #wf-planner .wfp-profile__btns { display: flex; gap: 6px; flex-wrap: wrap; }
#sb-store #wf-planner .wfp-empty { color: var(--wfp-muted); list-style: none; }

/* export */
#sb-store #wf-planner .wfp-export__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#sb-store #wf-planner .wfp-export textarea { display: block; width: 100%; min-height: 96px; background: var(--wfp-field); border: 1px solid var(--wfp-line); border-radius: 8px; padding: 10px; resize: vertical; margin: 0 0 8px; color: var(--wfp-text); font-size: 14px; }

#sb-store #wf-planner .wfp-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px); max-width: calc(100vw - 32px); background: var(--wfp-toast-bg); border: 1px solid var(--wfp-cyan); color: var(--wfp-text); padding: 8px 16px; border-radius: 999px; font-weight: 700; text-align: center; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 1300; }
#sb-store #wf-planner .wfp-toast--on { opacity: 1; transform: translateX(-50%) translateY(0); }
#sb-store #wf-planner .wfp-foot { color: var(--wfp-faint); font-size: 12px; padding: 12px 0 0; }
#sb-store #wf-planner .wfp-noscript { color: var(--wfp-orange); padding: 12px 0; }

/* popular builds */
#sb-store #wf-planner .wfp-popular { border-color: rgba(255, 138, 0, .45); background: linear-gradient(180deg, rgba(255, 138, 0, .08), rgba(16, 26, 46, .95) 55%, var(--wfp-panel-2)); box-shadow: 0 0 22px -12px var(--wfp-orange); }
#sb-store #wf-planner .wfp-popular__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
#sb-store #wf-planner .wfp-popular__title { margin: 0; color: var(--wfp-gold); display: inline-flex; align-items: center; gap: 6px; }
#sb-store #wf-planner .wfp-popular__star { color: var(--wfp-orange); font-size: 16px; }
#sb-store #wf-planner .wfp-popular__filters { display: flex; flex-wrap: wrap; gap: 6px; }
#sb-store #wf-planner .wfp-chip { min-height: 32px; padding: 4px 12px; margin: 0; border-radius: 999px; border: 1px solid var(--wfp-line); background: var(--wfp-card); color: var(--wfp-muted); font-size: 13px; font-weight: 700; line-height: 1.2; box-shadow: none; cursor: pointer; }
#sb-store #wf-planner .wfp-chip:hover { border-color: var(--wfp-orange); color: var(--wfp-text); }
#sb-store #wf-planner .wfp-chip[aria-pressed="true"] { border-color: var(--wfp-orange); color: var(--wfp-gold); background: rgba(255, 138, 0, .12); }
#sb-store #wf-planner .wfp-popular__list { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
#sb-store #wf-planner .wfp-pop-item { margin: 0; padding: 0; min-width: 0; list-style: none; }
#sb-store #wf-planner .wfp-pop-item::before { content: none; }
#sb-store #wf-planner .wfp-pop { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 10px 12px; text-align: left; border-radius: 10px; border: 1px solid rgba(255, 138, 0, .35); background: var(--wfp-card); color: var(--wfp-text); box-shadow: none; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; }
#sb-store #wf-planner .wfp-pop:hover, #sb-store #wf-planner .wfp-pop:focus-visible { border-color: var(--wfp-orange); box-shadow: 0 0 16px -6px var(--wfp-orange); }
#sb-store #wf-planner .wfp-pop__top { display: flex; flex-wrap: wrap; gap: 6px; }
#sb-store #wf-planner .wfp-pop__badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #1a0d00; background: linear-gradient(135deg, #ffb347, var(--wfp-orange)); border-radius: 5px; padding: 1px 7px; line-height: 17px; }
#sb-store #wf-planner .wfp-pop__name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--class-ink); overflow-wrap: anywhere; }
#sb-store #wf-planner .wfp-pop__name img { width: 24px; height: 24px; border-radius: 6px; flex: none; }
#sb-store #wf-planner .wfp-pop__note { font-size: 12px; color: var(--wfp-muted); line-height: 1.4; }

/* ---------- promo carousel (square card) ---------- */
#sb-store #wf-planner .wfp-promo { position: relative; width: 100%; max-width: 520px; margin: 24px auto 0; aspect-ratio: 1 / 1; border-radius: var(--wfp-radius); border: 1px solid rgba(36, 215, 255, .35); background: #070e1d; overflow: hidden; box-shadow: 0 0 28px -12px var(--wfp-cyan); }
@media (min-width: 1200px) {
  #sb-store #wf-planner .wfp-promo { width: 300px; height: 300px; max-width: none; margin: 12px 0 0; }
}
#sb-store #wf-planner .wfp-promo__track { position: absolute; inset: 0; }
#sb-store #wf-planner .wfp-promo__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
#sb-store #wf-planner .wfp-promo__slide.wfp-is-active { opacity: 1; visibility: visible; transition: opacity .45s ease; }
#sb-store #wf-planner .wfp-promo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#sb-store #wf-planner .wfp-promo__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 24, .1) 0%, rgba(5, 11, 24, .35) 40%, rgba(5, 11, 24, .96) 88%); }
#sb-store #wf-planner .wfp-promo__body { position: relative; padding: 16px 16px 40px; display: flex; flex-direction: column; gap: 8px; }
#sb-store #wf-planner .wfp-promo__kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--wfp-cyan); }
#sb-store #wf-planner .wfp-promo__title { font-size: 19px; font-weight: 800; line-height: 1.2; color: #fff; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#sb-store #wf-planner .wfp-promo__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#sb-store #wf-planner .wfp-promo__price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#sb-store #wf-planner .wfp-promo__from { font-size: 11px; color: var(--wfp-muted); text-transform: uppercase; letter-spacing: .5px; }
#sb-store #wf-planner .wfp-promo__amount { font-size: 20px; font-weight: 800; color: #fff; white-space: nowrap; }
#sb-store #wf-planner .wfp-promo__amount--quote { font-size: 14px; color: var(--wfp-orange); white-space: normal; }
#sb-store #wf-planner .wfp-promo__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border-radius: 9px; background: linear-gradient(135deg, var(--wfp-cyan), var(--wfp-purple)); color: #041022; font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; border: 0; box-shadow: none; }
#sb-store #wf-planner .wfp-promo__cta:hover { filter: brightness(1.1); color: #041022; }
#sb-store #wf-planner .wfp-promo__cta::after { content: ""; position: absolute; inset: 0; }
#sb-store #wf-planner .wfp-promo__nav { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; z-index: 2; }
#sb-store #wf-planner .wfp-promo__arrow { width: 28px; height: 28px; min-height: 0; padding: 0; margin: 0; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid rgba(142, 160, 191, .35); background: rgba(5, 11, 24, .7); color: var(--wfp-text); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: none; }
#sb-store #wf-planner .wfp-promo__arrow:hover { border-color: var(--wfp-cyan); }
#sb-store #wf-planner .wfp-promo__dots { display: flex; gap: 2px; margin: 0 4px; }
#sb-store #wf-planner .wfp-promo__dot { width: 24px; height: 24px; min-height: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; display: inline-grid; place-items: center; cursor: pointer; }
#sb-store #wf-planner .wfp-promo__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(230, 237, 248, .35); transition: background .2s, transform .2s; }
#sb-store #wf-planner .wfp-promo__dot[aria-current="true"]::before { background: var(--wfp-cyan); transform: scale(1.25); }
#sb-store #wf-planner .wfp-promo__arrow, #sb-store #wf-planner .wfp-promo__dot { position: relative; z-index: 3; }

/* ---------- tree switcher (phones/tablets: one tree at a time) ---------- */
#sb-store #wf-planner .wfp-treebar { display: none; }
#sb-store #wf-planner .wfp-treebtn { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 48px; margin: 0; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--wfp-line); background: var(--wfp-card); color: var(--wfp-muted); font-size: 14px; font-weight: 700; line-height: 1.2; box-shadow: none; cursor: pointer; touch-action: manipulation; }
#sb-store #wf-planner .wfp-treebtn img { width: 26px; height: 26px; border-radius: 6px; flex: none; }
#sb-store #wf-planner .wfp-treebtn__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sb-store #wf-planner .wfp-treebtn__pts { flex: none; min-width: 22px; padding: 0 5px; border-radius: 6px; background: var(--wfp-badge-bg); border: 1px solid var(--wfp-edge); font-size: 12px; line-height: 18px; text-align: center; color: var(--wfp-muted); }
#sb-store #wf-planner .wfp-treebtn--main .wfp-treebtn__pts { color: var(--class-ink); border-color: var(--class-ink); }
#sb-store #wf-planner .wfp-treebtn[aria-pressed="true"] { border-color: var(--wfp-cyan); background: var(--wfp-card-on); color: var(--wfp-text); box-shadow: 0 0 0 1px var(--wfp-cyan); }

@media (max-width: 1000px) {
  #sb-store #wf-planner .wfp-controls { grid-template-columns: 1fr 1fr 1fr; }
  #sb-store #wf-planner .wfp-field--name, #sb-store #wf-planner .wfp-field--wide { grid-column: span 3; }
  #sb-store #wf-planner .wfp-trees { grid-template-columns: 1fr; }
  #sb-store #wf-planner .wfp-grid { max-width: 380px; }
  /* one tree at a time: the switcher shows every tree's points, the chosen tree is drawn below it */
  #sb-store #wf-planner .wfp-treebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
  #sb-store #wf-planner .wfp-tree:not(.wfp-tree--shown) { display: none; }
  #sb-store #wf-planner .wfp-tabs { gap: 0; }
  #sb-store #wf-planner .wfp-tab { flex: 1 1 0; min-height: 48px; padding: 10px 8px; text-align: center; }
  #sb-store #wf-planner .wfp-popular__list { grid-auto-columns: minmax(220px, 42%); scroll-snap-type: x mandatory; }
  #sb-store #wf-planner .wfp-pop-item { scroll-snap-align: start; }
  /* touch sizes */
  #sb-store #wf-planner .wfp-btn { min-height: 44px; }
  #sb-store #wf-planner .wfp-btn--small { min-height: 40px; padding: 6px 12px; }
  #sb-store #wf-planner .wfp-chip { min-height: 40px; padding: 6px 14px; }
  #sb-store #wf-planner .wfp-field :is(input, select) { min-height: 46px; font-size: 16px; }   /* 16px: iOS does not zoom into the field */
  #sb-store #wf-planner .wfp-skill { min-height: 52px; }
  #sb-store #wf-planner .wfp-check { min-height: 40px; }
  #sb-store #wf-planner .wfp-check input { width: 22px; height: 22px; }
  #sb-store #wf-planner .wfp-hint { font-size: 14px; }
  /* touch tooltip = bottom sheet above the site's mobile bars and chat button */
  #sb-store #wf-planner .wfp-tip--sheet { z-index: 2147483000; left: 0 !important; right: 0; bottom: 0; border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 72vh; max-height: 72dvh; overflow-y: auto; overscroll-behavior: contain; font-size: 15px; box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); }
  #sb-store #wf-planner .wfp-tip--sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--wfp-edge); margin: -8px auto 12px; }
  #sb-store #wf-planner .wfp-tip--sheet h3 { font-size: 18px; }
  #sb-store #wf-planner .wfp-tip--sheet p { font-size: 15px; }
  #sb-store #wf-planner .wfp-tip--sheet .wfp-tip__btns .wfp-btn { min-height: 48px; font-size: 16px; }
  #sb-store #wf-planner .wfp-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); border-radius: 14px; }
  #sb-store #wf-planner .wfp-promo__body { padding-bottom: 60px; }
  #sb-store #wf-planner .wfp-promo__nav { bottom: 6px; gap: 6px; }
  #sb-store #wf-planner .wfp-promo__arrow { width: 44px; height: 44px; font-size: 20px; }
  #sb-store #wf-planner .wfp-promo__dot { width: 30px; height: 44px; }
}
@media (min-width: 601px) and (max-width: 760px) {
  #sb-store #wf-planner .wfp-classes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #sb-store #wf-planner .wfp-controls { grid-template-columns: 1fr 1fr; gap: 10px; }
  #sb-store #wf-planner .wfp-field--name, #sb-store #wf-planner .wfp-field--wide { grid-column: span 2; }
  #sb-store #wf-planner .wfp-classes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #sb-store #wf-planner .wfp-cls { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 48px; padding: 6px 8px; }
  #sb-store #wf-planner .wfp-cls img { width: 32px; height: 32px; flex: none; }
  #sb-store #wf-planner .wfp-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  #sb-store #wf-planner .wfp-stat--spec { grid-column: 1 / -1; }
  #sb-store #wf-planner .wfp-stat__v { font-size: 18px; overflow-wrap: anywhere; }
  #sb-store #wf-planner .wfp-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; margin-left: 0; width: 100%; }
  #sb-store #wf-planner .wfp-actions .wfp-btn { width: 100%; padding: 8px 10px; }
  #sb-store #wf-planner .wfp-actions--left { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  #sb-store #wf-planner .wfp-warn { grid-column: 1 / -1; }
  #sb-store #wf-planner .wfp-skills { grid-template-columns: 1fr; }
  #sb-store #wf-planner .wfp-panel { padding: 12px; margin: 10px 0; }
  #sb-store #wf-planner .wfp-tab { font-size: 14px; padding: 10px 4px; }
  #sb-store #wf-planner .wfp-tree { padding: 10px 8px; }
  #sb-store #wf-planner .wfp-grid { max-width: none; }
  #sb-store #wf-planner .wfp-talent { width: 68%; }
  #sb-store #wf-planner .wfp-talent .wfp-badge { right: -8px; bottom: -8px; min-width: 28px; font-size: 11px; height: 18px; line-height: 16px; }
  #sb-store #wf-planner .wfp-tree__foot .wfp-btn { width: 100%; }
  #sb-store #wf-planner .wfp-popular__list { grid-auto-columns: 78%; }
  #sb-store #wf-planner .wfp-popular__filters { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  #sb-store #wf-planner .wfp-chip { flex: none; }
  #sb-store #wf-planner .wfp-profile { flex-direction: column; align-items: stretch; }
  #sb-store #wf-planner .wfp-profile__main { min-width: 0; }
  #sb-store #wf-planner .wfp-profile__btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  #sb-store #wf-planner .wfp-auth .wfp-btn { flex: 1 1 120px; }
  #sb-store #wf-planner .wfp-promo { margin-top: 20px; }
}
@media (max-width: 420px) {
  #sb-store #wf-planner .wfp-controls { grid-template-columns: 1fr; }
  #sb-store #wf-planner .wfp-field--name, #sb-store #wf-planner .wfp-field--wide { grid-column: auto; }
  #sb-store #wf-planner .wfp-cls { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 4px; }
  #sb-store #wf-planner .wfp-treebtn { flex-direction: column; gap: 3px; min-height: 56px; padding: 6px 4px; font-size: 13px; }
  #sb-store #wf-planner .wfp-treebtn__name { max-width: 100%; }
  #sb-store #wf-planner .wfp-treebtn img { display: none; }
}

/* ---------- light theme (site toggle: html[data-mode="light"]); dark stays the default above ---------- */
html[data-mode="light"] #sb-store #wf-planner {
  --wfp-bg: #f3f6fb;
  --wfp-panel: #ffffff;
  --wfp-panel-2: #f8fafd;
  --wfp-line: #d3dce8;
  --wfp-text: #0f1620;
  --wfp-muted: #4f5d75;
  --wfp-cyan: #05608d;
  --wfp-purple: #5b3cc4;
  --wfp-orange: #9a4a00;
  --wfp-green: #13734c;
  --wfp-red: #ad2444;
  --class-ink: color-mix(in oklab, var(--class) 62%, #000);   /* WoW class colours are made for dark UIs: darken them for AA text on white (>= 5.4:1) */
  --wfp-field: #ffffff;
  --wfp-card: #f8fafd;
  --wfp-card-on: #eaf2f8;
  --wfp-btn-bg: #ffffff;
  --wfp-icon-bg: #e4ebf4;
  --wfp-talent-bg: #e4ebf4;
  --wfp-edge: #aebccf;
  --wfp-edge-off: #d3dce8;
  --wfp-badge-bg: #ffffff;
  --wfp-arrow: #b9c5d6;
  --wfp-rowline: rgba(79, 93, 117, .1);
  --wfp-tip-bg: #ffffff;
  --wfp-tip-line: #aebccf;
  --wfp-tip-shadow: 0 16px 36px -10px rgba(20, 40, 70, .35);
  --wfp-title: #0f1620;
  --wfp-desc: #5e4200;
  --wfp-toast-bg: #ffffff;
  --wfp-faint: #5b6980;
  --wfp-note: #82530f;
  --wfp-gold: #8a4700;
  --wfp-focus: #05608d;
  --wfp-locked: grayscale(1) opacity(.5);
  color-scheme: light;
}
html[data-mode="light"] #sb-store #wf-planner .wfp-panel,
html[data-mode="light"] #sb-store #wf-planner .wfp-tree { box-shadow: 0 10px 28px -22px rgba(20, 40, 70, .45); }
html[data-mode="light"] #sb-store #wf-planner .wfp-beta { border-color: rgba(154, 74, 0, .4); background: #fff4e5; }
html[data-mode="light"] #sb-store #wf-planner:is([data-cls="rogue"], [data-cls="priest"]) { --class-ink: color-mix(in oklab, var(--class) 52%, #000); }   /* yellow/white need more */
html[data-mode="light"] #sb-store #wf-planner .wfp-cls { --c-ink: color-mix(in oklab, var(--c) 62%, #000); }
html[data-mode="light"] #sb-store #wf-planner .wfp-cls:is([data-slug="rogue"], [data-slug="priest"]) { --c-ink: color-mix(in oklab, var(--c) 52%, #000); }
html[data-mode="light"] #sb-store #wf-planner .wfp-cls[aria-checked="true"] { box-shadow: 0 0 0 1px var(--c-ink), 0 6px 16px -8px var(--c-ink); }
html[data-mode="light"] #sb-store #wf-planner .wfp-field :is(input, select) { border-color: #aebccf; }
html[data-mode="light"] #sb-store #wf-planner .wfp-field :is(input, select):focus { border-color: var(--wfp-cyan); box-shadow: 0 0 0 3px rgba(5, 96, 141, .18); }
html[data-mode="light"] #sb-store #wf-planner .wfp-field input::placeholder { color: #6b7890; opacity: 1; }
html[data-mode="light"] #sb-store #wf-planner .wfp-btn { border-color: #aebccf; }
html[data-mode="light"] #sb-store #wf-planner .wfp-btn:hover { border-color: var(--wfp-cyan); background: #f1f6fa; }
html[data-mode="light"] #sb-store #wf-planner .wfp-btn--accent { background: #05608d; border-color: #05608d; color: #fff; }
html[data-mode="light"] #sb-store #wf-planner .wfp-btn--accent:hover { background: #044b70; border-color: #044b70; color: #fff; }
html[data-mode="light"] #sb-store #wf-planner .wfp-btn--danger:hover { border-color: var(--wfp-red); color: var(--wfp-red); background: #fff0f4; }
html[data-mode="light"] #sb-store #wf-planner .wfp-talent--available { box-shadow: 0 0 0 1px rgba(5, 96, 141, .25), 0 4px 10px -4px rgba(5, 96, 141, .55); }
html[data-mode="light"] #sb-store #wf-planner .wfp-talent--available .wfp-badge { border-color: rgba(5, 96, 141, .55); }
html[data-mode="light"] #sb-store #wf-planner .wfp-talent--partial { box-shadow: 0 4px 12px -4px rgba(19, 115, 76, .6); }
html[data-mode="light"] #sb-store #wf-planner .wfp-talent--partial .wfp-badge { border-color: rgba(19, 115, 76, .55); }
html[data-mode="light"] #sb-store #wf-planner .wfp-talent--maxed { box-shadow: 0 4px 14px -4px rgba(154, 74, 0, .6); }
html[data-mode="light"] #sb-store #wf-planner .wfp-talent--maxed .wfp-badge { border-color: rgba(154, 74, 0, .6); }
html[data-mode="light"] #sb-store #wf-planner .wfp-talent:hover:not(.wfp-talent--locked) { filter: brightness(1.06); }
html[data-mode="light"] #sb-store #wf-planner .wfp-tip--sheet { box-shadow: 0 -12px 36px rgba(20, 40, 70, .25); }
html[data-mode="light"] #sb-store #wf-planner .wfp-tag--new { border-color: rgba(19, 115, 76, .45); }
html[data-mode="light"] #sb-store #wf-planner .wfp-tag--chg { border-color: rgba(154, 74, 0, .45); }
html[data-mode="light"] #sb-store #wf-planner .wfp-tag--trn { border-color: rgba(91, 60, 196, .45); }
html[data-mode="light"] #sb-store #wf-planner .wfp-auth { border-color: rgba(5, 96, 141, .45); background: #f1f7fb; }
html[data-mode="light"] #sb-store #wf-planner .wfp-profile { --c-ink: color-mix(in oklab, var(--c, #05608d) 50%, #000); background: #fff; }
html[data-mode="light"] #sb-store #wf-planner .wfp-profile--current { box-shadow: 0 0 0 1px rgba(5, 96, 141, .4); }
html[data-mode="light"] #sb-store #wf-planner .wfp-toast { box-shadow: 0 12px 30px -10px rgba(20, 40, 70, .35); }
html[data-mode="light"] #sb-store #wf-planner .wfp-popular { border-color: rgba(154, 74, 0, .35); background: linear-gradient(180deg, #fff5e8, #ffffff 60%); box-shadow: 0 10px 28px -22px rgba(154, 74, 0, .55); }
html[data-mode="light"] #sb-store #wf-planner .wfp-chip[aria-pressed="true"] { background: #fff0dc; }
html[data-mode="light"] #sb-store #wf-planner .wfp-pop { background: #fff; border-color: rgba(154, 74, 0, .3); }
html[data-mode="light"] #sb-store #wf-planner .wfp-pop:hover, html[data-mode="light"] #sb-store #wf-planner .wfp-pop:focus-visible { border-color: var(--wfp-orange); box-shadow: 0 6px 16px -8px rgba(154, 74, 0, .55); }
html[data-mode="light"] #sb-store #wf-planner .wfp-pop__badge { color: #3d1f00; background: linear-gradient(135deg, #ffd08a, #ffb347); }
/* promo card: the cover stays, the caption sits on a white fade with dark text */
html[data-mode="light"] #sb-store #wf-planner .wfp-promo { background: #fff; border-color: #c7d3e2; box-shadow: 0 14px 34px -22px rgba(20, 40, 70, .5); }
html[data-mode="light"] #sb-store #wf-planner .wfp-promo__shade { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .1) 34%, rgba(255, 255, 255, .88) 62%, #fff 84%); }
html[data-mode="light"] #sb-store #wf-planner .wfp-promo__title,
html[data-mode="light"] #sb-store #wf-planner .wfp-promo__amount { color: #0f1620; }
html[data-mode="light"] #sb-store #wf-planner .wfp-promo__cta { background: #05608d; color: #fff; }
html[data-mode="light"] #sb-store #wf-planner .wfp-promo__cta:hover { background: #044b70; color: #fff; filter: none; }
html[data-mode="light"] #sb-store #wf-planner .wfp-promo__arrow { background: #fff; border-color: #aebccf; color: #0f1620; }
html[data-mode="light"] #sb-store #wf-planner .wfp-promo__dot::before { background: rgba(15, 22, 32, .25); }
html[data-mode="light"] #sb-store #wf-planner .wfp-promo__dot[aria-current="true"]::before { background: var(--wfp-cyan); }

@media (prefers-reduced-motion: reduce) {
  #sb-store #wf-planner * { transition: none !important; }
}

/* WELCOME5 "Claim" slide (blog/welcome_slide.html), same as the article carousel; dark artwork in both themes. */
#sb-store #wf-planner .wfp-promo__slide--welcome { background: #0c1426; }
#sb-store #wf-planner .wfp-welcome__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 20, 38, 0) 30%, rgba(12, 20, 38, .55) 55%, rgba(12, 20, 38, .92) 80%); }
#sb-store #wf-planner .wfp-welcome__big { margin: 0; font-size: 56px; line-height: .95; font-weight: 900; letter-spacing: -.03em; background: linear-gradient(135deg, #fff 20%, var(--wfp-cyan) 60%, #b9a4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#sb-store #wf-planner .wfp-welcome__big span { font-size: 24px; letter-spacing: 0; }
#sb-store #wf-planner .wfp-welcome__text { margin: 0; font-size: 12.5px; line-height: 1.45; color: #d1dfed; }
#sb-store #wf-planner .wfp-welcome__text b { color: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; padding: 1px 6px; border: 1px dashed rgba(36, 215, 255, .6); border-radius: 5px; }
#sb-store #wf-planner .wfp-welcome__form { margin: 2px 0 0; }
#sb-store #wf-planner .wfp-welcome__cta { width: 100%; min-height: 40px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
html[data-mode="light"] #sb-store #wf-planner .wfp-promo__slide--welcome .wfp-promo__kicker { color: var(--wfp-cyan); }
/* whole slide is clickable (promo.js forwards the click to the slide button) */
#sb-store #wf-planner .wfp-promo__slide { cursor: pointer; -webkit-user-select: none; user-select: none; }
/* one steady hover state for the whole slide (the slide itself is the click target, see promo.js) */
#sb-store #wf-planner .wfp-promo__cta::after { content: none; }
#sb-store #wf-planner .wfp-promo__slide:hover .wfp-promo__cta { filter: brightness(1.1); color: #041022; }
html[data-mode="light"] #sb-store #wf-planner .wfp-promo__slide:hover .wfp-promo__cta { background: #044b70; color: #fff; filter: none; }