/* Practice pages continue the approved 0.1.7 landing-page artwork and palette. */
html:has(.practice-shell),body:has(.practice-shell){background:#f4f8fc;color-scheme:light}
.shell.practice-shell{--ink:#142e53;--deep:#10284d;--muted:#536880;--line:#dce5ee;--accent:#187e55;--tint:#edf8ef;--accent-line:#c9e4d0;max-width:1000px;padding:24px 32px 40px;color:var(--ink)}
.practice-shell.R2{--accent:#196ca7;--tint:#edf6ff;--accent-line:#c8dff2}
.practice-shell.R3{--accent:#91600c;--tint:#fff7e7;--accent-line:#ebd9ad}
.practice-shell h1,.practice-shell h2,.practice-shell h3{font-family:ui-rounded,"Avenir Next","Segoe UI",Arial,sans-serif;font-weight:750;letter-spacing:-.035em;color:var(--deep)}
.practice-shell .masthead{margin-bottom:22px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.practice-shell .brandmark{filter:none}
.practice-shell .brand{color:#102b60}
.practice-shell .header-button,.practice-shell .teacher-entry{border-color:#c7d9ed;background:#fff;border-radius:22px;color:#27486f}
.practice-shell .back-link{margin:0 0 20px;color:#46617e;font-size:.88rem}
.practice-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:25px;border:1px solid var(--accent-line);border-radius:26px;padding:26px;background:linear-gradient(115deg,#fff 0%,var(--tint) 78%);margin-bottom:26px;overflow:hidden}
.practice-hero .intro{margin:0;padding:0}
.practice-shell .eyebrow{color:var(--accent);font-size:.72rem;letter-spacing:.13em;line-height:1.6;margin-bottom:13px}
.practice-hero .intro h1{font-size:clamp(2rem,3.4vw,2.75rem);line-height:1.09;max-width:620px;letter-spacing:-.045em}
.practice-hero .intro-sub{font-size:1.02rem;line-height:1.6;margin:15px 0 0;max-width:440px;color:var(--muted)}
.practice-scene{margin:0;min-width:0;overflow:hidden;border-radius:17px;border:1px solid var(--accent-line);background:#fff}
.practice-scene img{display:block;width:100%;height:auto;aspect-ratio:840/473;object-fit:cover}
.practice-scene figcaption{padding:10px 13px;font-size:.76rem;line-height:1.45;color:var(--muted)}
.practice-shell .scenario,.practice-shell .perspective-prompt,.practice-shell .input-panel{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 5px 20px #1b365307;margin:0 0 22px;padding:26px 30px}
.practice-section-heading,.practice-shell .input-panel .panel-top{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.practice-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:var(--tint);border:1px solid var(--accent-line);font-size:.82rem;font-weight:750;color:var(--accent)}
.practice-section-heading h2,.practice-shell .input-panel .panel-top h2{font-size:1.26rem;line-height:1.3;margin:0;letter-spacing:-.025em}
.practice-shell .scenario-title{font-size:1.02rem;line-height:1.5;margin-bottom:8px}
.practice-shell .scenario>p{font-size:1rem;line-height:1.78;color:#374f6c;max-width:78ch}
.practice-shell .ja-toggle{border-color:#ccdbea;background:#f7faff;color:#2c5277;border-radius:10px;padding:8px 12px;min-height:40px;font-size:.8rem}
.practice-shell .ja-wrap{margin-top:12px}
.practice-shell .perspective-grid{gap:16px;margin:0 0 18px}
.practice-shell .perspective-grid>div{background:#f5f8fc;border:1px solid #e3eaf2;border-radius:15px;padding:18px 20px}
.practice-shell .perspective-grid>div+div{background:var(--tint);border-color:var(--accent-line)}
.practice-shell .perspective-grid h3{font-size:1rem;margin:0 0 9px;line-height:1.4}
.practice-shell .perspective-grid p{font-size:.94rem;color:#3e5570;line-height:1.65}
.practice-shell .perspective-question{font-size:.98rem;line-height:1.65;font-weight:550;color:var(--deep);padding:0 2px}
.practice-shell .input-panel{border-color:var(--accent-line);border-top:3px solid var(--accent);margin-top:0}
.practice-shell .input-hint{color:var(--muted);font-size:.94rem;line-height:1.6}
.practice-shell textarea{margin-top:18px;background:#fcfdff;border:1px solid #c6d6e6;border-radius:14px;padding:18px;line-height:1.65;min-height:180px;color:var(--ink)}
.practice-shell textarea:focus{outline:3px solid var(--accent-line);outline-offset:2px;border-color:var(--accent);box-shadow:none}
.practice-shell .input-meta{color:var(--muted);font-size:.77rem;gap:12px;margin:9px 0 20px}
.practice-shell .input-panel .button{background:var(--accent);border:1px solid var(--accent);border-radius:13px;box-shadow:none;min-height:53px;font-size:1rem;color:white}
.practice-shell .input-panel .button:hover:not(:disabled){filter:brightness(.93)}
.practice-shell .input-panel .button:disabled{cursor:not-allowed;opacity:1;background:#e9eef3;border-color:#e0e6ee;color:#586b7f}
.practice-shell .save-note{font-size:.79rem;color:var(--muted);line-height:1.7;margin:22px auto 0}
.practice-shell .save-note .text-button{font-size:inherit;color:#315c88}
.practice-shell .footer{color:#66809a;font-size:.76rem;margin-top:30px}
.practice-shell details.scenario>section.scenario{padding:20px 0 0;border:0;margin:0;box-shadow:none}
.practice-shell details.scenario .practice-number{display:none}
.practice-shell button:focus-visible,.practice-shell summary:focus-visible{outline:3px solid #276eb0;outline-offset:4px}
@media(max-width:650px){
 .shell.practice-shell{padding:17px 18px 30px}
 .practice-shell .masthead{margin-bottom:17px;padding-bottom:14px}
 .practice-shell .back-link{margin-bottom:17px}
 .practice-hero{grid-template-columns:1fr;gap:20px;padding:23px 20px;border-radius:21px;margin-bottom:19px}
 .practice-hero .intro h1{font-size:1.95rem;overflow-wrap:anywhere}
 .practice-shell .eyebrow{font-size:.62rem;letter-spacing:.09em;margin-bottom:10px}
 .practice-hero .intro-sub{font-size:.88rem;line-height:1.55;margin-top:11px}
 .practice-shell .scenario,.practice-shell .perspective-prompt,.practice-shell .input-panel{padding:21px 20px;border-radius:19px;margin-bottom:18px}
 .practice-section-heading h2,.practice-shell .input-panel .panel-top h2{font-size:1.13rem}
 .practice-shell .scenario>p{font-size:.96rem;line-height:1.75}
 .practice-shell .perspective-grid{grid-template-columns:1fr;gap:12px}
 .practice-shell .perspective-grid>div{padding:16px}
 .practice-shell .input-meta{font-size:.71rem;flex-wrap:wrap}
}
@media(max-width:430px){
 .practice-hero{padding:20px}
 .practice-hero .intro h1{font-size:2rem;overflow-wrap:normal}
 .practice-hero .intro-sub{font-size:.93rem}
 .practice-shell .masthead .brand small{display:none}
}
@media print{
 html:has(.practice-shell),body:has(.practice-shell){background:#fff!important}
 .practice-shell .practice-hero,.practice-shell .scenario,.practice-shell .perspective-prompt,.practice-shell .input-panel{break-inside:avoid;box-shadow:none;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}