/*  ════════════════════════════════════════════════════════════════════════
    RE·STATICA — SOLVE WIZARD styles (ported from atlas_solve_wizard.html).
    Everything is scoped under .rsw (the overlay root) so the prototype's
    generic class names (.frame/.body/.nav/.btn/.stage/...) never collide with
    the app's CSS. Mounted full-screen by assets/solve_wizard.js.
    ════════════════════════════════════════════════════════════════════════  */
.rsw{
  --primary:#3A8DCC; --secondary:#5FB87A; --tertiary:#E57A3D; --quaternary:#C9A832; --quinary:#B87DA8;
  --family:#b9a8ff;
  --ink:#efecf6; --ink-soft:#c4bed3; --ink-faint:#8b8499;
  --serif:"Marcellus","Cormorant Garamond",Georgia,serif;
  --read:"Cormorant Garamond",Georgia,serif;
  --body:"Inter","Segoe UI",system-ui,sans-serif;
  --acc:var(--family);
  --glow:0 0 6px;
  /*  DOCK IN THE PANEL BELOW THE APP NAVBAR (top is set precisely in JS = navbar height).
      z stays ABOVE the app content so the panel actually shows; the top offset (not a low z)
      is what keeps the navbar visible + its buttons clickable, since they're never overlapped.  */
  position:fixed; top:58px; left:0; right:0; bottom:0; z-index:8000; overflow:hidden;
  font-family:var(--body); color:var(--ink);
  /*  PROGRESSIVE OPEN — the panel eases up into place instead of hard-cutting to a new page.  */
  animation:rsw-enter .42s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rsw-enter{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
body.rsw-open{ overflow:hidden; }
.rsw *{ box-sizing:border-box; }

.rsw .rsw-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(46% 54% at 50% 50%, rgba(3,3,6,.58), rgba(3,3,6,.24) 52%, rgba(3,3,6,0) 76%); }
/*  CONTINUATION FROM THE ATLAS — the wizard paints no sky; the full-screen
    Atlas it launched from keeps rendering behind this overlay (same galaxy,
    not a new one). Hide the Atlas's interactive chrome so only the field shows.  */
body.rsw-open .atlas-ui{ opacity:0 !important; pointer-events:none !important; }
/*  The wizard drives the REAL Solver (reads its schema, runs the solve), so the
    Solver columns hold live/rendered content that bleeds through the translucent
    veil on input steps — most visibly AFTER a solve, when you stepper back to an
    input step and the full solution + tools rail show behind. Hide every column
    in the main row, then re-show ONLY the Atlas starfield, so behind the wizard
    there is just the starfield + galaxy backdrop (a sibling, untouched).
    visibility (not display) keeps the DOM laid out so the wizard can still read
    #solution_div_id / the section inputs and fire solve_button.click(); it also
    kills the click-through the pointer-events:none veil otherwise allows.  */
body.rsw-open #main_container_row_id > *{ visibility:hidden !important; }
body.rsw-open #atlas_column_id{ visibility:visible !important; }
.rsw .lift{ text-shadow:0 1px 22px rgba(4,4,8,.95), 0 0 30px rgba(4,4,8,.8); }

.rsw .rsw-back{ position:absolute; top:18px; left:22px; z-index:4; display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 16px 0 13px; border-radius:999px;
  border:1px solid rgba(185,168,255,.18); background:rgba(16,15,24,.4); color:var(--ink-soft); line-height:1;
  cursor:pointer; transition:.2s; }
.rsw .rsw-back .ar{ font-size:15px; }
.rsw .rsw-back .bl{ font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; }
.rsw .rsw-back:hover{ color:var(--ink); border-color:color-mix(in srgb,var(--acc) 50%,transparent); background:color-mix(in srgb,var(--acc) 14%,rgba(16,15,24,.5)); }
.rsw .rsw-back:hover .ar{ transform:translateX(-2px); transition:.2s; }

.rsw .frame{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; max-width:1180px; margin:0 auto; padding:26px 40px 28px; }

.rsw .topbar{ flex:0 0 auto; display:flex; align-items:baseline; justify-content:center; margin-top:20px; }
.rsw .method{ text-align:center; }
.rsw .method .m{ font-family:var(--serif); font-size:31px; line-height:1.1; letter-spacing:.3px; }   /* the method name — the step-1 hero */
.rsw .method .c{ font-size:11px; letter-spacing:2.8px; text-transform:uppercase; color:var(--acc); margin-top:6px; transition:.4s; }

/* stepper — supporting nav: compact line-art glyph per chapter, arrow between, small label below (icon row aligns with the arrows) */
.rsw .rail{ flex:0 0 auto; display:flex; justify-content:center; margin-top:6px; }
.rsw .chapters{ display:flex; align-items:flex-start; list-style:none; margin:0; padding:0; position:relative; }
.rsw .chap{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 13px; cursor:pointer; transition:.3s; position:relative; }
.rsw .chap .ic{ height:24px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); transition:color .3s, filter .3s; }
.rsw .chap .ic svg{ width:22px; height:22px; display:block; }
.rsw .chap .nm{ font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); transition:.3s; white-space:nowrap; }
.rsw .chap:hover .ic{ color:var(--ink-soft); }
.rsw .chap:hover .nm{ color:var(--ink-soft); }
.rsw .chap.done .ic{ color:var(--cacc); }
.rsw .chap.done .nm{ color:var(--ink-soft); }
.rsw .chap.active .ic{ color:var(--cacc); filter:drop-shadow(0 0 5px color-mix(in srgb,var(--cacc) 45%,transparent)); }
.rsw .chap.active .nm{ color:var(--ink); font-weight:500; }
.rsw .sep{ height:24px; display:flex; align-items:center; color:var(--ink-faint); opacity:.35; }
.rsw .sep .arr{ width:15px; height:15px; display:block; }

