/* ============================================================
   Global Stylesheet for AZ-104 Practice — Exam Builder
   Includes Light + Dark Mode via CSS Variables + Responsive Tweaks
============================================================ */

/* ---------------------------
   THEME TOKENS (light + dark)
----------------------------*/
:root {
  /* light mode defaults */
  --bg-page: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-2: #f8f9fb;
  --border: #e5e7eb;

  --text-1: #111827;
  --text-2: #374151;
  --text-3: #6b7280;
  --muted: #9ca3af;

  --accent: #0ea5e9;        /* sky-500 */
  --accent-strong: #0284c7; /* sky-600 */

  --ok-bg: #ecfdf5;         /* emerald-50 */
  --ok-border: #34d399;     /* emerald-400 */
  --err-bg: #fef2f2;        /* rose-50 */
  --err-border: #f43f5e;    /* rose-500 */
  --chk-bg: #e0f2fe;        /* sky-100 */
  --chk-border: #38bdf8;    /* sky-400 */

  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-text: #111827;
  --input-ph: #9ca3af;

  --ring: #38bdf8;

  /* typography scale (mobile first) */
  --fs-0: 0.875rem; /* 14 */
  --fs-1: 1rem;     /* 16 */
  --fs-2: 1.125rem; /* 18 */
  --fs-3: 1.25rem;  /* 20 */
  --radius: 1rem;
  --radius-sm: .5rem;
  --gap: .75rem;
  --pad: 1rem;
}

@media (min-width: 640px) {
  :root {
    --fs-0: 0.9rem;
    --fs-1: 1rem;
    --fs-2: 1.125rem;
    --fs-3: 1.25rem;
    --gap: .875rem;
    --pad: 1.125rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --fs-0: 0.95rem;
    --fs-1: 1.05rem;
    --fs-2: 1.175rem;
    --fs-3: 1.3rem;
    --gap: 1rem;
    --pad: 1.25rem;
  }
}

html.dark {
  /* dark mode overrides */
  --bg-page: #121212;
  --bg-surface: #1e1e1e;
  --bg-surface-2: #262626;
  --border: #3a3a3a;

  --text-1: #e6e6e6;
  --text-2: #c8c8c8;
  --text-3: #a3a3a3;
  --muted: #8a8a8a;

  --accent: #38bdf8;        /* sky-400 */
  --accent-strong: #0ea5e9; /* sky-500 */

  --ok-bg: #0f2f22;         /* emerald tint */
  --ok-border: #34d399;
  --err-bg: #361a1f;        /* rose tint */
  --err-border: #fb7185;
  --chk-bg: #0b2734;        /* sky tint */
  --chk-border: #38bdf8;

  --input-bg: #2a2a2a;
  --input-border: #444;
  --input-text: #e6e6e6;
  --input-ph: #9aa0a6;

  --ring: #38bdf8;
}

/* ---------------------------
   GLOBAL / LAYOUT
----------------------------*/
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg-page);
  color: var(--text-1);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.55;
  font-size: var(--fs-1);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

main { flex: 1 0 auto; display: block; }
/* Offset page content for fixed header */
body { padding-top: var(--header-h, 64px); }

.container {
  width: 100%;
  max-width: 72rem; /* ~6xl */
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Make React root a flex column so footer inside App sticks to bottom */
#root { display:flex; min-height:100%; flex-direction:column; }
#root > main { flex:1 0 auto; }

/* Header */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.site-header-inner{
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: .75rem 1rem;
  max-width: 72rem; margin-inline: auto;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  color: var(--text-1);
}
.brand img { height: 2rem; width: auto; }
.brand img { display:block; }
.brand-title { font-weight: 600; letter-spacing: -.01em; font-size: var(--fs-2); }

/* Footer */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  margin-top: auto;
  padding-top: 2rem;
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: 1rem; max-width: 72rem; margin-inline: auto;
  color: var(--text-2);
}
@media (max-width: 480px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* Cards / Sections */
.section {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--bg-surface) 96%, #fff 4%),
              var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.06);
  color: var(--text-1);
}
h1, h2, h3 { color: var(--text-1); margin: 0; }
h1 { font-size: var(--fs-3); }
h2 { font-size: calc(var(--fs-2) * 1.05); letter-spacing: -.01em; }
p, small, .label, .muted { color: var(--text-2); }
.muted { color: var(--text-3); }
.label { font-weight: 500; }

