/* ═══════════════════════════════════════════════════════════════════════
   LIFT-IOS · Lift A of the iOS launch (2026-10-20)
   Loaded only at phone width: <link media="(max-width: 899px)"> after lift-screens.css.
   Source of truth: the June CertAnvil E2E app, branch feat/cert-ios-e2e, mockups/cert-ios-*.html.
   Fidelity rule (founder, 19 Oct 2026): the E2E IS the iOS app, so phones get the
   E2E's exact tokens on the app's own token names. Desktop never loads this file.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"]{--bg:oklch(0.15 0.010 275);--surface:oklch(0.205 0.009 275);--surface2:oklch(0.205 0.009 275);--surface3:oklch(0.255 0.010 275);--border:oklch(0.34 0.009 275);--text:oklch(0.97 0.006 275);--text-mid:oklch(0.80 0.010 275);--text-dim:oklch(0.62 0.013 275);--accent:oklch(0.82 0.150 66);--accent-bright:oklch(0.88 0.140 72);--accent-deep:oklch(0.72 0.150 62);--on-accent:oklch(0.18 0.020 275);--green:oklch(0.78 0.150 152);--red:oklch(0.68 0.165 25);--miss:oklch(0.68 0.165 25);--warn:oklch(0.80 0.130 75);--track:oklch(0.30 0.010 275);--page-bg:oklch(0.22 0.012 275);}
html[data-theme="light"]{--bg:oklch(0.975 0.007 85);--surface:oklch(0.955 0.009 84);--surface2:oklch(0.955 0.009 84);--surface3:oklch(0.92 0.010 84);--border:oklch(0.85 0.010 85);--text:oklch(0.22 0.015 280);--text-mid:oklch(0.38 0.014 280);--text-dim:oklch(0.52 0.013 280);--accent:oklch(0.55 0.155 55);--accent-bright:oklch(0.62 0.150 58);--accent-deep:oklch(0.46 0.150 52);--on-accent:oklch(0.99 0.008 85);--green:oklch(0.52 0.13 150);--red:oklch(0.55 0.18 25);--miss:oklch(0.55 0.18 25);--warn:oklch(0.62 0.14 70);--track:oklch(0.88 0.010 85);--page-bg:oklch(0.93 0.010 84);}

/* Phone-only containers render here; their desktop twins hide. */
.ios-only { display: block !important; }
.ios-desktop-only { display: none !important; }

:root { --ios-ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Fonts: the E2E's Inter + Roboto Mono, self-hosted (fonts/, OFL). Phone only. ── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/inter-v20-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url('fonts/robotomono-v31-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ═════════════════════════════ HOME (cert-ios-home.html) ═════════════════════════════ */
/* Home owns its header: the web top bar and the desktop bento step aside on phones. */
body:has(#page-setup.active #ios-home:not(:empty)) #app-topbar, body:has(#page-setup.active #ios-home:not(:empty)) .app-topbar { display: none !important; }
html[data-theme] body #page-setup:has(#ios-home:not(:empty)) > :not(#ios-home):not(#ios-custom):not(#custom-quiz-section):not(#setup-err) { display: none !important; }
html[data-theme] body #page-setup:has(#ios-home:not(:empty)) { padding: 0 !important; }
#ios-home { background: var(--bg); color: var(--text); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
#ios-home *, #ios-home *::before, #ios-home *::after { box-sizing: border-box; }
#ios-home button { font-family: inherit; }
#ios-home .ih-topbar { padding-top: 12px !important; }   /* no env(): body's padding-top already clears the status bar; fixed full-screen pages (Progress, Analytics, Exam, Exam results) keep it */
#ios-home .ih-tb-name { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
#ios-home .ih-body { flex: none !important; overflow: visible !important; }
#ios-home .ih-day.ih-examday .ih-day-name { color: var(--accent-deep); }
/* ported verbatim from the E2E (selectors prefixed ih-, tokens on the app's names) */
#ios-home .ih-topbar { display: flex; align-items: center; gap: 11px; padding: 12px 20px 8px; }
#ios-home .ih-tb-mark { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 13%, var(--surface3)); color: var(--accent-deep); display: grid; place-items: center; font: 800 12px/1 Inter, sans-serif; }
#ios-home .ih-tb-name { flex: 1 1 auto; min-width: 0; }
#ios-home .ih-tb-name b { display: block; font: 650 16px/1.05 Inter, sans-serif; color: var(--text); }
#ios-home .ih-tb-name span { display: block; font: 600 11px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 2px; }
#ios-home .ih-tb-streak { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font: 800 12px/1 Inter, sans-serif; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 11%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border)); border-radius: 999px; padding: 7px 10px; }
#ios-home .ih-tb-streak.ih-zero { color: var(--text-dim); background: transparent; border-color: var(--border); }
#ios-home .ih-tb-streak svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-tb-set { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .14s var(--ios-ease), border-color .18s; }
#ios-home .ih-tb-set:active { transform: scale(0.94); }
#ios-home .ih-tb-set svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-app-theme { flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text-mid); transition:transform .14s var(--ios-ease), border-color .18s; }
#ios-home .ih-app-theme:active { transform:scale(.94); }
@media (hover:hover) and (pointer:fine) {
#ios-home .ih-app-theme:hover { border-color:color-mix(in oklab,var(--accent) 36%,var(--border)); }
}
#ios-home .ih-app-theme svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#ios-home .ih-body { flex: 1; overflow-y: auto; padding: 6px 20px 16px; }
#ios-home .ih-body::-webkit-scrollbar { width: 0; }
#ios-home .ih-greeting { font: 600 13px/1.4 Inter, sans-serif; color: var(--text-dim); margin: 4px 2px 12px; }
#ios-home .ih-rd { position: relative; overflow: hidden; cursor: pointer; border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); border-radius: 18px; background: color-mix(in oklab, var(--accent) 5%, var(--surface)); padding: 16px 17px; transition: transform .14s var(--ios-ease), border-color .3s; }
#ios-home .ih-rd:active { transform: scale(0.995); }
#ios-home .ih-rd.ih-passed { border-color: color-mix(in oklab, var(--green) 40%, var(--border)); background: color-mix(in oklab, var(--green) 6%, var(--surface)); }
#ios-home .ih-rd-top { display: flex; align-items: center; justify-content: space-between; }
#ios-home .ih-rd-eyebrow { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); }
#ios-home .ih-rd-tier { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); background: color-mix(in oklab, var(--green) 13%, transparent); border: 1px solid color-mix(in oklab, var(--green) 32%, transparent); border-radius: 999px; padding: 5px 9px; }
#ios-home .ih-rd-tier.ih-locked { color: var(--text-dim); background: transparent; border-color: var(--border); }
#ios-home .ih-rd-score { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 9px; }
#ios-home .ih-rd-num { font: 600 40px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-home .ih-rd.ih-locked .ih-rd-num { color: var(--text-dim); letter-spacing: 0.04em; }
#ios-home .ih-rd-of { font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
#ios-home .ih-bar { height: 8px; border-radius: 999px; background: var(--track); position: relative; overflow: hidden; margin-bottom: 6px; }
#ios-home .ih-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); transition: width .8s var(--ios-ease), background .4s ease; }
#ios-home .ih-rd.ih-passed .ih-bar > span { background: var(--green); }
#ios-home .ih-rd.ih-passed .ih-rd-num { color: var(--green); }
#ios-home .ih-rd.ih-locked .ih-bar { background: transparent; border: 1px dashed color-mix(in oklab, var(--text-dim) 50%, var(--border)); height: 7px; }
#ios-home .ih-rd.ih-locked .ih-bar > span { display: none; }
#ios-home .ih-rd.ih-locked .ih-bar .ih-tick { display: none; }
#ios-home .ih-rd.ih-locked .ih-rd-legend { display: none; }
#ios-home .ih-rd-stamp { position: absolute; top: 14px; right: 15px; display: none; align-items: center; gap: 5px; z-index: 3;
    font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green);
    background: color-mix(in oklab, var(--green) 15%, var(--surface)); border: 1px solid color-mix(in oklab, var(--green) 40%, transparent); border-radius: 999px; padding: 6px 9px; }
#ios-home .ih-rd-stamp svg { width: 12px; height: 12px; stroke: var(--green); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-rd.ih-passed .ih-rd-stamp { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
#ios-home .ih-rd.ih-passed .ih-rd-stamp { animation: ih-stampin .4s var(--ios-ease) both; }
@keyframes ih-stampin { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: no-preference) {
@keyframes ih-confetti-fall { 0% { opacity: 1; transform: translateY(0) rotate(0deg); } 100% { opacity: 0; transform: translateY(880px) rotate(680deg); } }
}
#ios-home .ih-bar .ih-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: color-mix(in oklab, var(--text) 45%, var(--track)); }
#ios-home .ih-rd-legend { display: flex; justify-content: space-between; font: 600 10.5px/1 Inter, sans-serif; color: var(--text-dim); }
#ios-home .ih-rd-legend .ih-p { color: var(--accent-deep); }
#ios-home .ih-rd-insight { font-size: 12.5px; line-height: 1.45; color: var(--text-mid); margin: 11px 0 0; }
/* Pass level (score at or above the pass mark, book-it not 4 of 4): the next step before booking, in place of the insight */
#ios-home .ih-rd-book { margin: 13px 0 0; }
#ios-home .ih-rd-book-k { display: block; font: 700 10px/1 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
#ios-home .ih-rd-book-s { font-size: 13px; line-height: 1.45; color: var(--text-mid); margin: 0; }
#ios-home .ih-rd-insight b { color: var(--text); font-weight: 650; }
#ios-home .ih-rec { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer; margin-top: 13px;
    border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 16px;
    background: color-mix(in oklab, var(--accent) 8%, var(--surface)); padding: 14px 15px;
    transition: transform .15s var(--ios-ease), border-color .2s; }
#ios-home .ih-rec:active { transform: scale(0.99); }
@media (hover:hover) and (pointer:fine) {
#ios-home .ih-rec:hover { border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); }
}
#ios-home .ih-rec .ih-rc-badge { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; text-align: center;
    background: color-mix(in oklab, var(--accent) 16%, var(--surface3)); color: var(--accent-deep);
    font: 800 13px/0.95 'Roboto Mono', monospace; letter-spacing: -0.02em; }
#ios-home .ih-rec .ih-rc-badge-ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-rec .ih-rc-badge small { display: block; font: 800 7.5px/1 Inter, sans-serif; letter-spacing: 0.1em; margin-top: 2px; }
#ios-home .ih-rec .ih-rc-txt { flex: 1 1 auto; min-width: 0; }
#ios-home .ih-rec .ih-rc-kick { display: block; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
#ios-home .ih-rec .ih-rc-title { display: block; font: 700 16px/1.1 Inter, sans-serif; color: var(--text); margin: 5px 0 4px; }
#ios-home .ih-rec .ih-rc-sub { display: block; font: 500 12px/1.35 Inter, sans-serif; color: var(--text-dim); }
#ios-home .ih-rec .ih-rc-go { flex: 0 0 auto; color: var(--accent-deep); }
#ios-home .ih-rec .ih-rc-go svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-week { border: 1px solid var(--border); border-radius: 15px; background: var(--surface); padding: 11px 12px 10px; margin-top: 11px; }
#ios-home .ih-week-row { display: flex; gap: 6px; }
#ios-home .ih-day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
#ios-home .ih-day-cell { width: 100%; height: 30px; border-radius: 8px; background: var(--surface3); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
#ios-home .ih-day-cell .ih-fillbar { width: 100%; background: color-mix(in oklab, var(--accent) 22%, var(--surface3)); position: absolute; left: 0; bottom: 0;
    transition: height .6s var(--ios-ease); }
#ios-home .ih-day.ih-today .ih-day-cell { border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); }
#ios-home .ih-day.ih-today .ih-day-cell .ih-fillbar { background: var(--accent); }
#ios-home .ih-day-cell b { position: relative; z-index: 1; font: 700 11px/1 'Roboto Mono', monospace; color: var(--text); }
#ios-home .ih-day.ih-empty .ih-day-cell b { color: var(--text-dim); }
#ios-home .ih-day.ih-today .ih-day-cell b { color: var(--on-accent); }
#ios-home .ih-day-name { font: 700 8.5px/1 Inter, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
#ios-home .ih-day.ih-today .ih-day-name { color: var(--accent-deep); }
#ios-home .ih-momentum { display: flex; align-items: center; gap: 15px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px 16px; margin-top: 11px; }
#ios-home .ih-ring { flex: 0 0 auto; position: relative; width: 66px; height: 66px; }
#ios-home .ih-ring svg { width: 66px; height: 66px; transform: rotate(-90deg); }
#ios-home .ih-ring .ih-track-c { stroke: var(--track); }
#ios-home .ih-ring .ih-fill-c { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ios-ease); }
#ios-home .ih-ring .ih-rg-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#ios-home .ih-ring .ih-rg-num b { font: 600 19px/1 Fraunces, serif; color: var(--text); font-variant-numeric: tabular-nums; }
#ios-home .ih-ring .ih-rg-num span { font: 700 8px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
#ios-home .ih-mo-txt { flex: 1 1 auto; min-width: 0; }
#ios-home .ih-mo-txt .ih-mo-goal { font: 700 14px/1.2 Inter, sans-serif; color: var(--text); }
#ios-home .ih-mo-txt .ih-mo-streak { display: block; font: 600 11.5px/1.35 Inter, sans-serif; color: var(--text-dim); margin-top: 4px; }
#ios-home .ih-mo-pick { display: block; margin-top: 9px; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-mid); }
#ios-home .ih-mo-pick b { color: var(--accent-deep); font-weight: 700; }
#ios-home .ih-rd-meta { font: 600 10.5px/1.35 Inter, sans-serif; color: var(--text-dim); margin: 6px 0 0; }
/* 30 Oct persona bundle: one next step. Resume wrap + Start fresh, "How did it go?" card, Passed badge */
#ios-home .ih-rec-wrap .ih-rec { margin-top: 0; }
#ios-home .ih-rec-wrap { margin-top: 13px; }
#ios-home .ih-rec-fresh { display: block; margin: 9px auto 0; padding: 6px 10px; min-height: 32px; font: 600 12.5px/1 Inter, sans-serif; color: var(--text-dim); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: opacity .16s var(--ios-ease); }
#ios-home .ih-rec-fresh:active { opacity: .6; }
#ios-home .ih-oc { border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); border-radius: 18px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)); padding: 16px 17px; margin-top: 14px; }
#ios-home .ih-oc-kick { display: block; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
#ios-home .ih-oc-title { display: block; font: 700 17px/1.2 Inter, sans-serif; color: var(--text); margin: 6px 0 4px; }
#ios-home .ih-oc-sub { display: block; font: 500 12.5px/1.4 Inter, sans-serif; color: var(--text-dim); margin: 0 0 12px; }
#ios-home .ih-oc-row { display: flex; gap: 8px; flex-wrap: wrap; }
#ios-home .ih-oc-btn { flex: 1 1 0; min-height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 700 13.5px/1 Inter, sans-serif; cursor: pointer; transition: transform .16s var(--ios-ease); }
#ios-home .ih-oc-btn:active { transform: scale(0.97); }
#ios-home .ih-oc-btn.ih-pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#ios-home .ih-oc-later { display: block; margin: 10px auto 0; padding: 6px 10px; min-height: 32px; background: none; border: 0; font: 600 12.5px/1 Inter, sans-serif; color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#ios-home .ih-tb-name b .ih-tb-passed { display: inline-block; margin-left: 6px; font: 800 9px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--green); border: 1px solid currentColor; border-radius: 999px; padding: 3px 6px; vertical-align: 2px; }
@media (prefers-reduced-motion: reduce) { #ios-home .ih-oc-btn:active { transform: none; } }
/* 30 Oct: after Skip on day 0, the locked readiness card keeps the check one tap away */
#ios-home .ih-rd-check { display: inline-flex; align-items: center; gap: 3px; min-height: 44px; margin: 2px 0 -10px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--accent-bright); font: 650 13.5px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
html[data-theme="light"] #ios-home .ih-rd-check { color: var(--accent-deep); }
#ios-home .ih-rd-check:active { transform: scale(0.97); }
#ios-home .ih-rd-check svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-tb-signin { flex: 0 0 auto; display: inline-flex; align-items: center; font: 800 12px/1 Inter, sans-serif; color: var(--on-accent); background: var(--accent); border: 0; border-radius: 999px; padding: 9px 13px; cursor: pointer; transition: transform .14s var(--ios-ease); }
#ios-home .ih-tb-signin:active { transform: scale(0.97); }
#ios-home .ih-sect { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 22px 2px 4px; }
#ios-home .ih-sect-sub { font: 500 11.5px/1.4 Inter, sans-serif; color: var(--text-dim); margin: 0 2px 11px; }
#ios-home .ih-opt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 12px 14px; margin-bottom: 9px; cursor: pointer; transition: border-color .18s, transform .12s var(--ios-ease); }
#ios-home .ih-opt:active { transform: scale(0.99); }
@media (hover:hover) and (pointer:fine) {
#ios-home .ih-opt:hover { border-color: color-mix(in oklab, var(--accent) 38%, var(--border)); }
}
#ios-home .ih-opt .ih-oi { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in oklab, var(--accent) 10%, var(--surface3)); display: grid; place-items: center; }
#ios-home .ih-opt .ih-oi svg { width: 19px; height: 19px; stroke: var(--accent-deep); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-opt .ih-ot { flex: 1 1 auto; min-width: 0; }
#ios-home .ih-opt .ih-ot b { display: block; font: 650 14.5px/1.1 Inter, sans-serif; color: var(--text); }
#ios-home .ih-opt .ih-ot span { display: block; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 3px; }
#ios-home .ih-opt .ih-om { flex: 0 0 auto; font: 700 10px/1 'Roboto Mono', monospace; color: var(--accent-deep); text-align: right; }
#ios-home .ih-opt .ih-og { flex: 0 0 auto; color: var(--text-dim); }
#ios-home .ih-opt .ih-og svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-opt.ih-exam-lead { border-color: color-mix(in oklab, var(--accent) 28%, var(--border)); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
#ios-home .ih-opt:last-child { margin-bottom: 0; }
#ios-home .ih-acc { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); margin-top: 11px; overflow: hidden; transition: border-color .25s var(--ios-ease); }
#ios-home .ih-acc.ih-open { border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
#ios-home .ih-acc-head { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; padding: 14px 15px; transition: transform .12s var(--ios-ease); }
#ios-home .ih-acc-head:active { transform: scale(0.992); }
@media (hover:hover) and (pointer:fine) {
#ios-home .ih-acc-head:hover .ih-acc-ttl b { color: var(--accent-deep); }
}
#ios-home .ih-acc-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in oklab, var(--accent) 10%, var(--surface3)); display: grid; place-items: center; }
#ios-home .ih-acc-ic svg { width: 19px; height: 19px; stroke: var(--accent-deep); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-acc-ttl { flex: 1 1 auto; min-width: 0; }
#ios-home .ih-acc-ttl b { display: block; font: 650 14.5px/1.1 Inter, sans-serif; color: var(--text); transition: color .18s; }
#ios-home .ih-acc-ttl span { display: block; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 3px; }
#ios-home .ih-acc-chev { flex: 0 0 auto; color: var(--text-dim); display: grid; place-items: center; transition: transform .3s var(--ios-ease), color .2s; }
#ios-home .ih-acc.ih-open .ih-acc-chev { transform: rotate(180deg); color: var(--accent-deep); }
#ios-home .ih-acc-chev svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ios-ease); }
#ios-home .ih-acc.ih-open .ih-acc-panel { grid-template-rows: 1fr; }
#ios-home .ih-acc-inner { overflow: hidden; }
#ios-home .ih-acc-pad { padding: 0 14px 13px; }
#ios-home .ih-acc-pad .ih-opt { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
#ios-home .ih-acc-panel { transition: none; }
#ios-home .ih-acc-chev { transition: color .2s; }
}
#ios-home .ih-custom { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: 1px dashed color-mix(in oklab, var(--accent) 40%, var(--border)); border-radius: 14px; background: transparent; padding: 13px 14px; margin-top: 11px; cursor: pointer; transition: border-color .18s, transform .12s var(--ios-ease); }
#ios-home .ih-custom:active { transform: scale(0.99); }
@media (hover:hover) and (pointer:fine) {
#ios-home .ih-custom:hover { border-color: var(--accent); }
}
#ios-home .ih-custom .ih-ci { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in oklab, var(--accent) 12%, var(--surface3)); display: grid; place-items: center; }
#ios-home .ih-custom .ih-ci svg { width: 19px; height: 19px; stroke: var(--accent-deep); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-home .ih-custom .ih-ct { flex: 1 1 auto; min-width: 0; }
#ios-home .ih-custom .ih-ct b { display: block; font: 650 14.5px/1.1 Inter, sans-serif; color: var(--text); }
#ios-home .ih-custom .ih-ct span { display: block; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 3px; }
#ios-home .ih-custom .ih-cg { flex: 0 0 auto; font: 700 10px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); }
#ios-home .ih-domain { border: 1px solid var(--border); border-radius: 14px; background: var(--surface3); padding: 12px 14px; margin-bottom: 9px; cursor: pointer; transition: border-color .18s, transform .12s var(--ios-ease); }
#ios-home .ih-domain:active { transform: scale(0.995); }
#ios-home .ih-domain:last-child { margin-bottom: 0; }
@media (hover:hover) and (pointer:fine) {
#ios-home .ih-domain:hover { border-color: color-mix(in oklab, var(--accent) 34%, var(--border)); }
}
#ios-home .ih-domain-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#ios-home .ih-domain-top b { font: 650 13.5px/1.2 Inter, sans-serif; color: var(--text); }
#ios-home .ih-domain-wt { flex: 0 0 auto; font: 600 10px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-home .ih-domain-bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; margin-top: 8px; position: relative; }
#ios-home .ih-domain-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); transition: width .7s var(--ios-ease); }
#ios-home .ih-domain-bar.ih-full > span { background: var(--green); }
#ios-home .ih-domain-mast { font: 600 9.5px/1 Inter, sans-serif; color: var(--text-dim); margin-top: 6px; }
#ios-home .ih-domain-mast b { color: var(--text-mid); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
#ios-home .ih-reveal { animation: ih-rise .5s var(--ios-ease) backwards; }
#ios-home .ih-reveal:nth-child(1) {animation-delay:.04s}
#ios-home .ih-reveal:nth-child(2) {animation-delay:.08s}
#ios-home .ih-reveal:nth-child(3) {animation-delay:.12s}
#ios-home .ih-reveal:nth-child(4) {animation-delay:.16s}
#ios-home .ih-reveal:nth-child(5) {animation-delay:.20s}
#ios-home .ih-reveal:nth-child(6) {animation-delay:.24s}
#ios-home .ih-reveal:nth-child(7) {animation-delay:.28s}
#ios-home .ih-reveal:nth-child(8) {animation-delay:.32s}
#ios-home .ih-reveal:nth-child(9) {animation-delay:.36s}
#ios-home .ih-reveal:nth-child(10) {animation-delay:.40s}
#ios-home .ih-reveal:nth-child(11) {animation-delay:.44s}
#ios-home .ih-reveal:nth-child(12) {animation-delay:.48s}
#ios-home .ih-reveal:nth-child(n+13) {animation-delay:.52s}
@keyframes ih-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
}

/* Home lost the page padding above: keep the content clear of the fixed tab bar. */
html[data-theme] body #page-setup:has(#ios-home:not(:empty)) { padding-bottom: calc(24px + var(--lift-tab-h, 64px) + env(safe-area-inset-bottom)) !important; }
/* Tiers the E2E never drew: Close reads amber, Behind reads as a miss (not the pass green). */
#ios-home .ih-rd-tier.ih-close { color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 13%, transparent); border-color: color-mix(in oklab, var(--accent) 32%, transparent); }
#ios-home .ih-rd-tier.ih-behind { color: var(--miss); background: color-mix(in oklab, var(--miss) 12%, transparent); border-color: color-mix(in oklab, var(--miss) 30%, transparent); }

/* ═════════════════ QUIZ LOOP SCREENS (cert-ios-quiz / results / review-answers) ═════════════════ */
/* Shared shell for phone-only quiz-loop screens (.iq-screen): ported from the E2E, prefixed iq-. */
.iq-screen { background: var(--bg); color: var(--text); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
/* Full-height column with a sticky footer: .page carries a transform during page switches,
   which would re-anchor a position:fixed footer to the page instead of the screen. */
.iq-screen:not(:empty) { min-height: 100dvh; display: flex !important; flex-direction: column; }
.iq-screen .iq-body { flex: 1 0 auto; }
.iq-screen *, .iq-screen *::before, .iq-screen *::after { box-sizing: border-box; }
.iq-screen button { font-family: inherit; }
.iq-screen .iq-qbar { display: flex; align-items: center; gap: 13px; padding: 13px 20px 12px; }
.iq-screen .iq-exit, .iq-screen .iq-qflag { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .14s var(--ios-ease), background-color .18s, border-color .18s, color .18s; }
.iq-screen .iq-exit:active, .iq-screen .iq-qflag:active { transform: scale(0.94); }
.iq-screen .iq-exit svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.iq-screen .iq-qflag svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.iq-screen .iq-qflag[disabled] { opacity: .45; pointer-events: none; }
.iq-screen .iq-qprog { flex: 1 1 auto; }
.iq-screen .iq-qprog-track { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.iq-screen .iq-qprog-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .5s var(--ios-ease); }
.iq-screen .iq-qprog-num { display: block; font: 700 11px/1 Inter, sans-serif; color: var(--text-dim); margin-top: 6px; letter-spacing: 0.02em; }
.iq-screen .iq-body { padding: 8px 20px 14px; }
.iq-screen .iq-qfoot { position: sticky; bottom: 0; z-index: 30; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
.iq-screen .iq-btn-primary { width: 100%; border: none; border-radius: 13px; padding: 14px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease), filter .2s, opacity .2s; }
.iq-screen .iq-btn-primary:active { transform: scale(0.985); }
.iq-screen .iq-btn-primary[disabled] { opacity: 0.45; box-shadow: none; cursor: default; }

/* Generating (E2E state "gen") */
html[data-theme] body #page-loading:has(#ios-loading:not(:empty)) > :not(#ios-loading) { display: none !important; }
body:has(#page-loading.active #ios-loading:not(:empty)) #app-topbar, body:has(#page-loading.active #ios-loading:not(:empty)) .app-topbar { display: none !important; }
html[data-theme] body #page-loading:has(#ios-loading:not(:empty)) { padding: 0 !important; }
#ios-loading .iq-sk { border-radius: 12px; background: var(--surface3); }
#ios-loading .iq-sk-stem { height: 18px; margin-bottom: 10px; }
#ios-loading .iq-sk-stem.iq-short { width: 62%; margin-bottom: 22px; }
#ios-loading .iq-sk-opt { height: 50px; border-radius: 14px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; }
#ios-loading .iq-sk-opt::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 9px; background: var(--surface3); }
#ios-loading .iq-gen-line { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 16px; line-height: 1.4; letter-spacing: -0.008em; color: var(--text); text-align: center; margin: 18px 14px 22px; }
#ios-loading .iq-gen-prog { margin: 8px 2px 0; }
#ios-loading .iq-gen-prog-track { height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; position: relative; }
#ios-loading .iq-gen-prog-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 999px; background: var(--accent); transform: translateX(-100%); }
#ios-loading .iq-gen-prog-cap { display: block; text-align: center; font: 600 11.5px/1 Inter, sans-serif; color: var(--text-dim); margin-top: 10px; letter-spacing: 0.01em; }
@media (prefers-reduced-motion: no-preference) {
  #ios-loading .iq-shimmer { position: relative; overflow: hidden; }
  #ios-loading .iq-shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text) 9%, transparent), transparent); animation: iq-shimmer 1.35s var(--ios-ease) infinite; }
  /* E2E sweeps `left`; same sweep on transform (40% bar travels -100% → 250% of itself) */
  #ios-loading .iq-gen-prog-bar { animation: iq-indeterminate 1.5s var(--ios-ease) infinite; }
}
@keyframes iq-shimmer { to { transform: translateX(100%); } }
@keyframes iq-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ═════════════════════ QUIZ question + answered (cert-ios-quiz.html) ═════════════════════ */
/* Lift A decisions (founder, 19 Oct): Flag in the corner, pick-then-confirm, E2E pills. */
body:has(#page-quiz.active) #app-topbar, body:has(#page-quiz.active) .app-topbar { display: none !important; }
html[data-theme] body #page-quiz { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
html[data-theme] body #page-quiz .quiz-topbar { position: relative !important; padding-top: 13px !important; }
/* stat pills and Cached stay hidden; Flag is the 34px square in the corner */
html[data-theme] body #page-quiz .quiz-stats { display: flex !important; align-items: center !important; flex: 0 0 auto !important; order: 3 !important; }
html[data-theme] body #page-quiz .quiz-stats > :not(#quiz-flag-btn):not(#short-notice) { display: none !important; }
html[data-theme] body #page-quiz #quiz-flag-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; border-radius: 10px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text-mid) !important; font-size: 0 !important; display: grid !important; place-items: center !important; transition: transform .14s var(--ios-ease), background-color .18s, border-color .18s, color .18s !important; }
html[data-theme] body #page-quiz #quiz-flag-btn::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4M5 4h11l-1.8 4L16 12H5'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4M5 4h11l-1.8 4L16 12H5'/></svg>") center / contain no-repeat; }
html[data-theme] body #page-quiz #quiz-flag-btn.flagged { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
html[data-theme] body #page-quiz #quiz-flag-btn.flagged::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4M5 4h11l-1.8 4L16 12H5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4M5 4h11l-1.8 4L16 12H5'/></svg>"); }
html[data-theme] body #page-quiz #quiz-flag-btn:active { transform: scale(0.94); }
/* "16 of 20" short-set pill: right end of the "Question 1 of N" row (E2E .q-short) */
html[data-theme] body #page-quiz #short-notice:not(:empty):not(.is-hidden) { position: absolute !important; right: 67px; top: 22px; display: inline-block !important; margin: 0 !important; font: 800 10px/1 Inter, sans-serif !important; letter-spacing: .02em; color: var(--accent-deep) !important; background: color-mix(in oklab, var(--accent) 11%, transparent) !important; border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border)) !important; border-radius: 999px !important; padding: 4px 8px !important; }
/* pills: one number each (the lift counter doubled it), answered = neutral amber "done" */
html[data-theme] body #page-quiz .qpd-cell::before { content: none !important; }
html[data-theme] body #page-quiz .qpd-cell { width: 28px !important; height: 28px !important; border-radius: 9px !important; font: 800 12px/1 Inter, sans-serif !important; }
html[data-theme] body #page-quiz .qpd-cell.qpd-done, html[data-theme] body #page-quiz .qpd-cell.qpd-wrong { color: var(--accent-deep) !important; background: color-mix(in oklab, var(--accent) 12%, var(--surface3)) !important; border-color: color-mix(in oklab, var(--accent) 30%, var(--border)) !important; }
/* stem: Fraunces 22px, keyword in italic accent, no programmatic focus box */
html[data-theme] body #page-quiz .q-text { font: 600 22px/1.28 Fraunces, Georgia, serif !important; letter-spacing: -0.01em !important; color: var(--text) !important; outline: none !important; box-shadow: none !important; border: 0 !important; }
html[data-theme] body #page-quiz .q-text strong.exam-keyword { color: var(--accent-deep) !important; font-style: italic !important; font-weight: 600 !important; background: none !important; }
/* scenario card with the E2E "SCENARIO" label */
html[data-theme] body #page-quiz .q-scenario:not([hidden]) { display: block !important; border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)) !important; border-left: 3px solid var(--accent) !important; border-radius: 12px !important; background: color-mix(in oklab, var(--accent) 6%, var(--surface)) !important; padding: 11px 13px !important; margin: 0 0 18px !important; }
html[data-theme] body #page-quiz .q-scenario .q-scenario-rule { display: none !important; }
html[data-theme] body #page-quiz .q-scenario::before { content: "Scenario"; display: flex; align-items: center; gap: 7px; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 7px; padding-left: 20px; min-height: 13px;
  background: no-repeat left center / 13px 13px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2702a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v.01M11 12h1v4h1'/></svg>"); }
html[data-theme] body #page-quiz .q-scenario .q-scenario-body { font: 500 13px/1.5 Inter, sans-serif !important; color: var(--text-mid) !important; }
/* pick-then-confirm: selected (not yet submitted) option */
html[data-theme] body #page-quiz .option.sel { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)) !important; background: color-mix(in oklab, var(--accent) 7%, var(--surface)) !important; }
html[data-theme] body #page-quiz .option.sel .opt-letter { background: var(--accent) !important; color: var(--on-accent) !important; }
/* docked Next: sticky in a full-height column (see .iq-screen note), disabled until a pick */
html[data-theme] body #page-quiz.active { min-height: 100dvh; display: flex !important; flex-direction: column; padding-bottom: 0 !important; }
html[data-theme] body #page-quiz .q-card { flex: 1 0 auto; }
html[data-theme] body #page-quiz .next-btn-row { position: sticky !important; bottom: 0 !important; z-index: 30; margin: 0 -20px !important; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)) !important; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent) !important; background: var(--bg) !important; }
html[data-theme] body #page-quiz .btn-next { display: block !important; width: 100% !important; border-radius: 13px !important; padding: 14px !important; font: 700 15px/1 Inter, sans-serif !important; color: var(--on-accent) !important; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent) !important; text-align: center; }
html[data-theme] body #page-quiz .btn-next[disabled] { opacity: 0.45 !important; box-shadow: none !important; cursor: default !important; }
/* answered: the E2E .why card (red on a miss, green on a hit), explanation always open */
html[data-theme] body #page-quiz .explanation-box.show { border-radius: 15px !important; padding: 14px 15px !important; margin-top: 4px !important; }
html[data-theme] body #page-quiz .explanation-box.show.wrong { border: 1px solid color-mix(in oklab, var(--miss) 26%, var(--border)) !important; background: color-mix(in oklab, var(--miss) 5%, var(--surface)) !important; }
html[data-theme] body #page-quiz .explanation-box.show.correct { border: 1px solid color-mix(in oklab, var(--green) 30%, var(--border)) !important; background: color-mix(in oklab, var(--green) 6%, var(--surface)) !important; }
html[data-theme] body #page-quiz #exp-verdict-check { display: none !important; }
html[data-theme] body #page-quiz .exp-head { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 9px !important; }
html[data-theme] body #page-quiz #exp-label { display: inline-flex !important; align-items: center; gap: 8px; font: 800 11px/1.3 Inter, sans-serif !important; letter-spacing: 0.04em !important; text-transform: none !important; }
html[data-theme] body #page-quiz .explanation-box.wrong #exp-label { color: var(--miss) !important; }
html[data-theme] body #page-quiz .explanation-box.correct #exp-label { color: var(--green) !important; }
html[data-theme] body #page-quiz #exp-label::before { content: ""; width: 15px; height: 15px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--iq-verdict) center / contain no-repeat; mask: var(--iq-verdict) center / contain no-repeat; }
html[data-theme] body #page-quiz .explanation-box.wrong { --iq-verdict: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>"); }
html[data-theme] body #page-quiz .explanation-box.correct { --iq-verdict: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>"); }
html[data-theme] body #page-quiz #exp-acc-head { display: none !important; }
html[data-theme] body #page-quiz #exp-acc, html[data-theme] body #page-quiz #exp-acc-panel { display: block !important; grid-template-rows: 1fr !important; height: auto !important; max-height: none !important; overflow: visible !important; border: 0 !important; background: none !important; padding: 0 !important; }
html[data-theme] body #page-quiz #exp-acc-panel .t-acc-panel-inner { overflow: visible !important; padding: 0 !important; }
html[data-theme] body #page-quiz #exp-text { display: block; font: 400 13px/1.52 Inter, sans-serif !important; color: var(--text-mid) !important; }
html[data-theme] body #page-quiz #exp-wrong-explain:not(.is-hidden) { display: block !important; margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font: 400 12.5px/1.52 Inter, sans-serif !important; color: var(--text-mid) !important; }
html[data-theme] body #page-quiz #exp-wrong-explain b { color: var(--text); font-weight: 650; }
/* actions: Study pill, then Explain further / Drill this concept / Report issue three across */
html[data-theme] body #page-quiz #exp-extras { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 13px !important; }
html[data-theme] body #page-quiz #exp-extras .resource-link { flex: 1 1 100% !important; margin: 0 !important; }
html[data-theme] body #page-quiz #exp-box .resource-dive-btn { display: inline-flex !important; width: auto !important; align-items: center; gap: 7px; font: 700 12px/1 Inter, sans-serif !important; color: var(--accent-deep) !important; background: color-mix(in oklab, var(--accent) 10%, transparent) !important; border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)) !important; border-radius: 999px !important; padding: 8px 12px !important; margin: 0 !important; }
html[data-theme] body #page-quiz #exp-box .explain-btn, html[data-theme] body #page-quiz #exp-box .report-btn { flex: 1 1 0 !important; min-width: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; font: 700 11.5px/1.1 Inter, sans-serif !important; color: var(--text-mid) !important; background: var(--surface3) !important; border: 1px solid var(--border) !important; border-radius: 11px !important; padding: 10px 6px !important; margin: 0 !important; text-align: center; transition: border-color .18s, color .18s, transform .12s var(--ios-ease) !important; }
html[data-theme] body #page-quiz #exp-box .explain-btn:active, html[data-theme] body #page-quiz #exp-box .report-btn:active, html[data-theme] body #page-quiz #exp-box .resource-dive-btn:active { transform: scale(0.97); }
html[data-theme] body #page-quiz #exp-box .explain-btn::before, html[data-theme] body #page-quiz #exp-box .report-btn::before, html[data-theme] body #page-quiz #exp-box .resource-dive-btn::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--iq-ic) center / contain no-repeat; mask: var(--iq-ic) center / contain no-repeat; }
html[data-theme] body #page-quiz #exp-box .explain-btn { --iq-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .8-1 1.7M12 17v.01'/></svg>"); }
html[data-theme] body #page-quiz #exp-box .explain-btn-followup { --iq-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16M4 12h16M4 18h10'/></svg>"); }
html[data-theme] body #page-quiz #exp-box .report-btn { --iq-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 9v4M12 17v.01M10.3 4.3 3.4 16a2 2 0 0 0 1.7 3h13.8a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z'/></svg>"); }
html[data-theme] body #page-quiz #exp-box .resource-dive-btn { --iq-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h11a3 3 0 0 1 3 3v11M4 5v13a2 2 0 0 0 2 2h12'/><path d='M4 5a2 2 0 0 1 2-2h9'/></svg>"); }
/* E2E sizes: 34px squares and 28px pills. The 44px tap target stays as an invisible
   hit area (::after) so the visual matches the E2E without shrinking what a thumb hits. */
html[data-theme] body #page-quiz .back-btn, html[data-theme] body #page-quiz #quiz-flag-btn { min-height: 34px !important; max-height: 34px !important; height: 34px !important; width: 34px !important; position: relative !important; align-self: center !important; }
html[data-theme] body #page-quiz .back-btn::after, html[data-theme] body #page-quiz #quiz-flag-btn::after { content: ""; position: absolute; inset: -5px; }
html[data-theme] body #page-quiz .qpd-cell { min-width: 28px !important; min-height: 28px !important; flex: 0 0 28px !important; padding: 0 !important; position: relative !important; }
html[data-theme] body #page-quiz .qpd-cell::after { content: ""; position: absolute; inset: -8px -3px; }
html[data-theme] body #page-quiz #exp-acc { margin: 0 !important; }
html[data-theme] body #page-quiz .quiz-prog-dots { gap: 7px !important; margin: 2px 0 16px !important; }

/* ═════════════════════════════ RESULTS (cert-ios-results.html) ═════════════════════════════ */
html[data-theme] body #page-results:has(#ios-results:not(:empty)) > :not(#ios-results) { display: none !important; }
html[data-theme] body #page-results:has(#ios-results:not(:empty)) { padding: 0 !important; }
body:has(#page-results.active #ios-results:not(:empty)) #app-topbar, body:has(#page-results.active #ios-results:not(:empty)) .app-topbar { display: none !important; }
/* ported verbatim from the E2E (selectors prefixed ir-, tokens on the app's names) */
#ios-results .ir-app-chrome { display: flex; align-items: center; justify-content: flex-end; padding: 10px 20px 4px; }
#ios-results .ir-app-theme { flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text-mid); transition:transform .14s var(--ios-ease), border-color .18s; }
#ios-results .ir-app-theme:active { transform:scale(.94); }
@media (hover:hover) and (pointer:fine) {
#ios-results .ir-app-theme:hover { border-color:color-mix(in oklab,var(--accent) 36%,var(--border)); }
}
#ios-results .ir-app-theme svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#ios-results .ir-body { flex: 1; overflow-y: auto; padding: 4px 22px 14px; }
#ios-results .ir-body::-webkit-scrollbar { width: 0; }
#ios-results .ir-done-head { margin: 8px 0 18px; }
#ios-results .ir-done-kick { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); display: inline-flex; align-items: center; gap: 7px; margin-bottom: 11px; }
#ios-results .ir-done-kick svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#ios-results .ir-done-title { font: 600 30px/1.08 Fraunces, serif; letter-spacing: -0.014em; color: var(--text); margin: 0; }
#ios-results .ir-done-title em { font-style: normal; color: var(--accent); }
#ios-results .ir-done-sub { font-size: 13.5px; line-height: 1.5; color: var(--text-mid); margin: 10px 0 0; max-width: 34ch; }
/* 30 Oct: the readiness change card (replaced the scaled score). Lift of cert-ios-results.html .rch*; a drop is never red. */
#ios-results .ir-rch { border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border)); border-radius: 18px; background: color-mix(in oklab, var(--accent) 5%, var(--surface)); padding: 16px 17px; margin-top: 18px; }
#ios-results .ir-rch-lbl { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#ios-results .ir-rch-row { display: flex; align-items: baseline; gap: 10px; margin: 11px 0 12px; flex-wrap: wrap; }
#ios-results .ir-rch-from { font: 600 22px/1 Fraunces, serif; color: var(--text-dim); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-results .ir-rch-arrow { font: 600 18px/1 Inter, sans-serif; color: var(--text-dim); }
#ios-results .ir-rch-num { font: 600 52px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-results .ir-rch-delta { align-self: center; display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1 Inter, sans-serif; border-radius: 999px; padding: 6px 10px;
    color: var(--green); background: color-mix(in oklab, var(--green) 12%, transparent); border: 1px solid color-mix(in oklab, var(--green) 30%, transparent); }
#ios-results .ir-rch-delta.ir-down, #ios-results .ir-rch-delta.ir-held { color: var(--text-mid); background: color-mix(in oklab, var(--text) 6%, transparent); border-color: var(--border); }
#ios-results .ir-rch-note { font-size: 13px; line-height: 1.45; color: var(--text-mid); margin: 0 0 12px; max-width: 36ch; }
#ios-results .ir-practice .ir-rch-lbl { display: block; margin-bottom: 11px; }
#ios-results .ir-rch-streak { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid color-mix(in oklab, var(--border) 64%, transparent); font: 600 13px/1.2 Inter, sans-serif; color: var(--text); }
#ios-results .ir-rch-streak svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: var(--accent-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] #ios-results .ir-rch-streak svg { stroke: var(--accent-bright); }
#ios-results .ir-stats { margin-top: 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); overflow: hidden; }
#ios-results .ir-stat { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; }
#ios-results .ir-stat + .ir-stat { border-top: 1px solid color-mix(in oklab, var(--border) 64%, transparent); }
#ios-results .ir-stat .ir-sl { font: 500 13.5px/1 Inter, sans-serif; color: var(--text-mid); }
#ios-results .ir-stat .ir-sv { font: 700 14px/1 Inter, sans-serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-results .ir-stat .ir-sv.ir-good { color: var(--green); }
#ios-results .ir-stat .ir-sv.ir-bad { color: var(--miss); }
#ios-results .ir-split { display: flex; margin-top: 11px; gap: 10px; }
#ios-results .ir-split-cell { flex: 1 1 0; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 12px 13px; }
#ios-results .ir-split-cell .ir-cn { font: 600 22px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-results .ir-split-cell .ir-cl { display: block; font: 600 11px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 5px; }
#ios-results .ir-sect { display: block; }
#ios-results .ir-sect-kick { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 22px 2px 7px; }
#ios-results .ir-sect-title { font: 600 22px/1.1 Fraunces, serif; letter-spacing: -0.012em; color: var(--text); margin: 0 2px 12px; }
#ios-results .ir-sect-title em { font-style: normal; color: var(--accent); }
#ios-results .ir-qrow { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 12px 13px; margin-bottom: 9px; }
#ios-results .ir-qrow .ir-qno { flex: 0 0 auto; font: 700 11px/1.4 'Roboto Mono', monospace; color: var(--text-dim); padding-top: 1px; }
#ios-results .ir-qrow .ir-qmid { flex: 1 1 auto; min-width: 0; }
#ios-results .ir-qrow .ir-qstem { font: 500 13px/1.4 Inter, sans-serif; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ios-results .ir-qrow .ir-qmeta { font: 500 10.5px/1.3 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 5px; }
#ios-results .ir-qrow .ir-qtag { flex: 0 0 auto; align-self: center; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 5px 8px; }
#ios-results .ir-qrow .ir-qtag.ir-wrong { color: var(--miss); background: color-mix(in oklab, var(--miss) 12%, transparent); border: 1px solid color-mix(in oklab, var(--miss) 32%, transparent); }
#ios-results .ir-qrow .ir-qtag.ir-right { color: var(--green); background: color-mix(in oklab, var(--green) 12%, transparent); border: 1px solid color-mix(in oklab, var(--green) 32%, transparent); }
#ios-results .ir-mtoast { position: absolute; z-index: 9; left: 16px; right: 16px; top: calc(52px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border)); border-radius: 16px; padding: 14px 15px; cursor: pointer;
    box-shadow: 0 20px 50px -24px rgba(0,0,0,.5); transform: translateY(-160%); opacity: 0; transition: transform .22s var(--ease-drawer, cubic-bezier(0.32,0.72,0,1)), opacity .2s var(--ios-ease); }
#ios-results .ir-mtoast.ir-open { transform: translateY(0); opacity: 1; transition: transform .34s var(--ease-drawer, cubic-bezier(0.32,0.72,0,1)), opacity .25s var(--ios-ease); }
@media (prefers-reduced-motion: reduce) {
#ios-results .ir-mtoast, #ios-results .ir-mtoast.ir-open { transform: none; transition: opacity .18s ease; }
}
#ios-results .ir-mtoast-i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 14%, transparent); }
#ios-results .ir-mtoast-i svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#ios-results .ir-mtoast-t { display: block; font: 700 13.5px/1.2 Inter, sans-serif; color: var(--text); }
#ios-results .ir-mtoast-l { display: block; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 3px; }
#ios-results .ir-rfoot { flex: 0 0 auto; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); display: flex; flex-direction: column; gap: 9px; }
#ios-results .ir-rfoot .ir-sec-row { display: flex; gap: 9px; }
#ios-results .ir-btn-primary { width: 100%; border: none; border-radius: 13px; padding: 14px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif;
    box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease), filter .2s; }
#ios-results .ir-btn-primary:active { transform: scale(0.985); }
@media (hover:hover) and (pointer:fine) {
#ios-results .ir-btn-primary:hover { filter: brightness(1.05); }
}
#ios-results .ir-btn-ghost { flex: 1 1 0; border: 1px solid var(--border); border-radius: 13px; padding: 12px 10px; cursor: pointer; background: transparent; color: var(--text-mid); font: 650 13px/1 Inter, sans-serif; transition: background .2s, border-color .18s, transform .15s var(--ios-ease); }
#ios-results .ir-btn-ghost:active { transform: scale(0.98); }
@media (hover:hover) and (pointer:fine) {
#ios-results .ir-btn-ghost:hover { background: color-mix(in oklab, var(--text) 5%, transparent); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
}
@media (prefers-reduced-motion: no-preference) {
#ios-results .ir-reveal { animation: ir-rise .5s var(--ios-ease) backwards; }
#ios-results .ir-done-head { animation-delay: .04s; }
#ios-results .ir-rch { animation-delay: .10s; }
#ios-results .ir-stats { animation-delay: .16s; }
#ios-results .ir-split { animation-delay: .20s; }
#ios-results .ir-sect { animation-delay: .24s; }
@keyframes ir-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* app-specific: real scroll (no inner scroller), sticky dock, row buttons, pass state */
#ios-results .ir-app-chrome { padding-top: 10px !important; }
#ios-results .ir-body { flex: 1 0 auto !important; overflow: visible !important; }
#ios-results .ir-rfoot { position: sticky !important; bottom: 0 !important; z-index: 30; }
#ios-results .ir-qrow { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }

/* Milestone toast (showCelebrationToast) as the E2E .mtoast: drops from the top, never over the dock */
html[data-theme] body .celebration-toast { position: fixed !important; z-index: 2000 !important; left: 16px !important; right: 16px !important; top: calc(52px + env(safe-area-inset-top)) !important; bottom: auto !important; width: auto !important; max-width: none !important; margin: 0 !important; display: grid !important; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; background: var(--surface) !important; border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border)) !important; border-radius: 16px !important; padding: 14px 15px !important; box-shadow: 0 20px 50px -24px rgba(0,0,0,.5) !important; transform: translateY(-160%) !important; opacity: 0 !important; transition: transform .22s cubic-bezier(0.32,0.72,0,1), opacity .2s var(--ios-ease) !important; font-family: Inter, -apple-system, sans-serif !important; }
html[data-theme] body .celebration-toast.show { transform: translateY(0) !important; opacity: 1 !important; transition: transform .34s cubic-bezier(0.32,0.72,0,1), opacity .25s var(--ios-ease) !important; }
html[data-theme] body .celebration-toast::before { content: ""; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 14%, transparent) no-repeat center / 18px 18px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2702a' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='9' r='5'/><path d='M8.5 13 7 21l5-2.6 5 2.6-1.5-8'/></svg>"); }
html[data-theme] body .celebration-toast-title { grid-column: 2; font: 700 13.5px/1.2 Inter, sans-serif !important; color: var(--text) !important; }
html[data-theme] body .celebration-toast-sub { grid-column: 2; font: 500 11.5px/1.3 Inter, sans-serif !important; color: var(--text-dim) !important; margin-top: 3px !important; }
@media (prefers-reduced-motion: reduce) { html[data-theme] body .celebration-toast, html[data-theme] body .celebration-toast.show { transform: none !important; transition: opacity .18s ease !important; } }
#ios-results .ir-done-title, #ios-results .ir-sect-title { text-transform: none !important; }
html[data-theme] body .celebration-toast, html[data-theme] body .celebration-toast * { text-align: left !important; }

/* ═════════════════════════ REVIEW ANSWERS (cert-ios-review-answers.html) ═════════════════════════ */
html[data-theme] body #page-review:has(#ios-review:not(:empty)) > :not(#ios-review) { display: none !important; }
html[data-theme] body #page-review:has(#ios-review:not(:empty)) { padding: 0 !important; }
body:has(#page-review.active #ios-review:not(:empty)) #app-topbar, body:has(#page-review.active #ios-review:not(:empty)) .app-topbar { display: none !important; }
/* ported verbatim from the E2E (selectors prefixed ia-, tokens on the app's names) */
#ios-review .ia-hdr { display: flex; align-items: center; gap: 11px; padding: 12px 20px 6px; }
#ios-review .ia-hdr .ia-back { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .14s var(--ios-ease), border-color .18s; }
#ios-review .ia-hdr .ia-back svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#ios-review .ia-hdr .ia-back:active { transform: scale(0.94); }
#ios-review .ia-hdr h1 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; margin: 0; color: var(--text); flex: 1; }
#ios-review .ia-app-theme { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .14s var(--ios-ease), border-color .18s, color .18s; }
#ios-review .ia-app-theme svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s var(--ios-ease); }
#ios-review .ia-app-theme:active { transform: scale(0.94); }
#ios-review .ia-app-theme.ia-spin svg { transform: rotate(40deg) scale(0.9); }
@media (hover:hover) and (pointer:fine) {
#ios-review .ia-app-theme:hover, #ios-review .ia-hdr .ia-back:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); color: var(--accent); }
}
#ios-review .ia-summary { padding: 4px 22px 0; }
#ios-review .ia-sline { font-size: 13px; color: var(--text-mid); margin: 0 0 12px; }
#ios-review .ia-sline b { color: var(--text); font-weight: 800; }
#ios-review .ia-seg { display: inline-flex; gap: 5px; background: var(--surface3); border: 1px solid var(--border); border-radius: 11px; padding: 4px; }
#ios-review .ia-seg button { border: none; background: transparent; border-radius: 8px; padding: 8px 14px; cursor: pointer; font: 700 12.5px/1 Inter, sans-serif; color: var(--text-mid);
    transition: background .18s var(--ios-ease), color .18s var(--ios-ease); }
#ios-review .ia-qa-flag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); vertical-align: 1px; }
#ios-review .ia-qa-flag svg { width: 11px; height: 11px; stroke: currentColor; fill: currentColor; stroke-width: 2; stroke-linejoin: round; }
#ios-review .ia-seg button[hidden] { display: none; }
#ios-review .ia-seg button.ia-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px color-mix(in oklab, var(--text) 10%, transparent); }
#ios-review .ia-body { flex: 1; overflow-y: auto; padding: 16px 22px 18px; display: grid; gap: 14px; }
#ios-review .ia-body::-webkit-scrollbar { width: 0; }
#ios-review .ia-qa { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px 15px 14px; }
#ios-review .ia-qa-top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
#ios-review .ia-qa-num { font: 800 11px/1 Inter, sans-serif; letter-spacing: 0.04em; color: var(--text-dim); }
#ios-review .ia-qa-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
#ios-review .ia-qa-badge svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#ios-review .ia-qa-badge.ia-ok { color: var(--green); background: color-mix(in oklab, var(--green) 13%, transparent); }
#ios-review .ia-qa-badge.ia-no { color: var(--miss); background: color-mix(in oklab, var(--miss) 12%, transparent); }
#ios-review .ia-qa-q { font: 650 14.5px/1.4 Inter, sans-serif; color: var(--text); margin: 0 0 11px; }
#ios-review .ia-qa-opts { display: grid; gap: 7px; }
#ios-review .ia-qa-opt { display: flex; align-items: center; gap: 9px; font: 500 13px/1.3 Inter, sans-serif; color: var(--text-mid);
    border: 1.5px solid var(--border); border-radius: 11px; padding: 10px 12px; }
#ios-review .ia-qa-opt .ia-mk { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; }
#ios-review .ia-qa-opt .ia-mk svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
#ios-review .ia-qa-opt.ia-correct { border-color: var(--green); background: color-mix(in oklab, var(--green) 10%, var(--surface)); color: var(--text); }
#ios-review .ia-qa-opt.ia-correct .ia-mk { background: var(--green); color: var(--on-accent); }
#ios-review .ia-qa-opt.ia-yours-wrong { border-color: var(--miss); background: color-mix(in oklab, var(--miss) 9%, var(--surface)); color: var(--text); }
#ios-review .ia-qa-opt.ia-yours-wrong .ia-mk { background: var(--miss); color: #fff; }
#ios-review .ia-qa-opt .ia-tag { margin-left: auto; font: 700 9.5px/1 Inter, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
#ios-review .ia-qa-ex { margin-top: 11px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); padding-left: 12px; border-left: 2px solid color-mix(in oklab, var(--accent) 40%, var(--border)); }
#ios-review .ia-qa-ex b { color: var(--text-mid); }
#ios-review .ia-empty { text-align: center; color: var(--text-dim); font-size: 13.5px; padding: 30px 10px; }
#ios-review .ia-empty b { display: block; color: var(--text); font: 600 16px/1.3 Fraunces, Georgia, serif; margin-bottom: 5px; }
#ios-review .ia-seg button:focus-visible, #ios-review .ia-back:focus-visible, #ios-review .ia-app-theme:focus-visible, #ios-review .ia-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
#ios-review .ia-app-theme svg { transition: none; }
}
#ios-review .ia-footer { flex: 0 0 auto; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
#ios-review .ia-cta { width: 100%; border: none; border-radius: 13px; padding: 15px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 800 15.5px/1 Inter, sans-serif; letter-spacing: -0.005em;
    box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease), filter .2s; }
#ios-review .ia-cta:active { transform: scale(0.985); }
@media (hover:hover) and (pointer:fine) {
#ios-review .ia-cta:hover { filter: brightness(1.05); }
}
#ios-review .ia-flag { position: absolute; left: 14px; bottom: 96px; z-index: 7; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, var(--bg)); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); border-radius: 999px; padding: 4px 9px; pointer-events: none; }

#ios-review .ia-hdr { padding-top: 12px !important; }
#ios-review .ia-body { flex: 1 0 auto !important; overflow: visible !important; }
#ios-review .ia-footer { position: sticky !important; bottom: 0 !important; z-index: 30; }
#ios-review .ia-hdr h1 { text-transform: none !important; }
/* Toasts never cover the docked buttons: info/success toasts drop from the top like the E2E
   toast, and milestone toasts that fire together stack instead of overlapping. */
html[data-theme] body .success-toast { position: fixed !important; z-index: 2000 !important; left: 16px !important; right: 16px !important; top: calc(52px + env(safe-area-inset-top)) !important; bottom: auto !important; width: auto !important; max-width: none !important; transform: translateY(-160%) !important; opacity: 0 !important; margin: 0 !important; text-align: left !important; border-radius: 16px !important; padding: 14px 15px !important; font: 600 13px/1.35 Inter, -apple-system, sans-serif !important; background: var(--surface) !important; color: var(--text) !important; border: 1px solid color-mix(in oklab, var(--green) 45%, var(--border)) !important; box-shadow: 0 20px 50px -24px rgba(0,0,0,.5) !important; transition: transform .22s cubic-bezier(0.32,0.72,0,1), opacity .2s var(--ios-ease) !important; }
html[data-theme] body .success-toast.show { transform: translateY(0) !important; opacity: 1 !important; transition: transform .34s cubic-bezier(0.32,0.72,0,1), opacity .25s var(--ios-ease) !important; }
html[data-theme] body .celebration-toast ~ .celebration-toast { top: calc(52px + 84px + env(safe-area-inset-top)) !important; }
html[data-theme] body .celebration-toast ~ .celebration-toast ~ .celebration-toast { top: calc(52px + 168px + env(safe-area-inset-top)) !important; }
@media (prefers-reduced-motion: reduce) { html[data-theme] body .success-toast, html[data-theme] body .success-toast.show { transform: none !important; transition: opacity .18s ease !important; } }
html[data-theme] body #page-quiz .exp-head { min-height: 0 !important; height: auto !important; }
html[data-theme] body #page-quiz #exp-text { padding-top: 0 !important; }
html[data-theme] body #page-quiz .exp-head::before, html[data-theme] body #page-quiz .exp-head::after { display: none !important; }
html[data-theme] body #page-quiz .exp-head { line-height: 1.3 !important; }
/* Generation / setup errors stay visible on the phone Home, as an E2E-style card under the header. */
html[data-theme] body #page-setup:has(#ios-home:not(:empty)) #setup-err:not(.is-hidden) { margin: 0 20px 12px !important; border: 1px solid color-mix(in oklab, var(--miss) 30%, var(--border)) !important; background: color-mix(in oklab, var(--miss) 6%, var(--surface)) !important; color: var(--text) !important; border-radius: 14px !important; padding: 12px 14px !important; font: 500 13px/1.45 Inter, sans-serif !important; }
html[data-theme] body #page-setup.active:has(#ios-home:not(:empty)) { display: flex !important; flex-direction: column; }
html[data-theme] body #page-setup:has(#ios-home:not(:empty)) #setup-err { order: -1; margin-top: max(12px, env(safe-area-inset-top)) !important; }
html[data-theme] body #page-setup:has(#ios-home:not(:empty)) #setup-err:not(.is-hidden) ~ #ios-home .ih-topbar { padding-top: 12px !important; }
/* desktop review items reused inside a phone card (non-MCQ fallback) */
#ios-review .ia-qa.ia-legacy { padding: 0 !important; overflow: hidden; }
#ios-review .ia-qa.ia-legacy .review-item { margin: 0 !important; border: 0 !important; }

/* ═════════════════ CUSTOM QUIZ (cert-ios-custom-quiz.html, c75e41e8) ═════════════════
   Phone screen over the hidden #custom-quiz-section controls (features/ios-custom.js).
   Spec: docs/superpowers/specs/2026-10-20-ios-custom-quiz-design.md. Ported rules below are ic- prefixed. */
/* html.ic-open is set by features/ios-custom.js while the screen is drawn. Never key these on
   an emptiness test inside :has(): WebKit does not re-check it when the host fills after first style. */
html.ic-open[data-theme] body #page-setup > :not(#ios-custom) { display: none !important; }
html.ic-open body:has(#page-setup.active) #app-topbar, html.ic-open body:has(#page-setup.active) .app-topbar { display: none !important; }
/* full-screen sheet in the E2E: no tab bar over the docked Start button */
html.ic-open body:has(#page-setup.active) #lift-tabbar { display: none !important; }
html.ic-open[data-theme] body #page-setup { padding: 0 !important; }
/* the desktop panel is only ever a source of state on phones; the phone screen replaces it */
/* ic-failed: the phone screen could not draw, so the desktop picker stays usable */
html:not(.ic-failed) #custom-quiz-section { display: none !important; }
#ios-custom .ic-topbar { padding-top: 8px !important; }
#ios-custom .ic-body { flex: 1 0 auto; overflow: visible !important; }
#ios-custom .ic-foot { position: sticky; bottom: 0; z-index: 5; }
html[data-theme="light"] #ios-custom .ic-i-sun, html:not([data-theme="light"]) #ios-custom .ic-i-moon { display: none; }
#ios-custom .ic-i-sun, #ios-custom .ic-i-moon { display: grid; place-items: center; }
#ios-custom .ic-err { margin: 18px 2px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in oklab, var(--miss) 30%, var(--border));
  background: color-mix(in oklab, var(--miss) 6%, var(--surface)); color: var(--text); font: 500 13px/1.45 Inter, -apple-system, sans-serif; }
/* the staggered entrance plays once per open, never on the re-render after each tap */
#ios-custom.ic-settled .ic-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
/* Free cap (the app already gates 20 for Free with the Pro prompt): E2E note + dimmed 20 */
#ios-custom .ic-seg button.ic-overcap { opacity: .5; }
#ios-custom .ic-cap-note { margin: 9px 2px 0; font: 600 12px/1.45 Inter, -apple-system, sans-serif; color: var(--text-dim); }
#ios-custom .ic-cap-note b { color: var(--text-mid); }
#ios-custom .ic-err-signin { display: flex; margin-top: 10px; border: 0; border-radius: 10px; padding: 9px 14px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font: 700 13px/1 Inter, -apple-system, sans-serif; }
#ios-custom .ic-err-signin:active { transform: scale(0.97); }
/* collapsed topics are out of the focus order and the accessibility tree */
#ios-custom .ic-dom:not([aria-expanded="true"]) .ic-dom-inner { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  #ios-custom .ic-dom .ic-dom-inner { transition: opacity .26s var(--ios-ease), visibility 0s linear .3s; }
  #ios-custom .ic-dom[aria-expanded="true"] .ic-dom-inner { transition: opacity .26s var(--ios-ease), visibility 0s; }
}
#ios-custom .ic-sheet-grip { width: 38px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--text) 22%, transparent); margin: 9px auto 2px; }
#ios-custom .ic-topbar { display: flex; align-items: flex-start; gap: 12px; padding: 8px 20px 10px; border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ios-custom .ic-tb-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .14s var(--ios-ease), border-color .18s; }
#ios-custom .ic-tb-close:active { transform: scale(0.94); }
@media (hover:hover) and (pointer:fine) {
#ios-custom .ic-tb-close:hover { border-color: color-mix(in oklab, var(--accent) 36%, var(--border)); }
}
#ios-custom .ic-tb-close svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#ios-custom .ic-tb-title { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
#ios-custom .ic-tb-title h1 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; margin: 0; color: var(--text); }
#ios-custom .ic-tb-title span { display: block; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 3px; }
#ios-custom .ic-app-theme { flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text-mid); transition:transform .14s var(--ios-ease), border-color .18s; }
#ios-custom .ic-app-theme:active { transform:scale(.94); }
@media (hover:hover) and (pointer:fine) {
#ios-custom .ic-app-theme:hover { border-color:color-mix(in oklab,var(--accent) 36%,var(--border)); }
}
#ios-custom .ic-app-theme svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#ios-custom .ic-body { flex: 1; overflow-y: auto; padding: 6px 20px 18px; }
#ios-custom .ic-body::-webkit-scrollbar { width: 0; }
#ios-custom .ic-cert-strip { display: flex; align-items: center; gap: 10px; margin: 12px 2px 4px; }
#ios-custom .ic-cert-strip .ic-cm { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in oklab, var(--accent) 13%, var(--surface3)); color: var(--accent-deep); display: grid; place-items: center; font: 800 11px/1 Inter, sans-serif; }
#ios-custom .ic-cert-strip .ic-cn b { display: block; font: 650 13.5px/1.05 Inter, sans-serif; color: var(--text); }
#ios-custom .ic-cert-strip .ic-cn span { display: block; font: 600 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 2px; }
#ios-custom .ic-sect { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 22px 2px 4px; }
#ios-custom .ic-sect-sub { font: 500 11.5px/1.4 Inter, sans-serif; color: var(--text-dim); margin: 0 2px 11px; }
#ios-custom .ic-chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
#ios-custom .ic-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 8px 13px; cursor: pointer; color: var(--text-mid);
    font: 650 12px/1 Inter, sans-serif; display: inline-flex; align-items: center; gap: 6px; transition: border-color .18s, background .18s, color .18s, transform .12s var(--ios-ease); }
#ios-custom .ic-chip:active { transform: scale(0.96); }
@media (hover:hover) and (pointer:fine) {
#ios-custom .ic-chip:hover { border-color: color-mix(in oklab, var(--accent) 38%, var(--border)); }
}
#ios-custom .ic-chip .ic-dn { font: 700 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-custom .ic-chip[aria-pressed="true"] { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--text); }
#ios-custom .ic-chip[aria-pressed="true"] .ic-dn { color: var(--accent-deep); }
#ios-custom .ic-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 4px; }
#ios-custom .ic-mode { text-align: left; border: 1.5px solid var(--border); background: var(--surface); border-radius: 15px; padding: 13px 13px 12px; cursor: pointer; transition: border-color .18s, background .18s, transform .12s var(--ios-ease); }
#ios-custom .ic-mode:active { transform: scale(0.985); }
@media (hover:hover) and (pointer:fine) {
#ios-custom .ic-mode:hover { border-color: color-mix(in oklab, var(--accent) 36%, var(--border)); }
}
#ios-custom .ic-mode .ic-mi { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 10%, var(--surface3)); display: grid; place-items: center; margin-bottom: 10px; }
#ios-custom .ic-mode .ic-mi svg { width: 18px; height: 18px; stroke: var(--accent-deep); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-custom .ic-mode b { display: flex; align-items: center; gap: 6px; font: 650 14px/1.1 Inter, sans-serif; color: var(--text); }
#ios-custom .ic-mode span { display: block; font: 500 11.5px/1.35 Inter, sans-serif; color: var(--text-dim); margin-top: 4px; }
#ios-custom .ic-mode .ic-tick { margin-left: auto; width: 17px; height: 17px; opacity: 0; transition: opacity .18s var(--ios-ease); color: var(--accent-deep); }
#ios-custom .ic-mode .ic-tick svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#ios-custom .ic-mode[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
#ios-custom .ic-mode[aria-pressed="true"] .ic-tick { opacity: 1; }
#ios-custom .ic-mode-wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
#ios-custom .ic-mode-wide .ic-mi { margin-bottom: 0; }
#ios-custom .ic-mode-wide .ic-mw-txt { min-width: 0; }
#ios-custom .ic-mode-wide .ic-mw-txt span { margin-top: 3px; }
#ios-custom .ic-mode-wide .ic-mw-live { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 7px; margin-top: 11px; padding-top: 10px;
    border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); font: 500 11.5px/1.35 Inter, sans-serif; color: var(--text-mid); }
#ios-custom .ic-mode-wide .ic-mw-live b { display: inline; font: 650 13px/1 'Roboto Mono', monospace; color: var(--accent-deep); }
#ios-custom .ic-dom-head .ic-dh-txt small .ic-picked { color: var(--accent-deep); font-weight: 650; }
#ios-custom .ic-dom { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 9px; overflow: hidden; }
#ios-custom .ic-dom-head { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; padding: 13px 14px; transition: background .18s, transform .12s var(--ios-ease); }
#ios-custom .ic-dom-head:active { transform: scale(0.995); }
@media (hover:hover) and (pointer:fine) {
#ios-custom .ic-dom-head:hover { background: color-mix(in oklab, var(--text) 4%, transparent); }
}
#ios-custom .ic-dom-head .ic-dh-txt { flex: 1 1 auto; min-width: 0; }
#ios-custom .ic-dom-head .ic-dh-txt b { display: block; font: 650 13.5px/1.2 Inter, sans-serif; color: var(--text); }
#ios-custom .ic-dom-head .ic-dh-txt small { display: block; font: 500 11px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 3px; }
#ios-custom .ic-dom-head .ic-pill { flex: 0 0 auto; font: 600 10px/1 'Roboto Mono', monospace; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 10%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border)); border-radius: 999px; padding: 5px 8px; }
#ios-custom .ic-dom-head .ic-caret { flex: 0 0 auto; color: var(--text-dim); display: grid; place-items: center; transition: transform .26s var(--ios-ease); }
#ios-custom .ic-dom-head .ic-caret svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ios-custom .ic-dom[aria-expanded="true"] .ic-dom-head .ic-caret { transform: rotate(180deg); }
#ios-custom .ic-dom-panel { display: grid; grid-template-rows: 0fr; }
#ios-custom .ic-dom-panel > div { overflow: hidden; min-height: 0; }
#ios-custom .ic-dom[aria-expanded="true"] .ic-dom-panel { grid-template-rows: 1fr; }
#ios-custom .ic-dom-inner { padding: 0 14px 14px; display: flex; flex-wrap: wrap; gap: 7px; }
#ios-custom .ic-tchip { border: 1px solid var(--border); background: var(--surface3); border-radius: 999px; padding: 7px 11px; cursor: pointer; color: var(--text-mid);
    font: 600 11.5px/1 Inter, sans-serif; transition: border-color .18s, background .18s, color .18s, transform .12s var(--ios-ease); }
#ios-custom .ic-tchip:active { transform: scale(0.95); }
@media (hover:hover) and (pointer:fine) {
#ios-custom .ic-tchip:hover { border-color: color-mix(in oklab, var(--accent) 36%, var(--border)); }
}
#ios-custom .ic-tchip[aria-pressed="true"] { border-color: color-mix(in oklab, var(--accent) 52%, var(--border)); background: color-mix(in oklab, var(--accent) 13%, var(--surface)); color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
#ios-custom .ic-dom-panel { transition: grid-template-rows .3s var(--ios-ease); }
#ios-custom .ic-dom-inner { transition: opacity .26s var(--ios-ease); opacity: 0; }
#ios-custom .ic-dom[aria-expanded="true"] .ic-dom-inner { opacity: 1; }
}
#ios-custom .ic-seg { display: flex; gap: 5px; background: color-mix(in oklab, var(--text) 5%, var(--surface3)); border: 1px solid var(--border); border-radius: 13px; padding: 4px; margin-top: 4px; }
#ios-custom .ic-seg button { flex: 1 1 0; border: none; background: transparent; cursor: pointer; border-radius: 9px; padding: 9px 4px; font: 700 13px/1 Inter, sans-serif; color: var(--text-dim); transition: background .2s var(--ios-ease), color .2s, transform .14s var(--ios-ease); }
#ios-custom .ic-seg button:active { transform: scale(0.96); }
#ios-custom .ic-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--accent) 70%, transparent); }
@media (hover:hover) and (pointer:fine) {
#ios-custom .ic-seg button:not([aria-pressed="true"]):hover { color: var(--text-mid); }
}
#ios-custom .ic-diff-seg button { flex: 1 1 auto; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
#ios-custom .ic-count-echo { display: flex; align-items: baseline; gap: 9px; margin: 6px 2px 2px; }
#ios-custom .ic-count-echo .ic-bn { font: 600 44px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; transition: transform .2s var(--ios-ease), opacity .2s var(--ios-ease); }
#ios-custom .ic-count-echo .ic-bl { font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
@media (prefers-reduced-motion: no-preference) {
#ios-custom .ic-count-echo .ic-bn.ic-bump { animation: ic-bump .26s var(--ios-ease); }
@keyframes ic-bump { 0% { transform: scale(0.9); opacity: .5; } 100% { transform: none; opacity: 1; } }
}
#ios-custom .ic-foot { flex: 0 0 auto; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--bg) 86%, var(--surface)); }
#ios-custom .ic-btn-primary { width: 100%; border: none; border-radius: 14px; padding: 15px; cursor: pointer; background: var(--accent); color: var(--on-accent);
    font: 700 15px/1 Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 14px 26px -14px color-mix(in oklab, var(--accent) 72%, transparent); transition: transform .15s var(--ios-ease), filter .2s; }
#ios-custom .ic-btn-primary:active { transform: scale(0.985); }
@media (hover:hover) and (pointer:fine) {
#ios-custom .ic-btn-primary:hover { filter: brightness(1.05); }
}
#ios-custom .ic-btn-primary svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ios-custom .ic-btn-primary .ic-qc { font: 700 12px/1 'Roboto Mono', monospace; opacity: 0.82; }
#ios-custom .ic-foot-note { text-align: center; font: 500 10.5px/1.3 Inter, sans-serif; color: var(--text-dim); margin: 9px 0 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
#ios-custom .ic-reveal { animation: ic-rise .5s var(--ios-ease) backwards; }
#ios-custom .ic-reveal:nth-child(1) {animation-delay:.04s}
#ios-custom .ic-reveal:nth-child(2) {animation-delay:.08s}
#ios-custom .ic-reveal:nth-child(3) {animation-delay:.12s}
#ios-custom .ic-reveal:nth-child(4) {animation-delay:.16s}
#ios-custom .ic-reveal:nth-child(5) {animation-delay:.20s}
#ios-custom .ic-reveal:nth-child(6) {animation-delay:.24s}
#ios-custom .ic-reveal:nth-child(7) {animation-delay:.28s}
#ios-custom .ic-reveal:nth-child(8) {animation-delay:.32s}
#ios-custom .ic-reveal:nth-child(9) {animation-delay:.36s}
#ios-custom .ic-reveal:nth-child(10) {animation-delay:.40s}
#ios-custom .ic-reveal:nth-child(11) {animation-delay:.44s}
#ios-custom .ic-reveal:nth-child(12) {animation-delay:.48s}
#ios-custom .ic-reveal:nth-child(n+13) {animation-delay:.52s}
@keyframes ic-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
}


/* ═════════════════════ LIFT B1 · SCAFFOLD (Progress, Analytics) ═════════════════════ */
/* The phone screens replace their whole page once rendered: desktop siblings (incl. the
   lift-shell .lift-seg switch, which the E2E draws inside the screen) and the top bar hide. */
#page-progress:has(#ios-progress:not(:empty)) > :not(#ios-progress) { display: none !important; }
#page-analytics:has(#ios-analytics:not(:empty)) > :not(#ios-analytics) { display: none !important; }
body:has(#page-progress.active #ios-progress:not(:empty)) #app-topbar, body:has(#page-progress.active #ios-progress:not(:empty)) .app-topbar,
body:has(#page-analytics.active #ios-analytics:not(:empty)) #app-topbar, body:has(#page-analytics.active #ios-analytics:not(:empty)) .app-topbar { display: none !important; }
#page-progress:has(#ios-progress:not(:empty)), #page-analytics:has(#ios-analytics:not(:empty)) { padding: 0 !important; }

/* ═════════════════════ PROGRESS (cert-ios-progress.html, B1) · ip- ═════════════════════ */
/* Screen: one viewport, pages scroll on their own (E2E). position:fixed sizes right under html{zoom}. */
#page-progress.active #ios-progress:not(:empty) { position: fixed; inset: 0; z-index: 5; min-height: 0; overflow: hidden; overflow: clip; }
/* a page-enter animation in effect (pageFadeIn fills forwards) makes the page, not the viewport, the fixed box;
   the E2E swaps tabs instantly, so the phone screen drops it */
#page-progress.active:has(#ios-progress:not(:empty)) { animation: none !important; transform: none !important; }
#ios-progress .ip-topbar { padding-top: max(12px, env(safe-area-inset-top)) !important; }
#ios-progress .ip-pager { min-height: 0; }
#ios-progress .ip-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
/* rows, list rows, tags and recent cards are buttons here (tap drills the topic) */
#ios-progress :where(button.ip-trow, button.ip-lrow, button.ip-tag, button.ip-rcard) { font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#ios-progress :where(button.ip-trow, button.ip-lrow) { width: 100%; background: none; border: 0; border-radius: 0; }
#ios-progress button.ip-trow:active, #ios-progress button.ip-lrow:active, #ios-progress button.ip-tag:active, #ios-progress button.ip-rcard:active { transform: scale(0.98); }
#ios-progress .ip-rpct.ip-miss-t { color: var(--miss); }
#ios-progress .ip-none { margin: 10px 0 4px; font-size: 13px; color: var(--text-dim); }
/* filter/sort re-renders keep their place: no entrance replay */
#ios-progress.ip-static .ip-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
#ios-progress .ip-topbar { display: flex; align-items: center; gap: 11px; padding: 12px 20px 8px; }
#ios-progress .ip-tb-mark { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 13%, var(--surface3)); color: var(--accent-deep); display: grid; place-items: center; font: 800 12px/1 Inter, sans-serif; }
#ios-progress .ip-tb-name { flex: 1 1 auto; min-width: 0; }
#ios-progress .ip-tb-name b { display: block; font: 650 16px/1.05 Inter, sans-serif; color: var(--text); }
#ios-progress .ip-tb-name span { display: block; font: 600 11px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 2px; }
#ios-progress .ip-tb-set { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .14s var(--ios-ease), border-color .18s; }
#ios-progress .ip-tb-set:active { transform: scale(0.94); }
#ios-progress .ip-tb-set svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-progress .ip-app-theme { flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text-mid); transition:transform .14s var(--ios-ease), border-color .18s; }
#ios-progress .ip-app-theme:active { transform:scale(.94); }
@media (hover:hover) and (pointer:fine) {
#ios-progress .ip-app-theme:hover { border-color:color-mix(in oklab,var(--accent) 36%,var(--border)); }
}
#ios-progress .ip-app-theme svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#ios-progress .ip-view-switch { flex: 0 0 auto; display: flex; gap: 4px; margin: 2px 18px 4px; padding: 3px; border-radius: 12px; border: 1px solid var(--border);
    background: color-mix(in oklab, var(--text) 5%, var(--surface3)); }
#ios-progress .ip-view-switch button { flex: 1 1 0; border: 0; background: transparent; border-radius: 9px; padding: 8px 6px; cursor: pointer;
    font: 700 12.5px/1 Inter, sans-serif; color: var(--text-dim); transition: background .2s var(--ios-ease), color .2s, transform .14s var(--ios-ease); }
#ios-progress .ip-view-switch button:active { transform: scale(0.97); }
#ios-progress .ip-view-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent), 0 4px 10px -6px rgba(0,0,0,.45); }
@media (hover:hover) and (pointer:fine) {
#ios-progress .ip-view-switch button:not([aria-pressed="true"]):hover { color: var(--text-mid); }
}
#ios-progress .ip-seg { flex:0 0 auto; display:flex; gap:8px; overflow-x:auto; padding:8px 16px 10px; scrollbar-width:none; }
#ios-progress .ip-seg::-webkit-scrollbar { display:none; }
#ios-progress .ip-chip { flex:0 0 auto; font:700 12px/1 Inter,sans-serif; padding:8px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text-mid); cursor:pointer; white-space:nowrap; transition:background .2s, color .2s, border-color .2s, transform .14s var(--ios-ease); }
#ios-progress .ip-chip:active { transform:scale(.96); }
#ios-progress .ip-chip.ip-on { background:color-mix(in oklab,var(--accent) 12%,var(--surface)); border-color:color-mix(in oklab,var(--accent) 45%,var(--border)); color:var(--accent-deep); }
#ios-progress .ip-pager { flex:1 1 auto; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#ios-progress .ip-pager::-webkit-scrollbar { display:none; }
#ios-progress .ip-page { flex:0 0 100%; scroll-snap-align:start; overflow-y:auto; padding:6px 18px 16px; }
#ios-progress .ip-page::-webkit-scrollbar { display:none; }
#ios-progress .ip-sect { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 20px 2px 11px; }
#ios-progress .ip-sect:first-child { margin-top: 4px; }
#ios-progress .ip-bar { height: 8px; border-radius: 999px; background: var(--track); position: relative; overflow: hidden; }
#ios-progress .ip-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); transition: width .8s var(--ios-ease), background .4s ease; }
#ios-progress .ip-bar > span.ip-pass { background: var(--green); }
#ios-progress .ip-bar > span.ip-miss { background: var(--miss); }
#ios-progress .ip-hero { position: relative; overflow: hidden; border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); border-radius: 18px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)); padding: 16px 17px; margin-top: 4px; }
#ios-progress .ip-hero-kick { display: inline-flex; align-items: center; gap: 6px; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
#ios-progress .ip-hero-kick svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ios-progress .ip-hero-topic { font: 600 21px/1.12 Fraunces, serif; color: var(--text); margin: 10px 0 3px; letter-spacing: -0.01em; }
#ios-progress .ip-hero-obj { font: 600 11px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-progress .ip-hero-line { font-size: 12.5px; line-height: 1.45; color: var(--text-mid); margin: 11px 0 13px; }
#ios-progress .ip-hero-line b { color: var(--text); font-weight: 650; }
#ios-progress .ip-hero-foot { display: flex; align-items: center; gap: 12px; }
#ios-progress .ip-hero-mast { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; }
#ios-progress .ip-hero-mast b { font: 600 22px/1 Fraunces, serif; color: var(--miss); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-progress .ip-hero-mast span { font: 700 8.5px/1 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
#ios-progress .ip-hero-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; cursor: pointer;
    border-radius: 13px; background: var(--accent); color: var(--on-accent); font: 700 14px/1 Inter, sans-serif; padding: 13px 16px;
    box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 72%, transparent); transition: transform .15s var(--ios-ease), filter .2s; }
#ios-progress .ip-hero-btn:active { transform: scale(0.985); }
@media (hover:hover) and (pointer:fine) {
#ios-progress .ip-hero-btn:hover { filter: brightness(1.04); }
}
#ios-progress .ip-hero-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#ios-progress .ip-stand { border: 1px solid var(--border); border-radius: 17px; background: var(--surface); padding: 15px 16px; margin-top: 12px; }
#ios-progress .ip-stand-top { display: flex; align-items: center; gap: 15px; }
#ios-progress .ip-ring { flex: 0 0 auto; position: relative; width: 64px; height: 64px; }
#ios-progress .ip-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
#ios-progress .ip-ring .ip-track { stroke: var(--track); }
#ios-progress .ip-ring .ip-fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ios-ease); }
#ios-progress .ip-stand-counts { display: flex; gap: 8px; margin-top: 15px; }
#ios-progress .ip-count { flex: 1 1 0; border-radius: 12px; padding: 10px 11px; border: 1px solid var(--border); background: var(--surface3); }
#ios-progress .ip-count b { font: 600 18px/1 Fraunces, serif; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-progress .ip-count span { display: block; font: 700 9px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-top: 5px; }
#ios-progress .ip-count.ip-weak b { color: var(--miss); }
#ios-progress .ip-count.ip-strong b { color: var(--green); }
#ios-progress .ip-count.ip-untouched b { color: var(--text-mid); }

#ios-progress .ip-domain { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); margin-bottom: 11px; overflow: hidden; }
#ios-progress .ip-dhead { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 14px 15px; transition: background .18s; }
@media (hover:hover) and (pointer:fine) {
#ios-progress .ip-dhead:hover { background: color-mix(in oklab, var(--accent) 4%, transparent); }
}
#ios-progress .ip-dhead-main { flex: 1 1 auto; min-width: 0; }
#ios-progress .ip-dhead-row { display: flex; align-items: baseline; gap: 8px; }
#ios-progress .ip-dhead-row b { font: 650 15px/1.15 Inter, sans-serif; color: var(--text); }
#ios-progress .ip-dhead-row .ip-exam { flex: 0 0 auto; font: 600 10px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-left: auto; white-space: nowrap; }
#ios-progress .ip-dhead-bar { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
#ios-progress .ip-dhead-bar .ip-bar { flex: 1 1 auto; }
#ios-progress .ip-dhead-pct { flex: 0 0 auto; font: 600 11px/1 'Roboto Mono', monospace; color: var(--text-dim); min-width: 34px; text-align: right; }
#ios-progress .ip-dhead-count { font: 600 10.5px/1 Inter, sans-serif; color: var(--text-dim); margin-top: 7px; }
#ios-progress .ip-dchev { flex: 0 0 auto; color: var(--text-dim); transition: transform .25s var(--ios-ease); }
#ios-progress .ip-dchev svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ios-progress .ip-domain.ip-open .ip-dchev { transform: rotate(180deg); }
#ios-progress .ip-dbody { display: none; padding: 0 15px 6px; }
#ios-progress .ip-domain.ip-open .ip-dbody { display: block; }
#ios-progress .ip-trow { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ios-progress .ip-trow .ip-tdot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 999px; background: var(--track); }
#ios-progress .ip-trow.ip-strong .ip-tdot { background: var(--green); }
#ios-progress .ip-trow.ip-partial .ip-tdot { background: var(--accent); }
#ios-progress .ip-trow.ip-weak .ip-tdot { background: var(--miss); }
#ios-progress .ip-trow.ip-untouched .ip-tdot { background: var(--text-dim); opacity: 0.4; }
#ios-progress .ip-trow .ip-tnm { flex: 1 1 auto; min-width: 0; font: 600 13.5px/1.25 Inter, sans-serif; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ios-progress .ip-trow.ip-untouched .ip-tnm { color: var(--text-mid); }
#ios-progress .ip-trow .ip-tbar { flex: 0 0 58px; }
#ios-progress .ip-trow .ip-tval { flex: 0 0 auto; font: 600 11px/1 'Roboto Mono', monospace; color: var(--text-dim); min-width: 30px; text-align: right; }
#ios-progress .ip-trow.ip-strong .ip-tval { color: var(--green); }
#ios-progress .ip-trow.ip-partial .ip-tval { color: var(--accent-deep); }
#ios-progress .ip-trow.ip-weak .ip-tval { color: var(--miss); }
#ios-progress .ip-disclose { width: 100%; border: none; background: none; cursor: pointer; text-align: left; padding: 11px 0 4px; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    font: 700 11.5px/1 Inter, sans-serif; color: var(--accent-deep); display: flex; align-items: center; gap: 7px; transition: transform .14s var(--ios-ease); }
#ios-progress .ip-disclose:active { transform: scale(0.985); }
#ios-progress .ip-disclose svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ios-ease); }
#ios-progress .ip-disclose.ip-open svg { transform: rotate(180deg); }
#ios-progress .ip-untouched-list { display: none; padding-bottom: 4px; }
#ios-progress .ip-untouched-list.ip-open { display: block; }
#ios-progress .ip-listcard { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 6px 15px; }
#ios-progress .ip-lrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ios-progress .ip-lrow:first-child { border-top: none; }
#ios-progress .ip-lrow .ip-tdot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 999px; background: var(--track); }
#ios-progress .ip-lrow.ip-strong .ip-tdot { background: var(--green); }
#ios-progress .ip-lrow.ip-partial .ip-tdot { background: var(--accent); }
#ios-progress .ip-lrow.ip-weak .ip-tdot { background: var(--miss); }
#ios-progress .ip-lrow .ip-lt { flex: 1 1 auto; min-width: 0; }
#ios-progress .ip-lrow .ip-lt b { display: block; font: 600 14px/1.15 Inter, sans-serif; color: var(--text); }
#ios-progress .ip-lrow .ip-lt span { display: block; font: 500 11px/1.2 Inter, sans-serif; color: var(--text-dim); margin-top: 2px; }
#ios-progress .ip-lrow .ip-lpct { flex: 0 0 auto; font: 600 12px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-progress .ip-lrow.ip-strong .ip-lpct { color: var(--green); }
#ios-progress .ip-lrow.ip-weak .ip-lpct { color: var(--miss); }
#ios-progress .ip-lrow .ip-lchip { flex: 0 0 auto; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); background: color-mix(in oklab, var(--green) 13%, transparent); border: 1px solid color-mix(in oklab, var(--green) 32%, transparent); border-radius: 999px; padding: 5px 8px; }
#ios-progress .ip-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
#ios-progress .ip-tag { font: 600 11px/1 Inter, sans-serif; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 10px; }
#ios-progress .ip-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 18px 6px; margin: 0 -18px; scroll-snap-type: x mandatory; }
#ios-progress .ip-strip::-webkit-scrollbar { height: 0; }
#ios-progress .ip-rcard { flex: 0 0 auto; width: 138px; scroll-snap-align: start; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 12px 13px; }
#ios-progress .ip-rcard b { display: block; font: 650 13px/1.2 Inter, sans-serif; color: var(--text); min-height: 32px; }
#ios-progress .ip-rcard .ip-rbar { margin: 10px 0 7px; }
#ios-progress .ip-rcard .ip-rmeta { display: flex; align-items: center; justify-content: space-between; }
#ios-progress .ip-rcard .ip-rpct { font: 600 11px/1 'Roboto Mono', monospace; color: var(--accent-deep); }
#ios-progress .ip-rcard .ip-rago { font: 500 10px/1 Inter, sans-serif; color: var(--text-dim); }
@media (prefers-reduced-motion: no-preference) {
#ios-progress .ip-reveal { animation: ip-rise .5s var(--ios-ease) backwards; }
#ios-progress .ip-reveal:nth-child(1) {animation-delay:.04s}
#ios-progress .ip-reveal:nth-child(2) {animation-delay:.09s}
#ios-progress .ip-reveal:nth-child(3) {animation-delay:.14s}
#ios-progress .ip-reveal:nth-child(4) {animation-delay:.19s}
#ios-progress .ip-reveal:nth-child(5) {animation-delay:.24s}
#ios-progress .ip-reveal:nth-child(6) {animation-delay:.29s}
#ios-progress .ip-reveal:nth-child(7) {animation-delay:.34s}
#ios-progress .ip-reveal:nth-child(8) {animation-delay:.39s}
#ios-progress .ip-reveal:nth-child(9) {animation-delay:.44s}
#ios-progress .ip-reveal:nth-child(10) {animation-delay:.49s}
#ios-progress .ip-reveal:nth-child(11) {animation-delay:.54s}
#ios-progress .ip-reveal:nth-child(12) {animation-delay:.59s}
@keyframes ip-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
}
#ios-progress .ip-stand-top { display: grid; grid-template-columns: auto 1fr 1fr; align-items: end; gap: 18px; }
#ios-progress .ip-st-cell { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#ios-progress .ip-st-ring { align-items: flex-start; }
#ios-progress .ip-stand-top .ip-ring { width: 72px; height: 72px; }
#ios-progress .ip-stand-top .ip-ring svg { width: 72px; height: 72px; }
#ios-progress .ip-ring-n { position: absolute; inset: 0; display: grid; place-items: center; font: 600 19px/1 Fraunces, serif; color: var(--text);
    font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-progress .ip-st-v { display: block; font: 600 24px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-progress .ip-st-v small { font: 600 13px/1 Inter, sans-serif; color: var(--text-dim); }
#ios-progress .ip-st-l { display: block; font: 600 10.5px/1.3 Inter, sans-serif; color: var(--text-dim); }
#ios-progress .ip-toolbar { display: flex; align-items: center; gap: 12px; margin-top: 18px; border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, transparent); }
#ios-progress .ip-ftabs { position: relative; display: flex; gap: 17px; flex: 1 1 auto; min-width: 0; }
#ios-progress .ip-ftab { border: 0; background: none; padding: 11px 0 12px; cursor: pointer; white-space: nowrap; font: 650 12.5px/1 Inter, sans-serif; color: var(--text-dim);
    transition: color .15s var(--ios-ease); }
#ios-progress .ip-ftab[aria-pressed="true"] { color: var(--text); }
@media (hover:hover) and (pointer:fine) {
#ios-progress .ip-ftab:not([aria-pressed="true"]):hover { color: var(--text-mid); }
}
#ios-progress .ip-ftab-ink { position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--accent); transform-origin: 0 50%; pointer-events: none; }
#ios-progress .ip-fsort { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 11px 0 12px; cursor: pointer;
    font: 650 12px/1 Inter, sans-serif; color: var(--text-mid); }
#ios-progress .ip-fsort svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ios-progress .ip-fsort:active { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
#ios-progress .ip-ftab-ink.ip-ready { transition: transform .22s var(--ios-ease); }
#ios-progress .ip-fsort { transition: opacity .15s var(--ios-ease); }
}


/* ═════════════════════ ANALYTICS (cert-ios-analytics.html b31c7df6, B1) · in- ═════════════════════ */
/* Same one-viewport screen as Progress (see there for why the page animation is dropped). */
#page-analytics.active #ios-analytics:not(:empty) { position: fixed; inset: 0; z-index: 5; min-height: 0; overflow: hidden; overflow: clip; }
#page-analytics.active:has(#ios-analytics:not(:empty)) { animation: none !important; transform: none !important; }
#ios-analytics .in-topbar { padding-top: max(12px, env(safe-area-inset-top)) !important; }
#ios-analytics .in-pager { min-height: 0; }
#ios-analytics .in-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
#ios-analytics .in-map-sheet { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
#ios-analytics .in-tv-u { font: 600 14px/1 "Roboto Mono", monospace; color: var(--text-dim); }
/* states the E2E does not draw (on the founder deviation list): no history, and real exam rows */
#ios-analytics .in-empty-card { margin: 18px 18px 0; padding: 26px 20px 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); text-align: center; }
#ios-analytics .in-empty-card .in-ei { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 12%, var(--surface3)); color: var(--accent-deep); }
#ios-analytics .in-empty-card .in-ei svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#ios-analytics .in-empty-card h2 { margin: 0 0 6px; font: 600 21px/1.2 Fraunces, Georgia, serif; color: var(--text); }
#ios-analytics .in-empty-card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--text-mid); }
#ios-analytics .in-empty-card .in-ms-go { width: 100%; }
#ios-analytics .in-empty-foot { display: block; margin-top: 10px; font: 600 11px/1 "Roboto Mono", monospace; color: var(--text-dim); }
#ios-analytics .in-exrow { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ios-analytics .in-exrow:first-of-type { border-top: 0; }
#ios-analytics .in-exrow b { font: 600 20px/1 Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
#ios-analytics .in-exrow span { font-size: 12px; color: var(--text-dim); }
#ios-analytics .in-topbar { display: flex; align-items: center; gap: 11px; padding: 12px 20px 8px; }
#ios-analytics .in-tb-mark { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 13%, var(--surface3)); color: var(--accent-deep); display: grid; place-items: center; font: 800 12px/1 Inter, sans-serif; }
#ios-analytics .in-tb-name { flex: 1 1 auto; min-width: 0; }
#ios-analytics .in-tb-name b { display: block; font: 650 16px/1.05 Inter, sans-serif; color: var(--text); }
#ios-analytics .in-tb-name span { display: block; font: 600 11px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 2px; }
#ios-analytics .in-tb-set { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .14s var(--ios-ease), border-color .18s; }
#ios-analytics .in-tb-set:active { transform: scale(0.94); }
#ios-analytics .in-tb-set svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-analytics .in-app-theme { flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text-mid); transition:transform .14s var(--ios-ease), border-color .18s; }
#ios-analytics .in-app-theme:active { transform:scale(.94); }
@media (hover:hover) and (pointer:fine) {
#ios-analytics .in-app-theme:hover { border-color:color-mix(in oklab,var(--accent) 36%,var(--border)); }
}
#ios-analytics .in-app-theme svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#ios-analytics .in-view-switch { flex: 0 0 auto; display: flex; gap: 4px; margin: 2px 18px 4px; padding: 3px; border-radius: 12px; border: 1px solid var(--border);
    background: color-mix(in oklab, var(--text) 5%, var(--surface3)); }
#ios-analytics .in-view-switch button { flex: 1 1 0; border: 0; background: transparent; border-radius: 9px; padding: 8px 6px; cursor: pointer;
    font: 700 12.5px/1 Inter, sans-serif; color: var(--text-dim); transition: background .2s var(--ios-ease), color .2s, transform .14s var(--ios-ease); }
#ios-analytics .in-view-switch button:active { transform: scale(0.97); }
#ios-analytics .in-view-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent), 0 4px 10px -6px rgba(0,0,0,.45); }
@media (hover:hover) and (pointer:fine) {
#ios-analytics .in-view-switch button:not([aria-pressed="true"]):hover { color: var(--text-mid); }
}
#ios-analytics .in-seg { flex:0 0 auto; display:flex; gap:8px; overflow-x:auto; padding:8px 16px 10px; scrollbar-width:none; }
#ios-analytics .in-seg::-webkit-scrollbar { display:none; }
#ios-analytics .in-chip { flex:0 0 auto; font:700 12px/1 Inter,sans-serif; padding:8px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text-mid); cursor:pointer; white-space:nowrap; transition:background .2s, color .2s, border-color .2s, transform .14s var(--ios-ease); }
#ios-analytics .in-chip:active { transform:scale(.96); }
#ios-analytics .in-chip.in-on { background:color-mix(in oklab,var(--accent) 12%,var(--surface)); border-color:color-mix(in oklab,var(--accent) 45%,var(--border)); color:var(--accent-deep); }
#ios-analytics .in-pager { flex:1 1 auto; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#ios-analytics .in-pager::-webkit-scrollbar { display:none; }
#ios-analytics .in-page { flex:0 0 100%; scroll-snap-align:start; overflow-y:auto; padding:6px 18px 16px; }
#ios-analytics .in-page::-webkit-scrollbar { display:none; }
#ios-analytics .in-dlabel { font: 700 9.5px/1 'Roboto Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
#ios-analytics .in-pct { font-family: 'Roboto Mono', monospace; font-variant-numeric: lining-nums tabular-nums; }
#ios-analytics .in-bar { height: 8px; border-radius: 999px; background: var(--track); position: relative; overflow: hidden; margin-bottom: 6px; }
#ios-analytics .in-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); transition: width .9s var(--ios-ease), background .4s ease; }
#ios-analytics .in-bar .in-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: color-mix(in oklab, var(--text) 45%, var(--track)); }
#ios-analytics .in-card { border: 1px solid var(--border); border-radius: 17px; background: var(--surface); padding: 15px 16px; margin-bottom: 12px; }
#ios-analytics .in-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#ios-analytics .in-card-kick { font: 700 9.5px/1 'Roboto Mono', monospace; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 6px; }
#ios-analytics .in-card-title { font: 600 17px/1.15 Fraunces, serif; color: var(--text); margin: 0; letter-spacing: -0.01em; }
#ios-analytics .in-card-sub { font-size: 12px; line-height: 1.5; color: var(--text-mid); margin: 6px 0 0; }
#ios-analytics .in-card-meta { font: 600 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); white-space: nowrap; }
#ios-analytics .in-sect { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 20px 2px 11px; }
#ios-analytics .in-rd { position: relative; overflow: hidden; border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); border-radius: 18px; background: color-mix(in oklab, var(--accent) 5%, var(--surface)); padding: 16px 17px; margin-bottom: 12px; }
#ios-analytics .in-rd-top { display: flex; align-items: center; justify-content: space-between; }
#ios-analytics .in-rd-eyebrow { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); }
#ios-analytics .in-rd-tier { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 13%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent); border-radius: 999px; padding: 5px 9px; }
#ios-analytics .in-rd-score { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 9px; }
#ios-analytics .in-rd-num { font: 600 44px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-analytics .in-rd-of { font: 700 11px/1 'Roboto Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
#ios-analytics .in-rd-legend { display: flex; justify-content: space-between; font: 600 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-analytics .in-rd-legend .in-p { color: var(--accent-deep); }
#ios-analytics .in-rd-insight { font-size: 12.5px; line-height: 1.45; color: var(--text-mid); margin: 11px 0 0; }
#ios-analytics .in-rd-insight b { color: var(--text); font-weight: 650; }
#ios-analytics .in-rd-forecast { display: flex; gap: 9px; margin-top: 12px; }
#ios-analytics .in-rd-fc { flex: 1 1 0; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--surface3) 60%, var(--surface)); padding: 10px 11px; }
#ios-analytics .in-rd-fc .in-fl { display: block; font: 700 8.5px/1.2 'Roboto Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
#ios-analytics .in-rd-fc .in-fv { display: block; font: 600 17px/1 Fraunces, serif; color: var(--text); margin-top: 5px; font-variant-numeric: lining-nums; }
#ios-analytics .in-rd-fc .in-fv.in-dim { font-size: 13px; color: var(--text-dim); }
#ios-analytics .in-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
#ios-analytics .in-tile { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 12px 13px; }
#ios-analytics .in-tile .in-tv { font: 600 26px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-analytics .in-tile .in-tl { display: block; font: 600 10.5px/1.2 'Roboto Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); margin-top: 5px; }
#ios-analytics .in-tile svg.in-spark { display: block; width: 100%; height: 22px; margin-top: 8px; overflow: visible; }
#ios-analytics .in-tile svg.in-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ios-analytics .in-acc-top { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
#ios-analytics .in-acc-now { font: 600 30px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
#ios-analytics .in-acc-note { font: 600 11px/1.3 'Roboto Mono', monospace; color: var(--miss); }
#ios-analytics .in-rangeseg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--surface3); }
#ios-analytics .in-rangeseg button { border: none; background: none; cursor: pointer; font: 700 10px/1 'Roboto Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); padding: 6px 10px; border-radius: 999px; transition: color .18s, background .18s; }
#ios-analytics .in-rangeseg button.in-on { color: var(--on-accent); background: var(--accent); }
#ios-analytics .in-rangeseg button:active { transform: scale(0.96); transition: transform .12s var(--ios-ease); }
#ios-analytics .in-acc-chart { width: 100%; height: 96px; margin-top: 12px; overflow: visible; }
#ios-analytics .in-acc-chart polyline.in-dat { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ios-analytics .in-acc-chart line.in-pass { stroke: var(--green); stroke-width: 1.4; stroke-dasharray: 4 4; }
#ios-analytics .in-acc-chart circle { fill: var(--accent); }
#ios-analytics .in-acc-chart text { font: 600 8px/1 'Roboto Mono', monospace; fill: var(--text-dim); }
#ios-analytics .in-lev { border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border)); border-radius: 18px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)); padding: 16px 16px; margin-bottom: 12px; }
#ios-analytics .in-lev-gain { font: 600 26px/1.05 Fraunces, serif; color: var(--accent-deep); letter-spacing: -0.01em; }
#ios-analytics .in-lev-gain .in-u { font: 700 12px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-analytics .in-lev-act { font: 700 14px/1.3 Inter, sans-serif; color: var(--text); margin: 8px 0 0; }
#ios-analytics .in-lev-body { font-size: 12.5px; line-height: 1.55; color: var(--text-mid); margin: 9px 0 13px; }
#ios-analytics .in-lev-list { display: flex; flex-direction: column; gap: 9px; }
#ios-analytics .in-lev-row { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.4; color: var(--text-mid); }
#ios-analytics .in-lev-row b { color: var(--text); font-weight: 650; }
#ios-analytics .in-lev-mark { flex: 0 0 auto; margin-top: 1px; }
#ios-analytics .in-lev-mark svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#ios-analytics .in-lev-mark.in-dn { color: var(--miss); }
#ios-analytics .in-lev-mark.in-up { color: var(--green); }
#ios-analytics .in-mrow { margin-bottom: 13px; }
#ios-analytics .in-mrow:last-child { margin-bottom: 0; }
#ios-analytics .in-mrow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; margin-bottom: 7px; }
#ios-analytics .in-mrow-nm { font: 650 13.5px/1.2 Inter, sans-serif; color: var(--text); }
#ios-analytics .in-mrow-sc { font: 700 12px/1 'Roboto Mono', monospace; color: var(--text-dim); font-variant-numeric: lining-nums tabular-nums; }
#ios-analytics .in-mrow-sc.in-weak { color: var(--miss); }
#ios-analytics .in-mrow-sc.in-strong { color: var(--green); }
#ios-analytics .in-mrow-meta { font-size: 11px; line-height: 1.4; color: var(--text-dim); margin-top: 6px; }
#ios-analytics .in-mrow-meta .in-tag { color: var(--miss); font-weight: 600; }
#ios-analytics .in-bar.in-weakbar > span { background: var(--miss); }
#ios-analytics .in-bar.in-strongbar > span { background: var(--green); }
#ios-analytics .in-streak-top { display: flex; align-items: baseline; gap: 10px; }
#ios-analytics .in-streak-num { font: 600 36px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums; }
#ios-analytics .in-streak-unit { font: 700 11px/1 'Roboto Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
#ios-analytics .in-streak-meta { font-size: 11.5px; line-height: 1.5; color: var(--text-mid); margin: 9px 0 12px; }
#ios-analytics .in-streak-meta b { color: var(--text); font-weight: 650; }
#ios-analytics .in-days { display: flex; gap: 7px; }
#ios-analytics .in-day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#ios-analytics .in-day .in-dc { width: 100%; aspect-ratio: 1; border-radius: 9px; background: var(--surface3); border: 1px solid var(--border); }
#ios-analytics .in-day.in-active .in-dc { background: color-mix(in oklab, var(--accent) 30%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
#ios-analytics .in-day .in-dl { font: 700 9px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-analytics .in-day.in-active .in-dl { color: var(--accent-deep); }
#ios-analytics .in-diff-row { margin-bottom: 13px; }
#ios-analytics .in-diff-row:last-child { margin-bottom: 0; }
#ios-analytics .in-diff-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
#ios-analytics .in-diff-nm { font: 650 13px/1 Inter, sans-serif; color: var(--text); }
#ios-analytics .in-diff-nm span { font: 600 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-left: 7px; }
#ios-analytics .in-diff-val { font: 700 12px/1 'Roboto Mono', monospace; font-variant-numeric: lining-nums tabular-nums; }
#ios-analytics .in-diff-val.in-g { color: var(--green); }
#ios-analytics .in-diff-val.in-a { color: var(--accent-deep); }
#ios-analytics .in-bar.in-passbar > span { background: var(--green); }
#ios-analytics .in-pvt { display: flex; gap: 10px; }
#ios-analytics .in-pvt-col { flex: 1 1 0; border: 1px solid var(--border); border-radius: 13px; background: var(--surface3); padding: 12px 13px; text-align: center; }
#ios-analytics .in-pvt-col .in-pl { display: block; font: 700 9px/1 'Roboto Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
#ios-analytics .in-pvt-col .in-pv { display: block; font: 600 13px/1.2 Fraunces, serif; color: var(--text-mid); margin-top: 8px; }
#ios-analytics .in-heat { display: grid; grid-template-columns: repeat(26, 1fr); grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; }
#ios-analytics .in-heat i { aspect-ratio: 1; border-radius: 2.5px; background: var(--surface3); }
#ios-analytics .in-heat i.in-l1 { background: color-mix(in oklab, var(--accent) 28%, var(--surface)); }
#ios-analytics .in-heat i.in-l2 { background: color-mix(in oklab, var(--accent) 55%, var(--surface)); }
#ios-analytics .in-heat i.in-l3 { background: color-mix(in oklab, var(--accent) 82%, var(--surface)); }
#ios-analytics .in-heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 11px; font: 700 9px/1 'Roboto Mono', monospace; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
#ios-analytics .in-heat-legend .in-sw { display: inline-flex; gap: 3px; }
#ios-analytics .in-heat-legend .in-sw i { width: 10px; height: 10px; border-radius: 2.5px; background: var(--surface3); }
#ios-analytics .in-heat-legend .in-sw i.in-l1 { background: color-mix(in oklab, var(--accent) 28%, var(--surface)); }
#ios-analytics .in-heat-legend .in-sw i.in-l2 { background: color-mix(in oklab, var(--accent) 55%, var(--surface)); }
#ios-analytics .in-heat-legend .in-sw i.in-l3 { background: color-mix(in oklab, var(--accent) 82%, var(--surface)); }
#ios-analytics .in-slip { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); padding: 11px 0; }
#ios-analytics .in-slip:last-child { border-bottom: none; padding-bottom: 0; }
#ios-analytics .in-slip:first-child { padding-top: 0; }
#ios-analytics .in-slip .in-rank { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; background: color-mix(in oklab, var(--miss) 14%, var(--surface3)); color: var(--miss); display: grid; place-items: center; font: 700 12px/1 'Roboto Mono', monospace; }
#ios-analytics .in-slip .in-stxt { flex: 1 1 auto; min-width: 0; }
#ios-analytics .in-slip .in-stxt b { display: block; font: 650 13px/1.2 Inter, sans-serif; color: var(--text); }
#ios-analytics .in-slip .in-stxt span { display: block; font: 500 11px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 2px; }
#ios-analytics .in-slip .in-smiss { flex: 0 0 auto; font: 700 11px/1 'Roboto Mono', monospace; color: var(--miss); }
#ios-analytics .in-mile-count { font: 600 24px/1 Fraunces, serif; color: var(--text); }
#ios-analytics .in-mile-count small { font: 700 13px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-analytics .in-mile { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
#ios-analytics .in-mile:last-child { border-bottom: none; padding-bottom: 0; }
#ios-analytics .in-mile .in-mi { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 14%, var(--surface3)); color: var(--accent-deep); }
#ios-analytics .in-mile.in-locked .in-mi { background: var(--surface3); color: var(--text-dim); }
#ios-analytics .in-mile .in-mi svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ios-analytics .in-mile .in-mtx { flex: 1 1 auto; min-width: 0; }
#ios-analytics .in-mile .in-mtx b { display: block; font: 650 13px/1.2 Inter, sans-serif; color: var(--text); }
#ios-analytics .in-mile .in-mtx span { display: block; font: 500 10.5px/1.3 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 3px; }
#ios-analytics .in-mile.in-locked .in-mtx b { color: var(--text-mid); }
#ios-analytics .in-mile .in-mtick { flex: 0 0 auto; color: var(--green); }
#ios-analytics .in-mile .in-mtick svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#ios-analytics .in-mile.in-locked .in-mtick { color: var(--text-dim); }
#ios-analytics .in-mile-prog { margin-top: 8px; }
#ios-analytics .in-mile-prog .in-mp-meta { display: flex; justify-content: space-between; font: 600 10px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 6px; }
#ios-analytics .in-empty { text-align: center; padding: 6px 6px 2px; }
#ios-analytics .in-empty .in-ei { width: 38px; height: 38px; border-radius: 11px; margin: 0 auto 11px; display: grid; place-items: center; background: var(--surface3); color: var(--text-dim); }
#ios-analytics .in-empty .in-ei svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-analytics .in-empty b { display: block; font: 650 14px/1.2 Inter, sans-serif; color: var(--text); }
#ios-analytics .in-empty span { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 5px; }
@media (prefers-reduced-motion: no-preference) {
#ios-analytics .in-reveal { animation: in-rise .5s var(--ios-ease) backwards; }
#ios-analytics .in-reveal:nth-child(1) {animation-delay:.04s}
#ios-analytics .in-reveal:nth-child(2) {animation-delay:.09s}
#ios-analytics .in-reveal:nth-child(3) {animation-delay:.14s}
#ios-analytics .in-reveal:nth-child(4) {animation-delay:.19s}
#ios-analytics .in-reveal:nth-child(5) {animation-delay:.24s}
#ios-analytics .in-reveal:nth-child(6) {animation-delay:.29s}
#ios-analytics .in-reveal:nth-child(7) {animation-delay:.34s}
#ios-analytics .in-reveal:nth-child(8) {animation-delay:.39s}
@keyframes in-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
}
#ios-analytics .in-ho { padding: 12px 0 13px; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ios-analytics .in-card-head + .in-ho { border-top: 0; padding-top: 4px; }
#ios-analytics .in-ho-head { display: flex; align-items: baseline; gap: 8px; }
#ios-analytics .in-ho-head b { font: 650 14px/1.2 Inter, sans-serif; color: var(--text); }
#ios-analytics .in-ho-head span { font: 500 11.5px/1.2 Inter, sans-serif; color: var(--text-dim); }
#ios-analytics .in-ho-head .in-ho-n { margin-left: auto; font: 600 11px/1 'Roboto Mono', monospace; color: var(--text-mid); }
#ios-analytics .in-ho-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#ios-analytics .in-ho-step { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 10px; border: 1px solid var(--border);
    background: var(--surface3); font: 600 11.5px/1 Inter, sans-serif; color: var(--text-mid); }
#ios-analytics .in-ho-step svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#ios-analytics .in-ho-step em { font: 600 10.5px/1 'Roboto Mono', monospace; font-style: normal; color: var(--text-dim); }
#ios-analytics .in-ho-step.in-earned { border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--accent-deep); }
#ios-analytics .in-ho-step.in-locked { border-style: dashed; background: transparent; color: var(--text-dim); opacity: .8; }
#ios-analytics .in-ho-bar { height: 4px; border-radius: 999px; background: var(--track); margin-top: 9px; overflow: hidden; }
#ios-analytics .in-ho-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
#ios-analytics .in-map-meta { margin: 5px 0 0; font: 600 11px/1.3 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-analytics .in-map-act { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 13px; margin-bottom: 14px;
    border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
#ios-analytics .in-map-act-t { flex: 1 1 auto; min-width: 0; }
#ios-analytics .in-map-act-t b { display: block; font: 650 13.5px/1.25 Inter, sans-serif; color: var(--text); }
#ios-analytics .in-map-act-t span { display: block; font: 500 11.5px/1.4 Inter, sans-serif; color: var(--text-mid); margin-top: 3px; }
#ios-analytics .in-map-btn { flex: 0 0 auto; border: 0; border-radius: 11px; padding: 10px 14px; cursor: pointer; background: var(--accent); color: var(--on-accent);
    font: 700 12.5px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
#ios-analytics .in-map-btn:active { transform: scale(0.97); }
#ios-analytics .in-map-dom { padding: 12px 0 13px; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ios-analytics .in-map-dh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
#ios-analytics .in-map-dh b { font: 650 13px/1.25 Inter, sans-serif; color: var(--text); }
#ios-analytics .in-map-dh span { flex: 0 0 auto; font: 600 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-analytics .in-map-tiles { display: grid; grid-template-columns: repeat(auto-fill, 40px); margin: 0 -4px; }
#ios-analytics .in-mtile { position: relative; width: 40px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#ios-analytics .in-mtile::before { content: ""; position: absolute; inset: 4px; border-radius: 8px; background: var(--mt); transition: transform .15s var(--ios-ease); }
#ios-analytics .in-mtile:active::before { transform: scale(0.95); }
#ios-analytics .in-mtile[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
#ios-analytics .in-mtile:focus-visible { outline: none; }
#ios-analytics .in-mtile:focus-visible::before { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
#ios-analytics .in-t-mastered { --mt: var(--green); }
#ios-analytics .in-t-proficient { --mt: color-mix(in oklab, var(--green) 50%, var(--surface)); }
#ios-analytics .in-t-developing { --mt: var(--warn); }
#ios-analytics .in-t-weak { --mt: color-mix(in oklab, var(--miss) 70%, var(--surface)); }
#ios-analytics .in-t-untouched { --mt: transparent; }
#ios-analytics .in-mtile.in-t-untouched::before { box-shadow: inset 0 0 0 1.5px var(--border); }
#ios-analytics .in-mtile.in-t-untouched[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1.5px var(--border), 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
#ios-analytics .in-map-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 12px; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    font: 600 11px/1 Inter, sans-serif; color: var(--text-dim); }
#ios-analytics .in-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
#ios-analytics .in-map-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3.5px; background: var(--mt); }
#ios-analytics .in-map-legend i.in-t-untouched { box-shadow: inset 0 0 0 1.5px var(--border); }
#ios-analytics .in-map-scrim { position: absolute; inset: 0; z-index: 8; background: color-mix(in oklab, var(--text) 28%, transparent);
    opacity: 0; visibility: hidden; transition: opacity .2s var(--ios-ease), visibility 0s linear .2s; }
#ios-analytics .in-map-scrim.in-is-open { opacity: 1; visibility: visible; transition: opacity .36s var(--ios-ease), visibility 0s; }
#ios-analytics .in-map-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; background: var(--surface); border-radius: 22px 22px 0 0;
    border-top: 1px solid var(--border); padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(100%); visibility: hidden; transition: transform .2s var(--ios-ease), visibility 0s linear .2s; }
#ios-analytics .in-map-sheet.in-is-open { transform: none; visibility: visible; transition: transform .36s var(--ios-ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) {
#ios-analytics .in-map-sheet { transform: none; opacity: 0; transition: opacity .2s var(--ios-ease), visibility 0s linear .2s; }
#ios-analytics .in-map-sheet.in-is-open { opacity: 1; transition: opacity .2s var(--ios-ease), visibility 0s; }
}
#ios-analytics .in-ms-grip { width: 38px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--text) 18%, transparent); margin: 0 auto 14px; }
#ios-analytics .in-ms-dom { margin: 0; font: 600 11px/1.2 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-analytics .in-ms-name { margin: 5px 0 14px; font: 600 21px/1.2 Fraunces, serif; color: var(--text); }
#ios-analytics .in-ms-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
#ios-analytics .in-ms-stats div { border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; background: var(--surface3); }
#ios-analytics .in-ms-stats b { display: block; font: 600 20px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum","tnum"; }
#ios-analytics .in-ms-stats span { display: block; margin-top: 5px; font: 600 10.5px/1 Inter, sans-serif; color: var(--text-dim); }
#ios-analytics .in-ms-go { width: 100%; padding: 14px; font-size: 14.5px; }


/* ═════════════════════ DAILY REVIEW (cert-ios-review.html 77f94eef, B1) · iv- hooks on the real sr-* markup ═════════════════════ */
/* The real review keeps its markup; sr-review.js ships hidden phone hooks (iv-*) and this block shows them. */
html[data-theme] body #page-sr-review.active { animation: none !important; transform: none !important; padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important; }
/* header: "Daily Review" + streak + theme (E2E .hdr) */
html[data-theme] body #page-sr-review .ed-pagehead-body { flex: 1 1 auto; min-width: 0; }
html[data-theme] body #page-sr-review .ed-pagehead-display:not(.iv-title) { display: none !important; }
html[data-theme] body #page-sr-review .iv-title[hidden] { display: block !important; font-family: Fraunces, Georgia, serif !important; font-weight: 600 !important; font-size: 20px !important; letter-spacing: -0.01em !important; margin: 0 !important; color: var(--text) !important; }
html[data-theme] body #page-sr-review .iv-streak[hidden] { display: inline-flex !important; align-items: center; gap: 5px; flex: 0 0 auto; font: 800 12px/1 Inter, sans-serif; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 999px; padding: 7px 10px; }
html[data-theme] body #page-sr-review .iv-streak svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linejoin: round; }
html[data-theme] body #page-sr-review .iv-theme[hidden] { display: grid !important; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-mid); cursor: pointer; transition: transform .14s var(--ios-ease); }
html[data-theme] body #page-sr-review .iv-theme svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] body #page-sr-review .iv-theme:active { transform: scale(0.94); }
/* progress: "Card N of M" left, today's plan right, bar under both */
html[data-theme] body #page-sr-review .sr-progress-row:not([hidden]) { display: grid !important; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 10px; }
html[data-theme] body #page-sr-review .sr-progress-bar { grid-column: 1 / -1; }
html[data-theme] body #page-sr-review .iv-only[hidden] { display: inline !important; }
html[data-theme] body #page-sr-review .sr-plan-line[hidden] { display: inline !important; font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-deep); }
/* card: no mono meta row (E2E); Remove it sits under the options, then the feedback */
html[data-theme] body #page-sr-review .sr-card-meta { display: none !important; }
html[data-theme] body #page-sr-review .sr-card { display: flex !important; flex-direction: column; }
html[data-theme] body #page-sr-review .sr-why-due { align-self: flex-start; }
html[data-theme] body #page-sr-review .sr-remove { order: 1; margin: 14px 2px 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important; justify-content: flex-start !important; }
html[data-theme] body #page-sr-review .sr-remove-btn { border: 0 !important; background: none !important; padding: 0 !important; font: 650 12px/1.4 Inter, sans-serif !important; color: var(--text-mid) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--text) 30%, transparent); cursor: pointer; }
html[data-theme] body #page-sr-review .sr-remove-btn:active { opacity: .6; }
html[data-theme] body #page-sr-review .sr-explanation, html[data-theme] body #page-sr-review .sr-self-grade-banner { order: 2; margin-top: 16px !important; }
html[data-theme] body #page-sr-review .sr-confidence-row { order: 3; }
/* the dock (E2E .footer): answer buttons pinned to the bottom of the screen */
html[data-theme] body #page-sr-review .sr-confidence-row:not([hidden]), html[data-theme] body #page-sr-review .iv-wait[hidden], html[data-theme] body #page-sr-review .sr-multi-submit-row {
  position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0 !important; display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 9px !important;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom)) !important; background: var(--bg) !important; border: 0 !important; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent) !important; border-radius: 0 !important; }
html[data-theme] body #page-sr-review .sr-confidence-label { display: none !important; }
html[data-theme] body #page-sr-review .sr-confidence-row:has(.sr-confidence-wrong) .sr-confidence-label, html[data-theme] body #page-sr-review .sr-retry-pill, html[data-theme] body #page-sr-review .sr-multi-hint { grid-column: 1 / -1; grid-row: 1; }
html[data-theme] body #page-sr-review .sr-confidence-row:has(.sr-confidence-wrong) .sr-confidence-label { display: block !important; margin: 0 !important; font: 600 12px/1.35 Inter, sans-serif !important; }
html[data-theme] body #page-sr-review .sr-confidence-row:has(.sr-retry-pill) .sr-confidence-label { display: none !important; }
html[data-theme] body #page-sr-review .sr-confidence-btn, html[data-theme] body #page-sr-review .iv-wait-btn, html[data-theme] body #page-sr-review .sr-multi-submit-btn {
  grid-row: 2; width: 100%; border: none !important; border-radius: 13px !important; padding: 15px !important; min-height: 48px; cursor: pointer; background: var(--accent) !important; color: var(--on-accent) !important;
  font: 800 15.5px/1 Inter, sans-serif !important; letter-spacing: -0.005em; text-align: center !important; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent) !important; transition: transform .15s var(--ios-ease), opacity .2s; }
html[data-theme] body #page-sr-review .sr-confidence-row:not(:has(.sr-confidence-label, .sr-retry-pill)) .sr-confidence-btn, html[data-theme] body #page-sr-review .iv-wait-btn { grid-row: 1; }
html[data-theme] body #page-sr-review .sr-confidence-row:has(.sr-confidence-label:not(:only-of-type)) .sr-confidence-btn { grid-row: auto; }
html[data-theme] body #page-sr-review .sr-confidence-uncertain { order: -1; background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
html[data-theme] body #page-sr-review .iv-wait-btn:disabled, html[data-theme] body #page-sr-review .sr-multi-submit-btn:disabled { opacity: 0.4; cursor: default; box-shadow: none !important; }
html[data-theme] body #page-sr-review .sr-confidence-btn:active:not(:disabled), html[data-theme] body #page-sr-review .sr-multi-submit-btn:active:not(:disabled) { transform: scale(0.985); }
html[data-theme] body #page-sr-review .sr-confidence-hint, html[data-theme] body #page-sr-review .iv-long { display: none !important; }
html[data-theme] body #page-sr-review .iv-short[hidden] { display: inline !important; }
/* review done (E2E .done): seal, "Review done", three tiles, streak, forecast, Back to home + Retry */
html[data-theme] body #page-sr-review #sr-complete .sr-empty-icon, html[data-theme] body #page-sr-review #sr-complete .iv-done-desk, html[data-theme] body #page-sr-review #sr-complete .sr-done-sum { display: none !important; }
html[data-theme] body #page-sr-review #sr-complete .iv-seal[hidden] { display: grid !important; place-items: center; width: 72px; height: 72px; border-radius: 999px; margin: 0 auto 18px; background: color-mix(in oklab, var(--green) 16%, var(--surface)); }
html[data-theme] body #page-sr-review #sr-complete .iv-seal svg { width: 34px; height: 34px; stroke: var(--green); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] body #page-sr-review #sr-complete .iv-done-t[hidden] { display: block !important; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 25px; letter-spacing: -0.015em; margin: 0 0 18px; color: var(--text); }
html[data-theme] body #page-sr-review #sr-complete:has(.iv-done-sub:not(:empty)) .iv-done-t[hidden] { margin-bottom: 18px; }
html[data-theme] body #page-sr-review #sr-complete .iv-done-sub[hidden] { display: block !important; margin: -12px 0 22px; font-size: 14px; color: var(--text-mid); }
html[data-theme] body #page-sr-review .sr-done-tiles[hidden] { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 18px; }
html[data-theme] body #page-sr-review .sr-done-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 8px; text-align: center; }
html[data-theme] body #page-sr-review .sr-done-tile b { display: block; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 24px; color: var(--text); font-variant-numeric: lining-nums; }
html[data-theme] body #page-sr-review .sr-done-tile.sr-done-miss b { color: var(--miss); }
html[data-theme] body #page-sr-review .sr-done-tile span { font: 700 9.5px/1.2 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
html[data-theme] body #page-sr-review #sr-complete .sr-streak { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; }
html[data-theme] body #page-sr-review #sr-complete .btn-primary { width: 100%; }
html[data-theme] body #page-sr-review #sr-complete[data-missed] .iv-retry[hidden] { display: block !important; width: 100%; margin-top: 9px; background: transparent; border: 1.5px solid var(--border); color: var(--text); border-radius: 13px; padding: 13px; font: 700 14px/1 Inter, sans-serif; cursor: pointer; }
html[data-theme] body #page-sr-review #sr-complete .iv-retry:active { transform: scale(0.985); }
/* Next 7 days: the E2E column chart, exam day in the accent */
html[data-theme] body #page-sr-review #sr-forecast-complete { margin: 12px 0 18px !important; padding: 13px 14px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-align: left; }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-strip { display: grid !important; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-day { display: flex !important; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; background: none !important; border: 0 !important; padding: 0 !important; }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-track { order: 1; }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-count { order: 2; }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-lbl { order: 3; }
html[data-theme] body #page-sr-review #sr-forecast-complete::before { content: "Next 7 days"; display: block; margin-bottom: 10px; font: 650 13px/1.2 Inter, sans-serif; color: var(--text); }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-cap { margin: 12px 0 0 !important; font-size: 12px !important; line-height: 1.45 !important; color: var(--text-dim) !important; }
html[data-theme] body #page-sr-review .sr-progress-row[hidden] { display: none !important; }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-track { width: 100%; max-width: 22px; height: 64px; display: flex; align-items: flex-end; background: none !important; }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-bar { width: 100%; height: var(--h) !important; min-height: 3px; border-radius: 6px 6px 3px 3px; background: color-mix(in oklab, var(--accent) 38%, var(--surface3)) !important; }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-day-exam .sr-fc-bar { background: var(--accent) !important; }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-lbl { font: 600 10px/1 Inter, sans-serif; color: var(--text-dim); }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-count { font: 600 10px/1.1 "Roboto Mono", monospace; color: var(--text-mid); text-align: center; }
html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-day-exam .sr-fc-lbl, html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-examday { color: var(--accent-deep); font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body #page-sr-review #sr-forecast-complete .sr-fc-bar { transform-origin: 50% 100%; animation: iv-sweep .9s var(--ios-ease) both; animation-delay: calc(var(--fi, 0) * 60ms); }
}
@keyframes iv-sweep { from { transform: scaleY(0); } to { transform: none; } }

/* ═════════════════════ LIFT B2 · SCAFFOLD (exam results) ═════════════════════ */
#page-exam-results:has(#ios-exam-results:not(:empty)) > :not(#ios-exam-results) { display: none !important; }
body:has(#page-exam-results.active #ios-exam-results:not(:empty)) #app-topbar, body:has(#page-exam-results.active #ios-exam-results:not(:empty)) .app-topbar { display: none !important; }
/* one fixed viewport like the B1 screens; an animation in effect would make the page the fixed box */
#page-exam-results.active #ios-exam-results:not(:empty) { position: fixed; inset: 0; z-index: 5; min-height: 0; overflow: hidden; overflow: clip; }
#page-exam-results.active:has(#ios-exam-results:not(:empty)) { animation: none !important; transform: none !important; }

/* ═════════════════════ EXAM RESULTS (cert-ios-exam-results.html 47147981, B2) · ie- ═════════════════════ */
#ios-exam-results .ie-app-chrome { padding-top: max(10px, env(safe-area-inset-top)) !important; }
#ios-exam-results .ie-body { min-height: 0; }
#ios-exam-results .ie-rfoot { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
#ios-exam-results .ie-sc-note { margin: 8px 0 0; font: 500 11px/1.4 Inter, sans-serif; color: var(--text-dim); }
#ios-exam-results .ie-srow .ie-sv.ie-skip { color: var(--text-dim); background: color-mix(in oklab, var(--text-dim) 12%, transparent); }
#ios-exam-results :where(button) { font-family: inherit; }
#ios-exam-results .ie-app-chrome { display: flex; align-items: center; justify-content: flex-end; padding: 10px 20px 4px; }
#ios-exam-results .ie-app-theme { flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text-mid); transition:transform .14s var(--ios-ease), border-color .18s; }
#ios-exam-results .ie-app-theme:active { transform:scale(.94); }
@media (hover:hover) and (pointer:fine) {
#ios-exam-results .ie-app-theme:hover { border-color:color-mix(in oklab,var(--accent) 36%,var(--border)); }
}
#ios-exam-results .ie-app-theme svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#ios-exam-results .ie-body { flex: 1; overflow-y: auto; padding: 4px 22px 14px; }
#ios-exam-results .ie-body::-webkit-scrollbar { width: 0; }
#ios-exam-results .ie-done-head { margin: 8px 0 16px; }
#ios-exam-results .ie-done-kick { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); display: inline-flex; align-items: center; gap: 7px; margin-bottom: 11px; }
#ios-exam-results .ie-done-kick svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#ios-exam-results .ie-done-title { font: 600 32px/1.05 Fraunces, serif; letter-spacing: -0.016em; color: var(--text); margin: 0; }
#ios-exam-results .ie-done-title em { font-style: normal; color: var(--accent); }
#ios-exam-results .ie-done-sub { font-size: 13.5px; line-height: 1.5; color: var(--text-mid); margin: 10px 0 0; max-width: 36ch; }
#ios-exam-results .ie-scorecard { margin-top: 16px; border-radius: 20px; overflow: hidden; position: relative;
    background: color-mix(in oklab, var(--accent) 5%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border)); color: var(--text); }
#ios-exam-results .ie-sc-top { padding: 17px 18px 15px; }
#ios-exam-results .ie-sc-lbl { font: 700 9.5px/1.2 'Roboto Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#ios-exam-results .ie-sc-num { font: 600 58px/0.95 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; margin: 9px 0 0; letter-spacing: -0.01em; }
#ios-exam-results .ie-sc-of { font: 700 13px/1 Inter, sans-serif; color: var(--text-dim); margin-left: 4px; }
#ios-exam-results .ie-sc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; }
#ios-exam-results .ie-sc-tag { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 7px; padding: 6px 9px; }
#ios-exam-results .ie-sc-tag.ie-fail { color: var(--miss); background: color-mix(in oklab, var(--miss) 13%, transparent); border: 1px solid color-mix(in oklab, var(--miss) 30%, transparent); }
#ios-exam-results .ie-sc-tag.ie-pass { color: var(--green); background: color-mix(in oklab, var(--green) 13%, transparent); border: 1px solid color-mix(in oklab, var(--green) 30%, transparent); }
#ios-exam-results .ie-sc-tag.ie-mode { color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 11%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent); }
#ios-exam-results .ie-sc-msg { font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); margin: 13px 0 0; }
#ios-exam-results .ie-sc-msg b { color: var(--text); font-weight: 700; }
#ios-exam-results .ie-sc-meter { margin: 14px 0 2px; }
#ios-exam-results .ie-sc-meter-track { height: 7px; border-radius: 999px; background: var(--track); position: relative; overflow: hidden; }
#ios-exam-results .ie-sc-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--miss); width: 0; transition: width .9s var(--ios-ease); }
#ios-exam-results .ie-scorecard.ie-passed .ie-sc-meter-fill { background: var(--green); }
#ios-exam-results .ie-sc-meter-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-mid); left: 80%; }
#ios-exam-results .ie-sc-meter-legend { display: flex; justify-content: space-between; font: 600 9.5px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 6px; }
#ios-exam-results .ie-sc-meter-legend .ie-p { color: var(--accent-deep); }
#ios-exam-results .ie-sc-stats { display: flex; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ios-exam-results .ie-sc-stat { flex: 1 1 0; padding: 12px 6px 13px; text-align: center; }
#ios-exam-results .ie-sc-stat + .ie-sc-stat { border-left: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ios-exam-results .ie-sc-stat .ie-sn { display: block; font: 600 19px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
#ios-exam-results .ie-sc-stat.ie-good .ie-sn { color: var(--green); }
#ios-exam-results .ie-sc-stat.ie-bad .ie-sn { color: var(--miss); }
#ios-exam-results .ie-sc-stat .ie-sl { display: block; font: 700 9px/1 Inter, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }
#ios-exam-results .ie-sect-kick { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 24px 2px 4px; }
#ios-exam-results .ie-sect-title { font: 600 22px/1.1 Fraunces, serif; letter-spacing: -0.012em; color: var(--text); margin: 0 2px 13px; }
#ios-exam-results .ie-sect-title em { font-style: normal; color: var(--accent); }
#ios-exam-results .ie-drow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 12px 14px; margin-bottom: 9px; }
#ios-exam-results .ie-drow .ie-dmid { flex: 1 1 auto; min-width: 0; }
#ios-exam-results .ie-drow .ie-dn { font: 600 14px/1.2 Inter, sans-serif; color: var(--text); }
#ios-exam-results .ie-drow .ie-dc { font: 500 11px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 4px; }
#ios-exam-results .ie-drow .ie-dbar { flex: 0 0 64px; height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
#ios-exam-results .ie-drow .ie-dbar > span { display: block; height: 100%; border-radius: 999px; }
#ios-exam-results .ie-drow .ie-dpct { flex: 0 0 auto; font: 700 14px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
#ios-exam-results .ie-pass-c { color: var(--green); }
#ios-exam-results .ie-pass-bg { background: var(--green); }
#ios-exam-results .ie-mid-c { color: var(--accent-deep); }
#ios-exam-results .ie-mid-bg { background: var(--accent); }
#ios-exam-results .ie-miss-c { color: var(--miss); }
#ios-exam-results .ie-miss-bg { background: var(--miss); }
#ios-exam-results .ie-rfoot { flex: 0 0 auto; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); display: flex; gap: 9px; }
#ios-exam-results .ie-btn-primary { flex: 1 1 auto; border: none; border-radius: 13px; padding: 14px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif;
    box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease), filter .2s; }
#ios-exam-results .ie-btn-primary:active { transform: scale(0.985); }
@media (hover:hover) and (pointer:fine) {
#ios-exam-results .ie-btn-primary:hover { filter: brightness(1.05); }
}
#ios-exam-results .ie-btn-ghost { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; cursor: pointer; background: transparent; color: var(--text-mid); font: 650 13.5px/1 Inter, sans-serif; transition: background .2s, border-color .18s, transform .15s var(--ios-ease); }
#ios-exam-results .ie-btn-ghost:active { transform: scale(0.98); }
@media (hover:hover) and (pointer:fine) {
#ios-exam-results .ie-btn-ghost:hover { background: color-mix(in oklab, var(--text) 5%, transparent); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
}
@media (prefers-reduced-motion: no-preference) {
#ios-exam-results .ie-reveal { animation: ie-rise .5s var(--ios-ease) backwards; }
#ios-exam-results .ie-done-head { animation-delay: .04s; }
#ios-exam-results .ie-scorecard { animation-delay: .10s; }
#ios-exam-results .ie-sect-kick { animation-delay: .18s; }
#ios-exam-results .ie-sect-title { animation-delay: .20s; }
#ios-exam-results .ie-drow:nth-of-type(1) {animation-delay:.24s}
#ios-exam-results .ie-drow:nth-of-type(2) {animation-delay:.28s}
#ios-exam-results .ie-drow:nth-of-type(3) {animation-delay:.32s}
#ios-exam-results .ie-drow:nth-of-type(4) {animation-delay:.36s}
#ios-exam-results .ie-drow:nth-of-type(5) {animation-delay:.40s}
@keyframes ie-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
#ios-exam-results .ie-srow { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 12px 14px; margin-bottom: 9px; cursor: pointer; font: inherit; color: inherit; transition: transform .14s var(--ios-ease); }
#ios-exam-results .ie-srow:active { transform: scale(.99); }
#ios-exam-results .ie-srow .ie-sn2 { flex: 1 1 auto; min-width: 0; }
#ios-exam-results .ie-srow .ie-st { display: block; font: 600 14px/1.25 Inter, sans-serif; color: var(--text); }
#ios-exam-results .ie-srow .ie-ss { display: block; font: 500 11px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 4px; }
#ios-exam-results .ie-srow .ie-sv { flex: 0 0 auto; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 6px 9px; }
#ios-exam-results .ie-srow .ie-sv.ie-ok { color: var(--green); background: color-mix(in oklab, var(--green) 14%, transparent); }
#ios-exam-results .ie-srow .ie-sv.ie-no { color: var(--miss); background: color-mix(in oklab, var(--miss) 13%, transparent); }
#ios-exam-results .ie-srow svg { flex: 0 0 auto; width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ios-ease); }
#ios-exam-results .ie-srow[aria-expanded="true"] svg { transform: rotate(90deg); }
#ios-exam-results .ie-sdet { display: none; margin: -4px 0 10px; padding: 11px 14px; border-radius: 12px; background: var(--surface3); font: 500 11.5px/1.6 'Roboto Mono', monospace; color: var(--text-mid); }
#ios-exam-results .ie-srow[aria-expanded="true"] + .ie-sdet { display: block; }
#ios-exam-results .ie-sdet b { color: var(--miss); font-weight: 700; }
#ios-exam-results .ie-rfoot { flex-wrap: wrap; }
#ios-exam-results .ie-retry-link { flex: 1 0 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 4px 0 0; cursor: pointer; font: 650 13px/1 Inter, sans-serif; color: var(--text-mid); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--text) 25%, transparent); }
#ios-exam-results .ie-retry-link:active { opacity: .6; }
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.45);
    transform: translateY(-140%); opacity: 0; transition: transform .2s var(--ios-ease), opacity .2s var(--ios-ease); }
@media (prefers-reduced-motion: reduce) {
}

#ios-exam-results .ie-done-title, #ios-exam-results .ie-sect-title { text-transform: none !important; }

/* ═════════════════════ EXAM (cert-ios-exam.html 597e06e8, B2) · ix- hooks on the real #page-exam markup ═════════════════════ */
/* One fixed viewport like the E2E: bar + ticks on top, the question scrolls, the dock sits at the bottom. */
body:has(#page-exam.active) #app-topbar, body:has(#page-exam.active) .app-topbar { display: none !important; }
html[data-theme] body #page-exam.active { position: fixed !important; inset: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box; z-index: 5; display: flex !important; flex-direction: column !important; overflow: hidden; overflow: clip; margin: 0 !important; padding: 0 !important; max-width: none !important; background: var(--bg) !important; color: var(--text); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; animation: none !important; transform: none !important; }
html[data-theme] body #page-exam > * { flex: 0 0 auto; }
html[data-theme] body #page-exam button { font-family: inherit; box-sizing: border-box; }
html[data-theme] body #page-exam [hidden].ix-cn, html[data-theme] body #page-exam [hidden].ix-cs { display: block !important; }
html[data-theme] body #page-exam .ix-long { display: none !important; }
html[data-theme] body #page-exam .ix-short[hidden] { display: inline !important; }
/* the desktop controls the E2E doesn't have: navigator, kbd hints, top-bar Flag */
html[data-theme] body #page-exam .qnav-toggle, html[data-theme] body #page-exam .qnav-grid, html[data-theme] body #page-exam .quiz-kbd-hints, html[data-theme] body #page-exam #exam-flag-btn { display: none !important; }

/* top bar: timer · counter + pace · Pause · End */
html[data-theme] body #page-exam .exam-topbar { order: 0; position: static !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; padding: max(12px, env(safe-area-inset-top)) 18px 8px !important; margin: 0 !important; border: 0 !important; background: none !important; }
html[data-theme] body #page-exam .exam-timer-block { flex: 0 0 auto; min-width: 0; text-align: left; }
html[data-theme] body #page-exam .timer-label { display: block; font: 800 8.5px/1 Inter, sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--text-dim) !important; margin: 0 0 4px !important; }
html[data-theme] body #page-exam .exam-timer { display: inline-flex !important; align-items: center; gap: 5px; font: 700 17px/1 'Roboto Mono', monospace !important; letter-spacing: 0 !important; color: var(--text) !important; font-variant-numeric: tabular-nums; }
html[data-theme] body #page-exam .exam-timer::before { content: ""; width: 13px; height: 13px; flex: 0 0 auto; background: var(--accent-deep); -webkit-mask: var(--ix-clock) center / contain no-repeat; mask: var(--ix-clock) center / contain no-repeat; }
html[data-theme] body #page-exam .exam-timer.danger { color: var(--miss) !important; }
html[data-theme] body #page-exam .exam-timer.danger::before { background: var(--miss); }
html[data-theme] body #page-exam .exam-center-info { flex: 1 1 auto !important; min-width: 0; display: flex !important; flex-direction: column; align-items: center; text-align: center; }
html[data-theme] body #page-exam #exam-q-num, html[data-theme] body #page-exam #exam-answered-lbl { display: none !important; }
html[data-theme] body #page-exam .ix-cn { order: 1; font: 700 13.5px/1 Inter, sans-serif; color: var(--text); }
html[data-theme] body #page-exam .ix-cs { order: 2; font: 500 10.5px/1 Inter, sans-serif; color: var(--text-dim); margin-top: 4px; }
html[data-theme] body #page-exam #exam-pace { order: 3; display: block; min-height: 0; font: 600 10px/1 'Roboto Mono', monospace !important; color: var(--green) !important; margin-top: 4px; }
html[data-theme] body #page-exam #exam-pace:empty { display: none !important; }
html[data-theme] body #page-exam #exam-pace.is-behind { color: var(--miss) !important; }
html[data-theme] body #page-exam .exam-topbar-actions { flex: 0 0 auto !important; display: flex !important; align-items: center; gap: 10px !important; margin: 0 !important; }
html[data-theme] body #page-exam #exam-pause-btn { position: relative; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; font-size: 0 !important; color: var(--text-mid) !important; background: transparent !important; border: 1px solid var(--border) !important; border-radius: 999px !important; transition: transform .14s var(--ios-ease), border-color .18s, color .18s !important; }
html[data-theme] body #page-exam #exam-pause-btn::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ix-pause) center / contain no-repeat; mask: var(--ix-pause) center / contain no-repeat; }
html[data-theme] body #page-exam #exam-pause-btn[aria-pressed="true"] { color: var(--accent-deep) !important; border-color: color-mix(in oklab, var(--accent) 34%, var(--border)) !important; }
/* paused: the button shows Play (E2E swaps the icon) */
html[data-theme] body #page-exam #exam-pause-btn[aria-pressed="true"]::before { -webkit-mask-image: var(--ix-play); mask-image: var(--ix-play); }
html[data-theme] body #page-exam .end-exam-btn { position: relative; display: inline-flex !important; align-items: center; min-height: 0 !important; height: auto !important; width: auto !important; font: 700 12px/1 Inter, sans-serif !important; color: var(--accent-deep) !important; background: color-mix(in oklab, var(--accent) 10%, transparent) !important; border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)) !important; border-radius: 999px !important; padding: 9px 13px !important; box-shadow: none !important; filter: none !important; transition: transform .14s var(--ios-ease), background-color .18s !important; }
/* flex, not grid: the hidden "Pause" text node would form a second grid row and lift the icon */
/* 44pt hit areas around the 34px controls */
html[data-theme] body #page-exam #exam-pause-btn::after, html[data-theme] body #page-exam .end-exam-btn::after { content: ""; position: absolute; inset: -6px -3px; }
html[data-theme] body #page-exam #exam-pause-btn:active, html[data-theme] body #page-exam .end-exam-btn:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { html[data-theme] body #page-exam .end-exam-btn:hover { background: color-mix(in oklab, var(--accent) 16%, transparent) !important; } }

/* shortfall notice: an E2E notice card under the bar */
html[data-theme] body #page-exam .exam-shortfall-banner { order: 1; display: flex !important; align-items: flex-start; gap: 10px; margin: 4px 18px 6px !important; padding: 10px 12px !important; border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border)) !important; border-radius: 12px !important; background: color-mix(in oklab, var(--accent) 6%, var(--surface)) !important; font: 500 12px/1.45 Inter, sans-serif !important; color: var(--text-mid) !important; }
html[data-theme] body #page-exam .exam-shortfall-banner strong { color: var(--text); font-weight: 700; }
html[data-theme] body #page-exam .exam-shortfall-dismiss { flex: 0 0 auto; width: 28px; height: 28px; margin: -4px -4px 0 auto; border: 0; background: none; color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; }

/* question map: ticks, then the answered fill */
html[data-theme] body #page-exam .progress-wrap { order: 2; display: flex !important; flex-direction: column; margin: 0 !important; padding: 2px 18px 0 !important; }
html[data-theme] body #page-exam #exam-prog-dots { order: 1; display: flex !important; align-items: flex-end !important; gap: 2px !important; height: 12px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; }
html[data-theme] body #page-exam #exam-prog-dots > .qpd-cell { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 5px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 2px !important; box-shadow: none !important; background: var(--track) !important; }
html[data-theme] body #page-exam #exam-prog-dots > .qpd-cell::before, html[data-theme] body #page-exam #exam-prog-dots > .qpd-cell::after { content: none !important; }
html[data-theme] body #page-exam #exam-prog-dots > .qpd-cell.qpd-done { height: 5px !important; background: color-mix(in oklab, var(--accent) 55%, var(--track)) !important; }
html[data-theme] body #page-exam #exam-prog-dots > .qpd-cell.qpd-flagged { height: 5px !important; background: var(--accent-deep) !important; }
html[data-theme] body #page-exam #exam-prog-dots > .qpd-cell.qpd-now { height: 12px !important; background: var(--accent) !important; }
html[data-theme] body #page-exam .progress-wrap .progress-bar { order: 2; height: 4px !important; margin: 8px 0 0 !important; border-radius: 999px !important; background: var(--track) !important; overflow: hidden; border: 0 !important; }
html[data-theme] body #page-exam #exam-prog-fill { width: 100% !important; height: 100% !important; border-radius: 999px !important; background: color-mix(in oklab, var(--accent) 75%, var(--accent-deep)) !important; box-shadow: none !important; transform: scaleX(var(--ix-answered, 0)); transform-origin: left center; transition: transform .4s var(--ios-ease) !important; }

/* the question: no card chrome, scrolls between the bar and the dock */
html[data-theme] body #page-exam .q-card { order: 3; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; margin: 0 !important; padding: 14px 18px 12px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html[data-theme] body #page-exam .q-card::-webkit-scrollbar { width: 0; }
html[data-theme] body #page-exam .q-meta { display: flex !important; align-items: center !important; gap: 9px !important; margin: 0 0 11px !important; }
html[data-theme] body #page-exam #exam-q-label { font: 800 11px/1 'Roboto Mono', monospace !important; letter-spacing: 0 !important; color: var(--accent-deep) !important; }
html[data-theme] body #page-exam #exam-topic-lbl { display: inline-flex; align-items: center; min-width: 0; font: 600 11px/1 Inter, sans-serif !important; letter-spacing: 0.02em; color: var(--text-dim) !important; }
html[data-theme] body #page-exam .ix-flagged { display: none !important; margin-left: auto; align-items: center; gap: 5px; font: 700 9.5px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); }
html[data-theme] body #page-exam.ix-is-flagged .ix-flagged { display: inline-flex !important; }
html[data-theme] body #page-exam .ix-flagged::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--ix-flag-fill) center / contain no-repeat; mask: var(--ix-flag-fill) center / contain no-repeat; }
html[data-theme] body #page-exam #exam-q-text { font: 600 18px/1.32 Inter, sans-serif !important; letter-spacing: -0.005em !important; color: var(--text) !important; margin: 0 0 16px !important; outline: none !important; box-shadow: none !important; border: 0 !important; }
html[data-theme] body #page-exam #exam-q-text strong.exam-keyword { color: var(--accent-deep) !important; font-weight: 700 !important; font-style: normal !important; background: none !important; }
html[data-theme] body #page-exam .q-scenario:not([hidden]) { display: block !important; border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)) !important; border-left: 3px solid var(--accent) !important; border-radius: 12px !important; background: color-mix(in oklab, var(--accent) 6%, var(--surface)) !important; padding: 11px 13px !important; margin: 0 0 16px !important; font: 500 13px/1.5 Inter, sans-serif !important; color: var(--text-mid) !important; }
html[data-theme] body #page-exam .q-scenario .q-scenario-rule { display: none !important; }
/* options (E2E .opt): letter tile · text · check */
html[data-theme] body #page-exam #exam-options .option { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; text-align: left; margin: 0 0 10px !important; padding: 14px !important; border: 1px solid var(--border) !important; border-radius: 14px !important; background: var(--surface) !important; box-shadow: none !important; color: var(--text) !important; transition: border-color .16s, background-color .16s, transform .12s var(--ios-ease) !important; }
html[data-theme] body #page-exam #exam-options .option:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { html[data-theme] body #page-exam #exam-options .option:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)) !important; background: var(--surface) !important; } }
html[data-theme] body #page-exam #exam-options .opt-letter { flex: 0 0 auto !important; width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 9px !important; display: grid !important; place-items: center !important; margin: 0 !important; background: var(--surface3) !important; color: var(--text-mid) !important; border: 1px solid var(--border) !important; font: 800 13px/1 Inter, sans-serif !important; transition: background-color .16s, color .16s, border-color .16s !important; }
html[data-theme] body #page-exam #exam-options .opt-text { flex: 1 1 auto; min-width: 0; font: 500 13.5px/1.4 Inter, sans-serif !important; color: var(--text) !important; }
html[data-theme] body #page-exam #exam-options .option::after { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; opacity: 0; background: var(--accent) var(--ix-check) center / 13px 13px no-repeat; transition: opacity .16s var(--ios-ease); }
html[data-theme] body #page-exam #exam-options .option.exam-selected, html[data-theme] body #page-exam #exam-options .option.ms-selected { border-color: var(--accent) !important; background: color-mix(in oklab, var(--accent) 7%, var(--surface)) !important; }
html[data-theme] body #page-exam #exam-options .option.exam-selected .opt-letter { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
html[data-theme] body #page-exam #exam-options .option.exam-selected::after, html[data-theme] body #page-exam #exam-options .option.ms-selected::after { opacity: 1; }
html[data-theme="light"] body #page-exam #exam-options .option::after { --ix-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf8f2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>"); }
/* a Sim Lab question: "Sim Lab" tag before the topic, the console card holds its own Reset */
html[data-theme] body #page-exam:has(#exam-options .exam-pbq) #exam-topic-lbl::before { content: "Sim Lab"; margin-right: 9px; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, transparent); border-radius: 999px; padding: 5px 8px; }
html[data-theme] body :is(#page-exam .exam-pbq, #page-sim-lab.isl-exam) { max-width: 100%; overflow-x: auto; }

/* dock: Prev · Flag · Next */
html[data-theme] body #page-exam .exam-nav-row { order: 4; display: flex !important; align-items: stretch !important; justify-content: flex-start !important; gap: 10px !important; margin: 0 !important; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent) !important; background: var(--bg) !important; }
html[data-theme] body #page-exam #exam-prev-btn { flex: 0 0 auto !important; width: 48px !important; min-width: 48px !important; height: auto !important; padding: 0 !important; display: grid !important; place-items: center; color: var(--text-mid) !important; background: transparent !important; border: 1px solid var(--border) !important; border-radius: 13px !important; box-shadow: none !important; transition: transform .14s var(--ios-ease), border-color .18s !important; }
html[data-theme] body #page-exam #exam-prev-btn::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ix-chev) center / contain no-repeat; mask: var(--ix-chev) center / contain no-repeat; }
html[data-theme] body #page-exam #exam-prev-btn:disabled { opacity: .35 !important; cursor: default; }
html[data-theme] body #page-exam .ix-flag[hidden] { display: inline-flex !important; }
html[data-theme] body #page-exam .ix-flag { flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 16px; border: 1px solid var(--border); border-radius: 13px; background: transparent; color: var(--text-mid); font: 650 13px/1 Inter, sans-serif; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s, transform .14s var(--ios-ease); }
html[data-theme] body #page-exam .ix-flag::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--ix-flag) center / contain no-repeat; mask: var(--ix-flag) center / contain no-repeat; }
html[data-theme] body #page-exam.ix-is-flagged .ix-flag { color: var(--accent-deep); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); background: color-mix(in oklab, var(--accent) 9%, transparent); }
html[data-theme] body #page-exam.ix-is-flagged .ix-flag::before { -webkit-mask-image: var(--ix-flag-fill); mask-image: var(--ix-flag-fill); }
html[data-theme] body #page-exam #exam-next-btn { flex: 1 1 auto !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto !important; height: auto !important; padding: 14px !important; border: 0 !important; border-radius: 13px !important; background: var(--accent) !important; color: var(--on-accent) !important; font: 700 15px/1 Inter, sans-serif !important; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent) !important; filter: none; transition: transform .15s var(--ios-ease), filter .2s !important; }
html[data-theme] body #page-exam #exam-next-btn .ix-arr { display: inline-flex !important; align-items: center; gap: 7px; }
html[data-theme] body #page-exam #exam-next-btn .ix-arr::after { content: ""; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--ix-arrow) center / contain no-repeat; mask: var(--ix-arrow) center / contain no-repeat; }
html[data-theme] body #page-exam #exam-prev-btn:active, html[data-theme] body #page-exam .ix-flag:active { transform: scale(0.97); }
html[data-theme] body #page-exam #exam-next-btn:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { html[data-theme] body #page-exam #exam-next-btn:hover { filter: brightness(1.05); } }

/* paused cover: the question is hidden while the clock is stopped (dg-system hides the rest) */
html[data-theme] body #page-exam .exam-paused { order: 3; flex: 1 1 auto !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: none !important; margin: 0 !important; padding: 0 30px 40px !important; border: 0 !important; border-radius: 0 !important; background: none !important; }
html[data-theme] body #page-exam .exam-paused::before { content: ""; width: 56px; height: 56px; border-radius: 999px; margin-bottom: 16px; background: var(--ix-pause-ic) center / 22px 22px no-repeat, color-mix(in oklab, var(--accent) 12%, var(--surface)); }
html[data-theme] body #page-exam .exam-paused-k { font: 800 10px/1 Inter, sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--text-dim) !important; }
html[data-theme] body #page-exam .exam-paused-t { display: flex !important; flex-direction: column; align-items: center; margin: 0 !important; font-size: inherit !important; font-weight: 400 !important; }
html[data-theme] body #page-exam .exam-paused-time { font: 600 34px/1 'Roboto Mono', monospace; color: var(--text); margin: 12px 0 6px; font-variant-numeric: tabular-nums; }
html[data-theme] body #page-exam .exam-paused-s { font-size: 13.5px; line-height: 1.55; color: var(--text-mid); margin: 0 0 22px; }
html[data-theme] body #page-exam .exam-paused-btn { width: 100% !important; max-width: 280px; border: 0 !important; border-radius: 13px !important; padding: 15px !important; background: var(--accent) !important; color: var(--on-accent) !important; font: 700 15px/1 Inter, sans-serif !important; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent) !important; transition: transform .15s var(--ios-ease) !important; }
html[data-theme] body #page-exam .exam-paused-btn:active { transform: scale(0.985); }
html[data-theme] body #page-exam .exam-paused-note { font-size: 12px !important; line-height: 1.5; color: var(--text-dim) !important; margin: 16px 0 0 !important; max-width: 30ch; }
html[data-theme] body #page-exam.is-paused .progress-wrap { display: none !important; }

/* icons (E2E paths) */
html[data-theme] body #page-exam {
  --ix-clock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='8'/><path d='M12 9v4l2.5 1.5M9 2h6'/></svg>");
  --ix-play: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M8 5l11 7-11 7z'/></svg>");
  --ix-pause: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'><rect x='6' y='5' width='4' height='14' rx='1'/><rect x='14' y='5' width='4' height='14' rx='1'/></svg>");
  --ix-flag: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4h11l-1.5 4L16 12H5'/></svg>");
  --ix-flag-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'><path d='M5 21V4h11l-1.5 4L16 12H5'/></svg>");
  --ix-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>");
  --ix-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
  --ix-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f2e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  --ix-pause-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0912f' stroke='%23e0912f' stroke-width='1.5' stroke-linejoin='round'><rect x='6' y='5' width='4' height='14' rx='1'/><rect x='14' y='5' width='4' height='14' rx='1'/></svg>");
}
html[data-theme="light"] body #page-exam { --ix-pause-ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23964514' stroke='%23964514' stroke-width='1.5' stroke-linejoin='round'><rect x='6' y='5' width='4' height='14' rx='1'/><rect x='14' y='5' width='4' height='14' rx='1'/></svg>"); }

/* ═════════════════════ EXAM End dialog + leave/abandon sheet (cert-ios-exam.html 597e06e8, B2) · ix- ═════════════════════ */
html[data-theme] body :is(#exam-modal, #isl-end) { background: color-mix(in oklab, var(--bg) 58%, transparent) !important; padding: 0 22px !important; font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
html[data-theme] body :is(#exam-modal, #isl-end) .modal-box { max-width: none !important; width: 100% !important; max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 20px 19px 18px !important; border: 1px solid var(--border) !important; border-radius: 22px !important; background: var(--surface) !important; box-shadow: 0 30px 70px -28px rgba(0,0,0,.6) !important; }
html[data-theme] body :is(#exam-modal, #isl-end) button { font-family: inherit; box-sizing: border-box; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-long { display: none !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-short[hidden] { display: inline !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .ed-modalhead { margin: 0 !important; padding: 0 !important; border: 0 !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .ed-modalhead-eyebrow { display: inline-flex !important; align-items: center !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; font: 800 9.5px/1 Inter, sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--text-dim) !important; opacity: 1 !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .ed-modalhead-eyebrow::before { content: "" !important; display: block !important; position: static !important; color: inherit !important; flex: 0 0 auto; width: 13px !important; height: 13px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: currentColor !important; -webkit-mask: var(--ix-done) center / contain no-repeat; mask: var(--ix-done) center / contain no-repeat; }
html[data-theme] body :is(#exam-modal, #isl-end) .ed-modalhead-title { font: 600 23px/1.1 Fraunces, Georgia, serif !important; letter-spacing: -0.012em !important; color: var(--text) !important; margin: 11px 0 0 !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .ed-modalhead-title em { font-style: normal !important; color: var(--accent) !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .modal-stats { display: flex !important; gap: 8px !important; margin: 16px 0 !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .modal-stat { flex: 1 1 0 !important; border: 1px solid var(--border) !important; border-radius: 13px !important; background: var(--bg) !important; padding: 12px 8px !important; text-align: center; }
html[data-theme] body :is(#exam-modal, #isl-end) .modal-stat .ms-val { display: block; font: 600 24px/1 Fraunces, Georgia, serif !important; color: var(--text) !important; font-variant-numeric: lining-nums tabular-nums; }
html[data-theme] body :is(#exam-modal, #isl-end) #modal-unanswered { color: var(--miss) !important; }
html[data-theme] body :is(#exam-modal, #isl-end) #modal-flagged { color: var(--accent-deep) !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .modal-stat .ms-lbl { display: block; font: 700 9.5px/1 Inter, sans-serif !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--text-dim) !important; margin-top: 7px; }
html[data-theme] body :is(#exam-modal, #isl-end) .modal-actions { display: block !important; margin: 0 !important; }
html[data-theme] body :is(#exam-modal, #isl-end) #modal-flagged-btn { display: none !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-review[hidden] { display: flex !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-review.is-empty { display: none !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-review { width: 100%; align-items: center; justify-content: center; gap: 8px; margin: 0 0 9px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: transparent; color: var(--text-mid); font: 650 13.5px/1 Inter, sans-serif; cursor: pointer; transition: background-color .18s, border-color .18s, transform .14s var(--ios-ease); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-review::before { content: ""; width: 15px; height: 15px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ix-flag) center / contain no-repeat; mask: var(--ix-flag) center / contain no-repeat; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-review:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { html[data-theme] body :is(#exam-modal, #isl-end) .ix-review:hover { border-color: color-mix(in oklab, var(--accent) 34%, var(--border)); background: color-mix(in oklab, var(--accent) 5%, transparent); } }
html[data-theme] body :is(#exam-modal, #isl-end) .modal-actions .btn-primary { display: block !important; width: 100% !important; margin: 0 !important; padding: 14px !important; border: 0 !important; border-radius: 13px !important; background: var(--accent) !important; color: var(--on-accent) !important; font: 700 15px/1 Inter, sans-serif !important; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent) !important; transition: transform .15s var(--ios-ease), filter .2s !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .modal-actions .btn-primary:active { transform: scale(0.985); }
html[data-theme] body :is(#exam-modal, #isl-end) .modal-actions .btn-danger { display: block !important; width: 100% !important; margin: 6px 0 0 !important; padding: 11px !important; border: 0 !important; background: transparent !important; color: var(--miss) !important; font: 650 13px/1 Inter, sans-serif !important; box-shadow: none !important; transition: opacity .15s var(--ios-ease) !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .modal-actions .btn-danger:active { opacity: .6; }
/* Jump to a question: 7 columns of 40px+ squares (44pt with the gap) */
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jump[hidden] { display: block !important; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jump { margin-top: 4px; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jump-t { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: none; padding: 10px 2px 6px; cursor: pointer; font: 650 12.5px/1 Inter, sans-serif; color: var(--text-mid); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jump-t::after { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--ix-down) center / contain no-repeat; mask: var(--ix-down) center / contain no-repeat; transition: transform .2s var(--ios-ease); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jump.open .ix-jump-t::after { transform: rotate(180deg); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jgrid { display: none; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; max-height: 236px; overflow-y: auto; scrollbar-width: thin; padding: 4px 3px 2px 1px; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jump.open .ix-jgrid { display: grid; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jgrid button { aspect-ratio: 1; min-height: 40px; padding: 0; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font: 700 12px/1 'Roboto Mono', monospace; cursor: pointer; transition: transform .14s var(--ios-ease); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jgrid button:active { transform: scale(0.96); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jgrid button.a { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); border-color: transparent; color: var(--text-mid); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jgrid button.f { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jgrid button.c { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jkey { display: flex; gap: 12px; margin-top: 8px; font: 600 10.5px/1 Inter, sans-serif; color: var(--text-dim); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jkey i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--border); }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jkey i.a { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); border-color: transparent; }
html[data-theme] body :is(#exam-modal, #isl-end) .ix-jkey i.f { background: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body :is(#exam-modal, #isl-end):not(.hidden) { animation: ix-fade .26s var(--ios-ease) both; }
  html[data-theme] body :is(#exam-modal, #isl-end):not(.hidden) .modal-box { animation: ix-pop .26s var(--ios-ease) both; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme] body :is(#exam-modal, #isl-end):not(.hidden) { animation: ix-fade .15s ease both; } }
/* closing: a short fade, the box settles back to 0.96 (no clicks while it leaves) */
html[data-theme] body :is(#exam-modal, #isl-end).ix-closing { pointer-events: none; animation: ix-fade-out .2s var(--ios-ease) both !important; }
html[data-theme] body :is(#exam-modal, #isl-end).ix-closing .modal-box { animation: ix-pop-out .2s var(--ios-ease) both !important; }
@media (prefers-reduced-motion: reduce) { html[data-theme] body :is(#exam-modal, #isl-end).ix-closing .modal-box { animation: none !important; } }
@keyframes ix-fade-out { to { opacity: 0; } }
@keyframes ix-pop-out { to { opacity: 0; transform: scale(0.96); } }
@keyframes ix-fade { from { opacity: 0; } }
@keyframes ix-pop { from { opacity: 0; transform: scale(0.96); } }

/* the leave / abandon sheet (E2E .lsheet): 360ms in, 200ms out */
:is(#exam-sheet-scrim, #igt-topics-scrim, #ist-sheet-scrim) { position: fixed; inset: 0; z-index: 400; background: color-mix(in oklab, var(--bg) 58%, transparent); opacity: 0; transition: opacity .2s var(--ios-ease); }
:is(#exam-sheet-scrim, #igt-topics-scrim, #ist-sheet-scrim).open { opacity: 1; transition: opacity .26s var(--ios-ease); }
:is(#exam-sheet, #igt-topics, #ist-sheet) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 401; box-sizing: border-box; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--text); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; transform: translateY(100%); transition: transform .2s var(--ios-ease); }
:is(#exam-sheet, #igt-topics, #ist-sheet).open { transform: none; transition: transform .36s var(--ios-ease); }
:is(#exam-sheet, #igt-topics, #ist-sheet) .ix-sheet-grip { width: 38px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--text) 18%, transparent); margin: 0 auto 16px; }
:is(#exam-sheet, #igt-topics, #ist-sheet) h3 { font: 600 21px/1.2 Fraunces, Georgia, serif !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--text); margin: 0 0 6px; }
:is(#exam-sheet, #igt-topics, #ist-sheet) .ix-sheet-body { font-size: 13.5px; line-height: 1.5; color: var(--text-mid); margin: 0 0 18px; }
:is(#exam-sheet, #igt-topics, #ist-sheet) button { font-family: inherit; box-sizing: border-box; cursor: pointer; }
:is(#exam-sheet, #igt-topics, #ist-sheet) .ix-sheet-stay { width: 100%; border: 0; border-radius: 13px; padding: 15px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
:is(#exam-sheet, #igt-topics, #ist-sheet) .ix-sheet-stay:active { transform: scale(0.985); }
:is(#exam-sheet, #igt-topics, #ist-sheet) .ix-sheet-go { width: 100%; margin-top: 6px; border: 0; background: transparent; padding: 12px; font: 650 13.5px/1 Inter, sans-serif; color: var(--miss); transition: opacity .15s var(--ios-ease); }
:is(#exam-sheet, #igt-topics, #ist-sheet) .ix-sheet-go:active { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  :is(#exam-sheet, #igt-topics, #ist-sheet) { transform: none; opacity: 0; transition: opacity .2s ease; }
  :is(#exam-sheet, #igt-topics, #ist-sheet).open { opacity: 1; transition: opacity .2s ease; }
}
html[data-theme] body :is(#exam-modal, #isl-end), #exam-sheet {
  --ix-flag: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4h11l-1.5 4L16 12H5'/></svg>");
  --ix-done: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>");
  --ix-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}

/* ═════════════════════ LIFT B3a · SCAFFOLD (Drills) ═════════════════════ */
#page-drills:has(#ios-drills:not(:empty)) > :not(#ios-drills) { display: none !important; }
/* the drawing has no app top bar and owns its own 22px gutter; keep the shell's tab-bar space at the bottom */
body:has(#page-drills.active #ios-drills:not(:empty)) #app-topbar, body:has(#page-drills.active #ios-drills:not(:empty)) .app-topbar { display: none !important; }
html[data-theme] body #page-drills:has(#ios-drills:not(:empty)) { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }

/* ═════════════════════ DRILLS (cert-ios-drills.html ab952bb4, B3a) · id- ═════════════════════ */
/* Ported from the drawn E2E (scoped to #ios-drills, prefix id-); the tab bar stays as today. */
#ios-drills button { font-family: inherit; box-sizing: border-box; }
#ios-drills .id-domain { display: block; width: 100%; text-align: left; color: inherit; font: inherit; appearance: none; -webkit-appearance: none; }
#ios-drills .id-domain-bar, #ios-drills .id-domain-mast { display: block; }
#ios-drills.id-static .id-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }   /* re-renders that are not navigation */
#ios-drills .id-btn-drill { min-height: 44px; }   /* 44pt floor (the drawing's 12px padding gives 41.8) */
#ios-drills .id-app-theme { position: relative; }
#ios-drills .id-app-theme::after { content: ""; position: absolute; inset: -5px; }   /* 44pt hit area around the drawn 34px button */
#ios-drills .id-hdr { display: flex; align-items: center; gap: 11px; padding: 14px 22px 10px; }
#ios-drills .id-hdr h1 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 21px; letter-spacing: -0.01em; margin: 0; color: var(--text); flex: 1; }
#ios-drills .id-hdr .id-plan-tag { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); background: color-mix(in oklab, var(--text) 6%, transparent); border: 1px solid var(--border); border-radius: 999px; padding: 6px 9px; }
#ios-drills .id-app-theme { flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text-mid); transition:transform .14s var(--ios-ease), border-color .18s; }
#ios-drills .id-app-theme:active { transform:scale(.94); }
@media (hover:hover) and (pointer:fine) {
#ios-drills .id-app-theme:hover { border-color:color-mix(in oklab,var(--accent) 36%,var(--border)); }
}
#ios-drills .id-app-theme svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#ios-drills .id-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 22px; }
#ios-drills .id-lede { font: 500 12.5px/1.5 Inter, sans-serif; color: var(--text-dim); margin: 2px 2px 14px; }
#ios-drills .id-sect { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 18px 2px 11px; }
#ios-drills .id-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px 16px; margin-bottom: 11px; }
#ios-drills .id-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#ios-drills .id-card-title { font: 650 14.5px/1.2 Inter, sans-serif; color: var(--text); }
#ios-drills .id-card-note { font-size: 12px; line-height: 1.45; color: var(--text-dim); margin: 9px 0 0; }
#ios-drills .id-card-note b { color: var(--text-mid); font-weight: 650; }
#ios-drills .id-count-pill { flex: 0 0 auto; font: 700 10.5px/1 'Roboto Mono', monospace; color: var(--accent-deep);
    border: 1px solid color-mix(in oklab, var(--accent) 38%, var(--border)); background: color-mix(in oklab, var(--accent) 10%, var(--surface));
    border-radius: 999px; padding: 6px 10px; }
#ios-drills .id-btn-drill { width: 100%; margin-top: 12px; border: none; border-radius: 12px; padding: 12px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 14px/1 Inter, sans-serif; transition: transform .14s var(--ios-ease), filter .2s; }
#ios-drills .id-btn-drill:active { transform: scale(0.985); }
@media (hover:hover) and (pointer:fine) {
#ios-drills .id-btn-drill:hover { filter: brightness(1.06); }
}
#ios-drills .id-topic-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
#ios-drills .id-chip { font: 600 11.5px/1 Inter, sans-serif; color: var(--text-mid); border: 1px solid var(--border); background: var(--surface3); border-radius: 999px; padding: 7px 11px; }
#ios-drills .id-chip b { color: var(--miss); font-weight: 700; font-variant-numeric: tabular-nums; }
#ios-drills .id-domain { border: 1px solid var(--border); border-radius: 14px; background: var(--surface3); padding: 12px 14px; margin-bottom: 9px; cursor: pointer; transition: border-color .18s, transform .12s var(--ios-ease); }
#ios-drills .id-domain:active { transform: scale(0.995); }
@media (hover:hover) and (pointer:fine) {
#ios-drills .id-domain:hover { border-color: color-mix(in oklab, var(--accent) 36%, var(--border)); }
}
#ios-drills .id-domain-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#ios-drills .id-domain-top b { font: 650 13.5px/1.2 Inter, sans-serif; color: var(--text); }
#ios-drills .id-domain-wt { flex: 0 0 auto; font: 600 10px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-drills .id-domain-bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; margin-top: 8px; position: relative; }
#ios-drills .id-domain-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); transition: width .7s var(--ios-ease); }
#ios-drills .id-domain-bar.id-full > span { background: var(--green); }
#ios-drills .id-domain-mast { font: 600 9.5px/1 Inter, sans-serif; color: var(--text-dim); margin-top: 6px; }
#ios-drills .id-domain-mast b { color: var(--text-mid); font-weight: 700; }
#ios-drills .id-foot-note { font: 500 11px/1.5 Inter, sans-serif; color: var(--text-dim); text-align: center; margin: 16px 8px 4px; }
@media (prefers-reduced-motion: no-preference) {
@keyframes id-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
#ios-drills .id-reveal { animation: id-rise .5s var(--ios-ease) backwards; }
#ios-drills .id-reveal:nth-child(1) {animation-delay:.04s}
#ios-drills .id-reveal:nth-child(2) {animation-delay:.08s}
#ios-drills .id-reveal:nth-child(3) {animation-delay:.12s}
#ios-drills .id-reveal:nth-child(4) {animation-delay:.16s}
#ios-drills .id-reveal:nth-child(5) {animation-delay:.20s}
#ios-drills .id-reveal:nth-child(6) {animation-delay:.24s}
#ios-drills .id-reveal:nth-child(7) {animation-delay:.28s}
#ios-drills .id-reveal:nth-child(8) {animation-delay:.32s}
#ios-drills .id-reveal:nth-child(9) {animation-delay:.36s}
#ios-drills .id-reveal:nth-child(10) {animation-delay:.40s}
#ios-drills .id-reveal:nth-child(11) {animation-delay:.44s}
#ios-drills .id-reveal:nth-child(12) {animation-delay:.48s}
}
#ios-drills .id-card-title-wrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
#ios-drills .id-lock-pill { display: inline-flex; align-items: center; gap: 4px; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep);
    border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); background: color-mix(in oklab, var(--accent) 9%, transparent); border-radius: 999px; padding: 4px 7px; }
#ios-drills .id-lock-pill svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#ios-drills .id-btn-drill:disabled { background: var(--surface3); color: var(--text-dim); cursor: default; box-shadow: none; }
#ios-drills .id-btn-drill:disabled:active { transform: none; }
#ios-drills .id-more { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
#ios-drills .id-mrow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: 60px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background-color .18s, transform .12s var(--ios-ease); }
#ios-drills .id-mrow + .id-mrow { border-top: 1px solid color-mix(in oklab, var(--border) 80%, transparent); }
#ios-drills .id-mrow:active { transform: scale(0.99); }
@media (hover:hover) and (pointer:fine) {
#ios-drills .id-mrow:hover { background: color-mix(in oklab, var(--accent) 4%, transparent); }
}
#ios-drills .id-mi { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 11%, var(--surface)); }
#ios-drills .id-mi svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-drills .id-mtext { flex: 1 1 auto; min-width: 0; }
#ios-drills .id-mhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#ios-drills .id-mname { display: block; font: 650 13.5px/1.25 Inter, sans-serif; color: var(--text); }
#ios-drills .id-mline { display: block; font: 500 11.5px/1.35 Inter, sans-serif; color: var(--text-dim); margin-top: 3px; }
#ios-drills .id-mpill { flex: 0 0 auto; font: 700 10px/1 Inter, sans-serif; border-radius: 999px; padding: 5px 8px; white-space: nowrap; }
#ios-drills .id-mpill.id-free { color: var(--accent-deep); border: 1px solid color-mix(in oklab, var(--accent) 38%, var(--border)); background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
#ios-drills .id-mpill.id-done { color: var(--text-dim); border: 1px solid var(--border); background: var(--surface3); }
#ios-drills .id-mchev { flex: 0 0 auto; width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }


/* ═════════════════════ LIFT B3b1 · SHEETS (cert-ios-simlab.html ?v=enlarge) · isl- ═════════════════════ */
/* the enlarge sheet: a copy of a passive Sim Lab reference, full height, scrollable both ways; 360ms in, 200ms out */
#isl-enlarge-scrim { position: fixed; inset: 0; z-index: 400; background: color-mix(in oklab, var(--bg) 58%, transparent); opacity: 0; transition: opacity .2s var(--ios-ease); }
#isl-enlarge-scrim.open { opacity: 1; transition: opacity .26s var(--ios-ease); }
#isl-enlarge { position: fixed; left: 0; right: 0; bottom: 0; top: calc(48px + env(safe-area-inset-top)); z-index: 401; box-sizing: border-box; display: flex; flex-direction: column; border-top: 1px solid var(--border); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--text); font-family: Inter, -apple-system, sans-serif; transform: translateY(100%); transition: transform .2s var(--ios-ease); }
#isl-enlarge[hidden] { display: none; }
#isl-enlarge.open { transform: none; transition: transform .36s var(--ios-ease); }
#isl-enlarge .isl-es-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px; border-bottom: 1px solid var(--border); }
#isl-enlarge .ix-sheet-grip { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 38px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--text) 18%, transparent); }
#isl-enlarge h3 { flex: 1; margin: 14px 0 0; font: 600 18px/1.2 Fraunces, Georgia, serif !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--text); }
#isl-enlarge .isl-es-close { position: relative; margin-top: 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text-mid); font: 650 12.5px/1 Inter, sans-serif; padding: 9px 13px; cursor: pointer; transition: transform .15s var(--ios-ease); }
#isl-enlarge .isl-es-close::after { content: ""; position: absolute; inset: -7px; }
#isl-enlarge .isl-es-close:active { transform: scale(0.97); }
#isl-enlarge .isl-es-body { flex: 1; overflow: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
#isl-enlarge .isl-es-body > * { width: 640px; max-width: none; margin: 0; }
#isl-enlarge .isl-es-body .isl-ref-head { display: none; }
html[data-theme] body #isl-enlarge .isl-es-body > .exam-pbq { width: 640px; max-width: none; overflow: visible; }   /* the exam's .exam-pbq width cap must not shrink the enlarged copy */
#isl-enlarge .isl-es-hint { margin: 0; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); text-align: center; font: 500 11px/1.4 Inter, sans-serif; color: var(--text-dim, var(--text-mid)); }
@media (prefers-reduced-motion: reduce) {
  #isl-enlarge { transform: none; opacity: 0; transition: opacity .2s ease; }
  #isl-enlarge.open { opacity: 1; transition: opacity .2s ease; }
}

/* ═════════════════════ LIFT B3b1 · SCAFFOLD (Sim Lab) ═════════════════════ */
/* no app top bar on the three Sim Lab pages (the tab bar hides on the round and verdict via lift-shell HIDE_ON) */
body:has(#page-sim-lab-entry.active) #app-topbar, body:has(#page-sim-lab-entry.active) .app-topbar { display: none !important; }
body:has(#page-sim-lab.active) #app-topbar, body:has(#page-sim-lab.active) .app-topbar { display: none !important; }
body:has(#page-sim-lab-result.active) #app-topbar, body:has(#page-sim-lab-result.active) .app-topbar { display: none !important; }
#page-sim-lab-entry:has(#isl-entry:not(:empty)) > :not(#isl-entry) { display: none !important; }
#page-sim-lab-entry.active:has(#isl-entry:not(:empty)) { animation: none !important; transform: none !important; }   /* a transformed page would trap the fixed Start dock */
html[data-theme] body #page-sim-lab-entry:has(#isl-entry:not(:empty)) { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }

/* ═════════════════════ LIFT B3b1 · START (cert-ios-simlab.html default, ac0d9180) · isl- ═════════════════════ */
/* The custom-quiz language: cert strip, mode cards, a rounds count over a segmented track, Start docked above the tab bar. */
#isl-entry.isl-static .isl-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
#isl-entry button { font-family: inherit; color: inherit; appearance: none; -webkit-appearance: none; }
#isl-entry svg { stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#isl-entry .isl-hdr { display: flex; align-items: flex-start; gap: 11px; padding: 14px 20px 6px; }   /* no env(): the iOS web view already clears the status bar (as #ios-drills .id-hdr) */
#isl-entry .isl-back { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .14s var(--ios-ease); }
#isl-entry .isl-back::after { content: ""; position: absolute; inset: -5px; }   /* 44pt hit area around the drawn 34px button */
#isl-entry .isl-back:active { transform: scale(0.94); }
#isl-entry .isl-back svg { width: 16px; height: 16px; stroke-width: 2.2; }
#isl-entry .isl-title { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
#isl-entry .isl-title h1 { font: 600 21px/1.05 Fraunces, Georgia, serif; letter-spacing: -0.01em; margin: 0; color: var(--text); }
#isl-entry .isl-title span { display: block; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 4px; }
#isl-entry .isl-body { flex: 1 0 auto; padding: 4px 20px calc(140px + var(--lift-tab-h, 64px) + env(safe-area-inset-bottom)); }
#isl-entry .isl-cert-strip { display: flex; align-items: center; gap: 10px; margin: 10px 2px 4px; }
#isl-entry .isl-cm { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in oklab, var(--accent) 13%, var(--surface3)); color: var(--accent-deep); display: grid; place-items: center; font: 800 11px/1 Inter, sans-serif; }
#isl-entry .isl-cn b { display: block; font: 650 13.5px/1.05 Inter, sans-serif; color: var(--text); }
#isl-entry .isl-cn span { display: block; font: 600 10.5px/1 'Roboto Mono', ui-monospace, monospace; color: var(--text-dim); margin-top: 2px; }
#isl-entry .isl-lede { font: 500 13.5px/1.5 Inter, sans-serif; color: var(--text-mid); margin: 12px 2px 0; max-width: 36ch; }
#isl-entry .isl-sect { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 18px 2px 10px; }
#isl-entry .isl-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
#isl-entry .isl-mode { text-align: left; border: 1.5px solid var(--border); background: var(--surface); border-radius: 15px; padding: 13px 13px 12px; cursor: pointer; transition: border-color .18s, background-color .18s, transform .12s var(--ios-ease); }
#isl-entry .isl-mode:active { transform: scale(0.985); }
#isl-entry .isl-mi { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 10%, var(--surface3)); display: grid; place-items: center; margin-bottom: 10px; color: var(--accent-deep); }
#isl-entry .isl-mi svg { width: 18px; height: 18px; stroke-width: 1.9; }
#isl-entry .isl-mode b { display: flex; align-items: center; gap: 6px; font: 650 14px/1.1 Inter, sans-serif; color: var(--text); }
#isl-entry .isl-ml { display: block; font: 500 11.5px/1.35 Inter, sans-serif; color: var(--text-dim); margin-top: 4px; }
#isl-entry .isl-tick { margin-left: auto; display: grid; color: var(--accent-deep); }
#isl-entry .isl-tick svg { width: 16px; height: 16px; stroke-width: 2.6; }
#isl-entry .isl-mode[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
#isl-entry .isl-pro-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, var(--surface3)); border-radius: 999px; padding: 4px 7px; }
#isl-entry .isl-pro-tag svg { width: 9px; height: 9px; stroke-width: 2.6; }
#isl-entry .isl-count { display: flex; align-items: baseline; gap: 9px; margin: 2px 2px 8px; }
#isl-entry .isl-bn { font: 600 44px/1 Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
#isl-entry .isl-bl { font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
#isl-entry .isl-cseg { display: flex; gap: 5px; background: color-mix(in oklab, var(--text) 5%, var(--surface3)); border: 1px solid var(--border); border-radius: 13px; padding: 4px; }
#isl-entry .isl-cseg button { flex: 1 1 0; min-height: 44px; border: none; background: transparent; cursor: pointer; border-radius: 9px; font: 700 14px/1 Inter, sans-serif; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: background-color .2s var(--ios-ease), color .2s, transform .14s var(--ios-ease); }
#isl-entry .isl-cseg button:active { transform: scale(0.96); }
#isl-entry .isl-cseg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--accent) 70%, transparent); }
#isl-entry .isl-cseg button[data-locked] { color: color-mix(in oklab, var(--text-dim) 75%, transparent); }
#isl-entry .isl-cseg button svg { width: 11px; height: 11px; stroke-width: 2.4; }
#isl-entry .isl-cap { margin: 9px 2px 0; font: 600 12px/1.45 Inter, sans-serif; color: var(--text-dim); }
#isl-entry .isl-cap b { color: var(--text-mid); }
#isl-entry .isl-dock { position: fixed; left: 50%; transform: translateX(-50%); width: min(var(--lift-col-w, 100%), 100%); bottom: calc(var(--lift-tab-h, 64px) + env(safe-area-inset-bottom)); z-index: 95; padding: 12px 20px 10px; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: color-mix(in oklab, var(--bg) 86%, var(--surface)); }
#isl-entry .isl-start { width: 100%; min-height: 48px; border: none; border-radius: 13px; padding: 14px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#isl-entry .isl-start:active { transform: scale(0.985); }
#isl-entry .isl-start svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
#isl-entry .isl-qc { font: 700 12px/1 'Roboto Mono', ui-monospace, monospace; opacity: 0.82; }
#isl-entry .isl-foot { text-align: center; font: 500 10.5px/1.3 Inter, sans-serif; color: var(--text-dim); margin: 9px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes isl-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  #isl-entry .isl-reveal { animation: isl-rise .5s var(--ios-ease) backwards; }
  #isl-entry .isl-reveal:nth-child(2) { animation-delay: .04s; } #isl-entry .isl-reveal:nth-child(3) { animation-delay: .08s; }
  #isl-entry .isl-reveal:nth-child(4) { animation-delay: .12s; } #isl-entry .isl-reveal:nth-child(5) { animation-delay: .16s; }
  #isl-entry .isl-reveal:nth-child(6) { animation-delay: .20s; } #isl-entry .isl-reveal:nth-child(7) { animation-delay: .24s; }
  #isl-entry .isl-reveal:nth-child(8) { animation-delay: .28s; } #isl-entry .isl-reveal:nth-child(9) { animation-delay: .32s; }
}

/* ═════════════════════ LIFT B3b1 · ROUND (cert-ios-simlab.html ?v=round, ?v=round-map, ?v=reset) · isl- ═════════════════════ */
/* Practice only (#page-sim-lab.isl-practice); Sim Lab Exam mode keeps today's look until B3b2. Engine DOM, restyled. */
html[data-theme] body #page-sim-lab.isl-practice.active { padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none !important; transform: none !important; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#page-sim-lab.isl-practice .sl-shell { max-width: none; padding: 0; }
/* top bar: Leave · Round N of M · timer, ticks under it */
#page-sim-lab.isl-practice .sl-topbar { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 18px 8px; }
#page-sim-lab.isl-practice .sl-topbar > [data-action="simLabExit"] { order: -1; position: relative; flex: 0 0 auto; width: auto; min-height: 0; margin: 0; font: 650 12.5px/1 Inter, sans-serif; color: var(--text-mid); border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 9px 13px; box-shadow: none; transition: transform .15s var(--ios-ease); }
#page-sim-lab.isl-practice .sl-topbar > [data-action="simLabExit"]::after { content: ""; position: absolute; inset: -8px -6px; }
#page-sim-lab.isl-practice .sl-topbar > [data-action="simLabExit"] { min-height: 0 !important; height: auto !important; }   /* a base .btn min-height made the drawn pill a 48px oval */
#page-sim-lab.isl-practice #sl-timer-slot { display: flex; align-items: center; }
#page-sim-lab.isl-practice #sl-timer-slot .sl-nudge.sl-hidden { display: none; }
#page-sim-lab.isl-practice .sl-topbar > [data-action="simLabExit"]:active { transform: scale(0.97); }
#page-sim-lab.isl-practice .sl-strip { flex: 1 1 auto; }
#page-sim-lab.isl-practice .sl-strip-label { display: none; }
#page-sim-lab.isl-practice .slr-round-pill { font: 800 10.5px/1 Inter, sans-serif; letter-spacing: 0.04em; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 11%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 999px; padding: 6px 10px; }
#page-sim-lab.isl-practice #sl-clock-slot:empty { display: none; }
#page-sim-lab.isl-practice .sl-timer { padding: 0; border: 0; border-radius: 0; background: transparent; display: inline-flex; align-items: center; gap: 5px; font: 700 14px/1 'Roboto Mono', ui-monospace, monospace; color: var(--text); font-variant-numeric: tabular-nums; }
#page-sim-lab.isl-practice .sl-timer-ic { font-size: 0; width: 13px; height: 13px; background: var(--accent-deep); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='8'/><path d='M12 9v4l2.5 2M9 2h6'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='8'/><path d='M12 9v4l2.5 2M9 2h6'/></svg>") center / contain no-repeat; }
#page-sim-lab.isl-practice .sl-nudge:not(.sl-hidden) { position: fixed; left: 16px; right: 16px; top: calc(max(12px, env(safe-area-inset-top)) + 52px); z-index: 90; border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 13px; background: color-mix(in oklab, var(--accent) 7%, var(--surface)); padding: 10px 13px; font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); box-shadow: 0 12px 24px -16px color-mix(in oklab, var(--text) 40%, transparent); }
#page-sim-lab.isl-practice .slr-dots { display: flex; gap: 5px; margin: 0; padding: 2px 18px 6px; }
#page-sim-lab.isl-practice .slr-dot { flex: 1 1 0; width: auto; height: 5px; border-radius: 3px; background: var(--track); }
#page-sim-lab.isl-practice .slr-dot.done { background: color-mix(in oklab, var(--accent) 55%, var(--track)); }
#page-sim-lab.isl-practice .slr-dot.now { background: var(--accent); }
/* body + cards */
#page-sim-lab.isl-practice #sl-body { padding: 4px 20px calc(96px + env(safe-area-inset-bottom)); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-scn-prose,
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-scn-logs,
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-ref,
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-step { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px 16px; margin: 0 0 11px; box-shadow: none; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-scn-prose { font: 500 13.5px/1.55 Inter, sans-serif; color: var(--text); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .isl-scn-k { display: flex; align-items: center; gap: 7px; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 8px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .isl-scn-k svg { width: 13px; height: 13px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-scn-prose mark { background: color-mix(in oklab, var(--accent) 18%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-scn-logs { font: 500 11.5px/1.65 'Roboto Mono', ui-monospace, monospace; color: var(--text-mid); white-space: pre; overflow-x: auto; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-ref { overflow-x: auto; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-ref:has(> .term) { padding: 0; overflow: hidden; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .isl-ref-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .isl-ref-head > span { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-dim); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .isl-enlarge { position: relative; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--accent-deep); font: 700 11px/1 Inter, sans-serif; padding: 7px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: transform .15s var(--ios-ease); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .isl-enlarge::after { content: ""; position: absolute; inset: -9px -4px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .isl-enlarge:active { transform: scale(0.97); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .isl-enlarge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* terminal = the console card: host name + "console", mono body */
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .term { margin: 0; border: 0; border-radius: 0; background: transparent; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .term-head { padding: 9px 12px; background: transparent; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .term-host .lamp, :is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .term-sess { display: none; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .term-host-name { font: 700 10.5px/1 'Roboto Mono', ui-monospace, monospace; color: var(--text-mid); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .term-host-name::after { content: " console"; font-weight: 700; color: var(--text-dim); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .term-body { font: 500 11.5px/1.65 'Roboto Mono', ui-monospace, monospace; padding: 6px 0 8px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .term-cmd .pmt { color: var(--accent-deep); }
/* steps */
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-step-k { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 8px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-step .sl-prompt { font: 600 15.5px/1.35 Inter, sans-serif; color: var(--text); margin: 0 0 12px; letter-spacing: -0.005em; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-analyze-block { display: grid; gap: 8px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-analyze-line { display: flex; width: 100%; min-height: 44px; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); padding: 10px 12px; font: 600 12px/1.35 'Roboto Mono', ui-monospace, monospace; color: var(--text-mid); text-align: left; cursor: pointer; transition: background-color .16s, border-color .16s, transform .12s var(--ios-ease); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-analyze-line::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border); box-sizing: border-box; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-analyze-line:active { transform: scale(0.98); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-analyze-line.sl-sel { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); color: var(--text); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-analyze-line.sl-sel::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 11px no-repeat; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-cmd-menu { display: grid; gap: 8px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-cmd { min-height: 44px; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); padding: 10px 12px; font: 600 12px/1.35 'Roboto Mono', ui-monospace, monospace; color: var(--text-mid); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-cmd.used { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); color: var(--text); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-order-list { display: flex; flex-direction: column; gap: 8px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-order-row, :is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-chip, :is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-match-l, :is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-match-r { min-height: 48px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 10px 12px; font: 500 13px/1.35 Inter, sans-serif; color: var(--text); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-grip { color: var(--text-dim); }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-cat-cols, :is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-match-grid { grid-template-columns: 1fr; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-field-label, :is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-cfg-label { display: block; font: 700 11.5px/1.35 Inter, sans-serif; color: var(--text-mid); margin: 12px 0 7px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-cfg-select, :is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-field-input { width: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); padding: 0 14px; font: 500 13.5px/1.3 Inter, sans-serif; scroll-margin-bottom: 120px; box-sizing: border-box; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-dp-toggle { display: flex; gap: 6px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam, #page-exam .exam-pbq, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-dp-btn { flex: 1 1 0; min-height: 44px; }
/* dock: Reset · Submit answers */
:is(#page-sim-lab.isl-practice #sl-body, #page-decision-lab.idl-practice #dl-body, #page-decision-lab.idl-exam #dl-body) .sl-actions { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(var(--lift-col-w, 100%), 100%); z-index: 95; display: flex; justify-content: stretch; flex-wrap: nowrap; gap: 10px; margin: 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); box-sizing: border-box; }
#page-sim-lab.isl-practice .sl-actions .sl-reset { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border-radius: 13px; padding: 13px 16px; font: 650 14px/1 Inter, sans-serif; color: var(--text-mid); background: transparent; }
#page-sim-lab.isl-practice .sl-actions .sl-reset::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7L3 8'/><path d='M3 3v5h5'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7L3 8'/><path d='M3 3v5h5'/></svg>") center / contain no-repeat; }
:is(#page-sim-lab.isl-practice, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-actions .gnt-cta { flex: 1 1 auto; width: auto; margin: 0; border: none; border-radius: 13px; padding: 14px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); }
:is(#page-sim-lab.isl-practice, #page-decision-lab.idl-practice, #page-decision-lab.idl-exam) .sl-actions .gnt-cta:active { transform: scale(0.985); }
/* loader: the quiz's generating treatment */
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam) .isl-loader { padding: 8px 0 0; text-align: center; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam) .isl-skel { position: relative; overflow: hidden; height: 92px; border-radius: 12px; background: var(--surface3); margin-bottom: 11px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam) .isl-skel-2 { height: 150px; } :is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam) .isl-skel-3 { height: 120px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam) .isl-loader .slr-loader-t { font: 600 19px/1.3 Fraunces, Georgia, serif; color: var(--text); margin-top: 22px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam) .isl-loader .slr-loader-s { font: 500 12px/1.4 Inter, sans-serif; color: var(--text-dim); margin-top: 6px; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam) .isl-gen-track { width: 60%; height: 3px; margin: 16px auto 0; border-radius: 999px; background: var(--track); overflow: hidden; }
:is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam) .isl-gen-bar { width: 40%; height: 100%; border-radius: 999px; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes isl-round-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  #page-sim-lab.isl-practice .sl-scenario.isl-enter > :not(.sl-actions) { animation: isl-round-in .5s var(--ios-ease) backwards; }
  #page-sim-lab.isl-practice .sl-scenario.isl-enter > :nth-child(2) { animation-delay: .05s; }
  #page-sim-lab.isl-practice .sl-scenario.isl-enter > :nth-child(3) { animation-delay: .10s; }
  #page-sim-lab.isl-practice .sl-scenario.isl-enter > :nth-child(4) { animation-delay: .15s; }
  #page-sim-lab.isl-practice .sl-scenario.isl-enter > :nth-child(n+5) { animation-delay: .20s; }
  @keyframes isl-shim { to { transform: translateX(100%); } }
  @keyframes isl-ind { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
  :is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam) .isl-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text) 9%, transparent), transparent); animation: isl-shim 1.4s linear infinite; }
  :is(#page-sim-lab.isl-practice, #page-sim-lab.isl-exam) .isl-gen-bar { animation: isl-ind 1.5s var(--ios-ease) infinite; }
}

/* ═════════════════════ LIFT B3b1 · VERDICT (cert-ios-simlab.html ?v=verdict, ?v=verdict-open) · isl- ═════════════════════ */
html[data-theme] body #page-sim-lab-result.active:has(.isl-vbody) { padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none !important; transform: none !important; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#page-sim-lab-result #sl-result-root:has(.isl-vbody) { max-width: none; margin: 0; padding: 0; display: block; }
#sl-result-root .isl-vbody { padding: 12px 20px calc(100px + env(safe-area-inset-bottom)); }
#sl-result-root .isl-vkick { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 11px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
#sl-result-root .isl-vkick svg, #sl-result-root .isl-srow > svg, #sl-result-root .isl-k svg, #sl-result-root .isl-upsell svg { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#sl-result-root .isl-vkick svg { width: 14px; height: 14px; stroke-width: 2.4; }
#sl-result-root .isl-vtitle { font: 600 32px/1.05 Fraunces, Georgia, serif !important; letter-spacing: -0.016em !important; text-transform: none !important; color: var(--text); margin: 0; }
#sl-result-root .isl-vtitle em { font-style: normal; color: var(--accent); }
#sl-result-root .isl-vsub { font: 500 13.5px/1.5 Inter, sans-serif; color: var(--text-mid); margin: 10px 0 0; }
#sl-result-root .isl-vscore { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; }
#sl-result-root .isl-vscore b { font: 600 52px/0.95 Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
#sl-result-root .isl-vscore span { font: 700 13px/1 Inter, sans-serif; color: var(--text-dim); }
#sl-result-root .isl-vmeter { height: 7px; border-radius: 999px; background: var(--track); margin-top: 12px; overflow: hidden; }
#sl-result-root .isl-vmeter i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
#sl-result-root .isl-sect { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 18px 2px 10px; }
#sl-result-root .isl-srow { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 12px 14px; margin: 0 0 9px; cursor: pointer; font: inherit; color: inherit; appearance: none; -webkit-appearance: none; box-sizing: border-box; transition: transform .14s var(--ios-ease); }
#sl-result-root .isl-srow:active { transform: scale(.99); }
#sl-result-root .isl-sn2 { flex: 1 1 auto; min-width: 0; }
#sl-result-root .isl-st { display: block; font: 600 14px/1.25 Inter, sans-serif; color: var(--text); }
#sl-result-root .isl-ss { display: block; font: 500 11px/1.3 'Roboto Mono', ui-monospace, monospace; color: var(--text-dim); margin-top: 5px; }
#sl-result-root .isl-sv { flex: 0 0 auto; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 6px 9px; }
#sl-result-root .isl-sv.isl-ok { color: var(--green); background: color-mix(in oklab, var(--green) 14%, transparent); }
#sl-result-root .isl-sv.isl-part { color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 13%, transparent); }
#sl-result-root .isl-sv.isl-no { color: var(--miss); background: color-mix(in oklab, var(--miss) 13%, transparent); }
#sl-result-root .isl-srow > svg { flex: 0 0 auto; width: 16px; height: 16px; stroke-width: 2.1; color: var(--text-dim); transition: transform .2s var(--ios-ease); }
#sl-result-root .isl-srow[aria-expanded="true"] > svg { transform: rotate(90deg); }
#sl-result-root .isl-sdet { margin: -4px 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface3); }
#sl-result-root .isl-sdet[hidden] { display: none; }
#sl-result-root .isl-sdet .sls-ans-scn { display: none; }   /* the drawing's panel shows the steps only; the row already names the round */
#sl-result-root .isl-slip { border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border)); border-radius: 14px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)); padding: 13px 14px; margin-top: 6px; }
#sl-result-root .isl-k { display: inline-flex; align-items: center; gap: 6px; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-deep); }
#sl-result-root .isl-k svg { width: 13px; height: 13px; stroke-width: 2.1; }
#sl-result-root .isl-slip p { margin: 7px 0 0; font: 500 12.5px/1.5 Inter, sans-serif; color: var(--text-mid); }
#sl-result-root .isl-upsell { width: 100%; min-height: 44px; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: 13px; background: transparent; padding: 0 14px; cursor: pointer; font: 650 13px/1.3 Inter, sans-serif; color: var(--accent-deep); text-align: left; appearance: none; -webkit-appearance: none; box-sizing: border-box; transition: transform .15s var(--ios-ease); }
#sl-result-root .isl-upsell:active { transform: scale(0.98); }
#sl-result-root .isl-upsell svg { width: 15px; height: 15px; stroke-width: 2.1; }
#sl-result-root .isl-vdock { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(var(--lift-col-w, 100%), 100%); z-index: 95; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); box-sizing: border-box; }
#sl-result-root .isl-vback { width: 100%; min-height: 48px; border: none; border-radius: 13px; padding: 14px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#sl-result-root .isl-vback:active { transform: scale(0.985); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes isl-sdet-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  #sl-result-root .isl-srow[aria-expanded="true"] + .isl-sdet { animation: isl-sdet-in .22s var(--ios-ease); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes isl-sdet-fade { from { opacity: 0; } to { opacity: 1; } }
  #sl-result-root .isl-srow[aria-expanded="true"] + .isl-sdet { animation: isl-sdet-fade .2s ease; }
}

/* ═════════════════════ LIFT B3b1 · EXAM PBQ (cert-ios-exam.html ?v=pbq) · isl- ═════════════════════ */
/* The round's cards (shared above via :is) inside the B2 exam; its dock stays Prev · Flag · Next, so Reset moves up. */
html[data-theme] body :is(#page-exam .exam-pbq, #page-sim-lab.isl-exam) .sl-actions:not(:has(button)) { display: none; }
html[data-theme] body :is(#page-exam .exam-pbq, #page-sim-lab.isl-exam) .sl-reset.isl-reset-pill { position: relative; min-height: 0; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-mid); font: 700 11px/1 Inter, sans-serif; padding: 7px 11px; cursor: pointer; transition: transform .15s var(--ios-ease); }
html[data-theme] body :is(#page-exam .exam-pbq, #page-sim-lab.isl-exam) .sl-reset.isl-reset-pill::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7L3 8'/><path d='M3 3v5h5'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7L3 8'/><path d='M3 3v5h5'/></svg>") center / contain no-repeat; }
html[data-theme] body :is(#page-exam .exam-pbq, #page-sim-lab.isl-exam) .sl-reset.isl-reset-pill::after { content: ""; position: absolute; inset: -9px -4px; }
html[data-theme] body :is(#page-exam .exam-pbq, #page-sim-lab.isl-exam) .sl-reset.isl-reset-pill:active { transform: scale(0.97); }
html[data-theme] body :is(#page-exam .exam-pbq, #page-sim-lab.isl-exam) .sl-step:has(> .isl-reset-step) { position: relative; }
html[data-theme] body :is(#page-exam .exam-pbq, #page-sim-lab.isl-exam) .sl-reset.isl-reset-step { position: absolute; top: 11px; right: 12px; z-index: 1; }   /* above the step eyebrow, which would otherwise take the tap */
html[data-theme] body :is(#page-exam .exam-pbq, #page-sim-lab.isl-exam) .sl-step:has(> .isl-reset-step) > .sl-step-k { padding-right: 92px; }
html[data-theme] body :is(#page-exam .exam-pbq, #page-sim-lab.isl-exam) .term-head .sl-reset.isl-reset-pill { margin-left: auto; }


/* ═════════════════════ LIFT B3b2 · END (cert-ios-simlab.html ?v=exam-end, exam-end-jump, exam-abandon) · isl- ═════════════════════ */
/* #isl-end reuses B2's End dialog rules above (widened to :is(#exam-modal, #isl-end)); only the differences live here. */
/* the stat tints (B2 keys them off #modal-unanswered / #modal-flagged ids; a class here must outrank its .modal-stat .ms-val) */
html[data-theme] body #isl-end .modal-stat .ms-val.isl-ms-skip { color: var(--miss) !important; }
html[data-theme] body #isl-end .modal-stat .ms-val.isl-ms-flag { color: var(--accent-deep) !important; }
/* B2's review button is a flex row via its [hidden] hook; ours is always rendered, so it needs the flex itself (the flag icon is a ::before) */
html[data-theme] body #isl-end .ix-review { display: flex !important; }
/* the Abandon sheet's scrim already dims the dialog; the box steps back while the sheet asks */
html[data-theme] body #isl-end .modal-box { transition: transform .2s var(--ios-ease); }
html[data-theme] body #isl-end.is-under .modal-box { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { html[data-theme] body #isl-end.is-under .modal-box { transform: none; } }

/* ═════════════════════ LIFT B3b2 · ROUND (cert-ios-simlab.html ?v=exam-round, ?v=exam-round-last, ?v=exam-loading) · isl- ═════════════════════ */
/* Sim Lab's own Exam mode: the B2 bar (time left · round · End) and dock over the B3b1 cards. Engine DOM, restyled. */
html[data-theme] body #page-sim-lab.isl-exam.active { padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none !important; transform: none !important; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#page-sim-lab.isl-exam .sl-shell { max-width: none; padding: 0; }
#page-sim-lab.isl-exam .sl-topbar, #page-sim-lab.isl-exam #sl-palette, #page-sim-lab.isl-exam #sl-dots { display: none !important; }
#page-sim-lab.isl-exam button { font-family: inherit; box-sizing: border-box; }
#page-sim-lab.isl-exam #sl-body { padding: 12px 20px calc(96px + env(safe-area-inset-bottom)); }
#page-sim-lab.isl-exam:has(#isl-xbar) #sl-body { padding-top: 76px; }
/* bar: plain top padding (the iOS web view already clears the status bar, v8.188.1) */
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 56px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 12px 18px 8px; background: var(--bg); }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) .isl-xt { flex: 0 0 auto; min-width: 0; }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) .isl-xtl { display: block; font: 800 8.5px/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
#page-sim-lab.isl-exam #sl-clock-slot { display: block; }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xbar .sl-clock { display: inline-flex; align-items: center; gap: 5px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font: 700 17px/1 'Roboto Mono', monospace; color: var(--text); font-variant-numeric: tabular-nums; }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xbar .sl-clock svg { width: 13px; height: 13px; fill: none; stroke: var(--accent-deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xbar .sl-clock .cap { display: none; }
/* the one-way latch in the last 10%: amber, never red (spec) */
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xbar .sl-clock.is-low { color: var(--accent-deep); border: 0; }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xbar .sl-clock.is-low svg { stroke: var(--accent-deep); }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) .isl-xmid { flex: 1 1 auto; min-width: 0; text-align: center; }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) .isl-xcn { display: block; font: 700 13.5px/1 Inter, sans-serif; color: var(--text); }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) .isl-xcs { display: block; font: 500 10.5px/1 Inter, sans-serif; color: var(--text-dim); margin-top: 4px; }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) .isl-xend { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 0; margin: 0; font: 700 12px/1 Inter, sans-serif; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 10%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); border-radius: 999px; padding: 9px 13px; cursor: pointer; transition: transform .14s var(--ios-ease), background-color .18s; }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) .isl-xend::after { content: ""; position: absolute; inset: -7px -4px; }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) .isl-xend:active { transform: scale(0.97); }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xstrip { position: fixed; top: 56px; left: 0; right: 0; z-index: 60; display: flex; gap: 2px; align-items: flex-end; height: 12px; padding: 0 18px 6px; background: var(--bg); }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xstrip i { flex: 1 1 0; height: 5px; border-radius: 2px; background: var(--track); }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xstrip i.done { background: color-mix(in oklab, var(--accent) 55%, var(--track)); }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xstrip i.cur { height: 12px; background: var(--accent); }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xstrip i.flag { background: var(--accent-deep); }
/* dock: ‹ · Flag · Next (Review on the last round) */
#page-sim-lab.isl-exam .isl-xdock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
#page-sim-lab.isl-exam .isl-xdock button { min-height: 48px; margin: 0; cursor: pointer; }
#page-sim-lab.isl-exam .isl-xprev { flex: 0 0 auto; width: 48px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 13px; background: transparent; color: var(--text-mid); transition: transform .14s var(--ios-ease); }
#page-sim-lab.isl-exam .isl-xprev:disabled { opacity: 0.4; cursor: default; }
#page-sim-lab.isl-exam .isl-xflag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; border: 1px solid var(--border); border-radius: 13px; background: transparent; color: var(--text-mid); font: 650 13px/1 Inter, sans-serif; transition: background-color .18s, border-color .18s, color .18s, transform .14s var(--ios-ease); }
#page-sim-lab.isl-exam .isl-xflag.is-on { color: var(--accent-deep); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); background: color-mix(in oklab, var(--accent) 9%, transparent); }
#page-sim-lab.isl-exam .isl-xflag.is-on svg { fill: currentColor; }
#page-sim-lab.isl-exam .isl-xnext { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 14px; border: 0; border-radius: 13px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#page-sim-lab.isl-exam .isl-xprev:active, #page-sim-lab.isl-exam .isl-xflag:active { transform: scale(0.97); }
#page-sim-lab.isl-exam .isl-xnext:active { transform: scale(0.985); }
#page-sim-lab.isl-exam .isl-xdock svg { flex: 0 0 auto; }

/* ═════════════════════ LIFT B3b2 · RESULTS (cert-ios-simlab.html ?v=exam-result, ?v=exam-result-timeup) · isl- ═════════════════════ */
/* The B3b1 verdict (above) plus the Pace card, today's contents in the June look. */
#sl-result-root .isl-pace { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px 16px; margin-top: 16px; }
#sl-result-root .isl-pk { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#sl-result-root .isl-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
#sl-result-root .isl-pt { font: 600 28px/1 Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
#sl-result-root .isl-pv { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 6px 9px; color: var(--green); background: color-mix(in oklab, var(--green) 14%, transparent); white-space: nowrap; }
#sl-result-root .isl-pv.over { color: var(--miss); background: color-mix(in oklab, var(--miss) 13%, transparent); }
#sl-result-root .isl-ps { font: 500 12.5px/1.5 Inter, sans-serif; color: var(--text-mid); margin: 9px 0 0; }
#sl-result-root .isl-ptrack { position: relative; height: 7px; border-radius: 999px; background: var(--track); margin: 22px 0 0; }
#sl-result-root .isl-pfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--green); }
#sl-result-root .isl-pfill.over { background: var(--miss); }
#sl-result-root .isl-ptick { position: absolute; right: 0; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 2px; }
#sl-result-root .isl-ptick b { position: absolute; top: -16px; right: -2px; white-space: nowrap; font: 700 9.5px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#sl-result-root .isl-pscale { display: flex; justify-content: space-between; margin-top: 7px; font: 500 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#sl-result-root .isl-prows { margin-top: 12px; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); padding-top: 9px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }   /* minmax: a no-wrap label must not widen the track */
#sl-result-root .isl-prow { display: flex; align-items: baseline; gap: 10px; font: 500 12px/1.3 Inter, sans-serif; color: var(--text-mid); }
#sl-result-root .isl-prn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* long topics truncate; time and par never leave the card */
#sl-result-root .isl-prt, #sl-result-root .isl-prp { flex: 0 0 auto; white-space: nowrap; }
#sl-result-root .isl-prt { font: 600 11.5px/1 'Roboto Mono', monospace; color: var(--text); }
#sl-result-root .isl-prt.over { color: var(--miss); }
#sl-result-root .isl-prp { font: 500 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); }

/* ═════════════════════ LIFT B3c1 · ENTRY (cert-ios-gauntlet.html ?v=entry, entry-free) · igt- ═════════════════════ */
body:has(#page-gauntlet.active) #app-topbar, body:has(#page-gauntlet.active) .app-topbar,
body:has(#page-gauntlet-result.active) #app-topbar, body:has(#page-gauntlet-result.active) .app-topbar { display: none !important; }
#page-gauntlet:has(#igt-entry:not(:empty)) > :not(#igt-entry) { display: none !important; }
#page-gauntlet.active:has(#igt-entry:not(:empty)) { animation: none !important; transform: none !important; }   /* a transformed page would trap the fixed Start dock */
html[data-theme] body #page-gauntlet:has(#igt-entry:not(:empty)) { padding: 0 !important; max-width: none !important; }
#igt-entry { background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#igt-entry button { font-family: inherit; box-sizing: border-box; cursor: pointer; }
#igt-entry .igt-hdr { display: flex; align-items: center; gap: 11px; padding: 14px 20px 6px; }
#igt-entry .igt-back { position: relative; flex: 0 0 auto; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--text-mid); transition: transform .14s var(--ios-ease); }
#igt-entry .igt-back::after { content: ""; position: absolute; inset: -5px; }
#igt-entry .igt-back:active { transform: scale(0.97); }
#igt-entry .igt-hdr h1 { flex: 1; margin: 0; font: 600 21px/1.05 Fraunces, Georgia, serif !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--text); }
#igt-entry .igt-body { padding: 4px 20px calc(160px + env(safe-area-inset-bottom)); }
#igt-entry .igt-hero { text-align: center; padding: 10px 6px 4px; }
#igt-entry .igt-mark { width: 58px; height: 58px; border-radius: 999px; margin: 6px auto 14px; display: grid; place-items: center; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 13%, var(--surface)); }
#igt-entry .igt-hero h2 { margin: 0; font: 600 26px/1.1 Fraunces, Georgia, serif !important; letter-spacing: -0.014em !important; text-transform: none !important; color: var(--text); }
#igt-entry .igt-hero h2 em { font-style: italic; color: var(--accent); }
#igt-entry .igt-hero p { margin: 10px auto 0; max-width: 32ch; font: 500 13.5px/1.5 Inter, sans-serif; color: var(--text-mid); }
#igt-entry .igt-target { margin-top: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px 16px; }
#igt-entry .igt-k, #igt-entry .igt-sect { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#igt-entry .igt-v { margin-top: 8px; font: 650 16px/1.3 Inter, sans-serif; color: var(--text); }
#igt-entry .igt-why { margin-top: 4px; font: 500 12px/1.4 Inter, sans-serif; color: var(--text-dim); }
#igt-entry .igt-switch { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 0; margin: 12px 0 0; padding: 0; border: 0; background: none; font: 650 13px/1 Inter, sans-serif; color: var(--accent-deep); transition: transform .15s var(--ios-ease); }
#igt-entry .igt-switch::after { content: ""; position: absolute; inset: -12px -8px; }
#igt-entry .igt-switch:active { transform: scale(0.97); }
#igt-entry .igt-cracked { display: flex; align-items: center; gap: 12px; margin: 12px 2px 0; }
#igt-entry .igt-cracked b { font: 600 30px/1 Fraunces, Georgia, serif; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
#igt-entry .igt-cracked span { font: 500 12px/1.4 Inter, sans-serif; color: var(--text-mid); }
#igt-entry .igt-sect { margin: 18px 2px 10px; font-size: 10px; }
#igt-entry .igt-rungs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
#igt-entry .igt-rg i { display: block; height: 5px; border-radius: 3px; background: var(--track); }
#igt-entry .igt-rg span { display: block; margin-top: 7px; text-align: center; font: 800 9px/1.15 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
#igt-entry .igt-cap { margin: 12px 2px 0; font: 600 12px/1.45 Inter, sans-serif; color: var(--text-dim); }
#igt-entry .igt-cap b { color: var(--text-mid); }
#igt-entry .igt-dock { position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 40; padding: 12px 18px; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
#igt-entry .igt-start { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 0; margin: 0; padding: 14px; border: 0; border-radius: 13px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#igt-entry .igt-start:active { transform: scale(0.985); }
@media (prefers-reduced-motion: no-preference) {
  #page-gauntlet.active #igt-entry .igt-hero, #page-gauntlet.active #igt-entry .igt-target, #page-gauntlet.active #igt-entry .igt-rungs { animation: igt-rise .52s var(--ios-ease) both; }
  #page-gauntlet.active #igt-entry .igt-target { animation-delay: .06s; } #page-gauntlet.active #igt-entry .igt-rungs { animation-delay: .12s; }
  @keyframes igt-rise { from { opacity: 0; transform: translateY(9px); } }
}

/* ═════════════════════ LIFT B3c1 · SHEET (cert-ios-gauntlet.html ?v=entry-pick) · igt- ═════════════════════ */
/* #igt-topics takes B2's sheet rules (widened above to :is(#exam-sheet, #igt-topics, #ist-sheet)); the list lives here */
#igt-topics h3 { margin-bottom: 12px !important; }
#igt-topics .igt-tlist { max-height: min(60dvh, 420px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; }
#igt-topics .igt-tlist button { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 12px; border: 0; border-radius: 12px; background: none; text-align: left; font: 600 14px/1.25 Inter, sans-serif; color: var(--text); transition: background-color .16s, transform .12s var(--ios-ease); }
#igt-topics .igt-tlist button:active { transform: scale(0.99); }
#igt-topics .igt-tlist button span { flex: 1 1 auto; }
#igt-topics .igt-tlist button svg { flex: 0 0 auto; color: var(--accent-deep); opacity: 0; }
#igt-topics .igt-tlist button[aria-pressed="true"] { background: color-mix(in oklab, var(--accent) 9%, transparent); color: var(--accent-deep); }
#igt-topics .igt-tlist button[aria-pressed="true"] svg { opacity: 1; }

/* ═════════════════════ LIFT B3c1 · RUN (cert-ios-gauntlet.html ?v=run, ?v=run-answered) · igt- ═════════════════════ */
/* The Lift A quiz runs the Gauntlet; the five-rung ladder takes the question pills' row while it shows. */
html[data-theme] body #page-quiz:has(#gauntlet-ladder:not(.is-hidden)) #quiz-prog-dots { display: none !important; }
/* Lift B3c2: Why-Not hides the pill row with .is-hidden (one question per round); Lift A forces the row visible otherwise */
html[data-theme] body #page-quiz #quiz-prog-dots.is-hidden { display: none !important; }
html[data-theme] body #page-quiz #gauntlet-ladder:not(.is-hidden) { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 2px 0 16px; padding: 0; border: 0; background: none; }
html[data-theme] body #page-quiz #gauntlet-ladder .gnt-rung { min-width: 0; margin: 0; padding: 0; }
html[data-theme] body #page-quiz #gauntlet-ladder .gnt-rung-bar { height: 5px; margin: 0; border-radius: 3px; background: var(--track); overflow: hidden; transform-origin: center bottom; transition: transform .25s var(--ios-ease), background-color .25s var(--ios-ease); }
html[data-theme] body #page-quiz #gauntlet-ladder .gnt-rung-bar i { display: none; }
html[data-theme] body #page-quiz #gauntlet-ladder .gnt-rung.done .gnt-rung-bar { background: color-mix(in oklab, var(--accent) 60%, var(--track)); }
html[data-theme] body #page-quiz #gauntlet-ladder .gnt-rung.missed .gnt-rung-bar { background: var(--miss); }
/* the live rung grows by transform (BRAND §6: transform + opacity only), never height */
html[data-theme] body #page-quiz #gauntlet-ladder .gnt-rung.live .gnt-rung-bar { background: var(--accent); transform: scaleY(1.4); }
html[data-theme] body #page-quiz #gauntlet-ladder .gnt-rung-name { display: block; margin-top: 7px; text-align: center; font: 800 9px/1.15 Inter, sans-serif !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--text-dim) !important; }
html[data-theme] body #page-quiz #gauntlet-ladder .gnt-rung.live .gnt-rung-name { color: var(--accent-deep) !important; }
html[data-theme] body #page-quiz #gauntlet-run-topic:not(.is-hidden) { display: block; margin: 0 0 9px; padding: 0; border: 0; background: none; font: 800 9.5px/1 Inter, sans-serif !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--accent-deep) !important; }
html[data-theme] body #page-quiz #gauntlet-run-topic span { color: var(--text-dim); }
html[data-theme] body #page-quiz #gauntlet-rung-chip:not(.is-hidden) { display: inline-flex !important; align-items: center; gap: 6px; padding: 0 !important; border: 0 !important; background: none !important; font: 800 9.5px/1 Inter, sans-serif !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--accent-deep) !important; }
html[data-theme] body #page-quiz #gauntlet-rung-chip:not(.is-hidden)::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { html[data-theme] body #page-quiz #gauntlet-ladder .gnt-rung-bar { transition: background-color .2s ease; } }
/* drawing order during a run: top bar, the ladder (in the pills' row), "The Gauntlet · topic", then the question */
html[data-theme] body #page-quiz:has(#gauntlet-ladder:not(.is-hidden)) > * { order: 3; }
html[data-theme] body #page-quiz:has(#gauntlet-ladder:not(.is-hidden)) > .quiz-topbar { order: 0; }
html[data-theme] body #page-quiz:has(#gauntlet-ladder:not(.is-hidden)) > #gauntlet-ladder { order: 1; }
html[data-theme] body #page-quiz:has(#gauntlet-ladder:not(.is-hidden)) > #gauntlet-run-topic { order: 2; }
/* the hinge in the drawn accent tint (today's mark is red-tinted, which reads as a miss on a right answer) */
html[data-theme] body #page-quiz mark.gnt-hinge { background: color-mix(in oklab, var(--accent) 22%, transparent); padding: 0 3px; font-weight: inherit; }

/* ═════════════════════ LIFT B3c1 · RESULTS (cert-ios-gauntlet.html ?v=result-cracked, result-miss, result-miss-open, result-miss-free) · igt- ═════════════════════ */
html[data-theme] body #page-gauntlet-result.active:has(.igt-vbody) { padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none !important; transform: none !important; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#page-gauntlet-result #gnt-result-root:has(.igt-vbody) { max-width: none; margin: 0; padding: 0; display: block; text-align: left; }
#gnt-result-root button { font-family: inherit; box-sizing: border-box; cursor: pointer; }
#gnt-result-root .igt-vbody { padding: 12px 20px calc(150px + env(safe-area-inset-bottom)); }
#gnt-result-root .igt-vkick { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 11px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
#gnt-result-root .igt-seal-wrap { text-align: center; padding: 8px 4px 4px; }
#gnt-result-root .igt-seal { width: 92px; height: 92px; margin: 6px auto 0; border-radius: 999px; display: grid; place-items: center; color: var(--accent); border: 2px solid color-mix(in oklab, var(--accent) 55%, var(--border)); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
#gnt-result-root .igt-seal-k { margin-top: 16px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); }
#gnt-result-root .igt-concept { margin: 8px 0 0; font: 600 26px/1.15 Fraunces, Georgia, serif !important; letter-spacing: -0.012em !important; text-transform: none !important; color: var(--text); }
#gnt-result-root .igt-seal-bars { display: flex; gap: 5px; justify-content: center; max-width: 220px; margin: 16px auto 0; }
#gnt-result-root .igt-seal-bars i { flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--accent); }
#gnt-result-root .igt-seal-sub { max-width: 30ch; margin: 14px auto 0; font: 500 13.5px/1.5 Inter, sans-serif; color: var(--text-mid); }
#gnt-result-root .igt-seal-sub b { color: var(--text); font-weight: 650; }
#gnt-result-root .igt-streak { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: 650 12px/1.3 Inter, sans-serif; color: var(--text-mid); }
#gnt-result-root .igt-streak svg { color: var(--accent-deep); }
#gnt-result-root .igt-vtitle { margin: 0; font: 600 32px/1.05 Fraunces, Georgia, serif !important; letter-spacing: -0.016em !important; text-transform: none !important; color: var(--text); }
#gnt-result-root .igt-vtitle em { font-style: normal; color: var(--accent); }
#gnt-result-root .igt-callout { margin: 10px 0 0; font: 500 13.5px/1.5 Inter, sans-serif; color: var(--text-mid); }
#gnt-result-root .igt-callout b { color: var(--text); font-weight: 650; }
#gnt-result-root .igt-sect { margin: 18px 2px 10px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#gnt-result-root .igt-srow { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; margin: 0 0 9px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: inherit; text-align: left; transition: transform .14s var(--ios-ease); }
#gnt-result-root .igt-srow:active { transform: scale(0.99); }
#gnt-result-root .igt-sn { flex: 1 1 auto; min-width: 0; }
#gnt-result-root .igt-st { display: block; font: 600 14px/1.25 Inter, sans-serif; color: var(--text); }
#gnt-result-root .igt-ss { display: block; margin-top: 4px; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); }
#gnt-result-root .igt-sv { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
#gnt-result-root .igt-sv.ok { color: var(--green); background: color-mix(in oklab, var(--green) 14%, transparent); }
#gnt-result-root .igt-sv.no { color: var(--miss); background: color-mix(in oklab, var(--miss) 13%, transparent); }
#gnt-result-root .igt-srow > svg { flex: 0 0 auto; color: var(--text-dim); transition: transform .2s var(--ios-ease); }
#gnt-result-root .igt-srow[aria-expanded="true"] > svg { transform: rotate(90deg); }
#gnt-result-root .igt-sdet { margin: -4px 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface3); }
#gnt-result-root .igt-sdet[hidden] { display: none; }
#gnt-result-root .igt-q { margin: 0 0 8px; font: 600 12.5px/1.4 Inter, sans-serif; color: var(--text); }
#gnt-result-root mark.igt-hg { background: color-mix(in oklab, var(--accent) 22%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
#gnt-result-root .igt-lab { margin: 10px 0 5px; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
#gnt-result-root .igt-lab.igt-y { color: var(--miss); } #gnt-result-root .igt-lab.igt-y.ok, #gnt-result-root .igt-lab.igt-a { color: var(--green); }
#gnt-result-root .igt-val { font: 500 11.5px/1.55 'Roboto Mono', monospace; color: var(--text-mid); }
#gnt-result-root .igt-why { margin: 10px 0 0; font: 500 12px/1.5 Inter, sans-serif; color: var(--text-mid); }
#gnt-result-root .igt-promise { margin: 14px 8px 2px; text-align: center; font: 500 11.5px/1.45 Inter, sans-serif; color: var(--text-dim); }
#gnt-result-root .igt-vdock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
#gnt-result-root .igt-primary { width: 100%; min-height: 0; margin: 0; padding: 14px; border: 0; border-radius: 13px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#gnt-result-root .igt-ghost { width: 100%; min-height: 0; margin: 0; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: transparent; color: var(--text-mid); font: 650 14px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
#gnt-result-root .igt-primary:active { transform: scale(0.985); } #gnt-result-root .igt-ghost:active { transform: scale(0.98); }
#gnt-result-root .igt-free { margin: 2px 0 0; text-align: center; font: 500 10.5px/1.35 Inter, sans-serif; color: var(--text-dim); }
@media (prefers-reduced-motion: no-preference) {
  #page-gauntlet-result.active .igt-vbody > * { animation: igt-rise .52s var(--ios-ease) both; }
  #gnt-result-root .igt-srow[aria-expanded="true"] + .igt-sdet { animation: igt-open .22s var(--ios-ease); }
  @keyframes igt-open { from { opacity: 0; transform: translateY(-4px); } }
}
/* milestone toasts on the cracked seal (spec: never over the seal): anchored above the dock, stacking upwards */
html[data-theme] body:has(#page-gauntlet-result.active .igt-seal) .celebration-toast { top: auto !important; bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
html[data-theme] body:has(#page-gauntlet-result.active .igt-seal) .celebration-toast ~ .celebration-toast { top: auto !important; bottom: calc(150px + 84px + env(safe-area-inset-bottom)) !important; }
html[data-theme] body:has(#page-gauntlet-result.active .igt-seal) .celebration-toast ~ .celebration-toast ~ .celebration-toast { top: auto !important; bottom: calc(150px + 168px + env(safe-area-inset-bottom)) !important; }
html[data-theme] body:has(#page-gauntlet-result.active .igt-seal) .celebration-toast:not(.show) { transform: translateY(16px) !important; }
/* ═════════════════════ LIFT B3c2 · WHY-NOT ENTRY (cert-ios-whynot.html ?v=entry, entry-free, entry-pick) · iwn- ═════════════════════ */
/* Spec docs/superpowers/specs/2026-10-25-ios-lift-b3c2-design.md. The topic sheet is B3c1's #igt-topics. */
body:has(#page-whynot.active) #app-topbar, body:has(#page-whynot.active) .app-topbar,
body:has(#page-whynot-round.active) #app-topbar, body:has(#page-whynot-round.active) .app-topbar,
body:has(#page-whynot-verdict.active) #app-topbar, body:has(#page-whynot-verdict.active) .app-topbar { display: none !important; }
#page-whynot:has(#iwn-entry:not(:empty)) > :not(#iwn-entry) { display: none !important; }
#page-whynot.active:has(#iwn-entry:not(:empty)) { animation: none !important; transform: none !important; }   /* a transformed page would trap the fixed Start dock */
html[data-theme] body #page-whynot:has(#iwn-entry:not(:empty)) { padding: 0 !important; max-width: none !important; }
#iwn-entry { background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#iwn-entry button { font-family: inherit; box-sizing: border-box; cursor: pointer; }
#iwn-entry .iwn-hdr { display: flex; align-items: center; gap: 11px; padding: 14px 20px 6px; }
:is(#iwn-entry, #wn-round-root, #wn-verdict-root) .iwn-back { position: relative; flex: 0 0 auto; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--text-mid); cursor: pointer; transition: transform .14s var(--ios-ease); }
:is(#iwn-entry, #wn-round-root, #wn-verdict-root) .iwn-back::after { content: ""; position: absolute; inset: -5px; }
:is(#iwn-entry, #wn-round-root, #wn-verdict-root) .iwn-back:active { transform: scale(0.97); }
#iwn-entry .iwn-hdr h1 { flex: 1; margin: 0; font: 600 21px/1.05 Fraunces, Georgia, serif !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--text); }
#iwn-entry .iwn-pro { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); background: color-mix(in oklab, var(--accent) 9%, transparent); border-radius: 999px; padding: 4px 7px; }
#iwn-entry .iwn-body { padding: 4px 20px calc(160px + env(safe-area-inset-bottom)); }
#iwn-entry .iwn-hero { text-align: center; padding: 10px 6px 4px; }
#iwn-entry .iwn-mark { width: 58px; height: 58px; border-radius: 999px; margin: 6px auto 14px; display: grid; place-items: center; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 13%, var(--surface)); }
#iwn-entry .iwn-hero h2 { margin: 0; font: 600 26px/1.1 Fraunces, Georgia, serif !important; letter-spacing: -0.014em !important; text-transform: none !important; color: var(--text); }
#iwn-entry .iwn-hero h2 em { font-style: italic; color: var(--accent); }
#iwn-entry .iwn-hero p { margin: 10px auto 0; max-width: 32ch; font: 500 13.5px/1.5 Inter, sans-serif; color: var(--text-mid); }
#iwn-entry .iwn-target { margin-top: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px 16px; }
#iwn-entry .iwn-k, :is(#iwn-entry, #wn-verdict-root) .iwn-sect { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#iwn-entry .iwn-v { margin-top: 8px; font: 650 16px/1.3 Inter, sans-serif; color: var(--text); }
#iwn-entry .iwn-why { margin-top: 4px; font: 500 12px/1.4 Inter, sans-serif; color: var(--text-dim); }
#iwn-entry .iwn-switch { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 0; margin: 12px 0 0; padding: 0; border: 0; background: none; font: 650 13px/1 Inter, sans-serif; color: var(--accent-deep); transition: transform .15s var(--ios-ease); }
#iwn-entry .iwn-switch::after { content: ""; position: absolute; inset: -12px -8px; }
#iwn-entry .iwn-switch:active { transform: scale(0.97); }
:is(#iwn-entry, #wn-verdict-root) .iwn-sect { margin: 18px 2px 10px; font-size: 10px; }
#iwn-entry .iwn-rounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
#iwn-entry .iwn-rd i { display: block; height: 5px; border-radius: 3px; background: var(--track); }
#iwn-entry .iwn-rd span { display: block; margin-top: 7px; text-align: center; font: 800 9px/1.15 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
#iwn-entry .iwn-dock { position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 40; padding: 12px 18px; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
#iwn-entry .iwn-start { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 0; margin: 0; padding: 14px; border: 0; border-radius: 13px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#iwn-entry .iwn-start:active { transform: scale(0.985); }
@media (prefers-reduced-motion: no-preference) {
  #page-whynot.active #iwn-entry .iwn-hero, #page-whynot.active #iwn-entry .iwn-target, #page-whynot.active #iwn-entry .iwn-rounds { animation: iwn-rise .52s var(--ios-ease) both; }
  #page-whynot.active #iwn-entry .iwn-target { animation-delay: .06s; } #page-whynot.active #iwn-entry .iwn-rounds { animation-delay: .12s; }
  @keyframes iwn-rise { from { opacity: 0; transform: translateY(9px); } }
}

/* ═════════════════════ LIFT B3c2 · WHY-NOT REASONS (cert-ios-whynot.html ?v=reason, reason-picked, reason-wrong, leave) · iwn- ═════════════════════ */
html[data-theme] body #page-whynot-round.active:has(.iwn-card), html[data-theme] body #page-whynot-verdict.active:has(.iwn-vbody) { padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none !important; transform: none !important; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#page-whynot-round #wn-round-root:has(.iwn-card), #page-whynot-verdict #wn-verdict-root:has(.iwn-vbody) { max-width: none; margin: 0; padding: 0; display: block; text-align: left; }
:is(#wn-round-root, #wn-verdict-root) button { font-family: inherit; box-sizing: border-box; cursor: pointer; }
:is(#wn-round-root, #wn-verdict-root) .iwn-wbar { display: flex; align-items: center; gap: 11px; padding: 14px 20px 6px; }
:is(#wn-round-root, #wn-verdict-root) .iwn-strip { min-width: 0; font: 800 9.5px/1.3 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
:is(#wn-round-root, #wn-verdict-root) .iwn-strip b { color: var(--accent-deep); font-weight: 800; }
#wn-round-root .iwn-body { padding: 4px 20px calc(150px + env(safe-area-inset-bottom)); }
#wn-round-root .iwn-ans { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); font: 500 13px/1.45 Inter, sans-serif; color: var(--text-mid); }
#wn-round-root .iwn-ans b { color: var(--text); font-weight: 650; }
#wn-round-root .iwn-tk { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: var(--on-accent); background: var(--green); }
#wn-round-root .iwn-tk.no { background: var(--miss); }
#wn-round-root .iwn-card { padding: 15px 15px 13px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
#wn-round-root .iwn-wtarget { display: flex; align-items: center; gap: 11px; }
#wn-round-root .iwn-lt { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 800 13px/1 Inter, sans-serif; color: var(--miss); background: color-mix(in oklab, var(--miss) 13%, var(--surface3)); }
#wn-round-root .iwn-wtarget b { font: 650 17px/1.3 Inter, sans-serif; color: var(--text); }
#wn-round-root .iwn-ask { margin: 14px 0 12px; font: 600 21px/1.2 Fraunces, Georgia, serif; letter-spacing: -0.01em; color: var(--text); }
#wn-round-root .iwn-reason { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 11px; margin: 0 0 8px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg); color: var(--text); text-align: left; font: 500 14px/1.4 Inter, sans-serif; transition: border-color .18s, background-color .18s, opacity .2s, transform .12s var(--ios-ease); }
#wn-round-root .iwn-reason:active:not([disabled]) { transform: scale(0.99); }
#wn-round-root .iwn-reason[disabled] { cursor: default; opacity: 1; }
#wn-round-root .iwn-rdot { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--border); display: grid; place-items: center; }
#wn-round-root .iwn-rdot svg { stroke: var(--on-accent); opacity: 0; }
#wn-round-root .iwn-reason.right { border-color: color-mix(in oklab, var(--green) 55%, var(--border)); background: color-mix(in oklab, var(--green) 9%, var(--surface)); }
#wn-round-root .iwn-reason.wrong { border-color: color-mix(in oklab, var(--miss) 50%, var(--border)); background: color-mix(in oklab, var(--miss) 8%, var(--surface)); }
#wn-round-root .iwn-reason.right .iwn-rdot { background: var(--green); border-color: var(--green); }
#wn-round-root .iwn-reason.wrong .iwn-rdot { background: var(--miss); border-color: var(--miss); }
#wn-round-root .iwn-reason.right .iwn-rdot svg, #wn-round-root .iwn-reason.wrong .iwn-rdot svg { opacity: 1; }
#wn-round-root .iwn-reason.dim { opacity: 0.55; }
#wn-round-root .iwn-note { margin-top: 4px; padding: 12px 14px; border-radius: 13px; font: 500 12.5px/1.5 Inter, sans-serif; color: var(--text-mid); }
#wn-round-root .iwn-note b { display: block; margin-bottom: 6px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
#wn-round-root .iwn-note.good { border: 1px solid color-mix(in oklab, var(--green) 26%, var(--border)); background: color-mix(in oklab, var(--green) 8%, var(--surface)); }
#wn-round-root .iwn-note.good b { color: var(--green); }
#wn-round-root .iwn-note.bad { border: 1px solid color-mix(in oklab, var(--miss) 24%, var(--border)); background: color-mix(in oklab, var(--miss) 6%, var(--surface)); }
#wn-round-root .iwn-note.bad b { color: var(--miss); }
#wn-round-root .iwn-pts { margin: 14px 2px 4px; }
#wn-round-root .iwn-bars, #wn-round-root .iwn-labs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
#wn-round-root .iwn-bars i { display: block; height: 5px; border-radius: 3px; background: var(--track); transition: background-color .2s var(--ios-ease); }
#wn-round-root .iwn-bars i.done { background: var(--green); }
#wn-round-root .iwn-bars i.bad { background: var(--miss); }
#wn-round-root .iwn-bars i.live { background: var(--accent); transform: scaleY(1.4); }
#wn-round-root .iwn-labs { margin-top: 7px; }
#wn-round-root .iwn-labs span { text-align: center; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
:is(#wn-round-root, #wn-verdict-root) .iwn-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
:is(#wn-round-root, #wn-verdict-root) :is(.iwn-next, .iwn-primary) { width: 100%; min-height: 0; margin: 0; padding: 14px; border: 0; border-radius: 13px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: opacity .18s var(--ios-ease) .14s, transform .15s var(--ios-ease); }
#wn-round-root .iwn-next.wait { visibility: hidden; opacity: 0; transition: none; }   /* keeps its slot until a reason is picked */
:is(#wn-round-root, #wn-verdict-root) .iwn-leave { width: 100%; min-height: 0; margin: 0; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: transparent; color: var(--text-mid); font: 650 14px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
:is(#wn-round-root, #wn-verdict-root) :is(.iwn-next, .iwn-primary):active { transform: scale(0.985); }
:is(#wn-round-root, #wn-verdict-root) .iwn-leave:active { transform: scale(0.98); }
@media (prefers-reduced-motion: no-preference) {
  #page-whynot-round.active #wn-round-root:not(.iwn-static) :is(.iwn-ans, .iwn-card, .iwn-pts) { animation: iwn-rise .52s var(--ios-ease) both; }
  #page-whynot-round.active #wn-round-root:not(.iwn-static) .iwn-card { animation-delay: .06s; } #page-whynot-round.active #wn-round-root:not(.iwn-static) .iwn-pts { animation-delay: .12s; }
  #wn-round-root .iwn-note { animation: iwn-note .2s var(--ios-ease) .08s both; }
  @keyframes iwn-note { from { opacity: 0; transform: translateY(4px); } }
}
@media (prefers-reduced-motion: reduce) {
  #wn-round-root .iwn-note { animation: iwn-fade .2s ease both; }
  #wn-round-root .iwn-bars i.live { transform: none; }
  @keyframes iwn-fade { from { opacity: 0; } }
}

/* ═════════════════════ LIFT B3c2 · WHY-NOT VERDICTS (cert-ios-whynot.html ?v=verdict, verdict-open, session) · iwn- ═════════════════════ */
#wn-verdict-root .iwn-vbody { padding: 8px 20px calc(150px + env(safe-area-inset-bottom)); }
#wn-verdict-root .iwn-vkick { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 11px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
#wn-verdict-root :is(.iwn-vtitle, .iwn-stitle) { margin: 8px 0 0; font: 600 34px/1.05 Fraunces, Georgia, serif !important; letter-spacing: -0.016em !important; text-transform: none !important; color: var(--text); }
#wn-verdict-root :is(.iwn-vtitle, .iwn-stitle) em { font-style: normal; color: var(--accent); }
#wn-verdict-root .iwn-callout, #wn-verdict-root .iwn-ssub { margin: 10px 0 0; font: 500 13.5px/1.5 Inter, sans-serif; color: var(--text-mid); }
#wn-verdict-root .iwn-callout b { color: var(--text); font-weight: 650; }
#wn-verdict-root .iwn-srow { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; margin: 0 0 9px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: inherit; text-align: left; transition: transform .14s var(--ios-ease); }
#wn-verdict-root .iwn-srow:active { transform: scale(0.99); }
#wn-verdict-root .iwn-sn { flex: 1 1 auto; min-width: 0; }
#wn-verdict-root .iwn-st { display: block; font: 600 14px/1.25 Inter, sans-serif; color: var(--text); }
#wn-verdict-root .iwn-ss { display: block; margin-top: 4px; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); }
#wn-verdict-root .iwn-sv { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
#wn-verdict-root .iwn-sv.ok { color: var(--green); background: color-mix(in oklab, var(--green) 14%, transparent); }
#wn-verdict-root .iwn-sv.no { color: var(--miss); background: color-mix(in oklab, var(--miss) 13%, transparent); }
#wn-verdict-root .iwn-sv.nt { color: var(--text-mid); background: color-mix(in oklab, var(--text) 7%, transparent); }
#wn-verdict-root .iwn-srow > svg { flex: 0 0 auto; color: var(--text-dim); transition: transform .2s var(--ios-ease); }
#wn-verdict-root .iwn-srow[aria-expanded="true"] > svg { transform: rotate(90deg); }
#wn-verdict-root .iwn-sdet { margin: -4px 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface3); }
#wn-verdict-root .iwn-sdet[hidden] { display: none; }
#wn-verdict-root .iwn-lab { margin: 10px 0 5px; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
#wn-verdict-root .iwn-lab:first-child { margin-top: 0; }
#wn-verdict-root .iwn-lab.ok { color: var(--green); } #wn-verdict-root .iwn-lab.no { color: var(--miss); }
#wn-verdict-root .iwn-val { font: 500 12.5px/1.5 Inter, sans-serif; color: var(--text); }   /* reasons are sentences: Inter, not the answer mono */
#wn-verdict-root .iwn-why { margin: 10px 0 0; font: 500 12px/1.5 Inter, sans-serif; color: var(--text-mid); }
#wn-verdict-root .iwn-meter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 14px; }
#wn-verdict-root .iwn-meter i { display: block; height: 7px; border-radius: 2px; background: var(--track); }
#wn-verdict-root .iwn-meter i.on { background: var(--accent); }
#wn-verdict-root .iwn-sround { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 9px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
@media (prefers-reduced-motion: no-preference) {
  #page-whynot-verdict.active #wn-verdict-root :is(.iwn-vtitle, .iwn-stitle, .iwn-callout, .iwn-meter, .iwn-srow, .iwn-sround) { animation: iwn-rise .52s var(--ios-ease) both; }
  #page-whynot-verdict.active #wn-verdict-root :is(.iwn-callout, .iwn-meter) { animation-delay: .05s; }
  #page-whynot-verdict.active #wn-verdict-root :is(.iwn-srow, .iwn-sround) { animation-delay: .1s; }
  #wn-verdict-root .iwn-srow[aria-expanded="true"] + .iwn-sdet { animation: iwn-note .22s var(--ios-ease) both; }
}
@media (prefers-reduced-motion: reduce) { #wn-verdict-root .iwn-srow[aria-expanded="true"] + .iwn-sdet { animation: iwn-fade .2s ease both; } }
/* milestone toasts on the session verdict (spec: never over the score): anchored above the dock, stacking upwards */
html[data-theme] body:has(#page-whynot-verdict.active .iwn-vbody) .celebration-toast { top: auto !important; bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
html[data-theme] body:has(#page-whynot-verdict.active .iwn-vbody) .celebration-toast ~ .celebration-toast { top: auto !important; bottom: calc(150px + 84px + env(safe-area-inset-bottom)) !important; }
html[data-theme] body:has(#page-whynot-verdict.active .iwn-vbody) .celebration-toast:not(.show) { transform: translateY(16px) !important; }

/* ═════════════════════ LIFT B3c3 · DECISION LAB ENTRY (cert-ios-decisionlab.html ?v=entry, entry-free, entry-exam) · idl- ═════════════════════ */
/* Spec docs/superpowers/specs/2026-10-26-ios-lift-b3c3-design.md. The entry is drawn before its page shows, so :has on the host is safe here. */
body:has(#page-decision-lab-entry.active) #app-topbar, body:has(#page-decision-lab-entry.active) .app-topbar,
body:has(#page-decision-lab.active) #app-topbar, body:has(#page-decision-lab.active) .app-topbar,
body:has(#page-decision-lab-result.active) #app-topbar, body:has(#page-decision-lab-result.active) .app-topbar { display: none !important; }
#page-decision-lab-entry:has(#idl-entry:not(:empty)) > :not(#idl-entry) { display: none !important; }
#page-decision-lab-entry.active:has(#idl-entry:not(:empty)) { animation: none !important; transform: none !important; }   /* a transformed page would trap the fixed Start dock */
html[data-theme] body #page-decision-lab-entry:has(#idl-entry:not(:empty)) { padding: 0 !important; max-width: none !important; }
#idl-entry { background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#idl-entry button { font-family: inherit; box-sizing: border-box; cursor: pointer; }
#idl-entry .idl-hdr { display: flex; align-items: center; gap: 11px; padding: 14px 20px 6px; }
#idl-entry .idl-back { position: relative; flex: 0 0 auto; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--text-mid); transition: transform .14s var(--ios-ease); }
#idl-entry .idl-back::after { content: ""; position: absolute; inset: -5px; }
#idl-entry .idl-back:active { transform: scale(0.97); }
#idl-entry .idl-hdr h1 { flex: 1; margin: 0; font: 600 21px/1.05 Fraunces, Georgia, serif !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--text); }
#idl-entry .idl-pro { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); background: color-mix(in oklab, var(--accent) 9%, transparent); border-radius: 999px; padding: 4px 7px; }
#idl-entry .idl-body { padding: 4px 20px calc(160px + env(safe-area-inset-bottom)); }
#idl-entry .idl-hero { text-align: center; padding: 10px 6px 4px; }
#idl-entry .idl-mark { width: 58px; height: 58px; border-radius: 999px; margin: 6px auto 14px; display: grid; place-items: center; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, var(--surface)); }
#idl-entry .idl-hero h2 { margin: 0; font: 600 26px/1.1 Fraunces, Georgia, serif !important; letter-spacing: -0.014em !important; text-transform: none !important; color: var(--text); }
#idl-entry .idl-hero h2 em { font-style: italic; color: var(--accent); }
#idl-entry .idl-hero p { margin: 10px auto 0; max-width: 32ch; font: 500 13.5px/1.5 Inter, sans-serif; color: var(--text-mid); }
#idl-entry .idl-target { margin-top: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px 16px; }
#idl-entry .idl-k, #idl-entry .idl-sect { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#idl-entry .idl-v { margin-top: 8px; font: 650 16px/1.3 Inter, sans-serif; color: var(--text); }
#idl-entry .idl-w { margin-top: 4px; font: 500 12px/1.4 Inter, sans-serif; color: var(--text-dim); }
#idl-entry .idl-sect { margin: 18px 2px 10px; font-size: 10px; }
#idl-entry .idl-modes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
#idl-entry .idl-mode { display: block; min-height: 0; margin: 0; text-align: left; border: 1.5px solid var(--border); background: var(--surface); border-radius: 15px; padding: 13px 13px 12px; color: var(--text); transition: border-color .18s, background-color .18s, transform .12s var(--ios-ease); }
#idl-entry .idl-mode:active { transform: scale(0.985); }
#idl-entry .idl-mi { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 10%, var(--surface2)); display: grid; place-items: center; margin-bottom: 10px; color: var(--accent-deep); }
#idl-entry .idl-mode b { display: flex; align-items: center; gap: 6px; font: 650 14px/1.1 Inter, sans-serif; color: var(--text); }
#idl-entry .idl-ml { display: block; margin-top: 4px; font: 500 11.5px/1.35 Inter, sans-serif; color: var(--text-dim); }
#idl-entry .idl-tick { margin-left: auto; display: grid; color: var(--accent-deep); opacity: 0; transition: opacity .18s; }
#idl-entry .idl-tick svg { stroke-width: 2.6; }
#idl-entry .idl-mode[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
#idl-entry .idl-mode[aria-pressed="true"] .idl-tick { opacity: 1; }
#idl-entry .idl-protag { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, var(--surface2)); border-radius: 999px; padding: 4px 7px; }
#idl-entry .idl-count { display: flex; align-items: baseline; gap: 9px; margin: 2px 2px 8px; }
#idl-entry .idl-bn { font: 600 44px/1 Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
#idl-entry .idl-bl { font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
#idl-entry .idl-seg { display: flex; gap: 5px; background: color-mix(in oklab, var(--text) 5%, var(--surface2)); border: 1px solid var(--border); border-radius: 13px; padding: 4px; }
#idl-entry .idl-seg button { flex: 1 1 0; min-height: 40px; margin: 0; padding: 0; border: none; background: transparent; border-radius: 9px; font: 700 14px/1 Inter, sans-serif; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: background-color .2s var(--ios-ease), color .2s, transform .14s var(--ios-ease); }
#idl-entry .idl-seg button:active { transform: scale(0.96); }
#idl-entry .idl-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--accent) 70%, transparent); }
#idl-entry .idl-seg button.locked { color: color-mix(in oklab, var(--text-dim) 75%, transparent); }
#idl-entry .idl-seg button svg { stroke-width: 2.4; }
#idl-entry .idl-cap { margin: 9px 2px 0; font: 600 12px/1.45 Inter, sans-serif; color: var(--text-dim); }
#idl-entry .idl-cap b { color: var(--text-mid); }
#idl-entry .idl-dock { position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 40; padding: 12px 18px; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
#idl-entry .idl-start { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 0; margin: 0; padding: 14px; border: 0; border-radius: 13px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#idl-entry .idl-start:active { transform: scale(0.985); }
#idl-entry .idl-qc { font: 700 12px/1 'Roboto Mono', monospace; opacity: 0.82; }
@media (prefers-reduced-motion: no-preference) {
  #page-decision-lab-entry.active #idl-entry .idl-hero, #page-decision-lab-entry.active #idl-entry .idl-target, #page-decision-lab-entry.active #idl-entry .idl-modes { animation: idl-rise .52s var(--ios-ease) backwards; }
  #page-decision-lab-entry.active #idl-entry .idl-target { animation-delay: .06s; } #page-decision-lab-entry.active #idl-entry .idl-modes { animation-delay: .12s; }
  @keyframes idl-rise { from { opacity: 0; transform: translateY(9px); } }
}

/* ═════════════════════ LIFT B3c3 · DECISION LAB RUN (cert-ios-decisionlab.html ?v=practice, practice-graded, leave) · idl- ═════════════════════ */
/* Engine DOM, restyled. The cards and the docked Submit share the B3b1 rules above (widened to #page-decision-lab). */
html[data-theme] body #page-decision-lab:is(.idl-practice, .idl-exam).active { padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none !important; transform: none !important; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#page-decision-lab:is(.idl-practice, .idl-exam) .dl-shell { max-width: none; margin: 0; padding: 0; }
#page-decision-lab.idl-practice .dl-sbar { display: flex; align-items: center; gap: 11px; margin: 0; padding: 14px 20px 6px; border: 0; background: transparent; }
#page-decision-lab.idl-practice .dl-sbar-strip, #page-decision-lab.idl-practice #dl-clock-slot:empty { display: none; }
#page-decision-lab.idl-practice .dl-sbar > [data-action="decisionLabExit"] { order: -1; position: relative; flex: 0 0 auto; width: 34px; height: 34px !important; min-height: 0 !important; margin: 0; padding: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-mid); font-size: 0; box-shadow: none; display: grid; place-items: center; transition: transform .14s var(--ios-ease); }
#page-decision-lab.idl-practice .dl-sbar > [data-action="decisionLabExit"]::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>") center / contain no-repeat; }
#page-decision-lab.idl-practice .dl-sbar > [data-action="decisionLabExit"]::after { content: ""; position: absolute; inset: -5px; }
#page-decision-lab.idl-practice .dl-sbar > [data-action="decisionLabExit"]:active { transform: scale(0.97); }
#page-decision-lab:is(.idl-practice, .idl-exam) .dl-round-pill { margin: 0; font: 800 10.5px/1 Inter, sans-serif; letter-spacing: 0.04em; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 11%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 999px; padding: 6px 10px; }
#page-decision-lab:is(.idl-practice, .idl-exam) .dl-dots { display: flex; gap: 5px; margin: 0; padding: 2px 20px 8px; }
#page-decision-lab:is(.idl-practice, .idl-exam) .dl-dot { flex: 1 1 0; width: auto; height: 5px; margin: 0; border-radius: 3px; background: var(--track); transition: background-color .15s var(--ios-ease); }
#page-decision-lab:is(.idl-practice, .idl-exam) .dl-dot.done { background: color-mix(in oklab, var(--accent) 55%, var(--track)); }
#page-decision-lab:is(.idl-practice, .idl-exam) .dl-dot.now { background: var(--accent); transform: scaleY(1.4); }
#page-decision-lab:is(.idl-practice, .idl-exam) #dl-body { padding: 4px 20px calc(96px + env(safe-area-inset-bottom)); }
/* graded: Best in green, your pick in red, the rest dim; today's per-option why lines stay */
#page-decision-lab.idl-practice .sl-analyze-line { transition: background-color .18s var(--ios-ease), border-color .18s var(--ios-ease), opacity .2s var(--ios-ease), transform .12s var(--ios-ease); }
#page-decision-lab.idl-practice .dl-graded .sl-analyze-line { flex-wrap: wrap; cursor: default; }
#page-decision-lab.idl-practice .dl-graded .sl-analyze-line .dl-why { flex: 1 0 100%; order: 3; padding-left: 25px; }
#page-decision-lab.idl-practice .dl-graded .dl-opt.dl-correct { border-color: color-mix(in oklab, var(--green) 55%, var(--border)); background: color-mix(in oklab, var(--green) 9%, var(--surface)); color: var(--text); }
#page-decision-lab.idl-practice .dl-graded .dl-opt.dl-picked-wrong { border-color: color-mix(in oklab, var(--miss) 50%, var(--border)); background: color-mix(in oklab, var(--miss) 8%, var(--surface)); color: var(--text); }
#page-decision-lab.idl-practice .dl-graded .dl-opt.dl-correct::before { border-color: var(--green); background-color: var(--green); }
#page-decision-lab.idl-practice .dl-graded .dl-opt.dl-picked-wrong::before { border-color: var(--miss); background-color: var(--miss); }
#page-decision-lab.idl-practice .dl-graded .dl-opt.dl-wrong:not(.dl-picked-wrong) { opacity: 0.55; }
#page-decision-lab.idl-practice .dl-graded .dl-opt .dl-verdict { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
#page-decision-lab.idl-practice .dl-graded .dl-opt.dl-correct .dl-verdict { color: var(--green); }
#page-decision-lab.idl-practice .dl-graded .dl-opt.dl-picked-wrong .dl-verdict { color: var(--miss); }
#page-decision-lab.idl-practice .dl-teach { margin: 11px 0 0; border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--border)); border-radius: 14px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)); padding: 13px 14px; }
#page-decision-lab.idl-practice .dl-teach-k { margin: 0; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-deep); }
#page-decision-lab.idl-practice .dl-teach-b { margin: 7px 0 0; font: 500 12.5px/1.5 Inter, sans-serif; color: var(--text-mid); }
@media (prefers-reduced-motion: no-preference) {
  #page-decision-lab:is(.idl-practice, .idl-exam) #dl-body.idl-swap .sl-scenario > :not(.sl-actions) { animation: idl-swap .15s var(--ios-ease) backwards; }
  @keyframes idl-swap { from { opacity: 0; } }
  #page-decision-lab.idl-practice .dl-teach { animation: idl-tell .2s var(--ios-ease) .08s backwards; }
  @keyframes idl-tell { from { opacity: 0; transform: translateY(4px); } }
}
@media (prefers-reduced-motion: reduce) { #page-decision-lab.idl-practice .dl-teach { animation: idl-fade .2s ease backwards; } @keyframes idl-fade { from { opacity: 0; } } }

/* ═════════════════════ LIFT B3c3 · DECISION LAB EXAM (cert-ios-decisionlab.html ?v=exam, exam-amber, exam-end) · idl- ═════════════════════ */
/* The B3b2 bar (Time left · Decision N of M · End) and End dialog, widened above; the run bar and dots step aside. */
#page-decision-lab.idl-exam .dl-sbar, #page-decision-lab.idl-exam #dl-dots { display: none !important; }
#page-decision-lab.idl-exam #isl-xbar .sl-clock .sl-clock-t, #page-decision-lab.idl-exam #isl-xbar .sl-clock { transition: color .2s var(--ios-ease); }
#page-decision-lab.idl-exam:has(#isl-xbar) #dl-body { padding-top: 76px; }
html[data-theme] body #isl-end .modal-stats.isl-two .modal-stat { flex: 1 1 0 !important; }

/* ═════════════════════ LIFT B3c3 · DECISION LAB RESULTS (cert-ios-decisionlab.html ?v=results, results-open, results-exam-timeup) · idl- ═════════════════════ */
html[data-theme] body #page-decision-lab-result.active:has(#dl-result-root.idl-results) { padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none !important; transform: none !important; background: var(--bg); }
#dl-result-root.idl-results { max-width: none; margin: 0; padding: 0; display: block; text-align: left; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#dl-result-root.idl-results button { font-family: inherit; box-sizing: border-box; cursor: pointer; }
#dl-result-root .idl-vbody { padding: 12px 20px calc(150px + env(safe-area-inset-bottom)); }
#dl-result-root .idl-vkick { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 11px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
#dl-result-root .idl-vtitle { margin: 0; font: 600 32px/1.05 Fraunces, Georgia, serif !important; letter-spacing: -0.016em !important; text-transform: none !important; color: var(--text); }
#dl-result-root .idl-vtitle em { font-style: normal; color: var(--accent); }
#dl-result-root .idl-sect { margin: 18px 2px 10px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#dl-result-root .idl-conf { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); font: 500 13px/1.35 Inter, sans-serif; color: var(--text-mid); }
#dl-result-root .idl-pr { flex: 1 1 auto; min-width: 0; }
#dl-result-root .idl-conf b { color: var(--text); font-weight: 650; }
#dl-result-root .idl-tag { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--miss); background: color-mix(in oklab, var(--miss) 12%, transparent); }
#dl-result-root .idl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
#dl-result-root .idl-chips span { padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: 650 12.5px/1 Inter, sans-serif; color: var(--text-mid); }
#dl-result-root .idl-srow { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; margin: 0 0 9px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: inherit; text-align: left; transition: transform .14s var(--ios-ease); }
#dl-result-root .idl-srow:active { transform: scale(0.99); }
#dl-result-root .idl-sn { flex: 1 1 auto; min-width: 0; }
#dl-result-root .idl-st { display: block; font: 600 14px/1.25 Inter, sans-serif; color: var(--text); }
#dl-result-root .idl-ss { display: block; margin-top: 4px; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); }
#dl-result-root .idl-sv { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
#dl-result-root .idl-sv.ok { color: var(--green); background: color-mix(in oklab, var(--green) 14%, transparent); }
#dl-result-root .idl-sv.no { color: var(--miss); background: color-mix(in oklab, var(--miss) 13%, transparent); }
#dl-result-root .idl-srow > svg { flex: 0 0 auto; color: var(--text-dim); transition: transform .2s var(--ios-ease); }
#dl-result-root .idl-srow[aria-expanded="true"] > svg { transform: rotate(90deg); }
#dl-result-root .idl-sdet { margin: -4px 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface3); }
#dl-result-root .idl-sdet[hidden] { display: none; }
#dl-result-root .idl-lab { margin: 10px 0 5px; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
#dl-result-root .idl-lab:first-child { margin-top: 0; }
#dl-result-root .idl-lab.ok { color: var(--green); } #dl-result-root .idl-lab.no { color: var(--miss); } #dl-result-root .idl-lab.n { color: var(--text-dim); }
#dl-result-root .idl-val { font: 500 12.5px/1.5 Inter, sans-serif; color: var(--text); }
#dl-result-root .idl-why { margin: 0; font: 500 12px/1.5 Inter, sans-serif; color: var(--text-mid); }
#dl-result-root .idl-vdock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
#dl-result-root .idl-primary { width: 100%; min-height: 48px; margin: 0; padding: 14px; border: 0; border-radius: 13px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#dl-result-root .idl-ghost { width: 100%; min-height: 46px; margin: 0; padding: 13px 16px; border: 1px solid var(--border); border-radius: 13px; background: transparent; color: var(--text-mid); font: 650 14px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
#dl-result-root .idl-primary:active { transform: scale(0.985); } #dl-result-root .idl-ghost:active { transform: scale(0.98); }
@media (prefers-reduced-motion: no-preference) {
  #page-decision-lab-result.active #dl-result-root .idl-vbody > :is(.idl-vkick, .idl-vtitle, .idl-sect, .idl-conf, .idl-chips, .idl-srow) { animation: idl-rise .52s var(--ios-ease) backwards; }
  #page-decision-lab-result.active #dl-result-root .idl-vbody > :is(.idl-sect, .idl-conf, .idl-chips) { animation-delay: .05s; }
  #page-decision-lab-result.active #dl-result-root .idl-vbody > .idl-srow { animation-delay: .1s; }
  #dl-result-root .idl-srow[aria-expanded="true"] + .idl-sdet { animation: idl-note .22s var(--ios-ease) backwards; }
  @keyframes idl-note { from { opacity: 0; transform: translateY(-3px); } }
}
@media (prefers-reduced-motion: reduce) { #dl-result-root .idl-srow[aria-expanded="true"] + .idl-sdet { animation: idl-fade .2s ease backwards; } }
/* milestone toasts on the results (never over the score): anchored above the dock, stacking upwards */
html[data-theme] body:has(#page-decision-lab-result.active .idl-vbody) .celebration-toast { top: auto !important; bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
html[data-theme] body:has(#page-decision-lab-result.active .idl-vbody) .celebration-toast ~ .celebration-toast { top: auto !important; bottom: calc(150px + 84px + env(safe-area-inset-bottom)) !important; }
html[data-theme] body:has(#page-decision-lab-result.active .idl-vbody) .celebration-toast:not(.show) { transform: translateY(16px) !important; }
/* the pick: one choice, service names read as words (drawn: Inter, round markers); the why lines only after grading */
#page-decision-lab:is(.idl-practice, .idl-exam) .sl-analyze-line { font: 550 14px/1.3 Inter, -apple-system, sans-serif; color: var(--text); }
#page-decision-lab:is(.idl-practice, .idl-exam) .sl-analyze-line .dl-lab { flex: 1 1 0; min-width: 0; }   /* basis 0: a long label shrinks beside its marker, it never wraps under it */
#page-decision-lab:is(.idl-practice, .idl-exam) .sl-analyze-line .dl-verdict { flex: 0 0 auto; }
#page-decision-lab:is(.idl-practice, .idl-exam) .sl-analyze-line::before { border-radius: 999px; }
#page-decision-lab:is(.idl-practice, .idl-exam) .sl-analyze-block:not(.dl-graded) .dl-why { display: none; }
#page-decision-lab:is(.idl-practice, .idl-exam) .sl-analyze-block:not(.dl-graded) .dl-verdict { display: none; }
#page-decision-lab.idl-practice .dl-graded .dl-opt:is(.dl-correct, .dl-picked-wrong)::before { background-position: center; background-repeat: no-repeat; background-size: 10px 10px; }
#page-decision-lab.idl-practice .dl-graded .dl-opt.dl-correct::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>"); }
#page-decision-lab.idl-practice .dl-graded .dl-opt.dl-picked-wrong::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6L6 18M6 6l12 12'/></svg>"); }
#page-decision-lab:is(.idl-practice, .idl-exam) .sl-analyze-block { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
#idl-entry.idl-static :is(.idl-hero, .idl-target, .idl-modes) { animation: none !important; }   /* the reveal plays once, on open */

/* ═════════════════════ LIFT B4 · SETTINGS (cert-ios-settings.html, all states) · ist- ═════════════════════ */
/* Spec docs/superpowers/specs/2026-10-26-ios-lift-b4-design.md. The host toggles #page-settings.ist-on from JS (no
   :not(:empty) host rule: several paths fill it on an already-shown page, which WebKit misses). */
body:has(#page-settings.active.ist-on) #app-topbar, body:has(#page-settings.active.ist-on) .app-topbar { display: none !important; }
#page-settings.ist-on > :not(#ios-settings) { display: none !important; }
html[data-theme] body #page-settings.ist-on.active { padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none !important; transform: none !important; }
#ios-settings { background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
#ios-settings:not(:empty) { display: block !important; min-height: 100dvh; }
:is(#ios-settings, #ist-sheet) button { font-family: inherit; box-sizing: border-box; cursor: pointer; margin: 0; min-height: 0; }
#ios-settings .ist-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px 16px; margin-bottom: 11px; }
#ios-settings .ist-group + .ist-card, #ios-settings .ist-group + .ist-btns { margin-top: 10px; }
#ios-settings .ist-lock { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); background: color-mix(in oklab, var(--accent) 9%, transparent); border-radius: 999px; padding: 4px 7px; }
#ios-settings .ist-seg { display: flex; gap: 5px; background: color-mix(in oklab, var(--text) 5%, var(--surface2)); border: 1px solid var(--border); border-radius: 13px; padding: 4px; }
#ios-settings .ist-seg button { flex: 1 1 0; min-height: 40px; border: none; background: transparent; border-radius: 9px; padding: 0; font: 700 14px/1 Inter, sans-serif; color: var(--text-dim); transition: background-color .2s var(--ios-ease), color .2s, transform .14s var(--ios-ease); }
#ios-settings .ist-seg button:active { transform: scale(0.96); }
#ios-settings .ist-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--accent) 70%, transparent); }
#ios-settings .ist-wide { width: 100%; margin-top: 11px; flex: 0 0 auto; }
#ios-settings .ist-row.ist-who { cursor: default; }
#ios-settings .ist-row.ist-who:active { background: transparent; }
#ios-settings .ist-outg { margin-top: 22px; }
#ios-settings .ist-row.ist-out { justify-content: center; color: var(--miss); font-weight: 650; }
#ios-settings .ist-ri svg, #ios-settings .ist-row > svg:last-child { flex: 0 0 auto; }
#ios-settings .ist-pp h3, #ios-settings .ist-acct h2 { text-transform: none !important; letter-spacing: -0.01em !important; }
/* the sheet: B3c1's #igt-topics anatomy (shared rules widened below), list and calendar content */
#ist-sheet { max-height: 82dvh; display: flex; flex-direction: column; }
:is(#ist-sheet, #ist-sheet-scrim)[hidden] { display: none !important; }   /* the flex rule above would otherwise beat the hidden attribute */
#ist-sheet .ist-grip { width: 38px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--text) 18%, transparent); margin: 0 auto 13px; flex: 0 0 auto; }
#ist-sheet .ist-blank { display: block; }
#ist-sheet .ist-pri:disabled { opacity: .45; }
#ist-sheet .ist-pro-tag { flex: 0 0 auto; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, var(--surface2)); border-radius: 999px; padding: 4px 7px; }

  #ios-settings .ist-hdr { display: flex; align-items: center; gap: 12px; padding: 14px 20px 6px; }
  #ios-settings .ist-hdr .ist-tt { flex: 1 1 auto; min-width: 0; }
  #ios-settings .ist-hdr h1 { font: 600 24px/1.05 Fraunces, Georgia, serif; letter-spacing: -0.012em; margin: 0; color: var(--text); }
  #ios-settings .ist-hdr .ist-cc { display: block; margin-top: 4px; font: 600 11px/1 'Roboto Mono', monospace; color: var(--text-dim); }
  #ios-settings .ist-theme { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-mid); display: grid; place-items: center; cursor: pointer; transition: transform .14s var(--ios-ease); }
  #ios-settings .ist-theme::after { content: ""; position: absolute; inset: -4px; }
  #ios-settings .ist-theme:active { transform: scale(0.96); }
  #ios-settings .ist-theme svg { width: 18px; height: 18px; }
  #ios-settings .ist-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 20px 26px; }
  #ios-settings .ist-body::-webkit-scrollbar { width: 0; }
  #ios-settings .ist-sect { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 22px 2px 10px; }
  #ios-settings .ist-sect:first-child { margin-top: 8px; }
  #ios-settings .ist-sect.danger { color: var(--miss); }
  /* account card */
  #ios-settings .ist-acct { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 16px; }
  #ios-settings .ist-acct.out { background: color-mix(in oklab, var(--accent) 7%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
  #ios-settings .ist-acct h2 { font: 600 19px/1.2 Fraunces, Georgia, serif; margin: 0; color: var(--text); letter-spacing: -0.01em; }
  #ios-settings .ist-acct p { margin: 7px 0 0; font: 500 13px/1.5 Inter, sans-serif; color: var(--text-mid); }
  #ios-settings .ist-who { display: flex; align-items: center; gap: 12px; }
  #ios-settings .ist-av { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; font: 700 16px/1 Inter, sans-serif; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 14%, var(--surface2)); }
  #ios-settings .ist-who .ist-em { flex: 1 1 auto; min-width: 0; font: 650 14.5px/1.25 Inter, sans-serif; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #ios-settings .ist-who .ist-em span { display: block; margin-top: 3px; font: 500 11.5px/1.2 Inter, sans-serif; color: var(--text-dim); }
  #ios-settings .ist-plan { flex: 0 0 auto; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 5px 8px; color: var(--text-mid); background: color-mix(in oklab, var(--text) 8%, transparent); }
  #ios-settings .ist-plan.pro { color: var(--on-accent); background: var(--accent); }
  #ios-settings .ist-signin { width: 100%; margin-top: 14px; border: none; border-radius: 12px; padding: 13px; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; cursor: pointer; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
  #ios-settings .ist-signin:active { transform: scale(0.985); }
  /* iOS rows */
  #ios-settings .ist-group { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
  #ios-settings .ist-acct + .ist-group { margin-top: 10px; }
  /* v8.205.0: the cert's trademark line, as an iOS group footer under Study setup (PRINCE2, PSM): small, grey, quiet */
  #ios-settings .ist-gfoot { margin: 8px 14px 4px; font: 500 12px/1.45 Inter, sans-serif; color: var(--text-dim); }
  #ios-settings .ist-row { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: transparent; color: var(--text); text-align: left; font: 600 14px/1.25 Inter, sans-serif; cursor: pointer; transition: background-color .15s var(--ios-ease); }
  #ios-settings .ist-row + .ist-row, #ios-settings .ist-group > * + .ist-row { border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); }
  #ios-settings .ist-row:active { background: color-mix(in oklab, var(--text) 5%, transparent); }
  #ios-settings .ist-row .ist-ri { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 11%, var(--surface2)); }
  #ios-settings .ist-row .ist-ri svg { width: 16px; height: 16px; }
  #ios-settings .ist-row .ist-rl { flex: 1 1 0; min-width: 0; }
  #ios-settings .ist-row .ist-rl span { display: block; margin-top: 3px; font: 500 11.5px/1.35 Inter, sans-serif; color: var(--text-dim); }
  #ios-settings .ist-row .ist-rv { flex: 0 0 auto; font: 500 13px/1.2 Inter, sans-serif; color: var(--text-dim); text-align: right; }
  #ios-settings .ist-row .ist-rv.ok { color: var(--green); } .ist-row .ist-rv.warn { color: var(--accent-deep); }
  #ios-settings .ist-row > svg:last-child { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-dim); }
  #ios-settings .ist-row.pro .ist-rl { color: var(--accent-deep); }
  #ios-settings .ist-row.danger .ist-rl { color: var(--miss); } .ist-row.danger .ist-ri { color: var(--miss); background: color-mix(in oklab, var(--miss) 11%, var(--surface2)); }
  /* pass plan */
  #ios-settings .ist-pp h3 { font: 600 17px/1.25 Fraunces, Georgia, serif; margin: 0; color: var(--text); }
  #ios-settings .ist-pp p { margin: 7px 0 0; font: 500 13px/1.5 Inter, sans-serif; color: var(--text-mid); }
  #ios-settings .ist-pp .pp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  #ios-settings .ist-pp .pp-stats div { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--bg); }
  #ios-settings .ist-pp .pp-stats b { display: block; font: 600 20px/1 Fraunces, Georgia, serif; color: var(--text); }
  #ios-settings .ist-pp .pp-stats span { display: block; margin-top: 5px; font: 700 9px/1.2 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
  #ios-settings .ist-pp .pp-locked { margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); }
  #ios-settings .ist-pp .pp-locked .k { font: 650 12.5px/1.35 Inter, sans-serif; color: var(--text); }
  #ios-settings .ist-btns { display: flex; gap: 9px; margin-top: 13px; }
  #ios-settings .ist-pri { flex: 1 1 0; min-height: 44px; border: none; border-radius: 12px; padding: 12px; background: var(--accent); color: var(--on-accent); font: 700 14px/1 Inter, sans-serif; cursor: pointer; transition: transform .15s var(--ios-ease); }
  #ios-settings .ist-sec { flex: 1 1 0; min-height: 44px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: transparent; color: var(--text-mid); font: 650 14px/1 Inter, sans-serif; cursor: pointer; transition: transform .15s var(--ios-ease); }
  #ios-settings .ist-pri:active, #ios-settings .ist-sec:active { transform: scale(0.985); }
  #ios-settings .ist-pri:disabled { opacity: .45; cursor: default; }
  /* goal / review cards */
  #ios-settings .ist-k { display: flex; align-items: center; gap: 8px; font: 650 14px/1.2 Inter, sans-serif; color: var(--text); }
  #ios-settings .ist-big { display: flex; align-items: baseline; gap: 9px; margin: 10px 0 11px; }
  #ios-settings .ist-big b { font: 600 40px/1 Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
  #ios-settings .ist-big span { font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
  #ist-sheet .ist-note { margin: 10px 0 0; font: 500 12px/1.5 Inter, sans-serif; color: var(--text-dim); }
  #ist-sheet .ist-note b { color: var(--text-mid); }
  #ios-settings .ist-free { margin-top: 11px; border-radius: 12px; padding: 11px 12px; background: color-mix(in oklab, var(--accent) 8%, var(--bg)); font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); }
  #ios-settings .ist-free b { color: var(--text); }
  #ios-settings .ist-tog { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding-top: 12px; border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); }
  #ios-settings .ist-tog .ist-tl { flex: 1 1 auto; min-width: 0; font: 650 13.5px/1.25 Inter, sans-serif; color: var(--text); }
  #ios-settings .ist-tog .ist-tl span { display: block; margin-top: 3px; font: 500 11.5px/1.4 Inter, sans-serif; color: var(--text-dim); }
  #ios-settings .ist-sw { position: relative; flex: 0 0 auto; width: 48px; height: 30px; border-radius: 999px; border: none; background: var(--track); cursor: pointer; padding: 0; transition: background-color .2s var(--ios-ease); }
  #ios-settings .ist-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ios-ease); }
  #ios-settings .ist-sw[aria-pressed="true"] { background: var(--accent); }
  #ios-settings .ist-sw[aria-pressed="true"]::after { transform: translateX(18px); }
  /* backups */
  #ios-settings .ist-bk { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; min-height: 52px; }
  #ios-settings .ist-bk + .ist-bk { border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); }
  #ios-settings .ist-bk:active { background: color-mix(in oklab, var(--text) 5%, transparent); }
  #ios-settings .ist-bk .ist-bl { flex: 1 1 0; min-width: 0; font: 650 13.5px/1.2 Inter, sans-serif; }
  #ios-settings .ist-bk .ist-bl span { display: block; margin-top: 4px; font: 500 11px/1.3 'Roboto Mono', monospace; color: var(--text-dim); }
  #ios-settings .ist-bk .ist-bv { flex: 0 0 auto; font: 650 12px/1 Inter, sans-serif; color: var(--accent-deep); }
  /* the bottom sheet for lists and the calendar (#ist-sheet) */
  #ist-sheet h3 { font: 600 19px/1.2 Fraunces, Georgia, serif; margin: 4px 0 4px; color: var(--text); }
  #ist-sheet > p { margin: 0 0 12px; font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); }
  #ist-sheet .ist-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px; }
  #ist-sheet .ist-cert { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 6px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; border-radius: 12px; }
  #ist-sheet .ist-cert:active { background: color-mix(in oklab, var(--text) 5%, transparent); }
  #ist-sheet .ist-cert .ist-g { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 800 11px/1 Inter, sans-serif; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, var(--surface2)); }
  #ist-sheet .ist-cert .ist-n { flex: 1 1 0; min-width: 0; font: 650 14px/1.2 Inter, sans-serif; }
  #ist-sheet .ist-cert .ist-n span { display: block; margin-top: 3px; font: 600 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); }
  #ist-sheet .ist-cert .ist-pro-tag { margin-left: 0; }
  #ist-sheet .ist-cert .ist-tick { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent-deep); }
  #ist-sheet .ist-cert.on { background: color-mix(in oklab, var(--accent) 8%, transparent); }
  #ist-sheet .ist-cal-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 8px; }
  #ist-sheet .ist-cal-month { font: 700 14px/1 Inter, sans-serif; color: var(--text); }
  #ist-sheet .ist-cal-nav { display: inline-flex; gap: 6px; }
  #ist-sheet .ist-cal-nav button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; }
  #ist-sheet .ist-cal-nav svg { width: 14px; height: 14px; }
  #ist-sheet .ist-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  #ist-sheet .ist-dow { text-align: center; font: 700 10px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); padding: 5px 0 7px; }
  #ist-sheet .ist-day { aspect-ratio: 1; border: 0; background: transparent; border-radius: 10px; font: 600 13.5px/1 Inter, sans-serif; color: var(--text); cursor: pointer; }
  #ist-sheet .ist-day:disabled { color: color-mix(in oklab, var(--text) 26%, transparent); cursor: default; }
  #ist-sheet .ist-day.today { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 65%, transparent); }
  #ist-sheet .ist-day { transition: transform .12s var(--ios-ease); } .ist-day:active:not(:disabled) { transform: scale(0.95); }
  #ist-sheet .ist-day.sel { background: var(--accent); color: var(--on-accent); font-weight: 800; }
  #ist-sheet .ist-pri { width: 100%; margin-top: 12px; flex: 0 0 auto; }
  #ist-sheet .ist-clear { width: 100%; margin-top: 6px; border: 0; background: none; padding: 11px; font: 650 13px/1 Inter, sans-serif; color: var(--text-mid); cursor: pointer; }
  /* delete confirm (today's modal, restyled as a sheet) */
  #ios-settings.ist-still .reveal { animation: none !important; }   /* a redraw after a state change does not replay the entrance */
@media (prefers-reduced-motion: no-preference) {
  #page-settings.active #ios-settings .ist-body > .reveal { animation: ist-rise .5s var(--ios-ease) backwards; }
  #page-settings.active #ios-settings .ist-body > .reveal:nth-child(2) { animation-delay: .05s; } #page-settings.active #ios-settings .ist-body > .reveal:nth-child(3) { animation-delay: .1s; }
  #page-settings.active #ios-settings .ist-body > .reveal:nth-child(4) { animation-delay: .15s; } #page-settings.active #ios-settings .ist-body > .reveal:nth-child(5) { animation-delay: .2s; }
  #page-settings.active #ios-settings .ist-body > .reveal:nth-child(n+6) { animation-delay: .25s; }   /* reading order: the rest rise on the last beat */
  #ios-settings.ist-still .reveal { animation: none !important; }   /* a redraw after a state change does not replay the entrance */
  @keyframes ist-rise { from { opacity: 0; transform: translateY(9px); } }
}
/* the Pass Plan card: today's diagnostic.js markup, restyled as the drawing (its pitch line and "Get Pro at launch"
   stay off the phone page: the account card's one Go Pro row covers that, founder decision 2) */
#ios-settings .ist-pp .sub-label, #ios-settings .ist-pp .locked-sub, #ios-settings .ist-pp [data-act="pp-pro"] { display: none !important; }
#ios-settings .ist-pp .plan-card { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#ios-settings .ist-pp .pp-empty-h { margin: 0; font: 600 17px/1.25 Fraunces, Georgia, serif; color: var(--text); }
#ios-settings .ist-pp .pp-empty-sub, #ios-settings .ist-pp .pcard-detail p { margin: 7px 0 0; font: 500 13px/1.5 Inter, sans-serif; color: var(--text-mid); }
#ios-settings .ist-pp .btn { box-sizing: border-box; min-height: 44px; margin: 13px 0 0; padding: 12px; border-radius: 12px; font: 700 14px/1 Inter, sans-serif !important; box-shadow: none; transition: transform .15s var(--ios-ease); }
#ios-settings .ist-pp .btn:active { transform: scale(0.985); }
#ios-settings .ist-pp .pp-empty .btn, #ios-settings .ist-pp .btn-full { display: block; width: 100%; }
#ios-settings .ist-pp .btn-primary { border: 0; background: var(--accent); color: var(--on-accent); }
#ios-settings .ist-pp .btn-ghost { border: 1px solid var(--border); background: transparent; color: var(--text-mid); }
#ios-settings .ist-pp .pcard-cta { display: flex; gap: 9px; }
#ios-settings .ist-pp .pcard-cta .btn { flex: 1 1 0; width: auto !important; }
#ios-settings .ist-pp .pcard-eyebrow { display: flex; justify-content: space-between; gap: 10px; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-dim); }
#ios-settings .ist-pp .pcard-main { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
#ios-settings .ist-pp .prob-ring { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; }
#ios-settings .ist-pp .prob-ring .inner { width: 52px; height: 52px; border-radius: 999px; background: var(--surface); display: grid; place-items: center; align-content: center; }
#ios-settings .ist-pp .prob-ring .pct { font: 600 17px/1 Fraunces, Georgia, serif; color: var(--text); }
#ios-settings .ist-pp .prob-ring .lbl { font: 700 8.5px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-top: 3px; }
#ios-settings .ist-pp .locked-certs { margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); }
#ios-settings .ist-pp .locked-h { margin: 0; font: 650 12.5px/1.35 Inter, sans-serif; color: var(--text); }
#ios-settings .ist-pp .cert-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#ios-settings .ist-pp .cert-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 9px; font: 600 11.5px/1 Inter, sans-serif; color: var(--text-dim); }
#ios-settings .ist-pp .cert-chip svg { flex: 0 0 auto; width: 10px; height: 10px; }
#ios-settings .ist-pp .plan-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); }
#ios-settings .ist-pp .plan-item:first-of-type { border-top: 0; }
/* Delete account: today's confirm (features/settings.js), shown as the drawn bottom sheet while the phone page is on */
html[data-theme] body:has(#page-settings.active.ist-on) #delete-account-modal { align-items: flex-end !important; justify-content: stretch !important; padding: 0 !important; }
html[data-theme] body:has(#page-settings.active.ist-on) #delete-account-modal .dla-card { box-sizing: border-box; width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 22px 22px 0 0 !important; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)) !important; text-align: left !important; }
html[data-theme] body:has(#page-settings.active.ist-on) #delete-account-modal .dla-card::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--text) 18%, transparent); margin: 0 auto 13px; }
html[data-theme] body:has(#page-settings.active.ist-on) #delete-account-modal .dla-mark { display: none !important; }
html[data-theme] body:has(#page-settings.active.ist-on) #delete-account-modal .dlpb-title { font: 600 19px/1.2 Fraunces, Georgia, serif !important; text-align: left !important; margin: 4px 0 4px !important; }
html[data-theme] body:has(#page-settings.active.ist-on) #delete-account-modal .dlpb-lede { text-align: left !important; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body:has(#page-settings.active.ist-on) #delete-account-modal .dla-card { animation: ist-sheet-in .36s var(--ios-ease) backwards; }
  @keyframes ist-sheet-in { from { transform: translateY(100%); } }
}
/* the hand-written rules that share a selector with the ported block come after it, so they win as before scoping */
#ios-settings .ist-body { overflow: visible; padding: 6px 20px calc(96px + env(safe-area-inset-bottom)); }
#ios-settings .ist-row > svg:last-child { color: var(--text-dim); }
#ios-settings .ist-hdr { padding-top: 14px; }
#ios-settings .ist-hdr h1 { font: 600 24px/1.05 Fraunces, Georgia, serif !important; letter-spacing: -0.012em !important; text-transform: none !important; color: var(--text); margin: 0; }
#ist-sheet > p { margin: 0 0 12px; font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); }
#ist-sheet .ist-pri { width: 100%; min-height: 46px; margin-top: 12px; border: none; border-radius: 12px; padding: 12px; background: var(--accent); color: var(--on-accent); font: 700 14px/1 Inter, sans-serif; }
#ist-sheet .ist-cert.on { cursor: default; }
#ist-sheet .ist-pro-tag { display: inline-flex; align-items: center; gap: 3px; }   /* the lock sits apart from "Pro", as drawn */

/* ═════════════════ LIFT C · FIRST RUN (onboarding-*.html, cert-ios-daily-limit.html) ═════════════════
   June E2E @ ee053395, HUD "C ›". Hosts: #ios-home (day-0, capped, offline), #ios-check (the check, its
   score, the daily limit), #onb-firstrun (picker), #ist-sheet (lock-in), #onb-resolve (restore). */
html.ifr-day0 #lift-tabbar, html.ifr-check #lift-tabbar { display: none !important; }
.ifr-home, .ifr-check, .ifr-picker { color: var(--text); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
.ifr-home *, .ifr-check *, .ifr-picker *, #ist-sheet .ifr-terms * { box-sizing: border-box; }
.ifr-home button, .ifr-check button, .ifr-picker button { font-family: inherit; }
.ifr-home svg, .ifr-check svg, .ifr-picker svg, .ifr-off svg, #ist-sheet .ifr-sheet-head svg, #ist-sheet .ifr-ti svg, .ifr-restore svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ifr-home { padding: 12px 20px 28px; }
/* 30 Oct: Skip, top right like an iOS nav bar; leaves day 0 for the cert's normal Home */
.ifr-d0-top { display: flex; justify-content: flex-end; margin: 0 -8px -6px; }
.ifr-skip { min-height: 44px; padding: 0 8px; border: 0; background: none; cursor: pointer; color: var(--accent-bright); font: 600 15px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
html[data-theme="light"] .ifr-skip { color: var(--accent-deep); }
.ifr-skip:active { transform: scale(0.97); }
.ifr-greet { margin: 10px 2px 4px; }
.ifr-hi { font: 800 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 7px; }
.ifr-greet h1 { font: 600 24px/1.12 Fraunces, Georgia, serif; letter-spacing: -.015em; margin: 0; color: var(--text); }
.ifr-lede { font-size: 13.5px; line-height: 1.5; color: var(--text-mid); margin: 9px 0 0; }
#ios-home .ifr-day0 .ifr-lede { font-size: 14px; color: var(--text-mid); max-width: 32ch; margin: 8px 0 0; }
.ifr-hb { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 14px 15px; margin-top: 14px; }
.ifr-hb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ifr-hb-quota { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); padding-top: 4px; margin-top: 12px; }
.ifr-hb-cert { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.ifr-mark { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in oklab, var(--accent) 14%, var(--surface3)); color: var(--accent-deep); display: grid; place-items: center; font: 800 13px/1 Inter, sans-serif; }
.ifr-hb-name { display: block; font: 650 15px/1.1 Inter, sans-serif; color: var(--text); }
.ifr-hb-code { display: block; font: 600 11.5px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 3px; }
.ifr-plan, .ifr-tag { flex: 0 0 auto; font: 800 10px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 5px 9px; }
.ifr-hb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; }
.ifr-hb-row + .ifr-hb-row { border-top: 1px solid color-mix(in oklab, var(--border) 55%, transparent); }
.ifr-hb-rn { font-size: 13.5px; color: var(--text-mid); }
.ifr-hb-rv { font: 600 13px/1 Inter, sans-serif; color: var(--text); }
.ifr-hb-full { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 Inter, sans-serif; color: var(--green); background: color-mix(in oklab, var(--green) 12%, transparent); border: 1px solid color-mix(in oklab, var(--green) 30%, var(--border)); border-radius: 999px; padding: 6px 10px; }
.ifr-hb-full svg { width: 12px; height: 12px; stroke-width: 2.4; }
.ifr-ready { margin-top: 14px; border: 1px dashed color-mix(in oklab, var(--accent) 34%, var(--border)); border-radius: 16px; background: color-mix(in oklab, var(--accent) 4%, var(--surface)); padding: 16px 15px; display: flex; align-items: center; gap: 14px; }
.ifr-ready-dial { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: var(--surface); border: 2px dashed color-mix(in oklab, var(--accent) 40%, var(--border)); color: var(--accent-deep); }
.ifr-ready-dial svg { width: 22px; height: 22px; }
.ifr-ready-t { font: 650 14px/1.15 Inter, sans-serif; color: var(--text); }
.ifr-ready-s { font-size: 12.5px; line-height: 1.45; color: var(--text-mid); margin-top: 3px; }
.ifr-diag { margin-top: 16px; border: 1px solid color-mix(in oklab, var(--accent) 38%, var(--border)); border-radius: 18px; background: color-mix(in oklab, var(--accent) 8%, var(--surface)); padding: 17px 16px; }
.ifr-diag-head, .ifr-start-head { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.ifr-diag-badge { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 16%, var(--surface3)); color: var(--accent-deep); }
.ifr-diag-badge svg { width: 22px; height: 22px; }
.ifr-diag-kick { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 5px; }
.ifr-diag-h { font: 600 18px/1.15 Fraunces, Georgia, serif; letter-spacing: -.01em; color: var(--text); }
.ifr-diag-p { font-size: 12.8px; line-height: 1.5; color: var(--text-mid); margin: 0 0 14px; }
.ifr-diag-p b, .ifr-lede b, .ifr-note b { color: var(--text); font-weight: 650; }
.ifr-btn { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 13px; padding: 14px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease), opacity .2s; }
.ifr-btn svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.ifr-btn:active { transform: scale(0.985); }
.ifr-btn[disabled] { opacity: .45; box-shadow: none; cursor: default; }
.ifr-ghost { width: 100%; min-height: 46px; border: 1px solid color-mix(in oklab, var(--accent) 36%, var(--border)); border-radius: 13px; padding: 13px; cursor: pointer; background: transparent; color: var(--accent-bright); font: 650 14px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
html[data-theme="light"] .ifr-ghost { color: var(--accent-deep); }
.ifr-ghost:active { transform: scale(0.985); }
.ifr-text { width: 100%; min-height: 44px; border: none; background: none; color: var(--text-dim); font: 600 13.5px/1 Inter, sans-serif; cursor: pointer; }
.ifr-start, .ifr-rev { margin-top: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 16px; }
.ifr-start-head { margin-bottom: 13px; }
.ifr-start-ring { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--surface); border: 2px solid color-mix(in oklab, var(--accent) 45%, var(--border)); font: 600 18px/1 Fraunces, serif; color: var(--accent-deep); font-variant-numeric: lining-nums; }
.ifr-start-ring svg { width: 20px; height: 20px; }
.ifr-start-t { font: 650 15px/1.1 Inter, sans-serif; color: var(--text); }
.ifr-start-s { font-size: 12.5px; color: var(--text-mid); margin-top: 3px; }
.ifr-see { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 16px; }
.ifr-see-t { font: 650 14px/1.2 Inter, sans-serif; color: var(--text); }
.ifr-see-s { font-size: 12.5px; color: var(--text-mid); margin-top: 2px; }
.ifr-see-btn { flex: 0 0 auto; min-height: 44px; border: 1px solid color-mix(in oklab, var(--accent) 36%, var(--border)); background: transparent; color: var(--accent-deep); border-radius: 999px; padding: 0 16px; font: 700 13px/1 Inter, sans-serif; cursor: pointer; }
/* The check, its score and the daily limit: a full screen over the app (#ios-check). */
#ios-check { position: fixed; inset: 0; z-index: 9000; background: var(--bg); overflow: hidden; }
#ios-check[hidden] { display: none !important; }
.ifr-check { height: 100%; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.ifr-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 20px 6px; }
.ifr-hdr h1 { flex: 1; margin: 0; font: 600 21px/1.15 Fraunces, Georgia, serif; letter-spacing: -.01em; color: var(--text); }
.ifr-hdr-k { flex: 1; font: 800 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); }
.ifr-back { width: 44px; height: 44px; margin-left: -10px; border: none; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.ifr-back svg { width: 22px; height: 22px; }
.ifr-body { flex: 1; overflow-y: auto; padding: 8px 20px 16px; }
.ifr-prog { display: flex; justify-content: space-between; font: 600 12.5px/1 Inter, sans-serif; color: var(--text-mid); margin: 6px 0 9px; }
.ifr-qt { font-family: 'Roboto Mono', monospace; color: var(--text-dim); }
.ifr-qbar { height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.ifr-qbar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s var(--ios-ease); }
.ifr-topic { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font: 800 10px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.ifr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ifr-qtext { font: 600 18px/1.35 Inter, sans-serif; color: var(--text); margin: 12px 0 16px; }
.ifr-opt { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; text-align: left; margin-bottom: 9px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: 500 15px/1.35 Inter, sans-serif; cursor: pointer; transition: transform .12s var(--ios-ease), border-color .2s; }
.ifr-opt:active { transform: scale(0.99); }
.ifr-opt.sel { border-width: 2px; padding: 11px 13px; border-color: var(--accent); background: color-mix(in oklab, var(--accent) 9%, var(--surface)); }
.ifr-key { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface3); font: 700 13px/1 Inter, sans-serif; color: var(--text-mid); }
.ifr-opt.sel .ifr-key { background: var(--accent); color: var(--on-accent); }
.ifr-note { display: flex; gap: 10px; margin-top: 12px; padding: 12px 13px; border: 1px solid color-mix(in oklab, var(--border) 80%, transparent); border-radius: 13px; background: color-mix(in oklab, var(--accent) 4%, var(--surface)); }
.ifr-note svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--accent-deep); margin-top: 1px; }
.ifr-note p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-mid); }
.ifr-foot { padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; border-top: 1px solid color-mix(in oklab, var(--border) 50%, transparent); background: var(--bg); }
.ifr-foot-hint { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--text-dim); }
/* F3: the picker as the app's opening screen (lifted from the approved ?v=first drawing). */
.ifr-first-head { padding: 18px 22px 14px; }
.ifr-fh-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.ifr-fh-mark { width: 26px; height: 26px; color: var(--accent); display: inline-flex; }
.ifr-fh-mark svg { width: 100%; height: 100%; }
.ifr-fh-name { font: 700 15px/1 Inter, sans-serif; letter-spacing: -0.01em; color: var(--text); }
.ifr-first-head h1 { margin: 0; max-width: 15ch; font: 600 27px/1.1 Fraunces, Georgia, serif; letter-spacing: -0.015em; color: var(--text); }
@keyframes ifr-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .ifr-first-head { animation: ifr-rise .5s var(--ios-ease) backwards; } }
.ifr-first-signin { width: 100%; min-height: 44px; margin-top: 4px; border: 0; background: none; cursor: pointer; font: 500 13.5px/1 Inter, sans-serif; color: var(--text-mid); transition: transform .15s var(--ios-ease); }
.ifr-first-signin b { color: var(--accent-bright); font-weight: 650; }
html[data-theme="light"] .ifr-first-signin b { color: var(--accent-deep); }
.ifr-first-signin:active { transform: scale(0.97); }
.ifr-first .ifr-pnote { margin-top: 0; }   /* F3 Task 9: the drawing's note sits on the head's 14px; Sign in sits 4px under Lock in */
.ifr-first .ifr-foot { gap: 0; }
.ifr-kicker { font: 800 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); margin: 10px 0 12px; }
.ifr-ac { border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 18px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)); padding: 16px; }
.ifr-ac-top { display: flex; align-items: center; gap: 10px; }
.ifr-ac-top > span:nth-child(2) { flex: 1; }
.ifr-badge { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); border: 1px solid color-mix(in oklab, var(--accent) 36%, var(--border)); border-radius: 999px; padding: 5px 9px; }
.ifr-ac-score { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 12px; }
.ifr-ac-num { font: 600 46px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.ifr-ac-of { font-size: 13px; color: var(--text-dim); }
.ifr-bar { position: relative; height: 8px; border-radius: 999px; background: var(--track); }
.ifr-bar > span:first-child { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ifr-tick { position: absolute; top: -3px; width: 2px; height: 14px; border-radius: 1px; background: var(--text-mid); }
.ifr-legend { display: flex; justify-content: space-between; margin-top: 7px; font: 600 11px/1 'Roboto Mono', monospace; color: var(--text-dim); }
.ifr-legend .p { color: var(--text-mid); }
.ifr-frame { font: 600 17px/1.3 Fraunces, Georgia, serif; color: var(--text); margin: 18px 2px 10px; }
.ifr-aha2 { display: flex; gap: 10px; }
.ifr-aha2 svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--accent-deep); margin-top: 2px; }
.ifr-aha2 p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-mid); }
.ifr-lock { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 14%, var(--surface3)); color: var(--accent-deep); margin: 8px 0 14px; }
.ifr-lock svg { width: 24px; height: 24px; }
.ifr-limit-h { font: 600 26px/1.15 Fraunces, Georgia, serif; letter-spacing: -.015em; margin: 0; color: var(--text); }
.ifr-limit-h em { font-style: italic; color: var(--accent-deep); }
.ifr-allow { margin-top: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.ifr-arow { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.ifr-arow + .ifr-arow { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.ifr-aico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface3); color: var(--accent-deep); }
.ifr-aico svg { width: 17px; height: 17px; }
.ifr-atx { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--text-dim); }
.ifr-atx b { font: 650 14px/1.2 Inter, sans-serif; color: var(--text); }
.ifr-aamt { font: 700 13px/1 'Roboto Mono', monospace; color: var(--text); }
.ifr-proline { margin: 16px 2px 0; font-size: 13.5px; color: var(--text-mid); }
.ifr-proline b { color: var(--accent-deep); }
/* Offline: Home shows June's calm state; every page gets the small Offline bar. */
#ifr-offbar { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 9100; display: none; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font: 700 11.5px/1 Inter, sans-serif; color: var(--text-mid); box-shadow: 0 8px 20px -14px rgba(0,0,0,.5); }
html.ifr-offline #ifr-offbar { display: inline-flex; }
#ifr-offbar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
html.ifr-offline #connectivity-banner { display: none !important; }
.ifr-off { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 28px; color: var(--text); }
.ifr-off-glyph { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--surface3); color: var(--text-mid); margin-bottom: 18px; }
.ifr-off-glyph svg { width: 28px; height: 28px; }
.ifr-off h2 { font: 600 24px/1.15 Fraunces, Georgia, serif; margin: 0 0 10px; }
.ifr-off p { margin: 0; max-width: 30ch; font-size: 14px; line-height: 1.5; color: var(--text-mid); }
.ifr-off p b { color: var(--text); }
.ifr-saved { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; font: 700 12px/1 Inter, sans-serif; color: var(--green); background: color-mix(in oklab, var(--green) 12%, transparent); border: 1px solid color-mix(in oklab, var(--green) 30%, var(--border)); border-radius: 999px; padding: 7px 11px; }
.ifr-saved svg { width: 13px; height: 13px; stroke-width: 2.4; }
/* Picker (behind the onboarding switch): #onb-firstrun full screen on phones. */
#onb-firstrun.ifr-on { position: fixed !important; inset: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: var(--bg) !important; z-index: 8995; }
.ifr-picker { height: 100%; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.ifr-pnote { display: flex; gap: 10px; margin: 6px 20px 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.ifr-pnote svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent-deep); margin-top: 1px; }
.ifr-pnote p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-mid); }
.ifr-pnote b { color: var(--text); }
.ifr-sect { font: 800 10px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 16px 2px 10px; }
.ifr-picker .ifr-body { padding-top: 4px; }   /* the drawing's picker body: 4px + the label's 16px = 20px under the note */
.ifr-cert { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px; margin-bottom: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: transform .12s var(--ios-ease); }
.ifr-cert:active { transform: scale(0.99); }
.ifr-cert.sel { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
.ifr-cert .ifr-mark { width: 40px; height: 40px; border-radius: 11px; }   /* F3 Task 9: the drawing's 40px row mark (day 0's card keeps 34px) */
.ifr-meta { flex: 1; min-width: 0; }
.ifr-nm { display: block; font: 650 15px/1.15 Inter, sans-serif; }
.ifr-cd { display: block; font: 600 11.5px/1 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 3px; }
.ifr-pick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--text) 22%, var(--border)); display: grid; place-items: center; color: transparent; }
.ifr-cert.sel .ifr-pick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ifr-pick svg { width: 13px; height: 13px; stroke-width: 2.6; }
#ist-sheet .ifr-sheet-head { display: flex; align-items: center; gap: 11px; margin: 4px 0 8px; }
#ist-sheet .ifr-sheet-head h2 { margin: 0; font: 600 21px/1.15 Fraunces, Georgia, serif; color: var(--text); }
#ist-sheet .ifr-sheet-lock { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 14%, var(--surface3)); color: var(--accent-deep); }
#ist-sheet .ifr-sheet-lock svg { width: 19px; height: 19px; }
#ist-sheet .ifr-sheet-intro { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-mid); }
#ist-sheet .ifr-terms { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
#ist-sheet .ifr-terms li { display: flex; gap: 11px; }
#ist-sheet .ifr-ti { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface3); color: var(--accent-deep); }
#ist-sheet .ifr-ti svg { width: 15px; height: 15px; }
#ist-sheet .ifr-tt { font: 650 14px/1.2 Inter, sans-serif; color: var(--text); }
#ist-sheet .ifr-ts { font-size: 12.5px; line-height: 1.45; color: var(--text-mid); margin-top: 2px; }
#ist-sheet .ifr-ts b { color: var(--text); }
#ist-sheet .ifr-sheet-actions { display: grid; gap: 8px; }
/* Session restore skeleton (#onb-resolve, behind the switch). */
#onb-resolve .ifr-restore { display: block; padding: calc(24px + env(safe-area-inset-top, 0px)) 20px; }
#onb-resolve .onb-resolve-inner { display: none !important; }
.ifr-skb, .ifr-skcard { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 15px; margin-bottom: 14px; }
.ifr-skb-top { display: flex; align-items: center; gap: 10px; }
.ifr-skb-row { display: flex; justify-content: space-between; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.ifr-sk { display: block; height: 11px; border-radius: 6px; background: var(--surface3); }
.ifr-sk.sm { height: 9px; } .ifr-sk.lg { height: 14px; }
.ifr-sk-stack { flex: 1; display: grid; gap: 6px; }
.ifr-sk-mark { width: 34px; height: 34px; border-radius: 9px; }
.ifr-sk-plan { width: 44px; height: 20px; border-radius: 999px; }
.ifr-sk-ring { width: 44px; height: 44px; border-radius: 50%; }
.ifr-sk-btn { height: 46px; border-radius: 13px; margin-top: 13px; }
.ifr-sk-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.ifr-sk-note svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .ifr-rv { animation: ifrRise .5s var(--ios-ease) backwards; }
  .ifr-rv:nth-child(2) { animation-delay: .06s; } .ifr-rv:nth-child(3) { animation-delay: .12s; } .ifr-rv:nth-child(4) { animation-delay: .18s; } .ifr-rv:nth-child(n+5) { animation-delay: .24s; }
  @keyframes ifrRise { from { opacity: 0; transform: translateY(10px); } }
  .ifr-sk { animation: ifrPulse 1.4s ease-in-out infinite; }
  @keyframes ifrPulse { 50% { opacity: .55; } }
}
html.ifr-picking #ist-sheet-scrim { z-index: 9000; } html.ifr-picking #ist-sheet { z-index: 9001; }   /* the lock-in sheet sits over the full-screen picker */
html.ifr-picking #lift-tabbar { display: none !important; }
/* Lift C side-by-side fixes (26 Oct): June's back control, serif question, tinted keys, centred limit/capped, offline bar */
.ifr-hdr .ifr-back { width: 40px; height: 40px; margin: 0; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ifr-hdr .ifr-back svg { width: 19px; height: 19px; }
.ifr-qtext { font: 600 22px/1.28 Fraunces, Georgia, serif; letter-spacing: -.01em; }
.ifr-topic { padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-mid); }
.ifr-key { background: color-mix(in oklab, var(--accent) 14%, var(--surface3)); color: var(--accent-deep); }
.ifr-opt.sel { border-width: 1px; padding: 12px 14px; }
.ifr-note { border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
.ifr-ac-of { font: 700 11px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.ifr-legend { font: 600 11.5px/1 Inter, sans-serif; }
.ifr-legend .p { color: var(--accent-deep); font-weight: 700; }
.ifr-aha2 { padding: 13px 14px; border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 14px; background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
.ifr-greet-c { text-align: center; margin-top: 26px; }
.ifr-hi-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.ifr-hi-ok svg { width: 13px; height: 13px; stroke-width: 2.6; }
.ifr-greet-c h1 { font-size: 26px; }
.ifr-hb-reset { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 Inter, sans-serif; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 14%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); border-radius: 999px; padding: 6px 10px; }
.ifr-hb-reset svg { width: 12px; height: 12px; }
.ifr-body-c { text-align: center; }
.ifr-body-c .ifr-lock { width: 76px; height: 76px; border-radius: 50%; margin: 22px auto 18px; }
.ifr-body-c .ifr-lock svg { width: 30px; height: 30px; }
.ifr-body-c .ifr-allow { text-align: left; }
.ifr-aico { background: color-mix(in oklab, var(--accent) 14%, var(--surface3)); }
.ifr-aamt { font: 700 14px/1 Inter, sans-serif; color: var(--accent-deep); }
.ifr-proline b { color: var(--text); }
.ifr-ghost-n { border-color: var(--border); color: var(--text) !important; background: var(--surface); }
#ist-sheet .ifr-terms { gap: 0; }
#ist-sheet .ifr-terms li { padding: 12px 0; }
#ist-sheet .ifr-terms li + li { border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ist-sheet .ifr-ti { background: color-mix(in oklab, var(--accent) 14%, var(--surface3)); }
.ifr-pnote { border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
#ifr-offbar { left: 20px; right: 20px; transform: none; justify-content: center; background: var(--surface3); border-color: transparent; box-shadow: none; }
#ifr-offbar .dot { background: var(--text-dim); }
.ifr-off-glyph { background: color-mix(in oklab, var(--accent) 16%, var(--surface3)); color: var(--accent-deep); }
.ifr-saved { color: var(--text); }
.ifr-saved svg { color: var(--green); }
#onb-resolve:not([hidden]) { display: block !important; padding: 0 !important; background: var(--bg) !important; }   /* phones always carry June's skeleton (features/ios-firstrun.js) */
#onb-resolve .ifr-restore { width: 100%; max-width: none; padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 20px; }
.ifr-limit-h em { color: var(--text); }
.ifr-qt { color: var(--accent-deep); }
/* Stage 5a: the last check replaces the lock-in sheet's content in place (BRAND §6 ease). */
#ist-sheet .ifr-last-body { margin: 6px 0 20px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
#ist-sheet .ifr-last-body b { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  #ist-sheet.ifr-step-in > :not(.ist-grab) { animation: ifrStepIn .25s var(--ios-ease) backwards; }
  @keyframes ifrStepIn { from { opacity: 0; transform: translateX(8px); filter: blur(3px); } }
}
@media (prefers-reduced-motion: reduce) {
  #ist-sheet.ifr-step-in > :not(.ist-grab) { animation: ifrStepFade .2s ease backwards; }
  @keyframes ifrStepFade { from { opacity: 0; } }
}

/* ── Stage 5b (28 Oct): sign in by email code in the iOS app (features/ios-signin.js; June E2E @ a345d1da) ── */
.isi-host { position: fixed; inset: 0; z-index: 8996; background: var(--bg); color: var(--text); overflow-y: auto; display: flex; justify-content: center; }
.isi-host[hidden] { display: none !important; }
html.isi-open { overflow: hidden; }
.isi-screen { width: 100%; max-width: 440px; min-height: 100%; display: flex; flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) 28px max(26px, env(safe-area-inset-bottom)); }
.isi-top { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.isi-back { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .15s var(--ios-ease); }
.isi-back:active { transform: scale(0.95); }
.isi-back svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.isi-mark { width: 30px; height: 30px; color: var(--accent); display: inline-flex; }
.isi-mark svg { width: 100%; height: 100%; }
.isi-mark-sm { width: 26px; height: 26px; margin-left: 2px; }
.isi-brand-name { font: 700 15px/1 Inter, sans-serif; letter-spacing: -0.01em; color: var(--text); }
.isi-title { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 27px; line-height: 1.1; letter-spacing: -0.015em; margin: 30px 0 0; color: var(--text); }
.isi-sub { font-size: 14px; line-height: 1.5; color: var(--text-mid); margin: 9px 0 0; }
.isi-sub b { color: var(--text); font-weight: 650; word-break: break-all; }
.isi-auth .isi-sub b { color: var(--accent); word-break: normal; }
.isi-form { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.isi-primary, .isi-outline, .isi-apple { width: 100%; min-height: 50px; border-radius: 14px; padding: 0 15px; cursor: pointer; font: 700 15px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
.isi-primary { border: 0; background: var(--accent); color: var(--on-accent, var(--bg)); box-shadow: 0 12px 26px -14px color-mix(in oklab, var(--accent) 70%, transparent); }
.isi-outline { border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 650; }
.isi-apple { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; background: oklch(0.98 0.004 275); color: oklch(0.16 0.010 275); font-weight: 600; }   /* the drawing's --apple-bg/--apple-fg: white on dark */
html[data-theme="light"] .isi-apple { background: oklch(0.17 0.010 280); color: oklch(0.98 0.004 85); }   /* black on light (Apple's button rules) */
.isi-apple[hidden] { display: none; }
.isi-apple svg { width: 17px; height: 17px; fill: currentColor; margin-top: -1px; }
.isi-primary:active, .isi-outline:active, .isi-apple:active { transform: scale(0.985); }
.isi-field { display: flex; flex-direction: column; gap: 6px; }
.isi-field label { font: 650 12px/1 Inter, sans-serif; color: var(--text-mid); }
.isi-field input { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 12px; padding: 13px 14px; font: 500 16px/1.2 Inter, sans-serif; transition: border-color .18s, box-shadow .18s; }
.isi-field input::placeholder { color: var(--text-dim); }
.isi-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.isi-field input[aria-invalid="true"] { border-color: color-mix(in oklab, var(--accent) 60%, var(--border)); }
.isi-typo { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border)); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
.isi-typo p { margin: 0; font: 600 14px/1.35 Inter, sans-serif; color: var(--text); }
.isi-typo b { color: var(--accent); font-weight: 700; }
.isi-typo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.isi-typo-row button { min-height: 44px; font-size: 14px; border-radius: 12px; }
.isi-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 2px 0 0; font: 500 12.5px/1.4 Inter, sans-serif; color: var(--text-dim); }
.isi-note svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 30 Oct (founder): the agreement sits just under the form, as drawn, not pinned to the screen's foot */
.isi-legal { margin: 0; padding-top: 22px; text-align: center; font-size: 11px; line-height: 1.5; color: var(--text-dim); }
.isi-legal a { color: var(--text-mid); text-decoration: underline; text-underline-offset: 2px; }
.isi-msg { min-height: 20px; margin: 12px 0 0; font: 550 13px/1.45 Inter, sans-serif; color: var(--text-dim); }
.isi-msg:empty { display: none; }
.isi-code .isi-msg:empty { display: block; }
.isi-msg.err { color: var(--red, oklch(0.62 0.17 28)); }
.isi-msg.ok { color: var(--text-mid); }
.isi-env { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--surface)); margin-top: 30px; }
.isi-env svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.isi-code .isi-title { margin-top: 18px; }
.isi-boxes-wrap { margin-top: 26px; }
.isi-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.isi-boxes input { width: 100%; height: 56px; padding: 0; text-align: center; border: 1px solid color-mix(in oklab, var(--text) 22%, var(--border)); background: var(--surface); color: var(--text); border-radius: 12px;
  font: 650 22px/1 "SF Mono", ui-monospace, Menlo, monospace; caret-color: var(--accent); transition: border-color .18s, box-shadow .18s, opacity .2s; }
.isi-boxes input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.isi-boxes.checking input { opacity: .55; }
.isi-boxes.bad input { border-color: var(--red, oklch(0.62 0.17 28)); }
.isi-code > .isi-primary { margin-top: 4px; }
.isi-resend { margin: 18px 0 0; font: 500 13px/1.4 Inter, sans-serif; color: var(--text-dim); }
.isi-resend b { font-variant-numeric: tabular-nums; color: var(--text-mid); font-weight: 650; }
.isi-textbtn { background: none; border: 0; padding: 4px 0; cursor: pointer; font: 650 13.5px/1.2 Inter, sans-serif; color: var(--accent); }
.isi-change { margin-top: auto; padding-top: 20px; text-align: center; }
.isi-change .isi-textbtn { color: var(--text-mid); }
/* June's welcome */
.isi-welcome { align-items: stretch; text-align: center; }
.isi-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; }
.isi-hero { display: flex; flex-direction: column; align-items: center; margin-top: 28px; }
.isi-gauge { position: relative; width: 232px; height: 232px; }
.isi-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.isi-g-track { fill: none; stroke: color-mix(in oklab, var(--text) 12%, transparent); stroke-width: 12; }
.isi-g-fill { fill: none; stroke: var(--green, oklch(0.6 0.14 150)); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 691; stroke-dashoffset: 126; }
.isi-g-tick { stroke: var(--text-dim); stroke-width: 3; stroke-linecap: round; }
.isi-g-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.isi-g-num { font: 700 64px/1 Fraunces, Georgia, serif; color: var(--green, oklch(0.6 0.14 150)); letter-spacing: -0.02em; }
.isi-g-of { margin-top: 8px; font: 800 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.isi-g-ready { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 12px; border-radius: 999px; font: 700 12px/1 Inter, sans-serif; color: var(--green, oklch(0.6 0.14 150));
  background: color-mix(in oklab, var(--green, oklch(0.6 0.14 150)) 14%, transparent); border: 1px solid color-mix(in oklab, var(--green, oklch(0.6 0.14 150)) 35%, transparent); }
.isi-g-ready svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.isi-g-pass { margin-top: 14px; font: 800 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.isi-copy { margin-top: auto; padding-top: 24px; }
.isi-copy h1 { font: 600 30px/1.1 Fraunces, Georgia, serif; letter-spacing: -0.015em; margin: 0; color: var(--text); }
.isi-copy p { margin: 10px auto 0; max-width: 32ch; font-size: 14.5px; line-height: 1.5; color: var(--text-mid); }
.isi-cta { margin-top: 24px; }
.isi-cta-sub { margin-top: 12px; font: 600 12.5px/1 Inter, sans-serif; color: var(--text-dim); }
.isi-link { display: block; width: 100%; margin-top: 14px; padding: 8px; background: none; border: 0; cursor: pointer; font: 600 14px/1.3 Inter, sans-serif; color: var(--text-mid); }
.isi-link b { color: var(--accent); font-weight: 700; }
/* the one-time lock toast */
.isi-toast { position: fixed; z-index: 9000; left: 16px; right: 16px; top: calc(12px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); transform: translateY(-16px); opacity: 0; pointer-events: none; }
.isi-toast.open { transform: none; opacity: 1; pointer-events: auto; transition: transform .34s var(--ios-ease), opacity .25s var(--ios-ease); }
.isi-toast.out { transform: translateY(-10px); opacity: 0; transition: transform .22s var(--ios-ease), opacity .18s ease; }
.isi-toast-i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); }
.isi-toast-i svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.isi-toast-t { font: 600 13px/1.4 Inter, sans-serif; color: var(--text); }
.isi-toast-t b { font-weight: 750; }
@media (hover: hover) and (pointer: fine) { .isi-primary:hover, .isi-apple:hover { filter: brightness(1.05); } }
@media (prefers-reduced-motion: no-preference) {
  .isi-rv { animation: isiRise .5s var(--ios-ease) backwards; }
  .isi-screen > .isi-rv:nth-child(2) { animation-delay: .04s; } .isi-screen > .isi-rv:nth-child(3) { animation-delay: .08s; }
  .isi-screen > .isi-rv:nth-child(4) { animation-delay: .12s; } .isi-screen > .isi-rv:nth-child(5) { animation-delay: .16s; }
  .isi-screen > .isi-rv:nth-child(6) { animation-delay: .2s; }
  .isi-typo { animation: isiRise .32s var(--ios-ease) backwards; }
  .isi-g-fill { animation: isiSweep 1.1s var(--ios-ease) .15s backwards; }
  .isi-boxes.shake { animation: isiShake .32s var(--ios-ease); }
  @keyframes isiRise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes isiSweep { from { stroke-dashoffset: 691; } }
  @keyframes isiShake { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .isi-rv, .isi-typo { animation: isiFade .2s ease backwards; }
  @keyframes isiFade { from { opacity: 0; } }
  .isi-toast, .isi-toast.open, .isi-toast.out { transform: none; transition: opacity .18s ease; }
}

/* 28 Oct: Settings → About rows are links (they open in the in-app browser sheet); match the button rows */
#ios-settings a.ist-row { text-decoration: none; color: var(--text); -webkit-tap-highlight-color: transparent; }

/* Stage 5c (28 Oct): Continue with Google (outlined, Google's own G mark) and the provider failure line */
.isi-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; border: 1px solid var(--border); border-radius: 14px; padding: 0 15px;
  background: var(--surface); color: var(--text); font: 600 15px/1 Inter, sans-serif; cursor: pointer; transition: transform .15s var(--ios-ease), border-color .2s; }
.isi-google svg { width: 18px; height: 18px; }
.isi-google:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .isi-google:hover { border-color: color-mix(in oklab, var(--text) 30%, var(--border)); } }
.isi-perr { margin: 0; font: 550 13px/1.45 Inter, sans-serif; color: var(--red, oklch(0.62 0.17 28)); }
.isi-or { display: flex; align-items: center; gap: 12px; margin: 3px 0; color: var(--text-dim); font: 600 11px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.isi-or::before, .isi-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Stage 5c (28 Oct): Settings → Sign-in methods (June E2E cert-ios-settings ?v=methods) */
#ist-sheet .ist-meths { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
#ist-sheet .ist-meth { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 54px; }
#ist-sheet .ist-meth + .ist-meth { border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); }
#ist-sheet .ist-mi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--text); background: color-mix(in oklab, var(--text) 8%, transparent); flex: 0 0 auto; }
#ist-sheet .ist-mn { flex: 1; font: 650 14px/1.25 Inter, sans-serif; color: var(--text); }
#ist-sheet .ist-mn span { display: block; font: 500 12px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 2px; word-break: break-all; }
#ist-sheet .ist-add { flex: 0 0 auto; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border)); background: transparent; color: var(--accent); font: 700 13px/1 Inter, sans-serif; cursor: pointer; transition: transform .15s var(--ios-ease); }
#ist-sheet .ist-add:active { transform: scale(0.97); }
#ist-sheet .ist-add:disabled { opacity: .5; }
#ist-sheet .ist-conn { flex: 0 0 auto; font: 650 12.5px/1 Inter, sans-serif; color: var(--green, oklch(0.6 0.14 150)); }
#ist-sheet .ist-conn.on { color: var(--text-dim); }
#ist-sheet .ist-merr { margin: 12px 0 0; font: 550 13px/1.45 Inter, sans-serif; color: var(--red, oklch(0.62 0.17 28)); }
#ist-sheet .ist-mnote { margin: 12px 0 2px; font: 500 12px/1.45 Inter, sans-serif; color: var(--text-dim); }

/* ── Stage 5d (29 Oct): study reminders. The ask after a finished quiz, and its time picker.
   Lift of june-e2e @ ed2ab300 (onboarding-notifications-prime.html ?v=quiz / quiz-pro / time).
   Motion (BRAND §6): the sheet rises once, 520ms in; the time sheet 360ms in / 200ms out; transform + opacity only. ── */
#irm-root .irm-scrim { position: fixed; inset: 0; z-index: 9100; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .3s var(--ios-ease); }
#irm-root .irm-scrim.open { opacity: 1; pointer-events: auto; transition: opacity .52s var(--ios-ease); }
#irm-root .irm-sheet { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 10px); bottom: 0; z-index: 9101; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px -18px rgba(0,0,0,.45);
  transform: translateY(100%); transition: transform .3s var(--ios-ease); }
#irm-root .irm-sheet.open { transform: none; transition: transform .52s var(--ios-ease); }
#irm-root .irm-grip { width: 38px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--text) 18%, transparent); margin: 8px auto 0; flex: 0 0 auto; }
#irm-root .irm-hdr { padding: 10px 22px 6px; }
#irm-root .irm-hdr h1 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 21px; letter-spacing: -0.01em; margin: 0; color: var(--text); }
#irm-root .irm-body { flex: 1 1 auto; overflow-y: auto; padding: 0 22px 8px; -webkit-overflow-scrolling: touch; }
#irm-root .irm-hero { text-align: center; margin: 6px 4px 4px; }
#irm-root .irm-bell { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent) 12%, var(--surface2)); border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border)); }
#irm-root .irm-bell svg { width: 31px; height: 31px; stroke: var(--accent-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#irm-root .irm-hero h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 25px; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 10px; color: var(--text); }
#irm-root .irm-hero p { font-size: 13.5px; line-height: 1.5; color: var(--text-mid); margin: 0 auto; max-width: 36ch; }
#irm-root .irm-covers { list-style: none; margin: 18px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
#irm-root .irm-covers li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; }
#irm-root .irm-covers li + li { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
#irm-root .irm-ci { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 11%, var(--surface2)); }
#irm-root .irm-ci svg { width: 17px; height: 17px; stroke: var(--accent-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#irm-root .irm-ct { font: 650 13.5px/1.3 Inter, sans-serif; color: var(--text); }
#irm-root .irm-cs { font-size: 12.5px; line-height: 1.45; color: var(--text-mid); margin-top: 2px; }
#irm-root .irm-cs b { color: var(--text); font-weight: 650; }
#irm-root .irm-timerow { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 10px; padding: 11px 15px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: transform .15s var(--ios-ease); }
#irm-root .irm-timerow:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { #irm-root .irm-timerow:hover { background: color-mix(in oklab, var(--text) 3%, var(--surface)); } }
#irm-root .irm-tl { flex: 1 1 auto; font: 650 13.5px/1.3 Inter, sans-serif; }
#irm-root .irm-tv { font: 700 14px/1 Inter, sans-serif; color: var(--accent-deep); font-variant-numeric: lining-nums tabular-nums; }
#irm-root .irm-chev { width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#irm-root .irm-quiet { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 4px; font-size: 12px; color: var(--text-dim); }
#irm-root .irm-quiet svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
#irm-root .irm-footer { padding: 10px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
#irm-root .irm-btn { width: 100%; min-height: 48px; border: none; border-radius: 13px; padding: 14px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif;
  box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#irm-root .irm-btn:active { transform: scale(0.98); }
#irm-root .irm-btn:disabled { opacity: .6; }
#irm-root .irm-ghost { width: 100%; min-height: 44px; border: none; border-radius: 13px; padding: 12px; margin-top: 8px; cursor: pointer; background: transparent; color: var(--text-mid); font: 650 14px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
#irm-root .irm-ghost:active { transform: scale(0.98); }
/* the time picker: an iOS-style wheel inside the app's own sheet */
#irm-root .irm-tscrim { position: fixed; inset: 0; z-index: 9110; background: rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .2s var(--ios-ease); }
#irm-root .irm-tscrim.open { opacity: 1; pointer-events: auto; transition: opacity .36s var(--ios-ease); }
#irm-root .irm-tsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9111; background: var(--surface); border-top: 1px solid var(--border); border-radius: 22px 22px 0 0;
  padding: 6px 12px calc(18px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .2s var(--ios-ease); }
#irm-root .irm-tsheet.open { transform: none; transition: transform .36s var(--ios-ease); }
#irm-root .irm-ts-head { display: flex; align-items: center; justify-content: space-between; }
#irm-root .irm-ts-head h3 { font: 650 15px/1 Inter, sans-serif; margin: 0; color: var(--text); text-transform: none; letter-spacing: normal; }   /* the app's global h3 is uppercase */
#irm-root .irm-ts-btn { min-width: 64px; min-height: 44px; border: 0; background: none; cursor: pointer; font: 600 15px/1 Inter, sans-serif; color: var(--text-mid); padding: 0 8px; transition: transform .15s var(--ios-ease); }
#irm-root .irm-ts-btn.done { color: var(--accent-deep); font-weight: 750; }
#irm-root .irm-ts-btn:active { transform: scale(0.97); }
#irm-root .irm-wheel { position: relative; display: flex; justify-content: center; gap: 6px; margin: 6px 4px 4px; height: 190px; overflow: hidden; }
#irm-root .irm-wheel::before { content: ""; position: absolute; left: 0; right: 0; top: 76px; height: 38px; border-radius: 10px; background: color-mix(in oklab, var(--text) 7%, transparent); pointer-events: none; }
#irm-root .irm-wcol { position: relative; display: flex; flex-direction: column; width: 72px; }
#irm-root .irm-wcol button { height: 38px; border: 0; background: none; cursor: pointer; font: 500 21px/38px Inter, sans-serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; padding: 0; }
#irm-root .irm-wcol button.d1 { opacity: .45; font-size: 19px; }
#irm-root .irm-wcol button.d2 { opacity: .2; font-size: 17px; }
#irm-root .irm-wcol button.d0 { font-weight: 650; }
#irm-root .irm-ts-note { margin: 4px 8px 0; text-align: center; font: 500 12px/1.45 Inter, sans-serif; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) {
  #irm-root .irm-sheet, #irm-root .irm-sheet.open, #irm-root .irm-tsheet, #irm-root .irm-tsheet.open { transform: none; transition: opacity .2s ease; }
  #irm-root .irm-sheet:not(.open), #irm-root .irm-tsheet:not(.open) { opacity: 0; pointer-events: none; }
}
/* Stage 5d: Settings → Reminders sheet (lift of june-e2e cert-ios-settings.html ?v=reminders-sheet / reminders-denied).
   No new motion: the sheet uses #ist-sheet's own timings. */
#ist-sheet .ist-rem { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
#ist-sheet .ist-rem .ist-tog { margin: 0; padding: 12px 14px; border-top: 0; min-height: 56px; }
#ist-sheet .ist-rem .ist-row { border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); border-radius: 0; }
#ist-sheet .ist-rem .ist-row[aria-disabled="true"] { opacity: .45; pointer-events: none; }
#ist-sheet .ist-rem .ist-rv { color: var(--accent-deep); font-variant-numeric: lining-nums tabular-nums; }
#ist-sheet .ist-wheel { position: relative; display: flex; justify-content: center; gap: 6px; height: 190px; overflow: hidden; border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); padding: 0 4px; }
#ist-sheet .ist-wheel::before { content: ""; position: absolute; left: 8px; right: 8px; top: 76px; height: 38px; border-radius: 10px; background: color-mix(in oklab, var(--text) 7%, transparent); pointer-events: none; }
#ist-sheet .irm-wcol { position: relative; display: flex; flex-direction: column; width: 72px; }
#ist-sheet .irm-wcol button { height: 38px; border: 0; background: none; cursor: pointer; font: 500 21px/38px Inter, sans-serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; padding: 0; }
#ist-sheet .irm-wcol button.d1 { opacity: .45; font-size: 19px; }
#ist-sheet .irm-wcol button.d2 { opacity: .2; font-size: 17px; }
#ist-sheet .irm-wcol button.d0 { font-weight: 650; }
#ist-sheet .ist-denied { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; border: 1px solid var(--border);
  background: color-mix(in oklab, var(--text) 4%, var(--surface)); font: 550 13.5px/1.45 Inter, sans-serif; color: var(--text); }
#ist-sheet .ist-denied svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; stroke: var(--text-dim); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the page's own row / toggle / switch rules are scoped to #ios-settings; the same values for the Reminders sheet */
#ist-sheet .ist-rem .ist-tog { display: flex; align-items: center; gap: 12px; }
#ist-sheet .ist-rem .ist-tl { flex: 1 1 auto; min-width: 0; font: 650 13.5px/1.25 Inter, sans-serif; color: var(--text); }
#ist-sheet .ist-rem .ist-tl span { display: block; margin-top: 3px; font: 500 11.5px/1.4 Inter, sans-serif; color: var(--text-dim); }
#ist-sheet .ist-rem .ist-sw { position: relative; flex: 0 0 auto; width: 48px; height: 30px; border-radius: 999px; border: none; background: var(--track); cursor: pointer; padding: 0; transition: background-color .2s var(--ios-ease); }
#ist-sheet .ist-rem .ist-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ios-ease); }
#ist-sheet .ist-rem .ist-sw[aria-pressed="true"] { background: var(--accent); }
#ist-sheet .ist-rem .ist-sw[aria-pressed="true"]::after { transform: translateX(18px); }
#ist-sheet .ist-rem .ist-row { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-left: 0; border-right: 0; border-bottom: 0; background: transparent; color: var(--text); text-align: left; font: 600 14px/1.25 Inter, sans-serif; cursor: pointer; }
#ist-sheet .ist-rem .ist-rl { flex: 1 1 0; min-width: 0; }
#ist-sheet .ist-rem .ist-rv { flex: 0 0 auto; font: 600 13px/1.2 Inter, sans-serif; text-align: right; }
@media (prefers-reduced-motion: reduce) { #ist-sheet .ist-rem .ist-sw, #ist-sheet .ist-rem .ist-sw::after { transition: none; } }

/* F3 (30 Oct): the first-Home tour (features/ios-tour.js), lifted from mockups/cert-ios-home.html ?v=tour. A ring cuts
   the element out of a dimmed screen; the bubble sits below it, or above when it would cross the tabs. Fixed to the
   real viewport. BRAND §6 timings on --ios-ease: overlay in 240ms / out 180ms, bubble enter 220ms from
   translateY(6px) scale(0.96), step change out 120ms (translateY(4px) scale(0.98) + 2px blur) / in 220ms.
   Reduced motion keeps the fades only. */
#ios-tour { position: fixed; inset: 0; z-index: 9000; opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent; transition: opacity .18s var(--ios-ease); }
#ios-tour[hidden] { display: none; }
#ios-tour.open { opacity: 1; pointer-events: auto; transition-duration: .24s; }
#ios-tour .tour-ring { position: fixed; border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--accent) 70%, transparent), 0 0 0 9999px color-mix(in oklab, #07080b 58%, transparent);
  transition: opacity .12s var(--ios-ease); }
#ios-tour .tour-tip { position: fixed; box-sizing: border-box; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 14px 12px 16px; box-shadow: 0 18px 40px -22px rgba(0,0,0,0.55); transform-origin: var(--tip-ox, 50%) top;
  transition: opacity .22s var(--ios-ease), transform .22s var(--ios-ease), filter .22s var(--ios-ease); }
#ios-tour .tour-tip.above { transform-origin: var(--tip-ox, 50%) bottom; }
#ios-tour .tour-tip::before { content: ""; position: absolute; left: calc(var(--tip-ox, 50%) - 7px); top: -7px; width: 12px; height: 12px; background: var(--surface);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); border-top-left-radius: 3px; }
#ios-tour .tour-tip.above::before { top: auto; bottom: -7px; transform: rotate(225deg); }
#ios-tour.stepping .tour-tip, #ios-tour.stepping .tour-ring { opacity: 0; transition-duration: .12s; }
#ios-tour.stepping .tour-tip { transform: translateY(4px) scale(0.98); filter: blur(2px); }
#ios-tour.entering .tour-tip { opacity: 0; transform: translateY(6px) scale(0.96); }
#ios-tour .tt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#ios-tour .tt-count { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
html:not([data-theme="light"]) #ios-tour .tt-count { color: var(--accent-bright); }
#ios-tour .tt-x { width: 44px; height: 44px; margin: -12px -10px -12px 0; padding: 0; display: grid; place-items: center; border: none; background: none; cursor: pointer; color: var(--text-dim); transition: transform .15s var(--ios-ease); }
#ios-tour .tt-x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
#ios-tour .tt-x:active { transform: scale(0.97); }
#ios-tour .tt-h { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; text-transform: none; margin: 6px 0 5px; padding: 0; color: var(--text); }   /* the app's global h3 is uppercase */
#ios-tour .tt-p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-mid); }
#ios-tour .tt-p b { color: var(--text); font-weight: 650; }
#ios-tour .tt-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
#ios-tour .tt-next { min-height: 44px; padding: 0 18px; border: none; border-radius: 12px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 14px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
#ios-tour .tt-next:active { transform: scale(0.97); }
/* F3 Task 9: the tour focuses Next on open. A quiet 2px ring in place of the global 4px glow (dg-system.css
   `*:focus-visible`, !important); kept for everyone, since hardware keyboards and Switch Control match pointer: coarse too. */
#ios-tour .tt-next:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) {
  #ios-tour .tour-tip, #ios-tour.stepping .tour-tip, #ios-tour.entering .tour-tip { transform: none; filter: none; }
  #ios-tour .tt-x:active, #ios-tour .tt-next:active { transform: none; }
}

/* Persona bundle Task 9: "Why this score?" sheet (in #ist-sheet; in .36s / out .2s come from the shared sheet rules) */
#ist-sheet .iw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
#ist-sheet .iw-body h3 { font: 600 19px/1.2 Fraunces, Georgia, serif; margin: 2px 0 4px; color: var(--text); }
#ist-sheet .iw-lede { font: 500 13px/1.5 Inter, sans-serif; color: var(--text-mid); margin: 0 0 14px; }
#ist-sheet .iw-lede b { color: var(--text); font-weight: 650; }
#ist-sheet .iw-sect { font: 800 9.5px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 16px 0 8px; display: flex; justify-content: space-between; }
#ist-sheet .iw-sect span { letter-spacing: 0; text-transform: none; font: 700 11.5px/1 Inter, sans-serif; color: var(--accent-deep); }
#ist-sheet .iw-check { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
#ist-sheet .iw-check li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; font: 500 12.5px/1.4 Inter, sans-serif; color: var(--text); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ist-sheet .iw-check li:first-child { border-top: 0; }
#ist-sheet .iw-check li i { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; margin-top: 1px; border: 1.5px solid var(--border); }
#ist-sheet .iw-check li i svg { width: 11px; height: 11px; stroke: var(--on-accent, #fff); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
#ist-sheet .iw-check li.ok i { border-color: var(--accent); background: var(--accent); }
#ist-sheet .iw-check li.ok i svg { opacity: 1; }
#ist-sheet .iw-check li small { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 2px; }
#ist-sheet .iw-next { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; padding: 0 11px; border-radius: 9px; border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); background: transparent; color: var(--accent-deep); font: 650 12px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
#ist-sheet .iw-next:active { transform: scale(.97); }
#ist-sheet .iw-dom { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
#ist-sheet .iw-dom div { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 9px 12px; font: 500 12.5px/1.3 Inter, sans-serif; color: var(--text); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
#ist-sheet .iw-dom div:first-child { border-top: 0; }
#ist-sheet .iw-dom .wt { color: var(--text-dim); font: 600 11px/1.3 'Roboto Mono', monospace; }
#ist-sheet .iw-dom .ac { font-weight: 700; min-width: 34px; text-align: right; }
#ist-sheet .iw-dom .weak .ac { color: var(--accent-deep); }
#ist-sheet .iw-facts { font: 500 12.5px/1.55 Inter, sans-serif; color: var(--text-mid); margin: 0; }
#ist-sheet .iw-facts b { color: var(--text); font-weight: 650; }
#ist-sheet .iw-how { font: 500 12px/1.5 Inter, sans-serif; color: var(--text-dim); margin: 14px 0 0; }

/* Persona bundle T10: forecast range under the tile and the PBQ note (drawing cert-ios-analytics.html) */
#ios-analytics .in-rd-fc .in-fr { display: block; font: 600 10.5px/1.2 Inter, sans-serif; color: var(--text-dim); margin-top: 4px; }
#ios-analytics .in-rd-pbq { font-size: 12px; line-height: 1.45; color: var(--text-mid); margin: 11px 0 0; padding-top: 10px; border-top: 1px solid color-mix(in oklab, var(--border) 64%, transparent); }
#ios-analytics .in-rd-pbq b { color: var(--text); font-weight: 650; }

/* Persona bundle T11: "Log your result" (drawing cert-ios-log-result.html), phone only, il- prefix */
#ios-log-result[hidden] { display: none !important; }
#ios-log-result { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
#ios-log-result *, #ios-log-result *::before, #ios-log-result *::after { box-sizing: border-box; }
#ios-log-result button, #ios-log-result input { font-family: inherit; }
#ios-log-result .il-hdr { display: flex; align-items: center; gap: 11px; padding: calc(12px + env(safe-area-inset-top)) 20px 6px; }
#ios-log-result .il-back, #ios-log-result .il-theme { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .14s var(--ios-ease), border-color .18s; }
#ios-log-result .il-back:active, #ios-log-result .il-theme:active { transform: scale(0.96); }
#ios-log-result .il-back svg, #ios-log-result .il-theme svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ios-log-result .il-h1 { flex: 1; margin: 0; font: 600 20px/1.2 Fraunces, Georgia, serif; letter-spacing: -0.01em; color: var(--text); outline: none; }
#ios-log-result .il-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 22px 16px; }
#ios-log-result .il-body::-webkit-scrollbar { width: 0; }
#ios-log-result .il-cert { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 11px 13px; margin: 6px 0 18px; }
#ios-log-result .il-gl { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 13%, var(--surface3)); color: var(--accent-deep); display: grid; place-items: center; font: 800 13px/1 Inter, sans-serif; }
#ios-log-result .il-cert b { display: block; font: 800 14.5px/1.1 Inter, sans-serif; color: var(--text); }
#ios-log-result .il-cert span:not(.il-gl) { font-size: 12px; color: var(--text-dim); }
#ios-log-result .il-lede { color: var(--text-mid); font-size: 14px; margin: 0 0 16px; }
#ios-log-result .il-field { margin: 0 0 16px; }
#ios-log-result .il-field > label { display: block; font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 8px; }
#ios-log-result .il-help { font-size: 12px; color: var(--text-dim); margin: 6px 0 0; }
#ios-log-result .il-err { font: 600 12.5px/1.4 Inter, sans-serif; color: var(--red, #c0392b); margin: 6px 0 0; }
#ios-log-result .il-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--surface3); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
#ios-log-result .il-seg button { min-height: 44px; border: 0; background: transparent; border-radius: 9px; padding: 11px; cursor: pointer; font: 700 13.5px/1 Inter, sans-serif; color: var(--text-mid); transition: background .18s var(--ios-ease), color .18s var(--ios-ease), transform .12s var(--ios-ease); }
#ios-log-result .il-seg button:active { transform: scale(0.98); }
#ios-log-result .il-seg button.il-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px color-mix(in oklab, var(--text) 10%, transparent); }
#ios-log-result .il-seg button.il-on[data-v="passed"] { color: var(--green); }
#ios-log-result .il-score-wrap { display: flex; align-items: stretch; gap: 10px; }
#ios-log-result .il-score-box { flex: 1; display: flex; align-items: baseline; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; transition: border-color .18s var(--ios-ease); }
#ios-log-result .il-score-box:focus-within { border-color: var(--accent); }
#ios-log-result .il-score-box input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--text); font: 600 26px/1.2 Fraunces, Georgia, serif; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
#ios-log-result .il-of { font: 600 13px/1 Inter, sans-serif; color: var(--text-dim); white-space: nowrap; }
#ios-log-result .il-passline { flex: 0 0 auto; align-self: center; font: 700 11px/1.3 Inter, sans-serif; color: var(--text-dim); text-align: right; }
#ios-log-result .il-passline b { display: block; color: var(--text-mid); font-size: 13px; }
#ios-log-result .il-inp { width: 100%; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 14px; color: var(--text); font: 500 16px/1.2 Inter, sans-serif; outline: none; transition: border-color .18s var(--ios-ease); }
#ios-log-result .il-inp:focus { border-color: var(--accent); }
#ios-log-result :is(.il-back, .il-theme, .il-seg button, .il-cta, .il-restart):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#ios-log-result .il-footer { flex: 0 0 auto; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
#ios-log-result .il-cta { width: 100%; min-height: 48px; border: 0; border-radius: 13px; padding: 15px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 800 15.5px/1 Inter, sans-serif; letter-spacing: -0.005em; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#ios-log-result .il-cta:active { transform: scale(0.985); }
#ios-log-result .il-foot-note { text-align: center; font-size: 11.5px; color: var(--text-dim); margin: 9px 0 0; }
#ios-log-result .il-done { position: absolute; inset: 0; z-index: 9; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 34px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ios-ease), visibility 0s linear .3s; }
#ios-log-result .il-done.il-show { opacity: 1; visibility: visible; transition-delay: 0s; }
#ios-log-result .il-seal { width: 76px; height: 76px; border-radius: 999px; background: color-mix(in oklab, var(--green) 16%, var(--surface)); display: grid; place-items: center; margin-bottom: 20px; }
#ios-log-result .il-seal[hidden] { display: none; }
#ios-log-result .il-done.il-show .il-seal { animation: il-pop .54s var(--ios-ease) .08s backwards; }
#ios-log-result .il-seal svg { width: 38px; height: 38px; stroke: var(--green); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#ios-log-result .il-done h2 { margin: 0 0 8px; font: 600 25px/1.2 Fraunces, Georgia, serif; letter-spacing: -0.015em; color: var(--text); }
#ios-log-result .il-done p { color: var(--text-mid); font-size: 14px; margin: 0 0 6px; }
#ios-log-result .il-done .il-big { font: 600 17px/1.3 Fraunces, Georgia, serif; color: var(--green); margin: 4px 0 26px; font-variant-numeric: lining-nums; }
#ios-log-result .il-done .il-big[hidden] { display: none; }
#ios-log-result .il-done .il-cta { max-width: 280px; }
#ios-log-result .il-restart { margin-top: 11px; min-height: 44px; padding: 0 14px; background: none; border: 0; color: var(--accent-deep); font: 650 13px/1 Inter, sans-serif; cursor: pointer; }
#ios-log-result .il-rv { animation: il-enter .54s var(--ios-ease) backwards; animation-delay: calc(var(--d, 0) * 60ms); }
@keyframes il-enter { from { opacity: 0; transform: translateY(12px); } }
@keyframes il-pop { from { opacity: 0; transform: scale(0.96); } }
@media (hover: hover) and (pointer: fine) { #ios-log-result :is(.il-back, .il-theme):hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); color: var(--accent); } #ios-log-result .il-cta:hover { filter: brightness(1.05); } }
/* the one-time "You passed" toast (drawing cert-ios-home.html #passToast) */
.il-toast { position: fixed; z-index: 2100; left: 16px; right: 16px; top: calc(52px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-radius: 16px; background: var(--surface); color: var(--text); border: 1px solid color-mix(in oklab, var(--green) 45%, var(--border)); box-shadow: 0 20px 50px -24px rgba(0,0,0,.5); font: 600 13.5px/1.35 Inter, -apple-system, sans-serif; opacity: 0; transform: translateY(-12px); transition: transform .54s var(--ios-ease), opacity .3s var(--ios-ease); pointer-events: none; }
.il-toast.il-in { opacity: 1; transform: none; }
.il-toast .il-toast-i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--green) 16%, var(--surface)); }
.il-toast svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { #ios-log-result .il-rv, #ios-log-result .il-done.il-show .il-seal { animation: il-fade .3s linear backwards; } .il-toast { transform: none; transition: opacity .3s linear; } #ios-log-result .il-seg button:active, #ios-log-result .il-cta:active, #ios-log-result :is(.il-back, .il-theme):active { transform: none; } }
@keyframes il-fade { from { opacity: 0; } }
/* Persona bundle T12: "My certs" hub (drawing cert-ios-hub.html, 30 Oct), phone only, ihb- prefix */
#ios-hub[hidden] { display: none !important; }
#ios-hub { position: fixed; inset: 0; z-index: 290; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
#ios-hub *, #ios-hub *::before, #ios-hub *::after { box-sizing: border-box; }
#ios-hub button { font-family: inherit; color: inherit; }
#ios-hub .ihb-hdr { display: flex; align-items: center; gap: 11px; padding: calc(12px + env(safe-area-inset-top)) 20px 6px; }
#ios-hub .ihb-h1 { flex: 1 1 auto; margin: 0; font: 600 22px/1.2 Fraunces, Georgia, serif; letter-spacing: -0.012em; outline: none; }
#ios-hub .ihb-back, #ios-hub .ihb-theme { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-mid); transition: transform .14s var(--ios-ease), border-color .18s; }
#ios-hub .ihb-back:active, #ios-hub .ihb-theme:active { transform: scale(0.96); }
#ios-hub .ihb-back svg, #ios-hub .ihb-theme svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ios-hub .ihb-body { flex: 1; overflow-y: auto; padding: 6px 20px calc(24px + env(safe-area-inset-bottom)); }
#ios-hub .ihb-stats { display: flex; gap: 9px; margin: 6px 0; }
#ios-hub .ihb-stat { flex: 1 1 0; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 11px 12px; }
#ios-hub .ihb-stat b { display: block; font: 600 21px/1 Fraunces, serif; font-variant-numeric: lining-nums tabular-nums; }
#ios-hub .ihb-stat b small { font: 600 11px/1 Inter, sans-serif; color: var(--text-dim); }
#ios-hub .ihb-stat span { display: block; font: 600 10px/1.2 Inter, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }
#ios-hub .ihb-stat.ihb-pass b { color: var(--green); }
#ios-hub .ihb-flame { display: inline-flex; align-items: center; gap: 4px; }
#ios-hub .ihb-flame svg { width: 15px; height: 15px; stroke: var(--accent-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ios-hub .ihb-sect { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 2px 10px; }
#ios-hub .ihb-sect b { font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#ios-hub .ihb-count { font: 600 10px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-hub .ihb-mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in oklab, var(--accent) 13%, var(--surface3)); color: var(--accent-deep); display: grid; place-items: center; font: 800 12.5px/1 Inter, sans-serif; }
#ios-hub .ihb-mark.ihb-is-pass { background: color-mix(in oklab, var(--green) 13%, var(--surface3)); color: var(--green); }
#ios-hub .ihb-meta { flex: 1 1 auto; min-width: 0; display: block; text-align: left; }
#ios-hub .ihb-nm { display: block; font: 650 15px/1.15 Inter, sans-serif; color: var(--text); }
#ios-hub .ihb-cd { display: block; font: 600 11.5px/1.3 'Roboto Mono', monospace; color: var(--text-dim); margin-top: 3px; }
#ios-hub .ihb-cd.ihb-ex { font-family: Inter, sans-serif; color: var(--accent-deep); }
#ios-hub .ihb-stale .ihb-cd.ihb-ex { color: var(--text-dim); }
#ios-hub .ihb-active { border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); border-radius: 16px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)); padding: 15px 16px; }
#ios-hub .ihb-ac-top { display: flex; align-items: center; gap: 12px; }
#ios-hub .ihb-badge { margin-left: auto; font: 800 9px/1 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 13%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent); border-radius: 999px; padding: 5px 8px; }
#ios-hub .ihb-done .ihb-badge { color: var(--green); background: color-mix(in oklab, var(--green) 13%, transparent); border-color: color-mix(in oklab, var(--green) 34%, transparent); }
#ios-hub .ihb-ac-score { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 6px; }
#ios-hub .ihb-num { font: 600 30px/1 Fraunces, serif; font-variant-numeric: lining-nums tabular-nums; }
#ios-hub .ihb-of { font: 700 10.5px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#ios-hub .ihb-bar { height: 7px; border-radius: 999px; background: var(--track); position: relative; overflow: hidden; margin-bottom: 5px; }
#ios-hub .ihb-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
#ios-hub .ihb-bar > .ihb-tick { left: auto; width: 2px; border-radius: 0; background: color-mix(in oklab, var(--text) 45%, var(--track)); }
#ios-hub .ihb-legend { display: flex; justify-content: space-between; font: 600 10.5px/1 Inter, sans-serif; color: var(--text-dim); }
#ios-hub .ihb-legend .ihb-p { color: var(--accent-deep); }
#ios-hub .ihb-ac-line { font: 500 12px/1.4 Inter, sans-serif; color: var(--text-dim); margin: 11px 0 0; }
#ios-hub .ihb-primary { width: 100%; min-height: 46px; border: 0; border-radius: 12px; padding: 13px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 14.5px/1 Inter, sans-serif; margin-top: 13px; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
#ios-hub .ihb-primary:active { transform: scale(0.985); }
#ios-hub .ihb-logresult, #ios-hub .ihb-suggest { display: block; width: 100%; min-height: 44px; margin-top: 4px; background: none; border: 0; cursor: pointer; font: 650 12.5px/1 Inter, sans-serif; color: var(--accent-deep); }
#ios-hub .ihb-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 11px 13px; margin-bottom: 9px; cursor: pointer; transition: border-color .18s, transform .12s var(--ios-ease); }
#ios-hub .ihb-row:active { transform: scale(0.99); }
#ios-hub .ihb-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#ios-hub .ihb-state { font: 700 12px/1 Inter, sans-serif; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 5px; }
#ios-hub .ihb-state svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ios-hub .ihb-score { font: 600 11px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-hub .ihb-score b { font: 600 14px/1 Fraunces, serif; color: var(--text); font-variant-numeric: lining-nums; }
#ios-hub .ihb-passed .ihb-state { color: var(--green); }
#ios-hub .ihb-fresh .ihb-mark, #ios-hub .ihb-locked .ihb-mark { background: var(--surface3); color: var(--text-dim); }
#ios-hub .ihb-fresh .ihb-nm, #ios-hub .ihb-locked .ihb-nm { color: var(--text-mid); }
#ios-hub .ihb-ua { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ios-hub .ihb-ua-list { font: 500 11.5px/1.4 Inter, sans-serif; }
#ios-hub .ihb-pill { font: 800 8.5px/1 Inter, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); border-radius: 999px; padding: 4px 7px; }
#ios-hub .ihb-links { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
#ios-hub .ihb-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; text-align: left; background: none; border: 0; cursor: pointer; padding: 13px 14px; }
#ios-hub .ihb-li { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in oklab, var(--accent) 10%, var(--surface3)); display: grid; place-items: center; }
#ios-hub .ihb-li svg { width: 17px; height: 17px; stroke: var(--accent-deep); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-hub .ihb-lt { flex: 1 1 auto; min-width: 0; }
#ios-hub .ihb-lt b { display: block; font: 600 14px/1.1 Inter, sans-serif; }
#ios-hub .ihb-lt span { display: block; font: 500 11px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 2px; }
#ios-hub .ihb-lg { color: var(--text-dim); } #ios-hub .ihb-lg svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ios-hub .ihb-rv { animation: ihb-enter .54s var(--ios-ease) backwards; animation-delay: calc(var(--d, 0) * 60ms); }
@keyframes ihb-enter { from { opacity: 0; transform: translateY(12px); } }
@keyframes ihb-fade { from { opacity: 0; } }
@media (hover: hover) and (pointer: fine) { #ios-hub .ihb-row:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); } #ios-hub :is(.ihb-back, .ihb-theme):hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); color: var(--accent); } #ios-hub .ihb-link:hover { background: color-mix(in oklab, var(--accent) 5%, var(--surface)); } }
#ios-hub :is(.ihb-back, .ihb-theme, .ihb-row, .ihb-primary, .ihb-logresult, .ihb-suggest, .ihb-link):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #ios-hub .ihb-rv { animation: ihb-fade .3s linear backwards; } #ios-hub :is(.ihb-row, .ihb-primary, .ihb-back, .ihb-theme):active { transform: none; } }
html[data-theme] body #pro-only-modal { z-index: 400 !important; }   /* the Pro sheet opened from the hub must sit above it */
#ios-hub .ihb-greet { font: 600 13.5px/1.45 Inter, sans-serif; color: var(--text-mid); margin: 4px 2px 12px; }
#ios-hub .ihb-greet b { color: var(--text); font-weight: 700; }

/* ── Persona bundle Task 14: Suggest a cert sheet (cert-ios-settings.html suggestSheet). Own host, above the hub (z 410/411). ── */
.sg-scrim { position: fixed; inset: 0; z-index: 410; background: color-mix(in oklab, var(--bg) 58%, transparent); opacity: 0; transition: opacity .2s var(--ios-ease); }
.sg-scrim.open { opacity: 1; transition: opacity .26s var(--ios-ease); }
.sg-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 411; box-sizing: border-box; max-height: 86dvh; display: flex; flex-direction: column; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--text); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; transform: translateY(100%); transition: transform .2s var(--ios-ease); outline: none; }
.sg-sheet.open { transform: none; transition: transform .36s var(--ios-ease); }
.sg-sheet button { font-family: inherit; box-sizing: border-box; cursor: pointer; margin: 0; min-height: 0; }
.sg-grip { flex: 0 0 auto; width: 38px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--text) 18%, transparent); margin: 0 auto 13px; }
.sg-eyebrow { display: block; margin-top: 4px; font: 800 9.5px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); }
#ios-suggest.sg-sheet h3 { font: 600 19px/1.2 Fraunces, Georgia, serif; letter-spacing: -0.01em; text-transform: none; margin: 4px 0 4px; color: var(--text); outline: none; }
.sg-sub { margin: 0 0 12px; font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); }
.sg-search { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; margin: 2px 0 6px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--surface2) 55%, var(--surface)); }
.sg-search:focus-within { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); }
.sg-search svg { flex: 0 0 auto; width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 2; stroke-linecap: round; }
.sg-search input { flex: 1 1 auto; min-width: 0; padding: 0; margin: 0; height: 40px; border: 0; box-shadow: none; background: transparent; color: var(--text); font: 500 16px/1 Inter, sans-serif; outline: none; }   /* 16px: iOS does not zoom the page on focus */
.sg-list { flex: 1 1 auto; min-height: 0; max-height: 300px; overflow-y: auto; margin: 0 -6px; overscroll-behavior: contain; }
.sg-vendor { margin: 12px 6px 4px; font: 800 9px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.sg-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 6px; border: 0; background: transparent; color: var(--text); text-align: left; border-radius: 12px; transition: background-color .18s var(--ios-ease), transform .12s var(--ios-ease); }
.sg-row:active { transform: scale(.97); }
.sg-row.on { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.sg-g { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 800 11px/1 Inter, sans-serif; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, var(--surface2)); }
.sg-n { flex: 1 1 0; min-width: 0; font: 650 14px/1.2 Inter, sans-serif; }
.sg-n span { display: block; margin-top: 3px; font: 600 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); }
.sg-tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; border: 1.5px solid var(--border); transition: background-color .18s var(--ios-ease), border-color .18s var(--ios-ease); }
.sg-tick svg { width: 13px; height: 13px; stroke: var(--on-accent); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.96); transition: opacity .16s var(--ios-ease), transform .2s var(--ios-ease); }
.sg-row.on .sg-tick { background: var(--accent); border-color: var(--accent); }
.sg-row.on .sg-tick svg { opacity: 1; transform: none; }
.sg-else .sg-g, .sg-add .sg-g { color: var(--text-dim); background: transparent; border: 1.5px dashed var(--border); }
.sg-add.on .sg-g { color: var(--accent-deep); }
.sg-else .sg-n { color: var(--text-mid); }
.sg-pri { flex: 0 0 auto; width: 100%; min-height: 46px; margin-top: 12px; border: 0; border-radius: 12px; padding: 12px; background: var(--accent); color: var(--on-accent); font: 700 14px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease), opacity .18s var(--ios-ease); }
.sg-pri:active:not(:disabled) { transform: scale(.97); }
.sg-pri:disabled { opacity: .45; cursor: default; }
.sg-note { flex: 0 0 auto; margin: 9px 0 0; text-align: center; font: 500 11.5px/1.4 Inter, sans-serif; color: var(--text-dim); }
.sg-done { text-align: center; padding: 6px 0 4px; animation: sg-in .52s var(--ios-ease) backwards; }
.sg-done h3 { margin-top: 14px; }
.sg-done p { margin: 0 auto; max-width: 30ch; font: 500 13px/1.5 Inter, sans-serif; color: var(--text-mid); }
.sg-stack { display: inline-flex; }
.sg-stack .sg-g { width: 44px; height: 44px; border-radius: 13px; font-size: 13px; border: 2px solid var(--surface); margin-left: -10px; }
.sg-stack .sg-g:first-child { margin-left: 0; }
@keyframes sg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.sg-sheet :is(.sg-row, .sg-pri):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sg-row:hover { background: color-mix(in oklab, var(--text) 5%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .sg-sheet { transform: none; opacity: 0; transition: opacity .2s ease; } .sg-sheet.open { opacity: 1; }
  .sg-row, .sg-tick, .sg-tick svg, .sg-pri { transition: none; } .sg-row:active, .sg-pri:active:not(:disabled) { transform: none; }
  .sg-done { animation: sg-fade .2s ease backwards; }
  @keyframes sg-fade { from { opacity: 0; } }
}
.sg-err { flex: 0 0 auto; margin: 8px 0 0; text-align: center; font: 600 12px/1.4 Inter, sans-serif; color: var(--miss, var(--red)); }
.sg-err:empty { display: none; }

/* Persona bundle T18: the goodbye after deleting and the welcome back after cancelling (drawings: onboarding-account-deletion.html ?v=goodbye, cert-ios-home.html #wb). Phone only (this sheet loads at max-width 899px). Motion tokens are BRAND.md §6. */
.dm-screen { position: fixed; inset: 0; z-index: 320; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; opacity: 0; pointer-events: none; transition: opacity .35s var(--ios-ease); }
.dm-screen.dm-open { opacity: 1; pointer-events: auto; }
.dm-screen.dm-leaving { opacity: 0; transition: opacity .2s ease; }
.dm-screen *, .dm-screen *::before, .dm-screen *::after { box-sizing: border-box; }
.dm-screen button { font-family: inherit; }
.dm-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: calc(24px + env(safe-area-inset-top)) 36px 24px; text-align: center; }
.dm-screen h2 { font: 600 24px/1.15 Fraunces, Georgia, serif; letter-spacing: -0.012em; margin: 0; color: var(--text); }
html[data-theme] body .dm-screen h2[tabindex="-1"]:focus, html[data-theme] body .dm-screen h2[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; background: none !important; }
.dm-screen p { font-size: 14px; line-height: 1.55; color: var(--text-mid); margin: 0; max-width: 32ch; }
.dm-screen p b, .gb-keep b { color: var(--text); font-weight: 650; }
.dm-foot { flex: 0 0 auto; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--bg); }
.dm-cta { width: 100%; min-height: 48px; border: 0; border-radius: 13px; padding: 15px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 15px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease); }
.dm-cta:active { transform: scale(0.985); }
.dm-ghost { width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid var(--border); border-radius: 13px; padding: 13px; cursor: pointer; background: transparent; color: var(--text-mid); font: 650 14px/1 Inter, sans-serif; transition: background .2s, transform .15s var(--ios-ease); }
.dm-ghost:active { transform: scale(0.98); }
@media (hover:hover) and (pointer:fine) { .dm-ghost:hover { background: color-mix(in oklab, var(--text) 5%, transparent); } }
.gb-clockwrap { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 11%, var(--surface3)); }
.gb-dial { width: 64px; height: 64px; overflow: visible; }
.gb-dial line, .gb-face { stroke: var(--accent-deep); fill: none; stroke-width: 2.2; stroke-linecap: round; }
.gb-face { stroke-width: 2; }
.gb-pin { fill: var(--accent-deep); }
.gb-tick circle { fill: var(--accent); stroke: none; }
.gb-hand { transform-origin: 32px 32px; transform-box: view-box; }
.gb-keep { max-width: 32ch; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); font-size: 13px; line-height: 1.5; color: var(--text-mid); text-align: left; }
.dm-screen p.gb-quiet { font-size: 12px; color: var(--text-dim); }
.wb-markwrap { position: relative; display: grid; place-items: center; }
.wb-glow { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.wb-mark { position: relative; width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 13%, var(--surface)); }
.wb-mark svg { width: 28px; height: 28px; stroke: var(--accent-deep); fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.wb-arrow { transform-origin: 12px 12px; transform-box: view-box; }
#ios-welcomeback h2 { font-size: 26px; }
#ios-welcomeback p { max-width: 30ch; }
.wb-kept { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 310px; margin-top: 6px; }
.wb-kept div { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 11px 8px; }
.wb-kept b { display: block; font: 600 20px/1 Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.wb-kept span { display: block; margin-top: 5px; font: 700 9px/1.2 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.dm-open .gb-clockwrap { animation: dm-fade .52s var(--ios-ease) backwards; }
.dm-open .gb-hand { animation: dm-sweep .9s var(--ios-ease) .12s backwards; }
.dm-open .gb-tick circle { animation: dm-tick .34s var(--ios-ease) backwards; animation-delay: calc(.2s + var(--i) * 95ms); }
.dm-open .dm-in { animation: dm-rise .54s var(--ios-ease) backwards; animation-delay: calc(.18s + var(--d, 0) * 60ms); }
.dm-open .gb-last { animation-delay: .86s; }
.dm-open .wb-glow { animation: dm-fade .9s var(--ios-ease) backwards; }
.dm-open .wb-mark { animation: dm-fade .52s var(--ios-ease) .05s backwards; }
.dm-open .wb-arrow { animation: dm-wind .9s var(--ios-ease) .1s backwards; }
#ios-welcomeback.dm-open .dm-in { animation-delay: calc(.2s + var(--d, 0) * 60ms); }
@keyframes dm-fade { from { opacity: 0; transform: scale(.96); } }
@keyframes dm-sweep { from { transform: rotate(-300deg); } }
@keyframes dm-wind { from { transform: rotate(320deg); } }
@keyframes dm-tick { from { opacity: 0; } }
@keyframes dm-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes dm-fade-only { from { opacity: 0; } }
html[data-theme] body .dm-cta:focus-visible { outline: 2px solid var(--on-accent) !important; outline-offset: -5px !important; box-shadow: 0 0 0 3px var(--accent) !important; }
html[data-theme] body .dm-ghost:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) {
  .dm-screen { transition: opacity .18s ease; }
  .dm-open .gb-clockwrap, .dm-open .gb-hand, .dm-open .gb-tick circle, .dm-open .dm-in, .dm-open .wb-glow, .dm-open .wb-mark, .dm-open .wb-arrow, #ios-welcomeback.dm-open .dm-in { animation: dm-fade-only .3s ease backwards; animation-delay: 0s; }
  .dm-cta:active, .dm-ghost:active { transform: none; }
}

/* ── Admin in the app Task 3: Report a problem as a bottom sheet (features/report-sheet.js; drawing cert-ios-report.html).
   Own host above the hub and the suggest sheet (z 420/421). Sheet and toast move on the drawer curve (as #ios-results .ir-mtoast and the drawing),
   fades on --ios-ease; in 360ms / out 200ms; reduced motion fades. ── */
.irp-scrim { position: fixed; inset: 0; z-index: 420; background: color-mix(in oklab, var(--bg) 52%, transparent); opacity: 0; transition: opacity .2s var(--ios-ease); }
.irp-scrim.open { opacity: 1; transition: opacity .26s var(--ios-ease); }
.irp-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: max(64px, calc(env(safe-area-inset-top) + 20px)); z-index: 421; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--text); border-top: 1px solid var(--border); border-radius: 26px 26px 0 0; box-shadow: 0 -24px 60px -30px rgba(0,0,0,.55);
  font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; outline: none; transform: translateY(100%); transition: transform .2s var(--ease-drawer, cubic-bezier(0.32,0.72,0,1)); }
.irp-sheet.open { transform: none; transition: transform .36s var(--ease-drawer, cubic-bezier(0.32,0.72,0,1)); }
.irp-sheet *, .irp-sheet *::before, .irp-sheet *::after { box-sizing: border-box; }
.irp-sheet :is(button, textarea) { font-family: inherit; margin: 0; }
.irp-sheet button { cursor: pointer; }
.irp-sheet svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.irp-grab { flex: 0 0 auto; width: 38px; height: 4px; border-radius: 999px; background: var(--border); margin: 9px auto 2px; }
.irp-head { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 20px 0; }
.irp-eyebrow { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 8px; padding-top: 5px; font: 800 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.irp-eyebrow svg { width: 14px; height: 14px; stroke-width: 2; }
.irp-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: color-mix(in oklab, var(--accent) 45%, transparent); }
.irp-close { flex: 0 0 auto; width: 44px; height: 44px; margin: -7px -7px 0 0; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text-dim); display: grid; place-items: center; transition: transform .15s var(--ios-ease); }
.irp-close svg { width: 17px; height: 17px; stroke-width: 2.2; }
.irp-close:active { transform: scale(.94); }
.irp-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 8px; }
.irp-scroll::-webkit-scrollbar { width: 0; }
#ios-report .irp-title { font: 600 24px/1.12 Fraunces, Georgia, serif; letter-spacing: -0.012em; text-transform: none; color: var(--text); margin: 8px 0 0; }
.irp-sub { font: 500 13px/1.5 Inter, sans-serif; color: var(--text-mid); margin: 7px 0 0; }
.irp-hearback { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 4px; padding: 11px 12px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); background: color-mix(in oklab, var(--accent) 6%, var(--surface3)); }
.irp-hearback svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; stroke: var(--accent-deep); stroke-width: 1.9; }
.irp-hearback span { font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); }
#ios-report .irp-link { display: inline; padding: 12px 0; margin: -12px 0; border: 0; background: none; font: 650 12.5px/1.45 Inter, sans-serif; color: var(--accent-deep); }   /* 44px tall to the finger, inline to the eye */
.irp-context { display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 4px; padding: 7px 11px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 8%, var(--surface3)); border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); }
.irp-context svg { width: 13px; height: 13px; stroke: var(--accent-deep); stroke-width: 2; }
.irp-context span { font: 600 11.5px/1 Inter, sans-serif; color: var(--text-mid); }
.irp-context b { color: var(--text); font-weight: 700; }
.irp-field { margin-top: 16px; }
.irp-field[hidden], .irp-steps-link[hidden] { display: none; }
.irp-ftop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.irp-label { font: 800 10px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.irp-req { color: var(--accent-deep); margin-left: 3px; }
.irp-count, .irp-opt { margin-left: auto; font: 600 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); }
.irp-count.warn { color: var(--warn); }
.irp-ta { display: block; width: 100%; min-height: 104px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg); color: var(--text); font: 500 16px/1.45 Inter, sans-serif; outline: none; resize: none; box-shadow: none; transition: border-color .16s var(--ios-ease), box-shadow .16s var(--ios-ease); }   /* 16px: iOS does not zoom on focus */
.irp-ta::placeholder { color: var(--text-dim); }
.irp-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.irp-steps-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 0 -6px; padding: 0; border: 0; background: transparent; font: 650 13px/1 Inter, sans-serif; color: var(--text-mid); }
.irp-plus { width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 12%, var(--surface3)); color: var(--accent-deep); }
.irp-plus svg { width: 12px; height: 12px; stroke-width: 2.4; }
.irp-err { margin: 10px 0 0; font: 600 12.5px/1.4 Inter, sans-serif; color: var(--red); }
.irp-err:empty { display: none; }
.irp-foot { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); background: var(--surface); }
.irp-cancel { flex: 0 0 auto; min-height: 46px; padding: 0 18px; border: 1px solid var(--border); border-radius: 13px; background: transparent; color: var(--text-mid); font: 650 14px/1 Inter, sans-serif; transition: transform .15s var(--ios-ease); }
.irp-send { flex: 1 1 auto; min-height: 46px; padding: 14px; border: 0; border-radius: 13px; background: var(--accent); color: var(--on-accent); font: 700 14.5px/1 Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease), opacity .18s var(--ios-ease); }
.irp-send svg { width: 15px; height: 15px; stroke-width: 2.2; }
.irp-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.irp-send[aria-busy="true"] { opacity: .7; }   /* Sending…: the words only, held a little brighter than plain disabled; no motion */
.irp-cancel:active, .irp-send:active:not(:disabled) { transform: scale(.97); }
.irp-sheet :is(button, .irp-ta):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.irp-toast { position: fixed; z-index: 2100; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-radius: 16px;
  background: var(--surface); color: var(--text); border: 1px solid color-mix(in oklab, var(--green) 50%, var(--border)); box-shadow: 0 20px 50px -24px rgba(0,0,0,.5); pointer-events: none;
  opacity: 0; transform: translateY(140%); transition: transform .22s var(--ease-drawer, cubic-bezier(0.32,0.72,0,1)), opacity .2s var(--ios-ease); }
.irp-toast.open { opacity: 1; transform: none; transition: transform .34s var(--ease-drawer, cubic-bezier(0.32,0.72,0,1)), opacity .25s var(--ios-ease); }
.irp-toast-i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--green); background: color-mix(in oklab, var(--green) 15%, transparent); }
.irp-toast-i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.irp-toast-t { display: block; font: 700 13.5px/1.2 Inter, sans-serif; color: var(--text); }
.irp-toast-l { display: block; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 3px; }
.irp-toast-n { font-family: 'Roboto Mono', monospace; font-weight: 600; }
.irp-toast.queued { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
.irp-toast.queued .irp-toast-i { color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 14%, transparent); }
#ios-custom .ic-err-tell { display: flex; align-items: center; min-height: 44px; margin: 2px 0 -10px; padding: 0; border: 0; background: none; font: 650 13px/1 Inter, -apple-system, sans-serif; color: var(--accent-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .irp-close:hover { background: color-mix(in oklab, var(--text) 6%, transparent); color: var(--text); } .irp-steps-link:hover { color: var(--accent-deep); } }
@media (prefers-reduced-motion: reduce) {
  .irp-sheet, .irp-sheet.open { transform: none; opacity: 0; transition: opacity .2s ease; } .irp-sheet.open { opacity: 1; }
  .irp-toast, .irp-toast.open { transform: none; transition: opacity .2s ease; }
  .irp-close, .irp-cancel, .irp-send, .irp-ta { transition: none; } .irp-close:active, .irp-cancel:active, .irp-send:active:not(:disabled) { transform: none; }
}
/* ── Admin in the app Task 7: Preview as Free bar (features/admin-preview.js; drawing cert-ios-admin.html, .freebar).
   Under the status bar on every phone screen while on: neutral chrome, a 44pt row, fades out in 150ms on Back to Pro.
   html.ap-free leaves room for it above Home and the full-screen screens. */
.ap-freebar { position: fixed; z-index: 9050; top: calc(6px + env(safe-area-inset-top, 0px)); left: 14px; right: 14px; display: flex; align-items: center; gap: 9px; margin: 0; padding: 0 4px 0 12px; min-height: 44px; box-sizing: border-box; border-radius: 999px;
  background: var(--surface3); border: 1px solid var(--border); box-shadow: 0 8px 20px -14px rgba(0,0,0,.5); color: var(--text); font-family: Inter, -apple-system, sans-serif; }
.ap-freebar[hidden] { display: none !important; }
.ap-freebar svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--text-dim); }
.ap-freebar-tx { flex: 1 1 auto; font: 650 12px/1 Inter, -apple-system, sans-serif; color: var(--text); }
.ap-freebar-back { flex: 0 0 auto; min-height: 44px; border: 0; background: none; cursor: pointer; padding: 0 12px; font: 700 12px/1 Inter, -apple-system, sans-serif; color: var(--accent-deep); transition: transform .15s var(--ios-ease); }
.ap-freebar-back:active { transform: scale(.97); }
.ap-freebar-back:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 999px; }
.ap-freebar.leaving { opacity: 0; transition: opacity .15s var(--ios-ease); }
html.ap-free body { padding-top: calc(var(--ap-free-top) + env(safe-area-inset-top, 0px)); }   /* replaces body's own safe-area padding, never adds to it */
/* --ap-free-top is the room the bar needs. Every full-screen phone host starts at it (0 when the preview is off);
   a new full-screen screen opts in by joining this list. */
html.ap-free { --ap-free-top: 56px; }
html[data-theme] body :is(#ios-hub, #ios-check, #ios-log-result, .dm-screen, .isi-host, #onb-firstrun.ifr-on, #page-progress.active #ios-progress:not(:empty),
  #page-analytics.active #ios-analytics:not(:empty), #page-exam-results.active #ios-exam-results:not(:empty), #page-exam.active, .lift-sheet-scrim, .quota-exceeded-modal, #ios-admin, .adm-scrim) { top: var(--ap-free-top, 0px) !important; }
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xbar { top: var(--ap-free-top, 0px); }
html.ap-free body .app-topbar { top: var(--ap-free-top) !important; }   /* sticky: sticks under the bar, not behind it */
:is(#page-sim-lab.isl-exam, #page-decision-lab.idl-exam) #isl-xstrip { top: calc(56px + var(--ap-free-top, 0px)); }
@media (prefers-reduced-motion: no-preference) {
  .ap-freebar.enter { animation: ap-bar-in .34s var(--ios-ease) backwards; }
  @keyframes ap-bar-in { from { opacity: 0; transform: translateY(-6px); } }
}
@media (prefers-reduced-motion: reduce) {
  .ap-freebar.enter { animation: ap-bar-fade .2s ease backwards; }
  @keyframes ap-bar-fade { from { opacity: 0; } }
  .ap-freebar-back { transition: none; } .ap-freebar-back:active { transform: none; }
}

/* ── Admin in the app Task 8: the Admin screen on phones (features/admin-screen.js; drawing cert-ios-admin.html, phone views).
   #ios-admin sits over My certs (z 300, above the hub); report and group sheets (#adm-sheet) sit above it (z 430/431) on the
   drawer curve, in 340ms / out 220ms. Reveal on first paint only (a section's first fill), BRAND §6 curve; reduced motion fades.
   The desktop layout is in dg-system.css. ── */
#ios-admin[hidden] { display: none !important; }
#ios-admin { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
#ios-admin *, #ios-admin *::before, #ios-admin *::after, .adm-sheet *, .adm-sheet *::before, .adm-sheet *::after { box-sizing: border-box; }
#ios-admin :is(button, input), .adm-sheet button { font-family: inherit; margin: 0; }
#ios-admin .adm-i, .adm-sheet .adm-i, .adm-toast .adm-i { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#ios-admin .adm-hdr { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 18px 6px; }
html.ap-free #ios-admin .adm-hdr { padding-top: 12px; }   /* the host already starts below the bar and the status bar */
#ios-admin .adm-back { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-mid); display: grid; place-items: center; cursor: pointer; transition: transform .14s var(--ios-ease); }
#ios-admin .adm-back:active { transform: scale(.94); }
#ios-admin .adm-h1 { margin: 0; font: 600 22px/1.1 Fraunces, Georgia, serif; letter-spacing: -0.01em; color: var(--text); outline: none; }
#ios-admin .adm-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px calc(22px + env(safe-area-inset-bottom)); }
#ios-admin .adm-body::-webkit-scrollbar { width: 0; }
#ios-admin .adm-sect { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 20px 2px 9px; }
#ios-admin :is(.adm-sect-h, .adm-sect > b) { margin: 0; font: 800 10px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
#ios-admin .adm-count { font: 600 10.5px/1 'Roboto Mono', monospace; color: var(--text-dim); }
#ios-admin .adm-count.adm-hot { color: var(--accent-deep); }
/* Today: one hairline stat strip + the AI instrument (tick at 80%) */
#ios-admin .adm-stats { display: flex; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
#ios-admin .adm-stat { flex: 1 1 0; min-width: 0; padding: 11px 12px; }
#ios-admin .adm-stat + .adm-stat { border-left: 1px solid color-mix(in oklab, var(--border) 75%, transparent); }
#ios-admin .adm-stat b { display: block; font: 600 21px/1 Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
#ios-admin .adm-stat span { display: block; font: 600 10px/1.2 Inter, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }
#ios-admin .adm-stat small { display: block; font: 600 10.5px/1 Inter, sans-serif; color: var(--green); margin-top: 5px; }
#ios-admin .adm-ai { margin-top: 9px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 12px 13px 11px; }
#ios-admin .adm-ai-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 9px; }
#ios-admin .adm-ai-top b { font: 600 19px/1 Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
#ios-admin .adm-ai-top span { font: 600 12px/1 Inter, sans-serif; color: var(--text-dim); }
#ios-admin .adm-ai-top em { margin-left: auto; font: 700 10px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); font-style: normal; }
#ios-admin .adm-bar { height: 7px; border-radius: 999px; background: var(--track); position: relative; overflow: hidden; }
#ios-admin .adm-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); transform-origin: left; }
#ios-admin .adm-tick { position: absolute; top: -2px; bottom: -2px; left: 80%; width: 2px; background: color-mix(in oklab, var(--text) 40%, var(--track)); }
#ios-admin .adm-bar-legend { display: flex; justify-content: space-between; margin-top: 6px; font: 600 10.5px/1 Inter, sans-serif; color: var(--text-dim); }
/* hairline lists */
#ios-admin .adm-list { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
#ios-admin .adm-dash { margin-top: 20px; }
#ios-admin .adm-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; text-align: left; background: none; border: 0; font: inherit; color: var(--text); text-decoration: none; cursor: pointer; padding: 12px 13px; transition: background-color .16s var(--ios-ease), transform .12s var(--ios-ease); }
#ios-admin :is(.adm-row + .adm-row, .adm-row + .adm-confirm, .adm-confirm + .adm-row) { border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); }
#ios-admin .adm-row:active { transform: scale(.992); }
#ios-admin .adm-m { flex: 1 1 auto; min-width: 0; }
#ios-admin .adm-t { display: block; font: 600 14px/1.25 Inter, sans-serif; color: var(--text); overflow-wrap: anywhere; }
#ios-admin .adm-s { display: block; font: 500 11.5px/1.35 Inter, sans-serif; color: var(--text-dim); margin-top: 3px; }
#ios-admin .adm-v { flex: 0 0 auto; text-align: right; }
#ios-admin .adm-v b { display: block; font: 600 17px/1 Fraunces, Georgia, serif; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
#ios-admin .adm-v span { display: block; font: 600 10px/1 Inter, sans-serif; color: var(--text-dim); margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; }
#ios-admin .adm-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-dim); }
#ios-admin .adm-cue { display: block; font: 600 10.5px/1 Inter, sans-serif; color: var(--accent-deep); margin-top: 4px; }
#ios-admin .adm-errrow .adm-t { font: 600 12px/1.35 'Roboto Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ios-admin .adm-static { cursor: default; }
#ios-admin .adm-static:active { transform: none; }
#ios-admin .adm-grp { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent-deep); font: 700 11px/1 'Roboto Mono', monospace; }
/* inline confirm (Tell them it's live) */
#ios-admin .adm-confirm { padding: 12px 13px 13px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
#ios-admin .adm-confirm p { margin: 0 0 10px; font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); }
#ios-admin .adm-confirm p b { color: var(--text); font-weight: 650; }
#ios-admin .adm-btns { display: flex; gap: 8px; }
:is(#ios-admin, .adm-sheet) .adm-btn-pri { flex: 1 1 auto; min-height: 44px; border: 0; border-radius: 11px; padding: 12px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: 700 13.5px/1 Inter, sans-serif; box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--accent) 70%, transparent); transition: transform .15s var(--ios-ease), opacity .18s var(--ios-ease); }
:is(#ios-admin, .adm-sheet) .adm-btn-sec { flex: 0 0 auto; min-height: 44px; border: 1px solid var(--border); border-radius: 11px; background: transparent; color: var(--text-mid); font: 650 13.5px/1 Inter, sans-serif; padding: 0 16px; cursor: pointer; transition: transform .14s var(--ios-ease); }
:is(#ios-admin, .adm-sheet) :is(.adm-btn-pri, .adm-btn-sec):disabled { opacity: .55; cursor: default; box-shadow: none; }
:is(#ios-admin, .adm-sheet) .adm-btn-pri:active:not(:disabled) { transform: scale(.985); }
:is(#ios-admin, .adm-sheet) .adm-btn-sec:active:not(:disabled) { transform: scale(.97); }
:is(#ios-admin, .adm-sheet) .adm-err { margin: 0 0 10px; font: 600 12.5px/1.4 Inter, sans-serif; color: var(--red); }
/* section states, offline, notes */
#ios-admin .adm-state { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 16px 14px; text-align: center; }
#ios-admin .adm-state p { margin: 0 0 10px; font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); }
#ios-admin .adm-state p:last-child { margin-bottom: 0; }
#ios-admin .adm-ai + .adm-state, #ios-admin .adm-stats + .adm-state { margin-top: 9px; }
#ios-admin .adm-state button { min-height: 44px; border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)); border-radius: 10px; background: transparent; color: var(--accent-deep); font: 700 12.5px/1 Inter, sans-serif; padding: 9px 16px; cursor: pointer; transition: transform .14s var(--ios-ease); }
#ios-admin .adm-state button:active { transform: scale(.97); }
#ios-admin .adm-offline { margin-top: 30px; padding: 26px 18px; }
#ios-admin .adm-offline .adm-i { width: 26px; height: 26px; color: var(--text-dim); margin-bottom: 8px; }
#ios-admin .adm-offline h2 { font: 600 18px/1.2 Fraunces, Georgia, serif; margin: 0 0 6px; color: var(--text); }
#ios-admin .adm-note { font: 500 11px/1.4 Inter, sans-serif; color: var(--text-dim); margin: 7px 2px 0; }
#ios-admin .adm-skel { height: 96px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); opacity: .6; }
/* See all, search, chips, Show 20 more */
#ios-admin .adm-seeall { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; border: 0; border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); background: none; cursor: pointer; padding: 0 13px; font: 700 12.5px/1 Inter, sans-serif; color: var(--accent-deep); transition: transform .12s var(--ios-ease); }
#ios-admin .adm-seeall:active { transform: scale(.992); }
#ios-admin .adm-seeall .adm-chev { color: currentColor; width: 15px; height: 15px; }
#ios-admin .adm-search { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-top: 4px; }
#ios-admin .adm-search .adm-i { width: 16px; height: 16px; color: var(--text-dim); flex: 0 0 auto; }
#ios-admin .adm-search input { flex: 1 1 auto; min-width: 0; min-height: 42px; border: 0; outline: none; background: transparent; color: var(--text); font: 500 16px/1 Inter, sans-serif; -webkit-appearance: none; appearance: none; }   /* 16px: iOS does not zoom on focus */
#ios-admin .adm-search input::placeholder { color: var(--text-dim); }
#ios-admin .adm-search:focus-within { border-color: var(--accent); }
#ios-admin .adm-chips { display: flex; gap: 7px; overflow-x: auto; margin: 10px -18px 4px; padding: 0 18px 2px; scrollbar-width: none; }
#ios-admin .adm-chips::-webkit-scrollbar { display: none; }
#ios-admin .adm-chip { position: relative; flex: 0 0 auto; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-mid); font: 650 12px/1 Inter, sans-serif; cursor: pointer; transition: transform .14s var(--ios-ease), background-color .16s var(--ios-ease), border-color .16s var(--ios-ease); }
#ios-admin .adm-chip::before { content: ""; position: absolute; inset: -5px 0; }   /* 44pt to the finger */
#ios-admin .adm-chip:active { transform: scale(.97); }
#ios-admin .adm-chip[aria-pressed="true"] { background: color-mix(in oklab, var(--accent) 12%, transparent); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); color: var(--accent-deep); }
#ios-admin .adm-more { width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text-mid); font: 650 13px/1 Inter, sans-serif; cursor: pointer; transition: transform .14s var(--ios-ease); }
#ios-admin .adm-more:active:not(:disabled) { transform: scale(.985); }
/* the Preview switch: the Settings .st-sw */
#ios-admin .adm-sw { position: relative; flex: 0 0 auto; width: 48px; height: 30px; border-radius: 999px; border: 0; background: var(--track); cursor: pointer; padding: 0; transition: background-color .2s var(--ios-ease); }
#ios-admin .adm-sw::before { content: ""; position: absolute; inset: -7px -2px; }
#ios-admin .adm-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ios-ease); }
#ios-admin .adm-sw[aria-checked="true"] { background: var(--accent); }
#ios-admin .adm-sw[aria-checked="true"]::after { transform: translateX(18px); }
#ios-admin :is(.adm-back, .adm-row, .adm-seeall, .adm-chip, .adm-more, .adm-sw, .adm-state button, .adm-btn-pri, .adm-btn-sec):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the sheet: report and group details */
.adm-scrim { position: fixed; inset: 0; z-index: 430; background: color-mix(in oklab, var(--bg) 55%, transparent); opacity: 0; transition: opacity .18s var(--ios-ease); }
.adm-scrim.open { opacity: 1; transition: opacity .28s var(--ios-ease); }
.adm-scrim[hidden], .adm-sheet[hidden] { display: none !important; }
.adm-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--ap-free-top, 0px) + max(64px, calc(env(safe-area-inset-top) + 20px))); z-index: 431; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--text); border-top: 1px solid var(--border); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px -24px rgba(0,0,0,.5);
  font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; transform: translateY(102%); transition: transform .22s var(--ease-drawer, cubic-bezier(0.32,0.72,0,1)); }
.adm-sheet.open { transform: none; transition: transform .34s var(--ease-drawer, cubic-bezier(0.32,0.72,0,1)); }
.adm-sheet .adm-grab { flex: 0 0 auto; width: 38px; height: 4px; border-radius: 999px; background: var(--border); margin: 9px auto 4px; }
.adm-sheet .adm-sh-x { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--text-dim); display: grid; place-items: center; cursor: pointer; transition: transform .14s var(--ios-ease); }
.adm-sheet .adm-sh-x:active { transform: scale(.94); }
.adm-sheet .adm-sh-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 10px; }
.adm-sheet .adm-sh-eyebrow { font: 800 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
#adm-sheet .adm-sh-title { font: 600 21px/1.15 Fraunces, Georgia, serif; letter-spacing: -0.01em; text-transform: none; margin: 8px 52px 4px 0; color: var(--text); overflow-wrap: anywhere; }
.adm-sheet .adm-sh-when { font: 500 12px/1.4 Inter, sans-serif; color: var(--text-dim); }
.adm-sheet .adm-sh-k { font: 800 10px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin: 16px 0 7px; }
.adm-sheet .adm-sh-p { font: 500 13.5px/1.55 Inter, sans-serif; color: var(--text); margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.adm-sheet .adm-meta { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; font: 500 12.5px/1.3 Inter, sans-serif; }
.adm-sheet .adm-meta dt { color: var(--text-dim); }
.adm-sheet .adm-meta dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.adm-sheet .adm-sh-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.adm-sheet .adm-sh-list li + li { border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent); }
.adm-sheet .adm-sh-list li[hidden] { display: none; }
.adm-sheet .adm-sh-list button { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; background: none; text-align: left; cursor: pointer; font: 500 12.5px/1.4 Inter, sans-serif; color: var(--text); overflow-wrap: anywhere; transition: background-color .16s var(--ios-ease); }
.adm-sheet .adm-sh-list button span { display: block; font: 500 11px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 2px; }
.adm-sheet .adm-sh-list .adm-sh-more span { margin: 0; }
.adm-sheet .adm-reach { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding: 11px 12px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); background: color-mix(in oklab, var(--accent) 6%, var(--surface3)); font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); }
.adm-sheet .adm-reach.adm-anon { border-color: var(--border); background: var(--surface3); }
.adm-sheet .adm-reach .adm-i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--accent-deep); }
.adm-sheet .adm-reach.adm-anon .adm-i { color: var(--text-dim); }
.adm-sheet .adm-reach b { color: var(--text); font-weight: 650; overflow-wrap: anywhere; }
.adm-sheet .adm-sh-foot { flex: 0 0 auto; padding: 12px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); display: flex; flex-direction: column; gap: 8px; }
.adm-sheet .adm-sh-foot :is(.adm-btn-pri, .adm-btn-sec) { width: 100%; padding: 13px; min-height: 46px; }
.adm-sheet .adm-sh-foot .adm-err { margin: 0; }
.adm-sheet .adm-sh-confirm { font: 500 12.5px/1.45 Inter, sans-serif; color: var(--text-mid); margin: 0 0 2px; overflow-wrap: anywhere; }
.adm-sheet .adm-sh-confirm b { color: var(--text); font-weight: 650; }
.adm-sheet :is(button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* toast */
.adm-toast { position: fixed; z-index: 2100; left: 16px; right: 16px; bottom: calc(22px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; pointer-events: none;
  background: var(--surface); color: var(--text); border: 1px solid color-mix(in oklab, var(--green) 50%, var(--border)); box-shadow: 0 18px 40px -16px color-mix(in oklab, var(--text) 24%, transparent);
  opacity: 0; transform: translateY(140%); transition: transform .22s var(--ease-drawer, cubic-bezier(0.32,0.72,0,1)), opacity .2s var(--ios-ease); font-family: Inter, -apple-system, sans-serif; }
.adm-toast.open { opacity: 1; transform: none; transition: transform .36s var(--ease-drawer, cubic-bezier(0.32,0.72,0,1)), opacity .25s var(--ios-ease); }
.adm-toast-i { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--green); background: color-mix(in oklab, var(--green) 15%, transparent); }
.adm-toast-b { display: block; font: 700 13px/1.25 Inter, sans-serif; color: var(--text); }
.adm-toast-s { display: block; font: 500 11.5px/1.3 Inter, sans-serif; color: var(--text-dim); margin-top: 2px; }
.adm-fade { animation: adm-fade .15s var(--ios-ease) backwards; }
@keyframes adm-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  #ios-admin .adm-first .adm-sec:not([data-still]) .adm-rv, #ios-admin .adm-first .adm-offline { animation: adm-rise .52s cubic-bezier(0.16,1,0.3,1) backwards; animation-delay: calc(min(var(--d, 0), 4) * 60ms); }
  #ios-admin .adm-first .adm-sec:not([data-still]) .adm-ai .adm-bar > span { animation: adm-fill 1s cubic-bezier(0.16,1,0.3,1) .25s backwards; }
  @keyframes adm-rise { from { opacity: 0; transform: translateY(9px); } }
  @keyframes adm-fill { from { transform: scaleX(0); } }
}
@media (prefers-reduced-motion: reduce) {
  #ios-admin .adm-first .adm-sec:not([data-still]) .adm-rv { animation: adm-fade .3s linear backwards; }
  #ios-admin .adm-sw::after { transition: none; }   /* the switch knob jumps; the track colour still says on or off */
  .adm-sheet, .adm-sheet.open { transform: none; opacity: 0; transition: opacity .15s ease; } .adm-sheet.open { opacity: 1; }
  .adm-toast, .adm-toast.open { transform: none; transition: opacity .18s ease; }
  #ios-admin :is(.adm-row, .adm-back, .adm-seeall, .adm-chip, .adm-more, .adm-state button, .adm-btn-pri, .adm-btn-sec):active, .adm-sheet :is(.adm-sh-x, .adm-btn-pri, .adm-btn-sec):active { transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  #ios-admin .adm-row:not(.adm-static):hover, .adm-sheet .adm-sh-list button:hover { background: color-mix(in oklab, var(--accent) 5%, var(--surface)); }
  #ios-admin .adm-back:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); color: var(--accent); }
  .adm-sheet .adm-sh-x:hover { background: color-mix(in oklab, var(--text) 6%, transparent); color: var(--text); }
}
/* the hub's Admin row: "N open" (drawing cert-ios-hub.html?v=admin) */
#ios-hub .ihb-count-pill { flex: 0 0 auto; font: 700 10px/1 'Roboto Mono', monospace; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 12%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); border-radius: 999px; padding: 4px 7px; }
#ios-hub .ihb-count-pill[hidden] { display: none; }
html[data-theme] body #ios-admin .adm-h1:focus, html[data-theme] body #ios-admin .adm-h1:focus-visible { outline: none !important; box-shadow: none !important; }   /* the heading takes focus on open for screen readers; no ring */