.rsw .body{ flex:1 1 auto; display:flex; align-items:flex-start; justify-content:center; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.rsw .body::-webkit-scrollbar{ width:0; height:0; display:none; }
.rsw .stage-wrap{ flex:1 1 auto; display:flex; align-items:flex-start; justify-content:center; margin-top:clamp(8px,2.5vh,30px); }
.rsw .stage{ width:min(520px,100%); min-width:0; padding:6px 10px; }   /* COMPACT — keep the focus centred, never wide. min-width:0 stops the flex item ballooning past its cap. */
.rsw .stage:has(.act--roadmap){ width:min(580px,100%); }   /* the picker needs room for two columns; .roadmap's max-width keeps it from spreading on wide screens */
.rsw .act{ animation:rsw-rise .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rsw-rise{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }

.rsw .act-head{ display:flex; align-items:center; justify-content:center; margin-bottom:2px; }
.rsw .read-badge{ display:inline-flex; align-items:center; gap:7px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); }
.rsw .read-badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--ink-faint); }
.rsw h2.title{ font-family:var(--serif); font-weight:400; font-size:25px; letter-spacing:.4px; margin:4px 0 16px; text-align:center; line-height:1.22; }
.rsw .prompt{ font-family:var(--read); font-style:italic; font-size:17px; line-height:1.5; color:var(--ink-soft); margin:0 auto 22px; max-width:54ch; text-align:center; }

/* intro */
.rsw .intro-def{ font-style:normal; font-weight:500; font-size:16.5px; line-height:1.66; letter-spacing:.12px; color:var(--ink-soft); max-width:54ch; margin:0 auto 2px; }
.rsw .spec{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:22px; padding-top:20px; border-top:1px solid rgba(185,168,255,.12); }
.rsw .spec-cell{ position:relative; text-align:center; padding:0 18px; }
.rsw .spec-cell + .spec-cell::before{ content:""; position:absolute; left:0; top:1px; bottom:1px; width:1px; background:rgba(185,168,255,.10); }
.rsw .spec-cell .sk{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); }
.rsw .spec-cell .sv{ font-family:var(--serif); font-size:16.5px; color:var(--ink-soft); margin-top:8px; line-height:1.3; }
.rsw .alt-note{ margin:18px auto 0; max-width:44ch; text-align:center; font-family:var(--read); font-style:italic; font-size:14.5px; line-height:1.55; color:var(--ink-faint); }
.rsw .alt-note b{ font-style:normal; font-weight:500; color:var(--ink-soft); }
.rsw .intro-def .katex{ font-size:1em; }   /* inline math in the per-method definition */

