/* ============================================================
   THE TOPIC QUESTION PAGE, AS THE OWNER'S MOCK-UP DRAWS IT
   (owner, 2026-10-07: "make the topic questions appearance look like
   this 1:1", a 1672px desktop picture of AP Physics C: E&M 8.1).

   The page, top to bottom:
     · the sheet, 982px centred in the track beside the rail. The title
       and the tabs stand 48px in from its left edge, over the question's
       words; the tabs are plain words, the active page in blue
       with the MCQ page's sliding underline, a hairline under both;
     · the question on the desk, no card: Q1 at the left and its marks at
       the right on one row, the words under them 48px in, a hairline;
     · the answer box: a quiet field with a left and a base line, the
       hint in the serif (upright), the Calculator in the top-right
       corner; the word count under it at the right;
     · View model answer at the left; the AI notice with its (i) and Mark
       answer, filled blue with its arrow, at the right;
     · the question bar across the track only (the rail runs on beside
       it): a hairline, Previous, seven numbered places, Next question,
       both buttons outlined, Next in blue.

   Loaded after every other stylesheet of the page but the reading sheet,
   so each rule here restyles the frozen hooks (grader.js, question-pager.js,
   tq-calc.js, tab-indicator.js) at their own weight or one class more.
   The rail and the topbar are the site's own and are not touched.
   Colours are tokens only.
   ============================================================ */

/* ---------- 1 · The column and the sheet ----------------------- */
/* The column takes the whole track beside the rail (the trail and the bar
   start at its left edge); everything else in it is the sheet's width,
   centred. width:100% stays from notebook-grader.css (the auto margins). */
.nb-qg-column.nb-qg-practice {
  max-width: none;
}
.nb-qg-practice > :not(.qg-pager) {
  max-width: 61.375rem; /* 982px */
  margin-inline: auto;
}

/* ---------- 3 · Title and tabs -------------------------------- */
.nb-qg-masthead {
  padding-left: var(--nb-s9);
}
.nb-qg-practice .nb-notes-header {
  margin: 0;
  text-align: left;
}
.nb-qg-practice .nb-notes-title {
  margin: 0;
  font: 600 2rem/1.25 var(--nb-sans);
  letter-spacing: -0.01em;
  text-align: left;
  text-wrap: pretty;
}
.nb-qg-practice .nb-qg-agg {
  vertical-align: 0.3em;
}

/* The same plain tabs and sliding underline as the MCQ page. */
.nb-qg-practice .nb-qg-modetabs {
  position: relative;
  display: flex;
  width: auto;
  gap: var(--nb-s6);
  margin: var(--nb-s7) 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--nb-border);
  border-radius: 0;
}
.nb-qg-practice .nb-qg-modetabs .questions-mode-tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 0;
  padding: var(--nb-s4) var(--nb-s2) var(--nb-s5);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: var(--nb-type-control);
  font-size: var(--nb-text-md);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  color: var(--nb-ink);
}
.nb-qg-practice .nb-qg-modetabs .questions-mode-tab:hover {
  color: var(--nb-blue);
}
.nb-qg-practice .nb-qg-modetabs .questions-mode-tab.is-active {
  background: transparent;
  box-shadow: inset 0 -3px 0 var(--nb-selection-soft-ink);
  font-weight: 500;
  color: var(--nb-selection-soft-ink);
}
.nb-qg-practice .nb-qg-modetabs.has-indicator .questions-mode-tab.is-active {
  box-shadow: none;
}
.nb-qg-practice .nb-qg-modetabs .qmt-indicator {
  top: auto !important;
  bottom: -1px !important;
  height: 3px !important;
  border: 0;
  border-radius: var(--nb-r-sm) var(--nb-r-sm) 0 0;
  background: var(--nb-selection-soft-ink);
  box-shadow: none;
  z-index: 2;
}
.nb-qg-practice .nb-qg-modetabs .questions-mode-tab:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: -2px;
  border-radius: var(--nb-r-sm);
}

