/* Koenig Learning Map — course-page section.
   Port of koenig-website-redesign/public/learning-map.html (Next.js /learning-map, which iframes that file).
   Same design and behaviour; every class/id is prefixed "klm-" and every rule is scoped under .klm so the
   page's Bootstrap (.row, .card, label, fieldset...) and the widget cannot style each other.
   Markup: Views/Course/_LearningMap.cshtml   Script: assets/newjs/learning-map.js */

.klm{
  --bg:#F6F9FD; --surface:#E8F1FB; --field:#FFFFFF; --hover:#D9E8F8; --ink:#0F2342; --muted:#4F6280; --line:#BFD3EA;
  --accent:#0B5CAD; --accent-soft:#E6F0FA; --cta:#F26A21; --ok:#1F7A4D; --bad:#D93025;
  --head:"GTWalsheimPro","GT Walsheim Pro","Trebuchet MS",system-ui,sans-serif;
  --body:"GTWalsheimPro","GT Walsheim Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--body);
  text-align:left;
}
.klm *,.klm *::before,.klm *::after{box-sizing:inherit}
/* neutralise the host page's element defaults (Bootstrap label/fieldset/legend/heading margins; the course
   page also sets p{font-size/margin} with !important, hence the !important on the .klm p rules below).
   Scoped to the widget's own parts (:where keeps specificity low) so they never reach the page's
   Request-info form, which the Enquire step moves in here. */
.klm :where(.klm-header,.klm-stepper,.klm-picks,.klm-card,.klm-enq) :is(h1,h2,p,dl,dd,dt,label,fieldset){letter-spacing:normal;text-transform:none}
.klm :where(.klm-card,.klm-enq) label{margin:0;font-weight:inherit}
.klm :where(.klm-stepper,.klm-picks,.klm-enq,.klm-rownav) button{text-transform:none;letter-spacing:normal;line-height:normal}
.klm :where(.klm-header,.klm-stepper,.klm-picks,.klm-card,.klm-enq,.klm-rownav) svg{overflow:visible}

/* side padding matches the top navigation (16px, 50px from lg; content max 1280px) */
.klm .klm-wrap{max-width:1380px;margin:0 auto;padding:20px 16px 48px}
@media(min-width:1024px){.klm .klm-wrap{padding-left:50px;padding-right:50px}}

/* header */
.klm .klm-header{display:flex;flex-wrap:wrap;gap:10px 32px;align-items:center;justify-content:center;margin-bottom:14px}
.klm .klm-hcenter{text-align:center}
.klm h1.klm-h1,.klm .klm-h1{font:800 clamp(22px,3vw,36px)/1.1 var(--head);margin:0 0 4px;color:var(--ink)}
.klm p.klm-sub{margin:0 !important;font-size:13.5px !important;line-height:1.45 !important;color:var(--muted)}
@media(max-width:700px){.klm .klm-header{flex-direction:column;align-items:flex-start}.klm .klm-hcenter{text-align:left}}

