/* Pass the MSRA — reading preferences (theme + text size) */

/* Text size scales the reading content only. Chrome, counts and controls stay
   put: a student wants the stem and options larger, not the whole interface. */
html[data-ptm-text="small"]   { --ptm-read-scale: .92; }
html[data-ptm-text="default"] { --ptm-read-scale: 1; }
html[data-ptm-text="large"]   { --ptm-read-scale: 1.12; }
html[data-ptm-text="largest"] { --ptm-read-scale: 1.26; }

/* Reading content only. Navigation, counts, tabs and buttons keep a stable
   size: scaling those moves controls around without helping anyone read.
   `.ptm-question-body` was listed here but appears nowhere in the rendered
   markup, and `.ptm-stem` / `.ptm-lead-in` set a fixed 16px that this rule
   could not reach — so the preference visibly moved only the answer options. */
.ptm-stem,
.ptm-lead-in,
.ptm-options,
.ptm-explanation,
.ptm-feedback-title h3,
.ptm-review-body {
  font-size: calc(1rem * var(--ptm-read-scale, 1));
}

/* Dark theme -------------------------------------------------------------
   Applied to the plugin's own surfaces only. The surrounding theme is left
   alone: the question bank runs in a focus shell with the site header and
   footer hidden, so there is nothing else on screen to recolour. */
html[data-ptm-theme="dark"] .ptm-focus-app,
html[data-ptm-theme="dark"] .ptm-focus-content { background: #0f1626; color: #e6ebf5; }

html[data-ptm-theme="dark"] .ptm-focus-bar { background: #131c30; border-bottom-color: #24304a; }
html[data-ptm-theme="dark"] .ptm-focus-brand,
html[data-ptm-theme="dark"] .ptm-focus-context span,
html[data-ptm-theme="dark"] .ptm-focus-context a { color: #e6ebf5; }

/* .ptm-player-shell was here. It set a dark background and light text on the
   shell while the question card inside kept its own white background, so the
   card stayed white and its text turned pale — the options were barely legible.
   The player now themes itself through the tokens in player.css; the surfaces
   below are not yet tokenised and still need these overrides. */
/* The builder and dashboard surfaces that stood here — groups, tiles, panels,
   the tree, counts, hints and footnotes — now theme themselves through the
   tokens in builder.css and dashboard.css. Two colour sources for one surface
   drift apart, which is what happened to the player before 0.8.17.

   The accent-colour and icon rules below stay: they are form-control and image
   treatments that no token expresses. */
html[data-ptm-theme="dark"] .ptm-builder-option input,
html[data-ptm-theme="dark"] .ptm-chip input { accent-color: #5b7cff; }

/* .ptm-review-action and .ptm-review-filters were here, and .ptm-disclaimer's
   border. They belong to the player, which themes itself through the tokens in
   player.css; two colour sources for one surface drift apart. The chip and the
   dashboard tab stay: those surfaces are not tokenised yet. */

/* Preferences control ---------------------------------------------------- */
.ptm-prefs { position: relative; }
.ptm-prefs-open {
  align-items: center; background: none !important; border: 0; border-radius: 8px;
  color: inherit !important; cursor: pointer; display: inline-flex;
  height: 40px; justify-content: center; padding: 0 !important; width: 40px;
}
.ptm-prefs-open:hover { background: rgba(127, 143, 175, .16) !important; }
.ptm-prefs-open svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; width: 20px; }

.ptm-prefs-panel {
  background: #fff; border: 1px solid #e3e8ef; border-radius: 14px;
  box-shadow: 0 12px 28px rgba(11, 31, 58, .16);
  padding: 14px 16px; position: absolute; right: 0; top: 46px; z-index: 60;
  box-sizing: border-box; max-width: calc(100vw - 24px); width: 300px;
}
.ptm-prefs-panel.is-portal {
  max-height: calc(100dvh - 24px); overflow: auto; position: fixed;
  right: auto; z-index: 1000003;
}
html[data-ptm-theme="dark"] .ptm-prefs-panel { background: #17203a; border-color: #2c3a58; color: #e6ebf5; }

.ptm-prefs-panel fieldset { border: 0; margin: 0 0 12px; padding: 0; }
.ptm-prefs-panel fieldset:last-child { margin-bottom: 0; }
.ptm-prefs-panel legend { font-size: var(--ptm-ui-text-xs); font-weight: 700; letter-spacing: .06em; margin-bottom: 6px; padding: 0; text-transform: uppercase; }
.ptm-prefs-row { display: flex; gap: 6px; }
/* flex items default to min-width:auto, so `flex: 1 1 auto` let each choice
   refuse to shrink below its label and the three theme buttons burst the panel.
   Equal zero-basis columns that are allowed to shrink keep them inside it. */
.ptm-prefs-choice {
  align-items: center; border: 1px solid #cfd7e6; border-radius: 9px; cursor: pointer;
  display: flex; flex: 1 1 0; gap: 6px; justify-content: center; min-height: 40px;
  min-width: 0; overflow: hidden; padding: 0 6px; text-align: center;
}
.ptm-prefs-choice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptm-prefs-row:not(.ptm-prefs-sizes) .ptm-prefs-choice { font-size: var(--ptm-ui-text-sm); }
.ptm-prefs-choice input { flex: 0 0 auto; }
html[data-ptm-theme="dark"] .ptm-prefs-choice { border-color: #2c3a58; }
.ptm-prefs-choice input { margin: 0; }
.ptm-prefs-sizes .ptm-prefs-choice { flex-direction: column; gap: 2px; }
.ptm-prefs-size-small span[aria-hidden] { font-size: 11px; }
.ptm-prefs-size-default span[aria-hidden] { font-size: 14px; }
.ptm-prefs-size-large span[aria-hidden] { font-size: 17px; }
.ptm-prefs-size-largest span[aria-hidden] { font-size: 20px; }

.ptm-visually-hidden {
  border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; white-space: nowrap; width: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .ptm-prefs-open { transition: none; }
}

@media (max-width: 480px) {
  .ptm-prefs-panel.is-portal.is-bottom-sheet {
    bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; max-height: calc(100dvh - 24px);
    right: 12px; top: auto; width: auto;
  }
}

/* Specialty icons --------------------------------------------------------- */
.ptm-specialty-icon {
  border-radius: 6px;
  flex: 0 0 auto;
  height: 24px;
  object-fit: contain;
  width: 24px;
}
.ptm-specialty-icon-fallback {
  align-items: center;
  background: #eef2f8;
  color: #5b6472;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
}
html[data-ptm-theme="dark"] .ptm-specialty-icon-fallback { background: #24304a; color: #cdd6e6; }

/* Artwork is drawn for a light background; soften it slightly in dark mode
   rather than leaving bright white cut-outs on a navy surface. */
html[data-ptm-theme="dark"] img.ptm-specialty-icon { filter: brightness(.92) saturate(.95); }

.ptm-specialty-cell { align-items: center; display: flex; gap: 10px; }