/* Geometry Test Prep — MrJGeometry house style
   Light grey page, Arial, white panels, one uniform column. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #D3D3D3;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
  font-size: 17px;
  line-height: 1.5;
}
.wrap { max-width: min(94vw, 1320px); margin: 0 auto; padding: 14px 14px 30px; }
a { color: #1144cc; }
/* The hidden attribute must always win (v25). The app shows and hides
   elements by setting their hidden property, but this stylesheet sets
   display on some of those same elements (button, .btn below sets
   display: inline-block), and an author display rule beats the
   browser's built-in [hidden] rule in the cascade — so a "hidden"
   button stayed on screen (the Check Answer button in Test mode,
   v24). This one rule restores the contract for every element. */
[hidden] { display: none !important; }
/* Header — mimics mrjgeometry.com: a deep-blue band with the site name in
   white, a gold rule under the band, and white pill nav buttons (gold on
   hover / for the current page). */
.site-header { background: #1f3a5f; border-bottom: 4px solid #ffd94d; }
.header-inner { max-width: min(94vw, 1320px); margin: 0 auto; padding: 14px 14px 11px; }
.site-title { font-size: 32px; font-weight: bold; letter-spacing: .3px; margin: 0; }
.site-title a { color: #ffffff; text-decoration: none; }
.site-sub { font-size: 15.5px; color: #dbe4f0; margin: 6px 0 0; }
.main-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.main-nav a {
  display: inline-flex; align-items: center; padding: 8px 12px; min-height: 40px;
  background: #ffffff; border: 1px solid #ffffff; border-radius: 7px;
  color: #1f3a5f; text-decoration: none; font-size: 15px; font-weight: bold;
}
.main-nav a:hover { background: #ffd94d; border-color: #ffd94d; }
.main-nav a.current { background: #ffd94d; border-color: #ffd94d; }
/* Header buttons (v13) — two stacked call-to-action buttons at the right
   edge of the header column, spanning the title + nav rows: gold Tips on
   top, teal TPT store below. Same buttons as mrjgeometry.com. */
.head-grid { display: flex; gap: 20px; align-items: flex-start; }
.head-left { flex: 1 1 auto; min-width: 0; }
.head-btns { flex: 0 0 auto; width: 278px; display: flex; flex-direction: column; gap: 8px; }
.head-btn {
  display: flex; align-items: center; gap: 9px; height: 42px;
  border-radius: 8px; padding: 0 13px; text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,.30);
}
.head-btn .ic { font-size: 18px; line-height: 1; }
.head-btn .tx b { display: block; font-size: 14.5px; font-weight: bold; line-height: 1.15; white-space: nowrap; }
.head-btn .tx span { display: block; font-size: 11.5px; line-height: 1.15; margin-top: 2px; opacity: .88; white-space: nowrap; }
.head-btn.tip { background: #ffd94d; border: 1px solid #e6c200; color: #1f3a5f; }
.head-btn.tip:hover { background: #f5c400; }
.head-btn.tpt { background: #0e7c6b; border: 1px solid #0a5f53; color: #fff; }
.head-btn.tpt:hover { background: #0a5f53; }
.site-footer { color: #333; font-size: 14px; text-align: center; padding: 8px 0 22px; }
.panel {
  background: #fff; border: 1px solid #9a9a9a; border-radius: 10px;
  padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.15); margin-bottom: 14px;
}
.panel h1 { font-size: 26px; margin: 0 0 8px; }
.panel h2 { font-size: 21px; margin: 0 0 10px; }
.panel h3 { font-size: 18px; margin: 14px 0 6px; }
button, .btn {
  font-family: Arial, sans-serif; font-size: 15px; background: #eee; color: #000;
  border: 1px solid #9a9a9a; border-radius: 7px; padding: 9px 16px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: #ffd94d; }
button:disabled { opacity: .55; cursor: default; }
button:disabled:hover { background: #eee; }
.btn-primary { background: #ffd94d; font-weight: bold; }
.btn-primary:hover { background: #ffcf1f; }
label.filter-label { display: block; font-weight: bold; margin: 12px 0 4px; }
select, input[type="text"] {
  font-family: Arial, sans-serif; font-size: 16px; padding: 8px 10px;
  border: 1px solid #9a9a9a; border-radius: 7px; width: 100%; background: #fff;
}
.filters { display: grid; grid-template-columns: 1.1fr 2.2fr 1.7fr 1.05fr 1.05fr; gap: 6px 14px; }
.filters > div { display: flex; flex-direction: column; }
.filters label { white-space: nowrap; font-size: 13px; }
#std-readout { margin: 8px 0 0; color: #444; }
.filters select { width: 100%; min-width: 0; margin-top: auto; }
.qfig { display: block; max-width: 100%; max-height: 1050px; margin: 10px auto; background: #fff; }
.filter-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.count-line { font-size: 17px; }
table.bank { border-collapse: collapse; width: 100%; font-size: 14.5px; }
table.bank th, table.bank td { border: 1px solid #c9d6e4; padding: 6px 8px; text-align: left; vertical-align: top; }
table.bank th { background: #f4f9ff; }
.bank-scroll { max-height: 430px; overflow: auto; border: 1px solid #c9d6e4; border-radius: 8px; }
table.bank tbody tr.clickable { cursor: pointer; }
table.bank tbody tr.clickable:hover td { background: #eaf1ff; }
table.bank tbody tr.clickable td:last-child { color: #1144cc; font-weight: bold; white-space: nowrap; }
/* Practice engine */
.q-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: #333; margin-bottom: 8px; }
.q-meta .tag { background: #f4f9ff; border: 1px solid #c9d6e4; border-radius: 999px; padding: 2px 10px; }
.q-progress { font-size: 15px; margin-bottom: 6px; }
.progress-track { height: 10px; background: #eee; border: 1px solid #c9d6e4; border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.progress-fill { height: 100%; background: #3f9e2f; width: 0%; }
.q-prompt { font-size: 18px; margin: 6px 0 14px; white-space: pre-wrap; }
.q-figure { text-align: center; margin: 0 auto 14px; max-width: 440px; }
.q-figure img { max-width: 100%; height: auto; border: 1px solid #c9d6e4; border-radius: 8px; background: #fff; }
.q-figure figcaption { font-size: 13.5px; color: #333; margin-top: 4px; }
.choices { display: flex; flex-direction: column; gap: 9px; margin: 10px 0; }
.choice {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
  background: #fff; border: 1.5px solid #9a9a9a; border-radius: 8px; padding: 11px 13px; font-size: 16.5px;
}
.choice:hover { background: #f4f9ff; }
.choice .letter { font-weight: bold; color: #1144cc; min-width: 22px; }
.choice.selected { border-color: #1144cc; background: #eaf1ff; }
.choice.correct-reveal { border-color: #2e7d32; background: #e6f4e6; box-shadow: 0 0 0 2px #2e7d32 inset; }
.choice.wrong-pick { border-color: #b26a00; background: #fdf3e0; }
.choice input { margin-top: 4px; }
.numeric-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.numeric-row input { flex: 1 1 260px; }
.attempt-dots { font-size: 15px; margin: 8px 0; }
.attempt-dots .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #9a9a9a; margin-right: 5px; vertical-align: -2px; background: #fff; }
.attempt-dots .dot.used-wrong { background: #f2b13c; border-color: #b26a00; }
.attempt-dots .dot.used-right { background: #3f9e2f; border-color: #2e7d32; }
.feedback { border-radius: 8px; padding: 13px 15px; margin: 12px 0; font-size: 16px; display: none; }
.feedback.show { display: block; }
.feedback.amber { background: #fdf3e0; border: 1px solid #b26a00; border-left: 6px solid #b26a00; }
.feedback.green { background: #e6f4e6; border: 1px solid #2e7d32; border-left: 6px solid #2e7d32; }
.feedback .fb-title { font-weight: bold; margin-bottom: 4px; }
.explanation { background: #f4f9ff; border: 1px solid #c9d6e4; border-left: 6px solid #1144cc; border-radius: 8px; padding: 13px 15px; margin: 12px 0; display: none; }
.explanation.show { display: block; }
.explanation h3 { margin: 0 0 8px; font-size: 17px; }
.explanation ol { margin: 0; padding-left: 22px; }
.explanation li { margin-bottom: 7px; }
.q-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 16px; }
.q-nav .nav-group { display: flex; gap: 10px; flex-wrap: wrap; }
.score-strip { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15.5px; background: #f4f9ff; border: 1px solid #c9d6e4; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.rad { white-space: nowrap; }
.rad .radicand { border-top: 1.5px solid currentColor; padding: 0 2px; }
.frac { display: inline-block; vertical-align: middle; text-align: center; margin: 0 2px; }
.frac .num { display: block; border-bottom: 1.5px solid currentColor; padding: 0 4px; line-height: 1.15; }
.frac .den { display: block; padding: 0 4px; line-height: 1.15; }
.summary-score { font-size: 30px; font-weight: bold; }
/* Constructed response (v15) — model work steps, rubric, and the CR
   results block on the summary page. */
.cr-panel { margin: 12px 0; }
.cr-step { background: #f4f9ff; border: 1px solid #c9d6e4; border-left: 6px solid #1144cc; border-radius: 8px; padding: 10px 13px; margin: 8px 0; }
.cr-rubric-line { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1.5px solid #9a9a9a; border-radius: 8px; padding: 10px 13px; margin: 8px 0; cursor: pointer; font-size: 16px; }
.cr-rubric-line input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; }
.cr-score-line { font-weight: bold; font-size: 17px; }
/* Constructed response (v22) — the checked-step chain on the question
   page: earned steps read green, shown/missed steps amber, and the
   current step is a white working box. The review view lists one
   plain line per step. */
.cr-step-head { font-weight: bold; margin-bottom: 4px; }
.cr-step-prompt { margin: 4px 0; }
.cr-step-answer { margin: 4px 0; font-style: italic; }
.cr-step-model { margin: 4px 0; }
.cr-step-done { background: #eef7ec; border-color: #b9d8b2; border-left-color: #3f9e2f; }
.cr-step-shown { background: #fdf3e3; border-color: #ecd9ae; border-left-color: #b26a00; }
.cr-step-current { background: #fff; border: 1.5px solid #9a9a9a; border-left: 6px solid #1144cc; border-radius: 8px; padding: 10px 13px; margin: 8px 0; }
.cr-step-current #cr-show-step { margin-top: 8px; }
.cr-review-step { margin: 6px 0; }
/* Constructed Response review (v21 step; v22 content) — the review
   step between Finish and the results page: one bordered block per CR
   item with its final-answer state, per-step outcome lines, and the
   item score. */
.cr-review-item { border: 1px solid #c9d6e4; border-radius: 8px; padding: 14px 16px; margin: 14px 0; }
.cr-review-item h2 { margin-top: 0; }
.cr-review-state { font-weight: bold; font-size: 16.5px; }
/* v19: one blank line of space before the Constructed Response results
   block (the block itself is hidden when a set has no CR items, so the
   gap only shows when the block does; print keeps the gap too). */
.cr-spacer { height: 1em; }
/* Diagnostics (v14) — labeled breakdown blocks under the total score.
   v18: results tables get shorter rows (cell padding 6px -> 3px tall,
   about 29px a row) and the diagnostics tables scroll in a box capped
   at about 6 rows (header + 6 rows ≈ 202px) instead of stretching the
   page; the header row stays visible while scrolling. Print unclips
   them again (see @media print below). The question-by-question table
   shares the results page's bank styling, so it gets the shorter rows
   and sticky header too, but keeps its taller 430px scroll box. */
#diagnostics h2 { margin-top: 24px; }
#diagnostics h2:first-child { margin-top: 10px; }
#summary-view table.bank th, #summary-view table.bank td { padding: 3px 8px; }
#summary-view .bank-scroll thead th { position: sticky; top: 0; z-index: 1; }
.diag-scroll { max-height: 202px; overflow: auto; }
#summary-view > h2 { margin-top: 24px; }
.proof-table { width: 100%; border-collapse: collapse; margin: 12px 0 4px; font-size: 15.5px; background: #fff; }
.proof-table th, .proof-table td { border: 1px solid #b9c6d4; padding: 7px 10px; text-align: left; vertical-align: top; }
.proof-table th { background: #eef3f9; font-size: 15px; }
.proof-table td:first-child, .proof-table th:first-child { width: 34px; text-align: right; color: #333; }
.credits-list { font-size: 15px; }
.credits-list li { margin-bottom: 6px; }
.bottom-note, .copyright-line { font-size: 14px; color: #333; text-align: center; margin: 4px 0; }
.back-bar { background: #fff; border: 1px solid #9a9a9a; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.15); padding: 10px 20px; margin-bottom: 14px; }
.back-bar.bottom { margin-top: 0; }
.small { font-size: 14px; color: #333; }
/* Hub launch area (v25): the filters, the mode control, and the
   start buttons sit in one defined box so the launch controls read
   as a single obvious block instead of blending into the hub text. */
.launch-box {
  background: #f4f9ff; border: 1px solid #c9d6e4; border-radius: 10px;
  padding: 4px 18px 18px; margin-top: 16px;
}
/* Mode control on the hub + the Guided/Test split (v24); boxed in
   v25 so the mode is the first decision on the page and cannot be
   skimmed past (Robert missed it twice as a plain row). v26: Robert
   confirmed the box but asked for ONE compact row no taller than the
   buttons — the "Mode" label, the two options at normal button size,
   and the Test explainer in its own cell beside them. */
.mode-box {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  background: #ffffff; border: 2px solid #1144cc; border-radius: 10px;
  padding: 10px 14px; margin: 16px 0 4px;
}
.mode-box-label { font-size: 15px; font-weight: bold; }
.mode-choices { display: flex; flex-wrap: wrap; gap: 8px; }
/* The options are labels sized to match the page's standard button
   rule (button, .btn: 15px text, #eee fill, 1px border, 9px 16px
   padding) — normal button size, not the enlarged v25 pills. The
   checked option still turns gold so the selection is visible. */
.mode-choice {
  font-size: 15px; cursor: pointer;
  background: #eee; border: 1px solid #9a9a9a; border-radius: 7px;
  padding: 9px 16px;
}
.mode-choice:has(input:checked) { background: #ffd94d; border-color: #111; font-weight: bold; }
.mode-choice input { margin-right: 8px; }
/* The Test explainer sits in the same row, in its own cell: it takes
   the row's remaining width and wraps inside that share, so the row
   stays button-height. Empty (hidden) while Guided is selected. */
.mode-note { flex: 1 1 220px; max-width: 460px; margin: 0; }
/* Test mode (v24): the countdown on the practice page, the time line
   on the results page, and the review step's per-step checkboxes.
   v25: the countdown is a badge at the RIGHT of its row — a bordered,
   tinted pill in bold text — and the under-5-minutes warning state
   turns it deep red so the change is impossible to miss. (The global
   [hidden] rule above is what hides the badge outside Test mode:
   .timer-line sets display, which would otherwise beat [hidden].) */
.timer-row { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.timer-line {
  display: inline-block; font-size: 20px; font-weight: bold;
  background: #f4f9ff; color: #1144cc;
  border: 2px solid #1144cc; border-radius: 999px; padding: 7px 18px;
}
.timer-line.timer-warn { background: #fdecea; border-color: #b3261e; color: #b3261e; }
.summary-time { font-size: 19px; font-weight: bold; }
.cr-review-check { display: block; cursor: pointer; }
.cr-review-check input { margin-right: 8px; }
/* Print (v14) — from the results summary, only the summary and its
   diagnostics print: no header, navigation, buttons, or practice view,
   and every table prints in full (no scroll boxes). */
@media print {
  body { background: #fff; font-size: 14px; }
  .site-header, .back-bar, .site-footer, .filter-actions { display: none !important; }
  #practice-view { display: none !important; }
  #cr-review-view { display: none !important; }
  .wrap { max-width: none; margin: 0; padding: 0; }
  .panel { border: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
  .bank-scroll { max-height: none; overflow: visible; border: none; border-radius: 0; }
  .diag-scroll { max-height: none; overflow: visible; }
  #summary-view .bank-scroll thead th { position: static; }
  table.bank { font-size: 12.5px; }
  .summary-score { font-size: 24px; }
}
@media (max-width: 640px) {
  .site-header .site-title { font-size: 25px; }
  /* Header buttons stack on narrow screens: title, buttons full-width,
     then nav, then the sub line. (display:contents lets the left column's
     children take part in the header grid's ordering.) */
  .head-grid { flex-direction: column; gap: 10px; }
  .head-left { display: contents; }
  .head-grid .site-title { order: 1; }
  .head-grid .head-btns { order: 2; width: 100%; }
  .head-grid .main-nav { order: 3; }
  .head-grid .site-sub { order: 4; }
  .panel h1 { font-size: 22px; }
  .q-prompt { font-size: 16.5px; }
}

/* ===== Algebra append: value-entry component (checked CR steps) ===== */
.ventry { margin:6px 0 12px; }
.ventry .kind-row { margin:0 0 8px; font-size:15.5px; }
.ventry .kind-btn { margin:0 5px 4px 0; padding:7px 12px; }
.ventry .kind-btn.on { background:#ffd94d; font-weight:bold; }
.ventry .ventry-main { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ventry .sign-slot { width:48px; height:52px; font-size:27px; font-weight:bold; border:1.5px solid #888; border-radius:6px; background:#fff; color:#aaa; padding:0; }
.ventry .sign-slot.neg { color:#111; }
.ventry .frac-stack { display:inline-flex; flex-direction:column; align-items:center; }
.ventry .frac-stack input, .ventry .int-input { width:74px; font:19px Arial, sans-serif; text-align:center; padding:6px 4px; border:1.5px solid #888; border-radius:6px; }
.ventry .int-input { width:96px; }
.ventry .frac-stack .bar { width:86px; border-top:3px solid #111; margin:5px 0; }
.ventry .undef-word { font-size:21px; font-weight:bold; padding:10px 4px; }
.ventry .ventry-preview { font-size:20px; margin-left:6px; }
.ventry .ventry-cap { font-size:13.5px; color:#555; margin-top:5px; }
.frac-wrap { display:inline-flex; align-items:center; vertical-align:middle; margin:0 2px; }
.frac-sign { display:inline-block; font-weight:bold; margin-right:5px; line-height:1; }
.check-btn { background:#2255cc; color:#fff; font-weight:700; border:2px solid #1a44a3; padding:9px 20px; font-size:15px; border-radius:8px; }
.check-btn:hover { background:#1a44a3; }
.cat-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; margin-top:14px; }
.cat-card { background:#fff; border:1px solid #9a9a9a; border-radius:10px; padding:16px 18px; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.cat-card h2 { font-size:20px; margin:0 0 6px; }