/* =========================================================
   Modals: shared shell + question editor, theme, account
   ========================================================= */

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:150;
  display:grid;
  /* the column may not grow past the screen, whatever a modal's content would like to be */
  grid-template-columns:minmax(0, 1fr);
  place-items:center;
  padding:var(--s-6);
  overflow-y:auto;
  background:var(--scrim);
  backdrop-filter:blur(3px);
  animation:fade-in var(--dur-2) var(--ease-out) both;
}
.modal-overlay.is-closing{ animation:fade-out var(--dur-2) var(--ease-in-out) both; }
.modal-overlay.is-closing .modal{ animation:modal-out var(--dur-2) var(--ease-in-out) both; }
.modal-overlay.no-anim,
.modal-overlay.no-anim .modal{ animation:none; }
@keyframes fade-out{ to{ opacity:0; } }
@keyframes modal-out{ to{ opacity:0; transform:translateY(6px) scale(.985); } }

.modal{
  display:flex;
  flex-direction:column;
  width:100%;
  max-height:calc(100dvh - 2 * var(--s-6));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  animation:scale-in var(--dur-3) var(--ease-out) both;
}
.modal-sm{ max-width:440px; }
.modal-md{ max-width:560px; }
.modal-lg{ max-width:720px; }
.modal-xl{ max-width:1080px; }

.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-6) var(--s-6) var(--s-4);
  flex:none;
}
.modal-head-copy{ display:grid; gap:6px; min-width:0; }
.modal-title{ font-size:var(--fs-xl); }
.modal-sub{ color:var(--text-2); font-size:var(--fs-sm); }
.modal-head .icon-btn{ margin:-4px -6px 0 0; }

.modal-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:var(--s-2) var(--s-6) var(--s-6);
}

.modal-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  padding:var(--s-4) var(--s-6);
  border-top:1px solid var(--line-soft);
  background:var(--surface-sunken);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  flex:none;
}
.modal-foot-actions{ display:flex; gap:var(--s-2); }
.modal-foot-status{ color:var(--text-3); font-size:var(--fs-xs); }

/* confirm */
.confirm-modal .modal-body{ padding-top:var(--s-6); }
.confirm{ display:flex; gap:var(--s-4); }
.confirm-icon{ display:inline-flex; flex:none; padding-top:2px; color:var(--accent-text); }
.confirm-icon .i{ width:24px; height:24px; }
.confirm-icon.is-danger{ color:var(--bad); }
.confirm-copy{ display:grid; gap:6px; }
.confirm-copy h3{ font-size:var(--fs-md); }
.confirm-copy p{ color:var(--text-2); font-size:var(--fs-sm); }

/* ---------- Question editor ---------- */

.editor-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(300px, 1fr);
  gap:var(--s-6);
}
.editor-main{ display:grid; align-content:start; gap:var(--s-6); min-width:0; }
.editor-section{ display:grid; gap:var(--s-3); }
.editor-question-input{
  min-height:140px;
  font-size:var(--fs-base);
  line-height:1.6;
}

.answer-edit-list{ display:grid; gap:var(--s-2); }
.answer-edit-row{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) 28px;
  align-items:start;
  gap:var(--s-3);
  padding:var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color var(--dur-2), background-color var(--dur-2);
}
.answer-edit-row.is-correct{ border-color:var(--good-line); background:var(--good-wash); }
/* The answer the AI picked pulses once after generation. */
.answer-edit-row.is-ai-picked{ animation:ai-picked 1.6s var(--ease-out); }
.answer-edit-row.is-ai-picked .answer-letter{ animation:boot-lock 420ms var(--ease-spring); }
@keyframes ai-picked{
  0%, 35%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--good) 28%, transparent); }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.answer-pick{ position:relative; display:inline-flex; margin-top:6px; cursor:pointer; }
