/* ExamStudyAid — the topic question answer sheet with its maths keys (tq-calc.js).

   Owner 2026-10-02: options A (keys in the answer box) and D (type it, with a
   shortcuts card behind an info button) together. The answer is a short ruled
   sheet of lines; a line is words or maths (typeset as it is typed, MathLive).
   Keys in the tray type straight into the line being written. Tokens only: the
   sheet follows the notebook in both themes. Mark answer stays the one primary
   button on the card, so nothing here is a filled blue button. */

.tqc {
  container: tqc / inline-size;
  --tqc-key: 40px;
  --tqc-gap: 4px;
  --tqc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  color: var(--nb-ink);
  font-family: var(--nb-sans);
}
.tqc *,
.tqc *::before,
.tqc *::after { box-sizing: border-box; }

/* The textarea stays in the form (the grader, the draft and the pager read it),
   out of sight but focusable by script. */
.tqc-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

/* ── The sheet ─────────────────────────────────────────────────────────── */
.tqc-sheet {
  position: relative;
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-control-border);
  border-radius: var(--nb-r-md);
  overflow: hidden;
  transition: border-color 160ms var(--tqc-ease), box-shadow 160ms var(--tqc-ease);
}
.tqc-sheet:hover { border-color: var(--nb-border-strong); }
.tqc-sheet:focus-within {
  border-color: var(--nb-blue);
  box-shadow: 0 0 0 1px var(--nb-blue);
}
.tqc.is-locked .tqc-sheet { border-color: var(--nb-border); box-shadow: none; }

.tqc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-s2);
  padding: 8px 8px 0 10px;
}

/* Words or maths, for the line being written */
.tqc-mode {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--nb-r-pill);
  background: var(--nb-paper-sunken);
}
.tqc-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: var(--nb-r-pill);
  background: transparent;
  color: var(--nb-ink);
  font: 600 var(--nb-text-sm)/1 var(--nb-sans);
  cursor: pointer;
  transition: background-color 160ms var(--tqc-ease), color 160ms var(--tqc-ease);
}
.tqc-mode-btn svg { width: 16px; height: 16px; flex: none; }
.tqc-mode-btn:hover { background: var(--nb-paper-raised); }
.tqc-mode-btn[data-ui-pressed="true"] {
  background: var(--nb-selection-fill);
  color: var(--nb-selection-ink);
}
.tqc-mode-btn:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }

.tqc-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-pill);
  background: transparent;
  color: var(--nb-ink);
  font: 600 var(--nb-text-sm)/1 var(--nb-sans);
  cursor: pointer;
  transition: border-color 160ms var(--tqc-ease), background-color 160ms var(--tqc-ease);
}
.tqc-help svg { width: 18px; height: 18px; flex: none; }
.tqc-help:hover,
.tqc-help[data-ui-expanded="true"] { border-color: var(--nb-border-strong); background: var(--nb-paper-sunken); }
.tqc-help:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }

/* ── The lines ─────────────────────────────────────────────────────────── */
.tqc-lines {
  padding: 8px 6px 10px;
  min-height: 128px;
  cursor: text;
}
.tqc-line {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 10px 0 34px;
  border-radius: var(--nb-r-sm);
  transition: background-color 160ms var(--tqc-ease);
}
.tqc-line + .tqc-line { margin-top: 2px; }
/* the ruled line of the sheet, under every line but the last */
.tqc-line:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 10px;
  bottom: -1px;
  height: 1px;
  background: var(--nb-border);
  pointer-events: none;
}
.tqc-line.is-active { background: color-mix(in srgb, var(--nb-blue) 7%, transparent); }

/* the margin says what the line is: words, or maths */
.tqc-tag {
  position: absolute;
  left: 6px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  display: grid;
  place-items: center;
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-sm);
  color: var(--nb-ink);
  font: 600 var(--nb-text-xs)/1 var(--nb-sans);
  pointer-events: none;
  transition: border-color 160ms var(--tqc-ease), color 160ms var(--tqc-ease);
}
.tqc-tag svg { width: 14px; height: 14px; }
.tqc-line.is-active .tqc-tag { border-color: var(--nb-blue); color: var(--nb-blue); }

.tqc-text {
  display: block;
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 9px 0;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--nb-ink);
  font: 400 var(--nb-text-md)/1.65 var(--nb-sans);
}
/* an empty line's prompt is the ink at half strength, in italic (owner
   2026-10-02: full ink read "too opaque" in the answer box) */
.tqc { --tqc-prompt: color-mix(in srgb, var(--nb-ink) 50%, transparent); }
.tqc-text::placeholder {
  color: var(--tqc-prompt);
  font-style: italic;
  opacity: 1;
}

