/* Shared subject identity and touch layout. Scientific diagram colours are independent. */
:root{--bio:#198754;--chem:#b32624;--phys:#1768ac}
:root{--main-trim:#ffd84d}
html:not([data-subject]) .top .brand span,html:not([data-subject]) .topbar .brand span{color:var(--main-trim)}
html:not([data-subject]) .top,html:not([data-subject]) .topbar,html:not([data-subject]) body>header{border-bottom-color:var(--main-trim)}
html[data-main-page][data-subject] .topbar{border-bottom-color:var(--main-trim)}
html[data-subject="biology"]{--subject-colour:#198754;--subject-tint:#edf7f1;--subject-light:#9cdeba}
html[data-subject="chemistry"]{--subject-colour:#b32624;--subject-tint:#fff0ed;--subject-light:#ffb4ab}
html[data-subject="physics"]{--subject-colour:#1768ac;--subject-tint:#edf4fa;--subject-light:#a8d3ff}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
button,summary,a.btn,a.primary,.back,.mobile-back{min-height:44px;touch-action:manipulation}
button,a,input,select,textarea,summary:focus-visible{outline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #1475a4;outline-offset:3px}
img,video{max-width:100%}
video{height:auto}
.wrap,.shell,.paper,.card,.note-copy,.visual-frame,.question-side,.heading .title{min-width:0}
.note-content,.game-layout,.question-head,.lesson-row,.controls,.heading,.answer-row{min-width:0}
.question-head h2,.lesson-row strong,.lesson-row small,.option,.choice,.btn,.primary{overflow-wrap:anywhere}
html[data-subject] .top,html[data-subject] .topbar,html[data-subject] body>header{border-bottom-color:var(--subject-colour)}
html[data-subject] .top .brand span,html[data-subject] .topbar .brand span{color:var(--subject-light)}
html[data-subject] .eyebrow,html[data-subject] .step-label,html[data-subject] .stage-kicker,html[data-subject] .frame-number,html[data-subject] .heading h1 span{color:var(--subject-colour)}
html[data-subject] .tab[aria-selected="true"]{border-color:var(--subject-colour);color:var(--subject-colour)}
html[data-subject] .primary:not(:disabled){background:var(--subject-colour);border-color:var(--subject-colour);color:white}
html[data-subject] .primary:hover:not(:disabled){filter:brightness(.92)}
html[data-subject] .num,html[data-subject] .lesson-no{background:var(--subject-tint);color:var(--subject-colour)}
html[data-subject] .note-copy b,html[data-subject] .note b{color:var(--subject-colour)}
html[data-subject] input[type="range"]{accent-color:var(--subject-colour);min-height:44px}
html[data-subject] .option:hover:not(:disabled):not(.correct):not(.wrong){border-color:var(--subject-colour)}
html[data-subject] .difficulty{background:var(--subject-tint);color:var(--subject-colour)}
html[data-subject] .resource-tab.active{border-color:var(--subject-colour);color:var(--subject-colour)}
.top .wrap,.top-inner{flex-wrap:wrap;row-gap:4px}
.back{display:inline-flex;align-items:center;line-height:1.3}
.controls,.animation-controls,.energy-controls,.quant-controls,.actions,.support{flex-wrap:wrap}
.controls .btn,.animation-controls .btn{max-width:100%}
.choice,.option{min-width:0}
.table-wrap,.exam-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.exam-table th,.exam-table td{overflow-wrap:anywhere}
.gap-text input{max-width:calc(100% - 8px)}
.subject-panel .paper1-mock-highlight{background:#f6f9fc;border-color:#cbd8e3;border-left:3px solid var(--subject)}
.subject-panel .paper1-mock-highlight>strong{color:var(--subject)}
.module-lessons .lesson-row{background:white!important}
dialog{max-height:90vh;max-height:90dvh;max-width:calc(100% - 24px);overflow:auto;overscroll-behavior:contain}
dialog img,dialog svg{max-width:100%}
/* Old viewport engines retain a useful diagram height rather than dropping the rule. */
@supports not (height:100dvh){
 body.game-mode #sample{height:150px!important}
 body.practising .question-image{height:120px!important}
 .visual img{height:210px!important}
 #diagram-dialog,.dialog{max-height:90vh!important}
 #large-diagram img,#large-diagram svg,.dialog img{max-height:70vh!important}
}
@media(max-width:760px){
 input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
 .back{font-size:14px}
 .top .wrap{column-gap:14px}
 .top .brand{white-space:nowrap}
 .option,.choice{overflow-wrap:anywhere}
 body.game-mode .choice-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.game-mode .choice-list>.choice:last-child:nth-child(odd){grid-column:1/-1}
 .controls .btn{flex:1 1 auto}
 .game-return,.next-lesson .btn,.next .btn{max-width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
@media print{html[data-subject] .top,html[data-subject] .topbar{display:none}}