:root{font-family:"BIZ UDPGothic","Noto Sans JP","Yu Gothic",system-ui,sans-serif;color:#483626;background:#fffaf1;font-size:16px;--orange:#b94e10;--line:#e7d9c9;--green:#365c2c}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid #d9c7b4;background:white;padding:11px 18px;border-radius:10px;min-height:44px;font-weight:700}button:hover{background:#fff2df}button:disabled{opacity:.55;cursor:default}button.primary{background:var(--orange);color:white;border-color:var(--orange)}button.danger{color:#a32735;background:#fff3f3}.small{font-size:.88rem;padding:8px 12px}input,select,textarea{width:100%;border:1px solid #d9cbbb;border-radius:9px;background:#fff;padding:12px}textarea{resize:vertical;min-height:150px;line-height:1.8}input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid #e7a431;outline-offset:2px}label{display:block;font-weight:700;margin:0 0 16px}label input,label select,label textarea{margin-top:7px;font-weight:400}.devbar{padding:6px 24px;background:#fff0d4;color:#725118;font-size:.82rem;text-align:center}header{max-width:1500px;margin:auto;display:flex;align-items:center;gap:16px;padding:21px 28px;border-bottom:1px solid var(--line);flex-wrap:wrap}.brand{font-size:clamp(20px,2vw,29px);font-weight:900;text-decoration:none;color:inherit;display:flex;align-items:center;gap:10px;letter-spacing:.02em}.panda{font-size:42px}.pill{background:#e9efdc;padding:6px 13px;border-radius:30px;font-size:.9rem;white-space:nowrap}nav{margin-left:auto;display:flex;gap:4px}nav button{border-color:transparent;background:transparent}nav button.active{background:var(--orange);color:white}main{max-width:1500px;margin:auto;padding:25px 28px}h1{font-size:1.65rem;line-height:1.5;margin:0 0 18px}h2{font-size:1.3rem;margin:0 0 16px}h3{margin:0 0 10px}p{line-height:1.8}.panel{background:white;border:1px solid var(--line);border-radius:16px;padding:24px}.columns{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(440px,1.2fr);gap:22px;align-items:start}.row{display:flex;gap:12px;align-items:center}.row>*{flex:1}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}.actions.end{justify-content:flex-end}.muted{color:#766c60;font-size:.9rem}.active-card{background:#f3f7ed;border:1px solid #d6e0ca;border-radius:13px;padding:18px;margin-bottom:12px}.active-card .top{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{color:#32582e;background:#e0edce;border-radius:20px;padding:5px 10px;font-size:.86rem;font-weight:bold}.count{font-size:1.3rem;font-weight:800;margin-left:auto}.history-list{max-height:430px;overflow:auto}.history-item{display:flex;align-items:center;gap:12px;padding:15px 2px;border-bottom:1px solid #eee3d7;flex-wrap:wrap}.history-item .details{flex:1;min-width:160px}.history-item strong{display:block;line-height:1.7}.history-item button{font-size:.88rem}.empty{padding:30px 15px;text-align:center;color:#766c60}.subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.subject{min-height:140px;text-align:left;position:relative;padding:22px;background:var(--tint);border:2px solid transparent}.subject.selected{border-color:var(--orange)}.subject .name{display:block;font-size:1.5rem;line-height:1.7}.subject .sub{display:block;font-size:.85rem;margin-top:10px;line-height:1.7;font-weight:400}.subject .status{position:absolute;right:10px;top:10px}.student-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}.student-panel{min-height:420px}.student-panel textarea{height:210px}.prompt{padding:12px 16px;background:#fff6e5;border-radius:10px}.counter{text-align:right;font-size:.85rem;color:#766c60}.record{padding:20px;border:1px solid var(--line);border-radius:12px;background:white;margin-bottom:14px}.record p{white-space:pre-wrap}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap}.toolbar h1{margin:0}.map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.map-card{border:3px solid var(--border);background:var(--tint);border-radius:16px;padding:22px}.map-card h2{font-size:clamp(22px,2.2vw,34px);text-decoration:underline;text-underline-offset:7px;line-height:1.5}.map-card ul{list-style:disc;margin:0;padding-left:1.3em}.map-card li{font-size:clamp(20px,1.85vw,30px);line-height:1.75;margin:12px 0;white-space:pre-wrap;overflow-wrap:anywhere}.map-foot{text-align:center;font-weight:700;font-size:1.2rem;margin-top:18px}.pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin:18px}.raw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.raw-card{background:white;border:1px solid var(--line);padding:20px;border-radius:12px;font-size:1.15rem;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.map-view header{display:none}.map-view main{max-width:none;padding:18px}.map-view .devbar{font-size:.75rem;padding:3px}.table-wrap{overflow:auto;max-height:65vh}table{width:100%;border-collapse:collapse;background:white}th,td{text-align:left;padding:14px;border-bottom:1px solid var(--line);white-space:pre-wrap;line-height:1.7}th{position:sticky;top:0;background:#fff2df}#notice{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#463629;color:white;border-radius:12px;padding:12px 22px;box-shadow:0 5px 22px #0002;max-width:90vw;z-index:20;display:none}#notice.show{display:block}dialog{border:1px solid var(--line);border-radius:18px;padding:25px;max-width:950px;width:90vw;max-height:85vh;overflow:auto}dialog::backdrop{background:#2f241a66}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.qr-card{padding:16px;border:1px solid var(--line);border-radius:12px;text-align:center;break-inside:avoid}.qr-card canvas{width:170px;height:170px;max-width:100%;image-rendering:pixelated}.qr-card a{font-size:.8rem;display:block;overflow-wrap:anywhere;color:#864018}.qr-card .actions{justify-content:center}.welcome{max-width:660px;margin:20px auto}.setup-message{border-left:4px solid #c77624;padding:12px 16px;background:#fff4de;line-height:1.8}a{color:#975022}.check{display:flex;align-items:flex-start;gap:10px;font-weight:400;line-height:1.7}.check input{width:20px;height:20px;flex-shrink:0}.hidden{display:none!important}.list-scroll{max-height:60vh;overflow:auto}@media(max-width:950px){.columns,.student-layout{grid-template-columns:1fr}.subjects{grid-template-columns:repeat(4,1fr)}.subject{padding:12px}.subject .name{font-size:1.2rem}.subject .status{position:static;display:inline-block}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){header,main{padding:14px}nav{margin:0;overflow:auto;width:100%}.subjects,.map-grid,.raw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:17px}.row{display:block}.cards{grid-template-columns:1fr}.brand{font-size:20px}.panda{font-size:32px}.map-card li{font-size:19px}}@media print{body{background:white}.devbar,header,main,#notice,dialog>.actions{display:none!important}dialog[open]{display:block;position:static;max-width:none;width:100%;max-height:none;overflow:visible;border:0;padding:0}dialog::backdrop{display:none}.cards{grid-template-columns:repeat(3,1fr)}.qr-card .actions,.qr-card a,.print-hide{display:none}.qr-card{margin-bottom:10px}.qr-card canvas{width:155px;height:155px}}

/* Dedicated pupil writing page: use the available height for the editor. */
.student-writing header{padding-top:10px;padding-bottom:10px}
.student-writing .panda{font-size:30px}
.student-writing main{padding-top:12px;padding-bottom:12px}
.writing-panel{display:flex;flex-direction:column;gap:12px;min-height:calc(100dvh - 108px);padding:20px}
.writing-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.writing-heading h1{font-size:1.3rem;margin:0;flex:1;min-width:140px;overflow-wrap:anywhere}
.writing-panel .prompt{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.writing-label{margin:0}
.writing-panel textarea{flex:1;width:100%;min-height:220px;font-size:1.25rem;line-height:1.8;margin:0;resize:vertical}
.writing-footer{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.writing-footer .counter{margin-left:auto}
.writing-footer button{min-width:160px}
.sent-answer{border-top:1px solid var(--line);padding-top:10px}
.sent-answer summary{cursor:pointer;color:#766c60}
.sent-answer p{white-space:pre-wrap;overflow-wrap:anywhere}
@media(min-width:951px){.subjects{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:650px){.student-writing header{gap:8px}.student-writing main{padding:10px}.writing-panel{min-height:calc(100dvh - 162px);padding:14px;gap:10px}.writing-panel textarea{min-height:220px}.writing-heading h1{order:4;flex-basis:100%}.writing-footer{gap:10px}.writing-footer .muted{flex-basis:100%}.writing-footer button{min-width:140px}}

.quote-source{display:block;margin-top:6px;font-size:.8rem;font-weight:400;padding:4px 10px;min-height:32px}.original-text{white-space:pre-wrap;overflow-wrap:anywhere}

.roster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin-top:18px;max-height:45vh;overflow:auto;padding:4px}.roster-grid label{margin:0;display:flex;align-items:center;gap:10px;white-space:nowrap}.roster-grid input{margin:0;min-width:0}.teacher-review{table-layout:fixed}.teacher-review th:first-child{width:18%}.teacher-review th:nth-child(2){width:44%}.teacher-review tbody th{position:static;background:#fffaf1}.teacher-review td{vertical-align:top;overflow-wrap:anywhere}.review-group{margin-bottom:14px}.review-group p{margin:6px 0;white-space:pre-wrap}@media(max-width:650px){.roster-grid{grid-template-columns:1fr}.teacher-review{min-width:650px}}

.app-version{display:inline-block;font-size:12px;font-weight:400;letter-spacing:0;color:#766c60;white-space:nowrap;vertical-align:middle;margin-left:6px}.identity-text{font-size:.9rem;color:#766c60}.identity-text:empty{display:none}

#qrPrintRoot{display:none}
@page{size:A4 portrait;margin:10mm}
@media print{
 body.printing-qr{background:white!important;color:black!important;margin:0!important}
 body.printing-qr>*:not(#qrPrintRoot){display:none!important}
 body.printing-qr #qrPrintRoot{display:block!important}
 .qr-print-page{break-after:page;page-break-after:always}
 .qr-print-page:last-child{break-after:auto;page-break-after:auto}
 .qr-print-page>h1{font-size:12pt;margin:0 0 5mm;line-height:1.4}
 .qr-print-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5mm}
 .qr-print-card{height:75mm;border:1px dashed #777;border-radius:0;padding:4mm 2mm;text-align:center;break-inside:avoid;page-break-inside:avoid;overflow:hidden}
 .qr-print-card h2{font-size:13pt;margin:0 0 2mm;line-height:1.4}
 .qr-print-card img{display:block;width:44mm;height:44mm;margin:0 auto;image-rendering:pixelated}
 .qr-print-card p{font-size:8pt;line-height:1.4;margin:2mm 0 0}
}

.subject .name{display:flex;align-items:center;gap:12px}.subject-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:54px;height:54px;font-size:36px;line-height:1;background:#ffffffb3;border-radius:16px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}@media(max-width:950px){.subject .name{gap:8px;flex-wrap:wrap}.subject-icon{width:46px;height:46px;font-size:30px}}

/* Keep labels, headings and body text in separate layout boxes. */
.pill{display:inline-block;line-height:1.5;vertical-align:middle;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.record{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0}
.record>.pill{align-self:flex-start}
.record>h2{margin:0;line-height:1.6;overflow-wrap:anywhere}
.record>p{margin:0;line-height:1.9;overflow-wrap:anywhere}
.record>.muted{display:block;line-height:1.6}
.status{display:inline-flex;align-items:center;line-height:1.5;vertical-align:middle}
.subject .status{position:static;display:inline-flex;margin-top:10px}
.subject .sub{overflow-wrap:anywhere}
.history-item .details{min-width:0;flex-basis:180px}
.history-item .details strong{overflow-wrap:anywhere}
.history-item .details>.muted{display:block;line-height:1.6;margin-top:4px}
.sent-answer summary{line-height:1.6}
.sent-answer>.muted{display:block;line-height:1.6;margin-top:8px}

.work-group-list{display:grid;gap:10px;margin:16px 0}.work-group{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:12px}.work-group strong{font-size:1.2rem}.work-group .primary{margin-left:auto}
.work-board-view header{display:none}.work-board-view main{max-width:none;padding:10px}.work-board-shell{height:calc(100dvh - 20px);display:flex;flex-direction:column;gap:8px;min-height:400px}.work-board-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.work-board-toolbar h1{margin:0;font-size:1.2rem;max-width:30vw;overflow-wrap:anywhere}.work-board-toolbar button{padding:8px 12px}.work-board-toolbar #boardStatus{font-size:.85rem;max-width:300px;overflow-wrap:anywhere}.board-zoom-label{display:flex;align-items:center;gap:6px;font-size:.85rem;margin:0 0 0 auto}.board-zoom-label select{width:auto;margin:0;padding:7px}.board-help{font-size:.85rem;line-height:1.5;margin:0}.board-viewport{flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#f6f4ed;overscroll-behavior:contain}.board-canvas{position:relative;transform-origin:top left;background-image:radial-gradient(#d6cdbc 1px,transparent 1px);background-size:24px 24px}.board-card{position:absolute;width:300px;height:208px;padding:0 12px 12px;background:var(--card-color);border:1px solid #bcaa8b;border-radius:12px;box-shadow:0 3px 6px #0001;display:flex;flex-direction:column}.board-card.dragging{z-index:10;box-shadow:0 8px 20px #0003}.board-card-tools{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;height:38px}.board-card-tools button{font-size:12px;padding:3px 6px;min-height:30px;background:transparent;border-color:transparent}.board-handle{touch-action:none;cursor:grab!important}.board-handle:active{cursor:grabbing!important}.board-card-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;overflow:auto;font-size:17px;flex:1;min-height:0}.board-heading{height:68px;border:2px solid #a4967f}.board-heading .board-card-tools{height:28px}.board-heading .board-card-text{font-size:18px;font-weight:bold;line-height:1.5}.board-heading .board-card-tools button{min-height:24px;padding:0 6px}
@media(max-width:650px){.work-board-toolbar h1{max-width:60vw}.work-board-toolbar #boardStatus{flex-basis:100%}.work-board-toolbar{gap:5px}.board-help{font-size:.75rem}}

.board-group{height:300px}.board-group-title{font-size:19px;line-height:1.5;margin:2px 0 10px;max-height:86px;overflow:auto;overflow-wrap:anywhere;flex-shrink:0}.board-group .board-card-text ul{margin:0;padding-left:1.3em}.board-group .board-card-text li{margin:0 0 12px;white-space:pre-wrap;overflow-wrap:anywhere}.board-full-list{padding-left:1.5em}.board-full-list li{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;margin-bottom:16px}
.ink-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.ink-toolbar [role="group"]{display:flex;gap:4px}.ink-toolbar button{padding:6px 10px;min-height:38px;font-size:.9rem}.ink-toolbar button[aria-pressed="true"]{background:var(--orange);color:white;border-color:var(--orange)}.ink-toolbar label{display:flex;gap:5px;align-items:center;margin:0;font-size:.85rem}.ink-toolbar select{width:auto;margin:0;padding:7px}.ink-toolbar .muted{font-size:.8rem}#inkLayer{position:absolute;left:0;top:0;z-index:20;touch-action:none;pointer-events:none;overflow:hidden}.ink-toolbar+ .board-help{font-size:.8rem}

/* Board display controls */
.board-zoom-controls{display:flex;align-items:center;gap:6px;margin-left:auto}.board-zoom-controls .board-zoom-label{margin:0}.board-zoom-controls>button{min-width:40px;font-size:20px;padding:4px 10px}.work-board-view main{margin:0;width:100%}.work-board-shell{min-height:0}.work-board-toolbar,.board-help,.ink-toolbar{flex-shrink:0}html:fullscreen{background:var(--bg,#fffaf1)}

.survey-voices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.survey-voices section {min-width:0}
.survey-original {white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:700px){.survey-voices{grid-template-columns:1fr}}