/* ═══════════════════════════════════════════════════════════════════════════
   SmartSnap: study workspace
   Layered on style.css: same tokens, same glass-on-indigo language. This file
   only adds what the workspace needs, so the two pages can't drift apart.
   ═══════════════════════════════════════════════════════════════════════════ */

.study-body { padding-top: 84px; }

/* The shared nav is fixed but only becomes opaque when script.js adds
   .scrolled, and this page doesn't load script.js, so content scrolled
   underneath a transparent bar. An app page has no hero to show through
   anyway, so it is solid from the start here. */
.study-body .nav {
  background: rgba(14, 11, 31, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

/* ── Signed-out gate ─────────────────────────────────────────────────────────
   Doubles as the landing page for /study, which is where cold traffic arrives.
   It used to be one card that said "sign in", which asked for an account
   before saying what the account was for. Same tokens as the marketing pages,
   but the styles are local: the homepage's .feature-card reveals itself with a
   .fade-up class that script.js adds, and this page doesn't load script.js, so
   reusing it would leave the whole section invisible at opacity 0. */
.study-gate {
  max-width: 1060px;
  margin: 0 auto;
  padding: 56px 24px 110px;
}

.gate-hero { text-align: center; max-width: 660px; margin: 0 auto 48px; }

.gate-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(165, 180, 252, 0.1);
  border: 1px solid rgba(165, 180, 252, 0.22);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hl-1);
}

.gate-hero h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5.4vw, 54px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.gate-sub {
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 30px;
}

.gate-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.gate-fine { color: var(--ink-faint); font-size: 13.5px; }

/* ── The six ── */
.gate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gate-card {
  padding: 26px 24px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.gate-card:hover {
  background: var(--card-hover);
  border-color: var(--card-border-hover);
  transform: translateY(-3px);
}

.gate-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 18px rgba(102, 126, 234, 0.3);
}
.gate-icon svg { width: 20px; height: 20px; }

.gate-card h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 9px;
}
.gate-card p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.65; }

.gate-pro {
  margin-top: 22px;
  padding: 15px 20px;
  border-radius: var(--r-md);
  border: 1px dashed var(--card-border);
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* ── Second ask, for anyone who read the whole page ── */
.gate-close {
  margin-top: 56px;
  padding: 48px 28px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
}
.gate-close h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 11px;
}
.gate-close p {
  color: var(--ink-dim);
  font-size: 15.5px;
  line-height: 1.65;
  margin-bottom: 26px;
}

@media (max-width: 980px) {
  .gate-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .study-gate { padding: 36px 18px 80px; }
  .gate-hero { margin-bottom: 40px; }
  .gate-grid { grid-template-columns: 1fr; }
  .gate-cta .btn { width: 100%; justify-content: center; }
  .gate-close { padding: 38px 22px; }
}

/* ── Layout ── */
.study {
  max-width: 1320px;
  margin: 0 auto;
  padding: 48px 32px 110px;
}

/* Credits ride at the end of the chip row rather than in a page header, so
   they stay visible without costing a whole band of vertical space. */
.study-credits {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: none;
  margin-left: auto;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-border);
}

.study-credits-count {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.study-credits-label {
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* ── Command bar ──────────────────────────────────────────────────────────
   The centrepiece. Given real presence: a gradient bloom behind the field, a
   focus ring that lights the whole shell, and the action chips right beneath
   so the first-time user never faces a blank prompt with no idea what to type. */
.cmd {
  position: relative;
  margin-bottom: 34px;
}

.cmd-glow {
  position: absolute;
  inset: -34px -10px 6px;
  background: radial-gradient(60% 120% at 50% 0%, rgba(102, 126, 234, 0.22), transparent 70%);
  filter: blur(22px);
  pointer-events: none;
  opacity: 0.9;
}

.cmd-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 7px 7px 22px;
  border-radius: 18px;
  background: rgba(27, 22, 56, 0.86);
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cmd-inner:focus-within {
  border-color: rgba(165, 180, 252, 0.5);
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.14), 0 10px 34px rgba(0, 0, 0, 0.34);
}

.cmd-spark {
  flex: none;
  display: flex;
  color: var(--hl-1);
}
.cmd-spark svg { width: 20px; height: 20px; }

.cmd-input {
  flex: 1;
  min-width: 0;
  padding: 17px 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
}
.cmd-input::placeholder { color: var(--ink-faint); }

.cmd-go {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 14px;
  background: var(--grad);
  color: #fff;
  cursor: pointer;
  transition: filter 0.16s ease, transform 0.16s ease;
}
.cmd-go svg { width: 18px; height: 18px; }
.cmd-go:hover { filter: brightness(1.12); transform: translateX(1px); }
.cmd-go:disabled { opacity: 0.45; cursor: default; transform: none; filter: none; }

.cmd-chips {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.chip-action {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.chip-action:hover {
  background: var(--card-hover);
  border-color: var(--card-border-hover);
  color: var(--ink);
  transform: translateY(-1px);
}

.cmd-status {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 11px 12px 11px 16px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--card-border);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.cmd-status { transition: opacity 0.3s ease; }
.cmd-status.is-fading { opacity: 0; }

.cmd-status-text { flex: 1; min-width: 200px; }
.cmd-status-text strong { color: var(--ink); font-weight: 700; }

.cmd-act {
  flex: none;
  padding: 6px 13px;
  border-radius: 8px;
  border: 1px solid var(--card-border-hover);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cmd-act:hover { background: rgba(255, 255, 255, 0.1); }

.cmd-act-danger { color: var(--ink-faint); border-color: var(--card-border); }
.cmd-act-danger:hover {
  background: rgba(251, 113, 133, 0.13);
  border-color: rgba(251, 113, 133, 0.4);
  color: var(--err);
}

.cmd-status.is-working { color: var(--hl-1); }
.cmd-status.is-error {
  color: var(--err);
  border-color: rgba(251, 113, 133, 0.3);
  background: rgba(251, 113, 133, 0.08);
}
.cmd-status.is-done {
  color: var(--ok);
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.07);
}

/* Working state: three dots that breathe, rather than a spinner */
.cmd-dots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.cmd-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: cmd-bounce 1.1s ease-in-out infinite;
}
.cmd-dots i:nth-child(2) { animation-delay: 0.14s; }
.cmd-dots i:nth-child(3) { animation-delay: 0.28s; }
@keyframes cmd-bounce { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

/* ── Tabs ── */
.study-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--card-border);
}
.study-tab { flex-shrink: 0; font-size: 15px; padding: 11px 18px; }

.study-tab {
  position: relative;
  padding: 14px 20px;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s ease;
}

.study-tab:hover { color: var(--ink-dim); }
.study-tab.is-active { color: var(--ink); }

.study-tab.is-active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.tab-count {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: panel-in 0.22s ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Filters ── */

/* ── Notes ── */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
}

.note {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--card-border);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  /* The whole card opens the note, matching the deck and quiz cards. */
  cursor: pointer;
}
.note:focus-visible {
  outline: 2px solid var(--hl-1);
  outline-offset: 2px;
}
/* Controls inside the card keep their own affordance. */
.note button, .note select, .note input, .note a { cursor: default; }
.note .note-del, .note .note-edit, .note .note-open, .note .note-pick { cursor: pointer; }

.note:hover {
  background: var(--card-hover);
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
}

.note-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  /* Leaves the top-right corner free for the select checkbox, so the date
     never sits underneath it. */
  padding-right: 26px;
}

