:root { --sub-ink:#102131; --sub-blue:#149bd7; --sub-blue-dark:#087eaf; --sub-panel:#f7fbfd; --sub-line:#d8e2ea; --sub-purple:#7057d9; --sub-header:#071018; --sub-header-control:#122436; --sub-header-line:#263d51; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:#edf5f9; color:var(--sub-ink); font-family:Arial,Helvetica,sans-serif; }
.app { min-height:100vh; display:grid; grid-template-rows:auto 1fr; }
.topbar { min-height:72px; display:grid; grid-template-columns:minmax(190px,1fr) auto; align-items:center; gap:16px; padding:12px 18px; background:var(--sub-header); color:#fff; }
.brand { display:flex; align-items:center; gap:14px; min-width:0; }
.brand-logo { display:inline-flex; border-radius:6px; }
.brand-logo img { display:block; width:142px; height:auto; object-fit:contain; }
.brand h1 { margin:0; font-size:clamp(1.35rem,2vw,2.05rem); line-height:1.05; white-space:nowrap; }
.top-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.icon-button { width:48px; min-width:48px; min-height:48px; padding:0; border:2px solid var(--sub-header-line); border-radius:8px; color:#fff; background:var(--sub-header-control); display:inline-grid; place-items:center; font:inherit; font-weight:800; cursor:pointer; }
.home-button { min-height:48px; padding:0 14px; border:2px solid var(--sub-header-line); border-radius:8px; color:#fff; background:var(--sub-header-control); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:800; white-space:nowrap; }
.icon-button:hover,.icon-button:focus-visible,.home-button:hover,.home-button:focus-visible { border-color:#8fd8f3; background:var(--sub-blue); color:#06111a; outline:none; }
.icon { width:24px; height:24px; }
#subitisingTool { min-height:0; }
.sub-tool { min-height:calc(100vh - 72px); display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.sub-tool [hidden] { display:none!important; }
.sub-toolbar { position:relative; z-index:5; padding:10px 14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; background:#fff; border-bottom:1px solid var(--sub-line); box-shadow:0 3px 12px rgba(16,37,50,.08); }
.sub-toolbar details { position:relative; }
.sub-toolbar summary,.sub-toolbar>button,.sub-actions button,.sub-show-menu button,.sub-dialog-head button { min-height:48px; border:1px solid #93afbc; border-radius:11px; background:#fff; color:var(--sub-ink); padding:0 14px; font:inherit; font-weight:800; cursor:pointer; display:flex; align-items:center; }
.sub-toolbar summary { list-style:none; }
.sub-toolbar summary::-webkit-details-marker { display:none; }
.sub-toolbar summary::after { content:"▾"; margin-left:9px; color:#526c7a; }
.sub-toolbar details[open] summary,.sub-toolbar summary:focus-visible,.sub-toolbar>button:focus-visible,.sub-actions button:focus-visible { outline:3px solid rgba(112,87,217,.35); outline-offset:2px; border-color:var(--sub-purple); }
.sub-menu { position:absolute; top:calc(100% + 7px); left:0; width:min(330px,calc(100vw - 28px)); padding:14px; border:1px solid #8fb0bf; border-radius:14px; background:#fff; box-shadow:0 16px 36px rgba(16,37,50,.2); }
.sub-menu-wide { width:min(560px,calc(100vw - 28px)); max-height:min(68vh,620px); overflow:auto; }
.sub-menu-grid { width:min(430px,calc(100vw - 28px)); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.sub-menu>label,.sub-menu-grid>label { display:grid; gap:6px; font-size:.82rem; font-weight:800; }
.sub-menu input[type="number"] { width:100%; min-height:44px; border:1px solid #8da9b6; border-radius:9px; padding:7px 9px; background:#fff; color:var(--sub-ink); font:inherit; }
.sub-choice-set { min-width:0; margin:0; padding:0; border:0; }
.sub-choice-set>legend { margin:0 0 7px; padding:0; font-size:.82rem; font-weight:800; }
.sub-choice-span { grid-column:1/-1; }
.sub-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sub-choice { min-width:0; min-height:44px; display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid #b3c7d0; border-radius:9px; background:#fff; color:var(--sub-ink); font-size:.88rem; font-weight:750; cursor:pointer; }
.sub-choice:hover { border-color:var(--sub-blue); background:#f2f9fc; }
.sub-choice:has(input:checked) { border-color:var(--sub-blue-dark); background:#dff2f9; box-shadow:inset 0 0 0 1px var(--sub-blue-dark); }
.sub-choice:has(input:focus-visible) { outline:3px solid rgba(112,87,217,.35); outline-offset:2px; border-color:var(--sub-purple); }
.sub-choice:has(input:disabled) { opacity:.45; cursor:not-allowed; background:#f1f4f5; }
.sub-choice[hidden] { display:none!important; }
.sub-choice input { width:20px; height:20px; margin:0; flex:0 0 auto; accent-color:var(--sub-blue-dark); }
.sub-choice span { min-width:0; }
.sub-unit-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sub-visually-hidden { position:absolute; width:1px; height:1px; padding:0!important; margin:-1px!important; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sub-show-menu { display:grid; gap:8px; }
.sub-show-menu button { justify-content:center; }
.sub-toolbar .sub-secondary { background:#edf6fa; }
.sub-toolbar .sub-worksheet-button { color:#fff; background:var(--sub-blue); border-color:var(--sub-blue-dark); }
.sub-toolbar .sub-worksheet-button:hover { background:var(--sub-blue-dark); }
.sub-toolbar>button:disabled { opacity:.45; cursor:not-allowed; background:#eef2f4; color:#526c7a; }
.sub-stage { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:14px clamp(14px,2.5vw,36px) 8px; }
.sub-prompt { display:flex; align-items:baseline; justify-content:center; gap:18px; text-align:center; }
.sub-prompt p { margin:0 0 6px; }
.sub-prompt [data-sub="prompt"] { font-size:clamp(1.05rem,2vw,1.45rem); font-weight:850; }
.sub-model-host { width:min(100%,1040px); min-height:280px; height:100%; max-height:calc(100vh - 270px); margin:auto; display:grid; place-items:center; overflow:hidden; }
.sub-reveals { min-height:48px; display:flex; align-items:center; justify-content:center; gap:24px; text-align:center; }
.sub-reveals p { margin:0; padding:7px 13px; border-radius:10px; background:#fff; border:1px solid var(--sub-line); font-weight:850; }
.sub-total { font-size:1.2rem; }
.sub-total.is-required-whole { padding:10px 22px; border-width:2px; font-size:clamp(2rem,4vw,3.4rem); line-height:1; }
.sub-actions { min-height:66px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; padding:8px 14px 12px; background:#fff; border-top:1px solid var(--sub-line); }
.sub-actions .sub-primary { min-width:128px; justify-content:center; color:#fff; background:var(--sub-blue); border-color:var(--sub-blue-dark); font-size:1.06rem; }
.sub-actions button:disabled { opacity:.45; cursor:not-allowed; background:#eef2f4; color:#526c7a; }
.sub-instructions { width:min(720px,calc(100vw - 28px)); max-height:min(84vh,760px); border:0; border-radius:18px; padding:0; box-shadow:0 24px 80px rgba(8,35,50,.35); }
.sub-instructions::backdrop { background:rgba(6,30,43,.6); }
.sub-dialog-head { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:15px 18px; background:var(--sub-header); color:#fff; }
.sub-dialog-head h2 { margin:0; font-size:1.3rem; }
.sub-dialog-body { padding:8px 22px 24px; line-height:1.55; }
.sub-dialog-body h3 { margin:18px 0 5px; }
.sub-dialog-body p { margin:5px 0; }
.sub-print-brand { display:none; }

@media (min-width:900px) and (min-height:650px) {
  body { overflow:hidden; }
  .sub-tool { height:calc(100vh - 72px); min-height:0; }
}
@media (max-width:899px),(max-height:649px) {
  .topbar { align-items:flex-start; }
  .brand h1 { white-space:normal; }
  .sub-tool { min-height:auto; }
  .sub-model-host { height:55vh; min-height:330px; max-height:none; }
  .sub-prompt { flex-direction:column; align-items:center; gap:0; }
  .subitising-shared-model.is-compare { min-height:620px; }
  .subitising-shared-model.is-compare .subitising-shared-grid { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(2,minmax(260px,1fr)); }
  .sub-model-host:has(.subitising-shared-model.is-compare) { place-items:start stretch; overflow:auto; }
}
@media (max-width:860px) {
  .topbar { grid-template-columns:1fr; }
  .top-actions { justify-content:flex-start; flex-wrap:wrap; }
}
@media (max-width:640px) {
  .topbar { padding:8px 10px; }
  .brand-logo img { width:118px; }
  .brand h1 { font-size:1rem; }
  .top-actions { flex-wrap:wrap; justify-content:flex-start; }
  .home-button { display:none; }
  .sub-toolbar { align-items:stretch; }
  .sub-toolbar details,.sub-toolbar>button { flex:1 1 calc(50% - 8px); }
  .sub-toolbar summary,.sub-toolbar>button { width:100%; justify-content:center; }
  .sub-menu { position:fixed; left:14px; top:150px; }
  .sub-menu-grid { grid-template-columns:1fr; max-height:65vh; overflow:auto; }
  .sub-choice-grid,.sub-unit-grid { grid-template-columns:1fr; }
  .sub-model-host { min-height:290px; }
}

@media print {
  @page { size:A4 landscape; margin:10mm; }
  body { background:#fff!important; overflow:visible!important; }
  .top-actions,.sub-toolbar,.sub-actions,.sub-instructions { display:none!important; }
  .app,.sub-tool { display:block!important; min-height:0!important; height:auto!important; }
  .topbar { background:#fff!important; color:#102532!important; min-height:14mm; padding:0 0 4mm; border-bottom:1px solid #8da9b6; }
  .brand-logo img { content:url("../Assets/maths-modelled-wordmark.svg"); width:46mm; }
  .brand h1 { font-size:16pt; }
  .sub-stage { display:grid; grid-template-rows:auto 150mm auto; padding:6mm 0 0; break-inside:avoid; }
  .sub-model-host { width:100%; height:150mm; max-height:none; min-height:0; overflow:hidden; }
  .sub-prompt [data-sub="prompt"] { font-size:16pt; }
  .sub-reveals { min-height:12mm; }
  .sub-print-brand { display:flex; position:fixed; left:10mm; right:10mm; bottom:5mm; align-items:flex-end; justify-content:space-between; font-size:9pt; }
  .sub-print-brand img { width:42mm; }
}