.answer-pick input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.answer-pick .answer-letter{ font-size:1.5rem; }
.answer-pick:hover .answer-letter{ --lt-top:color-mix(in srgb, var(--good) 35%, #fff); --lt-bottom:color-mix(in srgb, var(--good) 70%, transparent); }
.answer-edit-row.is-correct .answer-letter{ --lt-top:color-mix(in srgb, var(--good) 35%, #fff); --lt-bottom:var(--good); }
.answer-pick input:focus-visible + .answer-letter{ box-shadow:var(--ring); }
.answer-edit-main{ display:grid; gap:6px; }
.answer-edit-main input{ background:var(--surface); }
.answer-explain-input{ min-height:34px !important; font-size:var(--fs-xs) !important; color:var(--text-2) !important; }
.answer-edit-row .icon-btn{ margin-top:7px; }

.editor-side{ display:grid; align-content:start; gap:var(--s-4); min-width:0; }
.editor-card{
  display:grid;
  gap:var(--s-3);
  padding:var(--s-4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-sunken);
}
.editor-card .field + .field{ margin-top:var(--s-1); }
.editor-side-textarea{ min-height:84px; background:var(--surface); font-size:var(--fs-sm); }

/* learning notes: one horizontal row under the editor instead of a tall stack */
.editor-notes-row{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--s-4);
  margin-top:var(--s-6);
}
.editor-notes-row .field + .field{ margin-top:0; }
.editor-notes-row .editor-side-textarea{ min-height:96px; }
@media (max-width: 720px){
  .editor-notes-row{ grid-template-columns:1fr; }
}

/* the editor's AI card: a header with the button, and three tiles for what it writes */
.ai-card{ gap:var(--s-3); }
.ai-card-top{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); }
.ai-card-top strong{ display:block; font-size:var(--fs-sm); font-weight:600; }
.ai-card-top small{ display:block; margin-top:2px; color:var(--text-3); font-size:var(--fs-xs); line-height:1.4; }
.ai-card-top .btn{ flex:none; }
.ai-outs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); overflow:hidden; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); }
.ai-out{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; padding:14px 6px 12px; color:var(--text-2); font-size:var(--fs-xs); text-align:center;
  transition:background-color var(--dur-3) var(--ease-out), color var(--dur-2); }
.ai-out + .ai-out{ border-left:1px solid var(--line); }
.ai-out .i{ width:17px; height:17px; color:var(--accent-text); }
.ai-out > i{ position:absolute; left:0; right:0; bottom:0; height:2px; overflow:hidden; transition:background-color var(--dur-3); }
.ai-out.is-active{ color:var(--text); }
.ai-out.is-active > i::after{ content:""; position:absolute; top:0; bottom:0; left:-45%; width:45%; background:linear-gradient(90deg, transparent, var(--accent), transparent); animation:ai-out-run 1.3s var(--ease-in-out) infinite; }
.ai-out.is-done{ color:var(--text); background:var(--accent-wash); }
.ai-out.is-done > i{ background:var(--accent); }
.ai-out.is-done .i{ animation:ai-out-tick .45s var(--ease-spring); }
.ai-out.is-error, .ai-out.is-error .i{ color:var(--bad); }
.ai-out.is-error > i{ background:var(--bad); }
/* a single output, as in the definition window */
.ai-card-single .ai-outs{ grid-template-columns:1fr; }
.ai-card-single .ai-out{ flex-direction:row; justify-content:center; gap:9px; padding:11px 12px 12px; }
@keyframes ai-out-run{ to{ left:100%; } }
@keyframes ai-out-tick{ from{ transform:scale(.4); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .ai-out.is-active > i::after{ left:0; width:55%; animation:none; background:var(--accent); }
  .ai-out.is-done .i{ animation:none; }
}

/* ---------- Theme modal ---------- */

.theme-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:var(--s-8);
}
.theme-controls{ display:grid; align-content:start; gap:var(--s-6); }
.theme-group{ display:grid; gap:var(--s-3); }
.theme-group-label{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  color:var(--text);
  font-size:var(--fs-sm);
  font-weight:600;
}
.theme-group-label .muted{ font-weight:400; font-size:var(--fs-xs); }
.theme-group-label .mono{ margin-left:auto; font-size:var(--fs-xs); }
.theme-group .segmented{ justify-self:start; }