.note-kind {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.note-kind.k-snippet { background: rgba(102, 126, 234, 0.18); color: var(--hl-1); }
.note-kind.k-page    { background: rgba(118, 75, 162, 0.22); color: var(--hl-2); }
.note-kind.k-history { background: rgba(255, 255, 255, 0.07); color: var(--ink-faint); }

.note-date { font-size: 11.5px; color: var(--ink-faint); margin-left: auto; }

.note-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  /* Cards stay a uniform height until opened. A wall of ragged cards reads as
     clutter, and the full text is one click away. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note.is-open .note-text { -webkit-line-clamp: unset; }

/* Written notes and saved pages carry a title as well as a body. */
.note-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.note.is-open .note-title { -webkit-line-clamp: unset; }

.note-expl {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  white-space: pre-wrap;
}

.note-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
}

.note-src {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--ink-faint);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}
.note-src:hover { color: var(--hl-1); }

.note-del {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.note:hover .note-del { opacity: 1; }
.note-del:hover { background: rgba(251, 113, 133, 0.14); color: var(--err); }
.note-del svg { width: 14px; height: 14px; }

.note-collection {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(165, 180, 252, 0.12);
  border: 1px solid rgba(165, 180, 252, 0.22);
  font-size: 11px;
  font-weight: 600;
  color: var(--hl-1);
}

/* ── Artifacts ── */
.artifact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.artifact {
  position: relative;   /* anchors the select checkbox */
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--card-border);
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.artifact:hover {
  background: var(--card-hover);
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
}

.artifact-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--grad);
  color: #fff;
}
.artifact-icon svg { width: 18px; height: 18px; }

.artifact-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 5px;
}

.artifact-meta { font-size: 12px; color: var(--ink-faint); }

/* ── Empty states ── */
.empty {
  padding: 64px 24px;
  text-align: center;
}

.empty-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink-faint);
}
.empty-icon svg { width: 22px; height: 22px; }

.empty h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.empty p {
  max-width: 400px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-faint);
}

/* ── Modal ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 6, 20, 0.72);
  backdrop-filter: blur(6px);
  animation: fade-in 0.18s ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 740px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--bg-1);
  border: 1px solid var(--card-border-hover);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: modal-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--card-border);
}

.modal-kind {
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(102, 126, 234, 0.18);
  color: var(--hl-1);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: none;
}

.modal-title {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: var(--card-hover); color: var(--ink); }
.modal-close svg { width: 16px; height: 16px; }

.modal-body {
  padding: 28px 26px;
  overflow-y: auto;
}

/* ── Flashcards ── */
.fc-stage { perspective: 1200px; }

.fc-card {
  position: relative;
  width: 100%;
  min-height: 270px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.fc-card.is-flipped { transform: rotateY(180deg); }

.fc-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 32px;
  border-radius: var(--r-md);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
}

.fc-front {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink);
  font-weight: 600;
}

.fc-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.16), rgba(118, 75, 162, 0.16));
  border: 1px solid rgba(165, 180, 252, 0.3);
  color: var(--ink-dim);
  font-size: 15px;
}

.fc-hint {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.fc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
}

.fc-btn {
  padding: 9px 18px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fc-btn:hover:not(:disabled) { background: var(--card-hover); color: var(--ink); border-color: var(--card-border-hover); }
.fc-btn:disabled { opacity: 0.35; cursor: default; }

.fc-pos { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ── Quiz ── */
.qz-progress {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-bottom: 22px;
}
.qz-progress-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 2px;
  transition: width 0.35s cubic-bezier(0.3, 0.9, 0.3, 1);
}

.qz-q {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 20px;
}

.qz-opts { display: grid; gap: 9px; }

.qz-opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 15px 17px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.qz-opt:hover:not(:disabled) {
  background: var(--card-hover);
  border-color: var(--card-border-hover);
  color: var(--ink);
}

.qz-opt-letter {
  flex: none;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  font-weight: 700;
}

.qz-opt.is-correct {
  background: rgba(74, 222, 128, 0.11);
  border-color: rgba(74, 222, 128, 0.42);
  color: var(--ink);
}
.qz-opt.is-correct .qz-opt-letter { background: rgba(74, 222, 128, 0.28); color: var(--ok); }

.qz-opt.is-wrong {
  background: rgba(251, 113, 133, 0.1);
  border-color: rgba(251, 113, 133, 0.4);
  color: var(--ink);
}
.qz-opt.is-wrong .qz-opt-letter { background: rgba(251, 113, 133, 0.26); color: var(--err); }

.qz-opt:disabled { cursor: default; }

.qz-why {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 11px;
  background: rgba(102, 126, 234, 0.09);
  border: 1px solid rgba(165, 180, 252, 0.2);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  animation: panel-in 0.2s ease-out;
}

.qz-foot { display: flex; justify-content: flex-end; margin-top: 20px; }

.qz-next {
  padding: 10px 22px;
  border: none;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.qz-next:hover { filter: brightness(1.12); }

.qz-result { text-align: center; padding: 26px 0 10px; }
.qz-score {
  font-family: var(--display);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.qz-score-label { color: var(--ink-faint); font-size: 14px; margin-top: 4px; }

/* ── Summary ── */
.summary-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-dim);
  white-space: pre-wrap;
}

/* ── Toast ── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 300;
  padding: 12px 20px;
  border-radius: 12px;
  background: rgba(27, 22, 56, 0.97);
  border: 1px solid var(--card-border-hover);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  font-size: 13.5px;
  color: var(--ink);
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.is-error { border-color: rgba(251, 113, 133, 0.4); color: var(--err); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .study { padding: 28px 16px 80px; }
  .study-credits { margin-left: 0; }
  .notes-grid, .artifact-grid { grid-template-columns: 1fr; }
  .cmd-input { font-size: 15px; }
  .modal { max-height: 92vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Classes, uploads, and the document reader
   ═══════════════════════════════════════════════════════════════════════════ */

.study-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
}

.study-content { min-width: 0; }

/* ── Classes sidebar ── */
.classes {
  position: sticky;
  top: 104px;
}

.classes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 10px;
}

.classes-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.classes-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.classes-add:hover { background: var(--card-hover); color: var(--ink); }
.classes-add svg { width: 14px; height: 14px; }

.classes-list { display: flex; flex-direction: column; gap: 2px; }

.class-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 30px 11px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.class-row:hover { background: var(--card); color: var(--ink); }

.class-row.is-active {
  background: var(--card-hover);
  color: var(--ink);
  font-weight: 600;
}

.class-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.class-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-count {
  flex: none;
  font-size: 11.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.class-menu {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.class-row:hover .class-menu { opacity: 1; }
.class-menu:hover { background: rgba(255, 255, 255, 0.09); color: var(--ink); }
.class-menu svg { width: 13px; height: 13px; }

.class-empty {
  padding: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* ── Notes bar ── */


/* ── In-flight uploads ── */
.uploads { display: grid; gap: 8px; margin-bottom: 14px; }
.uploads:empty { display: none; }

.upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--card-border);
  font-size: 13px;
}

.upload-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-dim);
}

.upload-state { flex: none; font-size: 12px; color: var(--hl-1); }
.upload-row.is-error .upload-state { color: var(--err); }

.upload-spin {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(165, 180, 252, 0.25);
  border-top-color: var(--hl-1);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Drag-and-drop veil ── */
.drop-veil {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 11, 31, 0.86);
  backdrop-filter: blur(4px);
}

