/* Build calculator, scoped to #bc-root (and the #bc-sim explainer dialog, which
   sits outside #bc-root so fashionista.js's re-renders don't wipe it). The view
   renders inside the SC:X Manager app shell, so this only styles the calculator's
   own subtree and pulls the design-system fonts. Most component styling is inline
   in the view templates to mirror the design mock-up's tokens; this file holds the
   resets the mock-up relied on (custom range/select chrome, scrollbar), the load +
   toast states, and the explainer dialog. */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

/* The calculator owns its own width. Every /builds page sets nav.Wide, which drops the app
   shell's centred max-width AND its padding, so both live here instead: the shell stops guessing
   how much room a dense grid layout wants, the way the Battle Planner already does.
   1680px is measured, not picked: it fits five artefact cards per row in the editor's inventory
   against the old three at the shell's 1152px, and keeps the summary column beside the build
   instead of under it. Bounded rather than full-bleed so a 2560px monitor does not stretch the
   config panel's prose across the desk. */
#bc-root {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding: 40px 24px;
}

#bc-root,
#bc-sim {
  --bc-bg: #0A0A0B;
  --bc-surface: #111113;
  --bc-surface-2: #17171A;
  --bc-border: #1F1F23;
  --bc-border-2: #2A2A30;
  --bc-text: #F4F4F5;
  --bc-muted: #A8A8B0;
  --bc-dim: #71717A;
  --bc-faint: #52525B;
  --bc-accent: #F97316;
  --bc-accent-text: #FB923C;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 15px;
  color: var(--bc-text);
  width: 100%;
}

#bc-root *,
#bc-sim * { box-sizing: border-box; }

/* Alpine.js: hide #bc-root until the fashionista component initialises, so raw
   templ markup never flashes before Alpine hydrates it. */
[x-cloak] { display: none !important; }

#bc-root .bc-loading {
  padding: 120px 0;
  text-align: center;
  color: var(--bc-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}

/* Custom range + select chrome to match the dark surfaces. */
#bc-root input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--bc-border-2);
  outline: none;
}
#bc-root input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bc-accent);
  cursor: pointer;
  border: 2px solid var(--bc-bg);
}
#bc-root input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bc-accent);
  cursor: pointer;
  border: 2px solid var(--bc-bg);
}
/* Fashionista average-tier dual-thumb slider (custom: a native range input has no two-thumb mode). */
#bc-root .bc-avgtier { position: relative; height: 24px; }
#bc-root .bc-avgtier-rail {
  position: absolute; top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px;
  border-radius: 2px; background: var(--bc-border-2);
}
#bc-root .bc-avgtier-fill {
  position: absolute; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px;
  background: var(--bc-accent); cursor: grab; touch-action: none; z-index: 1;
}
#bc-root .bc-avgtier-fill:active { cursor: grabbing; }
#bc-root .bc-avgtier-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  background:
    linear-gradient(var(--bc-bg), var(--bc-bg)) 1px 0 / 2px 8px no-repeat,
    linear-gradient(var(--bc-bg), var(--bc-bg)) 5px 0 / 2px 8px no-repeat;
  opacity: 0.7;
}
#bc-root .bc-avgtier-thumb {
  position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px;
  border-radius: 50%; background: var(--bc-accent); border: 2px solid var(--bc-bg);
  cursor: pointer; touch-action: none; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Artefact card atom (artefactcard.templ + its SSR twin in readonly.templ). One card shape
   for the editor inventory, the filled build slots, Fashionista's pickers, pins and result
   contents, so every artefact reads the same wherever it appears.

   .bc-art-card is the layout only; add .bc-art-box where the card is its own surface (a
   card nested in an already-padded row is not). --bc-art-tile is the icon size the call
   site sets, and every other dimension keys off it, so one number resizes the whole card.

   Responsiveness: the card is its own container, so it shrinks by its OWN width rather
   than the viewport's. That is what the 320px-tall picker scroller and the three-column
   results view need, since both put full-width cards in a narrow column while the viewport
   is wide. .bc-art-grid is the shared track for every card grid. */