/* ---------- 4 · The question on the desk ---------------------- */
.nb-qg-practice .nb-qg-body {
  margin-top: calc(var(--nb-s7) + var(--nb-s1));
}
/* No sheet any more, so nothing bleeds past its edge: the marked answer's
   rule and the model answer's panel (which reach out by --tq-pad) stay on
   the sheet's width. */
.nb-qg-practice .nb-tq-card.tq-paper {
  --tq-pad: 0px;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Q1 stands beside the question's first line, in a number column, as an
   MCQ's Q01 does (owner 2026-10-08: "on the same height but the q1 is
   beside the first word just like mcqs"); the marks keep the right of that
   line. The column is the MCQ's: 60px, then 32px to the words. A question
   that opens with its calculator line has Q1 beside that line, as an MCQ
   has. */
.nb-qg-practice .nb-tq-card .tq-q-head {
  grid-template-columns: 60px minmax(0, 1fr) auto;
  grid-template-areas: "no main meta";
  align-items: baseline;
  column-gap: var(--nb-s7);
  row-gap: var(--nb-s2);
}
.nb-qg-practice .nb-tq-card .tq-q-no {
  grid-area: no;
  font: 700 var(--nb-text-lg)/1.4 var(--nb-sans);
  letter-spacing: 0;
  color: var(--nb-feedback-ink);
}
.nb-qg-practice .nb-tq-card .nb-tq-meta {
  grid-area: meta;
  justify-self: end;
}
.nb-qg-practice .nb-tq-card .nb-tq-allocation {
  font: 700 1.125rem/1.4 var(--nb-sans);
}
.nb-qg-practice .nb-tq-card .tq-q-main {
  grid-area: main;
  padding-left: 0;
}
/* The words at the mock-up's size and measure (19px on a 30px line, about
   36em, so a long question keeps a reading line however wide the sheet). A
   question in parts runs its rows across the sheet, so each part's marks
   stand at the right edge under the total; the words in a row keep the
   measure. */
.nb-qg-practice .nb-tq-card .tq-question {
  font-size: 1.1875rem;
  line-height: 1.58;
}
.nb-qg-practice .nb-tq-card .tq-question:not(:has(.tq-parts)),
.nb-qg-practice .nb-tq-card .tq-question :is(.tq-stem, .tq-part-body) {
  max-width: 36em;
}
/* The phone's corner float kept the marks' place on the question's first
   line; the marks have their own row now, so it stands down everywhere. */
.nb-qg-practice .nb-tq-card .tq-question::before {
  content: none;
}
.nb-qg-practice .nb-tq-card .tq-rule {
  margin: var(--nb-s5) 0 var(--nb-s4);
}

/* ---------- 5 · The answer box -------------------------------- */
/* A field on the desk, a breath lighter than the page, and nothing else
   (owner 2026-10-09: "there is a black line here and on dark mode its white
   line, remove it the outline of the box"): no line down its left, none
   along its base, no edge at all in either theme; the site's rounded corner.
   The graph canvas and the table's writing slots are the same field
   (esa-tools.css --esa-tool-field), so every place a student writes on the
   page looks the same. */
html .nb-qg-practice .nb-tq-card .qg-input {
  min-height: 226px;
  padding: var(--nb-s5) var(--nb-s6);
  border: 0;
  border-radius: var(--nb-r-md);
  box-shadow: none;
}
html .nb-qg-practice .nb-tq-card .qg-input:not(.is-locked) {
  background: color-mix(in srgb, var(--nb-ink) 2.5%, var(--nb-paper));
}
/* Hovering changes nothing (owner 2026-10-07: "remove this black outline
   when hovering", both themes). */
html .nb-qg-practice .nb-tq-card .qg-input:hover:not(:focus):not(.is-locked) {
  border: 0;
  box-shadow: none;
}
/* Focus is one thin blue ring hugging the field (owner 2026-10-09: "make the
   blue outline when selecting the box thinner"). */
html .nb-qg-practice .nb-tq-card .qg-input:focus,
html .nb-qg-practice .nb-tq-card .qg-input:focus-visible {
  outline: 1px solid var(--nb-blue);
  outline-offset: 0;
  border: 0;
  box-shadow: none;
}
/* The hint in the site's own sans at the box's size, in the soft grey every
   placeholder on the site wears (owner 2026-10-09: "make the font of the
   placeholder text normal like the font we use everywhere"; 2026-10-08: the
   soft grey for placeholder text). */
html .nb-qg-practice .nb-tq-card .qg-input::placeholder {
  font-family: var(--nb-sans);
  font-size: var(--nb-text-md);
  font-style: normal;
  font-weight: 400;
  color: var(--nb-soft);
  opacity: 1;
}
/* A tool question whose every mark is the graph's, the table's or a tick
   box's: the box is there for working only, so it stands shorter and its
   words say so (owner 2026-10-09; _qg_card.html data-write="none"). */
html .nb-qg-practice .nb-tq-card .tq-input-wrap[data-write="none"] .qg-input {
  min-height: 112px;
}

/* The words never run under the Calculator in the corner. */
html .nb-qg-practice .nb-tq-card .tq-input-wrap.tqc-has-toggle .qg-input {
  padding-right: 148px;
  padding-bottom: var(--nb-s5);
}

/* The Calculator, closed: a plain word with its blue icon in the box's
   top-right corner, no pill (tq-calc.css draws the pill in the bottom-right
   corner). Open, it is in the sheet's head and keeps tq-calc.css's pressed
   look. */
.nb-qg-practice .tqc-has-toggle .tqc-toggle:not([data-ui-pressed="true"]) {
  top: 16px;
  right: 12px;
  bottom: auto;
  height: 36px;
  padding: 0 var(--nb-s2);
  gap: var(--nb-s3);
  background: transparent;
  border: 0;
  border-radius: var(--nb-r-md);
  font: 500 var(--nb-text-base)/1 var(--nb-sans);
  color: var(--nb-ink);
}
.nb-qg-practice .tqc-has-toggle .tqc-toggle:not([data-ui-pressed="true"]) svg {
  width: 20px;
  height: 20px;
  color: var(--nb-blue);
}
.nb-qg-practice .tqc-has-toggle .tqc-toggle:not([data-ui-pressed="true"]):hover {
  background: var(--nb-blue-wash);
}

/* ---------- 6 · Under the box --------------------------------- */
.nb-qg-practice .nb-tq-card .nb-tq-answer-meta {
  margin-top: var(--nb-s1);
  font-size: var(--nb-text-sm);
}
.nb-qg-practice .nb-tq-card .nb-tq-actions {
  gap: var(--nb-s6);
  margin-top: var(--nb-s4);
}
.nb-qg-practice .nb-tq-card .tq-reveal-btn {
  gap: 14px;
  padding: var(--nb-s1) 0;
  font: 500 var(--nb-text-base)/1.3 var(--nb-sans);
}
.nb-qg-practice .nb-tq-card .tq-reveal-btn > svg:first-child {
  width: 22px;
  height: 22px;
}
.nb-qg-practice .nb-tq-card .tq-reveal-chevron {
  width: 14px;
  height: 14px;
}
/* The AI notice wears an (i), as the mock-up draws it: the shared notice's
   spark stands down here and the circle is drawn as a mask in the ink. */
.nb-qg-practice .nb-tq-card .qg-ai-notice {
  gap: 14px;
  font-size: var(--nb-text-sm);
}
.nb-qg-practice .nb-tq-card .qg-ai-notice .ai-notice-ic {
  display: none;
}
.nb-qg-practice .nb-tq-card .qg-ai-notice::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7.6' r='0.4' fill='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7.6' r='0.4' fill='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Mark answer: filled blue, 46px, its arrow back after the words. */
.nb-qg-practice .nb-tq-card .tq-mark-btn {
  min-block-size: 46px;
  gap: var(--nb-s3);
  padding: 0 var(--nb-s3);
  border-radius: var(--nb-r-md);
  font: 600 var(--nb-text-base)/1.25 var(--nb-sans);
}
.nb-qg-practice .nb-tq-card .tq-mark-btn .tq-mark-icon {
  display: block;
  flex: none;
}
.nb-qg-practice .nb-tq-card .tq-mark-btn:disabled .tq-mark-icon {
  display: none;
}

/* ---------- 7 · The question bar ------------------------------ */
/* Its controls and its hairline run across the track only, from the
   trail's left edge to the window's gutter: Previous, the numbers and Next
   with room under them. The bar itself stays full-bleed desk, as before
   (notebook-grader.css section 10: still fixed, still tucking for the
   footer), so nothing passes beside it: a card-width bar let the footer
   show under the rail on a short page. The count and the progress line
   stand down, as the mock-up draws neither. From 861px, where the rail is
   out; a short window keeps the slim bar it has. */
@media (min-width: 861px) and (min-height: 501px) {
  .nb-qg-practice > .qg-pager {
    --tq-bar-start: calc(clamp(20px, 2.5vw, 48px) + 290px + var(--nb-s9));
    gap: var(--nb-s4);
    padding: var(--nb-s4) clamp(20px, 2.5vw, 48px) var(--nb-s4) var(--tq-bar-start);
    /* the desk under a hairline, not a slab laid over it: its dot grid held
       to the window so its dots sit on the page's at the top of the page.
       The reading sheet, which owns the study desk's tone, paints it in its
       colours (notebook-reading.css section 1); this is the paper under it. */
    background-color: var(--nb-paper);
    background-image: radial-gradient(var(--nb-grid-dot) 1px, transparent 1px);
    background-size: var(--nb-grid-size) var(--nb-grid-size);
    background-attachment: fixed;
    border-top: 0;
    box-shadow: none;
  }
  /* the rail's gap closes to 24px at 1100 and below (notebook-page.css) */
  @media (max-width: 1100px) {
    .nb-qg-practice > .qg-pager {
      --tq-bar-start: calc(clamp(20px, 2.5vw, 48px) + 290px + var(--nb-s6));
    }
  }
  /* The hairline (the progress rule's element, which stands down here). */
  .nb-qg-practice > .qg-pager::before {
    content: "";
    top: 0;
    left: var(--tq-bar-start);
    right: clamp(20px, 2.5vw, 48px);
    width: auto;
    height: 1px;
    background: var(--nb-border);
    transform: none;
    transition: none;
  }
  .nb-qg-practice > .qg-pager .qg-pager-progress {
    display: none;
  }
  .nb-qg-practice > .qg-pager .qg-pager-btn {
    min-block-size: 44px;
    gap: var(--nb-s3);
    padding: 0 var(--nb-s4);
    background: transparent;
    border: 1px solid var(--nb-border-strong);
    border-radius: var(--nb-r-md);
    font: 500 var(--nb-text-base)/1.25 var(--nb-sans);
    color: var(--nb-ink);
  }
  .nb-qg-practice > .qg-pager .qg-pager-btn svg {
    width: 18px;
    height: 18px;
  }
  .nb-qg-practice > .qg-pager .qg-pager-btn:hover:not(:disabled) {
    background: var(--nb-blue-wash);
    border-color: var(--nb-blue);
    color: var(--nb-blue);
  }
  /* A button at an end of the set keeps its words in the ink (no faded
     text, owner 2026-10-02); it just stops answering. */
  .nb-qg-practice > .qg-pager .qg-pager-btn:disabled {
    border-color: var(--nb-border);
    color: var(--nb-ink);
  }
  /* Next question: outlined in the student's blue, not filled. */
  .nb-qg-practice > .qg-pager .qg-pager-btn.qg-pager-next:not(:disabled) {
    background: transparent;
    border-color: color-mix(in srgb, var(--nb-blue) 45%, transparent);
    color: var(--nb-blue);
  }
  .nb-qg-practice > .qg-pager .qg-pager-btn.qg-pager-next:hover:not(:disabled) {
    background: var(--nb-blue-wash);
    border-color: var(--nb-blue);
    color: var(--nb-blue);
  }
  .nb-qg-practice > .qg-pager .qg-pager-nums {
    gap: var(--nb-s2);
    flex-wrap: nowrap;
  }
  .nb-qg-practice > .qg-pager .qg-pager-num {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--nb-s2);
    background: color-mix(in srgb, var(--nb-ink) 3%, transparent);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-r-md);
    font: 500 var(--nb-text-base)/1 var(--nb-sans);
    color: var(--nb-ink);
  }
  .nb-qg-practice > .qg-pager .qg-pager-num:hover:not(.is-current) {
    border-color: var(--nb-border-strong);
  }
  .nb-qg-practice > .qg-pager .qg-pager-num.is-current {
    background: var(--nb-blue);
    border-color: var(--nb-blue);
    box-shadow: none;
    color: var(--nb-on-blue);
  }
  .nb-qg-practice > .qg-pager .qg-pager-num[data-grade-state="full"]:not(.is-current) {
    border-color: var(--nb-success);
    color: var(--nb-success);
  }
  .nb-qg-practice > .qg-pager .qg-pager-num:is([data-grade-state="partial"], [data-grade-state="zero"]):not(.is-current) {
    border-color: var(--nb-red);
    color: var(--nb-red);
  }
  .nb-qg-practice > .qg-pager .qg-pager-gap {
    min-width: 36px;
    padding: 0;
    text-align: center;
    color: var(--nb-ink);
  }
}
/* Under 1200px the track is too narrow for both labelled buttons beside a
   set's seven places (at 1024 Previous ran into 1, and 10 into Next): the
   buttons keep their arrows, square, as the short-window bar does. */