.drop-veil-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 52px 68px;
  border-radius: var(--r-lg);
  border: 2px dashed rgba(165, 180, 252, 0.55);
  color: var(--hl-1);
  font-size: 16px;
  font-weight: 600;
}
.drop-veil-inner svg { width: 38px; height: 38px; }

/* ── Document note card accents ── */
.note-kind.k-document { background: rgba(74, 222, 128, 0.16); color: var(--ok); }

.note-open {
  flex: none;
  padding: 5px 11px;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.note-open:hover {
  background: var(--card-hover);
  border-color: var(--card-border-hover);
  color: var(--ink);
}

/* Class assignment picker on a note */
.note-class {
  flex: none;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: rgba(20, 17, 43, 0.9);
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.note:hover .note-class { opacity: 1; }
.note-class:hover { color: var(--ink); }
.note-class:focus { opacity: 1; outline: none; border-color: var(--card-border-hover); }

/* ── Prompt dialog ── */
.modal-sm { max-width: 400px; }

.prompt-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(14, 11, 31, 0.7);
  border: 1px solid var(--card-border);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.prompt-input::placeholder { color: var(--ink-faint); }
.prompt-input:focus {
  border-color: rgba(165, 180, 252, 0.5);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.14);
}

.prompt-colors { display: flex; gap: 8px; margin-top: 16px; }

.prompt-color {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.prompt-color:hover { transform: scale(1.14); }
.prompt-color.is-picked { border-color: var(--ink); transform: scale(1.14); }

.prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

/* ── Document reader ─────────────────────────────────────────────────────────
   Deliberately plain, high-contrast prose in ordinary <p> elements: the
   extension's section scanner reads real DOM, so a document opened here
   behaves exactly like any other page it works on. */
.reader {
  position: fixed;
  inset: 0;
  z-index: 150;
  overflow-y: auto;
  background: var(--bg-0);
}

.reader-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(14, 11, 31, 0.93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-border);
}

.reader-back {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 13px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.reader-back:hover { background: var(--card-hover); color: var(--ink); border-color: var(--card-border-hover); }
.reader-back svg { width: 14px; height: 14px; }

.reader-title {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-dl {
  flex: none;
  font-size: 12.5px;
  color: var(--hl-1);
  text-decoration: none;
  font-weight: 600;
}
.reader-dl:hover { text-decoration: underline; }

.reader-hint {
  position: relative;
  max-width: 760px;
  margin: 18px auto 0;
  padding: 11px 40px 11px 16px;
  border-radius: var(--r-md);
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(165, 180, 252, 0.22);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.reader-hint-x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.reader-hint-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }

.reader-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 24px 120px;
}

.reader-doc h2 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}
.reader-doc h2:first-child { margin-top: 0; }

.reader-doc p {
  font-size: 16.5px;
  line-height: 1.85;
  color: #DCD8F2;
  margin-bottom: 20px;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .study-layout { grid-template-columns: 1fr; gap: 18px; }
  .classes { position: static; }
  .classes-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
  }
  .class-row { width: auto; flex: none; }
  .class-count, .class-menu { display: none; }
}

@media (max-width: 640px) {
  .notes-bar { gap: 10px; }
  .upload-btn { width: 100%; justify-content: center; }
  .reader-doc { padding: 22px 18px 100px; }
  .reader-doc p { font-size: 16px; }
}

/* ── Multi-select ────────────────────────────────────────────────────────────
   The checkbox stays hidden until you hover a card or a selection is already
   running, so the default view is a clean grid rather than a form. */
.note-pick {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 5px;
  border: 1px solid var(--card-border-hover);
  background-color: rgba(14, 11, 31, 0.9);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.note-pick:hover { border-color: var(--hl-1); }

.note-pick:checked {
  background-color: var(--brand-1);
  border-color: var(--brand-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.note-pick:focus-visible {
  outline: 2px solid var(--hl-1);
  outline-offset: 2px;
}
.note:hover .note-pick,
.artifact:hover .note-pick,
.note-pick:checked,
body.is-selecting .note-pick { opacity: 1; }

.note.is-picked,
.artifact.is-picked {
  border-color: var(--card-border-hover);
  background: rgba(102, 126, 234, 0.1);
}

/* The icon sits top-left, so the checkbox needs the corner to itself. */
.artifact .artifact-icon { margin-right: 26px; }

.bulkbar {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(27, 22, 56, 0.97);
  border: 1px solid var(--card-border-hover);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  animation: bulk-in 0.18s ease-out;
}
@keyframes bulk-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.bulk-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  padding-right: 2px;
}

.bulk-select {
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  background: rgba(14, 11, 31, 0.8);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12.5px;
  cursor: pointer;
  outline: none;
}
.bulk-select:focus { border-color: var(--card-border-hover); }

.bulk-btn {
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bulk-btn:hover { background: var(--card-hover); color: var(--ink); border-color: var(--card-border-hover); }

.bulk-danger:hover {
  background: rgba(251, 113, 133, 0.14);
  border-color: rgba(251, 113, 133, 0.4);
  color: var(--err);
}

@media (max-width: 640px) {
  .bulkbar { left: 12px; right: 12px; transform: none; flex-wrap: wrap; justify-content: center; }
  @keyframes bulk-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ── Class actions dialog ── */
.dlg-sub {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin-bottom: 18px;
}

.dlg-actions { display: grid; gap: 9px; }

.dlg-action {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dlg-action:hover { background: var(--card-hover); border-color: var(--card-border-hover); }
.dlg-action svg { width: 16px; height: 16px; flex: none; color: var(--ink-faint); }

.dlg-action-danger:hover {
  background: rgba(251, 113, 133, 0.11);
  border-color: rgba(251, 113, 133, 0.4);
  color: var(--err);
}
.dlg-action-danger:hover svg { color: var(--err); }

.dlg-action-note {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-faint);
  margin-top: 2px;
}

.dlg-warn {
  padding: 13px 15px;
  border-radius: 11px;
  background: rgba(251, 113, 133, 0.09);
  border: 1px solid rgba(251, 113, 133, 0.28);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.dlg-warn strong { color: var(--ink); font-weight: 700; }

.dlg-row { display: flex; justify-content: flex-end; gap: 10px; }

.dlg-danger-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.dlg-danger-btn:hover { filter: brightness(1.1); }

/* A new deck or quiz lands in the other tab, so the tab itself says so for a
   few seconds rather than the page hijacking the screen to show it. */
.study-tab.is-new .tab-count {
  color: var(--hl-1);
  font-weight: 700;
}

.study-tab.is-new::before {
  content: '';
  position: absolute;
  top: 8px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-1);
  box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.6);
  animation: tab-ping 1.6s ease-out infinite;
}

@keyframes tab-ping {
  0%   { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(102, 126, 234, 0); }
  100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .study-tab.is-new::before { animation: none; }
  /* The working state has to stay legible without motion, so the spinner keeps
     its ring and the dots keep their colour. Only the movement stops. */
  .doc-ai-go.is-working::after,
  .doc-ai.is-working .doc-ai-spark,
  .cmd-dots i { animation: none; }
  .doc-ai-out { transition: none; }
  .doc-ai.is-working .doc-ai-spark { opacity: 1; }
  .cmd-dots i { opacity: 0.75; }
}

/* The artifact card is a flex column, so a badge would stretch edge to edge
   without this. It should hug its own text like the one on a note. */
.artifact .note-collection { align-self: flex-start; }

/* ═══════════════════════════════════════════════════════════════════════════
   Search, sort, density · review · quiz history · note editor · first run
   ═══════════════════════════════════════════════════════════════════════════ */

.notes-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 0 15px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--card-border);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.search:focus-within {
  border-color: rgba(165, 180, 252, 0.5);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.13);
}
.search svg { width: 15px; height: 15px; flex: none; color: var(--ink-faint); }

.search input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
}
.search input::placeholder { color: var(--ink-faint); }
.search input::-webkit-search-cancel-button { display: none; }

