#listening-app{width:min(1240px,100%);padding-top:34px}
[hidden]{display:none!important}.listen-state{display:inline-block;padding:9px 14px;border-radius:99px;font-weight:800;color:#8d4530;background:#fff0e9}.listen-state.published{color:#166748;background:#e7f7ef}#listening-admin{max-width:800px}
.listen-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:start}
.listen-main{min-width:0;display:grid;gap:17px}.listen-hero{padding:26px 30px;border-radius:18px;background:linear-gradient(125deg,#145f82,#1c7998);color:#fff}.listen-hero h1{font-size:clamp(27px,3vw,38px);margin:8px 0}.listen-hero p{margin:0 0 12px;color:#e4f4fa}.listen-kicker{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:12px}.listen-count{font-weight:750}.listen-toolbar p:first-child{font-weight:700;margin:0 0 14px}.listen-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.listen-controls .button{white-space:nowrap}.listen-controls label{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700}.listen-controls select{border:1px solid #bdcbd9;border-radius:8px;background:#fff;color:#142238;padding:8px}.listen-voice-note{font-size:13px;color:#64768a;margin:12px 0 0}.listen-status:empty{display:none}.listen-status{font-size:14px;margin:12px 0 0}.listen-nav{position:sticky;top:14px}.listen-nav h2{font-size:20px}.listen-lesson-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.listen-lesson-grid a,.listen-lesson-grid span{display:grid;place-items:center;min-height:38px;border-radius:7px;font-weight:750;font-size:14px}.listen-lesson-grid a{background:#19798a;color:#fff}.listen-lesson-grid a:hover,.listen-lesson-grid a.current{background:#164d71;outline:2px solid #5ec8d7;outline-offset:1px}.listen-lesson-grid span{color:#8d9dad;background:#f0f3f6}.listen-nav .help{margin:14px 0 0}.listen-question h3{margin:0 0 4px;font-size:19px}.listen-question-head{display:flex;align-items:center;gap:14px;margin-bottom:15px}.listen-question-head p{margin:0;color:#62758a;font-size:14px}.listen-number{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:50%;color:#fff;background:#1b7791;font-size:20px;font-weight:800}.listen-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:17px}.listen-choice{position:relative;display:block;cursor:pointer;border:2px solid #d4e0e8;border-radius:12px;background:#fff;min-width:0}.listen-choice:has(input:checked){border-color:#24769b;background:#edf9fd}.listen-choice:focus-within{outline:3px solid #7dbbd7;outline-offset:2px}.listen-choice.correct{border-color:#2e9569;background:#ecfaf3}.listen-choice.incorrect{border-color:#c95754;background:#fff3f2}.listen-choice input{position:absolute;left:13px;top:13px;accent-color:#1b7791;width:17px;height:17px}.listen-choice-body{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;min-height:84px;padding:20px 12px 14px;font-weight:750}.listen-choice-body img{display:block;width:min(100%,150px);height:110px;object-fit:contain}.listen-feedback{margin-top:17px;border-radius:10px;padding:15px 18px;background:#f0f8f4;border-left:4px solid #2e9569}.listen-feedback.no{background:#fff5f3;border-color:#c95754}.listen-feedback p{margin:6px 0;line-height:1.65}.listen-feedback p[lang="ja"]{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:18px}.listen-submit{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap}.listen-submit p{width:100%;margin:0}.listen-intro{margin-bottom:20px}.listen-intro+.listen-nav{max-width:500px}.listen-choice:has(input:disabled){cursor:default}
@media(max-width:900px){.listen-layout{grid-template-columns:1fr}.listen-nav{position:static;order:-1}.listen-lesson-grid{grid-template-columns:repeat(10,1fr)}}
@media(max-width:760px){.top{flex-wrap:wrap}.top nav{width:100%;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;justify-content:flex-start;padding:5px 0 7px}}
@media(max-width:600px){#listening-app{padding-top:20px}.listen-hero{padding:23px 20px}.listen-choices{grid-template-columns:1fr}.listen-choice-body{flex-direction:row;justify-content:flex-start;min-height:62px;padding:10px 12px 10px 42px;text-align:left}.listen-choice-body img{width:80px;height:64px}.listen-lesson-grid{grid-template-columns:repeat(5,1fr)}.listen-controls .button{flex:1}.listen-question{padding:20px}.listen-submit .button{flex:1}}
.listen-illustration{margin:20px 0}.listen-illustration img{display:block;max-width:100%;max-height:600px;width:auto;height:auto;margin:auto;border-radius:18px;object-fit:contain}.listen-illustration figcaption{font-size:.9rem;color:#586982;margin-top:9px;text-align:center}.listen-choice img{object-fit:contain!important;max-height:240px}.listen-choice-body small{display:block;font-size:.82rem;color:#586982}#listening-admin{max-width:1100px}.artwork-manager{margin-top:22px}.artwork-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1fr);gap:24px;margin:20px 0}.artwork-preview{display:flex;align-items:center;justify-content:center;min-height:250px;padding:18px;background:#f4f7fb;border:1px dashed #b7c4d6;border-radius:16px}.artwork-preview img{max-width:100%;max-height:400px;object-fit:contain;border-radius:12px}.artwork-preview p{color:#67758b}.artwork-manager select,.artwork-manager input,.artwork-prompt{font:inherit;max-width:100%;width:100%;padding:10px;border:1px solid #bac7d8;border-radius:9px;background:#fff}.artwork-manager input[type=file]{font-size:.9rem}.artwork-manager .field{margin-bottom:15px}.artwork-manager .row{margin-top:20px}.artwork-manager details{margin:15px 0}.artwork-prompt{min-height:130px;margin-top:12px;resize:vertical}.artwork-manager summary{cursor:pointer}@media(max-width:680px){.artwork-grid{grid-template-columns:1fr}.artwork-preview{min-height:180px}.listen-illustration img{max-height:430px}.artwork-manager .row>*{width:100%;text-align:center}}
.editor-panel{margin-top:22px}.editor-lesson-select{margin-top:22px}.editor-panel textarea,.editor-panel input:not([type=radio]):not([type=checkbox]),.editor-lesson-select select{box-sizing:border-box;width:100%;max-width:100%;font:inherit;padding:12px;border:1px solid #b9cbd9;border-radius:10px;background:#fff;color:#18304b}.editor-panel textarea{line-height:1.65;resize:vertical}.editor-panel .field{display:block;margin:17px 0}.editor-panel .field>span{display:block;font-weight:700;margin-bottom:7px}.editor-panel .field>small{display:block;margin-top:6px;color:#5c7186}.editor-panel h2{margin-top:0}.editor-media,.editor-question{border:1px solid #d1dfe7;border-radius:13px;padding:16px;margin:18px 0}.editor-media{background:#f7fafc}.editor-question>summary{font-size:1.1rem;font-weight:750}.editor-media summary,.editor-question summary,.editor-panel>details>summary,.listen-script summary{cursor:pointer;min-height:35px;line-height:1.6;font-weight:700}.editor-image-preview{display:flex;justify-content:center;align-items:center;min-height:130px;background:#edf3f7;border-radius:10px;margin:15px 0}.editor-image-preview img{max-width:100%;max-height:350px;object-fit:contain}.editor-audio{padding:16px;background:#f7fafc;border-radius:12px;margin:16px 0}.editor-audio h3{margin:0}.editor-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.editor-choice{padding:16px;background:#f5f8fb;border-radius:12px;margin:12px 0}.editor-question-actions{margin-top:16px}.editor-prompt,.listen-prose{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75}.editor-prompt{font-size:.9rem}.answer-picker,.publish-picker{display:flex;align-items:center;gap:9px}.answer-picker input,.publish-picker input{width:22px;height:22px;accent-color:#176b8d}.editor-save{margin:22px 0;position:sticky;bottom:0;z-index:10;box-shadow:0 -3px 20px #18304b12}.editor-save p{margin:10px 0}.editor-save .row{gap:10px}.listen-preview-banner{padding:12px 18px;border-radius:12px;background:#fff1cc;color:#5e4a18;font-size:.9rem}.listen-script p[lang=ja]{font-size:1.1rem}.listen-hero .listen-prose{color:#e4f4fa}#listening-admin{padding-bottom:25px}.editor-panel .row{flex-wrap:wrap}@media(max-width:640px){.editor-two{grid-template-columns:1fr;gap:0}.editor-panel{padding:18px}.editor-question,.editor-media,.editor-audio{padding:12px}.editor-save{position:static}.editor-save .row>*{width:100%}.editor-lesson-select select{font-size:16px}.editor-panel input,.editor-panel textarea{font-size:16px}.editor-choice{padding:12px}.answer-picker{min-height:44px}}
.listen-editor-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;margin-top:22px;align-items:start}.editor-main{min-width:0}.editor-main>.editor-panel:first-child{margin-top:0}.editor-large-nav{position:sticky;top:15px}.editor-50-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.editor-50-grid button{font:inherit;font-weight:750;min-height:40px;background:#f0f4f7;border:1px solid #c5d4df;border-radius:8px;color:#577087;cursor:pointer}.editor-50-grid button.has-content{background:#e0eff3;color:#194d66}.editor-50-grid button.current{background:#175f80;color:#fff;border:2px solid #63bac7}.editor-section-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.editor-section-tabs .current{background:#175f80!important;color:#fff!important}.editor-section{margin-top:20px;padding-top:10px;border-top:2px solid #d8e5eb}.editor-example{border-color:#8cbfb7;background:#f2faf6}.editor-script-fields{padding:14px;border:1px solid #b3cedb;border-radius:12px;background:#eef6fa;margin-top:20px}.editor-question h4{margin:18px 0 8px}.editor-question-actions select{font:inherit;max-width:100%;padding:8px;border:1px solid #b4c8d5;border-radius:9px}.editor-question-actions>label{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.listen-group{scroll-margin-top:20px}.listen-group>h2{margin-top:4px}.listen-group-prompt{font-size:1.1rem;font-weight:700;padding:14px;background:#eef6fa;border-radius:12px}.listen-group-links{display:flex;gap:8px;flex-wrap:wrap}.listen-group-links a{padding:9px 13px;border-radius:10px;background:#e7f1f5;color:#175f80;font-weight:700}.listen-subitem{padding:20px 0;border-top:1px solid #d5e1e8;margin-top:18px}.listen-example{background:#f2faf6;border:1px solid #b3d8ce;border-radius:14px;padding:18px;margin-bottom:20px}.listen-subitem-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.listen-subitem-head h3{margin:0}.listen-example-tag{font-size:.8rem;color:#476d61}.listen-item-actions{margin-top:15px;align-items:center}.listen-item-actions p{margin:0}.listen-feedback h4{margin:12px 0 5px}.listen-group>.listen-kicker{color:#346b82}#listening-admin{max-width:1400px}.editor-section .editor-audio{border:1px solid #accbd9}@media(max-width:980px){.listen-editor-layout{grid-template-columns:1fr}.editor-large-nav{position:static}.editor-50-grid{grid-template-columns:repeat(10,1fr)}.editor-large-nav h2{font-size:1.1rem}.editor-50-grid button{min-height:40px}}@media(max-width:520px){.editor-50-grid{grid-template-columns:repeat(5,1fr)}.editor-section-tabs{display:grid;grid-template-columns:1fr 1fr}.editor-section-tabs button{white-space:normal;line-height:1.4}.listen-example{padding:13px}.listen-item-actions button{width:100%}.editor-script-fields{padding:10px}}

/* V5.1: compact lesson picker and save panel below the editor. */
.editor-large-nav{min-width:0;box-sizing:border-box;overflow:hidden}
.editor-lesson-picker{display:grid;gap:10px;min-width:0}
.editor-lesson-picker label{font-weight:700;color:#18304b}
.editor-lesson-picker output{display:inline-block;min-width:2ch;text-align:center;color:#175f80;font-size:1.2rem}
.editor-lesson-picker input[type=range]{display:block;box-sizing:border-box;width:100%;max-width:100%;height:44px;accent-color:#175f80;cursor:pointer;touch-action:pan-y}
.editor-lesson-picker-row{display:flex;align-items:stretch;gap:8px;min-width:0}
.editor-lesson-picker-row input{min-width:0;width:4.5em;flex:1 1 auto;padding:9px;border:1px solid #bac7d8;border-radius:9px;font:inherit;font-size:16px;color:#18304b}
.editor-lesson-picker-row button{flex:0 0 auto;min-height:44px;white-space:nowrap;padding:9px 12px}
.editor-lesson-picker #lesson-picker-status{margin:2px 0 0;overflow-wrap:anywhere}
.editor-save{position:static;box-shadow:none}
@media(max-width:980px){.editor-large-nav{position:static}}

.editor-panel select[data-item-type]{box-sizing:border-box;max-width:100%;width:100%;padding:12px;border:1px solid #b9cbd9;border-radius:10px;background:#fff;color:#18304b;font:inherit}
.listen-number-answer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0;font-weight:700}.listen-number-answer input{box-sizing:border-box;max-width:100%;width:130px;min-height:48px;padding:10px 14px;border:2px solid #bacfdd;border-radius:10px;font:inherit;font-size:20px;color:#18304b}.listen-number-answer input:focus{outline:3px solid #7dbbd7;outline-offset:2px}.listen-subitem .listen-illustration img{width:min(100%,760px);max-height:none}.editor-panel .listen-preview-banner{overflow-wrap:anywhere}

/* V5.3: vocabulary beside each listening task, stacked on smaller screens. */
.editor-vocab-entry{padding:14px;margin:14px 0;border:1px solid #d4e1e8;border-radius:12px;background:#fff}
.listen-group-columns{min-width:0}.listen-group-exercises{min-width:0}.listen-vocabulary{padding:18px;border:1px solid #d7e4d8;border-radius:14px;background:#f2f8ef;color:#284c37;min-width:0;overflow-wrap:anywhere;align-self:start}.listen-vocabulary h3{margin:0 0 12px;font-size:1.1rem}.listen-vocabulary dl{margin:10px 0 0}.listen-vocabulary dl>div{padding:11px 0;border-top:1px solid #dbe6d7}.listen-vocabulary dt{font-weight:750;line-height:1.6}.listen-vocabulary dt small{font-weight:500}.listen-vocabulary dd{margin:3px 0 0;line-height:1.6}.listen-vocabulary dd small{display:block;color:#60705d;font-size:.85rem;margin-top:4px}.listen-vocabulary summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700}.listen-vocab-label{font-size:.85rem;color:#5b7056;margin:0}.listen-vocabulary details{margin-top:12px}
@media(min-width:1280px){.listen-group-columns.has-vocabulary{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px}}
@media(max-width:1279px){.listen-group-columns.has-vocabulary{display:flex;flex-direction:column;gap:16px}.listen-group-columns.has-vocabulary>.listen-vocabulary{order:-1;box-sizing:border-box;width:100%}}


/* listening-compact-v1: native details starts closed; keyboard and touch supported. */
.listen-vocabulary-fold{padding:0;overflow:hidden}
.listen-vocabulary-fold>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;min-height:52px;padding:13px 16px;margin:0;cursor:pointer;list-style:none;line-height:1.5;font-weight:750}
.listen-vocabulary-fold>summary::-webkit-details-marker{display:none}
.listen-vocabulary-fold>summary::before{content:'▸';font-size:18px;flex:0 0 auto}
.listen-vocabulary-fold[open]>summary::before{content:'▾'}
.listen-vocabulary-fold>summary small{font-size:12px;font-weight:500;color:#526a50}
.listen-vocabulary-fold:not([open])>.listen-vocabulary-content{display:none!important}
.listen-vocabulary-fold:not([open]) .listen-vocab-close-hint,.listen-vocabulary-fold[open] .listen-vocab-open-hint{display:none}
.listen-vocabulary-fold>summary:focus-visible{outline:3px solid #528f99;outline-offset:-4px;border-radius:12px}
.listen-vocabulary-fold[open]>summary{border-bottom:1px solid #d7e4d8;background:#e9f2e5}
.listen-vocabulary-fold .listen-vocabulary-content{padding:14px 17px 17px}
.listen-vocabulary-fold .listen-vocab-label{margin:14px 0 4px;font-size:.9rem;font-weight:700}
.listen-vocabulary-fold .listen-vocab-label:first-child{margin-top:0}
.listen-vocabulary-fold dl{margin:6px 0 16px}
@media(max-width:1279px){.listen-group-columns.has-vocabulary>.listen-vocabulary-fold{width:100%;box-sizing:border-box}}