/* ---------------------------
   BUTTONS / BADGES / PILLS
----------------------------*/
.btn {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: .75rem;
  padding: .5rem .75rem;
  transition: background .15s, border-color .15s, transform .04s;
  cursor: pointer;
  font-size: var(--fs-0);
}
.btn:hover { background: color-mix(in srgb, var(--bg-surface-2) 85%, #fff 15%); }
.btn:active { transform: scale(.995); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

.btn-sky {
  background: color-mix(in srgb, var(--bg-surface-2) 70%, var(--accent) 30%);
  border-color: var(--accent-strong);
  color: #0b4a6e;
}
html.dark .btn-sky { color: #d7f0fb; }
.btn-emerald {
  background: color-mix(in srgb, var(--bg-surface-2) 70%, #34d399 30%);
  border-color: #34d399;
}
.btn-rose {
  background: color-mix(in srgb, var(--bg-surface-2) 70%, #f43f5e 30%);
  border-color: #f43f5e;
}
.btn-outline { background: var(--bg-surface); }

.pill {
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .25rem .75rem;
  background: var(--bg-surface-2);
  color: var(--text-2);
  font-size: var(--fs-0);
}
.badge {
  border: 1px solid var(--accent-strong);
  background: color-mix(in srgb, var(--bg-surface) 70%, var(--accent) 30%);
  color: #083344;
  border-radius: .5rem;
  padding: .125rem .5rem;
  font-weight: 600;
  font-size: var(--fs-0);
}
html.dark .badge {
  color: #d7f0fb;
  background: color-mix(in srgb, var(--bg-surface) 50%, var(--accent) 50%);
}

/* ---------------------------
   CARD RADIO / OPTION CARDS
----------------------------*/
.option-card{
  display:flex; align-items:center; gap:.75rem;
  border:1px solid var(--border); border-radius:.75rem;
  padding:.75rem 1rem; background: var(--bg-surface-2);
  transition: transform .08s ease, border-color .15s, background .15s;
  cursor:pointer;
}
.option-card:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--bg-surface-2) 85%, #fff 15%); }
.option-card input[type="radio"]{ margin:0 .25rem 0 0; }
.option-card:has(input[type="radio"]:checked){
  background: color-mix(in srgb, var(--bg-surface) 70%, var(--accent) 30%);
  border-color: var(--accent-strong);
}
html.dark .option-card:has(input[type="radio"]:checked){ color:#d7f0fb; }

/* ---------------------------
   FORMS / INPUTS
----------------------------*/
input, select, textarea {
  background: var(--input-bg);
  color: var(--input-text);
  border-radius: .5rem;
  padding: .4rem .5rem;
  font-size: var(--fs-1);
}
input::placeholder, textarea::placeholder { color: var(--input-ph); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-color: var(--ring);
  box-shadow: none;
}

/* Make native checkboxes/radios readable */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent-strong);
  background-color: var(--input-bg);
  border-color: var(--input-border);
}

/* ---------------------------
   SEGMENTED SWITCH (ORDER)
----------------------------*/
.segmented{ display:inline-flex; border:1px solid var(--border); border-radius:.75rem; overflow:hidden; background:var(--bg-surface-2); }
.seg-btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; font-size:.85em; color:var(--text-2); cursor:pointer; user-select:none; }
.seg-btn + .seg-btn{ border-left:1px solid var(--border); }
.seg-btn input{ margin:0; }
.seg-btn:has(input:checked){ background: color-mix(in srgb, var(--bg-surface) 70%, var(--accent) 30%); color:#083344; font-weight:600; }
html.dark .seg-btn:has(input:checked){ color:#d7f0fb; }

/* ---------------------------
   CHOICE STATES (answers)
----------------------------*/
.choice {
  border: 1px solid var(--border);
  background: var(--bg-surface-2);
  border-radius: .75rem;
  padding: .75rem;
  transition: background .15s, border-color .15s, transform .05s;
  will-change: transform;
}
.choice:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--bg-surface-2) 85%, #fff 15%); }
.choice--checked  { background: var(--chk-bg); border-color: var(--chk-border); }
.choice--correct  { background: var(--ok-bg);  border-color: var(--ok-border); }
.choice--wrong    { background: var(--err-bg); border-color: var(--err-border); }
.choice .text-muted { color: var(--text-3); }

/* "A/B/C/D" chip */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem;
  border-radius: .5rem; font-weight: 600; font-size: .8rem;
  background: color-mix(in srgb, var(--bg-surface) 72%, var(--text-3) 28%);
  color: color-mix(in srgb, #000 6%, var(--text-1) 94%);
}
html.dark .chip {
  background: color-mix(in srgb, var(--bg-surface) 55%, var(--text-3) 45%);
  color: color-mix(in srgb, #fff 20%, var(--text-1) 80%);
}

/* ---------------------------
   EXPLANATION / LEARN LINKS
----------------------------*/
.expl-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .75rem;
}

/* ---------------------------
   SLIDERS (range inputs)
----------------------------*/
.slider-wrap { display:flex; align-items:center; gap:.75rem; }
.slider-value {
  min-width:3.5rem; text-align:center; font-variant-numeric: tabular-nums;
  background: var(--bg-surface-2); border:1px solid var(--border); color: var(--text-1);
  border-radius:.5rem; padding:.25rem .5rem; font-size: var(--fs-0);
}
input[type="range"] { -webkit-appearance: none; appearance: none; width: 60%; height: 2.5rem; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track {
  height: .4rem; background: var(--bg-surface-2); border: 1px solid var(--border);
  border-radius: 999px;
}
input[type="range"]::-moz-range-track {
  height: .4rem; background: var(--bg-surface-2); border: 1px solid var(--border);
  border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  margin-top: -7px; width: 1.1rem; height: 1.1rem; border-radius: 999px;
  background: var(--accent); border: 2px solid var(--accent-strong);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 1.1rem; height: 1.1rem; border-radius: 999px;
  background: var(--accent); border: 2px solid var(--accent-strong);
  cursor: pointer;
}
input[type="range"]:focus { outline: none; }
input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 40%, transparent); }
input[type="range"]:focus::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 40%, transparent); }

.slider-disabled input[type="range"]::-webkit-slider-thumb,
.slider-disabled input[type="range"]::-moz-range-thumb {
  background: var(--muted); border-color: var(--border); cursor: not-allowed;
}
.slider-disabled .slider-value { opacity: .6; }

/* Further disabled styling: dim entire control and track */
.slider-disabled { opacity: .65; }
.slider-disabled input[type="range"] { cursor: not-allowed; }
.slider-disabled input[type="range"]::-webkit-slider-runnable-track { 
  background: color-mix(in srgb, var(--bg-surface-2) 70%, var(--muted) 30%);
  border-color: var(--muted);
}
.slider-disabled input[type="range"]::-moz-range-track { 
  background: color-mix(in srgb, var(--bg-surface-2) 70%, var(--muted) 30%);
  border-color: var(--muted);
}

/* Coarse pointer = bigger targets */
@media (pointer: coarse) {
  .btn { padding: .6rem .85rem; }
  input[type="range"]::-webkit-slider-thumb,
  input[type="range"]::-moz-range-thumb { width: 1.25rem; height: 1.25rem; }
  .choice { padding: .9rem; }
}

/* ---------------------------
   STICKY CTA (Start Exam)
----------------------------*/
.sticky-cta{ position: sticky; bottom: .5rem; display:flex; justify-content:flex-end; padding:.5rem; background: transparent; z-index:5; }
.sticky-cta .btn{ box-shadow: 0 8px 24px rgb(16 185 129 / 0.2); }

/* ---------------------------
   SKELETON LOADING
----------------------------*/
.skeleton{ border-radius:.5rem; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0)); background-size:200% 100%; animation: skel 1.2s infinite linear; }
@keyframes skel { from { background-position:200% 0 } to { background-position:-200% 0 } }
html:not(.dark) .skeleton{ background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.06), rgba(0,0,0,0)); }

