/* Navigation round (V1.2 usability): Test home choices, Topic Practice quick start, compact to-do list.
   Shared by the GCSE shell, its embedded exam room (index.html) and private courses. */
:root{--nm-green:#225f4b;--nm-green-soft:#e9f3e8;--nm-ink:#193d38;--nm-muted:#5b6f66;--nm-line:#d6e2da}

/* ---------- Test home: one plain list of papers, each with Whole paper · Final Five ---------- */
.test-home-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 0 16px}
.test-home-head h2{margin:6px 0 8px;font-size:clamp(24px,3vw,30px);letter-spacing:-.5px;color:var(--nm-ink)}
.test-home-head p{margin:0;max-width:640px;color:var(--nm-muted);line-height:1.55}
.test-home-head p strong{color:var(--nm-ink)}
.test-home-head .test-target{position:static;flex:none;display:grid;justify-items:end;gap:2px;margin:0;padding:10px 14px;border:1px solid var(--nm-line);border-radius:14px;background:#fff;transform:none}
.test-home-head .test-target span{font-size:10px;letter-spacing:.14em;color:var(--nm-muted)}
.test-home-head .test-target strong{font-size:18px;color:var(--nm-ink)}
.test-choices{display:grid;gap:12px;margin:0 0 18px}
.test-choices.test-stage{padding:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;min-height:0}
.test-choice{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--nm-line);border-radius:18px;background:#fff;box-shadow:0 6px 18px #193d3808}
.test-choice-art{display:grid;place-items:center;width:76px;height:56px;border-radius:12px;background:#f4f7f1;color:var(--nm-green)}
.test-choice-art svg{width:64px;height:auto;max-height:44px}
.test-choice-text{min-width:0}
.test-choice-text h3,.test-choice-text strong{display:block;margin:0;font-size:18px;color:var(--nm-ink)}
.test-choice-text p,.test-choice-text small{display:block;margin:4px 0 0;font-size:13px;color:var(--nm-muted);line-height:1.45}
.test-choice-status{color:var(--nm-green);font-weight:650}
.test-choice-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.test-choice-actions button{min-height:44px;white-space:nowrap}
.test-choice-more{min-height:44px;padding:8px 6px;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--nm-green)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.test-home-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
/* private: the title area is the "More options" button */
#course-app button.test-choice-text{display:block;width:100%;min-height:0;margin:0;padding:4px 0;border:0;background:transparent;box-shadow:none;text-align:left;color:inherit;cursor:pointer}
#course-app button.test-choice-text .action-label{display:block}
#course-app button.test-choice-text .test-choice-more{display:inline-block;min-height:0;margin-top:6px;padding:0;font-size:13px}
#course-app button.test-choice-text:hover strong{text-decoration:underline}
#course-app .test-choices{margin:18px 0}
#course-app .test-choice-actions .primary,#course-app .test-choice-actions button{width:auto;margin:0}
.test-home-intro{color:var(--nm-muted)}
@media (max-width:760px){
 .test-home-head{flex-direction:column;gap:10px}
 .test-home-head .test-target{display:inline-flex;align-items:baseline;gap:8px;justify-items:start;padding:6px 12px}
 .test-home-head .test-target strong,.test-home-head .test-target b{font-size:15px!important;line-height:1.2}
 .test-choice{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px}
 .test-choice-art{display:none}
 .test-choice-actions{justify-content:stretch;display:grid;grid-template-columns:1fr 1fr}
 .test-choice-actions .test-choice-more{grid-column:1/-1;justify-self:start}
}

/* ---------- Topic Practice: tick topics, then start from the same panel ---------- */
.practice-quick-start{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,2.4fr) auto;align-items:end;gap:14px 18px;width:100%;margin:0}
.practice-quick-summary strong{display:block;font-size:15px;color:var(--nm-ink)}
.practice-quick-summary small{display:block;margin-top:3px;color:var(--nm-muted);font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.practice-quick-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;align-items:end}
.practice-quick-fields label{display:grid;gap:4px;margin:0;font-size:12px;font-weight:650;color:var(--nm-muted)}
.practice-quick-fields select{width:100%;min-height:42px;padding:8px 10px;border:1px solid #bfd2c1;border-radius:10px;background:#fff;color:var(--nm-ink);font:inherit;font-size:14px}
.practice-quick-fields .setting-note,.practice-quick-fields .practice-grade-help{display:none}
.practice-quick-delivery{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0;min-width:0}
.practice-quick-delivery legend{width:100%;margin:0 0 4px;padding:0;font-size:12px;font-weight:650;color:var(--nm-muted)}
.practice-quick-delivery label{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 12px;border:1px solid #bfd2c1;border-radius:10px;background:#fff;font-size:14px;font-weight:600;color:var(--nm-ink);cursor:pointer}
.practice-quick-delivery input{margin:0;accent-color:var(--nm-green)}
.practice-quick-start>button[type=submit]{min-height:46px;white-space:nowrap}
.practice-quick-start>button[type=submit]:disabled{opacity:.5;cursor:not-allowed}
.practice-quick-bar .practice-ready-content{display:block}
.practice-quick-toggle{display:none}
/* Phones and tablets: one compact row (what is ticked + Start); the defaults can be changed on request */
@media (max-width:900px){
 .practice-quick-start{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px}
 .practice-quick-summary small{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
 .practice-quick-toggle{display:inline-flex;align-items:center;min-height:32px;margin-top:2px;padding:0;border:0;background:none;color:var(--nm-green);font:inherit;font-size:13px;font-weight:650;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
 .practice-quick-fields{display:none;grid-column:1/-1;grid-template-columns:1fr 1fr;order:3}
 .practice-quick-start.settings-open .practice-quick-fields{display:grid}
 .practice-quick-delivery{grid-column:1/-1}
 .practice-quick-start>button[type=submit]{width:auto;min-height:46px;padding:10px 16px}
 .practice-quick-bar{padding-bottom:10px}
}
@media (max-width:420px){.practice-quick-fields{grid-template-columns:1fr}}

/* ---------- To-do list: empty groups collapse to one line; an empty list is one line ---------- */
.dashboard-tasks .task-group.is-empty .task-empty{padding:8px 0;border:0;background:none}
.dashboard-tasks.all-empty .task-columns{display:flex;flex-wrap:wrap;gap:6px 22px}
.dashboard-tasks.all-empty .task-group{display:flex;align-items:baseline;gap:8px}
.dashboard-tasks.all-empty .task-group>h3{margin:0;font-size:14px}
.dashboard-tasks.all-empty .task-group .task-empty{padding:0;font-size:13px}
.dashboard-tasks.all-empty .task-group .task-empty::before{content:'· '}
.dashboard-tasks.all-empty .task-heading p{display:none}
@media (max-width:760px){
 .dashboard-tasks .task-group.is-empty{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
 .dashboard-tasks .task-group.is-empty>h3{margin:0}
 .dashboard-tasks .task-group.is-empty .task-empty{padding:0}
 .dashboard-tasks.all-empty .task-columns{display:grid;gap:4px}
}

/* ---------- Phone and tablet: the Menu button sits in the top bar, never over the page ---------- */
@media (max-width:1000px){
 body:has(#nav:not([hidden]))>header{padding-left:76px}
 #nav{position:fixed;inset:14px auto auto 16px!important;z-index:40}
 #nav .nav-toggle{min-height:44px;padding:8px 12px;gap:6px;border-radius:10px;box-shadow:none}
 #nav.is-open .nav-items{padding-top:72px}
 body:has(#nav:not([hidden])) main#app{padding-bottom:40px}
}
@media (max-width:760px){
 body:has(#nav:not([hidden]))>header{padding-left:68px}
 #nav{inset:12px auto auto 12px!important}
}
/* Phones: one tidy top-bar row — Menu, logo, help links, account */
@media (max-width:650px){
 body:has(#nav:not([hidden]))>header{flex-wrap:nowrap!important;min-height:68px!important;gap:8px!important}
 body:has(#nav:not([hidden]))>header .brand-wordmark{display:none}
 body:has(#nav:not([hidden]))>header .header-support{gap:12px!important;margin:0 4px 0 auto!important}
 body:has(#nav:not([hidden]))>header .header-support a{font-size:12px}
 body:has(#nav:not([hidden]))>header #journey-account{margin-left:0;white-space:nowrap}
}
@media (max-width:600px){#nav .nav-toggle{min-height:44px;width:44px;padding:0;font-size:18px}#nav .nav-toggle .nav-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* private courses: the ☰ button is already part of the heading; keep it first in the top bar */
#heading #mobile-menu{flex:none}

/* ---------- Plain links (one primary action per page) ---------- */
.link-action,button.plain.link-action{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 0;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--nm-green)!important;font:inherit;font-weight:650;text-decoration:underline;text-underline-offset:3px;cursor:pointer;width:auto}
.link-action:hover{text-decoration-thickness:2px}
.learn-start-link{font-weight:700!important}

.dash-layout,.dash-main,.dash-side,.dash-more{display:contents}
/* ---------- Wide screens (1440px+): use the width, keep lines readable ---------- */
@media (min-width:1440px){
 body:has(#nav:not([hidden])) main#app[data-page="Dashboard"],body:has(#nav:not([hidden])) main#app[data-page="Learn"]{max-width:1400px;width:calc(100% - 224px);margin-left:max(224px,calc(224px + (100vw - 1624px)/2))}
 body:has(#nav.is-collapsed:not([hidden])) main#app[data-page="Dashboard"],body:has(#nav.is-collapsed:not([hidden])) main#app[data-page="Learn"]{width:calc(100% - 96px);margin-left:max(96px,calc(96px + (100vw - 1496px)/2))}
 body.ready #course-app[data-layout="dashboard"],body.ready #course-app[data-layout="journey"]{max-width:1400px;margin-left:max(var(--rail),calc(var(--rail) + (100vw - var(--rail) - 1400px)/2))}
 /* Dashboard: today's plan and links on the left, the to-do list alongside on the right */
 .dash-layout{display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(380px,1fr);grid-template-areas:"main side" "more side";grid-template-rows:auto 1fr;column-gap:24px;align-items:start}
 .dash-layout>.dash-main{display:block;grid-area:main;min-width:0}.dash-layout>.dash-side{display:block;grid-area:side;min-width:0}.dash-layout>.dash-more{display:block;grid-area:more;min-width:0}
 .dash-side .dashboard-tasks{margin-top:0}.dash-side .dashboard-tasks .task-columns{grid-template-columns:1fr;gap:12px}
 .dash-side .dashboard-tasks.all-empty .task-columns{display:grid}
 /* My Journey: what is next stays in view on the left; the route fills the rest */
 :is(main#app,#course-app) .learn-v2{max-width:none;grid-template-columns:minmax(300px,370px) minmax(0,1fr);align-items:start;column-gap:28px}
 :is(main#app,#course-app) .learn-v2>.learn-next{position:sticky;top:96px;grid-template-columns:1fr}
 :is(main#app,#course-app) .learn-v2>.learn-next .learn-next-actions{justify-content:flex-start;align-items:flex-start;flex-direction:column}
}

/* ---------- Papers and Final Five answering: the Topic Test design (one calm column, clear header, roomy card) ---------- */
.exam-room{max-width:760px;margin:0 auto;color:var(--nm-ink)}
.exam-room .exam-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--nm-line)}
.exam-room .exam-toolbar>span{min-width:0;font-size:16px;font-weight:700;line-height:1.35;color:var(--nm-ink);overflow-wrap:anywhere}
.exam-room .exam-exit-options{display:flex;gap:8px}
.exam-room .exam-exit-options .ws-button{min-height:44px;padding:8px 14px;border-radius:12px;white-space:nowrap}
.exam-room .exam-toolbar time{padding:6px 12px;border-radius:12px;background:var(--nm-green-soft);color:var(--nm-green);font-size:22px;line-height:1.2}
.exam-room .exam-progress{height:6px;margin:0 0 18px;border-radius:9px;background:#e3ece2;overflow:hidden}
.exam-room .exam-progress>span{background:var(--nm-green);border-radius:9px}
.exam-room .exam-question{padding:clamp(20px,4vw,34px);border:1px solid var(--nm-line);border-radius:18px;background:#fff;box-shadow:0 8px 24px #193d3808}
.exam-room .exam-question-meta{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--nm-muted)}
.exam-room .exam-question h2{margin:14px 0 18px;font-size:22px;letter-spacing:-.3px;color:var(--nm-ink)}
.exam-room .exam-question h2 small{font-size:14px;color:var(--nm-muted)}
.exam-room .exam-stem,.exam-room .exam-part label{font-size:18px;line-height:1.65;color:var(--nm-ink)}
.exam-room .exam-part{margin:22px 0}
.exam-room .exam-hint{font-size:13px;color:var(--nm-muted)}
.exam-room .exam-input-row input{min-height:48px;padding:12px 14px;border:1.5px solid #b9cdbf;border-radius:12px;font-size:18px;color:var(--nm-ink)}
.exam-room .exam-input-row input:focus{outline:3px solid #cfe3d1;border-color:var(--nm-green)}
.exam-room .exam-choice{border-radius:12px}
.exam-room .exam-save-status,.exam-room [data-cloud-status]{font-size:13px;color:var(--nm-muted)}
.exam-room .exam-controls{margin-top:14px;padding:14px 0;background:#f5f7f3ee;border-top:1px solid var(--nm-line)}
.exam-room .exam-controls .ws-button{min-height:46px;border-radius:12px}
.exam-room .primary,.exam-room .ws-button.primary{background:var(--nm-green)!important;border-color:var(--nm-green)!important;color:#fff!important}
.exam-room .exam-grid .answered{background:var(--nm-green);border-color:var(--nm-green)}
@media (max-width:600px){.exam-room .exam-toolbar{grid-template-columns:auto 1fr;gap:10px}.exam-room .exam-toolbar>span{order:3;grid-column:1/-1;font-size:15px}.exam-room .exam-toolbar time{justify-self:end;font-size:20px}.exam-room .exam-stem,.exam-room .exam-part label{font-size:17px}}

/* ---------- Topic Practice and custom papers: answering in the same design ---------- */
.practice-workspace .practice-answer-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 16px;max-width:760px;margin:0 auto 18px;padding:0 0 16px;border-bottom:1px solid var(--nm-line)}
.practice-workspace .practice-answer-head .eyebrow{display:block;font-size:11px;letter-spacing:.12em;color:var(--nm-muted)}
.practice-workspace .practice-answer-head h2{margin:4px 0 0;font-size:22px;color:var(--nm-ink)}
.practice-workspace .practice-answer-head [data-answer-progress]{margin:0;padding:6px 12px;border-radius:12px;background:var(--nm-green-soft);color:var(--nm-green);font-weight:700;font-size:14px;white-space:nowrap}
.practice-workspace .practice-answer-head .practice-answer-note{grid-column:1/-1;margin:0;font-size:13px;color:var(--nm-muted)}
.practice-workspace #practice-system-answers{max-width:760px;margin:0 auto}
.practice-workspace #practice-system-answers .practice-question{margin:0 0 14px;padding:clamp(20px,4vw,30px);border:1px solid var(--nm-line);border-radius:18px;background:#fff;box-shadow:0 8px 24px #193d3808}
.practice-workspace #practice-system-answers .practice-question>.eyebrow{display:block;margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--nm-muted)}
.practice-workspace #practice-system-answers .practice-question p{font-size:18px;line-height:1.65;color:var(--nm-ink)}
.practice-workspace #practice-system-answers label{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-weight:650;color:var(--nm-ink)}
.practice-workspace #practice-system-answers label input{flex:1 1 220px;min-height:48px;padding:12px 14px;border:1.5px solid #b9cdbf;border-radius:12px;font-size:18px;color:var(--nm-ink);background:#fff}
.practice-workspace #practice-system-answers label input:focus{outline:3px solid #cfe3d1;border-color:var(--nm-green)}
.practice-workspace #practice-system-answers label .secondary{flex:none;min-height:44px;border-radius:12px}
.practice-workspace #practice-system-answers>button[type=submit]{position:sticky;bottom:12px;display:block;margin:18px 0 0 auto;min-height:50px;padding:12px 22px;border-radius:12px;box-shadow:0 8px 20px #193d3820}
.practice-workspace .practice-exit-actions{max-width:760px;margin-left:auto;margin-right:auto}
@media (max-width:600px){.practice-workspace .practice-answer-head{grid-template-columns:1fr}.practice-workspace .practice-answer-head [data-answer-progress]{justify-self:start}}

/* ---------- The same leave dialog inside embedded study screens (index.html save-progress modal) ---------- */
html .save-progress-modal:not(.hidden){background:#193d3833!important;backdrop-filter:blur(3px)}
html .save-progress-modal .save-progress-card{width:min(520px,calc(100vw - 32px))!important;max-width:520px!important;padding:28px!important;border:0!important;border-radius:22px!important;background:#fff!important;box-shadow:0 24px 60px #193d3829!important;text-align:left!important;color:var(--nm-ink)!important}
html .save-progress-modal #save-progress-heading{margin:0!important;font-size:24px!important;line-height:1.25!important;letter-spacing:-.4px!important;color:var(--nm-ink)!important;text-align:left!important}
html .save-progress-modal #save-progress-description{margin:12px 0 20px!important;color:var(--nm-muted)!important;text-align:left!important;font-size:15px!important}
html .save-progress-modal .save-progress-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:10px!important}
html .save-progress-modal .save-progress-actions button{flex:0 0 auto!important;width:auto!important;min-height:46px!important;padding:10px 18px!important;border-radius:12px!important;border:1px solid var(--nm-line)!important;background:#fff!important;color:var(--nm-ink)!important;font-weight:650!important;box-shadow:none!important;transform:none!important}
html .save-progress-modal #save-practice-button{background:var(--nm-green)!important;border-color:var(--nm-green)!important;color:#fff!important}
html .save-progress-modal #quit-practice-button{color:#8b3a2e!important}
@media (max-width:520px){html .save-progress-modal .save-progress-actions{display:grid!important}html .save-progress-modal .save-progress-actions button{width:100%!important}}

/* Phones: the estimated-level card sits under the welcome line instead of squeezing it */
@media (max-width:600px){main#app>.top:has(>.grade){flex-direction:column;align-items:stretch;gap:14px}main#app>.top>.grade{width:auto;max-width:none}}

/* The page column moves with the sidebar without animating its width, so it never pokes past the screen edge mid-transition. */
body:has(#nav) main#app{transition:none}