.preset-row{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:var(--s-2); }
.preset{
  display:grid;
  justify-items:center;
  gap:6px;
  padding:var(--s-3) var(--s-1) var(--s-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--text-2);
  font-size:var(--fs-xs);
  transition:border-color var(--dur-2), background-color var(--dur-2), transform var(--dur-1);
}
.preset:hover{ border-color:var(--line-strong); }
.preset:active{ transform:scale(.97); }
.preset-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--swatch);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.preset.selected{ border-color:color-mix(in srgb, var(--swatch) 55%, var(--text)); background:color-mix(in srgb, var(--swatch) 10%, transparent); color:var(--text); }

.color-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-2); }
.range-field{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  color:var(--text-3);
  font-size:var(--fs-xs);
}
.range-field input{ flex:1; accent-color:var(--accent); }

.preview-card{
  display:grid;
  gap:var(--s-4);
  padding:var(--s-5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--paper);
  box-shadow:var(--shadow-md);
}
.preview-title{ font-family:var(--font-display); font-size:var(--fs-md); font-weight:500; line-height:1.35; }
.preview-answers{ display:grid; gap:6px; }
.preview-answer{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:6px var(--s-3) 6px 6px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  font-size:var(--fs-sm);
}
.preview-answer .answer-letter{ font-size:1.05rem; }
.preview-answer.is-correct{ border-color:var(--accent-line); background:var(--accent-wash); }
.preview-answer.is-correct .answer-letter{ --lt-top:color-mix(in srgb, var(--accent) 35%, #fff); --lt-bottom:var(--accent); }
.preview-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:var(--s-3);
  border-top:1px solid var(--line-soft);
  color:var(--text-3);
  font-size:var(--fs-xs);
}
.preview-foot .btn{ pointer-events:none; }

/* ---------- Account / admin ---------- */

.account-hero{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface-sunken);
}
.account-hero-compact{ margin-bottom:var(--s-5); }
.account-photo{ position:relative; flex:none; }
.account-photo-edit{
  position:absolute;
  right:-6px;
  bottom:-6px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:2px solid var(--surface-sunken);
  border-radius:50%;
  background:var(--accent);
  color:var(--on-accent);
  cursor:pointer;
  transition:transform var(--dur-2) var(--ease-spring);
}
.account-photo-edit .i{ width:15px; height:15px; }
.account-photo-edit:hover{ transform:scale(1.08); }
.account-hero-copy{ display:grid; flex:1; justify-items:start; gap:2px; min-width:0; }
.account-hero-copy strong{ font-family:var(--font-display); font-size:var(--fs-md); }
.account-hero-copy > span:not(.badge){ color:var(--text-3); font-size:var(--fs-xs); }
.account-hero-copy .badge{ margin-top:var(--s-1); }

.inline-form{ display:flex; align-items:flex-end; gap:var(--s-2); }
.inline-form .field{ flex:1; }

.session-note{
  display:flex;
  gap:var(--s-3);
  color:var(--text-3);
  font-size:var(--fs-xs);
  line-height:1.55;
}
.session-note .i{ width:16px; height:16px; color:var(--good); }

.admin-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin-bottom:var(--s-4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.admin-stats div{
  display:grid;
  gap:2px;
  padding:var(--s-3) var(--s-4);
  border-left:1px solid var(--line-soft);
}
.admin-stats div:first-child{ border-left:0; }
.admin-stats .mono{ font-size:var(--fs-xl); line-height:1.1; }
.admin-stats span:last-child{ color:var(--text-3); font-size:var(--fs-xs); }

.admin-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  margin-bottom:var(--s-3);
}
.admin-toolbar .search-field{ flex:1; min-width:200px; width:auto; }
.segmented-sm button{ height:28px; padding:0 var(--s-3); font-size:var(--fs-xs); }