/*  ════════════════════════════════════════════════════════════════════════
    ROADMAP — compact, CONTAINED section picker (not full-bleed). One subtle panel
    holds the group blocks flowing in two columns; each row = small checkbox +
    section glyph + label. Rust uppercase group eyebrows, single blue accent.
    ════════════════════════════════════════════════════════════════════════  */
.rsw .act--roadmap .title{ margin-bottom:18px; }
/*  NO card/panel container — the groups sit straight on the deep-space backdrop,
    in a TIGHT centred block (columns close together, not pushed to the edges).  */
.rsw .roadmap{ width:100%; max-width:560px; margin:0 auto; }
.rsw .rm-bar{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,.07); }
.rsw .pick-note{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.2px; color:var(--ink-faint); }
.rsw .pick-note .dot{ width:5px; height:5px; border-radius:50%; background:var(--acc); box-shadow:0 0 7px color-mix(in srgb,var(--acc) 65%,transparent); }
.rsw .pick-note b{ color:var(--ink); font-weight:600; }
.rsw .selectall{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.rsw .selectall .box{ width:16px; height:16px; border-radius:4px; border:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent); display:flex; align-items:center; justify-content:center; color:transparent; transition:.15s; }
.rsw .selectall .box svg{ width:10px; height:10px; }
.rsw .selectall:hover .box{ border-color:color-mix(in srgb,var(--acc) 55%,transparent); }
.rsw .selectall.on .box{ background:var(--acc); border-color:var(--acc); color:#fff; }
.rsw .selectall .lab{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-soft); }

.rsw .rm-cols{ columns:2; column-gap:26px; }
.rsw .rm-group{ break-inside:avoid; margin-bottom:16px; }
.rsw .rm-head{ display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.rsw .rm-ic{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--tertiary); opacity:.85; }
.rsw .rm-ic svg{ width:13px; height:13px; }
.rsw .rm-g{ font:600 10px/1 var(--body); letter-spacing:1.6px; text-transform:uppercase;
  color:color-mix(in srgb,var(--tertiary) 80%,var(--ink)); }
