/* =============================================================
   Final Semester Study Guide — One-Window, No-Scroll Layout
   - Open Sans applied globally
   - No scrolling on pages except the final overview
   - Quiz scale is locked (no size change after Submit)
============================================================= */

/* Respect reduced motion */
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Colors + sizes */
:root{
  --bg:#f7f8fc;
  --card:#fff;
  --ink:#0b1320;
  --ink-soft:#4a5568;
  --primary:#2f61f3;
  --danger:#d33a2c;
  --success:#22c55e;
  --ring:#cdd9ff;
  --border:#e7eaf3;

  --radius:16px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 10px rgba(16,24,40,.08);

  --tick:16px;
  --tick-line:2px;
}

*{ box-sizing:border-box }

/* ----- One-screen base ----- */
html, body { height:100%; }
body{
  margin:0;
  height:100%;
  overflow:hidden;                /* no page scroll at all (summary overrides) */
  background:var(--bg);
  color:var(--ink);
  font:16px/1.45 'Open Sans', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Make all form controls inherit font */
button,input,select,textarea{ font:inherit }

/* Main container uses fixed viewport height (widened) */
.container{
  height:100vh;
  max-width:1280px;               /* wide so the quiz isn’t cramped */
  margin:0 auto;
  padding:10px 12px;
  display:grid;
  grid-template-rows:auto auto 1fr; /* title, counters, main area */
  gap:6px;                         /* tighter vertical spacing at the top */
}

/* --- Header (sizes unchanged; just tightened margins) --- */
h1{
  margin:0 0 2px 0;               /* less gap below the title */
  font-weight:800;
  letter-spacing:.3px;
  font-size:clamp(28px, 4.5vw, 44px);
}
.counters{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:2px;                         /* was 8px */
}
.count-row{ display:flex; align-items:center; gap:16px; width:100%; }
#resetAll{ margin-left:auto; }

/* Progress bar (unchanged in size; less vertical slack) */
.pbar-wrap{ display:flex; align-items:center; gap:12px; width:100%; margin-top:2px; }
.pbar{
  position:relative; width:100%; height:20px; border-radius:999px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-sm); background:#e9edf8;
}
.pbar::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:repeating-linear-gradient(to right, rgba(0,0,0,.10) 0 var(--tick-line), transparent var(--tick-line) var(--tick));
}
.pbar-fill{
  position:relative; height:100%; width:0%; background:var(--success);
  transition:width .25s ease; border-radius:inherit;
}
.pbar-fill::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:repeating-linear-gradient(to right, rgba(255,255,255,.35) 0 var(--tick-line), rgba(255,255,255,0) var(--tick-line) var(--tick));
}
.pbar-label{ font-size:1rem; color:var(--ink-soft); }

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:14px;
}

/* Launcher doesn't scroll; Summary DOES scroll */
#launcher.card{ overflow:hidden; }
#summary.card{ overflow:auto; }        /* <— final page can scroll */

/* Segmented buttons */
.seg{ display:flex; gap:10px; flex-wrap:wrap; }
.seg-btn{
  border:1px solid var(--border); background:#fff; padding:8px 14px; border-radius:9999px;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .02s, box-shadow .15s, border-color .15s;
}
.seg-btn:hover{ box-shadow:var(--shadow-md); }
.seg-btn.active{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,97,243,.18); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:12px; padding:10px 16px;
  font-weight:600; cursor:pointer; transition:transform .02s, box-shadow .15s, background-color .15s;
  box-shadow:var(--shadow-sm); min-width:110px;
}
.btn:hover{ box-shadow:var(--shadow-md); }
.btn.primary{ background:var(--success); color:#fff; }
.btn.btn-blue{ background:var(--primary); color:#fff; }
.btn.danger{ background:#fff; color:var(--danger); border-color:var(--danger); }

/* ----- QUIZ Card (locked scale, consistent bottom gap) ----- */
#quiz.card{
  margin:0;
  height:100%;                    /* occupy the whole 3rd grid row */
  overflow:hidden;                /* never scroll; JS scales inner contents */
  display:flex;
  align-items:flex-start;         /* anchor to top */
  justify-content:center;         /* center horizontally */
  padding:14px 18px 28px;         /* bottom padding ensures visible gap */
}

/* The element we scale (once) */
.quiz-scale{
  transform-origin: top center;
  display:block;
  width:100%;
  max-width:1200px;               /* readable line-length cap */
  will-change: transform;
}

/* Feedback area wrapper gets a reserved height (set by JS) */
.fb-area{
  min-height:var(--reserve-h, 300px);  /* space held BEFORE submit */
  display:flex; flex-direction:column; gap:8px;
}

/* Content typography inside the quiz (slightly compact) */
.question{
  font-size:20px;                 /* comfortable size; never changes */
  font-weight:700;
  margin:0 0 10px;
}
.options{ display:grid; gap:10px; margin:0 0 10px; }
.opt{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border); background:#fff; border-radius:12px;
  padding:8px 12px;
  box-shadow:var(--shadow-sm);
}
.opt input[type="radio"], .opt input[type="checkbox"]{ width:18px; height:18px; margin:0; accent-color:var(--primary); }
.opt label{ cursor:pointer; display:flex; gap:8px; align-items:center; width:100%; font-size:16px; }
.opt .k{ font-weight:700; color:var(--ink-soft); min-width:20px; }
.opt .ans{ color:var(--ink); }

.feedback{ margin:6px 0 0; font-weight:800; font-size:18px; } /* steady size */
.feedback.ok{ color:var(--success); }
.feedback.bad{ color:var(--danger); }

.answer-line{ border-left:4px solid var(--primary); padding-left:10px; margin:6px 0 0; }
.answer-line:empty{ border-left:0; padding-left:0; }

.rationale{
  border:1px dashed var(--border); border-radius:12px;
  padding:10px 12px; background:#fafbff; color:var(--ink-soft);
  font-size:15.5px; line-height:1.4;
}

/* Review items */
.first-try{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.review-list{ display:grid; gap:10px; }
.rev-item{
  border:1px solid var(--border); border-radius:12px; background:#fff;
  padding:10px 12px; box-shadow:var(--shadow-sm);
}
.rev-item.ok{ border-left:4px solid var(--success); }
.rev-item.bad{ border-left:4px solid var(--danger); }
.rev-q{ font-weight:700; margin-bottom:6px; }
.rev-aux{ color:var(--ink-soft); margin-bottom:6px; } /* shows "Missed X of Y" */
.rev-ans,.rev-rationale{ color:var(--ink-soft); }

/* ---- Clever final-page label ---- */
.sorted-note{
  margin:10px 0 12px;
  padding:10px 12px;
  background:#eef2ff;
  border:1px dashed #c7d2fe;
  color:var(--ink-soft);
  border-radius:12px;
  font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.sorted-note .icon{ font-size:1.1em; }

/* Utility */
.hidden{ display:none !important; }

/* Keyboard key styling */
kbd,.kbd{
  font-family:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:.9em; background:#fff; border:1px solid var(--border);
  border-radius:6px; padding:1px 6px;
}

/* Focus ring */
button:focus-visible, .select:focus-visible, input:focus-visible{
  outline:3px solid var(--ring); outline-offset:2px;
}

/* Module select (header control; size unchanged) */
label[for="moduleSel"]{ display:inline-block; margin:0 12px 0 0; vertical-align:middle; }
#moduleSel{
  appearance:none; font-size:calc(1em * 1.5); line-height:1.2;
  padding:.5625rem 2.5rem .5625rem .75rem; min-height:2.25rem;
  border-radius:10px; border:1px solid #c9d5ee; background:#fff; color:inherit;
  max-width:100%; box-shadow:0 1px 2px rgba(16,24,40,.06);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23121' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px;
}
#moduleSel:focus{ outline:none; border-color:#7aa2ff; box-shadow:0 0 0 3px rgba(47,97,243,.25); }
#moduleSel::-ms-expand{ display:none; }