.user-list{
  display:grid;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.user-row{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-top:1px solid var(--line-soft);
  transition:background-color var(--dur-1);
}
.user-row:first-child{ border-top:0; }
.user-row:hover{ background:var(--hover); }
.user-row.is-disabled .avatar,
.user-row.is-disabled .user-row-copy{ opacity:.55; }
.user-row-copy{ display:grid; flex:1; min-width:0; line-height:1.35; }
.user-row-copy strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); }
.user-row-copy strong .muted{ font-weight:400; }
.user-row-copy span{ color:var(--text-3); font-size:var(--fs-xs); }
.user-row-badges{ display:flex; gap:var(--s-1); }
.user-row-actions{ display:flex; align-items:center; gap:2px; }
.user-list-empty{ padding:var(--s-8); color:var(--text-3); font-size:var(--fs-sm); text-align:center; }

.setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.setting-row div{ display:grid; gap:2px; }
.setting-row strong{ font-size:var(--fs-sm); }
.setting-row span{ color:var(--text-3); font-size:var(--fs-xs); }

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

@media (max-width: 960px){
  .editor-grid,
  .theme-layout{ grid-template-columns:1fr; }
  .preset-row{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px){
  .modal-overlay{ align-items:end; padding:0; }
  .modal{
    max-height:94dvh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    animation:sheet-in var(--dur-3) var(--ease-out) both;
  }
  .modal-overlay.is-closing .modal{ animation:sheet-out var(--dur-2) var(--ease-in-out) both; }
  .modal-foot{ border-radius:0; }
  .modal-head,
  .modal-body,
  .modal-foot{ padding-left:var(--s-4); padding-right:var(--s-4); }
  .modal-foot{ flex-wrap:wrap; }
  .modal-foot-actions{ flex:1; }
  /* share the row, but never narrower than the label ("Save changes" was being cut) */
  .modal-foot-actions .btn{ flex:1 1 auto; }
  .color-grid{ grid-template-columns:1fr; }
  .account-hero{ flex-wrap:wrap; }
  .inline-form{ flex-direction:column; align-items:stretch; }
  .user-row{ flex-wrap:wrap; }
  .user-row-actions{ margin-left:auto; }
}
@keyframes sheet-in{ from{ transform:translateY(100%); } }
@keyframes sheet-out{ to{ transform:translateY(100%); } }

/* ---------- own Gemini API key ---------- */
.ai-key-modal .modal-body{ display:grid; gap:var(--s-5); }
.ai-key-state{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  border:1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--warn) 8%, transparent);
  color:var(--text-2);
  font-size:var(--fs-sm);
}
.ai-key-state .i{ width:18px; height:18px; flex:none; color:var(--warn); }
.ai-key-state.is-set{
  border-color:color-mix(in srgb, var(--good) 40%, var(--line));
  background:color-mix(in srgb, var(--good) 8%, transparent);
}
.ai-key-state.is-set .i{ color:var(--good); }
.ai-key-state strong{ color:var(--text); }
.ai-key-steps{ display:grid; gap:var(--s-3); list-style:none; }
.ai-key-steps li{ display:flex; align-items:flex-start; gap:var(--s-3); color:var(--text-2); font-size:var(--fs-sm); line-height:1.6; }
.ai-key-steps a{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
.ai-key-steps strong{ color:var(--text); font-weight:600; }
.ai-key-step-num{
  display:grid;
  place-items:center;
  flex:none;
  width:24px;
  height:24px;
  margin-top:1px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--accent-text);
  font-size:11px;
}
.ai-key-input{ position:relative; display:flex; align-items:center; }
.ai-key-input input{ flex:1; padding-right:44px; font-family:var(--font-mono); letter-spacing:.02em; }
.ai-key-input .icon-btn{ position:absolute; right:4px; }
.ai-key-modal .field-hint{ display:inline-flex; align-items:center; gap:6px; }
.ai-key-modal .field-hint .i{ width:13px; height:13px; }
.ai-key-reason{ margin:0; }