.tqc-mathline {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--nb-ink);
  font-size: var(--nb-text-lg);
  --caret-color: var(--nb-blue);
  --selection-background-color: var(--nb-selection-wash);
  --selection-color: var(--nb-ink);
  --contains-highlight-background-color: var(--nb-selection-wash);
  --placeholder-color: var(--nb-ink);
  --placeholder-opacity: 1;
  --primary: var(--nb-blue);
  --smart-fence-color: var(--nb-ink);
  --smart-fence-opacity: 0.6;
}
/* the maths line's prompt matches the words line's, not MathLive's own grey */
.tqc-mathline::part(placeholder) { color: var(--tqc-prompt); font-style: italic; opacity: 1; }
.tqc-mathline::part(virtual-keyboard-toggle),
.tqc-mathline::part(menu-toggle) { display: none; }
.tqc-mathline::part(container) { min-height: 32px; }
.tqc-mathline::part(content) { padding: 2px 0; }
/* before MathLive arrives a maths line is drawn by KaTeX */
.tqc-static { display: block; padding: 8px 0; font-size: var(--nb-text-lg); min-height: 44px; }

.tqc.is-locked .tqc-lines { cursor: default; }
.tqc.is-locked .tqc-line.is-active { background: transparent; }

/* ── The tray of keys ──────────────────────────────────────────────────── */
.tqc-tray {
  border-top: 1px solid var(--nb-border);
  background: var(--nb-paper-sunken);
  padding: 8px;
}
.tqc-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.tqc-group { display: flex; gap: var(--tqc-gap); }
.tqc-key {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: var(--tqc-key);
  height: var(--tqc-key);
  padding: 0 8px;
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-sm);
  background: var(--nb-paper-raised);
  color: var(--nb-ink);
  font: 500 var(--nb-text-base)/1 var(--nb-sans);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 140ms var(--tqc-ease), border-color 140ms var(--tqc-ease), box-shadow 140ms var(--tqc-ease);
}
.tqc-key .katex { font-size: 1.08em; line-height: 1; }
/* a face is one unbroken piece; tq-calc.js sets it smaller when its box is too small */
.tqc-face { display: inline-block; line-height: 1; white-space: nowrap; }
.tqc-key:hover {
  border-color: var(--nb-border-strong);
  box-shadow: var(--nb-shadow-1);
  transform: translateY(-1px);
}
.tqc-key:active { transform: translateY(0) scale(0.96); box-shadow: none; }
.tqc-key:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }
.tqc-key:disabled { cursor: default; transform: none; box-shadow: none; color: var(--nb-quiet-2); }

.tqc-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--tqc-key);
  margin-left: auto;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: var(--nb-r-sm);
  background: transparent;
  color: var(--nb-blue);
  font: 600 var(--nb-text-sm)/1 var(--nb-sans);
  cursor: pointer;
}
.tqc-more svg { width: 16px; height: 16px; transition: transform 220ms var(--tqc-ease); }
.tqc-more[data-ui-expanded="true"] svg { transform: rotate(180deg); }
.tqc-more:hover { background: var(--nb-paper-raised); }
.tqc-more:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }

/* the drawer opens to the full board for the subject */
.tqc-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms var(--tqc-ease);
}
.tqc-drawer.is-open { grid-template-rows: 1fr; }
.tqc-drawer-inner { overflow: hidden; min-height: 0; }
.tqc-drawer.is-open .tqc-drawer-inner { padding-top: 10px; }
.tqc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--nb-border);
}
.tqc-tab {
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--nb-r-pill);
  background: transparent;
  color: var(--nb-ink);
  font: 600 var(--nb-text-sm)/1 var(--nb-sans);
  cursor: pointer;
}
.tqc-tab:hover { border-color: var(--nb-border); background: var(--nb-paper-raised); }
.tqc-tab[data-ui-selected="true"] { background: var(--nb-selection-fill); color: var(--nb-selection-ink); border-color: transparent; }
.tqc-tab:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }
.tqc-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tqc-key), 1fr));
  gap: var(--tqc-gap);
  /* a key that spans two cells leaves no hole at a row's end */
  grid-auto-flow: row dense;
}
.tqc-board .tqc-key { width: 100%; padding: 0 4px; }
.tqc-board .tqc-key--wide { grid-column: span 2; }