.search-x {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.search-x:hover { background: var(--card-hover); color: var(--ink); }

.tool-select,
.tool-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 12px 15px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tool-select:hover, .tool-btn:hover {
  background: var(--card-hover);
  color: var(--ink);
  border-color: var(--card-border-hover);
}
.tool-btn svg { width: 15px; height: 15px; }
.tool-btn.is-on { color: var(--hl-1); border-color: var(--card-border-hover); }

/* ── Compact density ─────────────────────────────────────────────────────────
   One row per note, laid out like a table so the eye can run down a column:

     [tick] [kind] [title ......................] [date] [class] [edit] [bin]

   The overflow this used to have was the classic flex trap: a flex item
   defaults to min-width:auto, so a long title refused to shrink below its own
   text and shoved everything after it off the right edge. Every flexible cell
   below is explicitly allowed to shrink, and every fixed cell is sized so the
   right-hand controls line up from row to row. */
.notes-grid.is-compact { grid-template-columns: 1fr; gap: 6px; }

.notes-grid.is-compact .note {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  overflow: hidden;          /* last line of defence against a stray wide child */
  transform: none;           /* the card lift reads as jitter in a dense list */
}
.notes-grid.is-compact .note:hover { transform: none; }

.notes-grid.is-compact .note-pick { position: static; opacity: 1; flex: none; }

/* The kind chip and the date are both children of .note-top, so constraining
   that wrapper squeezed the two of them into one narrow box and the
   right-aligned date bled left over the title. display:contents dissolves the
   wrapper so both become real cells of the row, and `order` then puts the date
   where it belongs: after the title, not before it. */
.notes-grid.is-compact .note-top {
  display: contents;
}

.notes-grid.is-compact .note-kind {
  flex: none;
  min-width: 76px;
  text-align: center;
}

.notes-grid.is-compact .note-expl,
.notes-grid.is-compact .note-collection,
.notes-grid.is-compact .note-src,
.notes-grid.is-compact .doc-thumb,
.notes-grid.is-compact .doc-stat { display: none; }

/* The title cell. min-width:0 is the fix; without it this never shrinks. */
.notes-grid.is-compact .note-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notes-grid.is-compact .note-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
  display: block;
}
/* One cell per row: when a title is present it is the cell, so the body text
   would otherwise land beside it as a second column. */
.notes-grid.is-compact .note:has(.note-title) .note-text { display: none; }

/* Expanding a row would break the grid, so rows stay one line. */
.notes-grid.is-compact .note.is-open .note-text,
.notes-grid.is-compact .note.is-open .note-title {
  white-space: nowrap;
  -webkit-line-clamp: 1;
}

/* Documents keep their title in .doc-head; the preview that follows it is
   redundant on a single line. */
.notes-grid.is-compact .doc-head {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  gap: 0;
}
.notes-grid.is-compact .doc-meta { flex: 1; min-width: 0; }
.notes-grid.is-compact .doc-name { font-size: 14px; font-weight: 500; color: var(--ink-dim); }
.notes-grid.is-compact .doc-head + .note-text { display: none; }

/* Right-hand columns: fixed widths so they align down the list. */
.notes-grid.is-compact .note-date {
  order: 1;                  /* after the title cell */
  display: block;
  flex: none;
  width: 92px;
  margin-left: 0;
  text-align: right;
  white-space: nowrap;       /* never wrap into a second line */
  overflow: hidden;          /* and never bleed past its cell */
  text-overflow: ellipsis;
}

.notes-grid.is-compact .note-foot {
  order: 2;                  /* controls stay last */
  flex: none;
  margin: 0;
  padding: 0;
  border: none;
  gap: 6px;
}

.notes-grid.is-compact .note-class {
  opacity: 1;
  width: 104px;
  flex: none;
  text-overflow: ellipsis;
}

.notes-grid.is-compact .note-edit,
.notes-grid.is-compact .note-del { opacity: 1; }

.notes-grid.is-compact .note-open {
  flex: none;
  padding: 4px 10px;
  font-size: 11px;
}

@media (max-width: 760px) {
  /* No room for a table on a phone: drop to tick, title, actions. */
  .notes-grid.is-compact .note-kind,
  .notes-grid.is-compact .note-date,
  .notes-grid.is-compact .note-class { display: none; }
  .notes-grid.is-compact .note { gap: 10px; padding: 10px 12px; }
}

/* ── Document card extras ── */
.doc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.doc-thumb {
  flex: none;
  width: 34px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid var(--card-border);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.doc-meta { min-width: 0; }
.doc-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-stat { font-size: 11.5px; color: var(--ink-faint); }

/* ── Review ── */
.tab-due:not(:empty) {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
}

.review-hero {
  padding: 46px 34px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--card-border);
  text-align: center;
}

.review-count {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.review-label { color: var(--ink-dim); font-size: 15px; margin: 8px 0 22px; }

.review-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--card-border);
}
.review-stat-num {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.review-stat-label { font-size: 11.5px; color: var(--ink-faint); }

/* Grading row inside the flashcard modal */
/* Left to right: no, kinda, yes. Colour-coded from the start rather than only
   on hover. The whole point is that the choice needs no reading. */
.fc-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }

.fc-grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 15px 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
}
.fc-grade svg { width: 22px; height: 22px; }
.fc-grade span { font-size: 12px; font-weight: 600; }
.fc-grade:hover { transform: translateY(-2px); }
.fc-grade:disabled { opacity: 0.4; cursor: default; transform: none; }

.fc-grade.g-no {
  color: #FB7185;
  border-color: rgba(251, 113, 133, 0.35);
  background: rgba(251, 113, 133, 0.09);
}
.fc-grade.g-no:hover { background: rgba(251, 113, 133, 0.17); border-color: rgba(251, 113, 133, 0.6); }

.fc-grade.g-part {
  color: var(--ink-dim);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}
.fc-grade.g-part:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.26); color: var(--ink); }

.fc-grade.g-yes {
  color: #4ADE80;
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.09);
}
.fc-grade.g-yes:hover { background: rgba(74, 222, 128, 0.17); border-color: rgba(74, 222, 128, 0.6); }

.fc-keys {
  margin-top: 14px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.fc-keys kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 2px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--ink-dim);
}

/* ── Quiz review & history ── */
.qz-review { display: grid; gap: 10px; margin-top: 22px; text-align: left; }

.qz-review-item {
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--ok);
}
.qz-review-item.is-wrong { border-left-color: var(--err); }

