/* ==================================================================
   OWBoost calculator: Overwatch-only feature layer
   ------------------------------------------------------------------
   Loaded after boost-page.css on the product pages only
   (owb_is_product_page). Everything is scoped to body.owb-boost-page and
   uses the .owb-rd tokens from home-page.css, so nothing here can reach
   another page. Each block belongs to a feature switched on in
   Boosting > Product Settings > Overwatch Features; with a feature off its
   markup is never shown and these rules are inert.
   ================================================================== */

/* ---- role picker (under Role queue, and on the Stadium tab) ----
   Four equal buttons on their own row, sized like the queue buttons above them.
   They were 13px pills that read as fine print under the queue toggle. */
body.owb-boost-page .role-pick {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 7.92px;
  margin-top: 13.2px;
}
body.owb-boost-page .role-pick[hidden] { display: none; }
body.owb-boost-page .role-pick-lab {
  flex: 1 0 100%;
  font-family: var(--font-ui); font-size: 12.54px; font-weight: 700; text-transform: uppercase;
  letter-spacing: calc(0.1em * var(--tracking, 1)); color: var(--ink-soft);
}
body.owb-boost-page .role-pick-opt {
  flex: 1 1 0; min-width: 0; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border-radius: var(--r, 10px); cursor: pointer;
  font-family: var(--font-ui); font-size: 15.18px; font-weight: 700; color: var(--ink); white-space: nowrap;
  background: var(--bg-soft, #f6f7f9); border: 1.2px solid var(--line);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
body.owb-boost-page .role-pick-opt svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--royal); }
body.owb-boost-page .role-pick-opt:hover { border-color: var(--royal-soft); }
body.owb-boost-page .role-pick-opt.sel { background: var(--royal); border-color: var(--royal-deep); color: #fff; }
body.owb-boost-page .role-pick-opt.sel svg { color: #fff; }
body.owb-boost-page .role-pick-opt:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
@media (max-width: 420px) {
  /* four across gets tight on small phones: two by two */
  body.owb-boost-page .role-pick-opt { flex-basis: calc(50% - 3.96px); }
}

/* ---- region suggestion hint (under the server grid) ---- */
body.owb-boost-page .region-hint {
  display: flex; align-items: center; gap: 6px; margin: 8px 0 0;
  font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-soft);
}
body.owb-boost-page .region-hint[hidden] { display: none; }
body.owb-boost-page .region-hint svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--royal); }

/* ---- feature tab panels ---- */
body.owb-boost-page[data-prod="drives"] .prod-panel[data-for~="drives"],
body.owb-boost-page[data-prod="stadium"] .prod-panel[data-for~="stadium"],
body.owb-boost-page[data-prod="points"] .prod-panel[data-for~="points"] { display: block; }
body.owb-boost-page .prod-tab-event .prod-tab-hot { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); }

/* ---- product menu: Division, Duo, Stadium, Weapons on top ----
   Stadium and the weapon planner are .big tabs beside Division and Duo, so the
   top row holds two to four of them (either feature can be off) and the per-game
   products share the row below. Everything is sized off the menu's own width, not
   the viewport: the menu is 770-1240px wide beside the order panel and full width
   under it, so a viewport breakpoint cannot know how much room a tab has.
   - 1000px+: tabs lie flat (icon, then name + sub-line), compact on the small row
   - 700-999px: every tab stands up as a small card (icon above the text), which
     keeps four across and six below without clipping "Division Boost"
   - under 700px: two across, as the phone layout already did */