/* ---------------------------
   ANIMATIONS
----------------------------*/
@keyframes fade-in { from {opacity:0} to {opacity:1} }
@keyframes slide-up { from { transform: translateY(6px); opacity:0 } to { transform: translateY(0); opacity:1 } }
.anim-fade-in { animation: fade-in .25s ease-out both; }
.anim-slide-up { animation: slide-up .25s ease-out both; }

/* Print-friendly review */
@media print {
  .site-header, .exam-toolbar, .btn, .segmented, input[type="text"] { display: none !important; }
  body { background: #fff; color: #000; }
  .section { box-shadow: none; border-color: #000; }
}

/* Back-to-top button */
.back-to-top{
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1100;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--border); background: var(--bg-surface);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  font-weight: 700; line-height: 1; opacity:.9;
}
.back-to-top:hover{ transform: translateY(-2px); opacity: 1; }

/* Learn drawer */
/* Learn drawer removed */

/* ---------------------------
   RESPONSIVE UTILITIES
----------------------------*/
.stack { display: grid; gap: var(--gap); }
.stack-rows { display: grid; grid-auto-rows: minmax(0, auto); gap: var(--gap); }
@media (min-width: 768px) { .stack-md { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .stack-lg { grid-template-columns: repeat(3, 1fr); } }

/* Header responsive tweaks */
@media (max-width: 520px) {
  .brand-title { display: none; } /* keep logo, hide long title on tiny screens */
}

/* Choice label layout on small screens */
@media (max-width: 520px) {
  .choice { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
  .choice input { margin-top: .15rem; }
}

/* Section header bar scrollable on small screens (buttons wrap) */
.section .toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}

/* --- Exam toolbar --- */
.exam-toolbar{ display:flex; align-items:center; gap:.5rem; padding-block:.35rem; background: var(--bg-surface); border-bottom:1px solid var(--border); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
.exam-toolbar > *{ flex:0 0 auto; }     /* don't let groups stretch */
.exam-toolbar .spacer{ flex:1 1 auto; } /* pushes right-side buttons over */

/* groups */
.toolbar-group{ display:flex; align-items:center; gap:.5rem; background: var(--bg-surface-2); border:1px solid var(--border); border-radius:.6rem; padding:.25rem .4rem; }

/* sticky filters/actions under the header */
/* removed sticky-under-header */

/* compact buttons for toolbars */
.btn-sm{ padding:.4rem .7rem; border-radius:.75rem; }

/* segmented filter buttons (All / Missed / Flagged) */
.seg { border:1px solid var(--border); background:var(--bg-surface-2); color:var(--text-2); }
.seg.is-active{ border-color:var(--accent-strong); background:color-mix(in srgb, var(--bg-surface) 70%, var(--accent) 30%); color:#083344; }
html.dark .seg.is-active{ color:#d7f0fb; }

/* make it wrap only when it truly must */
@media (max-width: 520px){
  .exam-toolbar{ flex-wrap:wrap; }
  .exam-toolbar .spacer{ display:none; }
}


/* Simulation break / blur */
.sim-blur{ filter: blur(3px); pointer-events: none; user-select: none; }
.sim-break-overlay{
  position: fixed; top: var(--header-h, 64px); left:0; right:0; bottom:0; z-index: 1040;
  background: rgba(0,0,0,.25); backdrop-filter: blur(2px);
}