#bc-root .bc-art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 10px;
}
#bc-root .bc-art-card {
  --bc-art-tile: 42px;
  container-type: inline-size;
  display: flex;
  gap: 11px;
  width: 100%;
  min-width: 0;
}
#bc-root .bc-art-box {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 10px;
  padding: 12px;
}
#bc-root .bc-art-click { cursor: pointer; }
/* An inventory card the co-occurrence ranking surfaced. */
#bc-root .bc-art-sug { border-color: rgba(249, 115, 22, 0.35); }
#bc-root .bc-art-tile {
  width: var(--bc-art-tile);
  height: var(--bc-art-tile);
  flex: none;
  border-radius: 7px;
  background: #0E0E10;
  display: grid;
  place-items: center;
  padding: 4px;
}
#bc-root .bc-art-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
#bc-root .bc-art-tile span {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: calc(var(--bc-art-tile) * 0.3);
}
#bc-root .bc-art-body { min-width: 0; flex: 1; }
#bc-root .bc-art-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
#bc-root .bc-art-title {
  min-width: 0;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#bc-root .bc-art-mark { flex: none; font-size: 10px; color: var(--bc-accent-text); }
/* Per-card affordances (remove, duplicate) sit at the far end of the name row. */
#bc-root .bc-art-actions {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--bc-faint);
  cursor: pointer;
  font-size: 14px;
}
#bc-root .bc-art-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
}
#bc-root .bc-art-tier { font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #0A0A0B; }
#bc-root .bc-art-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
#bc-root .bc-art-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: #0E0E10;
}
#bc-root .bc-art-est {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  font-family: "JetBrains Mono", monospace;
}
#bc-root .bc-art-est-label { font-size: 10px; color: var(--bc-dim); }
#bc-root .bc-art-est-val { font-size: 11px; font-weight: 700; color: var(--bc-accent-text); }
/* A card squeezed into a narrow column keeps its name, cost and chips by giving up icon
   size first; the custom property is redeclared on the tile, since the query matches the
   card's descendants, not the card itself. The bound sits well under the grid's 210px
   track floor because @container measures the CONTENT box: a padded card at the narrowest
   track is already ~184px, so a bound near 190px would fire at ordinary widths. */
@container (max-width: 150px) {
  #bc-root .bc-art-tile { --bc-art-tile: 32px; }
}

/* Fashionista budget input: a mono field with a trailing "m" (million rubles) adornment, so the
   unit reads as part of the value instead of a separate label. */
#bc-root .bc-budget-field { position: relative; display: inline-block; }
#bc-root .bc-budget-field input {
  width: 130px; box-sizing: border-box; padding: 8px 26px 8px 10px; text-align: right;
  background: var(--bc-surface-2); border: 1px solid var(--bc-border-2); border-radius: 6px;
  color: var(--bc-text); font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 13px;
  outline: none;
}
#bc-root .bc-budget-field input:focus { border-color: var(--bc-accent); }
#bc-root .bc-budget-unit {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 600;
  color: var(--bc-dim); pointer-events: none;
}

#bc-root select { -webkit-appearance: none; appearance: none; }

/* Desired-attribute combobox option (highlight is driven by the inline :style). */
#bc-root .bc-combo-opt { cursor: pointer; }

#bc-root ::-webkit-scrollbar { width: 10px; height: 10px; }
#bc-root ::-webkit-scrollbar-track { background: transparent; }
#bc-root ::-webkit-scrollbar-thumb {
  background: var(--bc-border-2);
  border-radius: 6px;
  border: 2px solid var(--bc-bg);
}

/* Save / error toast pinned top-center of the viewport so it is unmissable
   (a bottom-right corner toast reads as barely visible). */
#bc-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 50;
  max-width: min(90vw, 420px);
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
#bc-toast.show { opacity: 1; transform: translate(-50%, 0); }
#bc-toast.ok { background: #14321f; color: #4ADE80; border: 1px solid rgba(74, 222, 128, 0.4); }
#bc-toast.err { background: #3a1414; color: #FCA5A5; border: 1px solid rgba(255, 107, 107, 0.4); }

/* Fashionista search, indeterminate progress bar (the search terminates as soon
   as it finds enough builds, so a meaningful % isn't possible; a moving bar plus
   live "combinations checked" counts is the honest indicator). */
#bc-root .bc-indet { position: relative; height: 10px; border-radius: 6px; background: var(--bc-surface-2); overflow: hidden; }
#bc-root .bc-indet::after {
  content: ""; position: absolute; top: 0; left: -40%; height: 100%; width: 40%;
  border-radius: 6px; background: var(--bc-accent); animation: bc-indet 1.05s ease-in-out infinite;
}
@keyframes bc-indet { 0% { left: -40%; } 100% { left: 100%; } }

/* Circular working indicator inside the Find-builds button while a run is estimating/queued.
   Dark stroke on a translucent track to read on the amber button. */