body.owb-boost-page .prod-menu { container: owb-prodmenu / inline-size; }
body.owb-boost-page .prod-menu:has(.prod-tab.big ~ .prod-tab.big ~ .prod-tab.big) .prod-tab.big { flex: 1 1 calc(33.333% - 7.5px); }
body.owb-boost-page .prod-menu:has(.prod-tab.big ~ .prod-tab.big ~ .prod-tab.big ~ .prod-tab.big) .prod-tab.big { flex: 1 1 calc(25% - 8.2px); }
@container owb-prodmenu (min-width: 1000px) {
  body.owb-boost-page .prod-menu .prod-tab.big { padding: 14.52px 15.84px; gap: 11.88px; }
  body.owb-boost-page .prod-menu .prod-tab.big .prod-tab-ico { width: 46.2px; height: 46.2px; }
  body.owb-boost-page .prod-menu .prod-tab.big .prod-tab-ico svg { width: 24.42px; height: 24.42px; }
  body.owb-boost-page .prod-menu .prod-tab.big .prod-tab-name { font-size: 18.48px; }
  body.owb-boost-page .prod-menu .prod-tab:not(.big) { padding: 11.88px; gap: 9.24px; }
  body.owb-boost-page .prod-menu .prod-tab:not(.big) .prod-tab-ico { width: 34.32px; height: 34.32px; }
  body.owb-boost-page .prod-menu .prod-tab:not(.big) .prod-tab-ico svg { width: 18.48px; height: 18.48px; }
  body.owb-boost-page .prod-menu .prod-tab:not(.big) .prod-tab-name { font-size: 15.84px; }
  body.owb-boost-page .prod-menu .prod-tab:not(.big) .prod-tab-sub { font-size: 10.23px; }
}
@container owb-prodmenu (min-width: 700px) and (max-width: 999.98px) {
  body.owb-boost-page .prod-menu .prod-tab { flex-direction: column; align-items: flex-start; gap: 9.24px; padding: 13.2px; }
  body.owb-boost-page .prod-menu .prod-tab .prod-tab-ico,
  body.owb-boost-page .prod-menu .prod-tab.big .prod-tab-ico { width: 38.28px; height: 38.28px; }
  body.owb-boost-page .prod-menu .prod-tab .prod-tab-ico svg,
  body.owb-boost-page .prod-menu .prod-tab.big .prod-tab-ico svg { width: 20.46px; height: 20.46px; }
  body.owb-boost-page .prod-menu .prod-tab .prod-tab-name { font-size: 15.84px; }
  body.owb-boost-page .prod-menu .prod-tab.big .prod-tab-name { font-size: 17.82px; }
  body.owb-boost-page .prod-menu .prod-tab .prod-tab-sub { font-size: 10.23px; }
}
@container owb-prodmenu (max-width: 699.98px) {
  body.owb-boost-page .prod-menu .prod-tab.big,
  body.owb-boost-page .prod-menu .prod-tab:not(.big),
  body.owb-boost-page .prod-menu:has(.prod-tab.big ~ .prod-tab.big ~ .prod-tab.big) .prod-tab.big,
  body.owb-boost-page .prod-menu:has(.prod-tab.big ~ .prod-tab.big ~ .prod-tab.big ~ .prod-tab.big) .prod-tab.big { flex: 1 1 calc(50% - 5.28px); }
}