.qz-review-q { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; line-height: 1.5; }
.qz-review-line { font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
.qz-review-line b { font-weight: 600; }
.qz-review-line.yours b { color: var(--err); }
.qz-review-line.right b { color: var(--ok); }

.qz-history {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--card-border);
}
.qz-history-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.qz-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--ink-dim);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.qz-history-row:last-child { border-bottom: none; }
.qz-history-score { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.qz-history-when { margin-left: auto; color: var(--ink-faint); font-size: 11.5px; }

.qz-weak {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.26);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.qz-weak strong { color: var(--ink); }

/* ── Note editor ── */
.edit-body {
  width: 100%;
  min-height: 210px;
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 11px;
  background: rgba(14, 11, 31, 0.7);
  border: 1px solid var(--card-border);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
  outline: none;
}
.edit-body:focus {
  border-color: rgba(165, 180, 252, 0.5);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.13);
}

.note-edit {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.note:hover .note-edit { opacity: 1; }
.note-edit:hover { background: var(--card-hover); color: var(--ink); }
.note-edit svg { width: 14px; height: 14px; }

/* ── First run ── */
.firstrun {
  max-width: 720px;
  margin: 8px auto 0;
  padding: 34px 30px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--card-border);
}
.firstrun h2 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.firstrun-sub { color: var(--ink-faint); font-size: 14px; margin: 6px 0 24px; }

.firstrun-steps { display: grid; gap: 18px; }
.firstrun-step { display: flex; gap: 14px; align-items: flex-start; }
.firstrun-step strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.firstrun-step div { font-size: 13.5px; line-height: 1.65; color: var(--ink-dim); }

.firstrun-num {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.firstrun-cta {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--card-border);
}

/* ═══ Mobile ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .notes-tools { flex-wrap: wrap; }
  .search { flex: 1 1 100%; order: -1; }
  .tool-select, .tool-btn { flex: 1; justify-content: center; }

  .study-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .study-tab { white-space: nowrap; padding: 11px 12px; font-size: 13.5px; }

  .notes-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filter { flex: none; }

  .cmd-inner { padding-left: 14px; gap: 9px; }
  .cmd-input { font-size: 16px; }   /* 16px stops iOS zooming the field on focus */
  .cmd-go { width: 38px; height: 38px; }
  .cmd-chips { gap: 6px; }
  .chip-action { font-size: 12px; padding: 6px 11px; }

  .modal { max-width: none; max-height: 94vh; border-radius: 16px; }
  .modal-body { padding: 18px 16px; }
  .fc-card { min-height: 260px; }
  .fc-face { font-size: 15px; padding: 24px 18px; }
  .fc-grades { gap: 7px; }
  .fc-grade { padding: 12px 4px 10px; font-size: 11.5px; }

  .review-hero { padding: 26px 18px; }
  .review-count { font-size: 44px; }
  .review-stats { gap: 18px; }

  .firstrun { padding: 26px 20px; }
  .firstrun-cta { flex-direction: column; }

  .qz-opt { padding: 14px 14px; font-size: 14.5px; }   /* comfortable tap target */
  .reader-bar { padding: 11px 14px; gap: 10px; }
  .reader-title { font-size: 14px; }
}

@media (max-width: 420px) {
  .study { padding: 22px 12px 90px; }
  .bulkbar { gap: 7px; padding: 9px 10px; }
  .bulk-btn, .bulk-select { padding: 6px 10px; font-size: 12px; }
}

/* ── Find sources ── */
.src-intro { max-width: 640px; margin-bottom: 20px; }
.src-intro h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.src-intro p { font-size: 14px; line-height: 1.65; color: var(--ink-dim); }

.src-bar { display: flex; gap: 10px; margin-bottom: 12px; }
.src-bar input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(27, 22, 56, 0.86);
  border: 1px solid var(--card-border);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.src-bar input::placeholder { color: var(--ink-faint); }
.src-bar input:focus {
  border-color: rgba(165, 180, 252, 0.5);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.13);
}
.src-bar .qz-next { flex: none; padding: 0 22px; }

.src-opts { display: flex; gap: 18px; margin-bottom: 20px; font-size: 12.5px; color: var(--ink-dim); }
.src-opts label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.src-opts input {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px;
  border-radius: 4px;
  border: 1px solid var(--card-border-hover);
  background-color: rgba(14, 11, 31, 0.9);
  background-repeat: no-repeat; background-position: center; background-size: 10px;
  cursor: pointer;
}
.src-opts input:checked {
  background-color: var(--brand-1);
  border-color: var(--brand-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.src-results { display: grid; gap: 12px; }

.src-card {
  padding: 24px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--card-border);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.src-card:hover { border-color: var(--card-border-hover); background: var(--card-hover); }

.src-title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 6px;
}
.src-title a { color: inherit; text-decoration: none; }
.src-title a:hover { color: var(--hl-1); }

.src-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.src-oa {
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(74, 222, 128, 0.15);
  color: var(--ok);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.03em;
}

.src-why {
  padding: 10px 13px;
  border-radius: 9px;
  background: rgba(102, 126, 234, 0.09);
  border: 1px solid rgba(165, 180, 252, 0.18);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin-bottom: 12px;
}

.src-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.src-btn {
  padding: 6px 13px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.src-btn:hover { background: var(--card-hover); color: var(--ink); border-color: var(--card-border-hover); }
.src-btn.is-saved { color: var(--ok); border-color: rgba(74,222,128,0.4); }

/* ── Auto-file rule row in the class dialog ── */
.rule-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--card-border); }
.rule-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
}
.rule-hint { font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); margin-bottom: 10px; }
.rule-row { display: flex; gap: 8px; }
.rule-row .prompt-input { flex: 1; padding: 9px 12px; font-size: 13px; }
.rule-list { display: grid; gap: 6px; margin-top: 10px; }
.rule-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--card-border);
  font-size: 12.5px;
  color: var(--ink-dim);
}
.rule-item code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--hl-1); }
.rule-del {
  margin-left: auto; padding: 2px 8px;
  border: none; border-radius: 6px; background: transparent;
  color: var(--ink-faint); cursor: pointer; font-size: 15px; line-height: 1;
}
.rule-del:hover { background: rgba(251,113,133,0.14); color: var(--err); }

@media (max-width: 760px) {
  .src-bar { flex-direction: column; }
  .src-bar .qz-next { padding: 12px; }
  .src-opts { flex-direction: column; gap: 9px; }
}

/* ── Load more ── */
.src-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 0 4px;
}

.src-more-btn {
  padding: 10px 26px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--card-border-hover);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.src-more-btn:hover { background: var(--card-hover); transform: translateY(-1px); }

.src-more-note { font-size: 12px; color: var(--ink-faint); }

/* ── Very wide displays ──────────────────────────────────────────────────────
   Extra width buys another column of cards, never longer lines of text. The
   reader keeps its own measure regardless: prose past roughly 75 characters
   a line gets measurably harder to follow, and no amount of screen changes
   that. */
