:root{--tf-accent:var(--action);--tf-line:var(--surface-border);--tf-panel:var(--surface-panel);--tf-text:var(--text-strong);--tf-body:var(--text-body);--tf-muted:var(--text-muted)}
body{min-height:100vh;background:var(--surface-page);color:var(--tf-body);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.tf-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;min-height:60px;padding:7px max(10px,calc((100vw - 1100px)/2));background:var(--tf-panel);border-bottom:1px solid var(--tf-line)}
.tf-home{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--tf-line);border-radius:4px;color:var(--tf-text);font-size:21px;text-decoration:none}
.tf-heading{min-width:0;flex:1}.tf-heading strong,.tf-heading span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tf-heading strong{color:var(--tf-text);font-size:15px}.tf-heading span,.tf-save{color:var(--tf-muted);font-size:12px}.tf-timer{font-variant-numeric:tabular-nums;color:var(--tf-text);font-size:18px;font-weight:700;white-space:nowrap}
.tf-menu{position:relative}.tf-menu .sw-menu{top:48px}.tf-menu [data-theme-toggle]{min-height:44px;border:1px solid var(--tf-line);border-radius:4px;background:var(--tf-panel);color:var(--tf-text)}
.tf-main{width:min(980px,100%);margin:0 auto;padding:20px 16px calc(104px + env(safe-area-inset-bottom))}
.tf-main[hidden]{display:none}.tf-main h1{color:var(--tf-text);font-size:clamp(26px,5vw,36px);line-height:1.18}
.tf-section-list{margin:20px 0;border-block:1px solid var(--tf-line)}.tf-section-list div{display:flex;justify-content:space-between;gap:16px;padding:10px 2px;border-bottom:1px solid var(--tf-line)}.tf-section-list div:last-child{border:0}.tf-section-list dt{font-weight:700;color:var(--tf-text)}.tf-section-list dd{margin:0;color:var(--tf-muted);text-align:right}
.tf-consent,.tf-confirm{display:flex;align-items:flex-start;gap:10px;margin:16px 0;padding:12px;border:1px solid var(--tf-line);border-radius:4px;background:var(--surface-page);font-size:14px}.tf-consent input,.tf-confirm input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--tf-accent)}
.tf-device{margin-top:20px;padding-top:12px;border-top:1px solid var(--tf-line)}.tf-device h2{margin-bottom:4px;color:var(--tf-text);font-size:21px}
.tf-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.tf-live{min-height:24px;color:var(--tf-muted)}
.tf-section-tabs{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;scrollbar-width:thin}.tf-section-tabs button,.tf-item-nav button{flex:0 0 auto;min-width:44px;min-height:44px;padding:7px 10px;border:1px solid var(--tf-line);border-radius:4px;background:var(--tf-panel);color:var(--tf-body);font:inherit}.tf-section-tabs button[aria-current=true],.tf-item-nav button[aria-current=true]{border-color:var(--tf-accent);color:var(--tf-accent);font-weight:700}
.tf-instructions{margin:8px 0 12px;color:var(--tf-muted)}.tf-item-nav{display:flex;gap:5px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:thin}.tf-item-nav button[data-answered=true]{background:color-mix(in srgb,var(--status-success) 16%,var(--tf-panel));border-color:var(--status-success)}
.tf-question{min-height:260px;overflow-wrap:anywhere}.tf-question h1{font-size:clamp(23px,4vw,30px)}.tf-question h2,.tf-question h3{color:var(--tf-text)}.tf-stimulus{max-height:46vh;overflow:auto;padding:14px;margin:12px 0;border:1px solid var(--tf-line);background:var(--surface-page);white-space:pre-wrap;line-height:1.72}
.tf-options{display:grid;gap:9px;margin:16px 0}.tf-option{display:flex;align-items:flex-start;gap:12px;min-height:48px;padding:11px;border:1px solid var(--tf-line);border-radius:4px;background:var(--surface-page);cursor:pointer}.tf-option input{width:20px;height:20px;flex:0 0 auto;margin:1px 0;accent-color:var(--tf-accent)}
.tf-answer{display:block;width:100%;min-height:54px;padding:12px;border:1px solid var(--tf-line);border-radius:4px;background:var(--tf-panel);color:var(--tf-text);font:inherit}.tf-answer.long{min-height:220px;resize:vertical}
.tf-audio{display:block;margin:12px 0;padding:12px;border:1px solid var(--tf-line);border-radius:4px;background:var(--surface-page)}.tf-recording{margin:12px 0;padding:12px;border-left:4px solid var(--status-error);background:var(--surface-page);font-weight:700}
.tf-bottom{position:fixed;z-index:8;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px max(10px,calc((100vw - 980px)/2)) calc(8px + env(safe-area-inset-bottom));background:var(--tf-panel);border-top:1px solid var(--tf-line)}
.tf-bottom .sw-button{min-width:76px}.tf-item-progress{flex:1;text-align:center;color:var(--tf-muted);font-size:13px}.tf-bottom button:focus-visible,.tf-section-tabs button:focus-visible,.tf-item-nav button:focus-visible,.tf-option:focus-within,.tf-home:focus-visible,.tf-answer:focus-visible{outline:3px solid #e3a83c;outline-offset:2px}
.tf-result-section{margin:18px 0;padding:14px 0;border-top:1px solid var(--tf-line)}.tf-review-row{padding:12px 0;border-top:1px solid var(--tf-line)}.tf-review-row[data-correct=false]{color:var(--status-error)}.tf-review-row[data-correct=true]{color:var(--status-success)}
@media(max-width:600px){.tf-header{padding:6px 7px;gap:6px;flex-wrap:wrap}.tf-heading strong{font-size:13px}.tf-heading span{display:none}.tf-save{display:block;order:10;flex:0 0 100%;min-height:18px;overflow-wrap:anywhere}.tf-timer{font-size:15px}.tf-main{padding:12px 10px calc(108px + env(safe-area-inset-bottom))}.tf-main .sw-panel{padding:14px}.tf-section-list div{display:block}.tf-section-list dd{text-align:left}.tf-bottom{gap:5px;padding-inline:6px}.tf-bottom .sw-button{min-width:64px;padding:8px}.tf-item-progress{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.tf-speaker-visual{max-width:640px;margin:12px 0}.tf-speaker-visual img{display:block;width:100%;height:auto;border-radius:8px}

/* CELPIP reading gaps are labelled placeholders, not editable fields. */
.celpip-reading-help{padding:12px 14px;margin:12px 0;border-left:3px solid var(--tf-accent);background:var(--tf-panel);font-size:14px}
.celpip-reading-help strong{color:var(--tf-text)}.celpip-reading-help p{margin:6px 0 0}
.celpip-reading-blank{display:inline-block;padding:0 6px;border:1px dashed var(--tf-line);border-radius:4px;color:var(--tf-text);background:var(--tf-panel);font-weight:700;white-space:nowrap}
.celpip-reading-blank[aria-current=true]{border:2px solid var(--tf-accent);background:var(--surface-page);color:var(--tf-accent)}