@import url("./writing-training.css");

.mode-tab{min-width:230px}
.training-layout{display:grid;grid-template-columns:235px minmax(0,1fr) 225px;gap:42px;padding-top:64px}
.scenario-nav{min-width:0;padding-right:22px;border-right:1px solid var(--line);align-self:start}
.scenario-list{border-top:1px solid var(--line)}
.group-label{margin:23px 0 4px;color:#8390a3;font-size:10px;font-weight:800;letter-spacing:.08em}
.scenario-button{width:100%;min-height:54px;padding:11px 0;border:0;border-bottom:1px solid var(--line);background:#fff;display:grid;grid-template-columns:28px 1fr 16px;gap:8px;align-items:center;text-align:left;color:#718094}
.scenario-button span{color:#a3afbf;font:10px ui-monospace,SFMono-Regular,monospace}
.scenario-button b{font-size:12px;font-weight:650;line-height:1.5}
.scenario-button small{color:var(--green);font-size:12px}
.scenario-button.active{color:var(--ink)}
.scenario-button.active span{color:var(--blue)}
.scenario-button.active b{font-weight:800}
.scenario-button:hover b{color:var(--blue)}
.nav-note{margin-top:36px;padding:20px;background:var(--soft)}
.nav-note b{font-size:12px}
.nav-note p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.75}
.exercise-main{min-width:0}
.exercise-kicker{display:flex;justify-content:space-between;gap:15px;color:var(--blue);font:700 11px ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em}
.exercise-kicker span:last-child{color:#7b8aa3;font-family:Inter,"PingFang SC",Arial,sans-serif;letter-spacing:0}
.exercise-main h2{margin:20px 0 0;font-size:clamp(30px,3.2vw,43px);line-height:1.18;letter-spacing:-.05em}
.exercise-intro{margin:22px 0 0;color:var(--muted);font-size:15px;line-height:1.8}
.fact-panels{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:32px}
.fact-panels section,.notice-facts{padding:20px;background:var(--soft)}
.fact-panels .unknown{background:var(--blue-pale)}
.fact-panels h3,.notice-facts h3{margin:0;font-size:12px}
.fact-panels ul,.notice-facts ul{margin:14px 0 0;padding-left:20px;color:#4d586a;font-size:12px;line-height:1.8}
.fact-panels li+li,.notice-facts li+li{margin-top:6px}
.chat-section,.task-section{margin-top:49px}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:17px}
.section-heading h3{margin:0;font-size:19px;letter-spacing:-.025em}
.section-heading span{color:#8794a6;font-size:11px;text-align:right}
.chat-window{padding:20px 22px;background:#f3f6fb;border-top:1px solid #dde4ee}
.chat-speaker{color:#8390a4;font-size:11px;font-weight:750}
.chat-bubble{display:inline-block;max-width:92%;margin-top:10px;padding:15px 17px;border:1px solid #dce3ed;background:#fff;font-size:15px;line-height:1.7;white-space:pre-wrap}
.option-list{display:grid;gap:9px}
.option-row{position:relative;min-height:59px;padding:12px 15px;border:1px solid var(--line);display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;cursor:pointer;font-size:13px;line-height:1.65}
.option-row:has(input:checked){border-color:var(--blue);background:var(--blue-pale)}
.option-row:focus-within{outline:3px solid #91abff;outline-offset:2px}
.option-row input{position:absolute;width:1px;height:1px;opacity:0}
.option-marker{height:25px;width:25px;display:grid;place-items:center;border:1px solid #cbd3df;color:#8d99aa;font:11px ui-monospace,SFMono-Regular,monospace}
.option-row:has(input:checked) .option-marker{border-color:var(--blue);background:var(--blue);color:#fff}
.draft-section{padding-top:28px;border-top:1px solid var(--line)}
.draft-label{display:block;margin:0 0 10px;font-size:12px;font-weight:750}
.exercise-main textarea{display:block;width:100%;min-height:176px;padding:17px 19px;border:1px solid #c7d0dc;border-radius:2px;outline:none;resize:vertical;font-size:14px;line-height:1.8}
.exercise-main textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-pale)}
.input-help{margin:11px 0 0;color:#7a879a;font-size:11px;line-height:1.7}
.form-error{min-height:0;margin:16px 0 0;color:var(--red);font-size:12px;line-height:1.6}
.exercise-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}
.exercise-actions>span{color:#8794a6;font-size:11px;line-height:1.6}
.exercise-actions button{white-space:nowrap}
.feedback-panel{margin-top:52px;padding:30px 0 0;border-top:1px solid var(--ink);scroll-margin-top:25px}
.feedback-panel h3{margin:12px 0 0;font-size:28px;letter-spacing:-.045em}
.feedback-top{display:flex;align-items:end;justify-content:space-between;gap:25px}
.score-total{white-space:nowrap}
.score-total strong{font-size:53px;letter-spacing:-.07em}
.score-total span{color:#8290a2;font-size:12px}
.score-scope{margin:16px 0 0;color:var(--muted);font-size:12px;line-height:1.75}
.rubric-results{margin-top:29px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.score-row{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}
.score-row:last-child{border-bottom:0}
.score-row strong{color:var(--blue)}
.feedback-notes,.draft-review{margin-top:35px}
.feedback-panel h4{margin:0 0 15px;font-size:14px}
.feedback-notes ol{padding:0 0 0 20px;margin:0;color:#4e5a6b;font-size:13px;line-height:1.8}
.feedback-notes li+li{margin-top:9px}
.draft-review ul{margin:0;padding:0 0 0 20px;color:#4e5a6b;font-size:13px;line-height:1.8}
.draft-review p,.risk-note{margin:13px 0 0;color:#6b778b;font-size:12px;line-height:1.7}
.draft-review p.alert,.risk-note.alert{color:var(--red);font-weight:750}
.sample-response{margin-top:30px;padding:20px 22px;background:var(--blue-pale);border-left:3px solid var(--blue)}
.sample-response span{color:var(--blue);font-size:11px;font-weight:800}
.sample-response p{margin:10px 0 0;font-size:13px;line-height:1.85;white-space:pre-wrap}
.feedback-panel>.outline-button{margin-top:28px}
.rubric-panel{padding:25px 20px}
.rubric-panel h3{font-size:18px}
.rubric-row{font-size:12px}
.rubric-note{font-size:11px}
.notice-intro{display:flex;justify-content:space-between;gap:35px;align-items:center;padding:62px 0 44px}
.notice-intro h2{max-width:770px;margin:16px 0 0;font-size:clamp(32px,4.1vw,50px);line-height:1.2;letter-spacing:-.05em}
.notice-intro p:not(.eyebrow){max-width:735px;margin:20px 0 0;color:var(--muted);font-size:14px;line-height:1.8}
.notice-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:62px}
.notice-layout .scenario-nav{padding-right:24px}
.notice-facts{margin-top:34px}
.notice-facts p{margin:15px 0 0;color:#8390a3;font-size:11px;line-height:1.6}
.recipient-line{display:flex;gap:16px;align-items:baseline;margin:40px 0 19px;padding-top:22px;border-top:1px solid var(--line)}
.recipient-line span{color:#8491a2;font-size:12px}
.recipient-line strong{font-size:14px}
#notice-draft{min-height:260px}
.notice-checks{margin-top:23px;border-top:1px solid var(--line)}
.notice-check{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}
.notice-check strong{font-size:12px;white-space:nowrap}
.notice-check strong.found{color:var(--green)}
.notice-check strong.missing{color:var(--amber)}
.notice-reminder{margin:20px 0 0;color:#68768a;font-size:12px;line-height:1.75}
@media(max-width:1360px){.training-layout{grid-template-columns:215px minmax(0,1fr);gap:40px}.training-layout>.rubric-panel{grid-column:2;order:3}.notice-layout{grid-template-columns:215px minmax(0,1fr);gap:40px}}
@media(max-width:760px){.training-layout,.notice-layout{display:block;padding-top:40px}.scenario-nav{border-right:0;padding-right:0;margin-bottom:44px}.scenario-list{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.scenario-list .group-label{grid-column:1/-1}.nav-note{display:none}.training-layout>.rubric-panel{margin-top:42px}.notice-intro{display:block;padding:48px 0 38px}.privacy-badge{margin-top:20px}.mode-tab{min-width:0}}
@media(max-width:520px){.page-intro h1{font-size:34px}.notice-intro h2{font-size:32px}.scenario-list{grid-template-columns:1fr}.fact-panels{grid-template-columns:1fr}.exercise-actions{align-items:start;flex-direction:column}.exercise-actions button{width:100%}.mode-tab{padding:16px 12px;font-size:12px}.mode-tab span{margin-right:8px}.section-heading{align-items:start;flex-direction:column;gap:5px}.section-heading span{text-align:left}}