/*  SECTION ROW — small FILLED checkbox + glyph + label (matches the compact mock).  */
.rsw .sec{ display:flex; align-items:center; gap:9px; width:100%; padding:5px 6px; border:0; border-radius:7px; cursor:pointer; user-select:none; transition:background .15s, color .15s; background:transparent; text-align:left; color:var(--ink-soft); font-family:var(--body); font-size:13.5px; }
.rsw .sec:hover{ background:rgba(255,255,255,.035); color:var(--ink); }
.rsw .sec-box{ width:16px; height:16px; flex:0 0 auto; border-radius:4px; border:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent); display:flex; align-items:center; justify-content:center; color:transparent; transition:.15s; }
.rsw .sec-box svg{ width:10px; height:10px; }
.rsw .sec.on .sec-box{ background:var(--acc); border-color:var(--acc); color:#fff; }
.rsw .sec-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rsw .sec.on .sec-name{ color:var(--ink); }

/*  DATA SOURCE — a clean centred option LIST (radio rows), NOT cards. The
    Example/Custom switch is an underline toggle, not boxed buttons.  */
.rsw .src-toggle{ display:flex; justify-content:center; gap:26px; margin-bottom:20px; }
.rsw .src-toggle button{ padding:6px 2px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-faint); font-family:var(--body); font-size:13.5px; letter-spacing:.4px; cursor:pointer; transition:.15s; }
.rsw .src-toggle button:hover{ color:var(--ink-soft); }
.rsw .src-toggle button.on{ color:var(--ink); border-bottom-color:var(--acc); }
.rsw .srcs{ display:flex; flex-direction:column; gap:1px; max-width:340px; margin:0 auto; }
.rsw .src{ display:flex; align-items:center; gap:11px; padding:8px 8px; border:0; border-radius:8px; background:transparent; cursor:pointer; transition:background .15s; }
.rsw .src::before{ content:""; flex:0 0 auto; width:15px; height:15px; border-radius:50%; border:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent); transition:.15s; }
.rsw .src:hover{ background:rgba(255,255,255,.035); }
.rsw .src:hover::before{ border-color:color-mix(in srgb,var(--acc) 55%,transparent); }
.rsw .src.on::before{ border-color:var(--acc); background:radial-gradient(circle at 50% 50%, var(--acc) 0 42%, transparent 47%); }
.rsw .src .st{ font-family:var(--read); font-size:18px; line-height:1.3; color:var(--ink-soft); }
.rsw .src.on .st{ color:var(--ink); }
.rsw .src .sd{ display:none; }
.rsw .src-note{ font-family:var(--read); font-style:italic; font-size:15px; color:var(--ink-soft); text-align:center; padding:6px 2px; }

/*  HYPOTHESIS — a compact centred column with proper section headings:
    TEST DIRECTION (options, selected = OUTLINE) then CONFIDENCE LEVEL (heading →
    input → select buttons).  */
.rsw .hyp{ max-width:440px; margin:0 auto; }
.rsw .field-label{ font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; }
/*  DIRECTION — every option is a CARD (faint border); selected = accent border + tint.  */
.rsw .dir-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:0 0 26px; }
.rsw .dir-card{ padding:13px 6px 11px; border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:11px; background:rgba(255,255,255,.014); cursor:pointer; text-align:center; transition:border-color .15s, background .15s; }
.rsw .dir-card:hover{ border-color:color-mix(in srgb,var(--acc) 40%,transparent); }
.rsw .dir-card.on{ border-color:var(--acc); background:color-mix(in srgb,var(--acc) 8%,transparent); }
.rsw .dir-card .t{ font-size:14px; font-weight:500; color:var(--ink-soft); transition:color .15s; }
.rsw .dir-card.on .t{ color:var(--acc); }
.rsw .dir-card .f{ font-family:var(--read); font-style:italic; font-size:14px; color:var(--ink-faint); margin-top:5px; }
.rsw .dir-card .f sub{ font-size:.62em; vertical-align:-.25em; }
.rsw .dir-card.on .f{ color:var(--acc); }
.rsw .tail{ display:block; width:46px; height:28px; margin:0 auto 8px; background-color:rgba(207,201,218,.5); transition:background-color .2s; mask-repeat:no-repeat; mask-position:center; mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain; }
.rsw .dir-card.on .tail{ background-color:var(--acc); }
.rsw .tail--left{ mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='c'%3E%3Crect x='0' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23c)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='c'%3E%3Crect x='0' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23c)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); }
.rsw .tail--right{ mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='c'%3E%3Crect x='22' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23c)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='c'%3E%3Crect x='22' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23c)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); }
.rsw .tail--two{ mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='l'%3E%3Crect x='0' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3CclipPath id='r'%3E%3Crect x='22' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23l)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23r)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3CclipPath id='l'%3E%3Crect x='0' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3CclipPath id='r'%3E%3Crect x='22' y='0' width='14' height='22'/%3E%3C/clipPath%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23l)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20 Z' fill='black' opacity='0.55' clip-path='url(%23r)'/%3E%3Cpath d='M 2 20 C 13 20 13 4 18 4 C 23 4 23 20 34 20' stroke='black' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); }

