/* TAO Tools — shared styles for practice, simulations & review */ .overflow-x-auto:not(.hidden):has(> svg.question-chart--q883) { display: block; } #sequence-svg svg.question-chart--q883, #q-sequence svg.question-chart--q883, svg.question-chart--q883 { display: block; width: 100%; min-width: 560px; max-width: none !important; height: auto; } .tao-tool-btn { /* ux_audit_2026_05_11 P1-3: toolbar buttons were 26-28px tall — below the 44px mobile minimum tap target. Bumped without changing visual footprint of the active/hover states. */ display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: 8px; border: 1.5px solid transparent; font-size: 14px; color: #4b5563; cursor: pointer; transition: all 0.15s; background: transparent; white-space: nowrap; } .tao-tool-btn:hover { background: #f3f4f6; } .tao-tool-btn.active { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; } /* The same cascade trap as `.floating-panel.hidden` below, one element further out. The Calculator and Notes buttons ship carrying `hidden` and lose it only where the section offers them, but the inline-flex above is one class wide, like Tailwind's `.hidden`, and loads after it — so the buttons were painted in every section, verbal and abstract included. Scoped to this button and not written as a bare `.hidden` rule on purpose: a one-class rule here would also outrank Tailwind's responsive `sm:inline`, which is what puts the button labels back on wide screens. */ .tao-tool-btn.hidden { display: none; } /* Candidate data tables --------------------------------------------------- A wide numerical table has to FIT the phone it is read on. QR542 (2026-10-05, Q1088 — "graph should show completely and not having to slide the table to the right"): the previous rules did not merely risk an overflow, they GUARANTEED one. `min-width: 32rem` on the table plus `min-width: 7.5rem` on every cell gave a six-column bank table a declared floor of 45rem / 720px, inside a content box that is 279px wide on a 375px phone and 224px on a 320px one (main px-4 -> question card p-4 -> passage p-4). No table of any content, in any language, could ever fit that, so every candidate on a phone had to drag the table sideways to read the column the question asks about. The floors are gone and the columns share the width they actually have: `table-layout: auto` with `width: 100%` sizes each column to its content, the narrow-screen block below pays for the fit out of padding and font size rather than out of columns, and `overflow-wrap: anywhere` lets a long header word break so it cannot push a column past the viewport on its own. Every row still carries every column, so a column comparison is still one glance down the table — it is the horizontal drag that is gone, not the columns. `overflow-x` stays on the wrapper as a SAFETY NET and not as the design: after the rules below a bank table's min-content width is inside the narrowest phone, so it does not engage, and if some future table really cannot be met the row is reachable rather than clipped. */ .question-table-wrap { width: 100%; max-width: 100%; min-width: 0; margin: 16px 0; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .question-table-wrap:focus-visible { outline: 2px solid #003399; outline-offset: 2px; } .question-data-table { width: 100%; max-width: 100%; min-width: 0; table-layout: auto; border-collapse: collapse; font-size: 14px; } .question-data-table th, .question-data-table td { min-width: 0; vertical-align: top; overflow-wrap: anywhere; } .question-data-table .question-table-header { padding: 10px 12px; text-align: left; font-size: 12px; line-height: 1.4; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: white; background: #003399; overflow-wrap: anywhere; } .question-data-table .question-table-cell { padding: 10px 12px; color: #374151; text-align: left; line-height: 1.45; overflow-wrap: anywhere; } .question-data-table .question-table-cell--label { color: #111827; font-weight: 500; } .question-data-table .question-table-cell--numeric { color: #374151; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; white-space: nowrap; } .question-data-table .question-table-row { background: #ffffff; border-bottom: 1px solid #f3f4f6; } .question-data-table .question-table-row--alt { background: #f9fafb; } .question-data-table .question-table-row:last-child { border-bottom: 0; } /* The fit is bought from padding, letter-spacing and font size — never from a column. A 320px phone leaves a 224px content box; a six-column table of three-digit figures needs about 224px of min-content width with the values below, which is why the numbers here are what they are. Numeric cells keep `white-space: nowrap` on purpose: a figure written "3 400" with a thin space must not be broken across two lines and read as two figures. */ @media (max-width: 767px) { .question-data-table { font-size: 12px; } .question-data-table .question-table-header { padding: 6px 4px; font-size: 10px; letter-spacing: 0; } .question-data-table .question-table-cell { padding: 6px 4px; font-size: 12px; } .question-data-table .question-table-cell--numeric { padding: 6px 4px; font-size: 11px; } } .elim-x { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #d1d5db; background: white; color: #9ca3af; font-size: 11px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; line-height: 1; } .elim-x:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; } .elim-x.is-eliminated { background: #fef2f2; border-color: #ef4444; color: #ef4444; } .eliminator-on .elim-x { display: flex; } .tao-highlight { padding: 0 1px; border-radius: 2px; } .highlighter-on .tao-highlight { cursor: pointer; } .floating-panel { position: fixed; z-index: 50; background: white; border-radius: 12px; border: 1px solid #d1d5db; box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15); overflow: auto; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); /* §4.2.2.4/§4.2.2.5: both TAO widgets resize in height and width. */ resize: both; min-width: 240px; min-height: 180px; } .tao-panel-anchor { display: none !important; } /* A closed panel must stay closed. Tailwind's `.hidden{display:none}` and this file's `.tao-calculator{display:flex}` are both one class wide, and this file loads second, so the calculator won the cascade and sat open on every screen that includes the partial — verbal included. Two classes always beat one. */ .floating-panel.hidden { display: none; } .floating-panel.is-dragging { user-select: none; } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; gap: 8px; cursor: move; user-select: none; touch-action: none; } .panel-header:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; } .panel-drag-grip { color: #9ca3af; font-size: 15px; font-weight: 700; letter-spacing: -3px; line-height: 1; flex: 0 0 auto; } .panel-title { font-size: 13px; font-weight: 600; color: #374151; } .panel-drag-hint { margin-left: auto; color: #6b7280; font-size: 10px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-header:focus-visible .panel-drag-hint { color: #1d4ed8; } .is-dragging .panel-header { cursor: grabbing; } .panel-close { width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent; color: #9ca3af; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; line-height: 1; } .panel-close:hover { background: #e5e7eb; color: #374151; } /* Calculator — replica of EPSO "Instructions for online Testing (TAO)", March 2026, §4.2.2.5: dark title bar, black display, light-blue digit pad, blue operator column, "=" across two columns. The display is a div and is not selectable, so nothing can be copied out of it. */ .tao-calculator { display: flex; flex-direction: column; } .tao-calculator .panel-header { flex: 0 0 auto; } .tao-calculator .calc-keys { flex: 0 0 auto; } .tao-calculator .panel-header { background: #1a1a1a; border-bottom: none; justify-content: flex-start; position: relative; padding-left: 42px; } .tao-calculator .panel-title { color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .tao-calculator .panel-drag-grip { color: #9ca3af; } .tao-calculator .panel-drag-hint { color: #d1d5db; } .tao-calculator .panel-close { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #d1d5db; } .tao-calculator .panel-close:hover { background: #333333; color: #ffffff; } .calc-display { width: 100%; min-height: 68px; flex: 1 1 auto; padding: 14px 16px; font-family: 'Courier New', monospace; font-size: 26px; text-align: right; border: none; background: #1a1a1a; color: #ffffff; display: flex; align-items: flex-end; justify-content: flex-end; overflow-x: auto; word-break: break-all; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #ffffff; } .calc-btn { padding: 16px 10px; font-size: 15px; border: none; background: #e8f1fd; color: #111827; cursor: pointer; border-radius: 0; transition: background 0.1s; line-height: 1; font-weight: 600; } .calc-btn:hover { background: #d7e6fb; } .calc-btn:active { background: #c6d9f7; } .calc-btn.fn { background: #f2f2f2; } .calc-btn.fn:hover { background: #e6e6e6; } .calc-btn.op { background: #2d6fd4; color: #ffffff; } .calc-btn.op:hover { background: #2560bb; } .calc-btn.eq { background: #2d6fd4; color: #ffffff; grid-column: span 2; } .calc-btn.eq:hover { background: #2560bb; } /* TAO is a desktop test environment, while PassEPSO candidates also open practice on narrow windows and phones. At that width an overlay hides the very question the calculator is meant to support. The shared helper moves open panels into this in-flow dock, so the question and options are pushed down rather than covered. */ .tao-mobile-panel-dock { display: flex; flex-direction: column; gap: 12px; } .tao-mobile-panel-dock:empty { display: none; } @media (max-width: 1100px) { .floating-panel { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; max-height: none !important; resize: none; margin: 12px 0; overflow: visible; } .tao-mobile-panel-dock .floating-panel { margin: 0; } .tao-mobile-docked .panel-header { cursor: default; touch-action: auto; } .tao-mobile-docked .panel-drag-hint { display: none; } .tao-mobile-docked .panel-drag-grip { opacity: 0.6; } } @media (max-width: 767px) { .floating-panel { width: 100% !important; max-width: 100% !important; min-width: 0; min-height: 0; } } .hl-clear { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #d1d5db; background: white; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; color: #9ca3af; line-height: 1; } .hl-clear:hover { border-color: #ef4444; color: #ef4444; } /* THE PASSAGE AND THE OPTIONS ON ONE SCREEN (Haryo Nindito, 2026-10-18, paying candidate: "I cannot read the full text passage and the four option answers simultaneously. I have to scroll up and down to compare the options with the text. There are empty spaces on the left and right sides"). MEASURED BEFORE ANY CHANGE, on the page production actually serves, at the widths candidates use (WeasyPrint over the page's own CSS with the width media queries resolved; this box has no browser): viewport content column wasted left/right item height / room 1280x720 768px (60 %) 256 / 256 623 / 582 -> 41px short 1366x768 768px (56 %) 299 / 299 623 / 630 -> 7px spare 1440x900 768px (53 %) 336 / 336 623 / 762 1920x1080 768px (40 %) 576 / 576 623 / 942 and on the longest verbal passage in the bank (q13462, 200 words) 660px of item against 582px of room at 1280x720 and 630px at 1366x768: the report is reproducible, and at 1280x720 and 1366x768 it is not a near miss. The SECTION SIMULATION was worse than practice and nobody had reported it: its clock bar is taller, so the same item measured 838px against 506px of room at 1280x720, which is 332px of scrolling at the width a laptop opens. AFTER, same pages, same measurement: the content column is 1120px (87.5 % of 1280, 58.3 % of 1920), the wasted space falls from 256px to 80px a side at 1280 and from 576px to 400px at 1920, and the item measures 407px against 582px of room in practice and 494px against 506px in the section simulation. Every desktop width in the report fits with nothing to scroll, the worst item in the bank included. At 390px nothing changes at all: every box on the page measures what it measured before, to the pixel. WHY A SECOND COLUMN AND NOT A WIDER PARAGRAPH, which is what the report suggested. The passage already runs at 97 characters a line at 682px, above the 45-85 that is comfortable prose; widening it would have bought vertical room by making the text harder to read, and on a 1920 screen it would be 130 characters. The wasted space is 512-1152px, which is a WHOLE SECOND COLUMN, so the passage keeps a shorter line (97 -> 70 characters, measured) and the options move beside it instead of below it. Two equal columns, so neither side is the one that scrolls. The 400px still empty each side at 1920 is that cap doing its job and not an oversight: the width authority is `main`'s own max-w-6xl, and spending the rest would put the prose back above 85 characters a line for an item that already fits with 535px to spare. WHY A GRID AND NOT FLEX: the surfaces disagree about DOM order (practice renders passage-then-stem, both simulations render stem-then-passage) and named areas put the passage in the left column in both without moving a single element. The one-column fall-through below 1024px is therefore the DOM order each surface has today, unchanged, phones included. `grid-column: 2` on the default child is deliberate: anything the JS adds that is not one of the three named parts (an SVG panel, a passage element created on a question that had none) lands in the right column, never under the passage. */ .question-split { display: block; } @media (min-width: 1024px) { /* The page's own container is the width authority (prep/base.html `main`, max-w-6xl -> a 1120px content box); this only stops the narrower max-w-3xl cap from applying to an item that has a second column. */ .question-shell--wide { max-width: none; } .question-split--on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "passage stem" "passage options"; column-gap: 1.5rem; align-items: start; } .question-split--on > * { grid-column: 2; } .question-split--on > .question-split-passage { grid-area: passage; } .question-split--on > .question-split-stem { grid-area: stem; } .question-split--on > .question-split-options { grid-area: options; } /* A column's trailing margin is dead space, and on the section simulation at 1280x720 it is the difference between 4px of slack and 20px: the passage's own `mb-4` sits under the LAST line of the left column, where nothing follows it. The options are last in the right column for the same reason. */ .question-split--on > .question-split-passage, .question-split--on > .question-split-options { margin-bottom: 0; } /* A TABLE ITEM KEEPS ITS TABLE AND STILL SHOWS OPTION E (approved by Cris, 2026-10-18; the same report, the other section). The split above is for prose: two equal columns. A numerical item is a different shape -- one data table and five option strings of 9.8 characters on average -- so it gets the mirror image of that layout: the stimulus stays on the left at the width it needs, and the options move into a NARROW right-hand column beside it. MEASURED BEFORE, on the pages production serves, 60 random active numerical items, 1366x768 and 1280x720 (identical geometry at both): 0 of 60 fitted, the last option was below the fold in 60 of 60, the median item ended 344px past it and the worst 827px. THE 320px IS MEASURED, not chosen. Over all 4,515 option strings of the 903 items this rule reaches, a 320px column (240px of text after the letter badge, the gap, the padding and the border) leaves 4,491 of them on ONE line and none on three; and it leaves the stimulus column 758px at both laptop widths, which is 8px MORE than the 750px a table gets today, so no table in the bank can come out taller than it is now. `width: fit-content` on the table is the rest of Cris's instruction: a six-column numeric table does not need 758px, and a table that is only as wide as its own figures is a table a candidate can read across. The `max-width: 100%` of the wrapper still applies, so a table that cannot fit the column wraps its cells the way it does today -- QR542 again: it must FIT, it must never get an inner scrollbar. AREAS, NOT FLEX, and for the same reason as the prose split: the surfaces disagree about DOM order (practice renders passage, stem, options; the simulations render stem, passage, options), and named areas put the stimulus in the left column on all of them without moving a single element. `grid-column: 1` on the default child is the opposite of the prose split and is deliberate: anything a surface adds that is not one of the three named parts belongs with the stimulus, never under the options. The stem is a DIV on every surface for the same reason -- as a `

` it cannot contain the table, which the parser then lifts out into an implicit row below the options column. */ .question-split--table { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; grid-template-areas: "passage options" "stem options"; column-gap: 1.5rem; align-items: start; } .question-split--table > * { grid-column: 1; } .question-split--table > .question-split-passage { grid-area: passage; } .question-split--table > .question-split-stem { grid-area: stem; } .question-split--table > .question-split-options { grid-area: options; } /* A trailing margin at the foot of a column is dead space: nothing follows it. Same reason as the prose split above. */ .question-split--table > .question-split-passage, .question-split--table > .question-split-options { margin-bottom: 0; } .question-split--table .question-table-wrap { width: fit-content; } .question-split--table .question-data-table { width: auto; } }