/* SAT Hard Question Builder */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

/* ── Tokens ── */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;
  --font-body: 'General Sans', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --r-sm: 0.375rem; --r-md: 0.5rem; --r-lg: 0.75rem; --r-full: 9999px;
  --ease: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --max-w: 960px;
}

/* ── Light (default) ── */
:root, [data-theme="light"] {
  --c-bg: #f5f6fa; --c-surface: #fff; --c-surface2: #f8f9fc;
  --c-offset: #eef0f5; --c-border: #d8dce6; --c-border2: #c0c5d3; --c-divider: #e2e5ed;
  --c-text: #1a1d27; --c-muted: #5c6173; --c-faint: #9ba0b0; --c-inv: #fff;
  --c-pri: #2563eb; --c-pri-h: #1d4ed8; --c-pri-a: #1e40af; --c-pri-s: #dbeafe;
  --c-ok: #16a34a; --c-ok-bg: #dcfce7; --c-ok-b: #86efac;
  --c-warn: #d97706; --c-warn-bg: #fef3c7; --c-warn-b: #fcd34d;
  --c-err: #dc2626; --c-err-bg: #fee2e2; --c-err-b: #fca5a5;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

/* ── Dark ── */
[data-theme="dark"] {
  --c-bg: #0f1117; --c-surface: #1a1d27; --c-surface2: #22252f;
  --c-offset: #161820; --c-border: #2e3241; --c-border2: #3d4255; --c-divider: #252836;
  --c-text: #e4e5eb; --c-muted: #9ba0b0; --c-faint: #5c6173; --c-inv: #1a1d27;
  --c-pri: #60a5fa; --c-pri-h: #93bbfd; --c-pri-a: #3b82f6; --c-pri-s: rgba(96,165,250,.12);
  --c-ok: #4ade80; --c-ok-bg: rgba(74,222,128,.1); --c-ok-b: rgba(74,222,128,.25);
  --c-warn: #fbbf24; --c-warn-bg: rgba(251,191,36,.1); --c-warn-b: rgba(251,191,36,.25);
  --c-err: #f87171; --c-err-bg: rgba(248,113,113,.1); --c-err-b: rgba(248,113,113,.25);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 2px 8px rgba(0,0,0,.3);
}

body {
  min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base);
  line-height: 1.6; color: var(--c-text); background: var(--c-bg);
  display: flex; flex-direction: column;
}