@media (min-width: 1650px) {
  .study { max-width: 1560px; }
  .study-layout { grid-template-columns: 264px minmax(0, 1fr); gap: 44px; }
  .notes-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .artifact-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* Between the phone rules and the full desktop layout the sidebar still fits,
   but the card grids need to give up a column before they get cramped. */
@media (max-width: 1180px) and (min-width: 861px) {
  .study { padding-left: 24px; padding-right: 24px; }
  .study-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
  .notes-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
  .artifact-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
}

/* ── Share ── */
.artifact-share {
  position: absolute;
  top: 12px;
  right: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.artifact:hover .artifact-share { opacity: 1; }
.artifact-share:hover { background: var(--card-hover); color: var(--ink); }
.artifact-share svg { width: 14px; height: 14px; }

/* A shared set says so without being hovered. You need to know at a glance
   which of your sets are public. */
.artifact-share.is-shared { opacity: 1; color: var(--ok); }

.share-link { display: flex; gap: 8px; margin-bottom: 14px; }
.share-link input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(14, 11, 31, 0.75);
  border: 1px solid var(--card-border);
  color: var(--hl-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  outline: none;
}
.share-link input:focus { border-color: var(--card-border-hover); }
.share-link .qz-next { flex: none; padding: 0 18px; }

.share-alt { display: flex; gap: 8px; }

/* Class setup opens as a tab, so it can arrive with no class selected. The
   picker is the panel doing the job rather than pointing at the sidebar. */
.course-pick-list { display: grid; gap: 8px; margin-top: 16px; }
.course-pick-one {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.course-pick-one:hover { background: var(--card-hover); border-color: var(--card-border-hover); }
.course-pick-set {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--hl-1);
  background: rgba(102, 126, 234, 0.14);
  border-radius: 999px;
  padding: 3px 9px;
}

/* ── "How many?" prompt ──────────────────────────────────────────────────────
   Three cards showing the real count for the material in scope. The number is
   the label: "Fewer" means nothing on its own, "12" does. */
.ask-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.ask-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 18px 8px 14px;
  border-radius: 13px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink-dim);
  font-family: var(--sans);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.14s ease;
}
.ask-opt:hover {
  background: var(--card-hover);
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
}

.ask-opt.is-on {
  border-color: rgba(165, 180, 252, 0.55);
  background: rgba(102, 126, 234, 0.11);
}

.ask-count {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.ask-opt.is-on .ask-count {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ask-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.ask-note { font-size: 11px; color: var(--ink-faint); text-align: center; line-height: 1.4; }

/* Escape hatch for anyone whose answer isn't one of the three cards. */
.ask-custom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
}
.ask-custom label { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.ask-custom input {
  width: 74px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.ask-custom input:focus {
  outline: none;
  border-color: rgba(165, 180, 252, 0.55);
  background: rgba(102, 126, 234, 0.09);
}
.ask-custom-noun { font-size: 12.5px; color: var(--ink-faint); margin-right: auto; }
.ask-custom-go {
  padding: 8px 16px;
  border-radius: 9px;
  border: none;
  background: var(--grad);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ask-custom-go:hover { filter: brightness(1.08); }

.ask-foot {
  grid-column: 1 / -1;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  text-align: center;
}
.ask-foot.is-error { color: #FCA5A5; }

@media (max-width: 640px) {
  .ask-opts { grid-template-columns: 1fr; }
  .ask-opt { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 14px 16px; }
  .ask-count { font-size: 21px; min-width: 34px; }
  .ask-note { text-align: left; }
  .ask-custom { flex-wrap: wrap; }
  .ask-custom-noun { margin-right: 0; }
  .ask-custom-go { margin-left: auto; }
}

/* ── First-run dismissal ── */
.firstrun { position: relative; }

.firstrun-x {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.firstrun-x:hover { background: var(--card-hover); color: var(--ink); }
.firstrun-x svg { width: 15px; height: 15px; }

.firstrun-skip {
  padding: 12px 18px;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}
.firstrun-skip:hover { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════
   Course setup
   ══════════════════════════════════════════════════════════════ */

.course-pick, .course-empty {
  text-align: center;
  padding: 46px 24px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
}
.course-pick h3, .course-empty h4 {
  font-family: var(--display);
  font-size: 19px;
  margin-bottom: 8px;
}
.course-pick p, .course-empty p {
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto 18px;
}
.course-empty-icon {
  width: 46px; height: 46px;
  margin: 0 auto 14px;
  color: var(--hl-1);
}
.course-empty-icon svg { width: 100%; height: 100%; }
.course-cost {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-faint);
}

.course-head { margin-bottom: 18px; }
.course-head h3 { font-family: var(--display); font-size: 21px; margin-bottom: 5px; }
.course-head p { color: var(--ink-dim); font-size: 13.5px; }

.course-card {
  background: linear-gradient(180deg, rgba(102, 126, 234, 0.11), rgba(118, 75, 162, 0.05));
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 20px;
}
.course-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.course-code {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hl-1);
}
.course-name { font-family: var(--display); font-size: 20px; font-weight: 700; }
.course-reparse {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
}
.course-reparse:hover { color: var(--ink); border-color: var(--card-border-hover); }

.course-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 16px; }
.fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.fact strong { font-size: 13.5px; font-weight: 600; }

/* The AI policy. Students genuinely cannot keep five of these straight, and
   nobody else surfaces it, so it gets real visual weight. */
.policy {
  border-radius: var(--r-md);
  padding: 14px 16px;
  border: 1px solid;
}
.policy-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.policy.p-ok   { background: rgba(74, 222, 128, 0.1);  border-color: rgba(74, 222, 128, 0.32); }
.policy.p-ok   .policy-badge { background: rgba(74, 222, 128, 0.2); color: #86EFAC; }
.policy.p-warn { background: rgba(251, 191, 36, 0.1);  border-color: rgba(251, 191, 36, 0.32); }
.policy.p-warn .policy-badge { background: rgba(251, 191, 36, 0.2); color: #FCD34D; }
.policy.p-no   { background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.34); }
.policy.p-no   .policy-badge { background: rgba(251, 113, 133, 0.2); color: #FDA4AF; }
.policy.p-none { background: rgba(255, 255, 255, 0.04); border-color: var(--card-border); }
.policy.p-none .policy-badge { background: rgba(255, 255, 255, 0.09); color: var(--ink-dim); }

.policy-sum { font-size: 13.5px; line-height: 1.6; margin-top: 9px; }
.policy-dim { color: var(--ink-faint); }
.policy-quote {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-dim);
  line-height: 1.6;
}

.course-sched { margin-top: 16px; }
.course-sched summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
}
.course-sched summary:hover { color: var(--ink); }
.course-sched ol { margin: 12px 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.course-sched li { font-size: 13px; color: var(--ink-dim); line-height: 1.5; }
.course-sched strong { color: var(--ink); margin-right: 4px; }
.sched-read { color: var(--ink-faint); font-size: 12px; }

/* ── Material cards ── */
/* Materials are a separate section from the syllabus card above, so they get a
   labelled break rather than just a gap. */
.mat-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 34px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--card-border);
}
.mat-section-head h4 { font-family: var(--display); font-size: 16px; font-weight: 700; }
.mat-section-head span { font-size: 12.5px; color: var(--ink-faint); }

.mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  align-items: start;
}
.mat-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: 16px;
}
.mat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mat-label { font-family: var(--display); font-size: 15px; font-weight: 700; }
.mat-add {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--hl-1);
  background: rgba(102, 126, 234, 0.14);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}
.mat-add:hover { background: rgba(102, 126, 234, 0.24); }
.mat-blurb { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; margin-bottom: 10px; }
.mat-note { font-size: 11.5px; color: var(--ink-faint); margin: -6px 0 10px; }
.mat-none { font-size: 12.5px; color: var(--ink-faint); }
.mat-list { display: flex; flex-direction: column; gap: 5px; }
.mat-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 7px;
  padding: 6px 8px;
}
.mat-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.mat-name:hover { color: var(--hl-1); }
.mat-del {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  font-family: inherit;
}
.mat-del:hover { color: var(--err); }