@media (min-width: 861px) and (max-width: 1199px) and (min-height: 501px) {
  .nb-qg-practice > .qg-pager .qg-pager-prev > span,
  .nb-qg-practice > .qg-pager .qg-pager-next > span {
    display: none;
  }
  .nb-qg-practice > .qg-pager .qg-pager-prev,
  .nb-qg-practice > .qg-pager .qg-pager-next {
    min-inline-size: 44px;
    padding-inline: 0;
  }
}
/* The theme toggle's lane (it shows from 1024px): Next ends 80px from the
   window's edge, and the toggle sits level with the buttons. */
@media (min-width: 1024px) and (min-height: 501px) {
  html .nb-qg-practice > .qg-pager {
    padding-right: var(--ft-theme-lane, 80px);
  }
}

/* ---------- 8 · Narrower screens ------------------------------ */
/* Under 861px the rail is a drawer and the thumb bar moves between
   questions: the trail stands down (the page stays as light as it was),
   the title and tabs come back to the edge, and the words take the width. */
@media (max-width: 860px) {
  .nb-qg-masthead {
    padding-left: 0;
  }
  .nb-qg-practice .nb-notes-title {
    font-size: var(--nb-text-2xl);
  }
  .nb-qg-practice .nb-qg-modetabs {
    margin-top: var(--nb-s5);
    flex-wrap: wrap;
    gap: var(--nb-s5);
  }
}
@media (max-width: 600px) {
  .nb-qg-practice .nb-notes-title {
    font-size: var(--nb-text-xl);
  }
  .nb-qg-practice .nb-qg-modetabs .questions-mode-tab {
    flex: 0 1 auto;
    white-space: normal;
    text-align: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--nb-s3) var(--nb-s1) var(--nb-s4);
    font-size: var(--nb-text-base);
  }
  /* a phone: the MCQ's narrower number column, and the marks under the
     words at the right, so the question keeps the line's width */
  .nb-qg-practice .nb-tq-card .tq-q-head {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "no main"
      ". meta";
    column-gap: var(--nb-s3);
  }
  .nb-qg-practice .nb-tq-card .tq-question {
    font-size: var(--nb-text-md);
  }
  html .nb-qg-practice .nb-tq-card .qg-input {
    min-height: 200px;
    padding: var(--nb-s4);
  }
  /* The Calculator takes a row of its own over the words. */
  html .nb-qg-practice .nb-tq-card .tq-input-wrap.tqc-has-toggle .qg-input {
    padding: 60px var(--nb-s4) var(--nb-s4);
  }
  .nb-qg-practice .tqc-has-toggle .tqc-toggle:not([data-ui-pressed="true"]) {
    top: 10px;
    right: 8px;
  }
  .nb-qg-practice .nb-tq-card .qg-ai-notice {
    gap: var(--nb-s2);
    font-size: var(--nb-text-xs);
  }
}