.mode-nav { display:grid; gap:6px; margin-bottom:28px; }
.mode-button { display:flex; align-items:center; gap:10px; padding:11px 10px; border:1px solid transparent; border-radius:8px; background:transparent; color:#c6d4c6; text-align:left; font-size:11px; font-weight:550; }
.mode-button.active { color:white; background:#49624d; border-color:#657c5e; }
.mode-button:hover { background:#ffffff0b; }
.mode-button.active:hover { background:#49624d; }
.mode-button .icon { width:18px; height:18px; }
#map-library-section { min-width:0; }
.practice-workspace, .foundations-workspace { padding-top:30px; }
.practice-intro { padding:7px 0 25px; max-width:830px; }
.practice-intro h1, .foundations-intro h1 { font:400 clamp(28px,3vw,40px)/1.2 Georgia,serif; letter-spacing:-1px; margin:8px 0 15px; }
.practice-intro > p, .foundations-intro > p { color:#6f7f65; font-size:14px; line-height:1.8; max-width:700px; margin:0; }
.practice-intro .eyebrow { color:#6f855c; }
.practice-overview { display:flex; gap:12px; align-items:center; padding:13px 17px; border:1px solid #dbe4d0; border-radius:10px; background:#edf2e5; margin:0 0 23px; color:#657b55; font-size:12px; }
.practice-overview .icon { width:20px; height:20px; }
.practice-overview strong { color:#405d34; font-weight:600; }
.case-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.case-card { display:flex; flex-direction:column; background:#fff; border:1px solid #dfe5d7; border-radius:13px; padding:24px; text-align:left; min-width:0; box-shadow:0 6px 20px #263e3303; }
.case-card:hover { border-color:#9bb387; box-shadow:0 8px 24px #263e330a; }
.case-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.case-domain { display:flex; align-items:center; gap:8px; color:#708b5d; font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.case-number { font:400 25px Georgia,serif; color:#c0cdb5; }
.case-card h2 { font:400 24px/1.25 Georgia,serif; letter-spacing:-.5px; margin:0 0 11px; max-width:390px; }
.case-card > p { color:#7b8770; font-size:12px; line-height:1.8; margin:0 0 20px; }
.case-focus { font-size:10px; color:#8c987f; margin-top:auto; padding-top:8px; }
.case-card-bottom { margin-top:18px; padding-top:15px; border-top:1px solid #e6ebdf; display:flex; justify-content:space-between; align-items:center; color:#4d6d3d; font-size:12px; font-weight:550; }
.case-progress { font-size:9px; font-weight:400; color:#7e9070; }
.home-footnote { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:23px 0; padding:16px 2px; border-top:1px solid #dde4d4; font-size:11px; color:#829174; }
.home-footnote button { flex:none; }
.lesson-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.lesson-header h1 { font:400 clamp(25px,2.7vw,33px)/1.25 Georgia,serif; letter-spacing:-.7px; margin:8px 0 7px; }
.lesson-header .back-button { margin-top:7px; }
.lesson-domain { color:#7f9071; font-size:11px; }
.lesson-prompt { display:grid; grid-template-columns:minmax(0,1fr) 225px; gap:25px; border:1px solid #dce4d2; border-radius:11px; background:white; padding:19px 21px; margin-bottom:17px; }
.lesson-prompt p { color:#67785d; font-size:12px; line-height:1.85; margin:0; }
.lesson-goal { border-left:1px solid #e3e8db; padding-left:22px; }
.lesson-goal b { display:block; font-size:9px; color:#8a997b; letter-spacing:1.2px; text-transform:uppercase; margin:1px 0 7px; }
.lesson-goal span { color:#526e41; font-size:12px; line-height:1.7; }
.learning-rail { display:flex; gap:6px; align-items:center; color:#9aa68d; font-size:10px; margin:0 0 17px; flex-wrap:wrap; }
.rail-step { display:flex; align-items:center; gap:5px; padding:4px 0; }
.rail-step .rail-dot { width:6px; height:6px; border-radius:50%; background:#d4ddc8; }
.rail-step.done { color:#63824d; }
.rail-step.done .rail-dot { background:#6f8d56; }
.rail-link { width:29px; height:1px; background:#d9e2cd; margin:0 3px; }
.lesson-bench { display:grid; grid-template-columns:minmax(0,1fr) 324px; background:#fff; border:1px solid #d8e2cf; border-radius:13px; overflow:hidden; }
.lesson-visual { background:#fafcf7; min-width:0; display:flex; flex-direction:column; }
.lesson-visual-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 17px; border-bottom:1px solid #e1e8d8; font-size:10px; color:#7a8d69; }
.lesson-visual-head strong { font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.lesson-visual-head span { font-size:9px; white-space:nowrap; }
.lesson-viewport { height:525px; position:relative; overflow:hidden; touch-action:none; cursor:grab; background-image:radial-gradient(#d2ddc8 .8px,transparent .8px); background-size:19px 19px; }
.lesson-world { width:940px; height:650px; position:absolute; top:0; left:0; transform-origin:0 0; }
.lesson-edges { position:absolute; inset:0; width:940px; height:650px; overflow:visible; pointer-events:none; }
.lesson-node { cursor:pointer; width:182px; padding:12px 13px; }
.lesson-node .node-title { font-size:14px; }
.lesson-node.context { width:205px; }
.lesson-node.context .node-title { font:400 20px/1.3 Georgia,serif; }
.lesson-node .node-subtitle { font-size:10px; }
.lesson-node.new-evidence { border-color:#719251; box-shadow:0 0 0 3px #b8cda64d; }
.lesson-node.decision-node { border-color:#cbd8bf; }
.lesson-node.decision-node.chosen { background:#eaf2e1; border-color:#74955d; }
.lesson-node.decision-node.chosen.exposed { background:#fbf0e9; border-color:#bc8a6c; }
.lesson-node .node-type { font-size:8px; }
.lesson-node.unknown { border-style:dashed; color:#8b987d; background:#fbfcf9; }
.lesson-node.unknown .node-title { font-size:12px; font-weight:400; }
.lesson-map-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-top:1px solid #e5ebdd; }
.lesson-map-controls .button { font-size:10px; padding:6px 9px; }
.lesson-map-controls .legend { font-size:8px; gap:10px; }
.lesson-evidence { padding:15px 18px; border-top:1px solid #dce6d1; background:#f0f5e9; min-height:115px; }
.evidence-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:6px; }
.evidence-heading strong { color:#4c6a3b; font-size:12px; font-weight:600; }
.evidence-heading span { font-size:8px; letter-spacing:1px; text-transform:uppercase; color:#82976e; }
.lesson-evidence p { font-size:11px; color:#6c805c; line-height:1.75; margin:0; }
.evidence-source { display:block; font-size:9px; color:#8b9e7b; margin-top:7px; }
.lesson-panel { border-left:1px solid #dce4d2; min-width:0; }
.lesson-panel-tabs { display:flex; padding:10px 10px 0; gap:3px; border-bottom:1px solid #e5ebdc; }
.lesson-panel-tab { border:0; border-bottom:2px solid transparent; padding:10px 7px; font-size:10px; color:#8a987a; background:white; flex:1; }
.lesson-panel-tab.active { color:#466737; border-bottom-color:#73945b; font-weight:600; }
.lesson-panel-content { height:665px; overflow-y:auto; padding:18px 16px; scrollbar-width:thin; scrollbar-color:#d3dfc7 transparent; }
.lesson-panel-content h2 { font:400 19px/1.3 Georgia,serif; margin:0 0 9px; }
.lesson-panel-lead { color:#8a967f; font-size:11px; line-height:1.75; margin:0 0 15px; }
.investigation-card { border:1px solid #dfe7d5; border-radius:8px; padding:11px; margin-bottom:10px; background:#fff; }
.investigation-card.done { background:#f6f9f1; border-color:#e2e9d9; }
.investigation-card.done .investigation-button { opacity:.8; }
.investigation-button { width:100%; text-align:left; padding:0; background:transparent; border:0; display:flex; gap:9px; align-items:flex-start; }
.investigation-button .icon { width:15px; height:15px; color:#7f9a67; margin-top:1px; }
.investigation-button strong { display:block; font-size:11px; font-weight:600; line-height:1.5; }
.investigation-button span small { display:block; font-size:10px; color:#89967c; line-height:1.7; margin-top:4px; }
.action-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; color:#95a485; font-size:9px; padding-left:24px; }
.principle-button { padding:0; border:0; background:transparent; color:#718d5a; font-size:9px; text-decoration:underline; text-underline-offset:3px; }
.missing-requirement { color:#a28c65; display:block; font-size:9px; padding:7px 0 0 24px; line-height:1.6; }
.practice-textarea { width:100%; border:1px solid #d8e3cc; background:#fbfcf8; border-radius:8px; padding:11px; color:#4e6540; font-size:12px; line-height:1.8; resize:vertical; min-height:110px; }
.practice-field-label { display:block; font-size:11px; color:#6c815a; margin-bottom:7px; }
.thinking-notice { font-size:10px; color:#93a186; line-height:1.7; margin:9px 0 15px; }
.decision-option { display:block; width:100%; border:1px solid #d8e3cd; border-radius:9px; background:white; padding:13px 12px; text-align:left; margin-bottom:10px; }
.decision-option:hover { background:#f3f7ed; border-color:#9db88a; }
.decision-option.inspected { background:#f3f7ed; border-color:#9db88a; }
.decision-option strong { display:block; font-size:12px; color:#4b683c; font-weight:600; margin-bottom:5px; }
.decision-option span { display:block; color:#889a78; font-size:10px; line-height:1.7; }
.decision-option .icon { margin-top:8px; width:15px; height:15px; color:#789a5d; }
.protection-state { display:flex; align-items:center; gap:7px; border:1px dashed #d8c9ac; background:#fcf9f1; border-radius:7px; padding:9px 11px; font-size:10px; color:#9c855b; margin-top:14px; }
.protection-state.established { border-style:solid; border-color:#c8d9bb; color:#688652; background:#eff5e8; }
.protection-state .icon { width:15px; height:15px; }
.evidence-list { margin-top:15px; display:grid; gap:7px; }
.evidence-list button { width:100%; border:0; background:#f5f8f0; color:#708460; border-radius:6px; padding:8px 9px; text-align:left; font-size:10px; line-height:1.6; }
.practice-outcome { margin-top:22px; border:1px solid #d6e2cc; border-radius:13px; background:white; padding:25px; }
.outcome-eyebrow { display:flex; align-items:center; gap:7px; color:#799564; font-size:9px; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.practice-outcome.exposed { border-color:#dac5b5; }
.practice-outcome.exposed .outcome-eyebrow { color:#ac7b61; }
.practice-outcome h2 { font:400 27px/1.3 Georgia,serif; letter-spacing:-.5px; margin:0 0 13px; }
.practice-outcome p { font-size:12px; color:#748568; line-height:1.85; max-width:900px; }
.outcome-reasoning { border-left:2px solid #a7bf8e; padding-left:16px; margin:17px 0 20px; }
.outcome-reasoning strong { font-size:10px; color:#6b8755; display:block; margin-bottom:6px; }
.outcome-reasoning p { margin:0; }
.reflection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin:20px 0; }
.reflection-grid label { display:block; font-size:11px; color:#6d815b; margin:0 0 8px; min-height:35px; }
.reflection-grid textarea { min-height:130px; font-size:11px; }
.transfer-exercise { border-top:1px solid #e1e8d9; padding-top:19px; margin-top:16px; }
.transfer-exercise h3 { font:400 20px Georgia,serif; margin:0 0 8px; }
.transfer-exercise textarea { min-height:90px; }
.outcome-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.principle-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:15px; }
.principle-chip { border:1px solid #d7e3cb; border-radius:18px; background:#f5f8ef; color:#71875c; padding:5px 9px; font-size:10px; }
.attempt-timeline { margin-top:22px; padding:20px 0; border-top:1px solid #dce4d2; }
.attempt-timeline h2 { font-size:12px; font-weight:600; color:#66834f; margin:0 0 15px; }
.timeline-items { display:flex; gap:9px; overflow-x:auto; padding-bottom:9px; }
.timeline-entry { min-width:175px; max-width:220px; flex:0 0 auto; background:white; border:1px solid #dfe7d5; border-radius:8px; padding:12px; }
.timeline-entry b { display:block; font-size:10px; color:#72915a; margin-bottom:5px; }
.timeline-entry span { color:#87997a; font-size:10px; line-height:1.7; display:block; }
.timeline-entry small { display:block; font-size:9px; color:#a1ad94; margin-top:7px; }
.scenario-provenance { font-size:10px; color:#95a188; line-height:1.8; margin:17px 0 0; }
.previous-attempts { margin-top:18px; color:#758967; font-size:11px; }
.previous-attempts summary { cursor:pointer; padding:10px 0; }
.previous-attempt { border:1px solid #dfe7d5; background:white; padding:14px; border-radius:8px; margin-top:9px; }
.previous-attempt b { color:#597847; font-size:11px; }
.previous-attempt p { font-size:11px; line-height:1.7; margin:6px 0; }
.foundations-intro { max-width:780px; margin:8px 0 25px; }
.principles-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.principle-card { text-align:left; border:1px solid #dfe6d7; border-radius:10px; padding:20px; background:white; display:flex; gap:14px; align-items:flex-start; }
.principle-card:hover { border-color:#9bb58a; }
.principle-card > span { color:#9caf8c; font:400 22px Georgia,serif; flex:none; }
.principle-card h2 { font:400 20px/1.3 Georgia,serif; margin:0 0 7px; }
.principle-card p { font-size:11px; line-height:1.8; color:#839675; margin:0; }
.principle-reading { max-width:800px; padding:30px; margin:22px auto; border:1px solid #dce5d2; border-radius:14px; background:white; }
.principle-reading h1 { font:400 34px/1.25 Georgia,serif; letter-spacing:-.6px; margin:12px 0 20px; }
.principle-reading p { font-size:14px; color:#728665; line-height:1.95; margin:14px 0; }
.principle-reading h2 { font-size:11px; letter-spacing:.6px; color:#577744; margin:25px 0 8px; }
.principle-reading .reading-question { font:400 23px/1.45 Georgia,serif; color:#4f6f3b; margin:18px 0; }
.principle-reading .principle-practice { border-top:1px solid #e1e9d8; padding-top:18px; margin-top:25px; }
.principle-modal-body p { font-size:12px; line-height:1.9; }
.principle-modal-body h3 { font-size:10px; color:#6b8556; margin:20px 0 5px; }
.content-footer { color:#95a18a; font-size:10px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 0 5px; }
.content-footer a { color:#70885b; }
@media(min-width:1650px) { .lesson-bench { grid-template-columns:minmax(0,1fr) 355px; } .lesson-viewport { height:600px; } .lesson-panel-content { height:740px; } }
@media(max-width:1250px) { .lesson-bench { grid-template-columns:minmax(0,1fr) 290px; } .lesson-panel-content { padding:15px 12px; } .lesson-prompt { grid-template-columns:minmax(0,1fr) 190px; gap:18px; } .case-card { padding:20px; } }
@media(max-width:1070px) { .mode-button { justify-content:center; padding:11px 5px; } .mode-button span { display:none; } .mode-nav { margin-bottom:24px; } }
@media(max-width:950px) { .lesson-bench { grid-template-columns:1fr; } .lesson-panel { border-left:0; border-top:1px solid #dce4d2; } .lesson-panel-content { height:auto; max-height:560px; padding:20px; } .lesson-viewport { height:510px; } .reflection-grid { grid-template-columns:1fr; } .reflection-grid label { min-height:0; } .reflection-grid textarea { min-height:90px; } }
@media(max-width:600px) { .sidebar { flex-wrap:wrap; padding:9px 12px; } .mode-nav { display:flex; gap:4px; margin:0; width:100%; } .mode-button { flex:1; font-size:9px; padding:10px 6px; gap:6px; } .mode-button span { display:block; white-space:nowrap; } .mode-button .icon { width:15px; height:15px; } #map-library-section { display:flex; width:100%; gap:8px; align-items:center; padding-top:9px; } #map-library-section .sidebar-label { display:none; } .top-actions .button { padding:6px; } .practice-workspace { padding-top:24px; } .practice-intro { padding:0 0 21px; } .practice-intro h1 { font-size:30px; line-height:1.22; } .practice-intro > p { font-size:12px; } .practice-overview { font-size:10px; padding:12px; align-items:flex-start; } .case-grid, .principles-grid { grid-template-columns:1fr; gap:13px; } .case-card { padding:20px; } .case-card h2 { font-size:23px; } .case-card > p { font-size:12px; } .home-footnote { align-items:flex-start; flex-direction:column; gap:12px; } .lesson-header { display:block; } .lesson-header .back-button { margin:0 0 12px; } .lesson-header h1 { font-size:28px; } .lesson-prompt { display:block; padding:17px; } .lesson-goal { padding:13px 0 0; margin-top:14px; border-left:0; border-top:1px solid #e4eadc; } .lesson-prompt p { font-size:12px; } .learning-rail { gap:4px; font-size:8px; } .rail-link { width:11px; margin:0 1px; } .lesson-viewport { height:450px; } .lesson-visual-head { padding:12px; font-size:9px; } .lesson-visual-head span { font-size:8px; } .lesson-map-controls { padding:8px; gap:5px; flex-wrap:wrap; } .lesson-map-controls .legend { gap:8px; } .lesson-evidence { padding:14px; } .lesson-panel-content { padding:19px 16px; } .practice-outcome { padding:20px 16px; } .practice-outcome h2 { font-size:24px; } .outcome-actions .button { width:100%; } .principle-reading { padding:22px 18px; margin:15px 0; } .principle-reading h1 { font-size:29px; } .principle-reading p { font-size:13px; } .content-footer { align-items:flex-start; font-size:9px; gap:12px; } .case-progress { font-size:8px; } }
.topbar { position:sticky; top:0; z-index:20; }
.sidebar { position:sticky; top:77px; height:calc(100vh - 77px); align-self:start; overflow-y:auto; }
html { scroll-padding-top:92px; }
.practice-outcome { scroll-margin-top:94px; }
@media(max-width:600px) { .sidebar { position:static; height:auto; overflow:visible; } html { scroll-padding-top:82px; } .practice-outcome { scroll-margin-top:82px; } }