/* Final Home, 4370. The three skins retain their own colour tokens. */
body.institute-home .skin-picker{top:22px;right:28px}
body.institute-home .skin-picker>summary{min-height:48px;gap:12px;padding:12px 18px;border-radius:99px;background:var(--skin-card);border:1px solid var(--skin-line);box-shadow:0 4px 22px #0000000d;font:500 12px/1.5 var(--sans);letter-spacing:.02em}
.skin-picker .skin-symbol{width:20px;height:20px;stroke:currentColor;stroke-width:1.2;fill:none}
.skin-picker .skin-symbol path{fill:currentColor;stroke:none;opacity:.35}
.skin-picker .skin-chevron{width:14px;height:14px;stroke:currentColor;stroke-width:1.2;fill:none;transition:transform .2s}
.skin-picker[open] .skin-chevron{transform:rotate(180deg)}
body.institute-home .skin-options{top:60px;width:280px;padding:10px;border-radius:18px;box-shadow:0 15px 45px #0002}
body.institute-home .skin-options button{position:relative;grid-template-columns:34px 1fr;column-gap:14px;padding:17px 15px;border-radius:11px;align-items:center;font-size:13px;min-height:72px}
body.institute-home .skin-options button i{width:30px;height:30px;border:1px solid var(--skin-line);box-shadow:0 0 0 3px var(--skin-card)}
body.institute-home .skin-options button small{margin-top:3px;line-height:1.4}
body.institute-home .skin-options button:hover{background:var(--skin-wash)}
body.institute-home .skin-options button[aria-pressed=true]:after{content:'✓';position:absolute;right:13px;top:18px;color:var(--skin-accent);font-size:13px}
html[data-skin] .home-simple-page button.home-awareness-link{min-height:54px;bottom:32px;padding:11px 20px;gap:28px;border:1px solid #ffffff70;border-radius:99px;background:#111b1d4d;color:#fff;font:500 13px/1.6 var(--sans);backdrop-filter:blur(12px);text-shadow:none;transition:background .2s,border-color .2s}
html[data-skin] .home-simple-page button.home-awareness-link:hover{background:#111b1d99;border-color:white}
html[data-skin] .home-simple-page button.home-awareness-link span{font-size:22px}

/* A constant frame, generous reading space and a separately scrolling question list. */
html[data-skin] .simple-test-host #mf-test[open]{display:grid!important;grid-template-rows:auto auto 3px auto minmax(0,1fr) auto auto auto;gap:8px!important;width:min(1220px,calc(100vw - 48px))!important;height:min(1000px,94svh)!important;max-height:94svh!important;padding:20px clamp(28px,4vw,58px)!important;box-sizing:border-box;overflow:hidden;border:1px solid var(--skin-line);border-radius:24px;background:var(--skin-paper);color:var(--skin-ink)}
html[data-skin] .simple-test-host #mf-test::backdrop{background:#09101499;backdrop-filter:blur(10px)}
html[data-skin] .simple-test-host #mf-test .mf-dialog-top{margin:0;padding:0;min-height:30px}
html[data-skin] .simple-test-host #mf-test .mf-dialog-top button{height:36px;width:36px;border:1px solid var(--skin-line);border-radius:50%;font-size:24px;background:transparent;color:var(--skin-ink)}
html[data-skin] .simple-test-host #mf-test .mf-kicker{font-size:10px;letter-spacing:.16em;margin:0}
html[data-skin] .simple-test-host #mf-test .mf-test-heading{gap:24px;align-items:center}
html[data-skin] .simple-test-host #mf-test .mf-test-heading h2{font:400 clamp(25px,2.4vw,34px)/1.2 var(--serif)!important;letter-spacing:-.025em;white-space:nowrap;margin:0!important}
html[data-skin] .simple-test-host #mf-test .mf-yes-score strong{font:400 34px/1 var(--serif)}
html[data-skin] .simple-test-host #mf-test .mf-yes-score span{font-size:10px;letter-spacing:.05em}
html[data-skin] .simple-test-host #mf-test .mf-test-pages{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:0;padding:4px 0;overflow-x:auto}
html[data-skin] .simple-test-host #mf-test .mf-test-pages button{min-height:38px;padding:3px 6px;border:0;border-bottom:2px solid var(--skin-line);border-radius:0;gap:3px;font-size:11px;background:transparent;color:var(--skin-muted)}
html[data-skin] .simple-test-host #mf-test .mf-test-pages button[aria-current=page]{color:var(--skin-ink);border-bottom-color:var(--skin-accent);background:var(--skin-wash)}
html[data-skin] .simple-test-host #mf-test .mf-test-pages small{font-size:10px;line-height:1.4;white-space:normal}
html[data-skin] .simple-test-host #mf-test [data-mf-test-body]{display:grid;grid-template-rows:repeat(3,minmax(max-content,auto));align-content:stretch;overflow-y:auto;min-height:0;padding:0;scrollbar-width:thin;scrollbar-color:var(--skin-line) transparent;overscroll-behavior:contain}
html[data-skin] .simple-test-host #mf-test .mf-test-card{position:relative;display:block!important;box-sizing:border-box;align-self:stretch;height:auto;min-height:0;padding:8px 0 8px 30px!important;margin:0!important;border:0;border-bottom:1px solid var(--skin-line);background:transparent;box-shadow:none}
html[data-skin] .simple-test-host #mf-test .mf-test-card>span{position:absolute;left:0;top:12px;font:9px/1.5 var(--sans);color:var(--skin-accent)}
html[data-skin] .simple-test-host #mf-test .mf-test-card>p{width:100%;max-width:none;font:400 clamp(16px,1.3vw,18px)/1.5 var(--sans)!important;margin:0 0 12px!important;letter-spacing:0}
html[data-skin] .simple-test-host #mf-test .mf-test-actions{gap:24px;flex-wrap:wrap}
html[data-skin] .simple-test-host #mf-test .mf-test-actions button{font:500 11px/1.5 var(--sans);min-height:34px;padding:6px 0}
html[data-skin] .simple-test-host #mf-test .mf-test-actions button:first-child{min-width:142px;border:1px solid var(--skin-line);border-radius:99px;padding:7px 16px;display:inline-flex;gap:10px;align-items:center;justify-content:center}
html[data-skin] .simple-test-host #mf-test .mf-test-actions button[aria-pressed=true]{border-color:var(--skin-dark);background:var(--skin-dark);color:var(--skin-light)}
html[data-skin] .simple-test-host #mf-test .mf-test-actions .mf-explain-toggle{text-decoration:underline;text-underline-offset:5px}
html[data-skin] .simple-test-host #mf-test .mf-test-card .mf-test-tac{display:block;width:100%;max-width:none;grid-column:1/-1;font-size:13px!important;line-height:1.4!important;margin:8px 0 0!important;padding:8px 0 0!important;white-space:normal;text-wrap:wrap;color:var(--skin-muted)}
html[data-skin] .simple-test-host #mf-test .mf-test-card .mf-test-tac[hidden]{display:block!important;visibility:hidden;pointer-events:none}
html[data-skin] .simple-test-host #mf-test .mf-test-bottom{grid-row:6;grid-column:1;margin:0;padding-top:8px;gap:22px}
html[data-skin] .simple-test-host #mf-test .mf-test-bottom .mf-link{border:1px solid var(--skin-line);border-radius:99px;padding:12px 22px;min-height:46px}
html[data-skin] .simple-test-host #mf-test .mf-test-bottom .mf-link:last-child{background:var(--skin-dark);color:var(--skin-light)}
html[data-skin] .simple-test-host #mf-test .mf-test-reset{justify-self:start;margin:0;padding:4px 0;font-size:10px}
html[data-skin] .simple-test-host #mf-test .mf-test-finish{grid-row:6;grid-column:1;justify-self:end;align-self:end;z-index:1;padding:0;border:0;height:auto}
html[data-skin] .simple-test-host #mf-test .mf-test-finish .mf-link{border:1px solid var(--skin-dark);border-radius:99px;padding:12px 18px;background:var(--skin-dark);color:var(--skin-light)}
html[data-skin] .simple-test-host #mf-test:has(.mf-test-finish:not([hidden])) [data-mf-test-next]{visibility:hidden}
html[data-skin] .simple-test-host #mf-test .mf-test-reset{grid-row:8;grid-column:1}
html[data-skin] .simple-test-host #mf-test .mf-test-finish[hidden]{display:none!important}
@media(max-width:700px){
 body.institute-home .skin-picker{top:18px;right:18px}
 body.institute-home .skin-picker>summary{min-height:42px;padding:9px 13px;gap:9px;font-size:11px}
 body.institute-home .skin-options{width:270px;top:53px}
 html[data-skin] .home-simple-page button.home-awareness-link{left:auto;right:22px;bottom:24px;min-height:48px;padding:10px 16px;font-size:11px;gap:20px}
 html[data-skin] .simple-test-host #mf-test[open]{width:calc(100vw - 20px)!important;height:95svh!important;max-height:95svh!important;border-radius:18px;padding:18px!important;gap:8px!important}
 html[data-skin] .simple-test-host #mf-test .mf-test-heading{flex-wrap:wrap;gap:12px}
 html[data-skin] .simple-test-host #mf-test .mf-test-heading h2{font-size:clamp(17px,4.6vw,28px)!important;width:100%;letter-spacing:-.02em}
 html[data-skin] .simple-test-host #mf-test .mf-yes-score{position:absolute;top:27px;right:76px;gap:6px}
 html[data-skin] .simple-test-host #mf-test .mf-yes-score strong{font-size:23px}
 html[data-skin] .simple-test-host #mf-test .mf-yes-score span{font-size:8px}
 html[data-skin] .simple-test-host #mf-test .mf-test-pages{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:0}
 html[data-skin] .simple-test-host #mf-test .mf-test-pages button{min-height:34px;padding:6px 0}
 html[data-skin] .simple-test-host #mf-test .mf-test-pages small{display:none}
 html[data-skin] .simple-test-host #mf-test [data-mf-test-body]{padding:0}
 html[data-skin] .simple-test-host #mf-test .mf-test-card{padding:10px 0 10px 22px!important}
 html[data-skin] .simple-test-host #mf-test .mf-test-card>span{position:absolute;top:14px;font-size:8px;margin:0}
 html[data-skin] .simple-test-host #mf-test .mf-test-card>p{font-size:14px!important;line-height:1.5!important;margin-bottom:10px!important}
 html[data-skin] .simple-test-host #mf-test .mf-test-card .mf-test-tac{font-size:12px!important;line-height:1.5!important;margin-top:6px!important;padding-top:6px!important}
 html[data-skin] .simple-test-host #mf-test .mf-test-actions{gap:20px}
 html[data-skin] .simple-test-host #mf-test .mf-test-bottom .mf-link{padding:10px 15px;font-size:11px}
 html[data-skin] .simple-test-host #mf-test .mf-test-finish .mf-link{padding:10px 12px;font-size:11px;min-height:46px}
}