/* =========================================================
   Stormblessed TB Guide: Troop Stacking page.
   Our form and cards, plus light/dark styling for the TB
   Toolkit widgets we keep (account row, limits, bonuses,
   kill order, results, chart).
   ========================================================= */
:root {
  --bg:#15131f; --card:#1d1a2b; --panel-2:#242036; --edge:#2e2a42; --edge-soft:#262238;
  --ink:#eeeaf6; --ink-dim:#a39cb8; --ink-faint:#7c7592;
  --brass:#d1ae62; --brass-bg:rgba(209,174,98,.15); --sage:#7db38a; --sage-bg:rgba(125,179,138,.14);
  --wine:#e0667a; --wine-bg:rgba(224,102,122,.12); --blue:#8fa8e0;
  --on-accent:#15131f; --switch-off:#3a3550; --tip-bg:#2c2840; --radius:14px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f3f1f8; --card:#ffffff; --panel-2:#f7f5fb; --edge:#e2deec; --edge-soft:#ece9f3;
    --ink:#1d1930; --ink-dim:#5f5875; --ink-faint:#8d86a2;
    --brass:#8f6a1c; --brass-bg:rgba(143,106,28,.11); --sage:#3e7f4e; --sage-bg:rgba(62,127,78,.1);
    --wine:#b03248; --wine-bg:rgba(176,50,72,.08); --blue:#3d5f9c;
    --on-accent:#ffffff; --switch-off:#d6d1e2; --tip-bg:#1d1930;
    color-scheme:light;
  }
}
html, body { background:var(--bg) !important; }
body {
  padding-top:0 !important; color:var(--ink) !important;
  font-family:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
body button, body input, body select, body textarea { font-family:inherit !important; }
.epic-shell { padding-top:0 !important; background:transparent !important; }
.epic-shell > .container { max-width:1180px !important; }
.sbnav, .tbg-footer { --sb-max:1180px; }
@media (min-width:761px) { .sbnav-in, .tbg-footer-in { padding-left:20px !important; padding-right:20px !important; } }

/* ---------- page head ---------- */
.tbg-page { padding:28px 0 8px; }
.tbg-head { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--edge); }
.tbg-title { font-family:"Grenze Gotisch", Georgia, serif !important; font-weight:800; color:var(--brass); font-size:clamp(2.5rem, 6vw, 3.8rem); line-height:.95; margin:0 0 8px; letter-spacing:.01em; text-transform:none !important; }
.tbg-sub { margin:0; color:var(--ink-dim); font-size:15.5px; }
.tbg-help { display:inline-flex !important; align-items:center; gap:8px; padding:9px 16px !important; border-radius:999px !important; border:1px solid var(--brass) !important; background:var(--brass-bg) !important; color:var(--ink) !important; font-weight:600 !important; font-size:14px !important; cursor:pointer; text-decoration:none !important; }
.tbg-help svg { width:17px; height:17px; color:var(--brass); }

/* ---------- cards ---------- */
.tbg-card, #orderView, #resultsView, #layerChartPanel {
  background:var(--card) !important; border:1px solid var(--edge) !important; border-radius:var(--radius) !important;
  box-shadow:none !important; padding:18px 20px !important; margin:0 0 16px !important; color:var(--ink);
}
.tbg-sec-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.tbg-sec-head h2 { margin:0; font-size:19px !important; font-weight:700 !important; letter-spacing:-.01em; text-transform:none !important; font-family:inherit !important; }
.tbg-num { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--brass-bg); color:var(--brass); font-weight:800; font-size:14px; }
.tbg-optional { color:var(--ink-faint); font-size:13px; }
.tbg-spacer { flex:1; }
.tbg-include { font-size:13px; font-weight:600; color:var(--ink-dim); }
.tbg-info { position:relative; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; border:1px solid var(--ink-faint); color:var(--ink-dim); font-size:11px; font-weight:700; font-style:italic; cursor:help; }
.tbg-info::after { content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); width:min(280px, 80vw); background:var(--tip-bg); color:#eeeaf6; font-style:normal; font-weight:500; font-size:12.5px; line-height:1.45; padding:10px 12px; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .15s; z-index:40; }
.tbg-info:hover::after, .tbg-info:focus::after, .tbg-info.open::after { opacity:1; }

