/* #MainContainerID's own layout lives in css/shell.css — Task 5 put it there,
   which is its proper home. Do NOT redeclare it here. */

/* The 1px top and bottom borders are load-bearing, not decoration: they are
   the 2px that pushes the footer from y=964 to the reference's y=966. The
   real driver's column sums to 61 + 905 + 60 = 1026 in a 1024 viewport, i.e.
   it overflows and clips its own footer by 2px. Reproducing that is what
   makes the footer land in the right place.

   This only works with an EXPLICIT, non-shrinkable content height, matching
   reference/itd-dom.html's own `style="height: 903px"` inline on this exact
   element. `flex: 1 1 auto` here would be inert anyway (#MainContainerID is
   not a flex container for its children) and, more importantly, would let
   this box get squeezed back down to fit rather than forcing the overflow.
   box-sizing:content-box (overriding the global border-box reset) is what
   makes the 1px+1px border land OUTSIDE the 903px, the same way the real
   driver's un-reset box model does — under border-box the border would just
   be absorbed inside 903px and the overflow, and the footer debt, would
   never materialize. */
#ElementDisplayFrameID {
  box-sizing: content-box;
  height: calc(100vh - var(--header-h) - var(--footer-h));
  border-top: 1px solid #000; border-bottom: 1px solid #000;
  background: var(--ground);
}

/* The inline scroll pane for item content — stands in for the reference's
   iframe#ElementDisplayFrame (we render inline, not in an iframe; see
   test/manifest.js EXCLUDED). That real element carries no border of its
   own (measured border: 0px), so this pane must not add a second one on
   top of #ElementDisplayFrameID's — doing so would double the 2px debt and
   push the footer to y=968 instead of 966. It fills the frame's content
   box exactly (height:100%, the frame is content-box so 100% means its
   903px content area) and scrolls internally if an item runs long. */
#itemPane {
  display: block; height: 100%; min-width: 0; overflow: auto;
  background: var(--ground); color: var(--ink);
}
/* Where the item starts, and why it is not a plain 20px inset.

   The driver's item frame has a 20px body margin, a 40px body padding-top
   (inline on <body>, reference/itd-item-frame.txt:3098) and a 5px margin on
   the item's <section> (:3127). Mark Question is then hung back up into that
   45px band (see .markBtnContainer). This build had the 20px and nothing
   else, with Mark Question in normal flow above the stem, so the stem started
   16-18px high and everything under it followed.

   Two further offsets, both measured:

   - The frame's content is 2px right of and 2px below where
     reference/itd-measure.json's iframe rect (x=106, y=62) plus the 20px
     margin would put it. Rebuilding the frame from the captured stylesheet
     and DOM gives the Mark Question checkbox at (127, 98); the capture has it
     at (129, 100) in both step1-new-03.png and step1-new-labs.png. The stem,
     the options box and Proceed carry the same (2, 2). The right margin is
     what leaves the driver's 1129.47px content width inside this 1174px pane.
   - An item WITHOUT a gallery gets 5px 5px 10px 10px of padding on its shell
     (reference/itd-item-frame.txt:2868, `html:not(.nsas):not(.hasGallery)
     .shell`); the captured item has a gallery, so it has none. Every capture
     in reference/ is of that one media item, so the text-only origin rests
     on this rule and not on a screenshot.

   The margin is divided by --zoom because CSS zoom scales an element's own
   margin; the padding is inside the zoomed box, as the driver's is. */
#itemBody {
  position: relative;
  margin: calc(22px / var(--zoom)) calc(22.53px / var(--zoom)) calc(20px / var(--zoom)) calc(22px / var(--zoom));
  padding: 50px 5px 10px 10px;
  font: normal normal normal 12pt/1.4 var(--font-item);
  zoom: var(--zoom);
}
html.hasViewer #itemBody { padding: 45px 0 0; }

/* The flag and text are inside a real label, matching the captured driver:
   clicking any visible part of Mark Question toggles the checkbox. */
