/* ==========================================================================
   PB_FOUNDATION_RECOVERY_V1
   Canonical typography + student-content presentation layer.
   This file intentionally loads LAST in base.html.
   ========================================================================== */

:root {
  --pb-font-ui:
    "Segoe UI Variable Text",
    "Segoe UI Variable",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;

  --pb-font-mono:
    "Cascadia Code",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;

  --pb-text-xs: 12px;
  --pb-text-sm: 13.5px;
  --pb-text-md: 15px;
  --pb-text-base: 16px;
  --pb-text-lg: 18px;
  --pb-text-question: 20px;

  --pb-h3: clamp(20px, 2vw, 23px);
  --pb-h2: clamp(25px, 3vw, 31px);
  --pb-h1: clamp(30px, 4vw, 42px);

  --pb-leading-tight: 1.2;
  --pb-leading-title: 1.28;
  --pb-leading-body: 1.62;
  --pb-leading-reading: 1.72;

  --pb-reading-width: 76ch;

  --pb-radius-sm: 10px;
  --pb-radius-md: 14px;
  --pb-radius-lg: 20px;

  --pb-content-border: rgba(125, 234, 209, .14);
  --pb-content-soft: rgba(255, 255, 255, .045);
}

/* --------------------------------------------------------------------------
   Global typography foundation
   -------------------------------------------------------------------------- */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
button,
input,
textarea,
select,
option,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
label,
small,
strong,
b,
span {
  font-family: var(--pb-font-ui);
}

body {
  font-size: var(--pb-text-base);
  line-height: var(--pb-leading-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--pb-font-ui) !important;
  text-wrap: balance;
}

h1 {
  font-size: var(--pb-h1);
  line-height: var(--pb-leading-tight);
  letter-spacing: -.035em;
}

h2 {
  font-size: var(--pb-h2);
  line-height: var(--pb-leading-title);
  letter-spacing: -.025em;
}

h3 {
  font-size: var(--pb-h3);
  line-height: var(--pb-leading-title);
  letter-spacing: -.018em;
}

p,
li {
  text-wrap: pretty;
}

small {
  font-size: var(--pb-text-xs);
  line-height: 1.45;
}

button,
input,
textarea,
select {
  font-size: var(--pb-text-md);
  line-height: 1.45;
}

