/* page-specific styles, colors come from tokens.css */
:root {
  color-scheme: dark;
  --line: var(--border);
  --line-soft: var(--border-soft);
  --answer: #75d6a4;
  --answer-dim: rgba(117, 214, 164, 0.10);
  --answer-line: rgba(117, 214, 164, 0.32);
  --warn: #f3b35f;
  --warn-dim: rgba(243, 179, 95, 0.10);
  --warn-line: rgba(243, 179, 95, 0.34);
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; background: var(--bg) }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body), "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit }
a { color: inherit }
img { max-width: 100%; display: block }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, var(--accent-dim), transparent 28rem),
    radial-gradient(circle at 92% 24%, rgba(224, 96, 126, .06), transparent 24rem);
  z-index: -1;
}

.top {
  padding: max(30px, env(safe-area-inset-top)) 18px 30px;
  border-bottom: 1px solid var(--accent-line);
  background: linear-gradient(145deg, rgba(200, 73, 106, .20), rgba(12, 10, 11, .72));
}
.top-inner, main, .sticky-inner { width: min(var(--content-w), 100%); margin-inline: auto }
.eyebrow { margin: 0 0 5px; color: var(--accent-hi); font-family: var(--font-mono); font-size: .82rem }
h1, h2, h3, h4 { font-family: var(--font-head), "Noto Sans Thai", system-ui, sans-serif }
h1 { margin: 0; font-size: clamp(1.8rem, 7vw, 3rem); line-height: 1.18 }
.lead { margin: 13px 0 0; max-width: 700px; color: var(--text-muted) }

.sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid var(--line);
  background: rgba(12, 10, 11, .88);
  backdrop-filter: blur(16px);
}
.sticky-inner { display: flex; gap: 8px; padding: 9px 14px; overflow-x: auto; scrollbar-width: none }
.sticky-inner::-webkit-scrollbar { display: none }
.nav-btn {
  flex: 0 0 auto;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.nav-btn:hover { color: var(--text); border-color: var(--accent-line); background: var(--accent-dim) }

main { padding: 22px 14px 80px }
.notice {
  margin-bottom: 18px;
  padding: 15px 16px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-lg);
  background: var(--warn-dim);
}
.notice strong { color: var(--warn) }
.section-title { margin: 32px 2px 13px; font-size: 1.38rem }

.answer-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 8px; margin-bottom: 24px }
.key {
  min-height: 58px;
  display: grid;
  place-items: center;
  line-height: 1.1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--transition), border-color var(--transition);
}
.key:hover { transform: translateY(-2px); border-color: var(--accent-line) }
.key span { color: var(--text-faint); font-family: var(--font-mono); font-size: .74rem }
.key b { color: var(--answer) }
.key.free { border-color: var(--warn-line); background: var(--warn-dim) }
.key.free b { color: var(--warn); font-size: .8rem }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px }
.toolbar button {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--surface);
  cursor: pointer;
}
.toolbar button:hover { color: var(--text); border-color: var(--accent-line) }

.question-card, .worked {
  margin: 13px 0;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(20, 17, 19, .92);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 74px;
}
.question-card.is-free { border-color: var(--warn-line) }
.question-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px }
.qno { color: var(--accent-hi); font-family: var(--font-mono); font-weight: 700 }
.badge { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700 }
.badge.free { color: var(--warn); background: var(--warn-dim) }
h3 { margin: 0 0 14px; font-size: 1.06rem; line-height: 1.55 }
h4 { margin: 22px 0 10px; color: var(--text-muted); font-size: .94rem }

.options { display: grid; gap: 8px; margin: 13px 0 }
.option { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-2) }
.scan { margin: 14px 0; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff }
.scan img { width: 100%; height: auto; border-radius: var(--radius-sm) }
figcaption { margin-top: 7px; color: #5c5258; font-size: .78rem; text-align: center }

.answer {
  margin-top: 15px;
  padding: 14px 15px;
  border: 1px solid var(--answer-line);
  border-radius: var(--radius);
  background: var(--answer-dim);
}
.answer-title { color: var(--answer); font-family: var(--font-mono); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em }
.answer strong { display: block; margin: 3px 0 5px; color: var(--answer); font-size: 1.04rem }
.answer p { margin: 0 }

.diagram-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px }
.diagram-card { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2) }
canvas { display: block; width: 100%; aspect-ratio: 5 / 3; border-radius: var(--radius-sm); background: #fff }
.diagram-card p { margin: 9px 2px 0; font-size: .92rem }

.given-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 12px 0 }
.given { display: grid; gap: 2px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-2) }
.given-label { color: var(--text-faint); font-size: .76rem; font-weight: 600 }

