/* onboarding.css — character-creation wizard (player, docked bottom-left) +
   field spotlight + GM author chip/editor. Matches the site idiom (Eurostile
   --head, mono --mono, amber/green/red accents). Kept below the combat overlay. */

/* Spotlight: outline pulse on a referenced field/section (no layout shift) */
.onb-spot { outline:2px solid var(--yellow,#b8860b); outline-offset:2px; border-radius:2px; animation:onb-pulse 1.3s ease-out 2; }
@keyframes onb-pulse {
  0%   { box-shadow:0 0 0 0 rgba(184,134,11,.55); }
  100% { box-shadow:0 0 0 12px rgba(184,134,11,0); }
}

/* ── Player wizard panel (docked bottom-left; buy-tray is bottom-right) ── */
.onb-panel { position:fixed; left:14px; bottom:14px; z-index:9000; width:300px; max-width:88vw; background:var(--bg,#fff); border:2px solid var(--border,#111); box-shadow:0 10px 30px rgba(0,0,0,.4); font-family:var(--mono,monospace); }
.onb-panel.collapsed { width:auto; border:none; background:transparent; box-shadow:none; }
.onb-tab { background:#111; color:#fff; border:none; font-family:var(--mono,monospace); letter-spacing:1px; font-size:12px; padding:8px 14px; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.4); }
.onb-tab:hover { background:#333; }
.onb-head { display:flex; align-items:center; gap:8px; background:#111; color:#fff; padding:8px 12px; }
.onb-htitle { font-family:var(--mono,monospace); font-weight:700; letter-spacing:1px; font-size:13px; flex:1; }
.onb-progress { font-size:11px; color:var(--yellow,#b8860b); }
.onb-min { background:transparent; border:1px solid #555; color:#ddd; cursor:pointer; font-size:11px; padding:1px 7px; }
.onb-min:hover { background:#fff; color:#000; }
.onb-step-title { font-family:var(--mono,monospace); font-weight:700; letter-spacing:.5px; font-size:14px; padding:12px 14px 4px; color:var(--text,#111); }
.onb-step-body { font-size:13px; line-height:1.65; color:var(--text,#111); padding:0 14px 12px; max-height:42vh; overflow:auto; }
.onb-chip { background:rgba(184,134,11,.14); color:var(--yellow,#b8860b); border-bottom:1px solid var(--yellow,#b8860b); padding:0 4px; border-radius:2px; cursor:pointer; font-family:var(--mono,monospace); font-size:12px; white-space:nowrap; }
.onb-chip:hover { background:var(--yellow,#b8860b); color:#111; }
.onb-chip-bad { background:var(--red,#c0392b); color:#fff; }
/* progress bar + per-step done */
.onb-bar { height:4px; background:#e4e4e4; margin:0 14px 2px; }
.onb-bar-fill { height:100%; background:var(--green,#1a7a2e); transition:width .2s ease; }
.onb-done { display:flex; align-items:center; gap:7px; font-size:12px; color:#666; padding:2px 14px 8px; cursor:pointer; }
.onb-done input { cursor:pointer; }
.onb-step-done { text-decoration:line-through; color:#8a8a8a; }
.onb-nav { display:flex; gap:6px; padding:10px 14px; border-top:1px solid #eee; }
.onb-btn { flex:1; font-family:var(--mono,monospace); font-size:12px; padding:7px; border:1px solid #111; background:#fff; color:#111; cursor:pointer; }
.onb-btn:hover:not([disabled]) { background:#111; color:#fff; }
.onb-btn[disabled] { opacity:.4; cursor:default; }
.onb-btn-spot { border-color:var(--yellow,#b8860b); color:#7a5a0a; flex:0 0 auto; }
.onb-btn-spot:hover { background:var(--yellow,#b8860b); color:#111; }

/* ── GM author chip (in the Identity section header) ── */
.onb-edit-chip { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--yellow,#b8860b); color:#111; font-size:11px; cursor:pointer; margin:0 6px; }
.onb-edit-chip:hover { background:#caa022; }

/* ── "?" help button (next to ⚙) + default-template popup ── */
.onb-help-btn { font-weight:700; }
.onb-help-pop { font-family:var(--mono,monospace); font-size:13px; }
.onb-help-intro { margin:0 0 14px; line-height:1.6; color:var(--text,#111); }
.onb-help-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.onb-help-lbl { min-width:74px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#888; }
.onb-seg-grp { display:inline-flex; border:1px solid var(--border,#111); }
.onb-seg { font-family:var(--mono,monospace); font-size:12px; padding:6px 12px; border:none; background:var(--bg,#fff); color:var(--text,#111); cursor:pointer; border-right:1px solid var(--border,#111); }
.onb-seg:last-child { border-right:none; }
.onb-seg.active { background:#111; color:#fff; }
.onb-seg:not(.active):hover { background:#eee; }
.onb-help-go { margin-top:14px; width:100%; font-family:var(--mono,monospace); font-size:13px; letter-spacing:.5px; padding:10px; border:1px solid var(--yellow,#b8860b); background:var(--yellow,#b8860b); color:#111; cursor:pointer; }
.onb-help-go:hover { background:#caa022; }

/* ── GM author editor — docked right sidebar, NON-blocking (explore sheet while authoring) ── */
.onb-editor { position:fixed; top:0; right:0; bottom:0; z-index:9100; width:360px; max-width:92vw; display:flex; flex-direction:column; background:var(--bg,#fff); border-left:2px solid var(--border,#111); box-shadow:-8px 0 24px rgba(0,0,0,.35); }
.onb-ed-head { display:flex; align-items:center; gap:8px; background:#111; color:#fff; padding:9px 12px; flex:0 0 auto; }
.onb-ed-htitle { flex:1; font-family:var(--mono,monospace); font-weight:700; letter-spacing:1px; font-size:12px; }
.onb-ed-x, .onb-ed-prev { background:transparent; border:1px solid #555; color:#ddd; cursor:pointer; font-size:11px; padding:2px 8px; font-family:var(--mono,monospace); }
.onb-ed-x:hover, .onb-ed-prev:hover { background:#fff; color:#000; }
.onb-ed-scroll { flex:1; overflow:auto; padding:12px; }
.onb-ed { font-family:var(--mono,monospace); font-size:13px; }
.onb-ed-en { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.onb-ed-maintitle { width:100%; box-sizing:border-box; padding:6px 8px; border:1px solid #111; margin-bottom:10px; font-family:var(--mono,monospace); }
.onb-ed-steps { display:flex; flex-direction:column; gap:10px; }
.onb-ed-step { border:1px solid var(--border,#111); border-left:3px solid var(--yellow,#b8860b); padding:8px; }
.onb-ed-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.onb-ed-n { font-family:var(--head,sans-serif); color:var(--yellow,#b8860b); min-width:16px; }
.onb-ed-title { flex:1; min-width:0; padding:5px 7px; border:1px solid #ccc; font-family:var(--mono,monospace); }
.onb-ed-mini { background:#1a1a1a; color:#ddd; border:1px solid #555; cursor:pointer; font-size:11px; padding:3px 7px; }
.onb-ed-mini:hover { background:#000; color:#fff; }
.onb-ed-del { color:#e07b6f; border-color:#7a2a22; }
.onb-ed-body { width:100%; box-sizing:border-box; border:1px solid #ddd; padding:6px 8px; font-family:var(--mono,monospace); font-size:12px; resize:vertical; }
.onb-ed-row2 { display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
.onb-ed-row2 label { font-size:11px; color:#666; display:flex; align-items:center; gap:4px; }
.onb-ed-row2 select { font-family:var(--mono,monospace); font-size:11px; padding:3px 5px; border:1px solid #111; max-width:160px; }
.onb-ed-spots, .onb-ed-conds { margin-top:6px; padding-top:6px; border-top:1px dashed #ddd; }
.onb-ed-blockhdr { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.onb-ed-pick { border-color:var(--yellow,#b8860b); color:var(--yellow,#b8860b); }
.onb-ed-pick:hover { background:var(--yellow,#b8860b); color:#111; }
.onb-ed-spotrow { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.onb-ed-spotrow select { flex:1; font-family:var(--mono,monospace); font-size:11px; padding:3px 5px; border:1px solid #111; min-width:0; }
.onb-ed-cond { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap; }
.onb-ed-condlbl { font-size:11px; color:#666; }
.onb-ed-cond select { font-family:var(--mono,monospace); font-size:11px; padding:3px 5px; border:1px solid #111; max-width:130px; }
.onb-ed-cmode { max-width:100px; }
.onb-ed-cop { max-width:84px !important; }
.onb-ed-cval { font-family:var(--mono,monospace); font-size:11px; padding:3px 6px; border:1px solid #ccc; width:80px; }
/* "Pick on sheet" mode */
body.onb-picking, body.onb-picking .cs * { cursor:crosshair !important; }
body.onb-picking .cs *:hover { outline:2px solid var(--yellow,#b8860b); outline-offset:1px; }
#onb-pick-hint { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:9600; background:#111; color:#fff; font-family:var(--mono,monospace); font-size:12px; letter-spacing:.5px; padding:8px 16px; border:1px solid var(--yellow,#b8860b); box-shadow:0 6px 20px rgba(0,0,0,.5); }
.onb-ed-add { margin-top:10px; font-family:var(--mono,monospace); font-size:12px; padding:7px 12px; border:1px solid var(--green,#1a7a2e); color:var(--green,#1a7a2e); background:#fff; cursor:pointer; }
.onb-ed-add:hover { background:var(--green,#1a7a2e); color:#fff; }
.onb-ed-hint { font-size:11px; color:#999; margin-top:10px; line-height:1.5; }
.onb-ed-empty { font-size:12px; color:#999; font-style:italic; padding:8px 0; }