/* ── Header ── */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--c-surface); border-bottom: 1px solid var(--c-border); backdrop-filter: blur(12px); }
.header-inner { max-width: var(--max-w); margin: 0 auto; padding: var(--sp-3) var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.logo-group { display: flex; align-items: center; gap: var(--sp-3); }
.logo-icon { flex-shrink: 0; }
.logo-text { font-size: var(--text-lg); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.logo-sub { font-size: var(--text-xs); color: var(--c-muted); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.theme-toggle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: var(--c-muted); cursor: pointer; background: none; border: 1px solid var(--c-border); transition: all var(--ease); }
.theme-toggle:hover { background: var(--c-offset); color: var(--c-text); border-color: var(--c-border2); }

/* ── Layout ── */
.main-content { flex: 1; max-width: var(--max-w); margin: 0 auto; padding: var(--sp-6); width: 100%; }
.disclaimer-bar { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--c-warn-bg); border: 1px solid var(--c-warn-b); border-radius: var(--r-md); font-size: var(--text-xs); color: var(--c-warn); margin-bottom: var(--sp-6); line-height: 1.5; }
.disclaimer-bar svg { flex-shrink: 0; margin-top: 1px; }

/* ── Tabs ── */
.tab-nav { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-5); border-bottom: 2px solid var(--c-border); }
.tab-btn { padding: var(--sp-3) var(--sp-5); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--c-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: all var(--ease); display: flex; align-items: center; gap: var(--sp-2); }
.tab-btn:hover { color: var(--c-text); }
.tab-btn.active { color: var(--c-pri); border-bottom-color: var(--c-pri); }
.tab-count { font-size: var(--text-xs); font-weight: 500; padding: 1px var(--sp-2); background: var(--c-pri-s); color: var(--c-pri); border-radius: var(--r-full); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Controls ── */
.controls-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6); margin-bottom: var(--sp-6); box-shadow: var(--shadow-sm); }
.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.control-group-wide { grid-column: 1 / -1; }
.control-row { display: flex; gap: var(--sp-4); }
.control-row .control-group { flex: 1; }
.control-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-2); }
.optional-tag { font-weight: 400; color: var(--c-faint); font-size: var(--text-xs); }
.control-input { width: 100%; padding: var(--sp-2) var(--sp-3); font-family: var(--font-body); font-size: var(--text-sm); color: var(--c-text); background: var(--c-surface2); border: 1px solid var(--c-border); border-radius: var(--r-md); transition: border-color var(--ease); outline: none; }
.control-input:focus { border-color: var(--c-pri); box-shadow: 0 0 0 3px var(--c-pri-s); }
.control-textarea { resize: vertical; min-height: 56px; line-height: 1.5; }
.controls-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; border-radius: var(--r-md); cursor: pointer; border: none; transition: all var(--ease); white-space: nowrap; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--c-pri); color: var(--c-inv); }
.btn-primary:hover:not(:disabled) { background: var(--c-pri-h); }
.btn-secondary { background: var(--c-offset); color: var(--c-text); border: 1px solid var(--c-border); }
.btn-secondary:hover:not(:disabled) { background: var(--c-surface2); border-color: var(--c-border2); }
.btn-ghost { background: transparent; color: var(--c-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--c-offset); color: var(--c-text); }
.btn .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Progress ── */
.progress-section { margin-bottom: var(--sp-6); }
.progress-bar { height: 4px; background: var(--c-offset); border-radius: var(--r-sm); overflow: hidden; }
.progress-fill { height: 100%; background: var(--c-pri); border-radius: var(--r-sm); width: 0%; transition: width .4s ease; }
.progress-fill.indeterminate { width: 30%; animation: slide 1.5s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
.progress-text { font-size: var(--text-xs); color: var(--c-muted); margin-top: var(--sp-2); font-weight: 500; }
.hidden { display: none; }

/* ── Results ── */
.results-container { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ── Question Card (shared by generator + bank) ── */
.question-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .25s; }
.question-card:hover { box-shadow: var(--shadow-md); }
.card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-divider); gap: var(--sp-3); flex-wrap: wrap; }
.card-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.tag { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-2); font-size: var(--text-xs); font-weight: 500; border-radius: var(--r-sm); line-height: 1.3; white-space: nowrap; }
.tag-section { background: var(--c-pri-s); color: var(--c-pri); }
.tag-hard { background: var(--c-err-bg); color: var(--c-err); }
.tag-medium { background: var(--c-warn-bg); color: var(--c-warn); }
.tag-easy { background: var(--c-ok-bg); color: var(--c-ok); }
.tag-pass { background: var(--c-ok-bg); color: var(--c-ok); border: 1px solid var(--c-ok-b); }
.tag-review { background: var(--c-warn-bg); color: var(--c-warn); border: 1px solid var(--c-warn-b); }
.tag-domain { background: var(--c-offset); color: var(--c-muted); }
.card-body { padding: var(--sp-5); }
.question-topic { font-size: var(--text-xs); color: var(--c-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-3); }
.question-passage { font-size: var(--text-sm); line-height: 1.8; color: var(--c-text); background: var(--c-surface2); border-left: 3px solid var(--c-border2); border-radius: var(--r-sm); padding: var(--sp-4); margin-bottom: var(--sp-4); white-space: pre-wrap; max-height: 280px; overflow-y: auto; }
.question-stem { font-size: var(--text-base); line-height: 1.7; color: var(--c-text); margin-bottom: var(--sp-5); white-space: pre-wrap; }