/*  CONFIDENCE LEVEL — heading (click ▾ to switch mode) → input → select buttons.  */
.rsw .sig{ margin:0; padding:0; }
.rsw .sig-label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.rsw .sig-label .car{ font-size:10px; color:var(--acc); }
.rsw .sig-val{ display:block; width:100%; box-sizing:border-box; font-family:var(--read); font-size:19px; color:var(--ink);
  background:rgba(0,0,0,.22); border:1px solid color-mix(in srgb,var(--ink) 18%,transparent); border-radius:9px;
  padding:9px 14px; margin:0 0 16px; text-align:left; transition:border-color .15s; }
.rsw .sig-val:focus{ outline:none; border-color:color-mix(in srgb,var(--acc) 55%,transparent); }
.rsw .sig-val[readonly]{ color:var(--ink-soft); }
/*  SELECT BUTTONS — outlined; selected = accent outline (matches the direction).  */
.rsw .pills{ display:flex; gap:10px; justify-content:flex-start; }
.rsw .pill{ flex:0 0 auto; text-align:center; font-size:14px; padding:8px 20px; border-radius:8px; cursor:pointer; transition:border-color .15s, color .15s; border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); color:var(--ink-faint); font-variant-numeric:tabular-nums; background:transparent; }
.rsw .pill:hover{ border-color:color-mix(in srgb,var(--acc) 42%,transparent); color:var(--ink-soft); }
.rsw .pill.on{ border-color:var(--acc); color:var(--ink); }
.rsw .mu-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.rsw .mu-row input{ width:96px; font-family:var(--read); font-size:18px; color:var(--ink); background:rgba(0,0,0,.2); border:1px solid rgba(185,168,255,.12); border-radius:9px; padding:8px 12px; }

/* example data: muted, not editable, warns on hover */
.rsw .locked{ position:relative; opacity:.72; cursor:not-allowed; }
.rsw .locked *{ pointer-events:none; }
.rsw .locked::after{ content:"Example data, use Custom to edit"; position:absolute; top:-36px; left:50%;
  transform:translateX(-50%) translateY(4px); white-space:nowrap; font-family:var(--body); font-size:9.5px;
  letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); background:rgba(16,15,24,.96);
  border:1px solid color-mix(in srgb,var(--acc) 34%,transparent); border-radius:8px; padding:6px 11px;
  opacity:0; transition:opacity .18s,transform .18s; pointer-events:none; box-shadow:0 8px 22px rgba(0,0,0,.55); z-index:5; }
.rsw .locked:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* data inputs we feed — compact centred column, no boxes around the group */
.rsw .input-field{ max-width:440px; margin:0 auto 18px; }
.rsw .act > .data-foot{ text-align:center; }
.rsw .input-label{ font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; display:block; }
.rsw .input-line{ width:100%; font-family:var(--read); font-size:17px; color:var(--ink); background:rgba(0,0,0,.26); border:1px solid rgba(185,168,255,.22); border-radius:9px; padding:11px 14px; transition:border-color .18s; }
.rsw .input-line::placeholder{ color:var(--ink-soft); opacity:.5; font-style:italic; }
.rsw .input-line:focus{ outline:none; border-color:color-mix(in srgb,var(--acc) 52%,transparent); }
.rsw .input-line[readonly]{ color:var(--ink-soft); font-style:italic; opacity:.9; }
.rsw .data-foot{ font-size:12px; color:var(--ink-faint); margin-top:6px; }

/*  ════════════════════════════════════════════════════════════════════════
    INSIGHTS (Review step) — 1:1 with the Solver's Insights panel: a sliders
    header + subtitle, uppercase group labels, CHECKBOX Learning Aids, plain
    RADIO Solution Flow (no boxes), a quiet stepper Rounding. Single accent
    (the chapter --acc) on the selected/checked state only; everything else is
    outline, matching the Solver's elegant-minimal language.
    ════════════════════════════════════════════════════════════════════════  */
.rsw .rsw-ins{ text-align:left; margin:22px auto 0; max-width:420px; padding-top:18px;
  border-top:1px solid rgba(185,168,255,.10); }
