/* Auth Mechanics: a focused, readable protocol learning lab. */
:root{--bg:#f3f6f7;--ink:#162d3e;--muted:#667d8e;--line:#dce5e9;--blue:#087e8b;--green:#17775b;--accent-soft:#e4f3f2}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.45}
header{height:74px;padding:0 30px;background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #dce5e9}.brand{gap:11px;font-size:21px;letter-spacing:-.8px}.brand small{font-size:9px;letter-spacing:2px;color:#688190}.logo{width:38px;height:38px;display:grid;place-items:center;padding:0;background:#132f42;border-radius:10px;box-shadow:0 3px 8px #102e4217}.logo svg{width:25px;min-width:0;height:25px}.badge{background:#f7fafb;color:#627c8d;border-color:#e2eaed;padding:8px 12px;font-size:10px;letter-spacing:.3px}.badge:before{color:#1e9a88}
.shell{grid-template-columns:252px minmax(0,1fr);align-items:start;min-height:calc(100vh - 74px)}aside{position:sticky;top:74px;height:calc(100vh - 74px);overflow-y:auto;padding:27px 14px;background:#fdfefe;scrollbar-width:thin;scrollbar-color:#c7d6de transparent;border-color:#dce5e9}aside>.eyebrow{font-size:9px;color:#7c909f}.course-status{padding:14px;margin:0 8px 16px;background:#edf4f6;border:1px solid #e0e9ed;border-radius:10px}.course-status strong{color:#213f51;font-size:12px;font-weight:650}.course-status small{font-size:10px;color:#718897;margin-top:8px}.course-meter{height:4px;border-radius:9px;background:#d6e4e9;margin-top:10px;overflow:hidden}.course-meter div{height:100%;background:#138d88;border-radius:9px;transition:width .2s}.course-filters{background:#eef3f5;border-radius:7px;padding:3px;margin:0 8px 20px;gap:3px}.course-filters button{flex:1;border:0;background:transparent;padding:6px 8px;font-size:10px;color:#6a8090}.course-filters button[aria-pressed=true]{background:white;color:#173c4e;box-shadow:0 1px 4px #18354912}
.level-heading{font-size:8px;letter-spacing:1.2px;color:#78909e;font-weight:700;margin:22px 10px 8px}.nav{border-radius:8px;padding:10px 10px;margin:3px 0;font-size:12px;transition:background .15s;line-height:1.4}.nav>span:first-child{color:#879ba8;font-size:10px;margin-right:8px}.nav small{font-size:9px;margin-top:3px;color:#788e9c;margin-left:24px}.nav.active{background:#e3f2f1;color:#076c75;box-shadow:inset 3px 0 #0a8590}.nav.active small{color:#3a838a}.nav:not(:disabled):hover{background:#edf5f5}.nav:disabled{opacity:1;color:#8797a2}.nav:disabled small{color:#91a0aa}.nav .nav-state{color:#8aa0ac;font-size:10px}.side-note{font-size:11px;color:#78909e;line-height:1.8;border-color:#e2eaed;margin:25px 10px 0;padding-top:18px}.side-note b{color:#3d5b6c}
main{margin:0 auto;padding:36px 38px 28px;max-width:1500px}.top{align-items:center;gap:22px}h1{font-size:clamp(26px,2.7vw,36px);line-height:1.2;letter-spacing:-1.2px;font-weight:720;margin:10px 0 13px}.eyebrow{color:#60808c;font-size:9px;letter-spacing:1.5px}.subtitle{font-size:13px;color:#6b8090;line-height:1.8;max-width:640px}.pattern{font-size:8px;letter-spacing:1.4px;font-weight:650;white-space:nowrap}select{border-radius:8px;padding:11px 12px;border-color:#dce6e9;color:#244556;background:#fff;font-size:12px;box-shadow:0 2px 4px #1b3f5010}.top>div:last-child{min-width:215px}.use-case{position:relative;background:#fff;border:1px solid #dce7eb;border-left:3px solid #11909a;border-radius:10px;padding:17px 22px 18px;margin-top:25px;box-shadow:0 3px 12px #183b4d03}.use-case h2{font-size:13px;margin:11px 0 6px;color:#24495c}.use-case p{font-size:13px;line-height:1.7;color:#486574}.use-case-head{justify-content:space-between;font-size:9px;letter-spacing:.6px}.use-case-head span:first-child{background:#e3f3f1;color:#067b79;font-size:9px;border-radius:4px;padding:4px 7px}.use-case-head span:last-child{color:#78919e;font-size:9px}.learning-target{font-size:11px;color:#375a6c;margin-top:12px}.learning-target b{font-size:8px;color:#8599a5}.use-case small{font-size:10px;color:#8596a2;margin-top:6px}body[data-kind=AuthN] .use-case{border-left-color:#8473bd}body[data-kind=AuthN] .use-case-head span:first-child{background:#f0ecfb;color:#7760a9}.legacy-note{font-size:11px;border-color:#edd9b4;background:#fff8eb;color:#8e6d35;line-height:1.8}
.workspace{gap:20px;margin-top:22px;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);align-items:start}.panel{border-color:#dce6e9;border-radius:12px;box-shadow:0 4px 14px #173b4d04}.panel-head{font-size:12px;padding:16px 19px;color:#28495b;font-weight:650;letter-spacing:.1px}.panel-head small{font-size:9px;color:#78909f}.diagram{background-color:#fbfdfd;background-image:radial-gradient(#dbe6e9 .8px,transparent .8px);background-size:18px 18px;padding:22px 12px 6px}.domains{gap:8px;margin-bottom:19px}.domains span{background:#f0f6f7;border:1px dashed #c7dce0;color:#6e909a;font-size:7.5px;padding:6px 2px}.actor{color:#264d60;font-size:10px}.actor small{font-size:8px;color:#8096a3;line-height:1.5;margin:5px 8px 0}.icon{width:42px;height:42px;border-radius:11px;background:#fff;color:#198994;border:1px solid #c7e0e3;box-shadow:0 3px 7px #173e4f08;font-size:19px;margin-bottom:10px}.actor:nth-child(2) .icon{color:#7c6aae;border-color:#ded6ee;background:#faf8ff}.actor:nth-child(3) .icon{color:#447d9f;border-color:#d0e0ee;background:#f6fbff}svg text{fill:#6f8797;font-size:10px}svg .future{opacity:.57}svg .current text{fill:#087e8b}svg .current line{stroke:#087e8b}.packet{fill:#0b8d93}.controls{background:#fff;padding:13px 15px;gap:7px}.controls button{font-size:11px;padding:9px 11px}.controls select{padding:8px;font-size:10px;box-shadow:none}.counter{font-size:10px;color:#8096a3}.progress{height:3px;background:#e8f0f2}.primary{background:#087e8b;border-color:#087e8b;box-shadow:0 3px 7px #087e8b20;color:#fff}.primary:hover{background:#066d78;color:white;border-color:#066d78}button{border-radius:7px;transition:background .15s,border-color .15s,box-shadow .15s}button:disabled{cursor:not-allowed;opacity:.45}.narrative{padding:19px 21px 23px;min-height:148px;background:#fff}.narrative h3{font-size:14px;color:#24495b;margin:8px 0}.narrative p{color:#6a8190;font-size:12px;line-height:1.8}.credential{background:#eef7f6;border-color:#dceae8;color:#437d7a;font-size:10px;padding:12px 20px}.credential b{color:#6c9994;font-size:8px;margin-bottom:4px}
.inspector{background:#132b3b;border-color:#193749;box-shadow:0 6px 18px #12324612;min-height:440px}.inspector .panel-head{color:#deedf4;border-color:#294355}.inspector .panel-head small{color:#7e9bab;font-size:8px}.tabs{background:#132b3b;border-color:#294355;padding:0 19px;gap:20px}.tabs button{font-size:10px;color:#8ba6b7;padding:13px 0}.tabs .chosen{color:#85d9d6;border-color:#57bfbc}.wire-label{font-size:9px;letter-spacing:.4px;color:#719eaf;padding:18px 20px 0}pre{font-size:11px;line-height:1.85;color:#bdd6e2;padding:18px 20px 25px;max-height:470px;overflow:auto;scrollbar-width:thin;scrollbar-color:#496475 transparent}.experiment{padding:18px 20px;box-shadow:none;background:#fff}.experiment h3{font-size:12px;color:#35576a}.experiment p{font-size:11px;line-height:1.7}.experiment select{font-size:11px;background:#fafcfc;box-shadow:none;border-color:#e1eaed}.lesson-bottom{gap:20px;margin-top:20px}.concept{padding:21px 23px}.concept h3{font-size:14px;line-height:1.5;color:#274c5e;margin:9px 0}.concept p{font-size:12px;line-height:1.8;color:#718693}.refs{gap:6px}.refs a{font-size:9px;color:#537788;background:#edf4f6;border:1px solid #e1ecef;padding:5px 7px}.refs a:hover{color:#087e8b;border-color:#a9cbd0}.concept #go-quiz{font-size:11px;color:#087e8b;border-color:#bddbde;background:#f7fcfc}
.journey{background:#ecf6f5;border-color:#cce3e1;border-radius:10px;padding:18px 20px}.journey-top{font-size:10px;color:#69958f}.phase-buttons button{background:#fff;border-color:#d5e7e5;color:#58857f}.phase-buttons .active{background:#087e8b;border-color:#087e8b;color:#fff}.phase-buttons .done{color:#128671;border-color:#add3c9}.journey p{color:#5c817e;font-size:11px}
.lesson-quiz{margin-top:24px;border-color:#d6e5e9}.lesson-quiz>.panel-head{background:#f5fafb;padding:20px 23px;font-size:14px}.lesson-quiz>.panel-head small{font-size:10px;color:#6c8897}.lesson-quiz form{padding:25px}.quiz-item{padding-bottom:22px;border-bottom:1px solid #edf2f4;margin-bottom:24px}.quiz-item:last-child{border-bottom:0;padding-bottom:0}.quiz-item legend{font-size:13px;line-height:1.6;color:#2a4a5d;padding:0 0 3px}.quiz-options{gap:9px}.quiz-option{font-size:12px;line-height:1.7;padding:12px 14px;border-radius:8px;border-color:#dfe8eb;background:#fff;transition:all .15s}.quiz-option:hover{border-color:#a8c9cf;background:#fafdfd}.quiz-option:has(input:checked){background:#edf8f6;border-color:#4da6a8;box-shadow:0 0 0 1px #4da6a815}.quiz-option input{accent-color:#087e8b;margin-top:4px}.quiz-item details{font-size:10px;color:#8096a3;margin-top:13px}.question-feedback{font-size:11px;line-height:1.7}.quiz-actions{border-color:#e3ecef;padding-top:21px;gap:10px}.quiz-actions button{font-size:12px;padding:11px 16px}#continue-lesson:not(:disabled){background:#143d51;color:white;border-color:#143d51}#quiz-result{font-size:12px;line-height:1.8;color:#63828f;margin-top:14px}footer{font-size:8px;letter-spacing:1px;color:#8ba0ac;margin-top:28px;gap:15px}.error{color:#b66a50!important}#course-toggle{display:none}
@media(min-width:1550px){main{padding:42px 48px}.workspace{grid-template-columns:1.5fr 1fr}h1{font-size:38px}}
@media(max-width:1100px){.shell{grid-template-columns:220px minmax(0,1fr)}main{padding:28px 24px}.top{align-items:flex-start}.workspace{grid-template-columns:1fr}.inspector{min-height:320px}.top>div:last-child{min-width:0}.use-case-head{gap:10px}}
@media(max-width:650px){header{height:64px;padding:0 15px;gap:12px}.brand{font-size:19px}.brand small{font-size:7px}.logo{width:33px;height:33px}.badge{display:none}#course-toggle{display:block;margin-left:auto;font-size:11px;background:#f3f8f9;border-color:#dbe7eb}.shell{display:block}aside{display:none;position:static;height:auto;max-height:65vh;overflow:auto;padding:20px 14px;white-space:normal;border-bottom:1px solid #dce6e9}.course-open aside{display:block}aside>.eyebrow,.side-note{display:block}.course-status{display:block;margin:0 8px 14px}.course-status small{display:block}.course-filters{display:flex;margin:0 8px 16px}#nav{display:block}.level-heading{display:block}.nav{display:block;width:100%;white-space:normal}.nav small{margin-left:24px}.side-note{display:none}main{padding:24px 16px}.top{gap:18px}h1{font-size:29px;letter-spacing:-.9px}.subtitle{font-size:12px;line-height:1.8}.pattern{font-size:8px}.use-case{margin-top:20px;padding:16px 17px}.use-case-head{align-items:flex-start}.use-case-head span:last-child{text-align:right;font-size:8px;max-width:48%}.use-case p{font-size:12px}.workspace{margin-top:17px;gap:16px}.panel-head{padding:14px 16px}.panel-head small{font-size:8px}.controls{padding:12px 10px;gap:6px}.controls button{font-size:10px;padding:8px 9px}.controls select{font-size:9px;padding:7px}.counter{font-size:9px}.narrative{padding:17px}.lesson-bottom{grid-template-columns:1fr;gap:14px}.concept{padding:20px}.lesson-quiz form{padding:18px}.quiz-options{grid-template-columns:1fr}.quiz-actions{gap:8px}.quiz-actions button{font-size:11px;padding:10px 12px}#continue-lesson{margin-left:0}.phase-buttons{gap:4px}.phase-buttons button{font-size:9px}.journey{padding:15px}.journey-top{font-size:8px}.journey-top .eyebrow{font-size:8px}.tabs{gap:18px}pre{font-size:10px}.diagram{padding-top:18px}.legacy-note{font-size:10px}footer{font-size:7px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.packet{display:none}}

.brand small{font-size:8px;letter-spacing:1.25px}.logo svg{width:30px;height:30px}@media(max-width:650px){.brand small{font-size:6px;letter-spacing:.65px}.logo svg{width:26px;height:26px}}

.header-link{font-size:11px;color:#446473;text-decoration:none;padding:7px 9px;border-radius:7px}.header-link:hover{background:#edf8f6;color:#087e8b}.start-card{margin:0 8px 15px;padding:12px 13px;border:1px solid #cfe2e3;border-radius:10px;background:#edf8f6;color:#28596a;text-decoration:none;display:block;font-size:11px;line-height:1.5}.start-card strong{display:block;color:#087e8b;font-size:12px;margin-bottom:2px}:root[data-theme=dark] .header-link{color:#82d8d3}:root[data-theme=dark] .header-link:hover{background:#20464c}:root[data-theme=dark] .start-card{background:#193840;border-color:#285460;color:#bdd4da}:root[data-theme=dark] .start-card strong{color:#82d8d3}


/* First-visit course entry: integrated with the normal explorer shell */
.course-entry{max-width:900px;margin:0;padding:0;background:transparent}
.course-entry .eyebrow{margin-bottom:10px}
.course-entry h1{margin:0 0 12px;font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-1.2px}
.course-entry-copy{max-width:760px;margin:0;color:#5d7381;font-size:14px;line-height:1.8}
.course-entry-actions{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 24px}
.course-entry-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;border:1px solid #d7e3e7;border-radius:8px;background:#fff;color:#244556;text-decoration:none;font-size:12px;font-weight:700;box-shadow:0 2px 5px rgba(20,57,73,.04)}
.course-entry-button:hover{border-color:#a9c2ca;background:#f8fbfc}
.course-entry-button.primary{background:#087e8b;border-color:#087e8b;color:#fff}
.course-entry-button.primary:hover{background:#076f7a;border-color:#076f7a}
.course-entry-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.course-entry-points span{padding:15px 16px;border:1px solid #dce7eb;border-radius:9px;background:#fff;color:#607783;font-size:11px;line-height:1.65;box-shadow:0 3px 12px rgba(24,59,77,.025)}
.course-entry-points strong{display:block;margin-bottom:5px;color:#355565;font-size:9px;letter-spacing:1px}
.course-entry-next{margin:18px 0 0;color:#6d8290;font-size:11px}
.course-entry-next a{color:#087e8b;font-weight:700;text-decoration:none}
body.course-entry-state .shell{display:grid}
body.course-entry-state main>:not(#course-entry):not(footer){display:none!important}
body.course-entry-state #course-entry{display:block!important}
body.course-entry-state .start-card{border-color:#87c8c7;background:#e8f5f3;box-shadow:inset 3px 0 #087e8b}
body.course-entry-state .nav.active{background:transparent;color:inherit;box-shadow:none}
body.course-entry-state .nav.active small{color:#788e9c}
body.course-entry-state footer{margin-top:34px}
@media(max-width:900px){.course-entry-points{grid-template-columns:1fr}.course-entry{max-width:none}}
@media(max-width:650px){body.course-entry-state .shell{display:block}.course-entry{padding-top:2px}}
:root[data-theme=dark] .course-entry-copy,:root[data-theme=dark] .course-entry-next{color:#9eb2bc}
:root[data-theme=dark] .course-entry-button{background:#183443;border-color:#355463;color:#dceaf0;box-shadow:none}
:root[data-theme=dark] .course-entry-button:hover{background:#1d3c4c;border-color:#4a6a78}
:root[data-theme=dark] .course-entry-button.primary{background:#65c7c4;border-color:#65c7c4;color:#07161d}
:root[data-theme=dark] .course-entry-points span{background:#132b3b;border-color:#304653;color:#9eb2bc;box-shadow:none}
:root[data-theme=dark] .course-entry-points strong{color:#d8e8ee}
:root[data-theme=dark] body.course-entry-state .start-card{background:#17383c;border-color:#3e7777}

/* Guided-course navigation state */
#footer-next.is-disabled,
#footer-next[aria-disabled="true"] {
  color: var(--muted);
  opacity: .6;
  pointer-events: none;
  text-decoration: none;
}

/* Teaching copy: preserve the lesson's reasoning sequence as readable paragraphs. */
.concept-copy p,
#concept p { margin: 0 0 0.85rem; }
.concept-copy p:last-child,
#concept p:last-child { margin-bottom: 0; }