/* ── Choices ── */
.choices-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.choice-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface2); cursor: pointer; transition: all var(--ease); }
.choice-item:hover { border-color: var(--c-border2); background: var(--c-offset); }
.choice-item.selected { border-color: var(--c-pri); background: var(--c-pri-s); }
.choice-item.correct { border-color: var(--c-ok-b); background: var(--c-ok-bg); }
.choice-item.incorrect { border-color: var(--c-err-b); background: var(--c-err-bg); }
.choice-letter { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: 700; border-radius: 50%; background: var(--c-offset); color: var(--c-muted); border: 1px solid var(--c-border); transition: all var(--ease); }
.choice-item.selected .choice-letter { background: var(--c-pri); color: var(--c-inv); border-color: var(--c-pri); }
.choice-item.correct .choice-letter { background: var(--c-ok); color: #fff; border-color: var(--c-ok); }
.choice-item.incorrect .choice-letter { background: var(--c-err); color: #fff; border-color: var(--c-err); }
.choice-text { font-size: var(--text-sm); line-height: 1.6; padding-top: 2px; }

/* ── Answer ── */
.answer-section { margin-top: var(--sp-4); }
.check-btn { margin-bottom: var(--sp-4); }
.explanation-box { padding: var(--sp-4); background: var(--c-offset); border-radius: var(--r-md); border-left: 3px solid var(--c-pri); }
.explanation-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-pri); margin-bottom: var(--sp-2); }
.explanation-text { font-size: var(--text-sm); line-height: 1.7; color: var(--c-muted); }

/* ── Audit ── */
.audit-section { border-top: 1px solid var(--c-divider); padding: var(--sp-4) var(--sp-5); }
.audit-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.audit-title { font-size: var(--text-sm); font-weight: 600; color: var(--c-text); display: flex; align-items: center; gap: var(--sp-2); }
.audit-chevron { transition: transform var(--ease); color: var(--c-faint); }
.audit-chevron.open { transform: rotate(180deg); }
.audit-details { display: none; margin-top: var(--sp-3); }
.audit-details.open { display: block; }
.audit-grid { display: grid; gap: var(--sp-2); }
.audit-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--c-surface2); }
.audit-status { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; margin-top: 1px; }
.audit-status.pass { background: var(--c-ok-bg); color: var(--c-ok); }
.audit-status.review { background: var(--c-warn-bg); color: var(--c-warn); }
.audit-criterion { font-size: var(--text-xs); font-weight: 600; color: var(--c-text); }
.audit-note { font-size: var(--text-xs); color: var(--c-muted); line-height: 1.5; margin-top: 2px; }
.audit-score { font-size: var(--text-xs); color: var(--c-faint); margin-left: auto; white-space: nowrap; font-family: var(--font-mono); }

/* ── Desmos Segmented Control ── */
.desmos-filter { margin-bottom: var(--sp-4); }
.seg-group { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.seg-btn { padding: var(--sp-1) var(--sp-3); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; background: var(--c-surface2); color: var(--c-muted); border: none; cursor: pointer; transition: all var(--ease); border-right: 1px solid var(--c-border); }
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--c-offset); color: var(--c-text); }
.seg-btn.active { background: var(--c-pri); color: var(--c-inv); }