/* ---------- controls ---------- */
.tbg-btn, .tbg-page .workspace-actions button, #slotAccount button {
  font:inherit; font-size:13.5px !important; font-weight:600 !important; padding:8px 14px !important; border-radius:999px !important;
  border:1px solid var(--edge) !important; background:var(--panel-2) !important; color:var(--ink) !important; cursor:pointer; min-height:0 !important; height:auto !important; box-shadow:none !important;
}
.tbg-btn:hover, .tbg-page .workspace-actions button:hover:not(:disabled) { border-color:var(--brass) !important; }
.tbg-btn.tbg-small { padding:6px 12px !important; font-size:12.5px !important; }
.tbg-btn.tbg-danger { color:var(--wine) !important; }
.tbg-page button:disabled { opacity:.45; cursor:default; }
.tbg-page select, .tbg-page input[type="text"], .tbg-page input[type="number"], .tbg-page .epic-input, #tbgPresetName {
  background:var(--panel-2) !important; color:var(--ink) !important; border:1px solid var(--edge) !important; border-radius:10px !important;
  font-size:14.5px !important; box-shadow:none !important;
}
.tbg-page select { padding:9px 34px 9px 12px !important; height:auto !important; }
.tbg-page input:focus, .tbg-page select:focus { outline:2px solid var(--brass) !important; outline-offset:1px; border-color:transparent !important; }
.tbg-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.tbg-field > span, .tbg-page .battle-select-field > span, .tbg-page .field-label, .tbg-page .limit-name {
  font-size:12px !important; font-weight:700 !important; letter-spacing:.04em !important; text-transform:uppercase !important; color:var(--ink-dim) !important;
}
.tbg-seg { display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:999px; background:var(--panel-2); border:1px solid var(--edge); width:max-content; max-width:100%; }
.tbg-seg button { font:inherit; font-size:14px; font-weight:600; padding:8px 16px; border-radius:999px; border:0; background:transparent; color:var(--ink-dim); cursor:pointer; }
.tbg-seg button[aria-pressed="true"] { background:var(--brass); color:var(--on-accent); }
.tbg-seg button[hidden] { display:none; }
.tbg-switch { position:relative; width:42px; height:24px; border-radius:999px; border:0; background:var(--switch-off); cursor:pointer; flex:none; padding:0; }
.tbg-switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.tbg-switch[aria-checked="true"] { background:var(--sage); }
.tbg-switch[aria-checked="true"]::after { left:21px; }
.tbg-toggle-row { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:14px; }

/* ---------- account + presets ---------- */
#slotAccount .battle-select-grid { display:grid !important; grid-template-columns:1fr; gap:12px; margin:0 !important; }
#slotAccount .player-clan-primary { display:flex !important; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; }
#slotAccount .player-clan-primary > label { flex:1 1 220px; display:flex; flex-direction:column; gap:6px; }
#slotAccount .temple-setting { display:flex !important; gap:12px; align-items:flex-end; flex-wrap:wrap; }
#slotAccount .temple-setting label { display:flex; flex-direction:column; gap:6px; }
#slotAccount .temple-bonus-copy span { font-size:12px; color:var(--ink-faint); display:block; }
#slotAccount .temple-bonus-copy strong { font-size:18px; color:var(--ink); }
#slotAccount .workspace-actions { display:flex !important; flex-wrap:wrap; gap:6px; }
.tbg-presets { margin-top:16px; padding-top:16px; border-top:1px solid var(--edge-soft); display:flex; flex-direction:column; gap:10px; }
.tbg-presets .tbg-field { max-width:420px; }
.tbg-preset-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
#tbgPresetName { padding:8px 12px !important; flex:1 1 180px; max-width:260px; font-size:14px !important; }