.markBtnContainer {
  /* reference/itd-item-frame.txt:2109-2116 and :2479, plus the inline
     `margin-top:-40px; margin-left:-10px` on the element itself (:3129). It is
     absolutely positioned at the top of the item and pulled 40px up into the
     body's padding band. `top` and `left` are those two margins resolved
     against #itemBody: 45 - 40 for an item with a gallery, and 5 + 10 further
     in each direction for one without (the shell padding above).
     height is the driver's 20px content height plus 12px padding and the 2px
     transparent border, because this project is border-box and the driver is
     not. */
  position: absolute; top: 10px; left: 0; z-index: 997;
  cursor: pointer; height: 34px; padding: 6px; max-width: 314px;
  margin-right: 30px; border: 1px solid transparent; white-space: nowrap;
}
html.hasViewer .markBtnContainer { top: 5px; left: -10px; }
.markBtnContainer .markBtn,
.markBtnContainer .markBtnLabel { cursor: pointer; }
/* TRAP — the two rules below this one are INERT, in the driver and here.
   reference/itd-item-frame.txt:2109-2131 declares .markBtnContainer twice.
   The second declaration is this one, and both of its properties carry
   !important:

     .markBtnContainer{ border: 1px solid transparent !important;
                        outline: none !important; }
     .markBtnContainer:hover{outline: 1px solid;}
     .markBtnContainer:focus{ border: 1px dotted; border-radius: 5px;}

   An !important author declaration beats a normal one whatever the
   selector's specificity, so the transparent border defeats :focus's dotted
   border and `outline:none` defeats :hover's outline. Mark Question in the
   real exam therefore shows no hover ring and no focus box — the checkbox
   and its label, nothing else.

   This build had dropped the !important pair and had also widened :focus to
   :focus-within, which is not the same selector: :focus needs the CONTAINER
   focused, while :focus-within also fires when the checkbox INSIDE it is —
   i.e. on every ordinary click. The result was a dotted box that appeared on
   click and stayed until something else took focus, in a driver that never
   draws one at all.

   The inert rules are kept verbatim rather than deleted, the same way
   css/item.css keeps the driver's own dead option-highlight suppression
   rule: what the driver ships is the record, and a later reader who finds
   :hover/:focus in the capture should find them here too, with the reason
   they do nothing. Deleting the !important line to "make them work" would
   make this LESS faithful, not more. */
.markBtnContainer { border: 1px solid transparent !important; outline: none !important; }
.markBtnContainer:hover { outline: 1px solid; }
.markBtnContainer:focus { border: 1px dotted; border-radius: 5px; }
/* reference/itd-item-frame.txt:2135-2145. The flag is 15px, sits on the text
   baseline directly after the checkbox, and the words follow it with no gap.
   It was 14px, vertically centred, with 4px either side: the capture has the
   flag at x=144-158 and "Mark Question" starting at x=161, where this build
   drew them 12px and 14px further right. */
.markBtnContainer svg { width: 15px; height: 15px; fill: red; stroke: black;
  transform: rotate(-21deg); }
html.white-on-black .markBtnContainer svg { stroke: white; }

/* Safe structured stem content (js/item.js). All displayed values are escaped
   before these elements are generated; authors never provide raw markup. */
.s1-stem-heading { margin: .75em 0 .35em; font: bold 1em/1.4 var(--font-item); }
.s1-stem-list { margin: .25em 0 1em 1.7em; padding: 0; }
.s1-stem-list li { margin: .2em 0; }
.s1-stem-table-wrap { max-width: 100%; margin: .2em 0 1em; overflow-x: auto; }
.s1-stem-table { border-collapse: collapse; width: auto; min-width: 320px; }
.s1-stem-table caption { padding: 0 0 .35em; font-weight: bold; text-align: left; }
.s1-stem-table th, .s1-stem-table td {
  border: 1px solid currentColor;
  padding: 3px 8px;
  text-align: left;
  vertical-align: top;
}
.s1-stem-table th { font-weight: bold; }
/* A block of "name: value" results inside a plain stem: two aligned columns,
   no rules. The bottom padding is the captured driver's own rule for a table
   inside a stem (reference/itd-item-frame.txt:2594). */
.s1-lab-block { border-collapse: collapse; margin: 0; padding: 0 0 15px 0; display: block; }
.s1-lab-block td { padding: 0 2.5em 0 0; text-align: left; vertical-align: top; }
.s1-lab-block td:first-child { padding-left: 1.5em; }
/* Options that are combinations of changes: one fixed-width column per
   heading, with the heading row built from an option row whose marker and
   letter are hidden so every column lines up with the cells beneath it. */