/* ── The shortcuts card ────────────────────────────────────────────────── */
.tqc-pop {
  position: absolute;
  z-index: 30;
  top: 46px;
  left: 6px;
  right: 6px;
  max-height: min(620px, calc(100vh - 96px));
  overflow: auto;
  padding: 18px 20px 16px;
  background: var(--nb-paper-raised);
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-lg);
  box-shadow: var(--nb-shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top right;
  transition: opacity 170ms var(--tqc-ease), transform 170ms var(--tqc-ease), visibility 0s linear 170ms;
}
.tqc-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 170ms var(--tqc-ease), transform 170ms var(--tqc-ease), visibility 0s;
}
.tqc-pop-title { margin: 0; font: 600 var(--nb-text-base)/1.3 var(--nb-sans); }
.tqc-pop-lede { margin: 4px 0 12px; font: 400 var(--nb-text-sm)/1.5 var(--nb-sans); }
.tqc-pop-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 22px;
}
.tqc-pop-group { margin: 0; }
.tqc-pop-group-title { margin: 8px 0 4px; font: 600 var(--nb-text-sm)/1.3 var(--nb-sans); }
.tqc-sc {
  display: grid;
  grid-template-columns: 58px 52px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 2px 0;
  border-top: 1px solid var(--nb-border);
}
.tqc-sc kbd {
  justify-self: start;
  padding: 3px 7px;
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-sm);
  background: var(--nb-paper-sunken);
  color: var(--nb-ink);
  font: 600 var(--nb-text-sm)/1.2 ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  white-space: nowrap;
}
.tqc-sc-out { padding: 4px 0; }
.tqc-sc-out .katex { font-size: 1.05em; }
.tqc-sc-label { font: 500 var(--nb-text-sm)/1.35 var(--nb-sans); }
.tqc-pop-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--nb-border);
  font: 500 var(--nb-text-sm)/1.5 var(--nb-sans);
}
.tqc-pop-keys kbd {
  padding: 1px 6px;
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-sm);
  font: 600 var(--nb-text-xs)/1.4 var(--nb-sans);
}

/* the key's name and its shortcut, above the key (a fine pointer) */
.tqc-tip {
  position: absolute;
  z-index: 31;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-sm);
  background: var(--nb-paper-raised);
  box-shadow: var(--nb-shadow-2);
  color: var(--nb-ink);
  font: 500 var(--nb-text-sm)/1.2 var(--nb-sans);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 140ms var(--tqc-ease), transform 140ms var(--tqc-ease);
}
.tqc-tip.is-on { opacity: 1; transform: none; }
.tqc-tip kbd {
  padding: 2px 6px;
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-sm);
  background: var(--nb-paper-sunken);
  font: 600 var(--nb-text-xs)/1.2 ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

@container tqc (max-width: 640px) {
  .tqc-pop-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Phones: two rows of keys, the card rises from the bottom ─────────── */
@media (max-width: 720px) {
  .tqc { --tqc-key: 42px; }
  .tqc-help-label { display: none; }
  .tqc-help { padding: 0 7px; }
  .tqc-keys { gap: 6px; }
  .tqc-group { display: contents; }
  .tqc-keys .tqc-key { flex: 1 0 calc((100% - 30px) / 6); min-width: 0; padding: 0 2px; }
  .tqc-more { flex: 1 0 100%; justify-content: center; margin-left: 0; }
  .tqc-pop {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 72vh;
    transform: translateY(16px);
    transform-origin: bottom center;
  }
  .tqc-pop-cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tqc-sheet,
  .tqc-key,
  .tqc-mode-btn,
  .tqc-help,
  .tqc-line,
  .tqc-more svg,
  .tqc-drawer,
  .tqc-pop,
  .tqc-pop.is-open { transition: none; }
  .tqc-key:hover,
  .tqc-key:active { transform: none; }
  .tqc-tip { transition: none; transform: none; }
  .tqc-pop { transform: none; }
}

/* ── The Calculator button (owner 2026-10-04) ──────────────────────────────
   The answer box is the plain text box, with this button in its bottom-right
   corner on every question of a subject with the sheet. Pressed, the sheet takes
   the box's place and the button moves to the sheet's head, beside Shortcuts,
   in the pen's wash so it reads as on; pressed again it closes the sheet. It
   wears the sheet's own quiet chrome (the Shortcuts button), never the filled
   blue of Mark answer. The text box keeps a strip at its foot, so words never
   run under the button, and the resize grip in the corner stays free. */
.tqc-has-toggle .qg-input { padding-bottom: 52px; }
.tqc-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 9px;
  border: 1px solid var(--nb-border-strong);
  border-radius: var(--nb-r-pill);
  background: var(--nb-paper-raised);
  color: var(--nb-ink);
  font: 600 var(--nb-text-sm)/1 var(--nb-sans);
  cursor: pointer;
  transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tqc-toggle svg { width: 18px; height: 18px; flex: none; }
.tqc-toggle:hover { background: var(--nb-paper-sunken); }
.tqc-toggle:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }
.tqc-toggle[data-ui-pressed="true"] {
  position: static;
  border-color: var(--nb-blue);
  background: var(--nb-blue-wash);
  color: var(--nb-blue);
}
.tqc-head-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* a finger needs the bigger target; the strip under the words grows with it */
@media (pointer: coarse) {
  .tqc-toggle { height: 40px; }
  .tqc-has-toggle .qg-input { padding-bottom: 60px; }
  /* in the head the two buttons are one size, round when they show only an icon */
  .tqc-head-end .tqc-help { height: 40px; }
  .tqc-head-end :is(.tqc-help, .tqc-toggle) { min-width: 40px; justify-content: center; }
}
/* a phone's sheet head holds Words, Maths and two icon buttons: in the head the
   button keeps only its icon, as Shortcuts does there */
@media (max-width: 720px) {
  .tqc-head-end .tqc-toggle { padding: 0 7px; }
  .tqc-head-end .tqc-toggle-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tqc-toggle { transition: none; }
}