/* ---------- battle ---------- */
.tbg-battle-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 20px; align-items:start; }
.tbg-slot:empty, .tbg-slot[hidden] { display:none; }
.tbg-slot label, #slotEnemy .pvp-enemy-field { display:flex; flex-direction:column; gap:6px; }
.tbg-slot .battle-select-help { font-size:12.5px; color:var(--ink-faint); }
.tbg-notes { margin-top:14px; }
.tbg-notes .battle-selection-summary { margin:0 !important; padding:12px 14px !important; border-radius:10px; background:var(--panel-2) !important; border:0 !important; }
.tbg-notes p { margin:0 0 4px !important; font-size:13.5px !important; color:var(--ink-dim) !important; }
#tbgParked, .tbg-page .battle-only-column-title, #slotLimits .setup-block > h3, .auto-update-note { display:none !important; }

/* ---------- limits ---------- */
#slotLimits .limit-list { display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:0 !important; }
#slotLimits .limit-row { background:var(--panel-2) !important; border:1px solid var(--edge) !important; border-radius:12px !important; padding:14px !important; display:grid !important; grid-template-columns:1fr 110px; gap:8px 10px; box-shadow:none !important; }
#slotLimits .limit-title-row { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; }
#slotLimits .limit-control { display:flex; flex-direction:column; gap:5px; }
#slotLimits .limit-control input { width:100%; padding:9px 10px !important; }
#slotLimits .setting-note { font-size:12.5px !important; color:var(--ink-faint) !important; margin:10px 0 0 !important; }
#slotLimits .auto-fill-toggle { font-size:12px; color:var(--ink-dim); display:inline-flex; gap:6px; align-items:center; }
#slotLimits .optimizer-merc-option { margin-top:10px; }
#slotLimits #arachneRow { display:none !important; }

/* ---------- troops + mercs ---------- */
.tbg-cat-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.tbg-cat { background:var(--panel-2); border:1px solid var(--edge); border-radius:12px; padding:14px; }
.tbg-cat-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.tbg-cat-name { font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.tbg-badge { font-size:12px; font-weight:700; color:var(--brass); background:var(--brass-bg); padding:3px 9px; border-radius:999px; font-variant-numeric:tabular-nums; }
.tbg-range { display:flex; gap:4px; }
.tbg-tick { flex:1 1 0; min-width:0; font:inherit; font-size:12px; font-weight:700; padding:8px 0; border-radius:8px; border:1px solid var(--edge); background:var(--card); color:var(--ink-faint); cursor:pointer; }
.tbg-tick.on { background:var(--brass-bg); color:var(--ink); border-color:transparent; }
.tbg-tick.lo, .tbg-tick.hi { background:var(--brass); color:var(--on-accent); }
.tbg-tick.locked { opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.tbg-tick:focus-visible, .tbg-chip:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
.tbg-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.tbg-chip { font:inherit; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; border:1px solid transparent; background:var(--brass-bg); color:var(--brass); cursor:pointer; }
.tbg-chip[aria-pressed="false"] { background:transparent; color:var(--ink-faint); border-color:var(--edge); text-decoration:line-through; }
.tbg-owned { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; color:var(--ink-dim); }
.tbg-owned select { padding:5px 30px 5px 10px !important; font-size:13px !important; }
.tbg-count { margin:10px 0 0; font-size:12.5px; color:var(--ink-faint); }
#tbgMercBody.off { opacity:.45; pointer-events:none; }
.tbg-merc-range { margin-bottom:12px; }
.tbg-merc-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.tbg-merc-list fieldset { border:1px solid var(--edge); border-radius:12px; padding:8px 12px 10px; margin:0; background:var(--panel-2); }
.tbg-merc-list legend { font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim); padding:0 4px; }
.tbg-merc { display:flex; gap:10px; align-items:flex-start; padding:6px 0; font-size:14px; cursor:pointer; }
.tbg-merc input { accent-color:var(--brass); width:16px; height:16px; margin-top:2px; }
.tbg-merc small { display:block; font-size:12px; color:var(--ink-faint); }

/* ---------- bonuses (his matrix, our colours) ---------- */
#slotBonuses .advanced-settings-column, #slotBonuses section.advanced { background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; margin:0 !important; }
#slotBonuses .bonus-matrix { background:var(--panel-2) !important; border:1px solid var(--edge) !important; border-radius:12px !important; overflow-x:auto; }
#slotBonuses h3 { font-size:15px !important; text-transform:none !important; letter-spacing:0 !important; margin:16px 0 8px !important; color:var(--ink) !important; }
#slotBonuses .setting-note { font-size:12.5px !important; color:var(--ink-faint) !important; }

/* ---------- kill order (custom), optimize, results, chart ---------- */
#orderView .topdown-panel-heading h2, #resultsView h2, #layerChartPanel .section-number { font-size:19px !important; text-transform:none !important; font-family:inherit !important; letter-spacing:-.01em !important; }
#orderView .section-kicker, #resultsView .section-kicker, #layerChartPanel .section-kicker { display:none !important; }
.tbg-calc:empty { display:none; }
.tbg-calc .selection-optimize-row { background:var(--card) !important; border:1px solid var(--edge) !important; border-radius:var(--radius) !important; padding:16px 20px !important; margin:0 0 16px !important; box-shadow:none !important; }
.tbg-calc .optimizer-guide-link { color:var(--brass) !important; }
.tbg-out { display:grid; grid-template-columns:minmax(0, 1fr); gap:0; }
#resultCalculator, #resetCalculator, .result-utility, #reviewSelection, #clearAllSelections { display:none !important; }
.tbg-page a:not(.tbg-help) { color:var(--brass); }

/* ---------- clan-only features stay hidden ---------- */
.player-clan-link-row, #encounterNormField, #encounterNormActions, #encounterPlanEntry, #useClanNorm, #manageClanLink,
#epicArmySharing, .encounter-actions, label[for="battleTypeSelect"], label[for="battleMethodSelect"] { display:none !important; }

/* ---------- toast ---------- */
.tbg-toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%, 20px); background:var(--tip-bg); color:#eeeaf6; padding:10px 18px; border-radius:999px; font-size:14px; font-weight:600; opacity:0; transition:opacity .2s, transform .2s; z-index:200; pointer-events:none; }
.tbg-toast.show { opacity:1; transform:translate(-50%, 0); }