.rsw .rsw-ins-head{ display:flex; align-items:center; gap:9px; }
.rsw .rsw-ins-ic{ font-size:15px; color:var(--acc); }
.rsw .rsw-ins-ttl{ font:600 12px/1 var(--body); letter-spacing:2.6px; text-transform:uppercase; color:var(--acc); }
.rsw .rsw-ins-sub{ font-family:var(--read); font-style:italic; font-size:13px; color:var(--ink-faint); margin:6px 0 0; }
.rsw .ins-grp{ margin-top:17px; }
.rsw .ins-grp .field-label{ margin-bottom:8px; }
.rsw .ins-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 36px; align-items:start; }

/*  LEARNING AIDS — checkbox rows. Same transparent box + accent CHECK as the
    Roadmap (no solid fill), for one calm checkbox language across the wizard.  */
.rsw .la-check{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
  font-size:13.5px; color:var(--ink-soft); padding:5px 0; transition:color .15s; }
.rsw .la-check:hover{ color:var(--ink); }
.rsw .la-check .cbox{ flex:0 0 auto; width:15px; height:15px; border-radius:4px; color:transparent; opacity:.5;
  border:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent);
  display:flex; align-items:center; justify-content:center; transition:.15s; }
.rsw .la-check .cbox svg{ width:11px; height:11px; }
.rsw .la-check:hover .cbox{ opacity:.9; border-color:color-mix(in srgb,var(--acc) 55%,transparent); }
.rsw .la-check.on{ color:var(--ink); }
.rsw .la-check.on .cbox{ opacity:1; border-color:color-mix(in srgb,var(--acc) 70%,transparent); color:var(--acc); }
.rsw .la-check i{ font-size:14px; width:16px; text-align:center; color:var(--ink-faint); transition:color .15s; }
.rsw .la-check.on i{ color:color-mix(in srgb,var(--acc) 72%,var(--ink)); }

/*  SOLUTION FLOW — plain radio rows (no boxes); selected fills its dot.  */
.rsw .flow-list{ display:flex; flex-direction:column; gap:1px; }
.rsw .flow-row{ display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none;
  font-size:13.5px; color:var(--ink-soft); padding:6px 0; transition:color .15s; }
.rsw .flow-row:hover{ color:var(--ink); }
.rsw .flow-row .rdot{ flex:0 0 auto; width:16px; height:16px; border-radius:50%; position:relative;
  border:1.5px solid color-mix(in srgb,var(--ink) 26%,transparent); transition:.15s; }
.rsw .flow-row.on{ color:var(--ink); }
.rsw .flow-row.on .rdot{ border-color:var(--acc); }
.rsw .flow-row.on .rdot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--acc); }

/*  ROUNDING PRECISION — quiet stepper; − / + light up on hover, value in the reading serif.  */
.rsw .round-row{ display:inline-flex; align-items:center; border:1px solid rgba(185,168,255,.14); border-radius:10px;
  overflow:hidden; background:rgba(20,18,30,.20); }
.rsw .round-row button{ background:transparent; border:0; color:var(--ink-soft); font-size:15px; line-height:1; padding:7px 15px; cursor:pointer; transition:.18s; }
.rsw .round-row button:hover{ color:var(--acc); background:color-mix(in srgb,var(--acc) 12%,transparent); }
.rsw .round-val{ font-family:var(--read); font-size:13px; color:var(--ink); padding:0 14px; min-width:140px; text-align:center; border-left:1px solid rgba(185,168,255,.10); border-right:1px solid rgba(185,168,255,.10); }