/* ---- Drives calculator ---- */
body.owb-boost-page .drv-calc { display: flex; flex-direction: column; gap: 16px; }
body.owb-boost-page .drv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
body.owb-boost-page .drv-head-copy { min-width: 0; flex: 1 1 320px; }
body.owb-boost-page .drv-phase {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--line);
}
body.owb-boost-page .drv-phase.is-open { background: rgba(34,179,88,.1); border-color: rgba(34,179,88,.35); color: #157a3a; }
body.owb-boost-page .drv-phase.is-open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(34,179,88,.2); }
body.owb-boost-page .drv-phase.is-upcoming { background: var(--royal-tint); border-color: var(--royal-soft); color: var(--royal-deep); }
body.owb-boost-page .drv-name { margin: 8px 0 4px; font-family: var(--font-display); font-size: 28px; line-height: 1.05; color: var(--ink); }
body.owb-boost-page .drv-summary { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
body.owb-boost-page .drv-source {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  color: var(--royal); text-decoration: none; white-space: nowrap; padding-top: 4px;
}
body.owb-boost-page .drv-source svg { width: 15px; height: 15px; }
body.owb-boost-page .drv-source:hover { text-decoration: underline; }
body.owb-boost-page .drv-source[hidden] { display: none; }

body.owb-boost-page .drv-progress { background: #fff; border: 1.2px solid var(--line); border-radius: var(--r, 10px); padding: 16px 18px; }
body.owb-boost-page .drv-progress .ctl-label { margin-bottom: 12px; }
body.owb-boost-page .drv-progress-row { display: flex; align-items: center; gap: 14px; }
body.owb-boost-page .drv-progress-num {
  width: 112px; flex-shrink: 0; padding: 9px 10px; border: 1.2px solid var(--line); border-radius: 8px;
  font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); text-align: center; background: var(--bg-soft);
}
body.owb-boost-page .drv-progress-num:focus { outline: 2px solid var(--royal); outline-offset: 1px; background: #fff; }
body.owb-boost-page .drv-progress .pp-note { margin: 10px 0 0; }

body.owb-boost-page .drv-track-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.owb-boost-page .drv-finish {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 9px; cursor: pointer;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--royal-deep);
  background: var(--royal-tint); border: 1.2px solid var(--royal-soft); transition: background 160ms ease, color 160ms ease;
}
body.owb-boost-page .drv-finish svg { width: 16px; height: 16px; }
body.owb-boost-page .drv-finish:hover:not(:disabled), body.owb-boost-page .drv-finish.sel { background: var(--royal); border-color: var(--royal-deep); color: #fff; }
body.owb-boost-page .drv-finish:disabled { opacity: .5; cursor: not-allowed; }
body.owb-boost-page .drv-finish:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }

/* the track: nodes in a row over a rail filled up to the current score */
body.owb-boost-page .drv-track {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 10px;
  overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
body.owb-boost-page .drv-track::before, body.owb-boost-page .drv-track::after {
  content: ""; position: absolute; left: 12px; top: 44px; height: 4px; border-radius: 4px; pointer-events: none;
}
body.owb-boost-page .drv-track::before { right: 12px; background: var(--line); }
body.owb-boost-page .drv-track::after { width: calc(var(--drv-done, 0%) - 12px); max-width: calc(100% - 24px); background: var(--green); }
body.owb-boost-page .drv-node {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 8px 6px 10px; border-radius: 12px; cursor: pointer; scroll-snap-align: start;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink); font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out, ease);
}
body.owb-boost-page .drv-node:hover:not(:disabled) { border-color: var(--royal-soft); transform: translateY(-2px); }
body.owb-boost-page .drv-node:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
body.owb-boost-page .drv-node-art {
  width: 64px; height: 64px; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
  background: var(--bg-soft); border: 1px solid var(--line-soft);
}
body.owb-boost-page .drv-node-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.owb-boost-page .drv-node-art svg { width: 26px; height: 26px; color: var(--ink-muted); }
body.owb-boost-page .drv-node-label { font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; line-height: 1.2; }
body.owb-boost-page .drv-node-sub { font-size: 11px; color: var(--ink-muted); line-height: 1.25; }
body.owb-boost-page .drv-node-lock { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; color: var(--royal); }
body.owb-boost-page .drv-node-lock svg { width: 100%; height: 100%; }
body.owb-boost-page .drv-node.is-sel { border-color: var(--royal); box-shadow: 0 0 0 3px var(--royal-tint), var(--shadow-soft); }
body.owb-boost-page .drv-node.is-done { cursor: default; background: var(--bg-soft); color: var(--ink-muted); }
body.owb-boost-page .drv-node.is-done .drv-node-art { filter: grayscale(.6); opacity: .7; }
body.owb-boost-page .drv-node.is-late { cursor: not-allowed; opacity: .5; border-style: dashed; }

body.owb-boost-page .drv-preview {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r, 10px);
  background: linear-gradient(135deg, var(--royal-tint), #fff); border: 1.2px solid var(--royal-soft);
}
body.owb-boost-page .drv-pv-art { width: 96px; height: 96px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-soft); }
body.owb-boost-page .drv-pv-art img { width: 100%; height: 100%; object-fit: cover; }
body.owb-boost-page .drv-pv-art svg { width: 34px; height: 34px; color: var(--royal); }
body.owb-boost-page .drv-pv-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.owb-boost-page .drv-pv-cap { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--royal); }
body.owb-boost-page .drv-pv-name { font-family: var(--font-display); font-size: 21px; line-height: 1.1; color: var(--ink); }
body.owb-boost-page .drv-pv-sub, body.owb-boost-page .drv-pv-list { font-size: 13px; color: var(--ink-soft); }
body.owb-boost-page .drv-pv-eta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
body.owb-boost-page .drv-pv-eta svg { width: 14px; height: 14px; color: var(--royal); }
body.owb-boost-page .drv-none { margin: 0; font-size: 14px; color: var(--ink-soft); }
body.owb-boost-page .drv-req { margin: 0; font-size: 13px; color: var(--ink-soft); }
body.owb-boost-page .drv-req.is-bad { color: var(--red); font-weight: 600; }
body.owb-boost-page .drv-req[hidden] { display: none; }

