/* Original visual system lives untouched in base.css. These rules add the production interactions. */
@font-face {font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('assets/montserrat-300.ttf') format('truetype')}
@font-face {font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('assets/montserrat-400.ttf') format('truetype')}
@font-face {font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('assets/montserrat-600.ttf') format('truetype')}
@font-face {font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('assets/montserrat-700.ttf') format('truetype')}
@font-face {font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('assets/montserrat-800.ttf') format('truetype')}
@font-face {font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/open-sans-400.ttf') format('truetype')}
@font-face {font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/open-sans-600.ttf') format('truetype')}
@font-face {font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/open-sans-700.ttf') format('truetype')}
@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/jetbrains-mono-400.ttf') format('truetype')}
@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/jetbrains-mono-500.ttf') format('truetype')}
@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('assets/jetbrains-mono-700.ttf') format('truetype')}
[hidden] { display:none !important; }
button,select,input { font:inherit; }
button { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {outline:3px solid var(--gold-2);outline-offset:5px;}
button:disabled { cursor:not-allowed; }
.btn:disabled {opacity:.4;transform:none;box-shadow:none;}
.hero-sect,#wizard-container {position:relative;isolation:isolate;}
.lead-card .icon-box svg {width:30px;height:30px;}
.context-box {border:1px solid var(--line-d);border-radius:var(--r);padding:22px 26px;margin-bottom:24px;background:rgba(11,39,67,.6);}
.context-box label,.context-field label {display:block;font-family:var(--f-mono);font-size:.72rem;color:var(--gold);margin-bottom:8px;letter-spacing:.07em;}
.context-box p {font-size:.82rem;color:var(--mut-d);margin:10px 0 0;}
select {color:var(--white);background:var(--navy);border:1px solid rgba(224,190,86,.4);padding:12px 14px;border-radius:var(--r);max-width:100%;min-height:46px;}
.context-box select {width:min(100%,440px);}
.mode-buttons {align-items:stretch;}
.mode-buttons .btn,.mode-buttons .btn-back {white-space:normal;line-height:1.4;}
.wizard-context {display:flex;gap:16px;align-items:end;margin-bottom:24px;}
.context-field {flex:1;min-width:0;}
.context-field select {width:100%;}
.wizard-context .btn-back {min-height:46px;padding:12px 18px;}
.wizard-header .answer-help {margin:10px 0 0;}
.topic-navigation {margin-bottom:24px;border:1px solid var(--line-d);border-radius:var(--r);background:rgba(11,39,67,.6);}
.topic-navigation summary {padding:14px 18px;cursor:pointer;font-size:.86rem;color:var(--gold);}
#topic-links {display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 14px;}
.topic-link {display:flex;align-items:center;gap:10px;text-align:left;border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:11px 12px;background:rgba(18,59,101,.35);font-size:.8rem;cursor:pointer;}
.topic-link[aria-current] {border-color:var(--gold);}
.topic-link small {margin-left:auto;flex-shrink:0;color:var(--gold);font-family:var(--f-mono);}
.topic-link-number {color:var(--gold);font-family:var(--f-mono);}
.q-id-tag {flex-wrap:wrap;letter-spacing:.08em;}
.question-title {margin-bottom:28px;overflow-wrap:anywhere;}
.answer-help {font-size:.85rem;color:var(--mut-d);line-height:1.6;}
.slider-head {gap:16px;flex-wrap:wrap;}
.slider-head .answer-help {margin:0;}
.slider-badge-level {font-size:.76rem;}
/* A native 32px thumb travels from x=16 to x=W-16. Each numbered
   button occupies the exact same center: 16 + i*(W-32)/4. No percentage
   button widths or extra mobile padding may move those centers. */
.slider-rail-wrap {padding:20px 0 10px;}
.slider-custom {display:block;width:100%;margin:0;padding:0;border:0;height:8px;}
.slider-custom::-webkit-slider-thumb {box-sizing:border-box;width:32px;height:32px;}
.slider-custom::-moz-range-thumb {box-sizing:border-box;width:32px;height:32px;}
.slider-custom.unanswered {--fill:0%;}
.slider-custom.unanswered::-webkit-slider-thumb {opacity:0;}
.slider-custom.unanswered::-moz-range-thumb {opacity:0;}
.slider-stops {display:block;position:relative;width:100%;height:77px;margin-top:20px;padding:0;}
.slider-stop-item {position:absolute;left:calc(16px + (100% - 32px) * var(--stop) / 4);top:0;width:44px;min-height:44px;margin:0;padding:0;background:transparent;border:0;color:var(--mut-d);transform:translateX(-50%);cursor:pointer;text-align:center;}
.slider-stop-num {width:28px;height:28px;margin:0 auto 7px;display:flex;}
.slider-stop-lbl {position:relative;left:50%;transform:translateX(-50%);width:110px;font-size:.64rem;}
.slider-stop-item:first-child .slider-stop-lbl {width:90px;left:0;transform:translateX(8px);text-align:left;}
.slider-stop-item:last-child .slider-stop-lbl {width:110px;left:auto;transform:translateX(-74px);text-align:right;}
.slider-level-card {margin-bottom:24px;}
.slider-level-content p.desc {margin:0;white-space:pre-line;}
.answer-list-heading {margin:22px 0 14px;}
.answer-descriptions {margin:22px 0 0;}
.answer-descriptions summary {cursor:pointer;color:var(--gold);font-size:.86rem;padding:14px 0;border-top:1px solid var(--line-d);}
.option-card {width:100%;font-family:var(--f-body);text-align:left;color:var(--white);}
.opt-content {display:block;min-width:0;}
.opt-title {display:block;font-family:var(--f-head);font-weight:700;font-size:.91rem;margin-bottom:6px;line-height:1.5;}
.option-text {display:block;color:var(--mut-d);font-size:.9rem;line-height:1.6;white-space:pre-line;}
.option-card .opt-icon {font-family:var(--f-mono);}
.answer-secondary {display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0 12px;}
.answer-secondary .btn-back {text-align:left;line-height:1.5;}
#w-btn-na[aria-pressed='true'] {border-color:var(--gold);background:rgba(224,190,86,.12);color:var(--gold);}
.answer-clear {padding:10px 6px;border:0;background:transparent;color:var(--mut-d);font-size:.8rem;text-decoration:underline;cursor:pointer;}
.answer-clear:disabled {opacity:.4;}
.answer-status {color:var(--gold);font-size:.85rem;margin:16px 0 0;}
.storage-notice {max-width:960px;margin:0 auto 24px;padding:0 var(--pad);color:var(--gold);font-size:.85rem;}
.storage-notice:empty {display:none;}
.app-footer {border-top:1px solid var(--line-d);padding:24px 0;color:var(--mut-d2);font-size:.75rem;}
.app-footer .wrap {display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
@media(max-width:700px) {
  .wizard-context {flex-wrap:wrap;align-items:end;}
  .wizard-context .context-field {flex-basis:calc(50% - 8px);}
  .wizard-context .btn-back {margin-left:auto;}
  .wizard-meta {flex-wrap:wrap;gap:12px;}
  .wizard-meta-left {flex-wrap:wrap;gap:8px;}
  .wizard-meta .drawing-no {margin-left:0;}
  .nav-row {gap:14px;}
  .nav-status {font-size:.58rem;letter-spacing:.04em;text-align:right;}
  .nav-logo-wrap {gap:8px;}
  .nav-logo-wrap .drawing-no {display:none;}
  .hero-sect {padding:44px 0 48px;}
  .hero-lead {margin-bottom:28px;}
}
@media(max-width:600px) {
  .question-card {padding:22px 16px;}
  .slider-container {padding:24px 12px;}
  .slider-stops {padding:0;height:44px;}
  .slider-stop-lbl {display:none;}
  .slider-head {gap:10px;}
  .slider-level-card {padding:18px;gap:12px;}
  .slider-level-card .icon-box {width:36px;height:36px;font-size:1.1rem;}
  .slider-level-content h4 {font-size:.98rem;}
  .slider-level-content p.desc {font-size:.87rem;}
  .option-card {padding:15px 12px;gap:10px;}
  .option-card .opt-icon {width:32px;height:32px;font-size:1rem;}
  .opt-title {font-size:.82rem;}
  .option-text {font-size:.86rem;}
  .wizard-nav {flex-direction:column-reverse;align-items:stretch;gap:12px;}
  .wizard-nav button {justify-content:center;line-height:1.4;padding:15px 12px;}
  .view-toggle-bar {flex-wrap:wrap;gap:12px;}
  .wizard-header {padding:16px;}
  .pillar-intro-box {padding:16px;}
  .pillar-badge {letter-spacing:.08em;padding:4px 8px;}
  #topic-links {grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  *,*::before,*::after {animation:none !important;transition:none !important;}
}
.hero-sect { overflow: clip; }