/* Instruction and learning map. Scoped to avoid changing the office/camera screens. */
.learning-screen{--learning-muted:#4c6573;color:#203b4c;background:#fff;border:1px solid #d9e4ea;border-radius:14px;overflow:hidden;box-shadow:0 15px 40px #19354d09}
.learning-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 26px;border-bottom:1px solid #e2eaf0;min-height:72px}
.learning-topbar>span{font-size:13px;color:var(--learning-muted)}
.learning-top-actions{display:flex;align-items:center;gap:18px}
.learning-text-button{background:transparent;color:#315b72;min-height:44px;padding:10px 0;font-size:13px}
.learning-gear{display:flex;align-items:center;gap:8px;background:#f2f7fa;border:1px solid #c9dce7;color:#225873;border-radius:10px;min-height:44px;padding:10px 13px;font-size:13px;font-weight:650}
.learning-gear svg,.instruction-demo button svg{height:23px;width:23px;flex-shrink:0}
.learning-gear.is-highlighted{box-shadow:0 0 0 4px #f5d07365;border-color:#976709}
.learning-screen button:focus-visible{outline:3px solid #94620b;outline-offset:3px}
.learning-instructions{padding:44px clamp(20px,5vw,70px) 28px}
.learning-heading{max-width:850px}
.learning-kicker{font-size:11px;line-height:1.5;letter-spacing:.13em;color:#356b7d;font-weight:700;margin:0 0 12px}
.learning-step{font-size:13px;color:var(--learning-muted);margin:0 0 12px}
.learning-save-warning{background:#fbf7eb;border:1px solid #d9c697;color:#604a1d;padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.5;margin:0 0 24px}
.learning-heading h1{font-size:clamp(27px,3.2vw,42px);line-height:1.18;font-weight:700;letter-spacing:-.025em;margin:0 0 18px;overflow-wrap:anywhere}
.learning-heading h1:focus{outline:none}
.learning-description{font-size:17px;line-height:1.65;color:#456172;margin:0;max-width:790px}
.instruction-demonstration{margin:30px 0;background:linear-gradient(140deg,#eef5f7,#f7f8f5);border:1px solid #d9e5e9;border-radius:16px;min-height:280px;display:grid;place-items:center;padding:26px}
.instruction-demo{display:flex;align-items:center;flex-direction:column;gap:18px;width:100%;text-align:center}
.instruction-demo>p{margin:0;line-height:1.5}
.instruction-demo>button{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.learning-screen .primary-button,.learning-screen .secondary-button{min-height:44px;padding:12px 18px;font-size:14px}
.instruction-map-symbol{display:flex;align-items:center;width:min(420px,100%);color:#2b647b}
.instruction-map-symbol span{display:grid;place-items:center;width:50px;height:50px;flex-shrink:0;border-radius:50%;border:1px solid #abc9d4;background:#fff;font-size:18px;font-weight:650}
.instruction-map-symbol i{flex:1;border-top:2px dashed #8caeba}
.instruction-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
.instruction-dots{display:flex;gap:9px;list-style:none;padding:0;margin:0}
.instruction-dots li{width:9px;height:9px;border:1px solid #618797;border-radius:50%}
.instruction-dots li[aria-current]{background:#236980;border-color:#236980}
.demo-slide{padding:18px 25px;background:#fff;border:1px solid #c2d6df;border-radius:12px;width:min(360px,100%);text-align:left;box-shadow:0 8px 20px #2445550d}
.demo-slide span{font-size:12px;color:var(--learning-muted)}
.demo-slide strong{display:block;font-size:23px;margin:12px 0 22px}
.demo-lines{height:27px;background:linear-gradient(#e5edf1 0 5px,transparent 5px 12px,#e5edf1 12px 17px,transparent 17px 24px,#e5edf1 24px);width:80%}
.demo-arrows{display:flex;gap:15px}
.phone-demo-space{width:230px;height:180px;display:grid;place-items:center}
.phone-demo{position:relative;width:93px;height:158px;background:#fdfefe;border:5px solid #305260;border-radius:17px;box-shadow:5px 10px 20px #193d4b1a;transition:transform .65s cubic-bezier(.22,.65,.27,1)}
.phone-demo.is-landscape{transform:rotate(90deg)}
.phone-demo.is-landscape b{transform:rotate(-90deg)}
.phone-demo span{position:absolute;inset:20px 5px 12px;background:linear-gradient(145deg,#d9edf3,#edf3e1);border-radius:3px}
.phone-demo i{position:absolute;width:23px;height:3px;top:6px;left:30px;background:#305260;border-radius:2px}
.phone-demo b{position:absolute;inset:48px 0 auto;font-size:23px;color:#275d72}
.phone-note{font-size:13px;color:var(--learning-muted)}
.learning-map,.learning-module{padding:38px clamp(20px,4vw,55px) 30px}
.map-heading{max-width:none;display:block}
.map-welcome{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;padding:20px 30px 0;margin:28px 0;background:#edf4f5;border:1px solid #d5e4e8;border-radius:16px}
.map-mentor{height:215px;position:relative;overflow:hidden;align-self:end}
.map-mentor canvas{display:block;position:absolute;height:215px;width:161.25px;max-width:none;left:-14px;top:0}
.map-mentor>span{display:grid;place-items:center;margin:50px auto;width:65px;height:65px;background:#225873;color:#fff;border-radius:50%;font-size:28px}
.map-welcome-speech{padding-bottom:24px;max-width:850px}
.map-welcome-speech>p:not(.learning-kicker){font-size:16px;line-height:1.6;margin:0 0 18px}
.map-welcome-speech .map-intro-help{color:#73531a}
.map-sections{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;list-style:none;margin:30px 0 24px;padding:0}
.map-sections>li{min-width:0}
.map-section{display:flex;flex-direction:column;width:100%;height:100%;padding:0;border:1px solid #cbd8df;border-radius:13px;background:#f8fafb;overflow:hidden;text-align:left;color:#294453}
.map-section:disabled{opacity:1;cursor:default}
.map-section-photo{display:block;height:110px;width:100%;background-size:auto 170%;filter:grayscale(1);opacity:.72}
.map-section-body{padding:18px 16px;display:flex;flex-direction:column;flex:1;gap:12px}
.map-section-number{font-size:11px;line-height:1.5;font-weight:650;color:#4c6573}
.map-section-title{font-size:17px;line-height:1.4;font-weight:650;overflow-wrap:anywhere}
.map-section-detail{font-size:13px;color:#4c6573;margin-top:auto;padding-top:6px}
.map-section-status{border-top:1px solid #d5e1e6;padding-top:12px;font-size:12px;line-height:1.5;color:#4c6573}
.map-section[data-state=available]{border:2px solid #237c96;background:#fff;box-shadow:0 8px 22px #1d607b0d}
.map-section[data-state=available] .map-section-status{color:#175b72;font-weight:700}
.map-section[data-state=available]:hover{box-shadow:0 9px 24px #1d607b25}
.map-footer{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap;font-size:13px;color:#4c6573}
.map-footer p{display:flex;align-items:center;gap:9px;margin:0;line-height:1.5}
.map-legend{width:17px;height:17px;background:linear-gradient(90deg,#abb4b4 50%,#3c9c84 50%);border:1px solid #496d76;border-radius:50%;flex-shrink:0}
.module-topics{counter-reset:topic;list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0}
.module-topics li{padding:18px;background:#f2f6f8;border:1px solid #dbe5eb;border-radius:10px;line-height:1.5;display:flex;gap:14px;align-items:flex-start}
.module-topics li::before{counter-increment:topic;content:counter(topic,decimal-leading-zero);color:#36758b;font-weight:700;font-size:13px;padding-top:3px}
.module-preparation{background:#fbf7eb;border:1px solid #e6d7b7;border-radius:12px;padding:22px;color:#5e4928}
.module-preparation p{line-height:1.6;max-width:780px}
.learner-view .learning-screen{border-radius:0;min-height:100svh}
@media(max-width:1100px){.map-sections{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 .learning-topbar{padding:10px 16px;gap:8px;flex-wrap:wrap}
 .learning-topbar>span{order:3;width:100%;font-size:12px}
 .learning-top-actions{gap:14px}
 .learning-instructions,.learning-map,.learning-module{padding:26px 18px 22px}
 .learning-description{font-size:16px}
 .instruction-demonstration{padding:22px 14px;min-height:280px}
 .instruction-map-symbol span{width:40px;height:40px;font-size:15px}
 .instruction-footer{gap:9px}.instruction-dots{gap:6px}
 .learning-screen .primary-button,.learning-screen .secondary-button{font-size:13px;padding:12px}
 .map-welcome{grid-template-columns:64px 1fr;gap:12px;padding:18px 14px 0;margin:24px 0}
 .map-mentor{height:190px}.map-mentor canvas{height:205px;width:154px;left:-44px}
 .map-welcome-speech>p:not(.learning-kicker){font-size:15px}
 .map-sections{grid-template-columns:1fr;gap:12px}
 .map-section{flex-direction:row}
 .map-section-photo{width:80px;flex-shrink:0;height:auto;min-height:180px;background-size:auto 140%}
 .map-section-body{padding:16px}
 .map-section-title{font-size:16px}
 .module-topics{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.phone-demo{transition:none}}