.math {
  overflow-x: auto;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #100d0f;
}
.math p { margin: 6px 0 12px; color: var(--text-muted) }
.formula-title, .step-label { color: var(--text-muted); font-size: .84rem; font-weight: 600 }
.formula-title:not(:first-child) { margin-top: 16px }
.step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0 }
.step + .step { border-top: 1px solid var(--line-soft) }
.step-no { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-hi); background: var(--accent-dim); font-family: var(--font-mono); font-weight: 700 }
.display-tex { overflow-x: auto; overflow-y: hidden }
.katex-display { margin: .8em 0 !important; overflow-x: auto; overflow-y: hidden; padding: 2px }
.katex { font-size: 1.08em }

.final {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--answer-line);
  border-radius: var(--radius);
  color: var(--answer);
  background: var(--answer-dim);
  text-align: center;
}
.final > span { font-size: .76rem; font-family: var(--font-mono); text-transform: uppercase }
.final strong { font-size: 1.08rem }
.hidden-by-filter { display: none }
footer { padding: 24px 12px 42px; color: var(--text-faint); text-align: center; font-size: .83rem }

@media (max-width: 620px) {
  body { font-size: 15.5px }
  .diagram-grid, .given-grid { grid-template-columns: 1fr }
  .question-card, .worked { padding: 15px }
  .top { padding-inline: 15px }
  .katex { font-size: 1em }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { transition-duration: .01ms !important }
}

@media print {
  :root { color-scheme: light }
  .sticky, .toolbar { display: none }
  body { color: #111; background: #fff }
  body::before { display: none }
  .question-card, .worked { break-inside: avoid; box-shadow: none; background: #fff }
  .option, .math, .given, .diagram-card { color: #111; background: #fff }
  .answer { color: #111; background: #f4fff8 }
}


/* highlighted answers */
.option {
  transition: border-color var(--transition), background var(--transition), opacity var(--transition);
}

.option.muted-option {
  color: var(--text-muted);
  opacity: .48;
}

.option.correct-option {
  position: relative;
  color: var(--text);
  opacity: 1;
  border-color: var(--answer-line);
  background: var(--answer-dim);
  box-shadow: inset 3px 0 0 var(--answer);
}

.option.correct-option::before {
  content: "✓ คำตอบที่ถูก";
  display: block;
  margin-bottom: 5px;
  color: var(--answer);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.option-note {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--answer-line);
}

.option-note-label,
.free-solution-label {
  margin-bottom: 3px;
  color: var(--answer);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
}

.option-note-text,
.free-solution-detail {
  color: var(--text);
}

.free-solution {
  margin-top: 10px;
  padding: 13px 14px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-dim);
}

.free-solution-label {
  color: var(--warn);
}

.free-solution strong {
  display: block;
  margin-bottom: 5px;
  color: var(--warn);
}

.memory-note {
  margin: 10px 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-dim);
  text-align: center;
}

.memory-note strong {
  color: var(--accent-hi);
  font-family: var(--font-mono);
  font-size: 1.05rem;
}

/* mobile previous / next controls */
main {
  padding-bottom: 118px;
}

.floating-pager {
  position: fixed;
  z-index: calc(var(--z-nav) + 1);
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: min(620px, calc(100% - 24px));
  margin-inline: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
}

.pager-button {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), opacity var(--transition);
}

.pager-button:last-child {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--accent-dim);
}

.pager-button:disabled {
  opacity: .28;
  cursor: default;
}

.pager-progress {
  min-width: 78px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .76rem;
  text-align: center;
}

@media (max-width: 460px) {
  .floating-pager {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: calc(100% - 16px);
  }

  .pager-button {
    padding-inline: 8px;
    font-size: .87rem;
  }

  .pager-progress {
    min-width: 60px;
    font-size: .68rem;
  }
}

@media print {
  .floating-pager {
    display: none;
  }
}