/* Scope: everything under #sbe-builder */
#sbe-builder { --gap:12px; --radius:12px; --bg:#fff; --ink:#111; --ink-sub:#333; --muted:#666;
  --brand:#0b6cf0; --brand-ink:#0a50b8; --line:#e6e6e6; --ok:#0aa360; --warn:#c25b00;
  color:var(--ink); background:transparent; font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#sbe-builder * { box-sizing: border-box; }
#sbe-builder .sbe-wrap { display:flex; gap:var(--gap); align-items:stretch; }
#sbe-builder .sbe-main { flex:1 1 auto; min-width:0; }
#sbe-builder .sbe-aside { width:310px; flex:0 0 310px; position:relative; }
#sbe-builder .card { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }

#sbe-builder .header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--gap); }
#sbe-builder .header h1 { font-size:1.25rem; margin:0; display:flex; gap:8px; align-items:center; }
#sbe-builder .controls { display:flex; gap:8px; flex-wrap:wrap; }
#sbe-builder button { border:1px solid var(--line); background:#f9f9f9; color:var(--ink); border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600; }
#sbe-builder button:hover { background:#fff; }
#sbe-builder .btn-primary { background:var(--brand); color:#fff; border-color:var(--brand); }
#sbe-builder .btn-primary:hover { background:var(--brand-ink); }
#sbe-builder .btn-ghost { background:transparent; }

#sbe-builder .progress { position:relative; height:10px; background:#f2f5fb; border-radius:999px; overflow:hidden; border:1px solid var(--line); margin-bottom:12px; }
#sbe-builder .progress-bar { height:100%; width:0%; background:linear-gradient(90deg, var(--brand), #2fc1ff); transition: width 200ms ease; }
#sbe-builder .progress-aria { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

#sbe-builder .grid { display:grid; grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) ); gap:12px; }
#sbe-builder .path { display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:var(--radius); padding:12px; background:#fff; transition: transform 150ms ease, box-shadow 150ms ease; cursor:pointer; }
#sbe-builder .path:hover { transform: translateY(-2px); box-shadow:0 3px 12px rgba(0,0,0,.06); }
#sbe-builder .path .title { font-weight:800; display:flex; gap:8px; align-items:center; }
#sbe-builder .path .problem { color:var(--muted); }

#sbe-builder .q { display:flex; flex-direction:column; gap:12px; }
#sbe-builder .q h2 { font-size:1.1rem; margin:0; }
#sbe-builder .choices { display:flex; flex-direction:column; gap:8px; }
#sbe-builder .choice { display:flex; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; }
#sbe-builder .choice input { width:20px; height:20px; }
#sbe-builder label { cursor:pointer; }
#sbe-builder .help { font-size:0.9rem; color:var(--muted); }

#sbe-builder .nav { display:flex; gap:8px; justify-content:space-between; align-items:center; }
#sbe-builder .nav-left, #sbe-builder .nav-right { display:flex; gap:8px; }
#sbe-builder .muted { color:var(--muted); }

#sbe-builder .seed { position:sticky; top:12px; }
#sbe-builder .seed h3 { margin:0 0 8px 0; font-size:1rem; }
#sbe-builder .seed .row { margin-bottom:8px; }
#sbe-builder .seed .label { font-weight:700; display:block; margin-bottom:2px; }
#sbe-builder .seed .pill { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:2px 8px; margin:2px 6px 2px 0; font-size:0.85rem; background:#f8f8f8; }

#sbe-builder .fade-in { animation: sbeFade .18s ease; }
@keyframes sbeFade { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:none;} }

#sbe-builder .tip { position:fixed; right:12px; bottom:12px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.12); padding:12px 14px; z-index:9999; max-width:320px; }
#sbe-builder .tip strong { display:block; margin-bottom:4px; }

#sbe-builder .range { display:flex; flex-direction:column; gap:8px; }
#sbe-builder .range input[type="range"] { width:100%; }
#sbe-builder .range .marks { display:flex; justify-content:space-between; font-size:.9rem; color:var(--muted); }

#sbe-builder textarea, #sbe-builder input[type="text"] { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; }
#sbe-builder textarea { min-height:140px; resize:vertical; }

#sbe-builder .space-link { background:#f7fbff; border:1px solid #dfefff; padding:10px 12px; border-radius:10px; font-size:.95rem; }

/* Mobile drawer for seed card */
@media (max-width: 980px) {
  #sbe-builder .sbe-wrap { flex-direction:column; }
  #sbe-builder .sbe-aside { width:auto; flex:unset; }
  #sbe-builder .seed { position:fixed; left:0; right:0; bottom:0; border-top-left-radius:12px; border-top-right-radius:12px; border:1px solid var(--line); border-bottom:none; background:#fff; transform: translateY(calc(100% - 44px)); transition: transform 180ms ease; z-index:999; }
  #sbe-builder .seed.open { transform: translateY(0%); }
  #sbe-builder .seed .drawer-bar { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
  #sbe-builder .seed .drawer-bar strong { font-size:1rem; }
  #sbe-builder .seed .drawer-content { padding:12px; max-height:45vh; overflow:auto; }
}

/* ---------- Immersive mode (Pottermore-like sorting) ---------- */
/* Toggle via .immersive on #sbe-builder */
#sbe-builder.immersive .header .controls { display:none !important; }
#sbe-builder.immersive .sbe-aside,
#sbe-builder.immersive .seed { display:none !important; }

/* Single-column, centered content */
#sbe-builder.immersive .sbe-wrap { display:block; }
#sbe-builder.immersive .sbe-main { max-width:820px; margin:0 auto; }
#sbe-builder.immersive .header h1 { justify-content:center; }
#sbe-builder.immersive .progress { max-width:820px; margin:8px auto 16px; }
#sbe-builder.immersive .nav { max-width:820px; margin:0 auto; }

/* Start screen: show only the first four paths */
#sbe-builder.immersive .grid .path:nth-child(n+5) { display:none; }

/* Hide any seed drawer affordance on small screens */
@media (max-width: 980px) {
  #sbe-builder.immersive .seed,
  #sbe-builder.immersive .seed.open,
  #sbe-builder.immersive .seed .drawer-bar,
  #sbe-builder.immersive .seed .drawer-content { display:none !important; }
}

/* Print (Export Plan) */
@media print {
  #sbe-builder { color:#000; }
}