/* Quiet clinical theme for every signed-in page (Claude, 17 October 2026).
   Matches the public homepage: warm ivory page, warm-white cards, navy Georgia headings, emerald actions, gold focus.
   Loaded last so it re-points shared tokens; activity accents (practise blue, learn amber, AI violet,
   progress rose) are unchanged because the homepage uses them too. */
:root{
 --qc-ivory:var(--zys-ivory,#faf7f0);--qc-ivory-deep:var(--zys-ivory-deep,#f3ede1);--qc-card:var(--zys-card,#fffdf8);--qc-navy:var(--zys-navy,#102d50);--qc-ink:var(--zys-ink,#1f3540);--qc-muted:var(--zys-muted,#5b6b66);
 --qc-line:var(--zys-line,#e7e1d4);--qc-line-strong:var(--zys-line-strong,#d5ccb9);--qc-emerald:var(--zys-emerald,#102d50);--qc-emerald-deep:var(--zys-emerald-deep,#0b2140);--qc-teal-ink:var(--zys-teal-ink,#35527d);--qc-gold:var(--zys-gold,#af8541);
 --bg:var(--qc-ivory);--surface:var(--qc-card);--paper:var(--qc-card);--surface-2:#f6f1e7;--panel-strong:#ede6d8;
 --ink:var(--qc-ink);--muted:var(--qc-muted);--line:var(--qc-line);--line-strong:var(--qc-line-strong);
 --teal:var(--qc-emerald);--teal-strong:var(--qc-emerald-deep);--accent:#e7f1ea;--tint:#f5f0e6;--tint-strong:#ebe3d3;
 --focus:var(--qc-gold);--warm:#f8f1e2;
 --shadow:0 18px 40px -24px #3a2f1a33;--shadow-soft:0 6px 18px -12px #3a2f1a2e;
}
html,body{background:var(--qc-ivory)}
body{background:radial-gradient(1100px 520px at 88% -10%,#f1ebdd,transparent 60%),var(--qc-ivory)!important;color:var(--qc-ink)}
/* Header: warm white like the homepage's solid header. */
#app-shell .top,.top,.account-page .account-header,body>header{background:color-mix(in srgb,var(--qc-card) 92%,transparent)!important;border-bottom-color:var(--qc-line)!important}
/* Sidebar: soft ivory instead of mint. */
.sidebar,#app-shell .sidebar{background:var(--qc-ivory-deep)!important;border-color:var(--qc-line)!important}
/* Page titles: navy serif, as in the homepage hero. */
#main .intro h1,#main>h1,.dash-head h1,.account-page .account-heading h1,main .hero h1,.privacy h1,main>h1{color:var(--qc-navy)!important;font-family:var(--zys-font)!important;font-weight:500!important;letter-spacing:-.045em!important}
/* Section and card headings: navy serif at card size. */
.dash-tile h2,.account-page .account-card h2,#main .card>h2,#main .intro h2,.zys-help-head h2,main section>h2{color:var(--qc-navy)!important;font-family:var(--zys-font)!important;font-weight:600!important;letter-spacing:-.025em!important}
/* Eyebrows: the homepage's deep green, small caps. */
.eyebrow,.dash-eyebrow,.account-page .account-heading .eyebrow{color:var(--qc-teal-ink)!important}
/* Cards and tiles: warm white with a warm hairline. */
.card,.dash-tile,.account-page .account-card,.zys-help-panel,#account-popover,.dash-exams{background-color:var(--qc-card)!important;border-color:var(--qc-line)!important}
.dash-example{background:repeating-linear-gradient(135deg,var(--qc-card) 0 14px,#f7f2e8 14px 28px)!important;border-color:var(--qc-line-strong)!important}
.zys-dash{--dash-ink:var(--qc-ink);--dash-muted:var(--qc-muted);--dash-line:var(--qc-line);--dash-grey:#f1ece2}
.dash-upsell{border-color:var(--qc-line-strong)!important}
/* Primary actions: emerald, as the homepage's Get started. Secondary: emerald outline on warm white. */
.btn.primary,.dash-tile .btn.primary,.account-page .btn.primary,.zys-help-send,.zys-help-button,.dash-exams button[aria-pressed="true"]{background:var(--qc-emerald)!important;border-color:var(--qc-emerald)!important;color:#fff!important}
.btn.primary:hover,.zys-help-button:hover{background:var(--qc-emerald-deep)!important}
.btn:not(.primary):not(.text){background:var(--qc-card);border-color:var(--qc-line-strong);color:var(--qc-emerald)}
/* Account menu trigger and plan badges pick up the warm surfaces. */
#account-trigger,.account-page .account-menu>summary{background:var(--qc-card)!important;border-color:var(--qc-line-strong)!important}
.account-initials,.account-page .account-badge:not(.waiting){background:var(--qc-emerald)!important;color:#fff!important}
/* Footer bar. */
.footer,.zys-footer-bar,.account-page .account-footer{background:transparent!important;border-top:1px solid var(--qc-line)!important;color:var(--qc-muted)}
/* Gold focus ring, as on the homepage. */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--qc-gold)!important;outline-offset:3px}
/* Plans, demo and privacy pages: headings and links in the homepage colours. */
main h2,.access-card h3,main .sample h2{color:var(--qc-navy);font-family:var(--zys-font);font-weight:600;letter-spacing:-.025em}
#main h2{font-family:inherit}
#main .card>h2,#main .intro h2{font-family:var(--zys-font)}
main p a,main li a{color:var(--qc-emerald)}
.access-card{background:var(--qc-card)!important;border-color:var(--qc-line)!important}
main>a:first-child{color:var(--qc-emerald)}

/* Simpler design, phase 1 (Claude, 22 October 2026, owner-approved).
   Focus mode: while a question is on screen, menus, notices and side links step back.
   The site header stays (owner, 3 November 2026), with the question bar directly beneath it. */
#app-shell[data-focus="question"] .sidebar,
#app-shell[data-focus="question"] .footer,
#app-shell[data-focus="question"] .beta-notice,
#app-shell[data-focus="question"] .draft-notice,
#app-shell[data-focus="question"] .more-ways,
#app-shell[data-focus="question"] .panel-actions,
#app-shell[data-focus="question"] .qf-entry,
#app-shell[data-focus="question"] #main>.intro,
#app-shell[data-focus="question"] .written-guides{display:none!important}
/* A save problem always stays visible, with its Retry button; a successful save steps back. */
#app-shell[data-focus="question"] .progress-save-indicator:not(:has(#progress-save-retry:not([hidden]))){display:none}
#app-shell[data-focus="question"] .layout{display:block!important;min-height:0;margin-top:0!important;padding-top:0!important}
#app-shell[data-focus="question"] #main{max-width:780px;margin:0 auto;padding:0 20px 32px}
#app-shell[data-focus="question"] .question-workspace{display:block}
#app-shell[data-focus="question"] .question-content .eyebrow{margin-top:14px}
.focus-bar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);align-items:center;gap:4px;margin:0 0 12px;padding:0 8px;min-height:52px;background:var(--qc-card);border-bottom:1px solid var(--qc-line)}
.focus-bar[hidden]{display:none}
.focus-bar #written-finish{margin:0}
.focus-bar .btn{min-height:44px;margin:0;padding:0 8px;align-self:center;white-space:nowrap}
.focus-bar .focus-exit{justify-self:start;min-width:44px;color:var(--qc-ink);font-weight:600;font-size:18px}
.focus-bar .focus-finish{justify-self:end;color:var(--qc-emerald);font-weight:700}
.focus-progress{position:absolute;left:0;right:0;bottom:-1px;height:4px;background:var(--panel-strong);overflow:hidden}
.focus-progress span{display:block;height:100%;background:var(--qc-emerald);transition:width .25s}
/* The position sentence stays available to screen readers; the bar shows it to everyone else. */
.question-position-quiet{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.question-start[hidden],.question-player nav[hidden]{display:none}
#main [data-report-id],.question-content,.question-player{scroll-margin-top:calc(var(--header-h,0px) + 12px)}
#app-shell[data-focus="question"] .option{min-height:56px}
@media (max-width:700px){
 #app-shell[data-focus="question"] #main{padding:0 16px 24px}
 /* Previous and Next sit at the end of each question, in the page. The bar at the top is the one
    that stays on screen. Space below them keeps the floating help button off the Next button. */
 #app-shell[data-focus="question"] #main{padding-bottom:88px}
 #app-shell[data-focus="question"] .question-nav{position:relative;z-index:21;margin:16px 0 0;align-items:center}
 #app-shell[data-focus="question"] .session-actions{position:relative;z-index:20;margin:16px 0 0}
 /* The floating help button passes beneath these buttons while the page scrolls. */
 body:has(#app-shell[data-focus="question"]) .zys-help:not(:has(.zys-help-panel:not([hidden]))){z-index:19}
 #app-shell[data-focus="question"] .session-actions .btn.primary{width:100%;min-height:52px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){.focus-progress span{transition:none}}

/* Practice start page: one quick-start card; everything else under "More options". */
.written-start{display:flex;flex-direction:column;gap:18px;max-width:780px}
.written-start-head h1{margin:6px 0 6px}
.written-start-head p{margin:0;color:var(--qc-muted)}
.quick-start{display:flex;flex-direction:column;gap:14px}
.quick-start h2{margin:0}
.quick-count{border:0;margin:0;padding:0}
.quick-count legend{padding:0;margin-bottom:8px;font-size:14px;color:var(--qc-muted)}
.quick-count-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.quick-chip{min-height:48px;border-radius:12px;border:1px solid var(--qc-line-strong);background:var(--qc-card);color:var(--qc-ink);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.quick-chip[aria-pressed="true"]{border:2px solid var(--qc-emerald);background:var(--accent);color:var(--qc-emerald);font-weight:700}
.quick-topic{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--qc-muted)}
.quick-topic select{min-height:48px;border-radius:12px;border:1px solid var(--qc-line-strong);background:var(--qc-card);padding:0 12px;font-size:16px;color:var(--qc-ink)}
.quick-start .quick-begin{min-height:52px;font-size:17px;width:100%}
.written-more>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;color:var(--qc-emerald)}
.written-more .card{border:0;padding:0;margin:12px 0 0;background:transparent;box-shadow:none}
.written-more .written-session-controls{margin-top:8px}
.more-ways{margin-top:24px}
.more-ways h2{font-size:19px;margin:0 0 10px}
.more-ways-list{display:flex;flex-wrap:wrap;gap:10px}
.more-ways-list .panel-actions,.more-ways-list .qf-entry{margin:0}
.written-more{padding-top:10px!important;padding-bottom:10px!important}
.written-more[open]{padding-bottom:20px!important}

/* Simpler design, phase 2a (Claude, 22 October 2026, owner-approved): five destinations everywhere. */
.app-tabs{display:none}
.primary-nav{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.primary-item{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--qc-ink);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.primary-item:hover{background:var(--tint)}
.primary-item.active{background:var(--accent);color:var(--qc-emerald);font-weight:700}
.primary-item svg{flex:none;color:var(--qc-muted)}
.primary-item.active svg{color:var(--qc-emerald)}
.nav-all{border-top:1px solid var(--qc-line);padding-top:10px}
.nav-all>summary{min-height:40px;display:flex;align-items:center;padding:0 12px;cursor:pointer;font-size:13px;font-weight:700;color:var(--qc-muted);letter-spacing:.02em}
.nav-all[open]>summary{margin-bottom:6px}
/* Exam switcher in the top bar. */
.exam-switcher>summary{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--qc-navy)}
.exam-switcher nav a[aria-current="true"]{font-weight:700;color:var(--qc-emerald)}
.exam-switcher .exam-switch-add{border-top:1px solid var(--qc-line);margin-top:4px;padding-top:10px;color:var(--qc-emerald);font-weight:600}
/* Home card. */
.home-hero{background:var(--qc-card);border:1px solid var(--qc-line);border-radius:16px;padding:20px;margin:0 0 18px;display:flex;flex-direction:column;gap:12px}
.home-hero h2{margin:0;font-family:var(--zys-font);font-size:24px;color:var(--qc-navy)}
.home-hero-progress{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--qc-muted)}
.home-hero-exam{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:#875811}
.home-hero-bar{height:8px;border-radius:4px;background:var(--panel-strong);overflow:hidden}
.home-hero-bar span{display:block;height:100%;background:var(--qc-gold,#af8541)}
.home-hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.home-hero-actions .btn{min-height:52px;font-size:16px;padding:0 22px}
.home-hero-actions .home-start{flex:1 1 220px}
.home-hero-actions .home-listen{flex:1 1 220px}
/* More page. */
.more-page{max-width:640px;display:flex;flex-direction:column;gap:22px}
.more-page h1{margin:0}
.more-page h2{margin:0 0 8px;font-family:inherit!important;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--qc-muted)}
.more-list{display:flex;flex-direction:column;background:var(--qc-card);border:1px solid var(--qc-line);border-radius:14px;overflow:hidden}
.more-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 16px;border:0;border-bottom:1px solid var(--qc-line);background:transparent;color:var(--qc-navy);font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
.more-row[hidden]{display:none!important}
.more-row:last-child{border-bottom:0}
.more-row:hover{background:var(--tint)}
.more-row-text{display:flex;flex-direction:column;gap:2px}
.more-row-text small{font-weight:400;color:var(--qc-muted)}
.more-row.is-current{box-shadow:inset 4px 0 0 var(--qc-emerald)}
.more-current{font-size:13px;color:var(--qc-emerald)}
.more-add{color:var(--qc-emerald)}
.more-signout{color:var(--danger)}
@media (max-width:800px){
 /* Phones and small tablets: bottom tabs replace the menu button, the breadcrumb and the PACES bar. */
 .app-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:40;padding:4px 4px calc(6px + env(safe-area-inset-bottom));background:var(--qc-card);border-top:1px solid var(--qc-line)}
 .app-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border:0;background:transparent;color:var(--qc-muted);font:inherit;font-size:12px;cursor:pointer}
 .app-tab.active{color:var(--qc-emerald);font-weight:700}
 #app-shell .mobile-menu,#app-shell .paces-bar{display:none!important}
 #app-shell:not([data-focus="question"]) #main{padding-bottom:96px}
 /* Bottom tabs on every window (owner, 3 November 2026): they slide away on scrolling down and return on
    scrolling up (see account-menu.js). The slide uses transform only, so nothing on the page moves. The
    tabs stay focusable while away: focusing one brings the bar back. */
 #app-tabs.app-tabs{transition:transform .2s ease-out}
 body[data-tabs-hidden] #app-tabs.app-tabs{transform:translateY(calc(100% + 1px))}
 /* The help button rides above the tabs and moves down with them. */
 body:has(#app-shell) .zys-help:not(:has(.zys-help-panel:not([hidden]))),
 body:has(#app-shell) .chat-launch{bottom:calc(76px + env(safe-area-inset-bottom))!important;transition:transform .2s ease-out}
 body[data-tabs-hidden] .zys-help:not(:has(.zys-help-panel:not([hidden]))),
 body[data-tabs-hidden] .chat-launch{transform:translateY(60px)}
 /* The end of a question clears the tabs and the help button above them. */
 #app-shell[data-focus="question"] #main{padding-bottom:calc(148px + env(safe-area-inset-bottom))}
 /* Live timed and recording screens keep their own controls and no tabs, so two bars never stack: PACES
    stations and timed recall (timer bar), voice sessions, and hands-free sessions (control panel). */
 #app-shell[data-session="true"] .app-tabs,body.zys-hf-open .app-tabs,body.zys-hf-on .app-tabs,body:has(.voice-clock) .app-tabs{display:none}
 body:has(#app-shell):has(.voice-clock) .zys-help:not(:has(.zys-help-panel:not([hidden]))){bottom:calc(16px + env(safe-area-inset-bottom))!important}
}
@media (max-width:800px) and (prefers-reduced-motion:reduce){
 #app-tabs.app-tabs,body:has(#app-shell) .zys-help,body:has(#app-shell) .chat-launch{transition:none!important}
}
.home-hero{text-align:left;align-items:stretch}
.home-hero h2,.home-hero-progress{width:100%}
.home-hero-actions .btn{justify-content:center}
/* On Home the card already names the exam and area; the strip that repeated it steps back. */
.zys-dash:has(.home-hero) .atlas-preview{display:none}
.more-list>p{margin:0;padding:14px 16px}

/* Keep the active exam and brand inside the signed-in header on narrow screens. */
@media(max-width:800px){
 #app-shell .top-signed-in .top-lead{flex:1 1 auto;min-width:0}
 #app-shell .top-signed-in #header-exams{min-width:0}
 #app-shell .top-signed-in .exam-switcher{min-width:0;max-width:100%}
 #app-shell .top-signed-in .exam-switch-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* One banner (owner, 3 November 2026). Fixed to the page, so it can never scroll away. Two rows at the
   very top of the page; one slim row once scrolled. Space for the two rows is reserved and never changes,
   so merging cannot move the content or the scroll position. --header-h follows the banner's height. */
#app-shell .top{background:var(--qc-card)!important;height:calc(var(--header-h) + var(--banner-safe));padding-top:var(--banner-safe)}
#app-shell[data-merged]{--header-h:var(--banner-slim)}
#app-shell:has(.top>.focus-bar:not([hidden])){padding-top:calc(var(--header-full) + var(--banner-slim) + var(--banner-safe))}
html:has(#app-shell){scroll-padding-top:64px}
#app-shell .top>.focus-bar{position:absolute;top:0;left:0;right:0;z-index:1;height:var(--banner-slim);min-height:0;margin:0;pointer-events:none;transform:translateY(calc(var(--header-full) + var(--banner-safe)));transition:transform .18s ease-out}
#app-shell .top>.focus-bar>*{pointer-events:auto}
#app-shell .top>.focus-bar>.focus-progress{pointer-events:none}
#app-shell[data-merged] .top>.focus-bar{transform:translateY(var(--banner-safe));background:transparent;border-bottom-color:transparent}
#app-shell .top:has(.zys-exam-menu[open])>.focus-bar{z-index:0}
#app-shell[data-merged] .zys-tagline{display:none}
#app-shell[data-merged] .brand .zys-wordmark{font-size:.82em}
#app-shell .paces-tabs{top:calc(var(--header-h) + 4px)}
#app-shell .session-exit{top:var(--header-h)}
@media (prefers-reduced-motion:reduce){#app-shell .top>.focus-bar{transition:none}}
#app-shell[data-focus="question"] .question-nav{flex-wrap:wrap}
#app-shell[data-focus="question"] .question-nav>#part1-next,#app-shell[data-focus="question"] .question-nav>#msra-next{margin-left:auto}
#app-shell[data-merged] .top>.focus-bar>.focus-exit,#app-shell[data-merged] .top>.focus-bar>.focus-finish{visibility:hidden}
#app-shell[data-merged] .crumbs,#app-shell[data-merged] .account-upgrade{display:none}
/* Question screens (owner, 4 November 2026): the exam tab stays while the page is at the top, so the learner can see
   and switch exam, and steps back once the banner merges on scrolling. Its list is also in the name tab's menu. */
#app-shell[data-merged]:has(.top>.focus-bar:not([hidden])) #header-exams{display:none}
/* Counter pill (owner, 3 November 2026): a pair with the name tab. The site's body font draws every zero
   with a slash and has no feature to remove it (tested), so the count uses the exam tab's system font. */
.focus-pill{display:flex;align-items:center;justify-self:center;gap:8px;height:46px;box-sizing:border-box;border:0;background:transparent}
/* Previous and Next match the buttons under the question: Previous outlined, Next filled navy, same rounded rectangle. */
.focus-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--qc-emerald);border-radius:14px;background:var(--qc-emerald);color:#fff;cursor:pointer}
.focus-pill>.focus-arrow:first-child{background:var(--qc-card);color:var(--qc-emerald);border-color:var(--qc-line-strong)}
.focus-arrow:disabled,.focus-pill>.focus-arrow:first-child:disabled{background:var(--qc-card);color:#b4c6bf;border-color:var(--qc-line);opacity:1;cursor:not-allowed}
.focus-arrow:focus-visible{outline:3px solid var(--qc-gold)!important;outline-offset:-3px!important}
.focus-count{align-self:center;min-width:0;padding:0 8px;font:650 14px/1.5 var(--zys-font);color:var(--qc-ink);white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"zero" 0,"tnum" 1}
@media(max-width:360px){.focus-arrow{width:38px}.focus-count{padding:0 5px}}
/* Narrowest phones: system fonts differ in width, so the pill starts clear of the name tab whatever the font. */
@media(max-width:340px){#app-shell .top>.focus-bar{grid-template-columns:78px auto minmax(0,1fr);gap:0}.focus-pill{justify-self:start}.focus-arrow{width:36px}.focus-count{padding:0 3px;font-size:13px}}
#account-options [data-menu-exams]{margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--qc-line)}
#account-options .menu-exams-title{display:block;padding:8px 12px 4px;font-size:12px;font-weight:700;color:var(--qc-muted)}
#account-options [aria-current="true"]{font-weight:700;color:var(--qc-emerald);justify-content:space-between}
/* Member pages: the decorative curved cream wash behind the banner goes; the page is a plain colour. */
body:has(#app-shell){background:var(--qc-ivory)!important}

/* Switch exam (phase 4): the exam list is a small dropdown on a computer and a bottom sheet on a phone. The
   list itself is the same markup and the same links; only its look changes. */
.exam-sheet-title{display:none;margin:0 0 4px;font-family:var(--zys-font);font-size:20px;font-weight:600;color:var(--qc-navy)}
.exam-switcher nav a .exam-row-name{display:block}
.exam-switcher nav a .exam-row-status{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--qc-muted)}
@media (max-width:800px){
 /* The top bar's blur would make the bar, not the screen, the frame for the sheet; it pauses while the sheet is open. */
 #app-shell .top:has(.exam-switcher[open]){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;z-index:90!important}
 #app-shell .exam-switcher[open]::before{content:"";position:fixed;inset:0;z-index:80;background:rgba(16,45,80,.4)}
 #app-shell .exam-switcher[open]>nav{position:fixed!important;inset:auto 0 0 0!important;z-index:81;display:flex!important;flex-direction:column;gap:8px;box-sizing:border-box;width:auto!important;max-width:none!important;max-height:80vh;overflow:auto;margin:0!important;padding:16px 16px calc(18px + env(safe-area-inset-bottom))!important;background:var(--qc-card)!important;border:0!important;border-top:3px solid var(--qc-gold)!important;border-radius:18px 18px 0 0!important;box-shadow:0 -12px 32px rgba(16,45,80,.24)!important}
 #app-shell .exam-switcher[open]>nav .exam-sheet-title{display:block}
 #app-shell .exam-switcher[open]>nav a{display:flex!important;flex-direction:column;justify-content:center;min-height:56px;box-sizing:border-box;padding:10px 16px!important;border:1.5px solid var(--qc-line)!important;border-radius:12px;background:var(--qc-card);color:var(--qc-navy);font-size:16px;font-weight:700;text-decoration:none}
 #app-shell .exam-switcher[open]>nav a[aria-current="true"]{border-color:var(--qc-emerald)!important;background:var(--qc-ivory);box-shadow:inset 4px 0 0 var(--qc-emerald)}
 #app-shell .exam-switcher[open]>nav a.exam-switch-add{border:1.5px dashed var(--qc-line-strong)!important;color:var(--qc-emerald);font-weight:700;margin-top:4px}
}

/* Home tiles (phase 4): four cards under the practice card. The icon chips use the activity colours. */
.home-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
.home-tile{display:flex;align-items:center;gap:12px;min-height:76px;box-sizing:border-box;padding:12px 14px;border:1px solid var(--qc-line);border-radius:14px;background:var(--qc-card);color:var(--qc-navy);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.home-tile:hover{border-color:var(--qc-line-strong);box-shadow:0 4px 14px rgba(16,45,80,.08)}
.home-tile:focus-visible{outline:3px solid var(--qc-gold);outline-offset:2px}
.home-tile-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--qc-ivory-deep);color:var(--qc-navy)}
.home-tile[data-tone="listen"] .home-tile-icon{background:var(--qc-ivory-deep);color:var(--qc-navy)}
.home-tile[data-tone="progress"] .home-tile-icon{background:var(--qc-ivory-deep);color:var(--qc-navy)}
.home-tile[data-tone="notes"] .home-tile-icon{background:var(--qc-ivory-deep);color:var(--qc-navy)}
.home-tile-text{display:flex;flex-direction:column;min-width:0}
.home-tile-text strong{font-size:16px;line-height:1.25;color:var(--qc-navy)}
.home-tile-text small{margin-top:2px;font-size:12px;line-height:1.35;color:var(--qc-muted)}
@media (max-width:360px){.home-tiles{grid-template-columns:minmax(0,1fr)}}
.home-tile[hidden]{display:none!important}
.more-tiles{margin:8px 0 16px}
.more-signout-list{margin-top:8px}
.home-progress-link{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:8px 0 0;padding:0 4px;font-weight:700;color:var(--qc-navy);text-decoration:none;border-bottom:1px solid var(--qc-line)}
.home-more{margin:0 0 24px}
.home-more>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;color:var(--qc-navy)}

/* "Opening hands-free listening…": shown from the Listen tap until hands-free is open (owner, 5 November 2026). */
.listen-starting{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:999px;background:var(--qc-card);border:1px solid var(--qc-line);box-shadow:0 6px 20px rgba(16,45,80,.18);color:var(--qc-ink,#102d50);font-weight:600;font-size:15px}
@media (min-width:801px){.listen-starting{bottom:24px}}

/* Reference book (owner, 5 November 2026): a gold tile and two simple cards. */
.home-tile[data-tone="reference"] .home-tile-icon{background:#fdf0c4;color:#5f4410}
.practise-tiles .home-tile[data-tone="reference"]{grid-column:1/-1;border:2px solid var(--qc-gold,#af8541);background:#fdf8e4}
.reference-cards{display:grid;gap:14px;margin-top:8px}
.reference-card h2{margin:0 0 6px;font-size:1.15rem}.reference-card p{margin:0 0 8px}
.reference-card[data-tone="quick"]{background:#fdf0c4;border-color:#af8541}
.reference-card[data-tone="detail"]{background:#eef1f6;border-color:#dde4ee}
@media(min-width:801px){.reference-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tighter top of page on phones (owner, 6 November 2026: too much space lost at the top of sections).
   Smaller headline, fewer stacked rows, tighter gaps. Wide screens are unchanged. */
@media(max-width:680px){
 main{padding-top:14px}
 #main>.panel-actions{display:inline-flex;margin:0 12px 4px 0;gap:6px}
 #main>.panel-actions .btn{min-height:34px;padding:5px 12px;font-size:14px}
 #main .intro{gap:8px;margin-bottom:14px}
 #main .intro h1{font-size:clamp(26px,7.4vw,32px);line-height:1.12;margin:4px 0 6px}
 #main .intro p{font-size:15px;line-height:1.45;margin:0}
 #main .intro .eyebrow{margin:6px 0 0}
 #main .intro .pill{margin-top:2px}
 #main>.eyebrow,#main .written-start .eyebrow{margin-top:4px}
 #main>h1{font-size:clamp(26px,7.4vw,32px);line-height:1.12;margin:4px 0 8px}
 .progress-save-indicator{margin:0}
}

/* One way to each place (6 November 2026): on phones the bottom tabs already open Practise, Listen and Progress,
   so Home and the practice pages do not repeat them. Desktop has no tab bar, so the tiles stay there. Notes moved to More. */
@media(max-width:800px){
 .zys-dash>.home-tiles[aria-label="Where to next"],.home-hero .home-listen,.practise-tiles [data-home-listen],.practise-tiles #open-area-dashboard{display:none!important}
}

/* One shape for the three header controls (owner decision, 6 November 2026): the account button, the Exams button and the
   Listen button are the same rounded rectangle and the same width, so the header and the question screen read as one family. */
#account-trigger,.top-signed-in #header-exams summary,.zys-narrator:has(.zys-listen-toggle[aria-expanded="false"]){box-sizing:border-box;min-height:44px;border-radius:14px;justify-content:center}
@media(min-width:700px){#account-trigger,.top-signed-in #header-exams summary,.zys-narrator:has(.zys-listen-toggle[aria-expanded="false"]){min-width:112px}}

/* Question screens (owner, 6 November 2026: too much space wasted at the top): one slim row instead of a header and a bar stacked
   on top of each other. The name tab shows its letter only, the leave cross sits beside it, the counter is centred and Finish is
   on the right. The logo, exam tab and trail step aside while a question set is open; the name tab's menu still switches exam. */
#app-shell:has(.top>.focus-bar:not([hidden])){--header-h:var(--banner-slim);padding-top:calc(var(--banner-slim) + var(--banner-safe))}
#app-shell:has(.top>.focus-bar:not([hidden])) .top>.focus-bar{transform:translateY(var(--banner-safe));background:transparent;border-bottom-color:transparent}
#app-shell:has(.top>.focus-bar:not([hidden])) .top>.focus-bar>.focus-exit,#app-shell:has(.top>.focus-bar:not([hidden])) .top>.focus-bar>.focus-finish{visibility:visible}
#app-shell:has(.top>.focus-bar:not([hidden])) .top>.brand,#app-shell:has(.top>.focus-bar:not([hidden])) .top .crumbs,#app-shell:has(.top>.focus-bar:not([hidden])) .top #header-exams,#app-shell:has(.top>.focus-bar:not([hidden])) .top .account-upgrade{display:none}
#app-shell:has(.top>.focus-bar:not([hidden])) .account-trigger-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
#app-shell:has(.top>.focus-bar:not([hidden])) .top>.focus-bar>.focus-exit{margin-left:84px}
#app-shell:has(.top>.focus-bar:not([hidden])) #account-trigger{min-width:0}
#app-shell:has(.top>.focus-bar:not([hidden])) .question-workspace,#app-shell:has(.top>.focus-bar:not([hidden])) main>.question-content{padding-top:10px}
@media(max-width:600px){#app-shell:has(.top>.focus-bar:not([hidden])) .top>.focus-bar{grid-template-columns:132px auto minmax(0,1fr)}#app-shell:has(.top>.focus-bar:not([hidden])) .focus-pill{justify-self:start;gap:4px}}
@media(max-width:340px){#app-shell:has(.top>.focus-bar:not([hidden])) .top>.focus-bar{grid-template-columns:116px auto minmax(0,1fr)}#app-shell:has(.top>.focus-bar:not([hidden])) .top>.focus-bar>.focus-exit{margin-left:70px;min-width:36px}}
@media(min-width:901px){#app-shell:has(.top>.focus-bar:not([hidden])) .top>.focus-bar>.focus-exit{margin-left:112px}}

/* Switch exam list: the access label is shown once under the title when every exam has the same one. */
.exam-sheet-access{margin:0 0 8px;padding:0 2px;font-size:13px;color:var(--muted,#5b6b66)}

/* Laptop question sets (owner, 7 November 2026, option A): the sidebar stays beside the question, can be collapsed, and slides back
   when the cursor goes to the left edge. The top Previous/Next arrows are larger, like the buttons under the question. */
@media(min-width:901px){
 #app-shell[data-focus="question"] .sidebar{display:flex!important;position:fixed;left:0;top:calc(var(--header-h) + var(--banner-safe,0px));bottom:0;height:auto;width:232px;z-index:39;transition:transform .18s ease}
 #app-shell[data-focus="question"] #main,#app-shell[data-focus="question"] .layout>main{max-width:none;margin:0;padding-left:calc(232px + 28px);padding-right:28px}
 #app-shell[data-focus="question"][data-side-collapsed] #main,#app-shell[data-focus="question"][data-side-collapsed] .layout>main{padding-left:28px}
 /* The question column is 780px and centred in the space beside the sidebar (it was squeezed to 500px). */
 #app-shell[data-focus="question"] #main>*{max-width:780px;margin-left:auto;margin-right:auto}
 /* The help button sits above the pinned Previous / Check bar, not on top of it. */
 html body:has(#app-shell[data-focus="question"]) .zys-help.zys-help:not(:has(.zys-help-panel:not([hidden]))){bottom:calc(88px + env(safe-area-inset-bottom))!important}
 #app-shell[data-focus="question"][data-side-collapsed] .sidebar{transform:translateX(-100%);box-shadow:none}
 #app-shell[data-focus="question"][data-side-collapsed][data-side-peek] .sidebar{transform:none;box-shadow:6px 0 24px rgba(16,45,80,.14)}
 .side-edge{position:fixed;left:0;top:calc(var(--header-h) + var(--banner-safe,0px));bottom:0;width:14px;z-index:39}
 #app-shell:not([data-focus="question"]) .side-edge{display:none}
 .side-collapse{display:none}
 #app-shell[data-focus="question"] .side-collapse{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0 0 8px;padding:0 12px;border:1px solid var(--qc-line);border-radius:14px;background:var(--qc-card);color:var(--qc-ink);font:600 14px/1 var(--zys-font,inherit)}
 .focus-arrow{width:72px;height:46px}
 .focus-arrow svg{width:24px;height:24px}
 .focus-count{font-size:15px;font-weight:700;padding:0 10px}
}

/* Sidebar rows (owner, 7 November 2026): rounded rows in the site font, the current page filled navy, like the Switch exam list. */
@media(min-width:901px){
 .sidebar .primary-nav{gap:6px}
 .sidebar .primary-item{min-height:46px;padding:0 14px;border:1px solid transparent;border-radius:14px;color:var(--qc-ink);font-family:var(--zys-font,inherit);font-size:15px;font-weight:600}
 .sidebar .primary-item:hover{background:var(--qc-ivory)}
 .sidebar .primary-item.active,.sidebar .primary-item[aria-current]{background:var(--qc-ink);border-color:var(--qc-ink);color:#fff;font-weight:700}
 .sidebar .primary-item.active svg,.sidebar .primary-item[aria-current] svg{color:#fff}
 .sidebar .nav-all>summary{display:flex;align-items:center;min-height:46px;padding:0 14px;border:1px solid var(--qc-line);border-radius:14px;background:var(--qc-card);color:var(--qc-ink);font-family:var(--zys-font,inherit);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer;list-style:none}
 .sidebar .nav-all>summary:hover{background:var(--qc-ivory)}
}

/* Practice page: one quiet link to the exam guides instead of a row of tabs (owner, 7 November 2026). */
.about-exam-link{display:inline-block;margin-top:14px;color:var(--qc-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.part1-start .small[role="note"]{margin:14px 0 0}

/* Two ribbons on question screens (owner, 7 November 2026). Ribbon 1 is the header: name menu, exam name and an Exit button styled
   like the name menu. Ribbon 2 is the first row of the question: Listen, the counter in the centre, then text size and flag.
   Previous and Next live only in the bottom bar. Applies when the page has a counter row (data-ribbon2, set by account-menu.js). */
#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .top #header-exams{display:block;min-width:0;flex:1 1 auto}
#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .top .top-lead{flex:1 1 auto;min-width:0;margin-right:96px}
#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .top>.focus-bar{display:flex;justify-content:flex-end;align-items:center;padding:0 10px;pointer-events:none}
#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .focus-pill,#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .focus-finish{display:none}
#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .top>.focus-bar>.focus-exit{pointer-events:auto;margin:0;min-width:0;min-height:44px;padding:0 14px;gap:6px;border:1px solid var(--qc-line);border-radius:14px;background:var(--qc-card);color:var(--qc-ink);font-weight:600;font-size:14px;transform:none}
#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .top>.focus-bar>.focus-exit{display:flex;flex-direction:row;align-items:center;white-space:nowrap;padding:0 8px 0 6px}
#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .top>.focus-bar>.focus-exit::before{content:"Exit";display:grid;place-items:center;height:32px;padding:0 12px;border-radius:10px;background:var(--qc-ink);color:#fff;font-weight:700}
#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .top>.focus-bar>.focus-exit>span{font-size:0;width:14px;display:grid;place-items:center}
#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .top>.focus-bar>.focus-exit>span::after{content:"";width:7px;height:7px;border:solid var(--qc-ink);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .top .exam-switch-label,#app-shell[data-ribbon2]:has(.top>.focus-bar:not([hidden])) .top #header-exams summary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app-shell[data-ribbon2] .question-content{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:8px}
#app-shell[data-ribbon2] .question-content>*{grid-column:1/-1}
#app-shell[data-ribbon2] .question-content>.zys-narrator{grid-column:1;grid-row:1;justify-self:start}
#app-shell[data-ribbon2] .question-content>.q-count{grid-column:2;grid-row:1;justify-self:center;font-weight:700;font-size:15px;white-space:nowrap;color:var(--qc-ink)}
#app-shell[data-ribbon2] .question-content>.question-tools{grid-column:3;grid-row:1;float:none;margin:0;justify-self:end}
#app-shell[data-ribbon2] .question-content>.zys-narrator:has(.zys-listen-toggle[aria-expanded="true"]){grid-column:1/-1;grid-row:2}
#app-shell[data-ribbon2] .zys-narrator:has(.zys-listen-toggle[aria-expanded="false"]){background:var(--qc-ink);border-color:var(--qc-ink);color:#fff}
#app-shell[data-ribbon2] .zys-narrator:has(.zys-listen-toggle[aria-expanded="false"]) .zys-listen-toggle{color:#fff;font-weight:700}
.leave-set{width:min(92vw,420px);border:0;border-radius:22px;padding:22px;background:var(--qc-card);color:var(--qc-ink);box-shadow:0 12px 40px rgba(0,0,0,.28)}
.leave-set::backdrop{background:rgba(16,45,80,.45)}
.leave-set h2{margin:0 0 4px;font-size:20px}.leave-set p{margin:0 0 6px;color:var(--qc-muted);font-size:14px;line-height:1.4}
.leave-set button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:56px;margin-top:10px;padding:10px 16px;border:1px solid var(--qc-line);border-radius:14px;background:var(--qc-card);color:var(--qc-ink);font:700 15px/1.3 var(--zys-font,inherit);text-align:left;cursor:pointer}
.leave-set button small{font-weight:400;font-size:12.5px;color:var(--qc-muted)}
.leave-set button.primary{background:var(--qc-ink);border-color:var(--qc-ink);color:#fff}.leave-set button.primary small{color:#d9e1ec}

/* Pinned Previous / Next bar during a question set (owner, 7 November 2026). The five tabs step aside while a set is open; the
   real Previous, Next and Check buttons stay in the page (hidden) and this bar passes taps on to them. Next appears only after
   the answer has been checked: nobody can skip a question. */
#app-shell[data-ribbon2] .question-nav #part1-prev,#app-shell[data-ribbon2] .question-nav #part1-next,#app-shell[data-ribbon2] .question-nav #msra-prev,#app-shell[data-ribbon2] .question-nav #msra-next,#app-shell[data-ribbon2] #part1-check,#app-shell[data-ribbon2] #msra-submit{display:none}
#app-shell[data-ribbon2] ~ #app-tabs,#app-shell[data-ribbon2] #app-tabs{display:none!important}
body:has(#app-shell[data-ribbon2]) #app-tabs{display:none!important}
#app-shell[data-ribbon2] #main{padding-bottom:20px}
#app-shell[data-ribbon2]{min-height:calc(100vh - 73px - env(safe-area-inset-bottom));min-height:calc(100dvh - 73px - env(safe-area-inset-bottom))}
/* Sticky, not fixed: the browser keeps a sticky bar above its own toolbar as the toolbar slides in and out while scrolling; a fixed bar slipped under it. */
.set-bar{position:sticky;bottom:0;z-index:40;display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--qc-card);border-top:1px solid var(--qc-line)}
.set-bar[hidden]{display:none}
.set-bar button{flex:1;min-height:52px;border:1px solid var(--qc-line);border-radius:14px;background:var(--qc-card);color:var(--qc-ink);font:700 15px/1 var(--zys-font,inherit);cursor:pointer}
.set-bar button.next{background:var(--qc-ink);border-color:var(--qc-ink);color:#fff}
.set-bar button:disabled{opacity:.45;cursor:default}
.set-bar button[hidden]{display:none}
@media(min-width:901px){.set-bar{padding-left:calc(232px + 12px)}#app-shell[data-ribbon2][data-side-collapsed] ~ .set-bar{padding-left:12px}}
body:has(#app-shell[data-ribbon2]) .chat-launch{bottom:calc(92px + env(safe-area-inset-bottom))}

@media(max-width:680px){.leave-set{margin:auto 0 0;width:100%;max-width:none;border-radius:22px 22px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom))}.leave-set::before{content:"";display:block;width:40px;height:4px;margin:-8px auto 12px;border-radius:2px;background:var(--qc-line)}}
/* No accidental double-tap zoom (it pushed the pinned Previous/Next bar off the screen); pinch zoom still works. */
html,body{touch-action:manipulation}

/* Account page (owner-approved mock-up, 7 November 2026): four tiles, then list views. */
.account-page .account-heading{margin-bottom:10px}
.account-page .account-heading h1{margin:0}
.acc-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px!important;font-size:14px;color:var(--qc-muted)}
.acc-who span:first-child{overflow-wrap:anywhere}
.acc-badge{padding:3px 10px;border-radius:999px;background:#e8eef7;color:var(--qc-ink);font-size:12.5px;font-weight:700}
.acc-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acc-tile{display:flex;flex-direction:column;gap:6px;min-height:112px;padding:12px;border:1px solid var(--qc-line);border-radius:16px;background:var(--qc-card);color:var(--qc-ink);text-decoration:none}
.acc-tile strong{font-size:16px;line-height:1.25}
.acc-tile small{font-size:12.5px;line-height:1.3;color:var(--qc-muted)}
.acc-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--qc-ink);color:#e4cfa6}
.acc-back{margin:0 0 10px!important}
.acc-back a{font-weight:700;color:var(--qc-ink);text-decoration:none}
.acc-list{overflow:hidden;margin:0 0 12px;border:1px solid var(--qc-line);border-radius:16px;background:var(--qc-card)}
.acc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;width:100%;min-height:52px;padding:8px 14px;border:0;border-bottom:1px solid var(--qc-line);border-radius:0;background:none;color:var(--qc-ink);font:600 15px/1.3 var(--zys-font,inherit);text-align:left;text-decoration:none;cursor:pointer}
.acc-row:last-child{border-bottom:0}
.acc-row small{color:var(--qc-muted);font-size:13px;font-weight:400;text-align:right;overflow-wrap:anywhere}
.acc-row.is-soon{cursor:default}.acc-row.is-soon small{font-style:italic}
.acc-signout{color:#a1261c}
.acc-sec{margin:16px 2px 6px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--qc-muted)}
.acc-note{margin:0 2px 12px!important;font-size:13px!important;color:var(--qc-muted)}
@media(min-width:700px){.acc-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Practise start page (owner-approved mock-up, 7 November 2026). */
.practise-page .pr-label{margin:6px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--qc-gold);font-weight:700}
.pr-row{display:flex;flex-wrap:wrap;gap:8px}
.pr-chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--qc-line-strong);background:var(--qc-card);color:var(--qc-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.pr-chip.is-on{background:var(--qc-navy);border-color:var(--qc-navy);color:#fff}
.pr-chip:disabled{opacity:.55;cursor:not-allowed}
.pr-count{margin:4px 0 0;font-size:15px;color:var(--qc-ink)}.pr-count b{font-size:24px}
.pr-counts{grid-template-columns:repeat(4,minmax(0,1fr))}
.pr-offline{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px dashed var(--qc-gold);border-radius:12px;padding:10px 12px;font-size:14px;color:var(--qc-ink)}
.pr-soon{flex:none;font-size:12px;font-weight:700;color:var(--qc-muted)}
.pr-links{padding:0}
.pr-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 14px;border-bottom:1px solid var(--qc-line);color:var(--qc-ink);text-decoration:none;font-weight:600}
.pr-link:last-child{border-bottom:0}.pr-link small{color:var(--qc-muted);font-size:13px;font-weight:400}.pr-link.is-soon{opacity:.7}