/* Field notebook: one palette for every school illustration and practice screen. */
.field-school,.field-figure,.learning-block{--paper:#fffaf0;--ink2:#193d32;--muted2:#50645c;--sage:#a7c49a;--shade:#75967a;--sky:#e1f0ed;--sea:#d4e8e6;--orange:#c05d20;--blue:#267d9a;--red:#b7423b;--purple:#806198;--edge:#ced6c6}
/* The body must grow with long lessons; otherwise the dark root shows below one viewport. */
html:has(body.school-mode){background-color:#f1eddf}
body.school-mode{height:auto;min-height:100%;background:#f1eddf;color:#193d32}
body.school-mode #app{min-height:100dvh}
.field-school{background:#f1eddf}
/* Shared controls inside paper panels need the light-theme semantic colors. */
.field-school,.field-figure,.learning-block{--ink:#193d32;--dim:#50645c;--accent:#2f6b46;--warn:#8a4b10;--danger:#a33130}
.field-school{color:var(--ink2);padding:6px 2px 30px;font-size:16px;line-height:1.8}
.field-school h1{font-size:30px;line-height:1.3;margin:9px 0 12px;font-weight:800;letter-spacing:.02em}
.field-school h2{font-size:20px;line-height:1.5;margin:24px 0 12px}
.field-school p{margin:10px 0}.field-school .sub{font-size:14px;color:var(--muted2)}
.field-school .btn,.learning-block .btn{color:var(--ink2);background:var(--paper);border:1px solid var(--edge);border-radius:14px;padding:15px 16px;min-height:48px;line-height:1.6;font-size:16px;text-align:left;box-shadow:0 2px 0 #193d3208}
.field-school .btn small,.learning-block .btn small{color:var(--muted2);font-size:13px;line-height:1.6;margin-top:5px}
.field-school .btn.primary,.learning-block .btn.primary{background:var(--ink2);color:var(--paper);border-color:var(--ink2)}
.field-school .btn.primary small,.learning-block .btn.primary small{color:#e1edda}
.field-school .btn:hover{border-color:var(--orange)}
.field-school .btn.ghost{background:var(--paper);color:var(--ink2);box-shadow:none;border-color:#69806c}
.field-school button:focus-visible,.figure-expand:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.field-school .card,.field-school .why{background:var(--paper);border:1px solid var(--edge);border-radius:15px;padding:18px;color:var(--ink2)}
.field-school .why{border-left:4px solid var(--orange);line-height:1.8}
.school-kicker{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--orange);text-transform:uppercase}
.school-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.school-nav button{border:0;background:transparent;color:var(--muted2);padding:6px 0;min-height:40px;cursor:pointer;font:inherit;font-size:14px}
.school-nav button+button:before{content:' / ';color:var(--edge);margin-right:8px}
.school-intro{border-bottom:1px solid var(--edge);padding-bottom:20px;margin-bottom:20px}
.school-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.school-grid .btn{margin:0;display:flex;flex-direction:column;justify-content:space-between}
.lesson-num{font-family:Georgia,serif;font-size:32px;color:var(--orange);line-height:1.2;margin-bottom:12px}.lesson-status{font-size:12px;color:var(--muted2);margin-top:8px;display:block}
.lesson-prog{height:7px;background:var(--edge);border-radius:10px;overflow:hidden;margin:12px 0}.lesson-prog span{display:block;height:100%;background:var(--shade)}
.lesson-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted2)}
.lesson-source{font-size:12px;color:var(--muted2);margin-top:22px;padding:12px 0;border-top:1px solid var(--edge)}
.lesson-source a{color:var(--blue);text-decoration:underline}.field-school details{border:1px solid var(--edge);border-radius:12px;background:var(--paper);margin:12px 0;padding:12px 16px}.field-school summary{cursor:pointer;font-weight:700;min-height:32px}
.field-school .answer-good{border-left-color:#387b48;background:#edf4e6}.field-school .answer-again{background:#fff0df}
.field-school .feedback-label{font-size:13px;color:var(--muted2);font-weight:700}.field-school .feedback-title{font-size:20px;line-height:1.6;font-weight:800;margin:5px 0}
.field-school .clue-list{list-style:none;margin:14px 0;padding:0}.field-school .clue-list li{padding:10px 14px;margin:6px 0;background:#e6eee2;border-radius:9px}.field-school .clue-list li::before{content:'見るところ　';font-size:12px;font-weight:700;color:var(--muted2)}
.learning-block{background:var(--paper);color:var(--ink2);border:1px solid var(--edge);border-radius:16px;padding:18px;margin:16px 0}.learning-block p{font-size:14px;line-height:1.8}.learning-block h2{font-size:19px;margin:0 0 10px}.learning-block .sub{color:var(--muted2)}
.journal-card{padding:16px;border-left:3px solid var(--shade);background:var(--paper);border-radius:0 12px 12px 0;margin:12px 0}.journal-card time{font-size:12px;color:var(--muted2)}
.field-figure{display:block;margin:14px 0;padding:12px;background:var(--paper);border:1px solid var(--edge);border-radius:16px;color:var(--ink2);overflow:hidden}
.field-figure svg{width:100%;height:auto;display:block;overflow:hidden}.field-figure svg text{font-family:system-ui,'Yu Gothic',sans-serif;fill:var(--ink2);font-size:18px;stroke:none}.field-figure svg .f-title{font-size:21px;font-weight:800}.field-figure img{display:block;width:100%;height:auto;border-radius:10px}
.field-figure figcaption{font-size:14px;line-height:1.7;margin:12px 3px 6px;color:var(--muted2)}
.figure-expand{display:block;margin:10px 0 0 auto;padding:7px 12px;min-height:40px;font:inherit;font-size:13px;border:1px solid var(--edge);border-radius:20px;background:var(--paper);color:var(--ink2);cursor:pointer}
.figure-zoom{max-height:70vh;overflow:auto;background:#fffaf0;border-radius:12px}.figure-zoom .field-figure{width:750px;max-width:none;margin:0}.figure-zoom .figure-expand{display:none}.modal:has(.figure-zoom){max-width:900px;width:94vw}
.f-sky{fill:var(--sky)}.f-sea{fill:var(--sea)}.f-land,.f-jp{fill:var(--sage);stroke:var(--shade);stroke-width:1.6;stroke-linejoin:round}.f-far{fill:#b9d1c4}.f-shade{fill:var(--shade)}
.f-ridge,.f-stream,.f-line,.f-arrow,.f-lead,.f-contour,.f-isobar,.f-trail,.f-sight,.f-magnetic,.f-warm-arrow{fill:none;stroke-linecap:round;stroke-linejoin:round}
.f-ridge{stroke:var(--orange);stroke-width:5;stroke-dasharray:9 6}.f-stream{stroke:var(--blue);stroke-width:5}.f-contour{stroke:#887047;stroke-width:2.2}.f-isobar{stroke:#516963;stroke-width:2}
.f-trail{stroke:#ebd8aa;stroke-width:10}.f-line,.f-lead{stroke:var(--ink2);stroke-width:2}.f-arrow{stroke:var(--ink2);stroke-width:3}.f-warm-arrow{stroke:var(--red);stroke-width:4}
.f-plate{fill:#f8f7e5cc;stroke:var(--shade);stroke-width:2}.f-dial{fill:var(--paper);stroke:var(--ink2);stroke-width:3}.f-dial-inner{fill:none;stroke:var(--edge);stroke-width:2}.f-orient{fill:none;stroke:var(--orange);stroke-width:2}.f-needle{fill:var(--red)}.f-needle-s{fill:#677670}.field-figure svg .f-north{fill:var(--red);font-weight:800;font-size:15px}.f-map{fill:#f5f1d9;stroke:var(--edge);stroke-width:2}.f-magnetic{stroke:var(--blue);stroke-width:2;stroke-dasharray:5 4}.f-sight{stroke:var(--blue);stroke-width:3;stroke-dasharray:7 5}.f-position{fill:var(--orange);stroke:var(--paper);stroke-width:3}
.f-high{fill:var(--red)}.f-low{fill:var(--blue)}.field-figure svg .f-pressure-label{fill:var(--paper);font-size:23px;font-weight:800}.f-front{fill:none;stroke:var(--ink2);stroke-width:3}.f-symbol{stroke:none}.f-cold{fill:var(--blue);stroke:var(--blue)}.f-warm{fill:var(--red);stroke:var(--red)}.f-occ{fill:var(--purple);stroke:var(--purple)}.f-front{fill:none}
.f-air-cold{fill:#acd8e8}.f-air-warm{fill:#f2c7b0}.f-cloud{fill:#fdfcf5;stroke:#89aaa9;stroke-width:2}.f-rain{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round}.f-cirrus{fill:none;stroke:#fffef9;stroke-width:9;stroke-linecap:round}.f-lightning{fill:none;stroke:var(--orange);stroke-width:5}.f-sign{fill:#d4ae70;stroke:#806847;stroke-width:3}.f-boot{fill:#6a5748;stroke:var(--ink2);stroke-width:2}.f-trouser{fill:none;stroke:#5c7b69;stroke-width:13;stroke-linejoin:round;stroke-linecap:round}
.field-school .checkgroup .gitem{background:var(--paper);color:var(--ink2);border-color:var(--edge)}.field-school .checkgroup .gitem small{color:var(--muted2);font-size:13px}.field-school .checkgroup .ck{border-color:var(--shade)}.field-school .checkgroup .sel .ck{background:var(--shade)}
@media(max-width:360px){.school-grid{grid-template-columns:1fr}.field-school h1{font-size:26px}.field-school .btn{padding:13px}.field-figure{padding:7px}}
@media(prefers-reduced-motion:reduce){.field-school *{animation:none!important;transition:none!important}}

.eyebrow{font-size:12px!important;font-weight:800;letter-spacing:.1em;color:var(--muted2)}
.lesson-progress{height:7px;background:var(--edge);border-radius:8px;overflow:hidden;margin:12px 0}.lesson-progress span{display:block;height:100%;background:var(--shade)}
.lesson-card,.journal-entry{background:var(--paper);border:1px solid var(--edge);padding:16px;border-radius:14px;margin:12px 0}
.lesson-feedback{padding:16px;border-radius:12px;border-left:4px solid var(--orange);background:#fff0df;margin:16px 0}.lesson-feedback.ok{border-color:#387b48;background:#edf4e6}
.field-school .gitem{background:var(--paper);color:var(--ink2);border-color:var(--edge)}.field-school .gitem small{color:var(--muted2)}.field-school .gitem.sel{background:#e2eddc}
.field-school .lesson-aim{font-size:15px;color:var(--muted2)}

.field-figure svg .f-elevation{font-size:14px}


/* Painted scenes and exact diagrams use one readable field-guide layout. */
.guide-figure{padding:12px;background:#fffaf0;border-color:#bccbb9;box-shadow:0 3px 12px #283d2410}
.art-heading{font-size:21px;font-weight:800;line-height:1.5;padding:5px 4px 13px;color:#183d2b}
.guide-figure .guide-art{width:100%;height:auto;object-fit:contain;background:#f6f1e5;border-radius:10px;margin:0;aspect-ratio:3/2}
.guide-figure .guide-art+svg,.guide-figure svg+.guide-art{margin-top:12px}
.art-notes{margin:12px 0;padding:4px 14px;border-left:4px solid #c07732;background:#f4efdf;border-radius:0 9px 9px 0}
.art-notes p{font-size:18px;line-height:1.65;margin:7px 0;color:#233e30}
.guide-figure figcaption{font-size:16px;line-height:1.7;margin:13px 4px 6px}
.art-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.art-panel-label{font-size:18px;font-weight:750;line-height:1.6;padding:9px 4px}
.art-diagram-paper{fill:#f8f2e1;stroke:#d1c8ac;stroke-width:1}
.guide-figure .f-contour{stroke:#875c2f;stroke-width:3}
.guide-figure .f-isobar{stroke:#52655e;stroke-width:2.5}
.guide-figure svg .art-elevation{font-size:21px;font-weight:700}
.art-map-route{stroke:#a86627;stroke-width:7;fill:none;stroke-linecap:round}
.art-dial-tick{stroke:#526358;stroke-width:1.2;fill:none}
.art-red-arrow{stroke:#ae4037;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.guide-figure svg .art-label-halo{paint-order:stroke;stroke:#fffaf0;stroke-width:6px;stroke-linejoin:round}
.guide-figure .f-pressure-label{paint-order:normal}
.guide-figure .figure-expand{min-height:48px;font-size:16px}
.modal:has(.figure-zoom){background:#fffaf0;color:#193d32;border:1px solid #bccbb9}
.modal:has(.figure-zoom)>h2,.modal:has(.figure-zoom)>p{color:#193d32}
.modal:has(.figure-zoom)>.btn{background:#193d32;color:#fffaf0;border-color:#193d32}
.question-prompt{margin:16px 0}.question-prompt h2{margin-top:0}
body.reading-large .art-notes p,body.reading-large .art-panel-label{font-size:22px}
body.reading-large .guide-figure figcaption{font-size:20px}
@media(max-width:480px){.art-pair{grid-template-columns:1fr}.art-heading{font-size:20px}.guide-figure{padding:8px}}

/* Numbered observations are shown after answering and remain readable in zoom. */
.clue-frame{position:relative;container-type:inline-size;margin:10px 0;line-height:0}
.clue-frame>img,.clue-frame>svg{display:block;width:100%;height:auto;margin:0!important}
.clue-region{position:absolute;box-sizing:border-box;border:3px solid #a34b0d;border-radius:12px;box-shadow:0 0 0 2px #fffaf0;pointer-events:none}
.clue-region b{position:absolute;left:-8px;top:-15px;display:grid;place-items:center;width:30px;height:30px;background:#943e07;color:#fffaf0;border:2px solid #fffaf0;border-radius:50%;font-size:21px;line-height:1}
.figure-clue{background:#fff0d9;border:2px solid #b25b19;border-radius:12px;margin:16px 0 8px;padding:14px;color:#273d2b}
.figure-clue h3{font-size:20px;margin:0 0 8px;color:#873b0a}.figure-clue p{font-size:18px;line-height:1.8;margin:0}
.wind-focus,.clue-conditions,.clue-pair>div{border:3px solid #a34b0d;border-radius:12px;position:relative;box-sizing:border-box}
.pair-marker{position:absolute;left:6px;top:6px;background:#943e07;color:#fffaf0;border-radius:20px;padding:3px 6px;font-size:22px}
.sign-label,.map-label{position:absolute;display:block;text-align:center;color:#2b301e;font-weight:900;line-height:1.1;pointer-events:none}
.sign-label{left:28%;top:34.8%;width:17%;font-size:3.15cqw;transform:rotate(2deg)}
.map-label{left:49.1%;top:39.3%;width:13%;font-size:2.8cqw;transform:rotate(12deg);background:#fffaf0d9;padding:1% 0}
.condition-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.condition-pair p{margin:0;padding:12px;background:#eee8d4;border:1px solid #c4bea7;border-radius:9px}.condition-pair small,.condition-pair b{display:block}.condition-pair small{font-size:16px}.condition-pair b{font-size:22px}
.time-diagram{border:1px solid #bbc7b5;background:#f7f3e7;padding:14px;border-radius:12px;margin:14px 0;color:#193d32}
.time-heading{font-size:19px;font-weight:800;line-height:1.7;margin:0 0 16px}
.time-ticks{display:flex;justify-content:space-between;font-size:16px;font-weight:700;gap:4px}
.time-weather{height:70px;position:relative;margin:8px 0}.time-weather span{position:absolute;box-sizing:border-box;min-height:60px;background:repeating-linear-gradient(120deg,#dcebf1,#dcebf1 8px,#c8e0e9 8px,#c8e0e9 10px);border:1px solid #52788a;border-radius:8px;padding:7px;font-size:17px;font-weight:700;line-height:1.45}
.time-row{margin:12px 0}.time-row p{font-size:18px;line-height:1.7;margin:0 0 6px}.time-track{height:16px;position:relative;background:#e2e3d6;border-radius:8px;overflow:hidden}.time-track span{position:absolute;height:100%;background:#477754;border-radius:8px}
.clue-time{border:3px solid #a34b0d}.clue-time .time-row:first-of-type .time-track span{background:#a34b0d}
.time-footnote{font-size:16px;line-height:1.7;margin:12px 0 0}
.stamp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.learning-stamp{display:flex;align-items:center;gap:16px;border:1px solid #b1c0a8;background:#f8f2df;border-radius:14px;padding:16px;margin:12px 0;color:#284532}.stamp-grid .learning-stamp{margin:0}
.stamp-seal{flex:0 0 72px;width:72px;height:72px;box-sizing:border-box;display:grid;place-content:center;text-align:center;border:3px double #4c7954;border-radius:50%;font-size:19px;font-weight:800;line-height:1.3;color:#376742;transform:rotate(-8deg)}
.learning-stamp h3{font-size:20px;margin:0 0 6px}.learning-stamp p{font-size:16px;line-height:1.6;margin:4px 0}.learning-stamp>div{min-width:0;flex:1}.field-school .learning-stamp .btn{margin:8px 0 0;font-size:17px;padding:10px;min-height:52px}
.learning-stamp.waiting{background:#f4f2e9;border-style:dashed}.waiting .stamp-seal{font-size:14px;transform:none;border-color:#788270;color:#555f4e}
body.reading-large .figure-clue p,body.reading-large .time-row p,body.reading-large .time-heading,body.reading-large .learning-stamp p{font-size:22px}
body.reading-large .time-ticks,body.reading-large .time-footnote{font-size:18px}
body.reading-large .field-school .learning-stamp .btn{font-size:22px}
@media(max-width:680px){.stamp-grid{grid-template-columns:1fr}}
@media(max-width:360px){.time-diagram{padding:10px}.time-ticks{font-size:14px}.time-weather{height:90px}.time-weather span{font-size:16px;min-height:76px}.condition-pair{grid-template-columns:1fr}.learning-stamp{padding:12px;gap:12px}.stamp-seal{flex-basis:60px;width:60px;height:60px;font-size:17px}}

/* Checklist labels and selection marks stay distinct from the paper background. */
.field-school .gitem .nm b{font-size:var(--control-size,18px)}
.field-school .gitem .ck{border-color:#69806c;color:var(--ink2)}
.field-school .gitem.sel{border-color:#2f6b46;background:#e2eddc;box-shadow:0 0 0 1px #2f6b46 inset}
.field-school .gitem.sel .ck{background:#2f6b46;border-color:#2f6b46;color:#fffaf0}
.field-school .bar{background:#dce5d5;border-color:#90a38b}
.field-school .bar span{background:#2f6b46}
/* Dialogs inherit the school theme, including shared help and reset controls. */
body.school-mode .modal{background:#fffaf0;color:#193d32;border-color:#69806c;--panel:#fffaf0;--panel2:#f1eddf;--ink:#193d32;--dim:#50645c;--line:#69806c;--accent:#2f6b46;--warn:#8a4b10;--danger:#a33130}
body.school-mode .modal .btn{background:#fffaf0;color:#193d32;border:1px solid #69806c}
body.school-mode .modal .btn small{color:#50645c}
body.school-mode .modal .btn.primary{background:#193d32;color:#fffaf0;border-color:#193d32}
body.school-mode .modal .btn.primary small{color:#e1edda}
body.school-mode .modal a{color:#175f73}
body.school-mode .modal .why{background:#f1eddf;color:#193d32}