/* Campaign Forge wizard (forge.html). Builds on style.css + settings.css. */
.fw { padding-bottom: 84px; }
.steps { position: sticky; top: calc(var(--top) + env(safe-area-inset-top)); z-index: 9; display: flex; gap: 4px; justify-content: center;
  padding: 10px 12px; background: rgba(22,18,28,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.steps button { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; padding: 7px 14px; border-radius: 999px;
  color: var(--muted); white-space: nowrap; }
.steps button b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--panel2); border: 1px solid var(--line); }
.steps button.on { color: var(--ink); background: var(--panel2); border-color: var(--line); }
.steps button.on b { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.steps button.done b { background: rgba(79,191,138,.25); border-color: var(--ok); color: #c9f0dc; }
.fwmain { max-width: 1040px; margin: 0 auto; padding: 22px 20px 30px; }
.fwnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; align-items: center; gap: 12px;
  padding: 12px max(20px, calc((100vw - 1040px) / 2 + 20px)) calc(12px + env(safe-area-inset-bottom));
  background: rgba(22,18,28,.95); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.fwnav #navHint { color: var(--muted); font-size: 13px; text-align: center; }
.fwnav #nextBtn { margin-left: auto; }
.seg.big button { padding: 10px 18px; font-size: 14.5px; }
.msg { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); translate: -50% 20px; opacity: 0; pointer-events: none; z-index: 40;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; font-size: 14px; max-width: 92vw;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: opacity .2s, translate .2s; }
.msg.on { opacity: 1; translate: -50% 0; } .msg.bad { border-color: var(--bad); color: #ffb39e; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--accent2); border-radius: 50%;
  animation: spin 1s linear infinite; vertical-align: -2px; } @keyframes spin { to { rotate: 360deg; } }

/* source */
.frlist { display: grid; gap: 12px; margin-top: 12px; }
.frcard { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel2); padding: 14px 16px; }
.frcard header { display: flex; align-items: center; gap: 10px; }
.frcard header b { font-size: 16px; flex: 1; }
.frcard .setting { color: #d9d0e6; font-size: 14px; line-height: 1.55; margin: 8px 0; }
.frcard .who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pcard { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); font-size: 13px; cursor: pointer; color: var(--ink); }
.pcard.on { border-color: var(--accent2); background: rgba(143,107,216,.22); }
.pcard .nv { color: #f0c98a; font-size: 11px; }
.pcard small { color: var(--muted); }
.ideas { display: grid; gap: 8px; margin-top: 10px; }
.ideas button { text-align: left; font-size: 14px; line-height: 1.45; background: var(--panel2); }
.ideas button b { display: block; margin-bottom: 2px; }

/* cast */
.acwrap { position: relative; }
.ac { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); overflow: hidden; max-height: 340px; overflow-y: auto; }
.ac button { display: flex; width: 100%; text-align: left; gap: 8px; align-items: baseline; border: none; border-radius: 0; background: transparent; padding: 9px 12px; }
.ac button:hover, .ac button.sel { background: rgba(143,107,216,.22); }
.ac small { color: var(--muted); }
.castlist { display: grid; gap: 12px; }
.ccrow { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 10px; }
.ccrow header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ccrow header b { font-size: 16px; }
.ccrow .tagline { color: var(--muted); font-size: 12.5px; }
.ccrow .grid { display: grid; grid-template-columns: 1.2fr .8fr 150px; gap: 8px; }
.ccrow .grid label, .grid2 label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.ccrow .grid label.w, .grid2 label.w { grid-column: 1 / -1; }
.bonds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bond-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); }
.bond-chip select { padding: 1px 4px; font-size: 12px; border-radius: 8px; }
.bond-chip button { padding: 0 7px; font-size: 12px; border: none; background: transparent; color: var(--muted); }
.bond-chip.neg { border-color: rgba(224,106,74,.45); } .bond-chip.pos { border-color: rgba(79,191,138,.45); }
.minor { color: #f0c98a; font-size: 12px; }
.suggest h3 { display: flex; align-items: center; gap: 8px; }
.sugg { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 10px 0; }
.sugg label { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--panel2);
  border: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.sugg label:has(input:checked) { border-color: var(--accent2); background: rgba(143,107,216,.16); }
.sugg label input { grid-row: span 2; margin-top: 2px; }
.sugg .why { color: var(--muted); font-size: 12.5px; }
.hbtn-file { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; font-size: 15px; }

/* style sliders */
.sliders { display: grid; gap: 14px 26px; }
.sliders.two { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sl { display: grid; gap: 4px; }
.sl .top { display: flex; align-items: baseline; gap: 8px; }
.sl .top b { font-size: 14px; flex: 1; }
.sl .top span { font-size: 13px; color: #d9c8ff; font-weight: 600; }
.sl input[type=range] { width: 100%; }
.sl .ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); gap: 4px; }
.sl .ticks i { font-style: normal; flex: 1; text-align: center; cursor: pointer; }
.sl .ticks i:first-child { text-align: left; } .sl .ticks i:last-child { text-align: right; }
.sl .ticks i.on { color: var(--ink); }
.sl .help { font-size: 12px; color: var(--muted); }
.mixbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--panel2); margin: 6px 0 16px; }
.mixbar i { display: block; height: 100%; transition: width .2s; }
.mixlegend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); margin: -8px 0 14px; }
.mixlegend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; background: var(--c); }

/* you + review */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.brief { white-space: pre-wrap; font-size: 12.5px; color: #cfc6dc; background: var(--panel2); padding: 12px; border-radius: 10px; max-height: 360px; overflow: auto; }
.rv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: 14px; }
.rv dt { color: var(--muted); } .rv dd { margin: 0; }
.warns { margin: 12px 0 0; padding-left: 18px; color: #f0c98a; font-size: 13px; }
.forgebox { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.steplog { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.steplog span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.steplog span.done { color: #c9f0dc; border-color: rgba(79,191,138,.5); } .steplog span.now { color: #fff; border-color: var(--accent2); }

@media (max-width: 760px) {
  .fwmain { padding: 16px 14px 24px; }
  .steps { justify-content: flex-start; }
  .steps button span { display: none; } .steps button.on span { display: inline; }
  .ccrow .grid, .grid2 { grid-template-columns: 1fr; }
  .rv { grid-template-columns: 1fr; gap: 2px; } .rv dd { margin-bottom: 8px; }
  .topbar #fwReset { padding: 8px 10px; font-size: 13px; }
  .fwnav { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .fwnav #navHint { display: none; }
  .acwrap { flex-basis: 100%; }
}