/* ── Desmos Badge ── */
.desmos-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--sp-2); font-size: var(--text-xs); font-weight: 600; border-radius: var(--r-sm); background: #e0f2e9; color: #0d7c3e; white-space: nowrap; }
[data-theme="dark"] .desmos-badge { background: rgba(74,222,128,.12); color: #4ade80; }
.desmos-method { font-size: var(--text-xs); color: var(--c-muted); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-surface2); border-radius: var(--r-sm); border-left: 3px solid #0d7c3e; line-height: 1.5; }
[data-theme="dark"] .desmos-method { border-left-color: #4ade80; }

/* ── Desmos Header Button ── */
.desmos-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: #0d7c3e; cursor: pointer; background: none; border: 1px solid var(--c-border); transition: all var(--ease); }
[data-theme="dark"] .desmos-btn { color: #4ade80; }
.desmos-btn:hover { background: var(--c-offset); border-color: var(--c-border2); }
.desmos-btn.active { background: #0d7c3e; color: white; border-color: #0d7c3e; }
[data-theme="dark"] .desmos-btn.active { background: #4ade80; color: #0f1117; border-color: #4ade80; }

/* ── Desmos Side Panel ── */
.desmos-side-panel { position: fixed; top: 0; width: 45vw; min-width: 380px; max-width: 600px; height: 100vh; z-index: 200; background: var(--c-surface); border: 1px solid var(--c-border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: -4px 0 24px rgba(0,0,0,.1); }
.desmos-side-panel { right: 0; }
.desmos-side-panel.open { transform: translateX(0); }
.desmos-side-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); flex-shrink: 0; }
.desmos-side-title { font-size: var(--text-sm); font-weight: 700; color: #0d7c3e; }
[data-theme="dark"] .desmos-side-title { color: #4ade80; }
.desmos-side-actions { display: flex; gap: var(--sp-2); }
.desmos-side-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: none; border: 1px solid var(--c-border); color: var(--c-muted); cursor: pointer; transition: all var(--ease); }
.desmos-side-btn:hover { background: var(--c-offset); color: var(--c-text); border-color: var(--c-border2); }
.desmos-side-body { flex: 1; min-height: 0; }

/* ── Body layout shift when Desmos is open ── */
body.desmos-open.desmos-right { margin-right: 45vw; }
body.desmos-open.desmos-left { margin-left: 45vw; }
body.desmos-open.desmos-left .desmos-side-panel { right: auto; left: 0; transform: translateX(-100%); }
body.desmos-open.desmos-left .desmos-side-panel.open { transform: translateX(0); }
body.desmos-open .main-content { max-width: 100%; }
body.desmos-open .site-header .header-inner { max-width: 100%; }

/* Transition the margin smoothly */
body { transition: margin 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

@media (max-width: 900px) {
  .desmos-side-panel { width: 100vw; min-width: unset; max-width: unset; }
  body.desmos-open.desmos-right, body.desmos-open.desmos-left { margin-left: 0; margin-right: 0; }
}

/* ── Bank ── */
.bank-stats { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-divider); font-size: var(--text-xs); color: var(--c-muted); flex-wrap: wrap; gap: var(--sp-2); }
.bank-source a { color: var(--c-pri); text-decoration: none; }
.bank-source a:hover { text-decoration: underline; }
.bank-pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); padding-bottom: var(--sp-6); }
.bank-page-info { font-size: var(--text-sm); color: var(--c-muted); font-weight: 500; min-width: 80px; text-align: center; }
.bank-card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-divider); }
.btn-use-seed { font-size: var(--text-xs); padding: var(--sp-1) var(--sp-3); background: var(--c-pri-s); color: var(--c-pri); border: 1px solid transparent; border-radius: var(--r-md); font-weight: 600; cursor: pointer; transition: all var(--ease); }
.btn-use-seed:hover { background: var(--c-pri); color: var(--c-inv); }

/* ── Footer ── */
.site-footer { padding: var(--sp-6); text-align: center; font-size: var(--text-xs); color: var(--c-faint); border-top: 1px solid var(--c-divider); margin-top: auto; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .main-content { padding: var(--sp-4); }
  .controls-panel { padding: var(--sp-4); }
  .controls-grid { grid-template-columns: 1fr; }
  .control-row { flex-direction: column; }
  .controls-actions { flex-direction: column; }
  .controls-actions .btn { justify-content: center; }
  .card-header, .card-body, .audit-section { padding-inline: var(--sp-4); }
  .header-inner { padding: var(--sp-3) var(--sp-4); }
  .logo-text { font-size: var(--text-base); }
  .logo-sub { display: none; }
  .bank-stats { flex-direction: column; align-items: flex-start; }
}

/* ── Misc ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }
:focus-visible { outline: 2px solid var(--c-pri); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--c-pri-s); color: var(--c-text); }