/* Stop iOS/mobile browsers from zooming into answer fields. */
@media (max-width: 760px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   PRIMARY USER CONTENT
   Question text must look the same in Tutor / Variant / Diagnostics.
   -------------------------------------------------------------------------- */

.st-question,
.var-q,
.diag-q,
.demo-q,
.daily-q,
.diagnostic-question-card > h1,
.pb-written-prompt,
[data-pb-richtext],
.pb-rich-content {
  font-family: var(--pb-font-ui) !important;
  font-size: var(--pb-text-question) !important;
  font-weight: 600 !important;
  line-height: 1.62 !important;
  letter-spacing: -.012em !important;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  text-wrap: pretty;
}

/* Avoid legacy heading effects on actual exam question text. */
.diagnostic-question-card > h1 {
  margin: 0 0 24px !important;
  max-width: var(--pb-reading-width);

  color: var(--ink, #eaf0ee) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
}

/* --------------------------------------------------------------------------
   ANSWER OPTIONS
   -------------------------------------------------------------------------- */

.st-option,
.var-opt,
.diag-opt,
.demo-opt,
.diagnostic-option {
  font-family: var(--pb-font-ui) !important;
  font-size: var(--pb-text-base) !important;
  line-height: 1.5 !important;

  min-height: 52px;
}

.st-option b,
.var-opt > span:last-child,
.diagnostic-option-text,
.diag-opt,
.demo-opt {
  font-family: var(--pb-font-ui) !important;
  font-size: var(--pb-text-base) !important;
  font-weight: 550 !important;
  line-height: 1.5 !important;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: left;
}

/* Numeric labels are metadata, not competing typography. */
.st-option-index,
.var-lt,
.diagnostic-option-number,
.diag-opt .lt {
  font-family: var(--pb-font-ui) !important;
  font-size: var(--pb-text-xs) !important;
  line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   EXPLANATIONS / SOLUTIONS / COACH TEXT
   -------------------------------------------------------------------------- */

.expl-body,
.var-expl-body,
.st-explanation-body,
.st-coach-text,
.demo-sol,
.res-root p,
.pb-written-prompt,
.pb-feedback-copy,
.pb-debrief-copy,
.pb-rich-solution {
  font-family: var(--pb-font-ui) !important;
  font-size: var(--pb-text-base) !important;
  line-height: var(--pb-leading-reading) !important;
  letter-spacing: 0 !important;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   NORMALIZED METADATA SCALE
   -------------------------------------------------------------------------- */

.diag-badge,
.st-chip,
.var-topic,
.var-badge-lbl,
.diagnostic-question-meta,
.demo-badge,
.demo-meta,
.expl-kind,
.expl-tag,
.task-num,
.st-answer-label {
  font-family: var(--pb-font-ui) !important;
  line-height: 1.4 !important;
}

.task-title {
  font-family: var(--pb-font-ui) !important;
  font-size: var(--pb-text-sm) !important;
  line-height: 1.45 !important;
}

/* --------------------------------------------------------------------------
   FORM CONTROLS
   -------------------------------------------------------------------------- */

.num-answer-input,
.auth-inp,
.exam-choice-input,
textarea,
input[type="text"],
input[type="number"] {
  font-family: var(--pb-font-ui) !important;
  line-height: 1.45 !important;
}

/* --------------------------------------------------------------------------
   CONTENT RUNTIME
   -------------------------------------------------------------------------- */

.pb-rich-content {
  max-width: 100%;
}

.pb-rich-content strong {
  font-weight: 750;
  color: inherit;
}

.pb-rich-content .pb-code-block {
  display: block;

  width: 100%;
  max-width: 100%;

  margin: 18px 0;
  padding: 16px 18px;

  overflow-x: auto;

  border: 1px solid var(--pb-content-border);
  border-radius: var(--pb-radius-md);

  background:
    linear-gradient(
      145deg,
      rgba(6, 14, 25, .92),
      rgba(10, 21, 34, .88)
    );

  box-shadow:
    inset 0 1px rgba(255,255,255,.035);
}

.pb-rich-content .pb-code-block code {
  display: block;

  font-family: var(--pb-font-mono) !important;
  font-size: 14px !important;
  font-weight: 450 !important;
  line-height: 1.65 !important;

  white-space: pre;
  tab-size: 4;

  color: #e8f3ff;
}

.pb-code-language {
  display: block;

  margin: 0 0 9px;

  color: rgba(196, 229, 246, .58);
  font-family: var(--pb-font-ui) !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.2;

  text-transform: uppercase;
  letter-spacing: .08em;
}

/* --------------------------------------------------------------------------
   MATHJAX
   -------------------------------------------------------------------------- */

mjx-container {
  max-width: 100%;

  font-size: 1.03em !important;
  line-height: 1.3;

  overflow-x: auto;
  overflow-y: hidden;

  vertical-align: -.08em;
}

mjx-container[display="true"] {
  margin: 1em 0 !important;
  padding: .15em 0 .35em;

  text-align: left !important;
}

.st-option mjx-container,
.var-opt mjx-container,
.diagnostic-option mjx-container {
  font-size: 1em !important;
}

/* --------------------------------------------------------------------------
   GENERAL READING COMFORT
   -------------------------------------------------------------------------- */

.st-question,
.var-card,
.diagnostic-question-card,
.expl-card,
.diag-card {
  text-wrap: pretty;
}

.st-task-image,
.diagnostic-question-card img,
.var-card img,
.diag-card img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {

  body {
    font-size: 16px;
    line-height: 1.58;
  }

  .st-question,
  .var-q,
  .diag-q,
  .demo-q,
  .daily-q,
  .diagnostic-question-card > h1,
  .pb-written-prompt,
  [data-pb-richtext],
  .pb-rich-content {
    font-size: 18px !important;
    line-height: 1.58 !important;
    letter-spacing: -.008em !important;
  }

  .st-option,
  .var-opt,
  .diag-opt,
  .demo-opt,
  .diagnostic-option,
  .st-option b,
  .var-opt > span:last-child,
  .diagnostic-option-text {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
  }

  .pb-rich-content .pb-code-block {
    margin: 15px 0;
    padding: 14px;
    border-radius: 12px;
  }

  .pb-rich-content .pb-code-block code {
    font-size: 13px !important;
  }
}

/* PB_FOUNDATION_RECOVERY_V1_END */


/* ========================================================================
   PB_LIVE_SITE_NORMALIZATION_V1
   Real student-facing visual normalization.
   ======================================================================== */

:root {
  --pb-live-font:
    "Segoe UI Variable Text",
    "Segoe UI Variable",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif;

  --pb-live-question: 20px;
  --pb-live-option: 16px;
  --pb-live-body: 16px;
  --pb-live-meta: 13px;
}

/* Real product shell */
body,
.wrap,
.nav,
.menu,
.card,
.topic-page,
.diag,
.auth,
.st-shell,
.var-card,
.diagnostic-layout {
  font-family: var(--pb-live-font) !important;
}

/* All major headings use one family */
h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.logo-txt,
.topic-h,
.res-h,
.subj-name,
.exam-title,
.cab-sec-h,
.plan-title,
.sell-h,
.impact-h,
.rank-title {
  font-family: var(--pb-live-font) !important;
}

/* Actual task text */
.pb-task-content,
.st-question,
.var-q,
.diag-q,
.demo-q,
.daily-q,
.diagnostic-question-card > h1 {
  font-family: var(--pb-live-font) !important;
  font-size: var(--pb-live-question) !important;
  font-weight: 600 !important;
  line-height: 1.62 !important;
  letter-spacing: -.01em !important;

  color: var(--ink, #eaf0ee) !important;

  background: none !important;
  filter: none !important;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Actual option text */
.pb-option-content,
.st-option b,
.var-opt > span:last-child,
.diagnostic-option-text,
.diag-opt,
.demo-opt {
  font-family: var(--pb-live-font) !important;
  font-size: var(--pb-live-option) !important;
  font-weight: 550 !important;
  line-height: 1.52 !important;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Explanation / readable material */
.expl-body,
.var-expl-body,
.st-explanation-body,
.st-coach-text,
.demo-sol,
.pb-written-prompt,
.pb-feedback-copy,
.pb-debrief-copy {
  font-family: var(--pb-live-font) !important;
  font-size: var(--pb-live-body) !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
}

/* Metadata remains smaller, but consistent */
.st-chip,
.var-topic,
.diag-badge,
.diagnostic-question-meta,
.demo-badge,
.demo-meta,
.expl-kind,
.expl-tag,
.st-answer-label {
  font-family: var(--pb-live-font) !important;
  font-size: var(--pb-live-meta) !important;
  line-height: 1.4 !important;
}

/* Forms */
button,
input,
textarea,
select {
  font-family: var(--pb-live-font) !important;
}

/* Do not let legacy h1 gradient infect diagnostic questions */
.diagnostic-question-card > h1 {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Math stays mathematical: never override MathJax descendant glyph fonts. */
mjx-container {
  max-width: 100%;
}

/* Explicit renderer wrappers */
.pb-task-content,
.pb-option-content {
  display: inline;
}

/* Mobile */
@media (max-width:760px) {

  .pb-task-content,
  .st-question,
  .var-q,
  .diag-q,
  .demo-q,
  .daily-q,
  .diagnostic-question-card > h1 {
    font-size: 18px !important;
    line-height: 1.58 !important;
  }

  .pb-option-content,
  .st-option b,
  .var-opt > span:last-child,
  .diagnostic-option-text,
  .diag-opt,
  .demo-opt {
    font-size: 15.5px !important;
  }
}

/* PB_LIVE_SITE_NORMALIZATION_V1_END */


/* ========================================================================
   PB_STUDENT_UI_V2 — canonical student experience layer
   2026-09-11. Loaded last; intentionally scopes to student task surfaces.
   ======================================================================== */
:root {
  --pb-v2-bg: #08111f;
  --pb-v2-panel: rgba(14, 26, 43, .88);
  --pb-v2-panel-strong: rgba(17, 31, 50, .96);
  --pb-v2-line: rgba(146, 186, 214, .14);
  --pb-v2-line-strong: rgba(123, 232, 209, .26);
  --pb-v2-text: #edf6f7;
  --pb-v2-muted: #9eb1bf;
  --pb-v2-accent: #74e7d0;
  --pb-v2-accent-2: #82b7ff;
  --pb-v2-danger: #ff9d9d;
  --pb-v2-success: #85efbe;
  --pb-v2-shadow: 0 20px 54px rgba(0, 7, 18, .24);
  --pb-v2-card-radius: 22px;
}

.smart-task-page,
.var-page,
.diagnostic-layout {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.pb-st2-hero {
  margin: 0 0 22px !important;
  border: 1px solid var(--pb-v2-line) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 82% 16%, rgba(116,231,208,.12), transparent 30%),
    linear-gradient(145deg, rgba(17,31,50,.96), rgba(8,17,31,.92)) !important;
  box-shadow: var(--pb-v2-shadow) !important;
  overflow: hidden;
}

.pb-st2-hero-inner {
  min-height: 0 !important;
  padding: clamp(22px, 4vw, 40px) !important;
  gap: 28px !important;
}

.pb-st2-kicker,
.pb-st2-chip,
.pb-st2-orb-label {
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: .045em !important;
}

.pb-st2-title {
  margin: 8px 0 10px !important;
  max-width: 780px;
  font-size: clamp(30px, 4.4vw, 48px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

.pb-st2-lead {
  max-width: 720px !important;
  margin: 0 !important;
  color: var(--pb-v2-muted) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.pb-st2-meta {
  margin-top: 18px !important;
  gap: 8px !important;
}

.pb-st2-chip {
  min-height: 30px;
  padding: 6px 10px !important;
  border: 1px solid var(--pb-v2-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.035) !important;
  color: #c6d7df !important;
}

.pb-st2-actions {
  margin-top: 20px !important;
  gap: 10px !important;
}

.pb-st2-focus-toggle,
.pb-st2-back,
.btn,
.btn2 {
  min-height: 44px;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.st-shell {
  gap: 20px !important;
  align-items: start !important;
}

.st-card,
.var-card,
.diagnostic-question-card,
.explanation-block {
  border: 1px solid var(--pb-v2-line) !important;
  border-radius: var(--pb-v2-card-radius) !important;
  background: linear-gradient(145deg, rgba(18,32,51,.94), rgba(10,20,35,.92)) !important;
  box-shadow: 0 16px 42px rgba(0,7,18,.18) !important;
}

.st-task {
  padding: clamp(22px, 3.5vw, 34px) !important;
}

.st-question,
.var-q,
.diagnostic-question-card > h1 {
  max-width: 78ch;
  margin-top: 0 !important;
  color: var(--pb-v2-text) !important;
  font-size: clamp(18px, 1.7vw, 21px) !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
}

.st-answer-label,
.var-topic,
.diagnostic-question-meta {
  color: var(--pb-v2-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

.st-options {
  display: grid !important;
  gap: 10px !important;
}

.st-option,
.var-opt,
.diagnostic-option {
  width: 100%;
  min-height: 58px !important;
  padding: 14px 16px !important;
  gap: 12px !important;
  border: 1px solid var(--pb-v2-line) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--pb-v2-text) !important;
  text-align: left !important;
  transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
}

.st-option:hover,
.var-opt:hover,
.diagnostic-option:hover {
  border-color: var(--pb-v2-line-strong) !important;
  background: rgba(116,231,208,.07) !important;
  transform: translateY(-1px);
}

.st-option-index,
.diagnostic-option-number {
  flex: 0 0 30px;
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center;
  border-radius: 9px !important;
  background: rgba(130,183,255,.10) !important;
  color: #cfe0ff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.st-answer-input,
.num-answer-input,
.exam-choice-input {
  min-height: 52px !important;
  padding: 13px 15px !important;
  border: 1px solid var(--pb-v2-line) !important;
  border-radius: 14px !important;
  background: rgba(3,10,20,.50) !important;
  color: var(--pb-v2-text) !important;
  font-size: 16px !important;
}

.st-answer-input:focus,
.num-answer-input:focus,
.exam-choice-input:focus {
  outline: none !important;
  border-color: rgba(116,231,208,.58) !important;
  box-shadow: 0 0 0 3px rgba(116,231,208,.10) !important;
}

.st-result,
.st-coach,
.st-explanation,
.st-reflect,
.var-expl,
.root-gap-box {
  padding: clamp(18px, 3vw, 26px) !important;
}

.st-explanation-body,
.st-coach-text,
.var-expl-body,
.root-gap-hint,
.explanation-block p,
.exp-item p {
  color: #d5e1e6 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

.st-result.good {
  border-color: rgba(133,239,190,.28) !important;
}

.st-result.bad {
  border-color: rgba(255,157,157,.24) !important;
}

.var-page {
  padding-top: 8px;
}

.var-top {
  margin-bottom: 14px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--pb-v2-line) !important;
  border-radius: 18px !important;
  background: rgba(14,26,43,.72) !important;
}

.var-nav {
  gap: 7px !important;
  margin-bottom: 18px !important;
}

.var-nav-item {
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.var-card {
  padding: clamp(22px, 3.5vw, 34px) !important;
}

.explanation-block {
  margin: 14px 0 18px !important;
  padding: 16px 18px !important;
}

.diagnostic-question-card {
  padding: clamp(22px, 3.5vw, 34px) !important;
}

.diagnostic-option {
  margin-top: 10px !important;
}

/* MathJax owns descendant glyph fonts. */

[data-pb-recovery-mission-v1] small,
[data-pb-recovery-mission-v1] p,
.smart-task-page small {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

@media (max-width: 760px) {
  .smart-task-page,
  .var-page,
  .diagnostic-layout {
    width: min(100% - 20px, 1180px);
  }

  .pb-st2-hero {
    border-radius: 20px !important;
  }

  .pb-st2-hero-inner {
    padding: 20px !important;
  }

  .pb-st2-orb-zone {
    display: none !important;
  }

  .pb-st2-title {
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  .pb-st2-lead {
    font-size: 15px !important;
  }

  .st-shell {
    display: block !important;
  }

  .st-task,
  .var-card,
  .diagnostic-question-card {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  .st-question,
  .var-q,
  .diagnostic-question-card > h1 {
    font-size: 18px !important;
    line-height: 1.58 !important;
  }

  .st-option,
  .var-opt,
  .diagnostic-option {
    min-height: 54px !important;
    padding: 13px 12px !important;
    border-radius: 13px !important;
  }

  .var-nav {
    display: flex !important;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .var-nav-item {
    flex: 0 0 36px;
  }
}

/* PB_STUDENT_UI_V2_END */


/* PB_READABILITY_GUARD_V5 */
:root {
  --pb-focus-ring: #9ff6df;
  --pb-readable-muted: #a9bac7;
}

body {
  color: var(--pb-v2-text, #edf6f7);
}

.wrap small,
.wrap [style*="font-size: 12px"],
.wrap [style*="font-size: 12px"],
.wrap [style*="font-size: 12px"] {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--pb-focus-ring) !important;
  outline-offset: 3px !important;
}

button,
.btn,
.btn2,
input[type="submit"],
input[type="button"] {
  min-height: 44px;
}

::selection {
  color: #041019;
  background: #8ff2d8;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* PB_READABILITY_GUARD_V5_END */

/* PB_SMART_TOPIC_DEDUPLICATE_V6 */
.st-completion {
  display: grid;
  gap: 16px;
}

.st-exam-value {
  margin: 0;
  padding: 15px 17px;
  border: 1px solid rgba(103, 226, 174, .18);
  border-radius: 16px;
  color: var(--pb-readable-muted);
  line-height: 1.55;
  background: rgba(78, 208, 148, .055);
}

.st-exam-value strong {
  color: #8ff0c6;
}

@media (max-width: 560px) {
  .st-road {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 6px;
  }

  .st-road-step {
    flex: 0 0 auto;
    min-width: 104px;
  }
}
/* PB_SMART_TOPIC_DEDUPLICATE_V6_END */


/* PB_RESPONSIVE_OVERFLOW_GUARD_V7 */
.auth::before,
.auth:before {
  left: 50%;
  width: min(520px, 100%);
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .subjects-v2::before {
    right: 0;
    width: min(420px, 100%);
    height: 420px;
  }
}
/* PB_RESPONSIVE_OVERFLOW_GUARD_V7_END */