/* ---------- small screens ---------- */
@media (max-width: 960px) { .tbg-out { grid-template-columns:1fr; } }
@media (max-width: 760px) {
  .tbg-page { padding-top:20px; }
  .tbg-card, #orderView, #resultsView, #layerChartPanel { padding:14px !important; }
  .tbg-battle-grid, .tbg-cat-grid { grid-template-columns:1fr; }
  #slotLimits .limit-list { grid-template-columns:1fr; }
  .tbg-seg { width:100%; } .tbg-seg button { flex:1 1 auto; padding:8px 10px; }
  .tbg-tick { font-size:11px; padding:7px 0; }
}
.tbg-foot-classic { margin-bottom:10px !important; }
.tbg-foot-classic a { font-weight:600; }

/* limits: three cards in a row (beats the engine page's battle-mode grid rules) */
body .tbg-page #slotLimits .setup-block { background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; grid-column:auto !important; }
body .tbg-page #slotLimits .limit-list { display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:12px !important; background:transparent !important; border:0 !important; padding:0 !important; }
body .tbg-page #slotLimits .limit-row { grid-template-columns:minmax(0, 1fr) 96px !important; grid-template-areas:"name autofill" "maximum fill" !important; align-items:end !important; border-bottom:1px solid var(--edge) !important; }
body .tbg-page #slotLimits .limit-title-row { display:contents !important; }
body .tbg-page #slotLimits .auto-fill-toggle { height:auto !important; justify-self:end; }
@media (max-width: 760px) { body .tbg-page #slotLimits .limit-list { grid-template-columns:1fr !important; } }
#tbgMercBody.off { opacity:1; pointer-events:auto; }
.tbg-merc-off { margin:0; font-size:14px; color:var(--ink-faint); }
html, body { overflow-x: clip; }
body .tbg-page #slotLimits .limit-row { grid-template-columns:minmax(0, 1fr) 118px !important; }
.tbg-page .percent-field input { padding-right:28px !important; }