#bc-root .bc-spinner {
  display: inline-block; width: 14px; height: 14px; flex: none; box-sizing: border-box;
  border: 2px solid rgba(22, 11, 2, 0.3); border-top-color: #160B02;
  border-radius: 50%; animation: bc-spin 0.7s linear infinite;
}
@keyframes bc-spin { to { transform: rotate(360deg); } }

/* "How Fashionista finds builds" explainer, a native <dialog> opened with
   showModal() (backdrop, focus trap and Esc-to-close come for free). Its prose is
   server-rendered by explainer.templ; these classes replace the per-element inline
   styles the old app.js modal carried. */
#bc-sim {
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--bc-border-2);
  border-radius: 14px;
  background: var(--bc-surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
#bc-sim::backdrop { background: rgba(6, 6, 8, 0.72); backdrop-filter: blur(2px); }

#bc-sim .exp-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 14px;
  background: var(--bc-surface);
  border-bottom: 1px solid var(--bc-border);
  border-radius: 14px 14px 0 0;
}
#bc-sim .exp-title { font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
#bc-sim .exp-sub { font-size: 13px; color: var(--bc-muted); margin-top: 3px; }
#bc-sim .exp-close { flex: none; font-size: 22px; line-height: 1; color: var(--bc-dim); cursor: pointer; padding: 2px 4px; background: transparent; border: 0; }
#bc-sim .exp-body { padding: 16px 24px 26px; }

#bc-sim .exp-tldr {
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.08), rgba(249, 115, 22, 0.02));
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 8px;
}
#bc-sim .exp-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
#bc-sim .exp-tldr .exp-kicker { color: var(--bc-accent-text); margin-bottom: 8px; }
#bc-sim .exp-paper { margin-top: 20px; padding-top: 6px; }
#bc-sim .exp-paper .exp-kicker { color: var(--bc-dim); margin-bottom: 2px; }

#bc-sim h3 { font-family: "Space Grotesk", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 24px 0 8px; color: var(--bc-text); }
#bc-sim p { margin: 0 0 10px; color: var(--bc-muted); font-size: 13.5px; line-height: 1.68; }
#bc-sim p.exp-note { color: var(--bc-faint); font-size: 12.5px; line-height: 1.6; }
#bc-sim strong { color: var(--bc-text); font-weight: 600; }
#bc-sim code { font-family: "JetBrains Mono", monospace; font-size: 12px; background: #0E0E10; padding: 1px 5px; border-radius: 4px; color: var(--bc-accent-text); }

/* The combination table's min-content width beats a phone-width modal in ru/uk/pl, where
   the column headings are long words, so it gets its own scroll box: the dialog itself
   must never scroll sideways. */
#bc-sim .exp-scroll { overflow-x: auto; }
#bc-sim table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
#bc-sim th { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--bc-border-2); color: var(--bc-dim); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
#bc-sim th:first-child { text-align: left; }
#bc-sim td { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--bc-border); font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--bc-muted); }
#bc-sim td:first-child { text-align: left; font-family: inherit; }

/* Pipeline figure inside the explainer (simFlow, explainer.templ): the stages a search
   runs through as a flex column joined by CSS arrows, then a fork into its two exits.
   Every colour is one of the #bc-sim custom properties (or the same accent tint
   .exp-tldr uses), never a literal, so the figure follows the palette the dialog sets.
   Nothing here has a fixed width: the steps wrap their prose and the fork's flex-basis
   makes the two exits stack rather than overflow a narrow modal. */
#bc-sim .exp-flow { margin: 16px 0 4px; padding: 0; }
#bc-sim .exp-flow figcaption { color: var(--bc-dim); margin-bottom: 12px; }
#bc-sim .exp-flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#bc-sim .exp-step {
  position: relative;
  display: flex;
  gap: 11px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--bc-border-2);
  border-radius: 10px;
  background: var(--bc-surface-2);
}
/* Connector, drawn in the gap above each step but the first: a hairline plus a head
   pointing into it. Absolutely positioned, so neither becomes a flex item of .exp-step.
   Both are centred on the step number's own centre (12px padding + half of its 22px). */