/* solve + result */
.rsw .opt-split{ display:grid; grid-template-columns:1fr auto; gap:14px 36px; align-items:start; margin-top:14px; }
.rsw .opt-split .round-row{ margin-top:2px; }
.rsw .solve-divider{ border-top:1px solid rgba(185,168,255,.10); margin:14px 0 2px; }
.rsw .solve-summary{ display:grid; grid-template-columns:repeat(3,auto); gap:10px 34px; margin:8px 0 14px; justify-content:start; }
.rsw .ss .k{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); }
.rsw .ss .v{ font-family:var(--serif); font-size:15.5px; margin-top:4px; color:var(--ink-soft); }
.rsw .verdict .tg{ font-size:10.5px; letter-spacing:2.6px; text-transform:uppercase; color:var(--family); }
.rsw .verdict .bg{ font-family:var(--serif); font-size:28px; margin:7px 0 9px; }
.rsw .verdict .cx{ font-family:var(--read); font-style:italic; font-size:17.5px; color:var(--ink-soft); line-height:1.5; max-width:54ch; margin-bottom:20px; }
.rsw .keys{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:20px; }
.rsw .key .k{ font-size:10px; letter-spacing:1.3px; text-transform:uppercase; color:var(--ink-faint); }
.rsw .key .v{ font-family:var(--serif); font-size:21px; margin-top:7px; }
.rsw .manu{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; color:var(--ink-soft); font-size:13.5px; }
.rsw .manu:hover{ color:var(--family); }
.rsw .manu .gl{ color:var(--family); }

.rsw .nav{ flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; margin-top:14px; }
.rsw .btns{ display:flex; gap:11px; }
.rsw .btn{ font-family:var(--body); font-size:13.5px; letter-spacing:.3px; padding:12px 27px; border-radius:10px; cursor:pointer; border:1px solid rgba(185,168,255,.14); transition:.2s; background:transparent; color:var(--ink-soft); }
.rsw .btn.ghost:hover{ color:var(--ink); border-color:var(--acc); }
.rsw .btn.ghost[disabled]{ opacity:.3; cursor:default; }
.rsw .btn.primary{ border:1px solid color-mix(in srgb,var(--acc) 55%,transparent); color:var(--ink); font-weight:500; background:color-mix(in srgb,var(--acc) 15%,transparent); box-shadow:var(--glow) color-mix(in srgb,var(--acc) 12%,transparent); }
.rsw .btn.primary:hover{ background:color-mix(in srgb,var(--acc) 24%,transparent); }

/*  ════════════════════════════════════════════════════════════════════════
    MOBILE (<=640px) — THIS WIZARD IS A 1180px DESKTOP PORT WITH NO RESPONSIVE
    RULES; ON A PHONE THE 7-CHAPTER RAIL + MULTI-COLUMN GRIDS OVERFLOW AND CLIP
    BOTH EDGES. CONSTRAIN EVERYTHING TO THE VIEWPORT, STACK THE GRIDS, AND MOVE
    THE STEP RAIL BELOW THE NAV AS A SWIPEABLE STRIP (PER USER REQUEST).
    ════════════════════════════════════════════════════════════════════════  */