body.owb-boost-page .drv-state {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r, 10px);
  background: var(--bg-soft); border: 1.2px solid var(--line);
}
body.owb-boost-page .drv-state[hidden], body.owb-boost-page .drv-sell[hidden] { display: none; }
body.owb-boost-page .drv-sell { display: flex; flex-direction: column; gap: 14px; }
body.owb-boost-page .drv-state-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--royal); border: 1px solid var(--line); }
body.owb-boost-page .drv-state-ico svg { width: 19px; height: 19px; }
body.owb-boost-page .drv-state-txt { min-width: 0; flex: 1; }
body.owb-boost-page .drv-state-txt b { font-family: var(--font-ui); font-size: 15px; }
body.owb-boost-page .drv-state-txt p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

/* opening-alert form (calculator state box + homepage card share the markup) */
.owb-rd .drv-alert { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.owb-rd .drv-alert input[type="email"] {
  flex: 1 1 220px; min-width: 0; padding: 10px 12px; border: 1.2px solid var(--line); border-radius: 9px; font-size: 14px; background: #fff; color: var(--ink);
}
.owb-rd .drv-alert input[type="email"]:focus { outline: 2px solid var(--royal); outline-offset: 1px; }
.owb-rd .drv-alert .btn { flex-shrink: 0; }
.owb-rd .drv-consent { flex-basis: 100%; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.owb-rd .drv-consent input { margin-top: 2px; }
.owb-rd .drv-alert-msg { flex-basis: 100%; margin: 0; font-size: 13px; font-weight: 600; color: #157a3a; }
.owb-rd .drv-alert-msg.is-bad { color: var(--red); }
.owb-rd .drv-alert-msg[hidden] { display: none; }
.owb-rd .drv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 560px) {
  body.owb-boost-page .drv-name { font-size: 23px; }
  body.owb-boost-page .drv-progress-num { width: 92px; font-size: 18px; }
  body.owb-boost-page .drv-preview { align-items: flex-start; }
  body.owb-boost-page .drv-pv-art { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  body.owb-boost-page .drv-node { transition: none; }
  body.owb-boost-page .drv-node:hover:not(:disabled) { transform: none; }
}

/* ---- Stadium ---- */
body.owb-boost-page .std-calc { display: flex; flex-direction: column; gap: 16px; }
body.owb-boost-page .std-lead { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
/* the stations are the Division boost's own .rank-station markup; only the
   Stadium-specific bits live here */
body.owb-boost-page .std-stations .rank-arrow { gap: 7.92px; }
body.owb-boost-page .std-stations .crest-img[hidden] { display: none; }
body.owb-boost-page .std-stations .div-pill:disabled { opacity: .35; cursor: not-allowed; }
body.owb-boost-page .std-calc .calc-controls { margin-top: 0; }
body.owb-boost-page .std-rewards-wrap[hidden] { display: none; }
body.owb-boost-page .std-rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 10px; }

/* ---- weapon planner: one goal (3,000 points), balance by slider, preset or typing ---- */
body.owb-boost-page .pts-calc { display: flex; flex-direction: column; gap: 14px; }
body.owb-boost-page .pts-goal {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r, 10px);
  background: linear-gradient(135deg, var(--royal-tint), #fff 70%); border: 1.2px solid var(--royal-soft);
}
body.owb-boost-page .pts-goal-ico {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--royal), var(--royal-deep)); color: #fff; box-shadow: 0 10px 24px -12px rgba(22,89,172,.7);
}
body.owb-boost-page .pts-goal-ico svg { width: 30px; height: 30px; }
body.owb-boost-page .pts-goal-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.owb-boost-page .pts-goal-cap { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--royal-deep); }
body.owb-boost-page .pts-goal-num { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--ink); }
body.owb-boost-page .pts-goal-sub { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
body.owb-boost-page .pts-balance { background: #fff; border: 1.2px solid var(--line); border-radius: var(--r, 10px); padding: 16px 18px; }
body.owb-boost-page .pts-balance .ctl-label { margin-bottom: 12px; }
body.owb-boost-page .pts-balance .ctl-label label { cursor: pointer; }
body.owb-boost-page .pts-presets { margin: 14px 0 0; flex-wrap: wrap; }
body.owb-boost-page .pts-presets .qty-preset { padding: 8px 14px; font-size: 14.5px; }
body.owb-boost-page .pts-balance .pp-note { margin: 12px 0 0; font-size: 14px; }