@import url('./p5-guides.css');

.history-guide-scene,.history-guide-practice,.hg-notebook,.hg-legacy{--hg-ink:#253f43;--hg-muted:#4f6364;--hg-green:#1c6558;--hg-line:#b9cbbd;box-sizing:border-box;color:var(--hg-ink);line-height:1.65;min-width:0;overflow-wrap:anywhere}
.history-guide-scene *,.history-guide-practice *,.hg-notebook *{box-sizing:border-box}
.history-guide-scene{margin:24px 0;border:1px solid var(--hg-line);border-radius:22px;overflow:hidden;background:#fffcf3;box-shadow:0 8px 26px #304a4510}
.hg-scene-heading{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(200px,.8fr);gap:24px;padding:24px;background:linear-gradient(120deg,#edf5e9,#fbf1dd);align-items:center}
.hg-scene-heading h3,.hg-practice-heading h3,.hg-notebook h3{font-size:clamp(1.3rem,2.3vw,1.8rem);line-height:1.3;color:var(--hg-ink);margin:8px 0 12px}
.hg-scene-heading p,.hg-practice-heading p,.hg-notebook p{margin:10px 0 0;font-size:1rem}
.hg-eyebrow{display:block;font-size:.76rem;font-weight:800;letter-spacing:.055em;line-height:1.6;color:#365b4e}
.hg-panorama{margin:0;background:#fffdf7;border:1px solid #b9cbbd;border-radius:14px;overflow:hidden;min-width:0;box-shadow:0 4px 12px #36473512}
.hg-panorama img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hg-panorama figcaption{font-size:.8rem;line-height:1.5;color:#40584e;padding:10px 12px;text-align:left;max-width:none}
.hg-original-scene .p5g-figure{margin:0;border:0;border-radius:0;box-shadow:none;background:#fffdf7}
.hg-original-scene .p5g-figure .ls-heading{padding:20px 24px}
.hg-explorer{padding:22px 24px;background:#edf4e9;border-top:1px solid var(--hg-line)}
.hg-legend-title{margin:0 0 12px;font-weight:800}
.hg-point-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hg-point-buttons button{min-width:0;min-height:48px;display:flex;align-items:center;gap:9px;text-align:left;border:1px solid #799f91;border-radius:12px;background:#fffdf7;color:#294a43;font:inherit;font-weight:750;padding:12px;cursor:pointer;line-height:1.4}
.hg-point-buttons button>span{display:grid;place-items:center;flex:none;width:27px;height:27px;background:#e7f0e3;border-radius:50%;font-size:.9rem}
.hg-point-buttons button[aria-pressed="true"]{background:#205c50;color:#fffdf3;border-color:#164b41;box-shadow:0 3px 0 #143e35}
.hg-point-buttons button[aria-pressed="true"]>span{background:#ffdf9e;color:#304640}
.hg-point-detail{padding:18px 20px;margin-top:16px;background:#fffef8;border-left:4px solid #ba7950;border-radius:0 12px 12px 0;min-height:115px}
.hg-point-detail strong{font-size:1.1rem}.hg-point-detail p{margin:6px 0 0;max-width:80ch}
.history-guide-practice{margin:26px 0;border:1px solid var(--hg-line);border-radius:20px;background:#fffdf7;overflow:hidden}
.hg-practice-heading{display:flex;align-items:flex-start;gap:20px;justify-content:space-between;padding:24px;background:#edf4e9;border-bottom:1px solid var(--hg-line)}
.hg-practice-heading>div{min-width:0}.hg-count{flex:none;max-width:200px;display:inline-block;border:1px solid #91b09b;border-radius:12px;padding:9px 13px;background:#fffdf4;color:#254e42;font-weight:800;font-size:.9rem}
.hg-group{padding:22px}.hg-group h4{margin:0 0 18px;font-size:1.1rem;color:#2d5a4f}
.hg-exercises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;list-style:none;padding:0;margin:0}
.hg-exercise{min-width:0;padding:20px;background:#fff;border:1px solid #c2d0c3;border-radius:14px;box-shadow:0 3px 0 #b3c3b21b;display:flex;flex-direction:column;align-items:stretch}
.hg-exercise:last-child:nth-child(odd){grid-column:1/-1}
.hg-exercise-heading{display:flex;align-items:center;gap:10px;font-size:.8rem;font-weight:800;color:#476356;margin-bottom:16px}
.hg-number{width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:10px;background:#e6efdf;color:#345b3f;font-size:1rem}
.hg-prompt{font-weight:750;font-size:1.06rem;line-height:1.55;display:block;margin:0 0 12px}
.hg-passage{margin:0 0 18px;padding:16px;border:1px solid #ddc59e;border-left:4px solid #b87744;border-radius:0 10px 10px 0;background:#fff5df}
.hg-passage .hg-eyebrow{font-size:.7rem;color:#6c502b}.hg-passage p{font-size:1rem;line-height:1.75;margin:8px 0 0;white-space:normal}
.hg-options{padding-left:24px;margin:0 0 16px;line-height:1.6;font-size:1rem}.hg-options li{padding-left:5px;margin:5px 0}
.hg-input-help{font-size:.84rem;color:var(--hg-muted);margin:auto 0 6px;padding-top:8px}
.hg-exercise input,.hg-exercise select{width:100%;max-width:100%;min-width:0;min-height:48px;border:1px solid #799d8b;border-radius:9px;background:#fffefb;color:#203e3a;padding:11px 12px;font:inherit;font-size:1rem;line-height:1.5}
.hg-exercise select{text-overflow:ellipsis}.hg-exercise input[aria-invalid="true"],.hg-exercise select[aria-invalid="true"]{border:2px solid #a74e2e}
.hg-hint,.hg-source{margin-top:10px;font-size:.94rem}.hg-hint summary,.hg-source summary,.hg-notebook summary{min-height:44px;padding:10px 0;cursor:pointer;font-weight:750;line-height:1.6;color:#2c5b4e}
.hg-hint p,.hg-source p{margin:0;padding:10px 13px;border-radius:9px;background:#eff5ec;line-height:1.65}.hg-source a{color:#28577d;text-underline-offset:3px}
.hg-feedback{padding:13px 15px;margin:16px 0 0;border-radius:10px;background:#fff0df;border-left:4px solid #b66539;font-size:.96rem;line-height:1.7}
[data-history-guide-status="correct"] .hg-feedback{background:#e8f3e4;border-color:#378257}
[data-history-guide-status="missing"] .hg-feedback,[data-history-guide-status="format"] .hg-feedback{background:#edf1fa;border-color:#5b7493}
.hg-pause{padding:18px 24px;background:#faf0db;border-block:1px solid #e2cb9f}.hg-pause p{margin:4px 0 0;font-size:.95rem}
.hg-practice-actions{padding:24px;background:#edf4e9;border-top:1px solid var(--hg-line)}
.hg-check{font:inherit;font-weight:800;font-size:1rem;min-height:48px;max-width:100%;white-space:normal;line-height:1.5;padding:12px 20px;color:#fff;background:#1f6555;border:2px solid #1a5347;border-radius:11px;cursor:pointer;box-shadow:0 3px 0 #123e35}
.hg-check:hover:not(:disabled){background:#194f43}.hg-check:disabled{opacity:.6;cursor:default;box-shadow:none}
.hg-status{margin:16px 0 0;font-size:1rem;line-height:1.65}.hg-small{font-size:.88rem;color:var(--hg-muted);margin:10px 0 0}
.hg-notebook{padding:24px;background:#fff8e9;border:1px solid #d8c6a4;border-radius:18px;margin:24px 0}.hg-notebook h3 span{font-weight:500;font-size:1rem}
.hg-writing-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:20px}.hg-writing-fields label{display:flex;flex-direction:column;gap:6px;min-width:0}.hg-writing-fields label>span{font-size:.87rem;color:#665941}
.hg-writing-fields textarea{display:block;width:100%;min-width:0;resize:vertical;border:1px solid #acb9a7;border-radius:10px;background:#fffefb;color:#283f3a;padding:12px;font:inherit;font-size:1rem;line-height:1.65;margin-top:6px}
.hg-pages{margin-top:18px;border-top:1px solid #d8c6a4;padding-top:6px}.hg-pages .p5g-preview{margin-top:10px}.hg-writing-help{margin-top:12px}
.hg-notebook:not([open]){padding-block:8px}.hg-notebook>summary{font-size:1.08rem}.hg-reflection{display:flex;flex-direction:column;gap:6px;margin:0 0 22px;min-width:0}.hg-reflection>span{font-size:.87rem;color:#4e6156}.hg-reflection textarea{font:inherit;width:100%;min-width:0;min-height:100px;padding:12px;border:1px solid #7c9d8a;border-radius:10px;background:#fffef9;color:#253f43;line-height:1.65;resize:vertical}
.hg-legacy{padding:18px 22px;background:#eef2f9;border:1px solid #b8c9dd;border-left:5px solid #557797;border-radius:0 12px 12px 0;margin:20px 0}.hg-legacy p{margin:6px 0 0}
.hg-completion-note{font-size:1rem;line-height:1.7;color:#425c55;margin:24px 0}
.history-guide-scene :focus-visible,.history-guide-practice :focus-visible,.hg-notebook :focus-visible{outline:3px solid #ae4d24;outline-offset:4px;scroll-margin-block:80px}
.hg-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.hg-exercises{grid-template-columns:1fr}.hg-writing-fields{grid-template-columns:1fr}.hg-scene-heading{grid-template-columns:1fr}.hg-panorama{max-width:480px}.hg-point-buttons{grid-template-columns:1fr}.hg-point-detail{min-height:0}}
@media(max-width:560px){.hg-scene-heading,.hg-explorer,.hg-practice-heading,.hg-practice-actions,.hg-notebook{padding:18px}.hg-practice-heading{flex-direction:column;gap:14px}.hg-count{max-width:100%}.hg-group{padding:15px}.hg-exercise{padding:16px}.hg-passage{padding:13px}.hg-check{width:100%}.hg-pause{padding:16px 18px}.history-guide-scene,.history-guide-practice{border-radius:16px}.hg-notebook h3 span{display:block;margin-top:5px}}
@media(prefers-reduced-motion:reduce){.history-guide-scene *,.history-guide-practice *,.hg-notebook *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[data-motion="reduced"] .history-guide-scene *,[data-motion="reduced"] .history-guide-practice *,[data-motion="reduced"] .hg-notebook *{animation:none!important;transition:none!important;scroll-behavior:auto!important}