/* ── Path stepper ── */
.klm .klm-stepper{display:flex;align-items:center;padding:10px 8px 16px;margin:0 -8px;overflow-x:auto;scrollbar-width:none}
.klm .klm-stepper::-webkit-scrollbar{display:none}
.klm .klm-stp-wrap{display:flex;align-items:center;flex:1 1 0;min-width:0}
.klm .klm-stp-wrap:last-child{flex:none}
.klm .klm-stp{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;border:none;background:none;padding:0;margin:0;position:relative;flex:none}
.klm .klm-stp-circle{position:relative;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;transition:all .25s;z-index:1}
.klm .klm-stp-circle svg{width:18px;height:18px}
/* small number badge — top-left, same as card .klm-num */
.klm .klm-stp-badge{position:absolute;top:-5px;left:-5px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:700 10px var(--head);transition:background .2s;z-index:2}
.klm .klm-stp-tick{position:absolute;top:-5px;left:-5px;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#fff;display:none;place-items:center;z-index:2}
.klm .klm-stp-tick svg{width:10px;height:10px;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.klm .klm-stp-label{font:500 11px var(--body);color:var(--muted);white-space:nowrap;transition:color .25s;margin-top:2px}
.klm .klm-stp-line{flex:1 1 0;height:2px;background:var(--line);min-width:8px;transition:background .35s;margin-bottom:20px}
/* states */
.klm .klm-stp.klm-done .klm-stp-circle{background:var(--accent-soft);color:var(--accent)}
.klm .klm-stp.klm-done .klm-stp-badge{display:none}
.klm .klm-stp.klm-done .klm-stp-tick{display:grid}
.klm .klm-stp.klm-done .klm-stp-label{color:var(--ok);font-weight:600}
.klm .klm-stp.klm-done + .klm-stp-wrap .klm-stp-line,.klm .klm-stp-wrap:has(.klm-stp.klm-done) .klm-stp-line{background:var(--ok)}
.klm .klm-stp.klm-now .klm-stp-circle{background:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
.klm .klm-stp.klm-now .klm-stp-badge{background:var(--accent);color:#fff}
.klm .klm-stp.klm-now .klm-stp-label{color:var(--accent);font-weight:700}
/* unanswered when the form was opened: red cross in place of the number */
.klm .klm-stp-cross{position:absolute;top:-5px;left:-5px;width:18px;height:18px;border-radius:50%;background:var(--bad);display:none;place-items:center;z-index:2}
.klm .klm-stp-cross svg{width:10px;height:10px;stroke:#fff;stroke-width:3;stroke-linecap:round;fill:none}
.klm .klm-stp.klm-miss .klm-stp-badge{display:none}
.klm .klm-stp.klm-miss .klm-stp-cross{display:grid}
.klm .klm-stp.klm-miss .klm-stp-label{color:var(--bad);font-weight:600}
.klm .klm-stp.klm-locked{cursor:default;opacity:.4}
.klm .klm-stp:focus{outline:none}
.klm .klm-stp:not(.klm-locked):focus-visible .klm-stp-circle{outline:3px solid var(--accent);outline-offset:3px}

/* ── Cards row ── (top/left padding: room for each card's number badge at -6px; the row is a scroll box) */
.klm .klm-row{position:relative;display:flex;flex-wrap:nowrap;align-items:flex-start;gap:0;margin:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 0 16px 7px;scroll-padding-left:7px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.klm .klm-row::-webkit-scrollbar{height:6px}
.klm .klm-row::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}
.klm .klm-row::-webkit-scrollbar-track{background:transparent}

.klm .klm-step{flex:none;width:calc((100vw - 100px)/5.1);min-width:210px;max-width:280px;display:flex;align-items:flex-start;scroll-snap-align:start;transition:opacity .45s ease,transform .45s cubic-bezier(.4,0,.2,1),width .45s cubic-bezier(.4,0,.2,1),min-width .45s cubic-bezier(.4,0,.2,1),max-width .45s cubic-bezier(.4,0,.2,1)}
.klm .klm-step.klm-gone{width:0 !important;min-width:0 !important;max-width:0 !important;opacity:0;transform:translateX(-24px);overflow:hidden;pointer-events:none}
.klm .klm-step.klm-gone .klm-card{flex:none}
/* every card stays in the row and fully usable, so dragging shows them all */
.klm .klm-step.klm-locked{opacity:1;pointer-events:auto;transform:none}
.klm .klm-step.klm-unlocking{animation:klm-slidein .35s forwards}
@keyframes klm-slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

.klm .klm-card{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 10px 14px 12px;display:flex;flex-direction:column;transition:border-color .2s}
.klm .klm-card.klm-done{border-color:var(--ok)}

/* head: icon circle + number badge + title + tick */
.klm .klm-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.klm .klm-hicon{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.klm .klm-hicon svg{width:18px;height:18px}
.klm .klm-num{position:absolute;top:-6px;left:-6px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:700 10px var(--head);transition:background .2s}
.klm .klm-card.klm-done .klm-num{background:var(--ok)}
.klm .klm-card h2,.klm .klm-enq h2{font:700 15px/1.2 var(--head);margin:0;flex:1;color:var(--ink)}
/* tick beside title */
.klm .klm-htick{display:none;width:20px;height:20px;border-radius:50%;background:var(--ok);align-items:center;justify-content:center;flex:none}
.klm .klm-htick svg{width:11px;height:11px;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.klm .klm-card.klm-done .klm-htick{display:flex}

.klm p.klm-q{font-size:12px !important;line-height:1.45 !important;color:var(--muted);margin:0 0 4px !important;padding-right:4px}
.klm p.klm-cnt{margin:0 0 5px !important;font-size:11px !important;line-height:1.45 !important;color:var(--accent);min-height:14px}

/* position:relative on the row and fieldsets keeps the visually-hidden legends (position:absolute)
   inside their scroll boxes; without it they escaped to the page and widened it on phones */
.klm fieldset.klm-fs{position:relative;border:0;margin:0;min-width:0;padding:0 4px 0 0;display:flex;flex-direction:column;gap:3px;height:260px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.klm fieldset.klm-fs::-webkit-scrollbar{width:5px}
.klm fieldset.klm-fs::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}
.klm fieldset.klm-fs legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;margin:0;border:0}

.klm .klm-opt{position:relative;display:flex;align-items:center;gap:8px;padding:8px;margin:0;border-radius:9px;cursor:pointer;font-size:13px;line-height:1.25;font-weight:400;color:var(--ink);border:1px solid transparent;flex:none}
.klm .klm-opt:hover{background:var(--hover)}
.klm fieldset.klm-multi .klm-dot{border-radius:5px}
.klm fieldset.klm-multi .klm-dot::after{width:8px;height:8px;border-radius:2px}
.klm .klm-opt input{position:absolute;opacity:0;pointer-events:none;margin:0}
.klm .klm-dot{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center;transition:border-color .15s}
.klm .klm-dot::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .15s}
.klm .klm-opt input:checked~.klm-dot{border-color:var(--accent)}
.klm .klm-opt input:checked~.klm-dot::after{transform:scale(1)}
.klm .klm-opt:has(input:checked){background:var(--accent-soft);border-color:var(--accent)}
.klm .klm-oi{flex:none;width:16px;height:16px;color:var(--muted)}
.klm .klm-opt:has(input:checked) .klm-oi{color:var(--accent)}
.klm .klm-opt em{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.klm .klm-other-in{flex:none;margin:2px 0 4px 8px;width:calc(100% - 8px);height:auto;padding:7px 9px;border-radius:8px;border:1px solid var(--accent);background:var(--field);color:var(--ink);font:400 13px var(--body);box-shadow:none}
.klm .klm-other-in[hidden]{display:none}

.klm .klm-arrow{flex:none;width:22px;text-align:center;color:var(--muted);font-size:18px;margin-top:60px;flex-shrink:0}

/* mobile slider nav: left/right arrows below the cards row */
.klm .klm-rownav{display:none;align-items:center;justify-content:center;gap:18px;margin:2px 0 8px}
.klm .klm-rnbtn{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer}
.klm .klm-rnbtn svg{width:20px;height:20px;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.klm .klm-rnbtn:hover{background:#076D9D}
.klm .klm-rnbtn:disabled{opacity:.35;cursor:default;background:var(--accent)}
.klm .klm-rnbtn:focus{outline:none}
.klm .klm-rnbtn:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}

/* Enquire card */
.klm .klm-enq{width:calc((100vw - 100px)/3.1);min-width:210px;max-width:300px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 10px 14px 12px;display:flex;flex-direction:column}
.klm .klm-enq-fields{display:flex;flex-direction:column;gap:8px}
/* the form stays closed until the CTA is clicked */
.klm .klm-step:not(.klm-open) .klm-enq-fields{display:none}
.klm .klm-enq-body{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:340px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.klm .klm-sum{margin:0;padding:8px 10px;border-radius:10px;background:var(--field);display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12px;line-height:1.45}
.klm .klm-sum dt{color:var(--muted);font-weight:400}
.klm .klm-sum dd{margin:0;font-weight:600}
.klm .klm-sum dd.klm-empty{color:var(--muted);font-weight:400}
.klm .klm-f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.klm .klm-f input,.klm .klm-f textarea{font:400 13.5px var(--body);color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:8px;padding:8px 9px;width:100%;height:auto;margin:0;box-shadow:none}
.klm .klm-f textarea{resize:vertical;min-height:52px}
.klm .klm-f input:focus,.klm .klm-f textarea:focus{outline:none}
.klm .klm-f input:focus-visible,.klm .klm-f textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.klm .klm-f.klm-bad input{border-color:var(--cta)}
.klm p.klm-err{font-size:12px !important;line-height:1.45 !important;color:var(--cta);margin:0 !important;min-height:0}
.klm p.klm-miss-msg:empty{display:none}
.klm .klm-go{font:700 15px var(--head);background:#0694D1;color:#fff;border:0;border-radius:10px;padding:11px 16px;cursor:pointer;margin-top:2px}
.klm .klm-go:hover{background:#076D9D}

@media(max-width:900px){
  .klm .klm-step,.klm .klm-enq{width:calc(100vw - 48px);max-width:380px}
  .klm .klm-enq-body{max-height:none;overflow:visible}
  .klm .klm-other-in{padding-top:26px;padding-bottom:26px}
  .klm .klm-arrow{margin-top:0;transform:rotate(90deg)}
  /* stepper: stop squishing into overlapping labels — let it scroll instead */
  .klm .klm-stepper{justify-content:flex-start}
  .klm .klm-stp-wrap{flex:none}
  .klm .klm-stp-line{flex:none;width:18px;min-width:18px;margin-bottom:18px}
  .klm .klm-stp-circle{width:32px;height:32px}
  .klm .klm-stp-circle svg{width:16px;height:16px}
  .klm .klm-stp-label{font-size:10px}
  .klm .klm-rownav{display:flex}
}
/* chosen answers, shown above the cards */
.klm .klm-picks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 12px}
.klm .klm-picks:empty{display:none}
.klm .klm-pick{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;margin:0;border-radius:99px;border:1px solid var(--ok);background:var(--accent-soft);color:var(--ink);font:500 13px var(--body);cursor:pointer;position:relative}
.klm .klm-pick b{font-weight:600;color:var(--muted)}
.klm .klm-pick:hover{background:var(--hover)}
.klm .klm-pick-tick{position:absolute;top:-7px;left:-5px;width:16px;height:16px;border-radius:50%;background:var(--ok);display:grid;place-items:center}
.klm .klm-pick-tick svg{width:9px;height:9px;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* unanswered step, flagged once the form was opened */
.klm .klm-pick.klm-pick-miss{border-color:var(--bad);background:#FDECEA}
.klm .klm-pick-cross{position:absolute;top:-7px;left:-5px;width:16px;height:16px;border-radius:50%;background:var(--bad);display:grid;place-items:center}
.klm .klm-pick-cross svg{width:9px;height:9px;stroke:#fff;stroke-width:3;stroke-linecap:round;fill:none}
@media(max-width:900px){
  /* chosen-answer pills: one scrollable line instead of wrapping */
  /* room for the tick badge (top:-7px, left:-5px): a scroll box clips anything outside its padding */
  .klm .klm-picks{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:8px 0 6px 6px}
  .klm .klm-picks::-webkit-scrollbar{display:none}
  .klm .klm-pick{flex:none;white-space:nowrap}
}
/* final form: full width of the centre once every step is answered */
@media(min-width:901px){
  .klm .klm-step.klm-full{width:100%;min-width:0;max-width:none;justify-content:center}
  .klm .klm-step.klm-full .klm-arrow{display:none}
  .klm .klm-step.klm-full .klm-enq{width:100%;max-width:none;min-width:0}
  .klm .klm-step.klm-full .klm-enq-body{display:grid;grid-template-columns:1fr;gap:12px;max-height:none;overflow:visible}
  .klm .klm-step.klm-full .klm-enq-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px;animation:klm-fieldsin .35s ease}
  .klm .klm-step.klm-full .klm-enq-fields > .klm-f:nth-of-type(4),.klm .klm-step.klm-full .klm-enq-fields > .klm-err{grid-column:1/-1}
  .klm .klm-step.klm-full:not(.klm-open) .klm-go{justify-self:center;width:100%;max-width:320px;padding:13px 24px}
  @keyframes klm-fieldsin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}

@media(prefers-reduced-motion:reduce){
  .klm .klm-step{transition:none}.klm .klm-step.klm-unlocking{animation:none;opacity:1;transform:none}
}

/* Enquire step: the page's own "Request for more information" form (section#request) is moved into
   the final step in place of the card (see showRequestForm in learning-map.js). */
.klm .klm-step.klm-ri{align-items:stretch}
.klm .klm-step.klm-ri > .klm-enq{display:none}
.klm .klm-step.klm-ri > #request.ri-section{flex:1 1 auto;min-width:0;width:100%;margin:0;padding:0;background:none}
/* the section's dark backdrop is dropped here, so the form card carries it instead (its text is
   white and its own fill is only rgba(255,255,255,.03)). #request in the selectors: the page styles
   it as #request.ri-section / #request .ri-form, which a class-only selector cannot override. */
.klm .klm-step.klm-ri > #request .ri-form{background:radial-gradient(ellipse at 68% 48%,rgba(6,148,209,.18) 0,rgba(6,148,209,.06) 38%,transparent 65%),#06111e}
/* up to 900px every step is a phone-width card (max 380px) beside an arrow; once the request form is
   in, its step takes the row's full width (no arrow) so the form is not squeezed into a card. */
@media(max-width:900px){
  .klm .klm-step.klm-ri{width:100%;min-width:0;max-width:none}
  .klm .klm-step.klm-ri > .klm-arrow{display:none}
}
@media(max-width:600px){
  .klm .klm-step.klm-ri > #request .ri-form{padding:20px 14px}
}
@media(max-width:380px){
  .klm .klm-step.klm-ri > #request .ri-form{padding:16px 10px}
}
/* form open: it is the only thing in the row (no neighbouring card peeking in on phones) */
.klm .klm-row.klm-row-ri{padding-left:0;scroll-padding-left:0}
.klm .klm-row.klm-row-ri > .klm-step:not(.klm-ri){display:none}
.klm.klm-has-ri .klm-rownav{display:none}