/* Nunito variable font (the typeface TestWe uses), served locally */
@font-face {
font-family: "Nunito";
src: url("fonts/nunito-latin.woff2") format("woff2");
font-weight: 200 1000;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Nunito";
src: url("fonts/nunito-latin-ext.woff2") format("woff2");
font-weight: 200 1000;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* The larger of the two horizontal safe-area insets. Used on BOTH sides so
the layout is symmetrical and, critically, identical whichever way a phone
is tilted - the camera cutout swaps edges, but the padding does not move. */
--side-inset: max(env(safe-area-inset-left), env(safe-area-inset-right));
--navy: #1c2951;
--blue: #2438a5;
--blue-bright: #1e49e2;
--blue-light: #eef1fb;
--lavender: #96a3e3;
--lavender-bg: #c8d0f2;
--gray-seg: #c9cdd6;
--gray-text: #6b7080;
--green: #2ebd85;
--orange: #f5a623;
--red: #e02020;
--pink-red: #ef3e5b;
--border: #e3e6ee;
font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
/* "only light" is a hard opt-out: it forbids the browser (Chrome/Samsung/etc.
mobile auto-dark) from force-darkening the page. Plain "light" is only a
hint and some mobile browsers still invert everything. The first line is a
fallback for browsers that don't parse the "only" keyword. */
color-scheme: light;
color-scheme: only light;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #fff; color: #2c2f38;
color-scheme: light; color-scheme: only light; }
#app { height: 100%; display: flex; flex-direction: column; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }
input[type=checkbox] { accent-color: var(--blue-bright); width: 16px; height: 16px; flex-shrink: 0; }
/* ============ generic pills / buttons ============ */
.pill { border: none; border-radius: 999px; padding: 10px 26px; font-weight: 700; font-size: 14px; }
.pill.red { background: var(--pink-red); color: #fff; }
.pill.blue { background: var(--blue-bright); color: #fff; }
.pill.white { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); }
.pill.small { padding: 6px 16px; font-size: 12.5px; }
/* ============ top bar ============ */
.topbar { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); flex-shrink: 0; background: #fff; }
.logo { background: var(--navy); color: #fff; width: 50px; display: flex; align-items: center; justify-content: center; font-size: 23px; border-bottom-right-radius: 16px; flex-shrink: 0; }
.topbar-left { display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.help-btn { width: 33px; height: 33px; border-radius: 50%; background: var(--blue-bright); color: #fff; border: none; font-size: 17px; font-weight: 800; }
.progress-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: var(--navy); }
.tabs { display: flex; flex: 1; overflow-x: auto; }
.tab { padding: 5px 14px 4px; min-width: 150px; border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; white-space: nowrap; }
.tab .tab-title { font-size: 11.5px; font-weight: 800; color: #b0b4c0; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.tab.active .tab-title { color: var(--blue); border-bottom: 3px solid var(--blue); padding-bottom: 4px; }
.tab.done .tab-title { color: #8a8f9c; }
.tab-time { font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 3px; }
.tab-time.instr { color: var(--red); }
.tab-time.test { color: var(--navy); }
.calc-btn { align-self: center; margin: 0 10px; width: 33px; height: 33px; border-radius: 50%; border: 1.5px solid var(--blue); background: #fff; color: var(--blue); font-size: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.calc-ico { display: block; }
/* ============ segments (question nav) ============ */
.segments { display: flex; gap: 8px; padding: 10px 18px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.seg { width: 44px; height: 12px; border-radius: 999px; background: var(--gray-seg); border: none; padding: 0; position: relative; }
.seg.visited { background: var(--lavender); }
.seg.answered { background: var(--green); }
.seg.bookmarked { background: var(--orange); }
.seg.current { background: var(--blue-bright); height: 16px; width: 52px; }
.seg.current::after { content: "▶"; color: #fff; font-size: 9px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.seg:hover::before { content: attr(data-label); position: absolute; top: 16px; left: 0; background: #fff; color: var(--blue); font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 5; white-space: nowrap; }
/* ============ exam body ============ */
.exam-body { flex: 1; display: flex; overflow: hidden; }
.exam-main { flex: 1; overflow-y: auto; padding: 22px 34px 90px; position: relative; }
.part-heading { color: var(--blue); font-weight: 800; font-size: 21px; margin: 0 0 4px; }
.part-sub { color: var(--gray-text); font-size: 13px; margin: 0 0 16px; }
.main-timer { position: absolute; top: 20px; right: 34px; font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 5px; color: var(--red); }
.main-timer.calm { color: var(--navy); }
.q-header { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; }
.q-num { color: var(--blue); font-weight: 800; font-size: 14px; text-decoration: underline; }
.q-points { background: var(--lavender-bg); color: var(--navy); font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px; }
.q-flag { background: none; border: none; font-size: 18px; color: #b8bcc8; padding: 2px 4px; }
.q-flag.on { color: var(--orange); }
.q-text { font-size: 15px; line-height: 1.65; max-width: 900px; }
.q-image { margin: 16px 0; }
.q-image img { max-width: min(100%, 700px); max-height: 360px; width: auto; height: auto;
border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: zoom-in; }
.img-zoom { position: fixed; inset: 0; background: rgba(20, 25, 45, .88); display: flex;
align-items: center; justify-content: center; z-index: 100; cursor: zoom-out; }
.img-zoom img { max-width: 96vw; max-height: 96vh; background: #fff; border-radius: 8px; padding: 8px; }
.options { margin-top: 18px; max-width: 900px; display: flex; flex-direction: column; gap: 10px; }
.option { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 16px; background: #fff; cursor: pointer; font-size: 14.5px; line-height: 1.5; text-align: left; width: 100%; }
.option:hover { border-color: var(--lavender); }
.option .radio { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; border: 2px solid #b8bcc8; margin-top: 1px; position: relative; }
.option.selected { border-color: var(--blue-bright); background: var(--blue-light); }
.option.selected .radio { border-color: var(--blue-bright); }
.option.selected .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue-bright); }
.option .letter { font-weight: 800; color: var(--blue); min-width: 20px; }
/* abstract questions: centered image with stacked A-E buttons matching its
width; ~58% of the viewport (about 1100px on 1080p), capped at the images'
native 1530px so they never upscale */
/* the picture is drawn at 60% of the frame while the frame itself (border +
click-to-enlarge target) keeps the image's full footprint. transform is
paint-only, so the frame's layout box - and its border - stay full size. */
.q-image.abstract { width: clamp(880px, 58vw, 1530px); max-width: 100%; margin: 20px auto;
border: 1px solid var(--border); border-radius: 6px; background: #fff;
cursor: zoom-in; overflow: hidden; }
/* the 0.6 scale lives on the wrapper, not the ![]()
: the answer hotspots are
inside the wrapper and must shrink with the picture to stay aligned */
.q-image.abstract img { display: block; max-width: 100%; height: auto; margin: 0 auto;
border: none; border-radius: 0; }
.q-image.abstract .abs-rot { transform: scale(0.6); transform-origin: center; }
.options.abstract { width: clamp(880px, 58vw, 1530px); max-width: 100%; margin: 16px auto 0; }
.options.abstract .option { padding: 10px 16px; }
/* tappable answer boxes drawn over an abstract diagram. Percentages come from
the artwork (all 903 abstract images share one 1476x672 layout), so the
overlay tracks the picture at any size. */
.q-image.abstract { position: relative; }
/* desktop: the wrapper is inert, it only does something in the mobile query */
.abs-rot { position: relative; display: block; }
.abs-hots { position: absolute; inset: 0; pointer-events: none; }
.abs-hot { position: absolute; margin: 0; padding: 0; background: none; border: 3px solid transparent; border-radius: 4px; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.abs-hot:hover { border-color: rgba(47, 111, 214, .45); }
.abs-hot.sel { border-color: var(--blue-bright); background: rgba(47, 111, 214, .08); }
.abs-hots.marks .abs-hot { pointer-events: none; }
.abs-hot.correct { border-color: #1aa564; }
.abs-hot.wrong { border-color: #e01b3c; }
/* image questions (numerical charts, abstract series): options flow right
under the image; if image at native size + options would overflow the
screen, the image alone shrinks so everything fits without scrolling */
.exam-main.fit { display: flex; flex-direction: column; padding-bottom: 64px; }
.exam-main.fit > * { flex-shrink: 0; }
.exam-main.fit .q-image { flex: 0 1 auto; min-height: 200px; margin: 12px 0; }
.exam-main.fit .q-image.abstract { margin: 12px auto; }
.exam-main.fit .q-image img { max-width: 100%; max-height: 100%; }
.exam-main.fit .options { margin-top: 14px; }
.exam-main.fit .option { padding: 8px 16px; }
/* ============ instructions screen ============ */
.instructions { max-width: 1000px; margin: 0 auto; text-align: center; font-size: 14.5px; line-height: 1.7; }
.instructions h2 { color: #3c4048; font-size: 16px; margin-bottom: 2px; }
.instructions .qcount { font-weight: 400; margin-top: 0; }
.instructions ul { text-align: left; display: inline-block; margin: 8px 0; }
.instructions .go-red { color: var(--red); font-weight: 800; margin-top: 18px; }
/* ============ footer arrows ============ */
.footer-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 26px; pointer-events: none; }
.footer-nav > * { pointer-events: auto; }
.arrow-btn { width: 52px; height: 36px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; color: var(--blue); font-size: 16px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.arrow-btn.next { background: var(--blue-bright); color: #fff; border: none; }
.validate-btn { background: var(--pink-red); color: #fff; border: none; border-radius: 999px; padding: 11px 30px; font-weight: 800; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
/* ============ media / scratch panel ============ */
.media-panel { width: 300px; border-left: 1px solid var(--border); background: #fafbff; display: flex; flex-direction: column; flex-shrink: 0; }
.media-panel .media-head { background: var(--lavender-bg); color: var(--navy); font-weight: 800; font-size: 12.5px; text-align: center; padding: 8px; border-radius: 8px; margin: 10px; }
.media-panel textarea { flex: 1; margin: 0 10px 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-family: inherit; font-size: 13.5px; resize: none; background: #fff; }
/* ============ TestWe 2025-06: draft pad + rail + scientific calculator ============ */
.tw-rail { width: 64px; background: var(--navy); display: flex; flex-direction: column; align-items: center; padding-top: 14px; gap: 6px; flex-shrink: 0; }
.tw-rail-btn { background: none; border: none; color: #aab3d6; font-size: 10.5px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 8px; width: 54px; }
.tw-rail-btn span { font-size: 20px; }
.tw-rail-btn.active, .tw-rail-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.tw-draft { width: 300px; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; background: #fff; }
.tw-draft-head { background: var(--lavender-bg); color: var(--navy); font-weight: 800; font-size: 13px; text-align: center; padding: 8px; border-radius: 8px; margin: 10px 10px 6px; }
.tw-draft-warn { color: var(--orange); font-size: 11px; font-weight: 700; margin: 0 12px 8px; }
.tw-draft-bar { display: flex; gap: 12px; align-items: center; border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; margin: 0 10px; padding: 6px 10px; color: var(--gray-text); font-size: 12px; }
.tw-draft-para { border-left: 1px solid var(--border); padding-left: 10px; }
.tw-draft textarea { flex: 1; margin: 0 10px 10px; border: 1px solid var(--border); border-radius: 0 0 8px 8px; padding: 10px; font-family: inherit; font-size: 13.5px; resize: none; background: #fdf6c8; }
.calc { position: fixed; top: 110px; left: 70px; width: 300px; background: #0d0d0f; border-radius: 14px; padding: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.45); z-index: 45; user-select: none; }
.calc-move { color: #fff; font-size: 15px; cursor: move; padding: 2px 6px; }
.calc .calc-display { color: #fff; font-size: 24px; text-align: right; padding: 12px 10px; min-height: 30px; overflow: hidden; font-variant-numeric: tabular-nums; word-break: break-all; }
.calc .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.calc button { border: none; border-radius: 6px; font-size: 16px; font-weight: 700; padding: 12px 0; background: #35373c; color: #fff; }
.calc button.fn { background: #808590; }
.calc button.op { background: #d68910; }
.calc button.danger { background: #96263c; }
.calc button.eq2 { background: #3a5a8c; }
/* ============ TAO skin ============ */
.tao-shell { flex: 1; display: flex; flex-direction: column; background: #fff; font-family: "Source Sans Pro", "Segoe UI", Arial, sans-serif; overflow: hidden; }
.tao-top { display: flex; align-items: center; gap: 12px; padding: 5px 14px; border-bottom: 1px solid #d9dce3; flex-shrink: 0; flex-wrap: wrap; }
.tao-logo { font-weight: 800; font-size: 18px; color: #c33; letter-spacing: -1px; }
.tao-burst { color: #e8b021; font-size: 13px; }
.tao-crumb { color: #444; font-size: 13px; flex: 1; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tao-timer { color: #d0021b; font-weight: 700; font-size: 14px; border-bottom: 2px solid #d0021b; padding-bottom: 1px; }
.tao-tools { display: flex; gap: 4px; }
.tao-tool { width: 30px; height: 30px; border: 1px solid #d9dce3; background: #fff; border-radius: 6px; font-size: 15px; color: #333; display: inline-flex; align-items: center; justify-content: center; }
.tao-tool.on { background: #e7eef9; border-color: #2f6fd6; color: #2f6fd6; }
/* Thin navigation strip: the OVERVIEW button gives full question navigation,
so the inline circles are just a slim at-a-glance progress row - kept to a
single non-wrapping line of small circles rather than a tall multi-row block. */
.tao-nav { display: flex; align-items: center; gap: 8px; padding: 3px 16px; border-bottom: 1px solid #d9dce3; flex-shrink: 0; }
.tao-circles { display: flex; gap: 5px; flex: 1; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; min-width: 0; padding: 2px 0; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tao-circle-wrap { display: flex; align-items: center; flex-shrink: 0; }
.tao-circle { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c9cdd6; background: #f2f3f6; color: #9aa0ad; font-size: 11px; font-weight: 700; padding: 0; flex-shrink: 0; }
.tao-circle.seen { background: #fff; border-color: #111; color: #111; }
.tao-circle.answered { background: #111; border-color: #111; color: #fff; }
.tao-circle.current { border-color: #2f6fd6; box-shadow: 0 0 0 2px rgba(47,111,214,.3); }
.tao-cur-arrow { display: none; }
.tao-arrow { width: 27px; height: 27px; border-radius: 50%; border: 1.5px solid #c9cdd6; background: #fff; font-size: 13px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.tao-arrow.next { background: #2f6fd6; border-color: #2f6fd6; color: #fff; }
.tao-arrow:disabled { opacity: .4; }
.tao-ov-btn { border: 1.5px solid #111; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; flex-shrink: 0; white-space: nowrap; }
.tao-finish { background: #d0021b; color: #fff; border: none; border-radius: 999px; font-weight: 800; font-size: 12px; padding: 6px 16px; flex-shrink: 0; white-space: nowrap; }
/* the OVERVIEW button carries two labels: the full one for desktop and a compact
"current/total number" one for the mobile single-row nav bar */
.ov-mini { display: none; }
.tao-ov-btn .ov-full { display: inline; }
/* on mobile the nav controls (prev / number / next) are relocated into the top bar */
.tao-nav-ctrls { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* answer tools popover: checkbox on the left, description spread across the row */
.answer-tools { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.at-row { display: flex; align-items: center; gap: 12px; text-align: left; border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 13.5px; line-height: 1.4; color: var(--navy); cursor: pointer; }
.at-row:hover { border-color: var(--lavender); }
.at-row span { flex: 1; }
.at-row b { color: var(--blue); display: block; margin-bottom: 1px; }
/* the generic ".modal input" rule turns these checkboxes into 230px-wide blocks
(which squished the text into a tiny column) - reset them back to real boxes */
.answer-tools input[type=checkbox] { width: 20px; height: 20px; min-width: 20px; margin: 0; padding: 0; border: none; border-radius: 0; display: inline-block; flex-shrink: 0; }
.tao-overview { border-bottom: 1px solid #d9dce3; background: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.tao-ov-head { background: #111; color: #fff; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .05em; padding: 7px; }
.tao-ov-tabs { display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid #eee; }
.tao-ov-tabs button { background: none; border: none; font-size: 12.5px; font-weight: 700; color: #777; padding: 6px 10px; border-bottom: 2px solid transparent; }
.tao-ov-tabs button.on { color: #111; border-bottom-color: #111; }
.tao-ov-section { font-size: 12px; font-weight: 700; color: #555; padding: 8px 16px 2px; text-decoration: underline; }
.tao-ov-circles { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 16px 12px; }
.tao-main { flex: 1; overflow-y: auto; padding: 20px 26px 80px; display: flex; flex-direction: column; }
.tao-card { max-width: 860px; margin: 0 auto; font-size: 15px; line-height: 1.65; color: #222; }
.tao-card h2 { color: #111; }
.tao-sub { color: #666; font-size: 13px; }
.tao-welcome ul { margin: 12px 0; }
.tao-q-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tao-qnum { font-weight: 700; color: #111; font-size: 15px; }
.tao-bm { width: 34px; height: 34px; border: 1px solid #d9dce3; border-radius: 8px; background: #fff; font-size: 15px; color: #999; }
.tao-bm.on { color: #e8b021; border-color: #e8b021; }
.tao-qtext { margin-bottom: 14px; }
.tao-options { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.tao-card.abstract { max-width: clamp(860px, 58vw, 1530px); }
.tao-card .q-image.abstract { max-width: 100%; margin: 14px auto; }
.tao-options.abstract { max-width: 100%; }
.tao-card.numerical { max-width: clamp(860px, 72vw, 1600px); }
.tao-main.fit { padding-bottom: 24px; }
.tao-card.fit { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }
.tao-card.fit > * { flex-shrink: 0; }
.tao-card.fit .q-image { flex: 0 1 auto; min-height: 200px; margin: 10px 0; text-align: center; }
.tao-card.fit .q-image img { max-width: 100%; max-height: 100%; }
.tao-card.fit .tao-options { max-width: 100%; margin-top: 14px; }
.tao-card.fit .tao-option { padding: 7px 12px; }
.tao-option { position: relative; display: flex; gap: 10px; align-items: flex-start; border: 1px solid #d9dce3; border-radius: 6px; padding: 10px 12px; cursor: pointer; font-size: 14.5px; }
.tao-option:hover { border-color: #2f6fd6; }
.tao-option .tao-radio { width: 16px; height: 16px; min-width: 16px; border: 2px solid #999; border-radius: 50%; margin-top: 2px; position: relative; }
.tao-option.sel { border-color: #2f6fd6; background: #eef4fd; }
.tao-option.sel .tao-radio { border-color: #2f6fd6; }
.tao-option.sel .tao-radio::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #2f6fd6; }
.tao-option.struck .tao-opt-text { text-decoration: line-through; color: #aaa; }
.tao-strike { margin-left: auto; background: none; border: none; color: #c33; font-size: 16px; padding: 0 4px; }
.tao-mask { position: absolute; inset: 0; background: #e8eaef; border-radius: 6px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.tao-eye { background: #fff; border: 1px solid #c9cdd6; border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 700; }
.tao-footer { position: fixed; bottom: 18px; right: 22px; }
/* the footer arrow is the primary "proceed" button on the welcome/instructions
pages, so keep it large and tappable (the small nav arrows live in the bar) */
.tao-footer .tao-arrow { width: 52px; height: 52px; font-size: 22px; }
.tao-hl { border-radius: 2px; }
.tao-hl-panel { display: flex; gap: 8px; align-items: center; padding: 8px 16px; border-bottom: 1px solid #d9dce3; font-size: 11px; letter-spacing: .06em; color: #555; }
.tao-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #c9cdd6; }
.tao-swatch[data-on="1"], .tao-swatch.on { box-shadow: 0 0 0 2px #2f6fd6; }
.tao-eraser { background: #fff; color: #555; display: inline-flex; align-items: center; justify-content: center; }
.tao-hl-clear { background: none; border: none; color: #2f6fd6; font-weight: 700; font-size: 12px; }
.tao-lr { position: fixed; inset: 0; z-index: 38; pointer-events: none; }
.tao-lr-shade { position: absolute; left: 0; right: 0; background: rgba(120,124,138,.55); }
.tao-lr-strip { position: absolute; left: 0; right: 0; border-top: 2px solid #555; border-bottom: 2px solid #555; }
.tao-lr-size, .tao-lr-move { pointer-events: auto; position: absolute; background: #333; color: #fff; border: none; border-radius: 4px; font-size: 12px; padding: 2px 6px; }
.tao-lr-size { left: 8px; top: 50%; transform: translateY(-50%); }
.tao-lr-move { left: 50%; top: 50%; transform: translate(-50%,-50%); cursor: ns-resize; }
.tao-docs { position: fixed; top: 90px; right: 0; bottom: 0; width: 380px; max-width: 92vw; background: #fff; border-left: 1px solid #d9dce3; box-shadow: -8px 0 24px rgba(0,0,0,.12); z-index: 40; display: flex; flex-direction: column; }
.tao-docs-head { background: #111; color: #fff; font-size: 12px; font-weight: 800; padding: 8px 14px; display: flex; justify-content: space-between; }
.tao-docs-head button { background: none; border: none; color: #fff; }
.tao-docs-file { border-bottom: 1px solid #eee; padding: 8px 14px; font-size: 12.5px; color: #2f6fd6; font-weight: 700; }
.tao-docs-body { flex: 1; overflow-y: auto; padding: 14px 18px; font-size: 13.5px; line-height: 1.6; }
.tao-calc { position: fixed; top: 120px; left: 70px; width: 280px; background: #fff; border: 1px solid #c9cdd6; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.25); z-index: 45; resize: both; overflow: hidden; min-width: 220px; min-height: 300px; display: flex; flex-direction: column; user-select: none; }
.tao-calc-head { background: #1e2430; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-align: center; padding: 8px 12px; cursor: move; display: flex; justify-content: space-between; }
.tao-calc-head span { cursor: pointer; width: 16px; }
.tao-calc-display { background: #1e2430; color: #fff; text-align: right; font-size: 22px; padding: 10px 14px 14px; word-break: break-all; }
.tao-calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #e3e6ee; flex: 1; }
.tao-calc-grid button { border: none; background: #f7f8fb; font-size: 16px; font-weight: 600; padding: 14px 0; }
.tao-calc-grid button.op { background: #e9eef8; color: #2f6fd6; }
.tao-calc-grid button.eq { background: #2f6fd6; color: #fff; }
.ui-select { border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--navy); margin-left: 8px; }
/* the "Interface" picker is irrelevant on a phone (layout is forced), so it is
replaced by a greyed-out "Mobile" chip - hidden on desktop, shown on mobile */
.ui-row-mobile { display: none; }
.ui-mobile { color: var(--gray-text); opacity: .6; background: #f4f6fd; cursor: default; }
.tao-scratch { position: fixed; top: 100px; left: 90px; background: #fff; border: 1px solid #c9cdd6; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.3); z-index: 46; overflow: hidden; display: flex; flex-direction: column; resize: both; min-width: 380px; min-height: 240px; }
.tao-scratch-head { background: #1e2430; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .05em; padding: 7px 12px; cursor: move; display: flex; justify-content: space-between; align-items: center; }
.tao-scratch-head button { background: none; border: none; color: #fff; font-size: 14px; padding: 0 4px; }
.tao-scratch-body { display: flex; position: relative; flex: 1; min-height: 0; }
.ts-canvas-wrap { flex: 1; position: relative; min-width: 0; }
.ts-text-input { position: absolute; width: 60px; padding: 0 2px; font: 15px/19px Nunito, sans-serif; color: #111; background: rgba(255,255,255,.85); border: 1px dashed #8a93a6; border-radius: 2px; outline: none; resize: none; overflow: hidden; z-index: 2; }
.ts-cev { position: absolute; right: 1px; bottom: 0; font-size: 8px; font-style: normal; opacity: .65; }
.ts-flyout { position: absolute; left: 39px; z-index: 3; display: flex; background: #fff; border: 1px solid #c9cdd6; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.2); overflow: hidden; }
.ts-flyout button { width: 34px; height: 34px; border: none; background: #fff; font-size: 15px; color: #333; }
.ts-flyout button.on { background: #e7eef9; color: #2f6fd6; }
.ts-rail { display: flex; flex-direction: column; border-right: 1px solid #e3e6ee; }
.ts-rail button { position: relative; width: 38px; height: 38px; border: none; border-bottom: 1px solid #e3e6ee; background: #fff; font-size: 15px; color: #333; }
.ts-rail button.on { background: #1b6fd0; color: #fff; }
#ts-canvas { position: absolute; inset: 0; background: #fff; display: block; }
/* ============ modals ============ */
.overlay { position: fixed; inset: 0; background: rgba(28, 41, 81, .45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 12px; padding: 28px 34px; max-width: 480px; width: 92%; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.modal h3 { color: var(--navy); font-size: 18px; margin: 0 0 10px; }
.modal p { color: var(--blue); font-size: 13.5px; margin: 6px 0; }
.modal .warn { background: var(--orange); color: #fff; font-weight: 800; font-size: 13px; border-radius: 8px; padding: 10px 14px; margin: 14px 0; }
.modal .stack { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.modal input { border: 1.5px solid var(--lavender); border-radius: 8px; padding: 10px 14px; font-size: 15px; text-align: center; font-family: inherit; width: 230px; margin: 8px auto; display: block; }
.modal .clock { color: var(--navy); font-weight: 800; font-size: 15px; margin: 10px 0; }
.modal .login-error { min-height: 0; margin-top: 8px; }
/* legend popup */
.legend { position: absolute; top: 60px; left: 70px; background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.25); padding: 18px 22px; z-index: 40; }
.legend h4 { color: var(--blue); margin: 0 0 12px; font-size: 15px; }
.legend div { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 8px 0; }
.legend .chip { width: 34px; height: 11px; border-radius: 999px; }
/* ============ home screen ============ */
.home { max-width: 1140px; width: 100%; margin: 0 auto; padding: 24px 24px 60px; }
.home h1 { color: var(--blue); font-size: 24px; margin: 6px 0 4px; }
.home .subtitle { color: var(--gray-text); margin-top: 0; }
.section-h { color: var(--navy); font-size: 15px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .05em; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 18px; box-shadow: 0 1px 3px rgba(28,41,81,.05); }
.stat-val { color: var(--blue); font-size: 26px; font-weight: 800; line-height: 1.2; }
.stat-lbl { color: var(--gray-text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
/* Per-category scores: one full-width card under the stats row, five columns. */
.cat-card { margin-bottom: 20px; padding: 4px 0; }
.cat-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.cat-stat { padding: 10px 18px; text-align: center; border-left: 1px solid var(--border); }
.cat-stat:first-child { border-left: 0; }
.cat-val { color: var(--blue); font-size: 22px; font-weight: 800; line-height: 1.2; }
.cat-lbl { color: var(--gray-text); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.cat-sub { color: var(--gray-text); font-size: 11px; opacity: .7; margin-top: 1px; }
.home-grid { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 20px; align-items: start; }
.col-side, .col-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel { border: 1.5px solid var(--border); border-radius: 14px; padding: 18px 20px; background: #fff; box-shadow: 0 1px 3px rgba(28,41,81,.05); }
.panel code { background: var(--blue-light); border-radius: 5px; padding: 1px 6px; font-size: 12px; color: var(--blue); }
.import-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.part-config { display: flex; align-items: center; gap: 16px; border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 16px; margin: 0 0 10px; background: #fbfcff; transition: border-color .15s, opacity .15s; }
.part-config:hover { border-color: var(--lavender); }
.part-config.off { opacity: .45; }
.part-config label.name { flex: 1; display: flex; gap: 12px; align-items: center; cursor: pointer; min-width: 0; }
.part-config .name-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.part-config .cat-name { font-weight: 800; color: var(--navy); font-size: 15px; }
.avail { color: var(--gray-text); font-weight: 400; font-size: 12.5px; }
.num-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--gray-text); text-transform: uppercase; letter-spacing: .04em; }
.num-field input { width: 76px; padding: 8px; border: 1.5px solid var(--border); border-radius: 9px; font-family: inherit; font-size: 14px; font-weight: 700; text-align: center; color: var(--navy); }
.num-field input:focus { outline: none; border-color: var(--blue-bright); }
.source-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; border-bottom: 1px solid var(--blue-light); }
.source-row:last-child { border-bottom: none; }
.src-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.source-row .src-label { font-weight: 700; color: var(--navy); font-size: 13.5px; line-height: 1.35; }
.src-group-label { color: var(--gray-text); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; border-top: 1.5px solid var(--border); padding-top: 12px; margin-top: 8px; }
.opt-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; cursor: pointer; }
.start-btn { background: var(--blue-bright); color: #fff; border: none; border-radius: 999px; padding: 14px 44px; font-size: 16px; font-weight: 800; width: 100%; box-shadow: 0 4px 14px rgba(30,73,226,.3); margin-top: 6px; }
.start-btn:hover { background: var(--blue); }
.history { overflow-x: auto; }
.history h2 { color: var(--navy); }
.history table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.history th { text-align: left; color: var(--gray-text); font-weight: 700; padding: 8px; border-bottom: 1.5px solid var(--border); }
.history td { padding: 8px; border-bottom: 1px solid var(--border); }
.history td:first-child { white-space: nowrap; }
.history .per-cell { white-space: nowrap; }
.history .per-line { display: block; }
.history .cmt-cell { max-width: 220px; }
.history .cmt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--gray-text); font-size: 12.5px; line-height: 1.45; }
.history tr.clickable { cursor: pointer; }
.history tr.clickable:hover { background: var(--blue-light); }
.hist-filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.hist-filters label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--gray-text); text-transform: uppercase; letter-spacing: .05em; }
.hist-filters select { border: 1.5px solid var(--border); border-radius: 9px; padding: 7px 10px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--navy); background: #fff; max-width: 260px; text-transform: none; letter-spacing: 0; }
.hist-filters select:focus { outline: none; border-color: var(--blue-bright); }
.hist-count { margin-left: auto; font-size: 12.5px; color: var(--gray-text); }
.new-user { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.new-user input { border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 14px; font-family: inherit; font-size: 14px; }
/* ============ login ============ */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--blue-light); padding: 16px; }
.login-card { background: #fff; border-radius: 16px; padding: 40px 48px; box-shadow: 0 10px 40px rgba(28,41,81,.15); text-align: center; width: 360px; max-width: 100%; }
.login-logo { width: 58px; height: 58px; border-radius: 14px; background: var(--navy); color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.login-card h1 { color: var(--blue); font-size: 21px; margin: 0 0 4px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.login-card input { border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 14px; font-family: inherit; font-size: 14px; }
.login-card input:focus { outline: none; border-color: var(--blue-bright); }
.login-error { color: var(--pink-red); font-size: 13px; font-weight: 700; min-height: 16px; }
.login-msg { color: var(--green); font-size: 13px; font-weight: 700; }
/* ============ results ============ */
.results { max-width: 980px; width: 100%; margin: 0 auto; padding: 30px 24px 80px; }
.results h1 { color: var(--blue); }
.review-q, .score-card { background: #fff; }
.score-cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0 30px; }
.score-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 16px 22px; min-width: 150px; flex: 1; }
.score-card .cat { font-weight: 800; color: var(--navy); font-size: 13px; }
.score-card .val { font-size: 26px; font-weight: 800; color: var(--blue); margin-top: 4px; }
.score-card .pct { color: var(--gray-text); font-size: 12.5px; }
.review-q { border: 1.5px solid var(--border); border-radius: 12px; padding: 18px 22px; margin: 14px 0; }
.review-q.wrong { border-color: #f3c2cd; }
.review-q .rq-head { display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: 13px; margin-bottom: 10px; flex-wrap: wrap; }
.review-q .badge { border-radius: 999px; padding: 3px 12px; font-size: 11.5px; color: #fff; }
.badge.ok { background: var(--green); }
.badge.ko { background: var(--pink-red); }
.badge.skip { background: #9aa0ad; }
.review-q .rq-title { color: var(--gray-text); font-weight: 400; font-size: 12px; }
.rq-flag-btn { margin-left: auto; background: #fff; border: 1.5px solid var(--border);
border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 700;
color: var(--gray-text); cursor: pointer; }
.rq-flag-btn:hover { border-color: var(--orange); color: var(--orange); }
.rq-flag-btn.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.ed-flags { background: #fff7ec; border: 1.5px solid #f2c98a; border-radius: 10px;
padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: #8a5a12; }
.ed-flags ul { margin: 6px 0 10px; padding-left: 20px; font-weight: 400; }
/* square corners + a little inset: abstract diagrams draw right up to their
own edge, and a radius on the ![]()
clips those corners off */
.review-q .q-image img { max-height: 280px; border-radius: 0; padding: 3px; }
/* abstract review: the hotspot overlay is sized off the wrapper, so the
wrapper - not just the ![]()
- has to carry the size cap, or the coloured
boxes drift away from the diagram */
.review-q .q-image.abstract { width: auto; margin: 12px 0; border: none; background: none; }
.review-q .q-image.abstract .abs-rot { display: inline-block; position: relative;
width: auto; max-width: 100%; transform: none; }
.review-q .q-image.abstract .abs-rot img { max-height: 280px; width: auto; padding: 0; }
.review-opt { border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 14px; margin: 6px 0; font-size: 13.5px; line-height: 1.5; }
.review-opt.correct { border-color: var(--green); background: #ecfbf5; }
.review-opt.chosen-wrong { border-color: var(--pink-red); background: #fdeef1; }
.review-opt .opt-expl { color: var(--gray-text); font-size: 12.5px; margin-top: 4px; }
.explanation { background: var(--blue-light); border-radius: 8px; padding: 12px 16px; font-size: 13.5px; line-height: 1.6; margin-top: 10px; }
.explanation .lbl { font-weight: 800; color: var(--blue); }
.filter-row { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
/* ============ templates / competition scoring ============ */
.tmpl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tmpl-row select { border: 1.5px solid var(--border); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--navy); background: #fff; max-width: 100%; }
.tmpl-row select:focus { outline: none; border-color: var(--blue-bright); }
.comp-panel { margin: 0 0 26px; }
.comp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.comp-table th { text-align: left; color: var(--gray-text); font-weight: 700; padding: 7px 8px; border-bottom: 1.5px solid var(--border); }
.comp-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.comp-table tr.dim td { color: var(--gray-text); font-style: italic; }
.comp-total { margin-top: 12px; font-size: 16px; color: var(--navy); }
.comp-total b { color: var(--blue); font-size: 19px; }
.comp-warn { margin-top: 10px; background: #fdeef1; color: #b3173a; border: 1.5px solid #f3c2cd; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 700; }
.comp-pass { margin-top: 10px; background: #ecfbf5; color: #177a52; border: 1.5px solid #b8e8d3; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 700; }
/* ============ question editor (admin) ============ */
.q-search-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.q-search-row input, .q-search-row select { border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 12px; font-family: inherit; font-size: 13.5px; }
.q-search-row input:first-child { flex: 1; min-width: 200px; }
.q-search-row input:focus, .q-search-row select:focus { outline: none; border-color: var(--blue-bright); }
.qs-pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 12px; font-size: 13px; color: var(--gray-text); }
.qs-row td { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal:has(.editor) { max-width: 780px; text-align: left; max-height: 92vh; overflow-y: auto; }
.editor h3 { margin-top: 0; }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 10px; }
.ed-grid label, .ed-block { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--gray-text); }
.ed-block { margin: 12px 0; }
.editor input:not([type=checkbox]):not([type=radio]), .editor select, .editor textarea { border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13.5px; font-weight: 400; color: #2c2f38; width: 100%; margin: 0; text-align: left; }
.editor .opt-row input[type=checkbox] { width: 16px; height: 16px; min-width: 16px; margin: 0; accent-color: var(--blue-bright); }
.editor textarea { resize: vertical; }
.editor input:focus, .editor select:focus, .editor textarea:focus { outline: none; border-color: var(--blue-bright); }
#ed-img-preview img { max-height: 200px; border: 1px solid var(--border); border-radius: 6px; margin: 6px 0; }
.ed-opt { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.ed-opt input[type=radio] { width: 17px; height: 17px; min-width: 17px; margin: 10px 0 0; accent-color: var(--green); }
.ed-opt-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ed-opt-expl { font-size: 12.5px !important; color: var(--gray-text) !important; }
.ed-opt-del { background: none; border: none; color: var(--pink-red); font-size: 20px; padding: 6px 4px; }
.ed-actions { display: flex; gap: 10px; margin-top: 16px; }
/* live preview of the question as the exam screen will show it */
.ed-preview-block { gap: 8px; align-items: flex-start; }
.ed-preview { width: 100%; background: #f5f7fc; border: 1.5px solid var(--border); border-radius: 10px; padding: 14px 18px; }
.ed-preview .pv-meta { font-size: 11.5px; font-weight: 800; color: var(--gray-text); text-transform: uppercase; letter-spacing: .3px; }
.ed-preview .pv-warn { background: #fdeef1; color: #b3173a; border: 1.5px solid #f3c2cd; border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: 12.5px; font-weight: 700; }
.ed-preview .pv-screen { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 16px 16px; margin-top: 10px; }
.ed-preview .q-header { margin: 10px 0 12px; }
.ed-preview .q-text, .ed-preview .options { max-width: 100%; }
.ed-preview .options { margin-top: 14px; }
.ed-preview .option { cursor: default; }
.ed-preview .option:hover { border-color: var(--border); }
.ed-preview .q-image.abstract, .ed-preview .options.abstract { width: 100%; margin: 12px 0; }
.ed-preview .q-image.abstract img, .ed-preview .q-image.abstract .abs-rot { transform: none; }
.ed-preview .pv-opt-body { flex: 1; }
.ed-preview .pv-empty { color: var(--pink-red); font-weight: 700; }
.ed-preview .pv-expl { color: var(--gray-text); font-size: 12.5px; margin-top: 4px; }
.ed-preview .option.pv-correct { border-color: var(--green); background: #ecfbf5; }
.ed-preview .option.pv-correct .radio { border-color: var(--green); }
.ed-preview .option.pv-correct .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--green); }
.ed-preview .pv-key { background: var(--green); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px; text-transform: uppercase; }
/* ============ exam lockdown ============ */
body.exam-lock { user-select: none; -webkit-user-select: none; }
body.exam-lock textarea, body.exam-lock input, body.exam-lock .tao-qtext { user-select: text; -webkit-user-select: text; }
/* ============ page shell (scrolls at the viewport edge) ============ */
.page { flex: 1; overflow-y: auto; display: flex; flex-direction: column; background: #f5f7fc; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--navy); color: #fff; padding: 12px 26px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.brand-logo { background: rgba(255,255,255,.12); border-radius: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 21px; }
.user-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: #c6cff2; }
.hdr-btn { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 700; }
.hdr-btn:hover { background: rgba(255,255,255,.22); }
/* ============ media panel: tile + embedded PDF viewer (TestWe style) ============ */
.media-total { font-weight: 400; font-size: 11px; }
.media-tile { margin: 14px auto; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; padding: 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.media-tile:hover { border-color: var(--blue-bright); }
.pdf-icon { position: relative; font-size: 42px; color: var(--blue); line-height: 1; }
.pdf-tag { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #fff; font-size: 8.5px; font-weight: 800; padding: 1px 4px; border-radius: 3px; }
.media-name { font-size: 11px; color: var(--gray-text); }
.media-back { display: block; margin: 8px 10px 6px; background: var(--blue-bright); color: #fff; border: none; border-radius: 999px; padding: 6px 14px; font-size: 11.5px; font-weight: 800; }
.media-card { background: #fff; border: 1.5px solid var(--lavender-bg); border-radius: 10px; margin: 0 10px 10px; display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
.media-panel #media-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.media-card.enlarged { position: fixed; inset: 6vh 14vw; z-index: 60; margin: 0; box-shadow: 0 18px 60px rgba(28,41,81,.4); }
.media-card-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 12px; color: var(--blue); font-weight: 800; font-size: 15px; border-bottom: 1px solid var(--border); }
.media-expand { position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-bright); color: #fff; border: none; font-size: 14px; }
.media-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: #f4f6fd; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--gray-text); }
.mt-penicon { color: var(--blue); font-size: 15px; }
.mt-center { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.mt-chev { color: #b8bcc8; font-size: 16px; }
.mt-zoom { background: none; border: none; color: var(--blue); font-size: 12px; padding: 0 3px; }
.media-inner { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.media-comments { width: 45%; background: var(--lavender-bg); overflow-y: auto; flex-shrink: 0; padding: 6px; }
.mc-head { color: var(--blue); font-weight: 800; font-size: 11.5px; padding: 4px 6px; display: flex; justify-content: space-between; align-items: center; }
.mc-trash { background: none; border: none; color: var(--blue); font-size: 13px; padding: 0 2px; }
.mc-note { background: rgba(255,255,255,.55); border-radius: 6px; padding: 6px 8px; margin: 5px 2px; font-size: 11px; position: relative; }
.mc-actions { display: flex; gap: 6px; justify-content: flex-end; }
.mc-edit { background: none; border: none; color: var(--green); font-size: 13px; padding: 0; }
.mc-del { background: none; border: none; color: var(--pink-red); font-size: 12px; padding: 0; }
.mc-word { color: var(--blue); font-weight: 800; margin-top: 2px; }
.mc-text { color: #3c4048; white-space: pre-wrap; margin-top: 2px; }
.mc-page { text-align: right; color: var(--gray-text); font-size: 10px; margin-top: 4px; }
.media-pagearea { flex: 1; overflow-y: auto; position: relative; background: #eceef4; padding: 10px; }
.pdf-page { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.18); padding: 26px 18px; font-size: 11.5px; line-height: 1.7; min-height: 95%; cursor: text; user-select: text; -webkit-user-select: text; }
.pdf-page h4 { text-align: center; margin: 10px 0 6px; font-size: 1.05em; }
.pdf-hl { background: #ffe95c; position: relative; }
.pdf-pen { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); background: var(--blue-bright); color: #fff; border: none; border-radius: 6px; width: 26px; height: 24px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 5; }
.pdf-notebox { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: 82%; max-width: 240px; background: #fff; border: 1px solid #d5d8e2; border-radius: 8px; padding: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.3); z-index: 6; }
.pdf-notebox textarea { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 7px; font-family: inherit; font-size: 12.5px; resize: vertical; }
.pdf-notebox .nb-ok { display: block; width: 100%; margin-top: 7px; background: var(--blue-bright); color: #fff; border: none; border-radius: 999px; padding: 7px 0; font-weight: 800; font-size: 12.5px; }
/* ============ compare / shared history ============ */
.other-user td { color: #4a5060; }
.clone-tag { color: var(--lavender); font-size: 11px; font-weight: 800; }
.try-tag { background: var(--lavender-bg); color: var(--navy); font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 7px; white-space: nowrap; margin-left: 2px; }
.custom-tag { color: var(--gray-text); font-size: 11px; font-weight: 700; font-style: italic; }
/* personal note under the results title */
.exam-comment { margin: 0 0 14px; }
.exam-comment .ec-view { display: flex; gap: 8px; align-items: flex-start; background: #fff7ec; border: 1.5px solid #f2c98a; border-radius: 9px; padding: 9px 13px; font-size: 13.5px; line-height: 1.55; color: #8a5a12; }
.exam-comment .ec-text { flex: 1; white-space: pre-wrap; word-break: break-word; }
.exam-comment .ec-edit { background: none; border: none; color: #8a5a12; font-size: 12px; font-weight: 700; text-decoration: underline; padding: 0; cursor: pointer; }
.exam-comment .ec-add { background: none; border: none; color: var(--gray-text); font-size: 12.5px; font-weight: 700; padding: 0; cursor: pointer; }
.exam-comment .ec-add:hover { color: var(--blue-bright); }
.exam-comment textarea { width: 100%; max-width: 640px; border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 12px; font-family: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.exam-comment textarea:focus { outline: none; border-color: var(--blue-bright); }
.exam-comment .ec-actions { display: flex; gap: 8px; margin-top: 6px; }
.me-card { border-color: var(--blue-bright); }
.best-cell { background: #ecfbf5; font-weight: 800; color: var(--green); border-radius: 6px; }
.h2h-row { border-bottom: 1px solid var(--border); padding: 10px 2px; font-size: 13.5px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.h2h-row:last-child { border-bottom: none; }
.h2h-title { font-weight: 800; color: var(--navy); min-width: 140px; }
.h2h-entry { padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--border); }
.h2h-win { border-color: var(--green); background: #ecfbf5; }
/* ============ mobile ============ */
@media (max-width: 900px) {
.home-grid { grid-template-columns: 1fr; gap: 16px; }
.stats-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* five across is too narrow on a phone: wrap to a 3+2 grid and drop the
dividers, which no longer line up once the row wraps. */
.cat-row { grid-template-columns: repeat(3, 1fr); }
.cat-stat { border-left: 0; padding: 8px 6px; }
.cat-val { font-size: 19px; }
}
/* Mobile = phone in any orientation. Portrait phones match the width test;
landscape phones (wider than 700px but with a coarse pointer and a short
viewport) match the second condition, so rotating no longer flips to the
desktop layout. Keep this identical to isMobile() in app.js. */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
.home { padding: 14px 12px 44px; }
/* home: the TestWe/TAO interface picker is replaced by a greyed "Mobile" chip */
.ui-row { display: none; }
.ui-row-mobile { display: flex; }
/* overview dropdown (tapping the question-number button): bigger tap targets */
.tao-ov-circles { gap: 8px; padding: 10px 14px 16px; }
.tao-ov-circles .tao-circle { width: 40px; height: 40px; font-size: 15px; }
.home h1 { font-size: 22px; }
.app-header { padding: 10px 14px; }
.stat-val { font-size: 21px; }
.panel { padding: 14px 14px; }
.part-config { flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; }
.part-config label.name { flex-basis: 100%; }
.num-field { flex-direction: row; align-items: center; gap: 8px; }
.num-field input { width: 70px; }
.login-card { padding: 30px 24px; }
.results { padding: 18px 12px 60px; }
.review-q { padding: 14px 14px; }
/* exam view */
.topbar-left { gap: 8px; padding: 0 10px; }
.logo { width: 44px; font-size: 22px; }
.calc-btn { margin: 0 4px; }
.tab { min-width: 118px; padding: 8px 8px 4px; }
.tab .tab-title { max-width: 140px; }
.exam-main { padding: 16px 16px 90px; }
.main-timer { top: 14px; right: 16px; }
.part-heading { font-size: 17px; max-width: calc(100% - 90px); }
/* question nav: one horizontally scrollable line instead of wrapping into
several rows that eat half the screen */
.segments { padding: 8px 12px; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.seg { width: 30px; flex-shrink: 0; }
.seg.current { width: 38px; }
/* TAO nav on mobile: the whole nav is merged into the top bar (see below), so
the separate nav bar / circle row is gone. Controls become a blue back
button, the current question number that opens the overview, blue forward. */
.tao-nav { display: none; }
.tao-arrow { background: #2f6fd6; border-color: #2f6fd6; color: #fff; width: 32px; height: 32px; font-size: 15px; }
.tao-arrow:disabled { background: #2f6fd6; }
.tao-ov-btn { border-color: #2f6fd6; color: #2f6fd6; font-size: 13.5px; font-weight: 800; padding: 6px 9px; }
.tao-ov-btn .ov-full { display: none; }
.tao-ov-btn .ov-mini { display: inline; white-space: nowrap; }
.tao-nav-ctrls { gap: 6px; }
/* TAO top bar on mobile = the ONE bar for the whole layout: logo and breadcrumb
dropped, timer + e-tools packed to the left, and the nav controls (prev /
question number / next) pushed to the right. The real exam is desktop-only,
so this compact single bar exists purely for phone practice. */
/* Tools on the left, navigation on the right - the timer lives next to the
question number instead, so nothing needs the middle of the bar and the
camera cutout can sit there harmlessly.
The bar still starts at the very top of the screen (viewport-fit=cover)
and grows just enough for its bottom border to clear the cutout, so the
hole never pokes into the question area. The side padding keeps the
outermost icons off the rounded corners, which clip anything flush to the
edge - in landscape the cutout moves to a SIDE, so that same padding has
to grow by the left/right insets. */
/* flex-wrap from the desktop rule must be cancelled, or the groups wrap onto
separate lines on a narrow screen and bunch up in the middle of the bar.
The extra height is only needed in PORTRAIT, where the camera cutout is on
the top edge and the bar has to reach past it; in landscape the cutout is
on a side, so the bar can be as short as its icons. */
.tao-top { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
box-sizing: border-box;
padding: 5px calc(14px + var(--side-inset))
5px calc(14px + var(--side-inset)); }
@media (orientation: portrait) { .tao-top { min-height: 60px; } }
@media (orientation: landscape) { .tao-top { min-height: 0; padding-top: 4px; padding-bottom: 4px; } }
/* while the shell is counter-rotated the screen reports landscape, but the
user is looking at a portrait layout - so restore the portrait bar */
body.abs-lock .tao-top { min-height: 60px; padding-top: 5px; padding-bottom: 5px; }
.tao-footer, .footer-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.tao-logo { display: none; }
.tao-crumb { display: none; }
/* pin each group to a fixed column, so the layout is the same on every page
- including the instructions/welcome screens where the timer is the only
item in the bar (otherwise it would auto-place into the tools column). */
/* tools, then timer, then the nav pushed to the far end by margin-left:auto.
Order is fixed by `order`, so it is the same on every screen - including
the instruction pages where the timer is the only item in the bar.
The rotated abstract shell is only ~283px wide, so the timer is allowed to
shrink and ellipsise rather than pushing the navigation off the edge. */
.tao-tools { order: 1; flex: 0 0 auto; gap: 4px; min-width: 0; }
.tao-timer-wrap { order: 2; flex: 0 1 auto; min-width: 0; margin: 0 0 0 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tao-nav-ctrls { order: 3; flex: 0 0 auto; margin-left: auto; display: flex; }
/* the question number is already in the top bar ("1/20") and the flag has
moved up beside the navigation, so the whole heading row is gone */
.tao-q-head { display: none; }
/* same footprint as the pencil / gear tools next to it */
.tao-nav-ctrls .tao-bm { width: 28px; height: 28px; font-size: 14px; flex: 0 0 auto;
border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
/* Numerical answers are short ("1.9%"), so full-width boxes waste the space
the chart could use. Only worth doing in landscape, where the chart sits
beside them - in portrait the chart is above and full-width rows are fine. */
@media (orientation: landscape) {
.tao-card.numerical .tao-options { width: fit-content; max-width: 100%; min-width: 130px; }
}
.tao-timer { font-size: 12.5px; }
.tao-tool { width: 28px; height: 28px; font-size: 14px; }
.tao-tool .calc-ico { width: 16px; height: 16px; }
/* tighter modals on phones; the answer-tools popover in particular is compact */
.modal { padding: 20px 18px; }
.modal h3 { font-size: 16px; }
.modal:has(.answer-tools) { max-width: 360px; }
.exam-body { flex-direction: column; }
.media-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 320px; }
.media-tile { margin: 8px auto; padding: 8px 18px; }
.pdf-icon { font-size: 30px; }
.media-card.enlarged { inset: 2vh 2vw; }
.q-image img { max-height: 260px; }
/* Content clears the rounded corners, and in landscape the side cutout too.
Both sides get the SAME inset - the larger of the two - so the content
stays centred and, more importantly, does not jump sideways when the phone
is tilted the other way (the cutout swaps from the left edge to the right). */
.tao-main { padding-left: calc(12px + var(--side-inset));
padding-right: calc(12px + var(--side-inset)); }
.tao-footer { right: calc(22px + var(--side-inset));
bottom: calc(18px + env(safe-area-inset-bottom)); }
.tao-card.abstract, .tao-card.abstract.fit { display: block; flex: 0 0 auto; }
.tao-card.abstract, .options.abstract, .tao-options.abstract { max-width: 100%; }
/* on a phone the answers should use the full width - the desktop 760px cap
leaves a lopsided gap on the right in landscape */
.tao-card, .tao-options, .tao-qtext { max-width: 100%; }
/* the lettered options are redundant once the boxes themselves are tappable
(exam screens only - the editor preview and review keep their lists) */
.tao-card .tao-options.abstract, .exam-main .options.abstract { display: none; }
/* Numerical questions in landscape: a wide screen is short, so stacking the
chart above the answers leaves both cramped. Put the answers in a column
on the left and the chart beside them instead - `order` does it without
touching the markup, which keeps the DOM in reading order for everything
else. Not applied to abstract, whose diagram carries its own answers. */
@media (orientation: landscape) {
/* the answers column takes only the width it needs, the chart gets the
rest and sits directly beside it */
/* Both columns size to their content, so the chart sits immediately beside
the answers instead of being centred in a wide leftover column. The
trailing 1fr soaks up any slack on the right. */
.tao-card.numerical.fit { display: grid;
grid-template-columns: max-content max-content minmax(0, 1fr);
grid-auto-rows: min-content; align-items: start; column-gap: 16px; }
.tao-card.numerical.fit .tao-q-head { grid-column: 1 / -1; }
.tao-card.numerical.fit .tao-qtext { grid-column: 1 / -1; }
.tao-card.numerical.fit .tao-options { grid-column: 1; grid-row: 3; margin-top: 0; }
.tao-card.numerical.fit .q-image { grid-column: 2; grid-row: 3; margin: 0;
min-height: 0; text-align: left; }
/* the whole question has to fit one screen: the real bar height + the
card's padding + the question text sitting above the row */
.tao-card.numerical.fit .q-image img {
max-height: calc(100dvh - var(--bar-h, 60px) - 44px - var(--num-qtext, 60px)); }
.tao-card.numerical.fit .tao-options {
max-height: calc(100dvh - var(--bar-h, 60px) - 44px - var(--num-qtext, 60px));
overflow-y: auto; }
}
.footer-nav { padding: 10px 14px; }
.legend { left: 10px; right: 10px; width: auto; }
/* mobile: dock the calculator to the bottom of the screen (~42% tall,
non-draggable) and reserve scroll room so the question + options above
stay reachable - efficient use of the small screen */
.calc, .tao-calc { left: 0; right: 0; bottom: 0; top: auto; width: 100%;
max-width: 100%; height: 42vh; border-radius: 14px 14px 0 0; resize: none;
min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.calc { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
.calc .calc-move { display: none; }
.calc .calc-display { font-size: 20px; padding: 6px 10px; min-height: 24px; flex-shrink: 0; }
.calc .grid5 { flex: 1; gap: 4px; grid-auto-rows: 1fr; }
.tao-calc-head { cursor: default; }
.tao-calc-grid { grid-auto-rows: 1fr; }
.calc button, .tao-calc-grid button { padding: 0; font-size: 16px; }
body.calc-open .exam-main, body.calc-open .tao-main { padding-bottom: 44vh; }
/* mobile scratchpad: a simple typing-only note pad docked at the bottom. When
the calculator is open (it docks to the bottom at 42vh tall) the scratchpad
lifts to sit directly ABOVE it, so the two never overlap. */
.tao-scratch.mobile { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto;
height: 40vh; min-width: 0; min-height: 0; resize: none; }
body.calc-open .tao-scratch.mobile { bottom: calc(42vh + 6px); top: auto; height: 32vh; }
.tao-scratch.mobile .tao-scratch-head { cursor: default; }
.ts-textarea { flex: 1; border: none; outline: none; margin: 0; padding: 12px 14px;
font-family: inherit; font-size: 15px; line-height: 1.5; resize: none;
background: #fff; color: #111; }
/* Landscape phone: the screen is wide but short, so a bottom dock eats the
height the question needs. Dock the tools to the sides instead - the
scratchpad on the left quarter, the calculator on the right quarter, both
full height - and inset the question by the same width so neither panel
ever covers it. Both can be open at once, one on each side. */
@media (orientation: landscape) {
/* the panels start BELOW the top bar: it carries the timer and the prev /
next navigation, which must stay tappable while a tool is open */
:root { --tool-w: 25vw; }
.calc, .tao-calc {
left: auto; right: 0; top: var(--bar-h, 60px); bottom: 0;
width: var(--tool-w); max-width: none; height: auto;
border-radius: 14px 0 0 14px; }
.calc { padding: 6px calc(8px + env(safe-area-inset-right)) 6px 8px; }
/* the lift-above-the-calculator rule no longer applies: the two are on
opposite edges, so the scratchpad keeps the full height */
.tao-scratch.mobile, body.calc-open .tao-scratch.mobile {
left: 0; right: auto; top: var(--bar-h, 60px); bottom: 0;
width: var(--tool-w); height: auto; border-radius: 0 10px 10px 0; }
.ts-textarea { padding-left: calc(14px + env(safe-area-inset-left)); }
body.calc-open .exam-main, body.calc-open .tao-main {
padding-bottom: 24px; padding-right: calc(var(--tool-w) + 12px); }
body.scratch-open .exam-main, body.scratch-open .tao-main {
padding-left: calc(var(--tool-w) + 12px); }
/* The chart sits in a max-content grid track, so it keeps its natural
width and pushes past the padding that reserves room for the panels -
sliding underneath them. Let that track shrink instead, and cap the
image against it. */
body.calc-open .tao-card.numerical.fit,
body.scratch-open .tao-card.numerical.fit {
grid-template-columns: max-content minmax(0, 1fr); }
body.calc-open .tao-card.numerical.fit .q-image img,
body.scratch-open .tao-card.numerical.fit .q-image img { max-width: 100%; }
}
}
/* ============ abstract diagrams on touch screens ============
The diagram is one 2.2:1 landscape strip: the question row on top, the five
lettered answer boxes below. On a touch device it is shown as large as fits
on ONE screen so the whole puzzle is visible without scrolling, and the
answer boxes themselves are the tap targets.
This keys off pointer + shape, NOT the phone breakpoint, so tablets get the
same treatment while keeping the roomier desktop chrome everywhere else.
PORTRAIT: the screen is tall and the strip is wide, so the strip is turned a
quarter turn to fill the screen.
LANDSCAPE: the screen is already the same shape as the strip, so it is shown
upright at full width - which is the largest the diagram can ever be.
Exam screens only: the review page keeps the diagram upright and unrotated
so it reads alongside the answer list. */
@media (pointer: coarse) {
.tao-card .q-image.abstract, .exam-main .q-image.abstract {
position: relative; width: 100%; max-width: none; min-height: 0;
margin: 8px 0; border: none; border-radius: 0; background: none;
overflow: visible; text-align: center; }
.tao-card .q-image.abstract .abs-rot img, .exam-main .q-image.abstract .abs-rot img {
display: block; width: 100%; height: auto; max-width: none; max-height: none;
transform: none; border: none; border-radius: 0; }
/* the lettered A-E list is redundant once the boxes are tappable */
.tao-card .tao-options.abstract, .exam-main .options.abstract { display: none; }
/* already as large as the screen allows, so no tap-to-enlarge */
.tao-card .q-image.abstract, .exam-main .q-image.abstract,
.tao-card .q-image.abstract img, .exam-main .q-image.abstract img { cursor: default; }
}
/* Abstract diagram sizing.
--shell-w / --shell-h are published by applyAbstractLock(): they are the
dimensions of the exam shell, which is NOT the viewport when the shell has
been counter-rotated. Everything is measured against them so the layout is
identical whether the phone is upright or turned.
--abs-chrome = the real bar height + card padding (20 + 24) + the frame's
own 8px top/bottom margin. */
@media (pointer: coarse) {
.tao-card .q-image.abstract, .exam-main .q-image.abstract {
--abs-chrome: calc(var(--bar-h, 60px) + 60px + env(safe-area-inset-bottom));
height: min(var(--shell-w, 100vw) * 2.196,
var(--shell-h, 100dvh) - var(--abs-chrome)); }
.tao-card .q-image.abstract .abs-rot, .exam-main .q-image.abstract .abs-rot {
position: absolute; top: 50%; left: 50%;
width: min(var(--shell-w, 100vw) * 2.196,
var(--shell-h, 100dvh) - var(--abs-chrome));
transform: translate(-50%, -50%) rotate(90deg); transform-origin: center; }
}
/* ---- orientation lock: the shell is counter-rotated over the viewport ----
Sizes and the transform are set inline by applyAbstractLock(), which knows
which way the device was turned. Rotating about the top-left corner and then
sliding by 100% lands the shell exactly over the screen. */
body.abs-lock { overflow: hidden; }
body.abs-lock .tao-shell {
position: fixed; top: 0; left: 0; transform-origin: 0 0; }
/* Insets inside the rotated shell.
The shell is turned a quarter turn, so its horizontal axis runs along the
screen's VERTICAL edges - the top and bottom of the physical screen. Those
carry no camera cutout, so --side-inset must come from the top/bottom insets
only. Taking max() of all four (the previous rule) applied the ~65px side
cutout as padding on an axis where nothing is in the way, eating ~130px of
the bar and collapsing the timer to an unreadable sliver.
max() of top and bottom, not each on its own side, so the bar is symmetrical
and does not shift when the phone is turned the other way. */
body.abs-lock .tao-top, body.abs-lock .tao-main {
--side-inset: max(env(safe-area-inset-top), env(safe-area-inset-bottom)); }