/* ══════════════════════════════════════════════════════════════
   Write: voice, drafts, editor, feedback
   ══════════════════════════════════════════════════════════════ */

.voice-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 22px;
}
.voice-card.is-ready {
  background: linear-gradient(180deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.04));
  border-color: rgba(129, 140, 248, 0.3);
}
.voice-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.voice-label { font-family: var(--display); font-size: 16px; font-weight: 700; }
.voice-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(74, 222, 128, 0.18); color: #86EFAC;
}
.voice-pill-off { background: rgba(255, 255, 255, 0.08); color: var(--ink-faint); }
.voice-blurb { font-size: 13px; color: var(--ink-dim); line-height: 1.6; max-width: 640px; }
.voice-more { font-size: 12px; color: var(--ink-faint); margin-top: 8px; }
.voice-list { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.voice-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 7px; padding: 6px 8px;
}
.voice-list li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-len { flex-shrink: 0; color: var(--ink-faint); font-size: 11.5px; }
.voice-actions { display: flex; gap: 8px; margin-top: 14px; }

.drafts-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.drafts-head h3 { font-family: var(--display); font-size: 18px; }
.drafts-list { display: flex; flex-direction: column; gap: 8px; }
.draft-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: 13px 15px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.draft-row:hover { background: var(--card-hover); border-color: var(--card-border-hover); }
.draft-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-class, .draft-score, .draft-when { flex-shrink: 0; font-size: 12px; color: var(--ink-faint); }
.draft-score {
  font-weight: 700; color: var(--hl-1);
  background: rgba(102, 126, 234, 0.16);
  border-radius: 6px; padding: 2px 7px;
}

/* ── Editor ── */
.ed-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ed-title {
  flex: 1; min-width: 0;
  background: none; border: none;
  font-family: var(--display);
  font-size: 19px; font-weight: 700;
  color: var(--ink);
  padding: 4px 0;
}
.ed-title:focus { outline: none; border-bottom: 1px solid var(--card-border-hover); }
.ed-saved { flex-shrink: 0; font-size: 11.5px; color: var(--ink-faint); min-width: 54px; text-align: right; }

.ed-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.ed-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-faint); }
.ed-opts select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 9px;
  max-width: 260px;
}
.ed-hint { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 12px; }

.ed-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ed-text {
  width: 100%;
  min-height: 60vh;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.75;
  padding: 18px;
  resize: vertical;
}
.ed-text:focus { outline: none; border-color: var(--card-border-hover); }

.ed-feedback {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: 18px;
  min-height: 60vh;
  max-height: 78vh;
  overflow-y: auto;
}
.fb-idle { text-align: center; padding: 40px 12px; color: var(--ink-faint); font-size: 13px; }
.fb-idle-sub { margin-top: 6px; font-size: 12px; }

.fb-verdict { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.fb-score {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 26px; font-weight: 800;
  color: var(--hl-1);
  line-height: 1.1;
}
.fb-verdict p { font-size: 14px; line-height: 1.6; font-weight: 600; }
.fb-caveat {
  font-size: 12px; color: var(--ink-faint);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px; padding: 9px 11px;
  margin-bottom: 14px; line-height: 1.55;
}
.fb-block { margin-top: 18px; }
.fb-block h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); margin-bottom: 9px;
}
.fb-crit, .fb-issue {
  border-top: 1px solid var(--card-border);
  padding: 11px 0;
}
.fb-crit-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.fb-crit-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.fb-pts { flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--hl-1); }
.fb-status {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.fb-status.s-ok   { background: rgba(74, 222, 128, 0.18);  color: #86EFAC; }
.fb-status.s-mid  { background: rgba(251, 191, 36, 0.18);  color: #FCD34D; }
.fb-status.s-low  { background: rgba(251, 146, 60, 0.18);  color: #FDBA74; }
.fb-status.s-none { background: rgba(251, 113, 133, 0.18); color: #FDA4AF; }
.fb-why { font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; }
.fb-fix { font-size: 12.5px; color: var(--ink); line-height: 1.6; margin-top: 5px; }
.fb-fix strong { color: var(--hl-1); }
.fb-issue blockquote {
  font-size: 12.5px; font-style: italic; color: var(--ink-dim);
  border-left: 2px solid rgba(165, 180, 252, 0.4);
  padding-left: 10px; margin-bottom: 6px; line-height: 1.55;
}
.fb-strengths { margin-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.fb-strengths li { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; }

@media (max-width: 900px) {
  .ed-split { grid-template-columns: 1fr; }
  .ed-text { min-height: 42vh; }
  .ed-feedback { min-height: 0; max-height: none; }
}

/* ── Pick existing notes as voice samples ── */
.voice-from {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--ink-faint);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 5px;
  padding: 1px 6px;
}

.pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  margin: 14px 0 16px;
}
.pick-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pick-row:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--card-border); }
.pick-row:has(.pick-box:checked) {
  background: rgba(102, 126, 234, 0.14);
  border-color: rgba(129, 140, 248, 0.4);
}
.pick-box { flex-shrink: 0; accent-color: var(--brand-1); width: 16px; height: 16px; }
.pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-title {
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-preview {
  font-size: 11.5px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pick-meta { flex-shrink: 0; display: flex; align-items: center; gap: 7px; }

.pick-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 14px;
}
.pick-search svg {
  position: absolute;
  left: 11px;
  width: 15px; height: 15px;
  color: var(--ink-faint);
  pointer-events: none;
}
.pick-search input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 12px 9px 34px;
}
.pick-search input:focus { outline: none; border-color: var(--card-border-hover); }
.pick-search input::-webkit-search-cancel-button { filter: invert(0.6); cursor: pointer; }

.pick-none {
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  padding: 18px 0;
}

/* ══════════════════════════════════════════════════════════════
   Note editor: a document, not a dialog

   A student's own writing needs to feel like it lives somewhere. A small modal
   over a dimmed page reads as temporary, and temporary is what stops people
   putting anything real into it. Full surface, continuous save, no Save button.
   ══════════════════════════════════════════════════════════════ */

.doc {
  position: fixed;
  inset: 0;
  /* Above the site nav, which is fixed at z-index 100. At 90 the nav painted
     straight over the doc bar, so the only way out of the editor was invisible.
     Matches .reader, the other full-surface view. */
  z-index: 150;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}
body.is-doc-open { overflow: hidden; }

.doc-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--card-border);
}
.doc-state { font-size: 12px; color: var(--ink-faint); }
.doc-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.doc-class {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 9px;
  max-width: 190px;
}
.doc-tool {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.doc-tool:hover:not(:disabled) { color: var(--ink); border-color: var(--card-border-hover); }
/* "Undo last" sits here permanently and spends most of its life unavailable, so
   it has to look unavailable rather than merely fail to respond. */
.doc-tool:disabled { opacity: 0.38; cursor: default; }
.doc-tool.is-on {
  color: var(--hl-1);
  background: rgba(102, 126, 234, 0.16);
  border-color: rgba(129, 140, 248, 0.4);
}
.doc-tool-danger:hover { color: var(--err); border-color: rgba(251, 113, 133, 0.4); }

/* The way out. A back arrow alone reads as navigation, not as "I've finished
   writing", and on a full surface there is no page behind it to click away to. */
.doc-done {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--grad);
  border: none;
  border-radius: 9px;
  padding: 7px 18px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
}
.doc-done:hover { filter: brightness(1.08); }