.s1-option-cells { display: inline-flex; align-items: flex-end; }
.s1-option-cell { flex: 0 0 9.5em; width: 9.5em; padding: 0 .75em 0 0; text-align: center; }
.s1-option-heading { font-weight: bold; }
.s1-option-head .ITSMCOptionMarker,
.s1-option-head .ITSMCOptionLabelText,
.s1-option-head .ITSMCOptionLabelSeparator { visibility: hidden; }
.s1-option-head .label-box, .s1-option-head .ITSMCOptionACCLabel { cursor: default; }
html.default .s1-stem-table tbody tr:hover { background: #d7dced; }
html.white-on-black .s1-stem-table tbody tr:hover { background: #222; }
.s1-stem-chart { width: min(440px, 100%); margin: .4em 0 1em; }
.s1-stem-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.s1-chart-axis { fill: none; stroke: currentColor; stroke-width: 1; }
.s1-chart-bar { fill: #4f8fc6; stroke: #004976; stroke-width: 1; }
.s1-chart-line { fill: none; stroke: #004976; stroke-width: 3; }
.s1-chart-point { fill: #fff; stroke: #004976; stroke-width: 2; }
.s1-chart-label { fill: currentColor; font: 11px Arial, sans-serif; }
.s1-stem-chart figcaption { margin-top: .25em; font-size: .9em; }
html.white-on-black .s1-chart-bar { fill: #94eaff; stroke: #fff; }
html.white-on-black .s1-chart-line,
html.white-on-black .s1-chart-point { stroke: #94eaff; }
html.white-on-black .s1-chart-point { fill: #000; }

/* ---------------------------------------------------------------------------
   Item column width.

   The driver has TWO branches here and they are not interchangeable.

   BASE — every item, no exceptions (reference/itd-item-frame.txt:2557-2560):

     html:not(.nsas).zoom100 .ITSStemText, .optionOutline, ... {max-width:56vw}

   .ITSStemText and .optionOutline are named in ONE selector list, so on an
   item with no media they are capped identically and their right edges come
   out flush. That flush edge is the layout's most legible signature.

   HASVIEWER — media items only (reference/itd-item-frame.txt:2648, 2652):

     html.hasViewer:not(.hasGallery) .ITSStemLeft {max-width:50vw}
     html.hasViewer:not(.hasGallery).zoom100 .ITSStemLeft
                                  {float:left; width:45%; margin-right:10%}

   Until this commit the .ITSStemLeft number was applied to EVERY item —
   a media-item layout on the text-only items the app actually ships. It also
   used the wrong base: `50%` resolves against #itemBody's 1134px content box
   (567px), where the driver's `50vw` resolves against the 1169.47px item
   frame (584.7px). See --item-vw in css/tokens.css.

   Which of 45% and 50vw actually binds at zoom100 cannot be read off the
   stylesheet — both rules match. It is settled by measurement, in
   test/item-geometry.test.mjs: reference/step1-new-03.png's own line breaks
   put the driver's column at 506.1-528.2px, so `width:45%` binds and 50vw
   (584.7px) never does. 50vw is kept as the max-width it is in the driver.

   Why calc(... / var(--zoom)) rather than a plain calc: --item-cols is a
   width the driver states in item-frame vw, and #itemBody carries
   `zoom: var(--zoom)`, which scales its descendants' used lengths. Dividing
   by --zoom makes the number land on screen at exactly --item-cols vw at
   every rung, which is what the driver specifies and what the gate asserts.

   .ITSStemText is display:block (width:auto) so it simply fills to its own
   cap. .ITSStemLeft is float:left rather than the driver's inline-block:
   .markBtnContainer precedes it and is also inline-block, and an
   inline-block stem joins Mark Question's line instead of starting its own
   (measured: markBtnContainer x=126 w=160, stem landing at x=316 y=82).
   float:left is the driver's own zoom100 declaration anyway. */
.ITSStemText {
  display: block;
  max-width: calc(var(--item-vw) * var(--item-cols) / var(--zoom));
}
/* The driver's stem paragraph has no margin, and neither does .ITSStemText:
   the 20px between the last line of the stem and the options box is
   .optionOutline's margin-top and nothing else. A 1em paragraph margin plus a
   10px stem margin had made that gap 36px (46px with both, text-only).
   Paragraphs after the first keep a 1em separation, which the captured
   single-paragraph item cannot speak to. */
.ITSStemText p { padding: 0; margin: 0; }
.ITSStemText p + p { margin-top: 1em; }

html.hasViewer .ITSStemLeft {
  float: left; width: 45%; margin-right: 10%; vertical-align: top;
  max-width: calc(var(--item-vw) * 50 / var(--zoom));
}
/* .ITSStemText's own 56vw cap is a SECOND, independent constraint in the
   driver (both are `vw`, so neither compounds with the other). Nested
   percentages would compound — 56% of an already-capped 510px is 286px — so
   inside the media column the inner cap is released and .ITSStemLeft alone
   decides the width, which is what two independent vw caps resolve to
   whenever the outer one is the narrower. */
html.hasViewer .ITSStemLeft .ITSStemText { max-width: none; margin-bottom: 0; }

/* The right-hand media column is the seam for css/media.css's draggable
   Invert / Contrast / Zoom viewer. The driver allows that floating panel to
   overlap the item frame, so this host must not clip it. */
html.hasViewer .ITSStemRight {
  /* A block that establishes its own formatting context, so it fills the
     space the float leaves and never drops below it. The driver's own
     `display:inline-block` cannot be used here: an inline-block only sits
     beside a float if its shrink-to-fit width still fits, and an exhibit
     wider than the 45% the float leaves silently wraps underneath instead.
     max-width is the driver's 50vw, kept as the cap it is there. */
  display: flow-root; overflow: visible;
  max-width: calc(var(--item-vw) * 50 / var(--zoom));
}
html.hasViewer .ITSStemRight > img { max-width: 100%; height: auto; }

/* At resized text levels the captured driver orders the exhibit first and
   the stem second instead of trying to preserve two increasingly cramped
   columns (reference/itd-item-frame.txt:2657-2665). */
html.hasViewer:not(.zoom100) .ITSStemRow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
html.hasViewer:not(.zoom100) .ITSStemLeft {
  order: 2;
  float: none;
  width: auto;
  margin-right: 0;
}
html.hasViewer:not(.zoom100) .ITSStemRight {
  order: 1;
  text-align: center;
  margin-bottom: 18px;
}
html.labActive.hasViewer .ITSStemRow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
html.labActive.hasViewer .ITSStemLeft {
  order: 2;
  float: none;
  width: auto;
  margin-right: 0;
}
html.labActive.hasViewer .ITSStemRight {
  order: 1;
  text-align: center;
  margin-bottom: 18px;
}

/* Contains the float so .optionOutline starts below both columns rather than
   flowing beside the exhibit. `clear` on .optionOutline itself would be
   inert — it is display:inline-block, and clear does nothing on inline-level
   boxes. */
.ITSStemRow::after { content: ""; display: block; clear: both; }

/* The options box and its rows. Every number here was read off a rebuild of
   the driver's item frame (its captured stylesheet applied to its captured
   DOM) and then checked against reference/step1-new-03.png, where the box is
   420px wide and the rows are 39.4px apart. This build's rows were 36.7px
   apart and the box 443px wide, because each row carried `padding: 4px 10px`
   that the driver does not have and the letter, full stop and text were
   spaced with fixed widths instead of the driver's two collapsed spaces.

   margin-bottom is 60px, not the 15px at reference/itd-item-frame.txt:2166:
   a later rule wins, and Proceed's container climbs 40px back into it. */
.optionOutline {
  padding: 10px 0; margin-top: 20px; margin-bottom: 60px;
  display: inline-block;
  max-width: calc(var(--item-vw) * var(--item-cols) / var(--zoom));
  border: 1px solid var(--chrome); border-bottom-width: 6px;
}
html.white-on-black .optionOutline { border-color: #fff; }

/* reference/itd-item-frame.txt:397-446 (the flex rows), :91-95 and
   :1268-1281 (marker and cells). */
.ITSMCOptionTable { display: block; cursor: pointer; }
.ITSMCOptionTable > .its-item-tr,
.label-box {
  display: flex; flex-flow: row nowrap; justify-content: flex-start;
  align-content: stretch; align-items: flex-start;
}
.ITSMCOptionTable > .its-item-tr > .its-item-td,
.label-box > .its-item-td { flex: 0 1 auto; }
.ITSMCOptionMarkerCell { padding-top: 4px; cursor: pointer; }
.ITSMCOptionMarker { cursor: pointer; margin: 5px 3px 0 5px; }
.label-box { flex: 0 1 99%; min-height: 36px; cursor: default; }
.label-box > label { display: block; flex: 1 1 90%; margin: 7px 0 10px; cursor: pointer; }
.ITSMCOptionLabelSeparatorCell { margin-left: -5px; }
.ITSMCOptionTextCell { text-align: left; display: inline; }
.ITSMCOptionText { vertical-align: top; }

/* reference/itd-item-frame.txt:195-204, :264-273, :294-297. The driver draws
   its strikeout control with an image this project does not ship (the file
   is NBME's); the letters below stand in for it, sized and placed to cover
   the same pixels: x=516-535 and 12-23px below the row's top edge in
   reference/step1-new-labs.png. */
.ITSMCOptionStrikeout { border: 0; background: transparent; width: 3rem; height: 100%; display: block; }
.strikeout-btn {
  cursor: pointer; background-color: transparent; border: 0; padding: 0;
  width: 2rem; border-radius: 6px; margin-left: .5rem; height: 19px; margin-top: 9px;
  font-family: Arial, sans-serif; font-size: 14px; line-height: 19px; color: inherit;
  position: relative;
}
.strikeout-btn .glyph {
  position: absolute; left: 7px; top: 2px; width: 20px; height: 14px;
  line-height: 14px; text-align: center; opacity: .6;
}
.strikeout-btn .glyph::after {
  content: ""; position: absolute; left: 0; right: 0; top: 8px;
  border-top: 1px solid currentColor;
}
.its-item-tr.struck .ITSMCOptionText,
.its-item-tr.struck .ITSMCOptionLabelText,
.its-item-tr.struck .ITSMCOptionLabelSeparator { text-decoration: line-through; opacity: .55; }
.its-item-tr.struck .strikeout-btn .glyph { opacity: 1; }
.its-item-tr.struck .strikeout-btn .glyph::after { display: none; }

/* js/item.js emits this class on the strikeout button's accessible label
   (e.g. "Strike out option A") — sighted users should see only the compact
   "ab" glyph, matching the reference driver's narrow strikeout column;
   screen readers still need the full text. Standard sr-only clip pattern:
   display:none would pull it from the accessibility tree entirely, which
   defeats the point of having it. Without this rule the label rendered as
   plain visible text, wrapping across several lines and roughly tripling
   the strikeout column's width relative to reference/step1-new-03.png. */
.its-item-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Proceed to Next Item: reference/itd-item-frame.txt:2188-2201 for the
   button, :2471-2479 for its container.

   In reference/step1-new-03.png it is a flat #0077C8 button, 146 x 30, in
   14px Arial, with the browser's default 2px outset button border and a 5px
   radius, 7px in from the options box and 27px below it. This build drew a
   navy gradient with a 1px border in 16px type, 172 x 31, flush with the box:
   the gradient is the driver's HOVER state (:2226-2229), not its resting one.
   `border` is deliberately not declared, so the browser's own button border
   is what shows, as it is in the driver.

   The container's -40px margin undoes most of .optionOutline's 60px; with its
   6px padding and 1px transparent border that leaves the 27px. Its height is
   the driver's 40px content height in border-box terms. */
.nextBtnContainer {
  position: relative; margin-top: -40px; margin-right: 30px; height: 54px;
  padding: 6px; max-width: 314px; border: 1px solid transparent;
}
#ProceedBtn {
  cursor: pointer; display: inline-block; padding: 5px; border-radius: 5px;
  font-family: Arial; font-size: 14px;
  background-color: #0077C8; color: #fff;
}
html.default #ProceedBtn:hover,
html.default #ProceedBtn:focus { background: linear-gradient(#004976, #5490CC); color: #fff; }
html.white-on-black #ProceedBtn { border: 1px solid #fff; background: #6ED6DD; color: #000; }
html.white-on-black #ProceedBtn:hover,
html.white-on-black #ProceedBtn:focus { background: #fff; color: #000; }

/* reference/itd-item-frame.txt:1182-1191 — highlight stays yellow in BOTH
   themes (not --dark-accent); cursor:pointer in both; dark theme forces
   color:black, default theme sets no color at all. */
html.default .itdhilite { background-color: #FFFF00; cursor: pointer; }
html.white-on-black .itdhilite { background-color: #FFFF00; color: black !important; cursor: pointer; }

/* reference/itd-item-frame.txt:1195-1202 (the reference's own comment there
   reads "prevents mcoption text hiliting") — kept for SOURCE FIDELITY, not
   effect. This rule is inert in the driver itself: its selectors (two
   classes, specificity 0,0,2,0) are less specific than
   `html.default .itdhilite` / `html.white-on-black .itdhilite` above
   (0,0,2,1 — the extra `html` element selector), so it never wins the
   cascade, in the driver or here. Confirmed directly against the live
   exam by injecting an .itdhilite span into .ITSMCOptionText and reading
   its computed background-color: rgb(255, 255, 0), identical to a stem
   highlight — the driver highlights option text yellow too. The author's
   intent (per the comment) was never realized; nobody noticed because an
   unremarkable no-op draws no attention. Do NOT add !important to make
   this "work" — that would make us LESS faithful than the driver, not
   more. If you're reading this because you're about to "fix" it: don't,
   it's already exactly as broken as the original. */
.ITSMCOptionLabelText .itdhilite,
.ITSMCOptionLabelTextOn .itdhilite,
.ITSMCOptionLabelSeparator .itdhilite,
.ITSMCOptionLabelSeparatorOn .itdhilite,
.ITSMCOptionText .itdhilite,
.ITSMCOptionTextOn .itdhilite { background-color: white; }