#bc-sim .exp-step + .exp-step::before {
  content: "";
  position: absolute;
  left: 23px;
  top: -18px;
  width: 1px;
  height: 11px;
  background: var(--bc-border-2);
}
#bc-sim .exp-step + .exp-step::after {
  content: "";
  position: absolute;
  left: 19px;
  top: -7px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--bc-border-2);
}
#bc-sim .exp-step-n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 115, 22, 0.14);
  color: var(--bc-accent-text);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
}
#bc-sim .exp-step-body,
#bc-sim .exp-out {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#bc-sim .exp-step-t,
#bc-sim .exp-out-t { color: var(--bc-text); font-size: 13px; font-weight: 600; }
#bc-sim .exp-step-d,
#bc-sim .exp-out-d { color: var(--bc-muted); font-size: 12.5px; line-height: 1.55; }
#bc-sim .exp-flow-fork { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
#bc-sim .exp-out {
  flex: 1 1 210px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--bc-border-2);
  background: var(--bc-surface-2);
}
#bc-sim .exp-out-yes {
  border-color: rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.06);
}
#bc-sim .exp-out-yes .exp-out-t { color: var(--bc-accent-text); }

/* Build editor summary column: sticky and independently scrollable so it and the
   main section (slots + inventory) scroll separately. Without the max-height +
   overflow the sticky column has no scroll region of its own, so a summary taller
   than the viewport can only be reached by scrolling the whole page.

   The column sits in EditorShell's outer flex row, level with the header (not below
   the header/name/picker), so its flow-top is near the page top. `top: 8px` therefore
   pins it from the initial scroll position, and `max-height: calc(100vh - 8px - 16px)`
   caps its own scroll box to the viewport so the whole summary is reachable by its own
   scrollbar without scrolling the main section first. */
#bc-root .bc-summary-col {
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 8px - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 1280px) {
  #bc-root .bc-summary-col {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Fashionista results: three columns (build list | contents | summary) on wide
   viewports, stacking to one column at the same 1280px breakpoint as the form. */
#bc-root .bc-fashion-3col {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(300px, 380px);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1280px) {
  #bc-root .bc-fashion-3col {
    grid-template-columns: 1fr;
  }
}

/* Fashionista search form: two columns on wide viewports, collapsing to one when a
   column can no longer hold its controls (auto-fit + minmax, no media query needed). */
#bc-root .bc-fashion-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}

/* Scenario controls (scenario.templ): the anomaly-reaction chips and the bleeding/burning
   debuffs. One chip shape for the live pickers and the read-only share strip, so a shared
   build's situation reads exactly like the one that was set. .bc-scn-seg is the narrower
   variant the bleeding severities need, being a segmented run rather than free chips. */
#bc-root .bc-scn-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
#bc-root .bc-scn-chip,
#bc-root .bc-scn-seg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 7px;
  background: var(--bc-surface-2); border: 1px solid var(--bc-border-2);
  color: var(--bc-muted); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; text-align: center;
}
#bc-root .bc-scn-seg {
  min-width: 34px; padding: 6px 8px; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}
#bc-root .bc-scn-chip-on,
#bc-root .bc-scn-seg-on {
  background: rgba(249, 115, 22, 0.14); border-color: rgba(249, 115, 22, 0.45);
  color: var(--bc-text);
}
#bc-root .bc-scn-chip-val {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--bc-faint);
}
#bc-root .bc-scn-chip-on .bc-scn-chip-val { color: var(--bc-accent-text); }

/* Debuff chips (.bc-dbf): a named, glyphed shell around each debuff's control, deliberately the
   same 40px surface chip the buff rail uses (gearBuffRail) so DEBUFFS reads as the sibling of
   BUFFS it now sits under rather than as a different kind of control. Bleeding wraps its severity
   run; Burning is the whole chip, hence the button variant. Active ones take the accent the
   selected-buff and -reaction chips take. */
#bc-root .bc-dbf {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 10px; border-radius: 8px;
  background: var(--bc-surface); border: 1px solid var(--bc-border-2);
  color: var(--bc-muted); font: inherit;
}
#bc-root .bc-dbf-btn { cursor: pointer; }
#bc-root .bc-dbf-on {
  background: rgba(249, 115, 22, 0.10); border-color: rgba(249, 115, 22, 0.45);
  color: var(--bc-text);
}
#bc-root .bc-dbf-icon { display: inline-flex; flex: none; color: var(--bc-dim); }
#bc-root .bc-dbf-on .bc-dbf-icon { color: var(--bc-accent); }
#bc-root .bc-dbf-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
/* The severity run keeps its own 6px rhythm inside the chip and may wrap on a narrow column
   without pushing the name off the row. */
#bc-root .bc-dbf-segs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }