/* =========================================================
   Pages: dashboard, library collections, quiz workspace, auth
   ========================================================= */

/* ---------- Empty states ---------- */

.empty-state{
  display:grid;
  justify-items:center;
  gap:var(--s-3);
  max-width:440px;
  margin:12vh auto 0;
  text-align:center;
}
.empty-state-icon{ display:inline-flex; margin-bottom:var(--s-2); color:var(--accent-text); }
.empty-state-icon .i{ width:34px; height:34px; stroke-width:1.3; }
.empty-state h2{ font-size:var(--fs-xl); }
.empty-state p{ color:var(--text-2); }
.empty-state .btn{ margin-top:var(--s-3); }

.no-results{
  display:grid;
  justify-items:center;
  gap:var(--s-2);
  padding:var(--s-12) var(--s-4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--text-2);
  text-align:center;
}
.no-results strong{ color:var(--text); font-family:var(--font-display); font-size:var(--fs-md); }
.no-results .btn{ margin-top:var(--s-2); }

/* ---------- Dashboard ---------- */

.welcome{
  display:grid;
  justify-items:start;
  gap:var(--s-4);
  max-width:900px;
  margin:7vh 0 var(--s-10);
}
.welcome-logo{ height:48px; width:auto; margin-bottom:var(--s-3); }
.welcome-title{ max-width:15em; font-family:var(--font-serif); font-size:clamp(2.4rem, 4.4vw, 3.6rem); font-weight:400; line-height:1.04; letter-spacing:-.015em; }
.welcome-title em{ color:var(--accent-text); font-style:italic; }
.welcome-sub{ max-width:54ch; color:var(--text-2); font-size:var(--fs-md); line-height:1.6; }

.welcome-start{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) var(--s-5); margin-top:var(--s-3); }
/* quick picks: a line of underlined subject names, not chips */
.welcome-picks{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; color:var(--text-3); font-size:var(--fs-sm); }
.welcome-picks > span{ margin-right:2px; }
.welcome-picks i{ color:var(--line-strong); font-style:normal; }
.welcome-pick{
  padding:2px 1px;
  color:var(--text-2);
  font-family:var(--font-serif);
  font-size:1.12rem;
  font-style:italic;
  text-decoration:underline;
  text-decoration-color:var(--line-strong);
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  transition:color var(--dur-2), text-decoration-color var(--dur-2), text-underline-offset var(--dur-2) var(--ease-out);
}
.welcome-pick:hover{ color:var(--text); text-decoration-color:var(--accent); text-underline-offset:3px; }
.welcome-pick:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* the four parts of the library, as one ruled panel */
.welcome-guide{ display:grid; gap:var(--s-3); width:100%; margin-top:var(--s-10); }
.welcome-guide-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3); }
.welcome-guide-meta{ color:var(--text-3); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; }
.welcome-path{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  margin:0;
  padding:6px;
  list-style:none;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}
.welcome-path li{ position:relative; display:grid; align-content:start; gap:8px; min-width:0; padding:var(--s-5) var(--s-5) var(--s-6); }
.welcome-path li + li::before{ content:""; position:absolute; top:var(--s-5); bottom:var(--s-5); left:-.5px; width:1px; background:var(--line-soft); }
.welcome-num{ margin-bottom:var(--s-3); color:var(--text-3); font-family:var(--font-serif); font-size:2.6rem; font-weight:400; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.welcome-path strong{ color:var(--text); font-size:var(--fs-base); font-weight:600; }
.welcome-text{ color:var(--text-3); font-size:var(--fs-sm); line-height:1.55; }
.welcome-here{ position:absolute; top:calc(var(--s-5) + 6px); right:var(--s-5); display:inline-flex; align-items:center; gap:7px; color:var(--accent-text); font-size:var(--fs-xs); }
.welcome-here::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.welcome-path li.is-here .welcome-num{ color:var(--accent-text); }
.welcome-path li.is-here::after{ content:""; position:absolute; top:0; left:var(--s-5); width:28px; height:2px; border-radius:0 0 2px 2px; background:var(--accent); }

.library-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:var(--s-4);
}

/* library cards: the folder's topic icon, mastery, its quizzes and when it was last studied */
.library-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  min-height:280px;
  padding:var(--s-5);
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.library-card:hover{ border-color:color-mix(in srgb, var(--card-color) 45%, var(--line)); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.library-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* a large, faint copy of the topic icon in the corner */
.library-card-mark{
  position:absolute;
  z-index:-1;
  right:-18px;
  bottom:-22px;
  color:var(--card-color);
  opacity:.07;
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.library-card-mark .i{ width:150px; height:150px; stroke-width:1.2; }
.library-card:hover .library-card-mark{ opacity:.12; transform:rotate(-6deg) scale(1.04); }
.library-card-top{ display:flex; align-items:center; justify-content:space-between; }
.library-card-icon{ display:grid; place-items:center; color:var(--card-color); }
.library-card-icon .i{ width:30px; height:30px; stroke-width:1.6; }
.library-card-arrow{ color:var(--text-3); transition:transform var(--dur-2) var(--ease-out), color var(--dur-2); }
.library-card:hover .library-card-arrow{ color:var(--text); transform:translate(2px, -2px); }
.library-card-head{ display:grid; gap:4px; }
.library-card-title{ font-size:var(--fs-lg); font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.library-card-meta{ color:var(--text-3); font-size:var(--fs-xs); }

.library-card-mastery{ display:grid; gap:6px; }
.library-card-mastery-row{ display:flex; align-items:baseline; justify-content:space-between; color:var(--text-3); font-size:var(--fs-xs); }
.library-card-mastery-row strong{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.library-card-bar{ height:5px; border-radius:var(--r-pill); background:var(--line-soft); overflow:hidden; }
.library-card-bar span{ display:block; height:100%; border-radius:inherit; background:var(--card-color); transition:width var(--dur-3) var(--ease-out); }

.library-card-quizzes{ display:grid; gap:2px; margin:0 calc(var(--s-2) * -1); list-style:none; }
.library-card-quiz{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  width:100%;
  padding:6px var(--s-2);
  border:0;
  border-radius:var(--r-xs);
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:var(--fs-sm);
  text-align:left;
  cursor:pointer;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.library-card-quiz .i{ width:16px; height:16px; flex:none; color:var(--card-color); }
.library-card-quiz:hover{ background:var(--hover); color:var(--text); }
.library-card-quiz-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library-card-quiz-count{ color:var(--text-3); font-size:11px; }
.library-card-empty{ color:var(--text-3); font-size:var(--fs-xs); }
.library-card-foot{
  display:flex;
  justify-content:space-between;
  gap:var(--s-2);
  margin-top:auto;
  color:var(--text-3);
  font-size:var(--fs-xs);
}


/* static rows on study cards (previews, not links) */
.library-card-quiz.is-static{ cursor:inherit; }
.library-card-quiz.is-static:hover{ background:transparent; color:var(--text-2); }
.library-card-dot{ width:5px; height:5px; flex:none; margin:0 5px; border-radius:50%; background:var(--card-color); opacity:.8; }

.sep{ color:var(--line-strong); }

/* favorite questions: a numbered list, one starred question per row */
.fav-list{
  display:grid;
  margin:0;
  padding:6px;
  list-style:none;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}
.fav-row{
  position:relative;
  display:grid;
  grid-template-columns:52px minmax(0, 1fr) auto auto;
  align-items:start;
  gap:var(--s-4);
  padding:var(--s-4) var(--s-3) var(--s-4) var(--s-4);
  border-radius:calc(var(--r-lg) - 6px);
  transition:background-color var(--dur-2);
}
/* hairlines between rows start at the question, not the number */
.fav-row + .fav-row::before{ content:""; position:absolute; top:0; left:calc(var(--s-4) + 52px + var(--s-4)); right:var(--s-4); height:1px; background:var(--line-soft); transition:opacity var(--dur-2); }
.fav-row:hover::before, .fav-row:hover + .fav-row::before{ opacity:0; }
.fav-row:hover{ background:var(--hover); }
.fav-hit{ position:absolute; inset:0; z-index:0; border-radius:inherit; cursor:pointer; }
.fav-hit:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.fav-row > :not(.fav-hit){ position:relative; z-index:1; pointer-events:none; }
.fav-row > .fav-toggle{ pointer-events:auto; }

.fav-no{ display:flex; align-items:baseline; gap:3px; padding-top:2px; color:var(--text-3); font-size:1.15rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em; transition:color var(--dur-2); }
.fav-no small{ font-size:var(--fs-2xs); letter-spacing:.08em; opacity:.7; }
.fav-row:hover .fav-no{ color:var(--accent-text); }
.fav-main{ display:grid; gap:8px; min-width:0; }
.fav-text{ display:-webkit-box; overflow:hidden; color:var(--text); font-size:var(--fs-base); font-weight:500; line-height:1.5; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.fav-concept{ overflow:hidden; min-width:0; color:var(--text-2); font-size:var(--fs-sm); line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }
.fav-concept span{ margin-right:10px; color:var(--text-3); font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; }
.fav-facts{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); color:var(--text-3); font-size:var(--fs-xs); }
.fav-facts > span:first-child{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
.fav-facts i{ font-style:normal; opacity:.6; }
.fav-go{ display:inline-flex; align-items:center; gap:6px; color:var(--accent-text); font-weight:500; opacity:0; translate:-4px 0; transition:opacity var(--dur-2), translate var(--dur-2) var(--ease-out); }
.fav-go .i{ width:14px; height:14px; }
.fav-row:hover .fav-go, .fav-row:focus-within .fav-go{ opacity:1; translate:0 0; }
.fav-thumb{ display:block; width:88px; height:66px; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-sunken); }
.fav-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.fav-thumb{ grid-column:3; }
.fav-row > .fav-toggle{ grid-column:4; margin-top:-4px; }

@media (max-width: 640px){
  .fav-list{ padding:4px; }
  .fav-row{ grid-template-columns:minmax(0, 1fr) auto; gap:var(--s-2) var(--s-3); padding:var(--s-4); }
  .fav-row + .fav-row::before{ left:var(--s-4); }
  .fav-no{ grid-column:1; font-size:var(--fs-sm); padding-top:0; }
  .fav-main{ grid-column:1 / -1; grid-row:2; }
  .fav-thumb{ grid-column:1 / -1; grid-row:3; width:100%; height:150px; }
  .fav-thumb img{ object-fit:contain; }
  .fav-row > .fav-toggle{ grid-column:2; grid-row:1; }
  .fav-go{ display:none; }
}

.fav-toggle .i{ transition:transform var(--dur-2) var(--ease-spring); }
.fav-toggle.is-favorite{ color:var(--warn); }
.fav-toggle.is-favorite:hover{ color:var(--warn); }
.fav-toggle:active .i{ transform:scale(1.25); }

/* note sheet: one card of bullet points; a note's lines stay together, notes are spaced apart */
.note-sheet{
  padding:var(--s-6) var(--s-7);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
}
.note-list{ display:grid; gap:var(--s-4); list-style:none; }
/* every point is evenly spaced, as one list */
.note-points{ display:grid; gap:var(--s-4); margin:0; padding:0; list-style:none; }
/* each point: a star in its own column, clear of the text, centred on the first line */
.note-points li{
  display:grid;
  grid-template-columns:14px minmax(0, 1fr);
  column-gap:var(--s-4);
  align-items:start;
  color:var(--text);
  font-size:var(--fs-base);
  line-height:1.7;
}
.note-points .note-mark{ display:flex; align-items:center; height:1.7em; color:var(--accent-text); }
.note-points .note-star{ display:block; width:14px; height:14px; fill:currentColor; }
.note-points .note-text{ min-width:0; overflow-wrap:anywhere; }
@media (max-width: 720px){
  .note-sheet{ padding:var(--s-5); }
  .note-points li{ column-gap:var(--s-3); }
}

/* glossary table */
.glossary-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  margin-bottom:var(--s-4);
}
.glossary-count{ color:var(--text-3); font-size:var(--fs-2xs); white-space:nowrap; }

.glossary{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  overflow:hidden;
}
.glossary-head,
.glossary-row{
  display:grid;
  grid-template-columns:minmax(160px, 260px) minmax(0, 1fr) 76px;
  column-gap:var(--s-6);
  padding-left:var(--s-6);
  padding-right:var(--s-3);
}
.glossary-head{
  padding-top:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  background:var(--surface-sunken);
  color:var(--text-3);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.glossary-row{
  align-items:start;
  padding-top:var(--s-4);
  padding-bottom:var(--s-4);
  border-top:1px solid var(--line-soft);
  transition:background-color var(--dur-1);
}
.glossary-row:hover{ background:var(--hover); }

/* letter heading, as in the definitions PDF: the letter in the display face, a fine rule, the count */
.glossary-group{
  display:flex;
  align-items:baseline;
  gap:var(--s-4);
  padding:var(--s-7) var(--s-6) var(--s-2);
}
.glossary-section:first-child .glossary-group{ padding-top:var(--s-5); }
.glossary-group-letter{
  flex:none;
  min-width:28px;
  color:var(--text);
  font-family:var(--font-serif);
  font-size:2.5rem;
  font-style:italic;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
}
.glossary-group-rule{
  flex:1;
  align-self:center;
  height:1px;
  margin-top:8px;
  background:var(--line);
}
.glossary-group-count{
  flex:none;
  color:var(--text-3);
  font-size:var(--fs-2xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}
.glossary-group + .glossary-row{ border-top:0; }
.glossary-term{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:500;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.glossary-term mark{
  padding:0 2px;
  border-radius:3px;
  background:var(--accent-wash-strong);
  color:inherit;
}
.glossary-definition{ padding-top:2px; color:var(--text-2); line-height:1.65; white-space:pre-wrap; }
.glossary-actions{
  display:flex;
  justify-content:flex-end;
  gap:2px;
  opacity:0;
  transition:opacity var(--dur-1);
}
.glossary-row:hover .glossary-actions,
.glossary-actions:focus-within{ opacity:1; }
@media (hover: none){ .glossary-actions{ opacity:1; } }
.glossary-empty{
  padding:var(--s-10) var(--s-6);
  color:var(--text-3);
  font-size:var(--fs-sm);
  text-align:center;
}

/* definition term autocomplete */
.definition-term-autocomplete{ position:relative; }
.definition-term-suggestions{
  position:absolute;
  z-index:25;
  top:calc(100% + 6px);
  left:0;
  right:0;
  padding:var(--s-1);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  box-shadow:var(--shadow-md);
  animation:fade-in var(--dur-1) var(--ease-out);
}
.definition-term-suggestion{
  display:grid;
  gap:2px;
  width:100%;
  padding:8px var(--s-3);
  border-radius:var(--r-xs);
  text-align:left;
}
.definition-term-suggestion:hover,
.definition-term-suggestion.active{ background:var(--hover); }
.definition-term-suggestion.active{ box-shadow:inset 2px 0 0 var(--accent); }
.definition-term-suggestion-name{ font-size:var(--fs-sm); font-weight:500; }
.definition-term-suggestion-description{ color:var(--text-3); font-size:var(--fs-xs); }

/* ---------- Quiz workspace ---------- */

.quiz-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-6);
  padding-bottom:var(--s-6);
  border-bottom:1px solid var(--line-soft);
}
.quiz-head-copy{ display:grid; flex:1; gap:var(--s-3); min-width:0; }
.quiz-title-input{
  width:100%;
  min-height:0;
  margin:0 0 0 -8px;
  padding:2px 8px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:transparent;
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:600;
  letter-spacing:var(--tracking-tight);
  line-height:1.2;
}
.quiz-title-input:hover{ border-color:var(--line); }
.quiz-title-input:focus{ background:var(--surface-sunken); }
.quiz-head-meta{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.quiz-head-actions{ display:flex; flex:none; align-items:center; gap:var(--s-2); }

/* quiz options: one ruled strip, four columns, the state written large */
.quiz-options{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  margin-top:var(--s-6);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--line);
}
.qopt{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:10px;
  min-width:0;
  padding:var(--s-4) var(--s-5);
  background:var(--surface);
  cursor:pointer;
  user-select:none;
  transition:background-color var(--dur-2);
}
.qopt:hover{ background:color-mix(in srgb, var(--surface) 94%, var(--text)); }
.qopt-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.qopt-label{ display:inline-flex; align-items:center; gap:8px; min-width:0; color:var(--text-3); font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; transition:color var(--dur-2); }
.qopt-label .i{ width:14px; height:14px; flex:none; }
.qopt.is-on .qopt-label{ color:var(--accent-text); }
.qopt-value{ align-self:center; color:var(--text-3); font-family:var(--font-display); font-size:1.7rem; line-height:1.05; transition:color var(--dur-2); }
.qopt.is-on .qopt-value{ color:var(--text); }
.qopt-desc{ color:var(--text-3); font-size:var(--fs-xs); line-height:1.4; }
.qopt-step{ display:inline-flex; align-items:center; gap:4px; align-self:center; justify-self:start; cursor:default; }
.qopt-step button{ display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:var(--r-xs); color:var(--text-2); transition:border-color var(--dur-1), color var(--dur-1); }
.qopt-step button:hover{ border-color:var(--line-strong); color:var(--text); }
.qopt-step button .i{ width:13px; height:13px; }
.qopt-step input{ width:3.2ch; min-height:0; height:auto; padding:0; border:0; background:none; box-shadow:none; color:var(--text); font-family:var(--font-display); font-size:1.7rem; line-height:1.05; text-align:center; -moz-appearance:textfield; }
.qopt-step input::-webkit-outer-spin-button, .qopt-step input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qopt-step input:focus{ outline:none; border-radius:6px; background:var(--surface-sunken); }
.qopt-step em{ margin-left:4px; color:var(--text-3); font-size:var(--fs-xs); font-style:normal; }

/* question cards */
.question-list{ display:grid; gap:var(--s-3); }

.qcard{
  position:relative;
  display:grid;
  grid-template-columns:52px minmax(0, 1fr);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  transition:border-color var(--dur-2), box-shadow var(--dur-2), opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.qcard:hover{ border-color:var(--line-strong); }
.qcard-rail{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-5) 0;
  border-right:1px solid var(--line-soft);
}
.qnum{ color:var(--accent-text); font-size:var(--fs-xs); font-weight:500; }
.qcard-drag-handle{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:var(--r-xs);
  color:var(--text-3);
  cursor:grab;
  opacity:.5;
  transition:opacity var(--dur-1), background-color var(--dur-1);
  touch-action:none;
}
.qcard:hover .qcard-drag-handle{ opacity:1; }
.qcard-drag-handle:hover{ background:var(--hover); color:var(--text); }
.qcard-body{ display:grid; gap:var(--s-4); min-width:0; padding:var(--s-5); }
.qcard-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); }
.qcard-text{ font-size:var(--fs-md); font-weight:500; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.qcard-actions{ display:flex; flex:none; gap:2px; margin:-6px -6px 0 0; }
.qcard-img{
  justify-self:start;
  max-width:min(420px, 100%);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  cursor:zoom-in;
}
.qcard-img img{ max-height:220px; object-fit:contain; background:var(--paper); }
.qcard-answers{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-2); }
.qcard-answer{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  min-height:42px;
  padding:6px var(--s-3) 6px 6px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--text-2);
  font-size:var(--fs-sm);
}
.qcard-answer .answer-letter{ font-size:1.3rem; }
.qcard-answer-text{ flex:1; min-width:0; overflow-wrap:anywhere; }
.qcard-answer.correct{ border-color:var(--good-line); background:var(--good-wash); color:var(--text); }
.qcard-answer-mark{ color:var(--good); }
.qcard-answer-mark .i{ stroke-width:2.2; }

/* drag reorder states */
.qcard.is-dragging{ opacity:.35; border-style:dashed; }
.qcard.drag-over{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash-strong); }
.question-drag-ghost{
  position:fixed !important;
  z-index:300;
  margin:0;
  pointer-events:none;
  border-color:var(--accent-line);
  box-shadow:var(--shadow-lg);
  opacity:.95;
  transform:rotate(-1deg) !important;
}
body.question-pointer-dragging,
body.question-pointer-dragging *{ cursor:grabbing !important; }

.add-question{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-3);
  width:100%;
  margin-top:var(--s-3);
  padding:var(--s-6);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-sunken);
  color:var(--text-2);
  font-weight:500;
  transition:border-color var(--dur-2), color var(--dur-2), background-color var(--dur-2);
}
.add-question-icon{ display:inline-flex; transition:transform var(--dur-2) var(--ease-spring); }
.add-question-icon .i{ width:18px; height:18px; }
.add-question:hover{ border-color:var(--accent); color:var(--accent-text); background:var(--accent-wash); }
.add-question:hover .add-question-icon{ transform:rotate(90deg); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px){
  .quiz-options{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px){
  .quiz-head{ flex-direction:column; align-items:stretch; }
  .quiz-head-actions .btn-lg{ flex:1; }
  .quiz-title-input{ font-size:var(--fs-xl); }
  .qcard{ grid-template-columns:40px minmax(0, 1fr); }
  .qcard-body{ padding:var(--s-4); }
  .qcard-answers{ grid-template-columns:1fr; }
  .glossary-head{ display:none; }
  .glossary-row{ grid-template-columns:minmax(0, 1fr) auto; column-gap:var(--s-3); row-gap:var(--s-1); padding:var(--s-4) var(--s-3) var(--s-4) var(--s-4); }
  .glossary-group{ padding:var(--s-5) var(--s-4) var(--s-1); }
  .glossary-group-letter{ font-size:1.7rem; }
  .glossary-definition{ grid-column:1 / -1; grid-row:2; padding-top:0; }
  .glossary-actions{ opacity:1; }
  .glossary-toolbar{ flex-direction:column; align-items:stretch; }
  .glossary-count{ align-self:flex-end; }
  .welcome{ margin-top:var(--s-6); }
  .welcome-guide{ margin-top:var(--s-8); }
  .welcome-path{ grid-template-columns:1fr; }
  .welcome-path li{ padding:var(--s-4) var(--s-4) var(--s-5); }
  .welcome-path li + li::before{ top:0; bottom:auto; left:var(--s-4); right:var(--s-4); width:auto; height:1px; }
  .welcome-num{ font-size:2rem; margin-bottom:var(--s-2); }
  .welcome-here{ top:calc(var(--s-4) + 4px); right:var(--s-4); }
  .welcome-path li.is-here::after{ left:var(--s-4); }
}

@media (max-width: 560px){
  .quiz-options{ grid-template-columns:1fr; }
  /* Take quiz gets its own full-width row; PDF, Images and delete share the next */
  .quiz-head-actions{ flex-wrap:wrap; }
  .quiz-head-actions .btn-lg{ flex:1 1 100%; }
  .quiz-head-actions .btn:not(.btn-lg){ flex:1 1 0; min-width:0; }
}