, this is a
with no
native bold) since removing it would be a real, not just cosmetic,
regression. */
#railHeading {
height: 33px; margin: 0; padding: 0;
font-size: 10pt; font-weight: 700; line-height: normal; text-align: center;
}
#leftnav {
width: var(--rail-w); margin: 0; padding: 5px 0 0;
list-style: none; overflow-y: auto; overflow-x: hidden;
}
#leftnav li {
width: var(--rail-w); height: var(--rail-row-h);
display: flex; align-items: center; cursor: pointer;
font-size: 16px; line-height: var(--rail-row-h);
}
#leftnav li[data-index]:focus-visible {
outline: 2px solid #000; outline-offset: -2px;
}
html.white-on-black #leftnav li[data-index]:focus-visible {
outline-color: #fff;
}
#leftnav li:nth-child(even) { background-color: var(--row-alt); }
#leftnav li.selected { background-color: var(--sel-bg); color: var(--sel-ink); }
#leftnav li:hover:not(.selected) { background-color: var(--chrome); color: #fff; }
html.white-on-black #leftnav li:hover:not(.selected) {
background-color: var(--dark-accent); color: #000;
}
.navans { width: 20px; text-align: center; vertical-align: baseline; }
.navmark { width: 20px; text-align: right; fill: red; stroke: black; }
.navnotes { width: 20px; text-align: left; padding-left: 4px; }
.navseq { width: var(--navseq-w); text-align: center; margin-left: 5px; }
.navans svg { height: 7px; width: 7px; vertical-align: middle; margin-top: -2.5px; }
.navmark svg { height: 11px; width: 11px; transform: rotate(-21deg); }
.navnotes svg { height: 11px; width: 11px; }
/* Default theme: currentColor alone gets black on normal rows and white on
the selected row (li.selected already sets color:#fff), because the dot
is only ever rendered while the item is unanswered (see js/rail.js) — no
per-state colour rule is needed here. */
.navans svg { fill: currentColor; }
html.white-on-black #leftnav li .navans svg { fill: white; stroke: white; }
html.white-on-black #leftnav li:hover .navans svg { fill: black; stroke: black; }
/* Not in the coordinator's fix-round list, but confirmed at
reference/itd-inline.css:2622 (`html.white-on-black nav li.selected
.navans svg {fill:black !important}`) — the dark-theme selected row
already forces .navmark/.navnotes to black below; without this the
status dot alone stays white on the light-cyan selected background,
which is the same low-contrast defect item 1 was written to fix. */
html.white-on-black #leftnav li.selected .navans svg { fill: black; stroke: black; }
#leftnav li.key {
padding-left: 30px; height: var(--rail-row-h);
cursor: default; background: none; font-size: 16px;
}
#leftnav li.key:hover { background: none; color: inherit; }
html.white-on-black #leftnav li.selected,
html.white-on-black #leftnav li:hover {
background-color: #94EAFF !important; color: black !important; outline: 1px solid #94EAFF;
}
html.white-on-black #leftnav li .navmark svg { stroke: white; }
html.white-on-black #leftnav li.selected .navmark svg,
html.white-on-black #leftnav li:hover .navmark svg { stroke: black; }
html.white-on-black #leftnav li .navnotes svg { fill: white; }
html.white-on-black #leftnav li.selected .navnotes svg,
html.white-on-black #leftnav li:hover .navnotes svg { fill: black; }
/* ---- main column ---- */
#mainContainer { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
/* The item-content area between header and footer. Empty and unstyled
until Task 5, it collapsed to zero height, which pulled the footer up
directly under the header instead of pinning it to the viewport bottom —
not caught by the geometry gate, since footer#ControlPanelFrameID is
gated on [h, background-color] only, never y. flex:1 1 auto makes it
consume the remaining space between the two fixed-height bands, same
pattern as #mainContainer above.
Deliberately no min-height override (default: auto). Task 5 set
min-height:0 here defensively, back when this element was empty — with
no content, that clamp was a no-op (0 height still grows to fill via
flex-grow). Task 7's #ElementDisplayFrameID (css/item.css) now gives this
box a genuine, non-shrinkable content-box height of 903px+2px border =
905px, matching the real driver's own #ElementDisplayFrameID exactly
(reference/itd-dom.html sets an inline height:903px on that element with
no border-box reset, so its 1px+1px border adds outside it). With
min-height:auto (the default for a flex item), that 905px content floor
blocks flex-shrink from squeezing this box back down to the naive 903px
"fair share" of the column — reproducing the real driver's own overflow:
61 (header) + 905 (this) + 60 (footer) = 1026 in a 1024 viewport, i.e.
the column overflows and clips its own footer by 2px, landing it at
y=966 instead of the naive y=964. Re-adding min-height:0 here would
silence that floor and pull the footer back up 2px — verified by
temporarily restoring it during Task 7's Step 7 gate check. */
#MainContainerID { flex: 1 1 auto; }
/* ---- header ---- */
header#InfoPanelFrameID {
height: var(--header-h); flex: 0 0 var(--header-h);
background-color: var(--chrome); color: #fff;
display: flex; align-items: flex-start; justify-content: space-between;
position: relative; user-select: none;
}
html.white-on-black header#InfoPanelFrameID { background-color: #000; }
#TestInfoDiv {
/* Driver sets height:40px content-box (reference/itd-inline.css:125); with
our global box-sizing:border-box the equivalent is 40 + padding(10) +
border(2) = 52px, matching the reference rect height exactly. */
height: 52px;
border: 1px solid #fff; box-shadow: rgb(0, 0, 0) 0px 1px 1px 0px;
padding: 5px 10px; margin: 4px 8px; cursor: pointer; background: none;
color: #fff; font-family: var(--font-shell); font-size: 16px;
}
#TestInfoDiv:hover { background-color: var(--hover-dark); }
#TestInfo { text-align: center; }
.ItemQuestionNumber, .BlockQuestionNumber {
height: 19px; line-height: 19px; text-align: center; color: #fff; white-space: nowrap;
}
/* The Previous / counter / Next group, laid out the way the driver lays it out
(reference/itd-inline.css:199-201, 500-509; DOM at reference/itd-dom.html:
98-112) rather than as a centred flex row.
The driver's container is `position:absolute; left:50%; margin-left:-45px;
width:187px`, and its 50% is half of the 1281px #mainUI, not half of the
header: reference/itd-measure.json puts it at x=596, which is 640.5 - 45,
where half the header would give 648. This header starts 106px in (the
rail plus its borders), so the same point is 50vw - 44.5px - 106px.
A centred flex row cannot land there. It put Previous and Next 5px right
of the driver and 2px high, and sized the counter 18px where the driver
leaves it at the container's 16px (the captured "1 / 20" is 48px wide; at
18px it rendered 54px). Nothing gated x or y for these boxes, so the
geometry gate stayed green throughout. */
.navContainer {
position: absolute; top: 0; left: calc(50vw - 150.5px);
width: 187px; text-align: center;
font-family: var(--font-shell); font-size: 16px;
}
.navButtons { display: inline-block; position: absolute; width: 50px; }
.navButtons.navPrev { left: 0; }
.navButtons.navNext { right: 0; }
/* reference/itd-dom.html:107 carries these three declarations inline. */
.navCounter { display: inline-block; vertical-align: super; margin-top: 24px; }
#ItemQuestionNumber { margin-bottom: 4px; overflow: hidden; width: 110px; text-overflow: ellipsis; }
.cpButton {
height: var(--cpbutton-h); margin: 1.5px 5px 0; padding: 1px 6px;
border: none; background: none; cursor: pointer; position: relative;
font-family: var(--font-button); font-size: 13.3333px; text-align: center;
}
/* `top: 2px` is the driver's own (reference/itd-inline.css:1711-1716), on a
position:relative button. Without it both arrows sat 2px high: measured
y=1 against reference/itd-measure.json's y=3. */
#Previous, #Next { padding: 9px 4px 13px; margin: 1px 0; height: 56px; top: 2px; }
.cpButton:disabled, .cpButton[disabled] { opacity: .5; cursor: default; }
/* Base rule — this is what the nav arrows get, and what the geometry gate
sees as the first `.cpButtonIcon` match. The driver's base padding is 0 3px. */
.cpButtonIcon { padding: 0 3px; position: relative; }
/* Tool buttons get the boxed 20x20 treatment instead. Content-box on purpose:
the driver has no global box-sizing reset (reference/itd-inline.css), so
its 20x20/padding:4/border:1 rule yields a 30x30 box around a full-size
20x20 icon. Under our global border-box that same math would give a 20x20
box whose content area is only 10x10, halving every tool icon. Scoped to
just this rule — the global border-box reset stays load-bearing for the
rail and the boxed info panels. #Lock and #EndBlock already inherit
this fix through the shared selector list above. */
#TopControlPanelFrameID .cpButtonIcon,
#Lock .cpButtonIcon, #EndBlock .cpButtonIcon {
box-sizing: content-box;
width: 20px; height: 20px; margin: 5px auto; padding: 4px; border-radius: 5px;
}
#TopControlPanelFrameID .cpButtonIcon {
border: 1px solid #fff; background-color: #fff;
}
html.white-on-black #TopControlPanelFrameID .cpButtonIcon {
border-color: var(--dark-accent); background-color: #000;
}
/* Settings is a dropdown trigger, not a plain tool button: gear + separator
pipe + caret share one widened icon box (reference/itd-dom.html sets
style="width: 45px" on this element specifically). Equal specificity to
the 20px rule above, so this must come after it to win. */
#Tools .cpButtonIcon { width: 45px; }
#Tools .cpButtonIcon .bi-caret-down-fill {
position: absolute; right: 1px; top: 6px; width: 15px; height: 15px;
}
/* The base `.cpButtonIcon svg { display: block; width/height: 100% }` rule
below is sized for a single icon filling the whole box; here the gear and
the separator pipe must sit inline, side by side, on one line (the caret
is already pulled out of flow by the absolute rule above). Without this,
the block-level gear consumes the full box height and shoves the pipe
onto an overflowing second line below it. */
#Tools .cpButtonIcon .bi-gear-fill {
display: inline-block; width: 16px; height: 16px; vertical-align: middle;
}
#Tools .cpButtonIcon span { display: inline-block; vertical-align: middle; line-height: 1; }
/* Tool-button icon ink is black in the reference capture (measured rgb(0,0,0)
inside the white boxes), not the chrome blue. */
.cpButtonIcon svg { width: 100%; height: 100%; display: block; fill: #000; }
html.white-on-black .cpButtonIcon svg { fill: var(--dark-accent); }
/* Nav arrows: 30px svg, giving the base icon div the reference height of 30. */
#Previous .cpButtonIcon svg, #Next .cpButtonIcon svg {
width: 30px; height: 30px; margin: 0 auto; fill: #fff;
}
html.white-on-black #Next .cpButtonIcon svg { fill: var(--dark-accent); }
.cpButtonText {
display: inline-block; height: 15px; line-height: 15px;
font-family: var(--font-button); font-size: 13.3333px; color: #fff;
text-align: center;
}
/* Driver positions this block at `right: 3px` (reference/itd-dom.html), a
small inset from the header's edge rather than flush against it. The
driver's buttons are inline-block with newlines between them in markup,
which renders as inter-element whitespace (~5px) on top of each button's
own `margin: 1.5px 5px 0`; our flex container collapses that whitespace.
`gap` reproduces the same 15px inter-button spacing deterministically,
without depending on js/header.js's markup concatenation staying
whitespace-free.
Two corrections, both measured against reference/itd-measure.json:
- The whitespace is one space of the container's 16px Verdana, 5.625px,
not 5px. Three gaps at 5px left the panel 318.56px wide where the driver's
is 320.44px.
- `right: 3px` is taken from the driver's 1281px #mainUI, which overhangs
the 1280px viewport by one pixel, so the panel ends at x=1278 and the
inset from the viewport edge is 2px. At 3px every tool button sat 1px
left of the capture (#Tools x=1205 against 1206). */
#TopControlPanelFrameID { display: flex; align-items: flex-start; margin-right: 2px; gap: 5.625px; }
/* reference/itd-inline.css:2254 and :2501. This is the whole of the "pressed"
look in reference/step1-new-labs.png: the pointer is still over the button
it just clicked. The driver has no separate open state — the icon measures
30px (x=986..1015) with the panel open and with it shut, so the 2px white
outline this file used to draw around an open panel's icon was invented. */
.cpButton:not(:disabled):hover { outline: 1px solid #000; background-color: var(--hover-dark); z-index: 999; }
html.white-on-black .cpButton:not(:disabled):hover { outline: 1px solid #fff; background-color: transparent; }
/* ---- footer ---- */
footer#ControlPanelFrameID {
height: var(--footer-h); flex: 0 0 var(--footer-h);
background-color: var(--chrome); color: #fff;
display: flex; align-items: center; justify-content: space-between;
position: relative; user-select: none;
}
html.white-on-black footer#ControlPanelFrameID { background-color: #000; }
#TimerDiv { display: flex; align-items: center; }
#Clock {
border: 1px solid #fff; box-shadow: rgb(0, 0, 0) 0px 1px 1px 0px;
/* 317px total matches the reference: content 300 + padding 15 + border 2,
expressed as a border-box width because shell.css sets box-sizing globally. */
padding: 5px 5px 5px 10px; margin: 4px 8px; width: 317px;
background: none; color: #fff; cursor: pointer; text-align: left;
font-family: var(--font-shell);
}
#Clock:hover { background-color: var(--hover-dark); }
#block { height: 21px; line-height: 21px; font-size: 17.3333px; color: #fff; }
#Day { height: 19px; line-height: 19px; font-size: 16px; color: #fff; }
html.white-on-black #block, html.white-on-black #Day { color: var(--dark-accent); }
/* Matches reference/itd-inline.css exactly (not the brief's invented
#ff6/.warning-on-the-span rule, which never appears in the driver's own
CSS): the state class lands on #Clock as bwarning/dwarning, the color is
red, and it flashes rather than just changing weight. font-weight:700 is
deliberately not added — not found in the driver's rule either. */
#Clock.bwarning .timeA,
#Clock.dwarning .timeB { color: red; animation: flash 4s linear infinite; }
@keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }
/* Task 5 debt, closed here: reference/itd-dom.html:541 has a hidden
.timeOverviewWarning triangle inside #TimerDiv, revealed by
reference/itd-inline.css:2801-2809 when #TimerDiv carries .warning
(js/footer.js toggles that class whenever either clock is warning).
Hidden by default — the driver ships it `style="display:none"` inline;
we do the equivalent in the stylesheet so the !important rule below can
override it. Rules below are verbatim from the driver. */
.timeOverviewWarning { display: none; width: 40px; bottom: 10px; }
/* reference/itd-dom.html:541 sizes the svg inline (style="height:30px;
width:30px"); the driver's own stylesheet rule only sets fill. */
.timeOverviewWarning svg { height: 30px; width: 30px; fill: yellow; }
#TimerDiv.warning .timeOverviewWarning { display: inline-block !important; }
#cpMiddle, #cpRight { display: flex; align-items: center; }
/* End Block is pinned to the viewport corner in the driver, not laid out as
the footer's last flex item (reference/itd-inline.css:85-90). As a flex
item it sat flush against the right edge and vertically centred: x=1198,
y=966.8 against reference/itd-measure.json's x=1193, y=965. */
#cpRight { position: fixed; bottom: 1px; right: 5px; }
/* The reference driver positions the Lock button (`.lockDiv`/`#Lock`,
reference/itd-dom.html) via fixed/absolute positioning that lands it at
the footer's true horizontal center (measured Lock-label x≈673-699,
centre≈686, vs footer centre 693.5) — not via flex `justify-content:
space-between` among #TimerDiv/#cpMiddle/#cpRight, which instead
distributes #cpMiddle according to the *relative widths* of its two
siblings and lands it ~130px too far right (measured centre≈818).
Same fix as `.navContainer` in the header (Task 4): absolute-center
against the whole footer rather than the leftover flex space. */
#cpMiddle {
position: absolute; left: 50%; transform: translateX(-50%);
}
/* Sizing (box-sizing, width, height, margin, padding, border-radius) for
#Lock/#EndBlock .cpButtonIcon already comes from the shared rule added in
Task 4 (content-box 20x20 + 4px padding, matching the driver's lack of a
global box-sizing reset). Only fill color is footer-specific; do not
redeclare width/height/padding/border here or it will win the cascade
(same specificity, later in the file) and silently undo that fix. */
#Lock .cpButtonIcon svg { fill: #fff; }
#EndBlock .cpButtonIcon svg { fill: var(--alert); }
html.white-on-black #Lock .cpButtonIcon svg,
html.white-on-black #EndBlock .cpButtonIcon svg { fill: var(--dark-accent); }