@media (max-width: 640px) {
  .rsw .frame{ max-width:100%; padding:14px 14px calc(12px + env(safe-area-inset-bottom)); }
  .rsw .rsw-close{ top:calc(10px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); width:40px; height:40px; }

  /*  STEP RAIL -> BELOW THE NAV, AS A LEFT-ALIGNED HORIZONTAL SCROLL STRIP.
      THE 116px-PER-CHAPTER × 7 RAIL + ITS CENTERED CONNECTOR LINE CAN'T FIT.  */
  .rsw .rail{ order:5; margin:12px 0 0; justify-content:flex-start; }
  .rsw .chapters{ width:100%; max-width:100%; overflow-x:auto; justify-content:flex-start;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .rsw .chapters::-webkit-scrollbar{ display:none; }
  .rsw .chapters::before{ display:none; }
  .rsw .chap{ width:auto; flex:0 0 auto; padding:4px 11px; gap:7px; }
  .rsw .chap .nm{ font-size:9px; }

  /*  NAV (Back / Continue) — FULL-WIDTH BUTTONS, SITS ABOVE THE RAIL.  */
  .rsw .nav{ order:4; margin-top:12px; justify-content:space-between; }
  .rsw .btns{ flex:1; gap:10px; }
  .rsw .btn{ flex:1; padding:12px 14px; text-align:center; }

  /*  TOPBAR + STAGE FILL THE PHONE WIDTH (NO CENTERED 680px OVERFLOW).  */
  .rsw .topbar{ gap:10px; }
  .rsw .wm .t{ font-size:15px; }
  .rsw .method .m{ font-size:21px; }
  .rsw .stage-wrap{ margin-top:12px; width:100%; }
  .rsw .stage{ width:100%; max-width:100%; padding:4px 0; }
  .rsw h2.title{ font-size:21px; }
  .rsw .prompt{ font-size:15px; }

  /*  EVERY MULTI-COLUMN GRID -> 1-2 COLUMNS; KILL THE WIDE 40px COLUMN GAPS.  */
  .rsw .spec,
  .rsw .dir-grid,
  .rsw .srcs,
  .rsw .solve-summary{ grid-template-columns:1fr 1fr; gap:12px; }
  .rsw .keys{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .rsw .opt-split{ grid-template-columns:1fr; gap:14px; }
  .rsw .spec-cell + .spec-cell::before{ display:none; }

  /*  INSIGHTS — FULL-WIDTH ROUNDING STEPPER ON PHONES.  */
  .rsw .round-row{ display:flex; width:100%; }
  .rsw .round-val{ min-width:0; flex:1; }
  .rsw .sig-val{ width:84px; }
  .rsw .mu-row input{ width:84px; }

  /*  ROADMAP — SINGLE COLUMN OF GROUPS ON PHONES.  */
  .rsw .roadmap{ padding:14px 14px 4px; }
  .rsw .rm-cols{ columns:1; }
  .rsw .chips{ max-width:100%; }
}

/*  ════════════════════════════════════════════════════════════════════════
    REVIEW & LAUNCH — the final step, reframed from "configure" to "review +
    launch": a completion strip, one briefing card, a collapsed Advanced
    drawer, and Generate Solution as the visual hero. (aSolve() in the JS.)
    ════════════════════════════════════════════════════════════════════════  */
.rsw .launch{ width:min(460px,100%); margin:0 auto; text-align:center; }

/* hero — single heading for the step */
.rsw .lh-title{ font-family:var(--serif); font-weight:400; font-size:29px; line-height:1.1; color:var(--ink); margin:0; letter-spacing:.2px; }

/* briefing — clean centred text, NOT a card */
.rsw .brief{ text-align:center; border:0; background:transparent; padding:0; box-shadow:none; margin:22px 0 6px; }
.rsw .brief-test{ font-family:var(--serif); font-size:22px; line-height:1.12; color:var(--ink); }
.rsw .brief-fam{ font:600 10px/1 var(--body); letter-spacing:2.4px; text-transform:uppercase; color:var(--acc); opacity:.85; margin-top:9px; }
.rsw .brief-secs{ font-family:var(--body); font-size:13px; letter-spacing:.5px; color:var(--ink-faint); margin-top:8px; }
.rsw .brief-rule{ border-top:1px solid rgba(185,168,255,.10); max-width:120px; margin:14px auto 13px; }
.rsw .brief-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 34px; }
.rsw .bg-cell .k{ font:600 9.5px/1 var(--body); letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); }
.rsw .bg-cell .v{ font-family:var(--serif); font-size:16px; color:var(--ink-soft); margin-top:5px; }

/*  Generate Solution lives in the nav (beside Back), styled as the primary nav
    button — same position as Continue on every other step, no centre hero.  */
.rsw .nav .btn.primary{ font-weight:600; }

@media (max-width: 640px){
  .rsw .launch{ width:100%; }
  .rsw .lh-title{ font-size:25px; }
  .rsw .rsw-ins{ max-width:100%; }
  .rsw .ins-cols{ grid-template-columns:1fr; gap:0; }
}