/* The sheet. A fixed measure because prose past roughly 75 characters a line
   gets hard to track back to the next one. */
.doc-sheet {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 28px 24px;
  display: flex;
  flex-direction: column;
}

.doc-title {
  width: 100%;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  padding: 0 0 14px;
}
.doc-title:focus { outline: none; }
.doc-title::placeholder { color: var(--ink-faint); opacity: 0.55; }

.doc-body-wrap {
  position: relative;
  flex: 1;
  min-height: 48vh;
  display: flex;
}

/* Where SmartSnap last added something. A thin rule in the margin says "this
   part is new" without colouring over the writing itself, and it fades out on
   its own rather than needing to be dismissed. */
.doc-mark {
  position: absolute;
  left: -15px;
  width: 2px;
  border-radius: 2px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.doc-mark.is-on { opacity: 0.85; }

.doc-body {
  flex: 1;
  min-height: 0;
  width: 100%;
  background: none;
  border: none;
  resize: none;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 16.5px;
  line-height: 1.85;
  padding: 0;
}
.doc-body:focus { outline: none; }
.doc-body::placeholder { color: var(--ink-faint); opacity: 0.55; }

.doc-stats {
  flex-shrink: 0;
  display: flex;
  gap: 14px;
  padding-top: 18px;
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* ── AI help bar ── */
.doc-ai {
  flex-shrink: 0;
  border-top: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  transition: background 0.2s ease;
}
.doc-ai-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 14px 28px 18px;
}

.doc-ai-out {
  margin-bottom: 10px;
  font-size: 13px;
  transition: opacity 0.4s ease;
}
/* Confirmations clear themselves after ten seconds. Fading rather than
   vanishing keeps it from reading as a glitch in the corner of the eye. */
.doc-ai-out.is-fading { opacity: 0; }
.doc-ai-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--ink-dim); }
.doc-ai-out.is-error .doc-ai-row { color: var(--err); }
.doc-ai-done { color: var(--ok); font-weight: 600; }
/* Said when a rewrite dropped most of the document. Undo is right beside it,
   and unlike a normal confirmation this one does not clear itself. */
.doc-ai-warn { color: var(--warn); font-weight: 600; }
.doc-ai-answer {
  line-height: 1.65;
  color: var(--ink);
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(129, 140, 248, 0.26);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 8px;
  max-height: 34vh;
  overflow-y: auto;
}
.doc-ai-badge {
  font-size: 10.5px;
  color: var(--hl-1);
  background: rgba(102, 126, 234, 0.16);
  border-radius: 999px;
  padding: 2px 8px;
}
.doc-ai-undo {
  margin-left: auto;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--card-border);
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
}
.doc-ai-undo:hover { color: var(--ink); }

/* Offered when the assistant replies instead of writing: the answer is usually
   still wanted, just in the document rather than in a box. */
.doc-ai-insert {
  margin-left: auto;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--hl-1);
  background: rgba(102, 126, 234, 0.14);
  border: 1px solid rgba(129, 140, 248, 0.34);
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.doc-ai-insert:hover { color: var(--ink); background: rgba(102, 126, 234, 0.24); }

.doc-ai-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.doc-chip {
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.doc-chip:hover {
  color: var(--ink);
  background: rgba(102, 126, 234, 0.16);
  border-color: rgba(129, 140, 248, 0.4);
}

.doc-ai-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(129, 140, 248, 0.28);
  border-radius: 13px;
  padding: 8px 10px 8px 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.doc-ai-bar:focus-within { border-color: rgba(129, 140, 248, 0.55); }
.doc-ai-spark { flex-shrink: 0; width: 15px; height: 15px; color: var(--hl-1); }
.doc-ai.is-working .doc-ai-spark { animation: doc-ai-pulse 1.1s ease-in-out infinite; }
@keyframes doc-ai-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
.doc-ai-spark svg { width: 100%; height: 100%; }
.doc-ai-bar input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}
.doc-ai-bar input:focus { outline: none; }
.doc-ai-go {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--grad);
  border: none;
  border-radius: 9px;
  padding: 6px 15px;
  cursor: pointer;
}
.doc-ai-go:disabled { opacity: 0.6; cursor: default; }

/* Working state. The old version disabled the button and left one grey line of
   text, which is easy to miss on a page you are also reading. Now the whole bar
   says so: the rail lights up, the field dims, and the button spins. */
.doc-ai-go.is-working {
  min-width: 52px;
  opacity: 1;
}
.doc-ai-go.is-working::after {
  content: "";
  display: block;
  width: 13px; height: 13px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: doc-ai-spin 0.65s linear infinite;
}
@keyframes doc-ai-spin { to { transform: rotate(360deg); } }

.doc-ai.is-working { background: rgba(102, 126, 234, 0.07); }
.doc-ai.is-working .doc-ai-bar {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}
.doc-ai.is-working #editAiInput { opacity: 0.5; }
.doc-ai.is-working .doc-ai-chips { opacity: 0.4; pointer-events: none; }

.doc-ai-busy { color: var(--hl-1); font-weight: 600; }
/* Echo of what was asked, since the bar itself is cleared on send */
.doc-ai-asked {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
}

.doc-ai-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); }

@media (max-width: 620px) {
  .doc-sheet { padding: 26px 18px 18px; }
  .doc-ai-inner { padding: 12px 18px 14px; }
  .doc-title { font-size: 24px; }
  .doc-body { font-size: 15.5px; }
  .doc-bar { padding: 12px 16px; gap: 10px; }
  .doc-class { max-width: 120px; }
}

/* ══════════════════════════════════════════════════════════════
   Structure: three places, two views

   Six peer tabs put "set up a class once a term" next to "the notes I opened
   this page for". Setup now hangs off the class it belongs to, Find Sources
   opens from the command bar, and what is left are the three things a student
   actually moves between.
   ══════════════════════════════════════════════════════════════ */

/* Course setup, on the class it belongs to. */
.class-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 2px 0 4px;
  padding: 7px 12px 7px 30px;
  border: none;
  border-radius: var(--r-sm, 9px);
  background: none;
  color: var(--ink-faint);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.class-sub svg { width: 13px; height: 13px; flex-shrink: 0; }
.class-sub:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
/* A class with no syllabus yet is the one thing worth nudging about. */
.class-sub.is-todo { color: var(--hl-1); }
.class-sub.is-todo::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--hl-1);
  margin-left: auto;
}

/* A view sits where the tabs were, with a way back. */
.view-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 7px 13px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.view-back:hover { color: var(--ink); background: var(--card-hover); border-color: var(--card-border-hover); }
.view-back svg { width: 14px; height: 14px; }

/* Section heading inside a panel, so Study reads as two things not one list. */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 30px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--card-border);
}
.sec-head h4 { font-family: var(--display); font-size: 16px; font-weight: 700; }
.sec-head > span { font-size: 12.5px; color: var(--ink-faint); }

/* One "Add" instead of a separate write button and upload button. */
.add-menu { position: relative; }
.add-menu > summary {
  list-style: none;
  cursor: pointer;
}
.add-menu > summary::-webkit-details-marker { display: none; }
.tool-primary {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
}
.tool-primary:hover { filter: brightness(1.08); }
.tool-icon { padding-left: 10px; padding-right: 10px; }

.add-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--card-border-hover);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.add-pop button {
  text-align: left;
  padding: 9px 11px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.add-pop button:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }