/* ══════════════ Base ══════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { overflow-x: hidden; }

/* ── Dark-mode transition on bg & color ── */
body, .sidebar, .bottom-nav, .card, .modal-box, .input,
.editor-toolbar, .onboarding-card, .course-list-item,
.cal-day, .cal-header, .cal-list-day, .cal-list-day-header,
.cal-list-item, .cal-month-wrap, .cal-event-pill,
.onboard-step-dot, .onboard-step-line, .onboard-wrapper {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ══════════════ Scrollbar ══════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* ══════════════ Sidebar ══════════════ */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 16rem;
  background: #fff; border-right: 1px solid #e5e7eb;
  z-index: 40; transform: translateX(-100%);
  transition: transform .2s ease;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar.open { transform: translateX(0); }
@media (min-width: 768px) {
  .sidebar { transform: translateX(0); }
}

/* ══════════════ Bottom Nav ══════════════ */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #e5e7eb;
  z-index: 40; display: flex;
  transform: translateY(0);
  transition: transform .25s ease;
}
.bottom-nav.hidden-by-sidebar { transform: translateY(100%); }
@media (min-width: 768px) { .bottom-nav { display: none; } }

.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: .5rem 0; font-size: .65rem; color: #6b7280;
  text-decoration: none; transition: color .15s;
}
.bottom-nav a.active, .bottom-nav a:hover { color: #6366f1; }
.bottom-nav a svg { width: 20px; height: 20px; margin-bottom: 2px; }

/* ══════════════ Reading Column ══════════════ */
.reading-column {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

/* ══════════════ Markdown Content ══════════════ */
/*  Readability: 50-75 char measure via max-width:70ch,
    17px body text, 1.65 line-height, proportional spacing.
    Based on Bringhurst / Baymard / WCAG best practices.  */
.md-content {
  font-size: 1rem;           /* 16px — denser for compact reading */
  line-height: 1.55;
  color: #374151;            /* gray-700: softer than pure black */
  letter-spacing: -0.005em;  /* slight tightening for Inter */
  word-spacing: 0.02em;
}
/* — Headings: clear hierarchy, generous top margin = visual sections — */
.md-content h1 { font-size: 1.45rem; font-weight: 700; margin: 1.35rem 0 .45rem; letter-spacing: -0.02em; color: #111827; }
.md-content h2 { font-size: 1.2rem;  font-weight: 600; margin: 1.15rem 0 .4rem; letter-spacing: -0.015em; color: #1f2937; }
.md-content h3 { font-size: 1.08rem; font-weight: 600; margin: .95rem 0 .35rem; letter-spacing: -0.01em; color: #1f2937; }
.md-content h4 { font-size: .96rem;  font-weight: 600; margin: .8rem 0 .3rem; color: #374151; }
/* First heading after nothing needs no top gap */
.md-content > h1:first-child,
.md-content > h2:first-child,
.md-content > h3:first-child,
.md-content > h4:first-child { margin-top: 0; }
/* — Body blocks — */
.md-content p { margin: .55em 0; }
.md-content ul, .md-content ol { margin: .5em 0 .5em 1.4rem; }
.md-content ul { list-style-type: disc; }
.md-content ol { list-style-type: decimal; }
.md-content ul ul { list-style-type: circle; }
.md-content ul ul ul { list-style-type: square; }
.md-content li { margin: .2em 0; }
.md-content li > p { margin: .25em 0; } /* tighter inside list items */
/* — Inline elements — */
.md-content code {
  background: #f3f4f6; padding: .15rem .35rem;
  border-radius: 4px; font-size: .875em;   /* relative to parent */
}
.md-content pre {
  background: #1f2937; color: #e5e7eb; padding: 1rem;
  border-radius: 8px; overflow-x: auto; margin: 1em 0;
  max-width: none;  /* code blocks can be wider than prose */
}
.md-content pre code { background: none; color: inherit; padding: 0; font-size: .875rem; }
.md-content blockquote {
  border-left: 3px solid #6366f1; padding: .5rem 1rem;
  margin: 1em 0; background: #eef2ff; border-radius: 0 8px 8px 0;
}
.md-content a { color: #6366f1; text-decoration: underline; text-underline-offset: 2px; }
/* Images sit centred in the column, the way a slide or a board photo sits in
   printed notes, and never taller than most of the screen — a portrait photo
   used to fill the column top to bottom. display:block is set here rather
   than left to Tailwind's preflight. With width and height both auto, the
   two caps keep the picture's proportions. */
.md-content img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: min(75vh, 42rem);
  margin: 1.25rem auto;
  border-radius: 8px;
}
.md-content img { cursor: zoom-in; }
/* marked wraps an image on a line of its own in a <p>; the image's own margin
   is the gap, so the paragraph's is not stacked on top of it. */
.md-content p:has(> img:only-child),
.md-content p:has(> a:only-child > img:only-child) { margin: 0; }
.md-content td img,
.md-content .admonition img { margin: .5rem auto; }

.note-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(17, 24, 39, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.note-lightbox-image {
  max-width: min(1200px, 96vw);
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
}
.note-lightbox-close {
  position: fixed;
  top: .75rem;
  right: .75rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.slides-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  width: 100%;
}
.slides-section-body {
  padding: 0;
  display: grid;
  gap: .7rem;
  width: 100%;
}

.slide-deck-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}
.slide-deck-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .75rem;
  list-style: none;
  cursor: pointer;
  border-radius: 10px;
}
.slide-deck-summary::-webkit-details-marker {
  display: none;
}
.slide-deck-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.slide-deck-title {
  font-size: .875rem;
  font-weight: 600;
  color: #1f2937;
}
.slide-deck-count {
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: .7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.slide-deck-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .55rem;
  padding: .65rem;
  border-top: 1px solid #f1f5f9;
}
.slide-deck-pdf-body {
  border-top: 1px solid #f1f5f9;
  background: #fff;
}
.slide-deck-pdf-actions {
  padding: .55rem .65rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}
.slide-deck-pdf-link {
  font-size: .8rem;
  color: #2563eb;
  text-decoration: none;
}
.slide-deck-pdf-link:hover {
  text-decoration: underline;
}
.slide-deck-pdf-quality-btn {
  font-size: .78rem;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: .2rem .55rem;
  cursor: pointer;
}
.slide-deck-pdf-quality-btn:hover {
  background: #dbeafe;
}
.slide-deck-pdf-frame {
  display: block;
  width: 100%;
  height: min(72vh, 800px);
  min-height: 420px;
  border: 0;
  background: #f8fafc;
}
.note-pdfjs-viewer {
  padding: .75rem;
  display: grid;
  gap: .85rem;
  background: #f8fafc;
  justify-items: center;
  overflow-x: hidden;
}
.pdfjs-page {
  position: relative;
  margin: 0 auto;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .14);
  background: #fff;
  overflow: hidden;
  max-width: 100%;
}
.pdfjs-canvas {
  display: block;
  width: 100%;
  height: auto;
}
.pdfjs-text-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}
.pdfjs-text-layer span,
.pdfjs-text-layer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  transform-origin: 0% 0%;
  cursor: text;
}
.pdfjs-link-layer {
  position: absolute;
  inset: 0;
}
.pdfjs-link-annotation {
  position: absolute;
  display: block;
  text-decoration: none;
  background: transparent;
}
.slide-deck-pdf-status {
  padding: .85rem .9rem;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-size: .82rem;
}
.slide-deck-pdf-status-error {
  color: #b91c1c;
}
.note-slide-thumb {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  padding: .2rem;
  cursor: zoom-in;
  text-align: left;
}
.note-slide-thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.dark .slide-deck-item {
  border-color: #374151;
  background: #111827;
}
.dark .slide-deck-summary {
  background: #1f2937;
  color: #e5e7eb;
}
.dark .slide-deck-summary:hover {
  background: #273449;
}
.dark .slide-deck-title {
  color: #e5e7eb;
}
.dark .slide-deck-title-wrap svg {
  color: #93c5fd;
}
.dark .slide-deck-count {
  background: #312e81;
  color: #c7d2fe;
}
.dark .slide-deck-thumbs {
  border-top-color: #374151;
  background: #111827;
}
.dark .slide-deck-pdf-body {
  border-top-color: #374151;
  background: #111827;
}
.dark .slide-deck-pdf-actions {
  border-bottom-color: #374151;
}
.dark .slide-deck-pdf-link {
  color: #93c5fd;
}
.dark .slide-deck-pdf-quality-btn {
  border-color: #1e3a8a;
  background: #0f172a;
  color: #93c5fd;
}
.dark .slide-deck-pdf-quality-btn:hover {
  background: #172554;
}
.dark .slide-deck-pdf-frame {
  background: #fff;
}
.dark .note-pdfjs-viewer {
  background: #0b1220;
}
.dark .pdfjs-page {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.dark .slide-deck-pdf-status {
  border-top-color: #374151;
  color: #b8bfd1;
}
.dark .slide-deck-pdf-status-error {
  color: #fca5a5;
}
.dark .note-slide-thumb {
  border-color: #4b5563;
  background: #fff;
}
.dark .note-slide-thumb:hover {
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, .25);
}

/* Force replaced/embedded elements to respect container width */
.md-content table,
.md-content img,
.md-content iframe,
.md-content video,
.md-content object,
.md-content embed { max-width: 100%; box-sizing: border-box; }
.md-content table { width: max-content; min-width: 100%; border-collapse: collapse; margin: 1em 0; display: block; overflow-x: auto; font-size: .9375rem; }
.md-content th, .md-content td { border: 1px solid #e5e7eb; padding: .45rem .65rem; text-align: left; vertical-align: top; word-break: normal; overflow-wrap: normal; }
.md-content th { background: #f9fafb; font-weight: 600; }
.md-content tbody, .md-content thead, .md-content tr { max-width: 100%; }
.md-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5em 0; }

/* ══════════════ Admonitions (Obsidian/Quartz-style) ══════════════ */
.admonition {
  border-radius: 0 8px 8px 0;
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-left: 4px solid;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: box-shadow .15s ease;
}
.admonition:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.admonition-title {
  display: flex; align-items: center; gap: .5rem;
  padding: 0; font-weight: 700; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .5rem;
}
.admonition-title svg { width: 16px; height: 16px; flex-shrink: 0; }
.admonition-content { padding: 0; font-size: inherit; line-height: 1.6; }
.admonition-content p:first-child { margin-top: 0; }
.admonition-content p:last-child { margin-bottom: 0; }

/* Note */
.admonition-note { border-color: #448aff; background: #448aff10; }
.admonition-note .admonition-title { color: #448aff; }
/* Info */
.admonition-info { border-color: #00b8d4; background: #00b8d410; }
.admonition-info .admonition-title { color: #00b8d4; }
/* Todo */
.admonition-todo { border-color: #00b8d4; background: #00b8d410; }
.admonition-todo .admonition-title { color: #00b8d4; }
/* Tip, Hint */
.admonition-tip, .admonition-hint { border-color: #00bfa5; background: #00bfa510; }
.admonition-tip .admonition-title, .admonition-hint .admonition-title { color: #00bfa5; }
/* Important */
.admonition-important { border-color: #a855f7; background: #a855f710; }
.admonition-important .admonition-title { color: #a855f7; }
/* Success, Check, Done */
.admonition-success, .admonition-check, .admonition-done { border-color: #09ad7a; background: #09ad7110; }
.admonition-success .admonition-title, .admonition-check .admonition-title, .admonition-done .admonition-title { color: #09ad7a; }
/* Question, Help, FAQ */
.admonition-question, .admonition-help, .admonition-faq { border-color: #dba642; background: #dba64210; }
.admonition-question .admonition-title, .admonition-help .admonition-title, .admonition-faq .admonition-title { color: #dba642; }
/* Warning, Attention, Caution */
.admonition-warning, .admonition-attention, .admonition-caution { border-color: #db8942; background: #db894210; }
.admonition-warning .admonition-title, .admonition-attention .admonition-title, .admonition-caution .admonition-title { color: #db8942; }
/* Failure, Fail, Danger, Error, Bug, Missing */
.admonition-failure, .admonition-fail, .admonition-danger, .admonition-error, .admonition-bug, .admonition-missing { border-color: #db4242; background: #db424210; }
.admonition-failure .admonition-title, .admonition-fail .admonition-title, .admonition-danger .admonition-title, .admonition-error .admonition-title, .admonition-bug .admonition-title, .admonition-missing .admonition-title { color: #db4242; }
/* Example */
.admonition-example { border-color: #7a43b5; background: #7a43b510; }
.admonition-example .admonition-title { color: #7a43b5; }
/* Abstract, Summary, TL;DR */
.admonition-abstract, .admonition-summary, .admonition-tldr { border-color: #00b0ff; background: #00b0ff10; }
.admonition-abstract .admonition-title, .admonition-summary .admonition-title, .admonition-tldr .admonition-title { color: #00b0ff; }
/* Quote, Cite */
.admonition-quote, .admonition-cite { border-color: #9e9e9e; background: #9e9e9e10; }
.admonition-quote .admonition-title, .admonition-cite .admonition-title { color: #9e9e9e; }

/* ══════════════ Calendar ══════════════ */
.cal-day {
  background: #fff; min-height: 4.5rem; padding: .25rem;
  cursor: pointer; transition: background .15s; position: relative;
}
.cal-day:hover { background: #f9fafb; }
.cal-day.today { background: #eef2ff; }
.cal-day.other-month { color: #d1d5db; }
.cal-day .day-num { font-size: .75rem; font-weight: 500; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.cal-dot {
  width: 6px; height: 6px; border-radius: 50%;
}

/* ══════════════ Vote Widget ══════════════ */
.vote-widget {
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: 6px;
}
.dl-vote-group {
  display: inline-flex; align-items: center; gap: 2px;
  background: #f3f4f6; border-radius: 6px; padding: 2px 4px;
}
.vote-btn-mini {
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 4px; border: none;
  background: transparent; cursor: pointer; transition: all .15s;
  color: #9ca3af;
}
.vote-btn-mini:hover { background: #f3f4f6; color: #6b7280; }
.vote-btn-mini.active-up { color: #10b981; background: #ecfdf5; }
.vote-btn-mini.active-down { color: #ef4444; background: #fef2f2; }
.vote-score { font-size: 0.75rem; font-weight: 600; min-width: 1.25rem; text-align: center; color: #9ca3af; }
.vote-score.positive { color: #059669; }
.vote-score.negative { color: #dc2626; }

/* Vote pill for list cards */
.vote-pill {
  font-size: 0.65rem; font-weight: 600; padding: 0 5px; border-radius: 9999px;
  background: #f3f4f6; color: #9ca3af; line-height: 1.4;
}
.vote-pill.positive { background: #ecfdf5; color: #059669; }
.vote-pill.negative { background: #fef2f2; color: #dc2626; }

/* ══════════════ Cards ══════════════ */
.card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 1rem; transition: box-shadow .15s;
}
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Collapsible overdue group in deadlines list */
.deadline-overdue-collapsible {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}
.deadline-overdue-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: .65rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: #475569;
}
.deadline-overdue-summary::-webkit-details-marker { display: none; }
.deadline-overdue-title {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}
.deadline-overdue-meta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.deadline-overdue-count {
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
}
.deadline-overdue-chevron {
  transition: transform .15s ease;
}
.deadline-overdue-collapsible[open] .deadline-overdue-chevron {
  transform: rotate(180deg);
}
.deadline-overdue-body {
  border-top: 1px solid #e5e7eb;
  padding: .65rem;
}

/* ══════════════ Badge ══════════════ */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .5rem; border-radius: 999px; font-size: .7rem;
  font-weight: 500; white-space: nowrap;
}

/* ══════════════ Beta ══════════════
   The one mark for a feature still being improved (slides & photos, the ask
   box). It is quiet on purpose — the brand tint, sentence case — and always
   sits in a header or beside a title, never loose among buttons. */
.beta-pill {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: .1rem .45rem; border-radius: 999px;
  background: #eef2ff; color: #4f46e5;
  font-size: .6875rem; font-weight: 600; line-height: 1.25; letter-spacing: .01em;
  white-space: nowrap; vertical-align: middle;
}
.dark .beta-pill { background: var(--d-brand-bg); color: var(--d-brand); }

/* ══════════════ Toast ══════════════ */
.toast {
  padding: .5rem 1rem; border-radius: 8px; color: #fff;
  font-size: .85rem; font-weight: 500;
  animation: toast-in .3s ease, toast-out .3s ease 2.7s forwards;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.toast-success { background: #10b981; }
.toast-error { background: #ef4444; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; } }

/* ══════════════ Modal ══════════════ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 1rem; animation: fade-in .15s ease;
}
.modal-box {
  background: #fff; border-radius: 12px; padding: 1.5rem;
  max-width: 36rem; width: 100%; max-height: 90vh; overflow-y: auto;
  animation: slide-up .2s ease;
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } }

/* ══════════════ Inputs ══════════════ */
.input {
  width: 100%; padding: .5rem .75rem; border: 1px solid #d1d5db;
  border-radius: 8px; font-size: .875rem; background: #fff;
  transition: border-color .15s;
}
.input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
textarea.input { resize: vertical; min-height: 8rem; font-family: 'Cascadia Code','Fira Code',monospace; }
select.input { cursor: pointer; }
/* Touch screens: iOS zooms the page in on any field whose text is under 16px
   and only a pinch brings it back, so fields are 16px there. */
@media (pointer: coarse) {
  .input { font-size: 16px; }
}

.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1rem; border-radius: 8px; font-size: .85rem;
  font-weight: 500; cursor: pointer; border: none;
  transition: all .15s; text-decoration: none;
}
.btn-primary { background: #6366f1; color: #fff; }
.btn-primary:hover { background: #4f46e5; }
.btn-ghost { background: transparent; color: #6b7280; }
.btn-ghost:hover { background: #f3f4f6; }
.btn-danger { background: #fef2f2; color: #ef4444; }
.btn-danger:hover { background: #fee2e2; }
.btn-sm { padding: .35rem .65rem; font-size: .75rem; }
.btn-outline { background: #fff; border: 1px solid #d1d5db; color: #374151; }
.btn-outline:hover { background: #f9fafb; }
.btn-toggle-on { background: transparent; border: 1px solid #6366f1; color: #6366f1; font-weight: 600; }
.btn-toggle-on:hover { background: rgba(99,102,241,.06); }

/* ══════════════ Copy a note (split button + menu, noteExport.js) ══════════════
   "Copy" repeats the last format used; the chevron opens the two formats and,
   for a note with the transcript appended, the transcript switch. The menu
   hangs from the control's right edge, since the control sits at the right of
   the note's meta row. On a phone the vote group beside it leaves too little
   room for that, so there the menu is a bottom sheet, as the events page's
   filters are. */
.note-copy { position: relative; display: inline-flex; align-items: stretch; }
.note-copy .btn { padding-block: .25rem; min-height: 1.75rem; }
.note-copy .btn:disabled { opacity: .5; cursor: not-allowed; }
.note-copy-main { border-radius: 8px 0 0 8px; }
.note-copy-main[aria-busy="true"] { cursor: progress; opacity: .7; }
.note-copy-toggle { border-radius: 0 8px 8px 0; border-left: 0; padding-inline: .4rem; }
.note-copy-state { display: inline-flex; }
.note-copy-state[hidden] { display: none; }
.note-copy-done { color: #059669; }
.note-copy-chevron { opacity: .6; transition: transform .15s ease; }
.note-copy-toggle[aria-expanded="true"] .note-copy-chevron { transform: rotate(180deg); }

.note-copy-menu {
  position: absolute;
  top: calc(100% + .375rem);
  right: 0;
  left: auto;
  z-index: 45;
  width: 19rem;
  max-width: calc(100vw - 2rem);
  padding: .375rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .14), 0 2px 6px rgba(17, 24, 39, .06);
  animation: fade-in .12s ease;
}
.note-copy-backdrop { display: none; }
.note-copy-menu[hidden],
.note-copy-backdrop[hidden] { display: none !important; }
.note-copy-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  width: 100%;
  padding: .5rem .625rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  color: #111827;
  text-align: left;
  cursor: pointer;
}
.note-copy-item:hover,
.note-copy-item:focus-visible { background: #f3f4f6; }
.note-copy-item:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
.note-copy-icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .125rem; color: #6b7280; }
.note-copy-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.note-copy-item-text strong { font-weight: 600; }
.note-copy-item-text small { display: block; margin-top: .125rem; font-size: .7rem; color: #6b7280; }
.note-copy-current { display: inline-flex; flex-shrink: 0; margin-top: .125rem; color: #6366f1; visibility: hidden; }
.note-copy-item.is-current .note-copy-current { visibility: visible; }
.note-copy-divider { height: 1px; margin: .25rem .625rem; background: #e5e7eb; }
.note-copy-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: .125rem;
  border: 2px solid #9ca3af;
  border-radius: 4px;
  color: transparent;
}
.note-copy-check[aria-checked="true"] .note-copy-box { background: #6366f1; border-color: #6366f1; color: #fff; }

/* On the recording page the control sits over the summary, at its right. */
.rec-summary-toolbar { display: flex; justify-content: flex-end; margin-bottom: .5rem; }

@media (max-width: 767px) {
  .note-copy-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(17, 24, 39, .4);
    animation: fade-in .15s ease;
  }
  .note-copy-menu {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    width: auto;
    max-width: none;
    max-height: 85vh;
    overflow-y: auto;
    padding: .5rem .5rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    animation: slide-up .2s ease;
  }
  .note-copy-item { min-height: 3rem; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .note-copy-menu,
  .note-copy-backdrop { animation: none; }
  .note-copy-chevron { transition: none; }
}

.dark .note-copy-done { color: #34d399; }
.dark .note-copy-backdrop { background: rgba(0, 0, 0, .55); }
.dark .note-copy-menu {
  background: var(--d-surface);
  border-color: var(--d-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.dark .note-copy-item { color: var(--d-text); }
.dark .note-copy-item:hover,
.dark .note-copy-item:focus-visible { background: var(--d-surface3); }
.dark .note-copy-item:focus-visible { outline-color: var(--d-brand); }
.dark .note-copy-icon,
.dark .note-copy-item-text small { color: var(--d-text2); }
.dark .note-copy-current { color: var(--d-brand); }
.dark .note-copy-divider { background: var(--d-border); }
.dark .note-copy-box { border-color: #6b7089; }
.dark .note-copy-check[aria-checked="true"] .note-copy-box { background: var(--d-brand); border-color: var(--d-brand); color: var(--d-surface); }

/* ══════════════ Tabs ══════════════ */
.tabs { display: flex; gap: 0; border-bottom: 1px solid #e5e7eb; margin-bottom: 1rem; }
.tab {
  padding: .5rem 1rem; font-size: .85rem; font-weight: 500;
  color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .15s;
}
.tab:hover { color: #374151; }
.tab.active { color: #6366f1; border-bottom-color: #6366f1; }

/* ══════════════ Chip/Tag ══════════════ */
.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .6rem; border-radius: 999px; font-size: .75rem;
  border: 1px solid #e5e7eb; cursor: pointer; transition: all .15s;
}
.chip:hover { background: #f3f4f6; }
.chip.selected { background: #eef2ff; border-color: #6366f1; color: #6366f1; }

/* ══════════════ Skeleton ══════════════ */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ══════════════ AI Loading ══════════════ */
.ai-loading-icon {
  animation: ai-pulse 1.8s ease-in-out infinite;
}
@keyframes ai-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: .7; }
}

/* ── AI Hero button (dashboard) ── */
.ai-hero-btn {
  display: block;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  text-decoration: none;
  color: #92400e;
  transition: box-shadow .15s, border-color .15s;
}
.ai-hero-btn:hover {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251,191,36,.15);
}
.ai-hero-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: .5rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dark .ai-hero-btn {
  background: linear-gradient(135deg, rgba(251,191,36,.1) 0%, rgba(245,158,11,.08) 100%);
  border-color: rgba(251,191,36,.25);
  color: #fbbf24;
}
.dark .ai-hero-btn:hover {
  border-color: rgba(251,191,36,.45);
  box-shadow: 0 0 0 3px rgba(251,191,36,.08);
}

/* ── Dashboard action buttons (top-right) ── */
.dash-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .35rem .65rem;
  border-radius: .625rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-size: .75rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.dash-action-btn span { line-height: 1; }
.dash-action-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}
/* Deadline — rose/red */
.dash-action-btn.dash-action-deadline {
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  border-color: #fecdd3;
  color: #be123c;
}
.dash-action-btn.dash-action-deadline:hover {
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(251,113,133,.15);
}
/* Note — indigo/blue */
.dash-action-btn.dash-action-note {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border-color: #c7d2fe;
  color: #4338ca;
}
.dash-action-btn.dash-action-note:hover {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129,140,248,.15);
}
/* Record — rose */
.dash-action-btn.dash-action-record {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border-color: #fecaca;
  color: #b91c1c;
}
.dash-action-btn.dash-action-record:hover {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248,113,113,.15);
}
/* AI — amber */
.dash-action-btn.dash-action-ai {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: #fde68a;
  color: #b45309;
}
.dash-action-btn.dash-action-ai:hover {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251,191,36,.15);
}
/* ── Dark mode ── */
.dark .dash-action-btn {
  background: #1f2937;
  border-color: #374151;
  color: #9ca3af;
}
.dark .dash-action-btn:hover {
  background: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}
.dark .dash-action-btn.dash-action-deadline {
  background: linear-gradient(135deg, rgba(251,113,133,.1), rgba(244,63,94,.08));
  border-color: rgba(251,113,133,.25);
  color: #fb7185;
}
.dark .dash-action-btn.dash-action-deadline:hover {
  border-color: rgba(251,113,133,.45);
  box-shadow: 0 0 0 3px rgba(251,113,133,.08);
}
.dark .dash-action-btn.dash-action-note {
  background: linear-gradient(135deg, rgba(129,140,248,.1), rgba(99,102,241,.08));
  border-color: rgba(129,140,248,.25);
  color: #818cf8;
}
.dark .dash-action-btn.dash-action-note:hover {
  border-color: rgba(129,140,248,.45);
  box-shadow: 0 0 0 3px rgba(129,140,248,.08);
}
.dark .dash-action-btn.dash-action-record {
  background: linear-gradient(135deg, rgba(248,113,113,.1), rgba(220,38,38,.08));
  border-color: rgba(248,113,113,.25);
  color: #f87171;
}
.dark .dash-action-btn.dash-action-record:hover {
  border-color: rgba(248,113,113,.45);
  box-shadow: 0 0 0 3px rgba(248,113,113,.08);
}
.dark .dash-action-btn.dash-action-ai {
  background: linear-gradient(135deg, rgba(251,191,36,.1), rgba(245,158,11,.08));
  border-color: rgba(251,191,36,.25);
  color: #fbbf24;
}
.dark .dash-action-btn.dash-action-ai:hover {
  border-color: rgba(251,191,36,.45);
  box-shadow: 0 0 0 3px rgba(251,191,36,.08);
}

/* ── AI Extract button (inline) ── */
.ai-extract-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #d97706 !important;
  color: #fff !important;
}
.ai-extract-btn:hover {
  box-shadow: 0 0 0 3px rgba(251,191,36,.25);
}
.dark .ai-extract-btn {
  background: linear-gradient(135deg, #b45309, #92400e) !important;
  border-color: #92400e !important;
}

/* ── AI description block ── */
.ai-desc-block { font-size: .8rem; }
.ai-desc-block .admonition { margin: .5rem 0; }
.ai-desc-collapsed { max-height: 5rem; overflow: hidden; position: relative; }
.ai-desc-collapsed::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1.5rem;
  background: linear-gradient(transparent, var(--card-bg, #fff));
  pointer-events: none;
}
.dark .ai-desc-collapsed::after {
  background: linear-gradient(transparent, var(--card-bg, #1f2937));
}


/* ══════════════ Overlay sidebar on mobile ══════════════ */
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: 35; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.sidebar-overlay.show { opacity: 1; pointer-events: auto; }

/* ══════════════ Onboarding ══════════════ */
.onboard-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 4rem 1rem 2rem;
  background: linear-gradient(135deg, #eef2ff, #fff, #eef2ff);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 768px) {
  .onboard-wrapper .input { font-size: 16px; }
}
.onboarding-card {
  background: #fff; border-radius: 20px; padding: 2rem;
  max-width: 26rem; width: 100%;
  box-shadow: 0 8px 40px rgba(99,102,241,.08), 0 2px 8px rgba(0,0,0,.04);
}

/* Step progress dots */
.onboard-step-dot {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  background: #f3f4f6; color: #9ca3af;
  border: 2px solid #e5e7eb; transition: all .25s ease;
}
.onboard-step-dot.active {
  background: #6366f1; color: #fff; border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99,102,241,.15);
}
.onboard-step-dot.done {
  background: #10b981; color: #fff; border-color: #10b981;
}
.onboard-step-line {
  width: 2.5rem; height: 2px; background: #e5e7eb; border-radius: 1px;
  transition: background .25s;
}
.onboard-step-line.done { background: #10b981; }

/* Icon wraps */
.onboard-icon-wrap {
  width: 3.5rem; height: 3.5rem; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.onboard-icon-wrap.blue { background: #eef2ff; color: #6366f1; }
.onboard-icon-wrap.orange { background: #fff7ed; color: #ea580c; }
.onboard-icon-wrap.purple { background: #f3e8ff; color: #9333ea; }
.onboard-icon-wrap.green { background: #ecfdf5; color: #10b981; }

/* Suggestions list */
.onboard-suggestions {
  max-height: 14rem; overflow-y: auto; border-radius: 8px;
}
.onboard-suggestion-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem; border-radius: 8px;
  cursor: pointer; font-size: 0.85rem; transition: background .1s;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.onboard-suggestion-item:hover { background: #f9fafb; }
.onboard-suggestion-item.create { color: #6366f1; font-weight: 500; }
.onboard-suggestion-item.create:hover { background: #eef2ff; }
.onboard-suggestion-icon {
  width: 1.75rem; height: 1.75rem; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: #f3f4f6; color: #6b7280;
}
.onboard-suggestion-icon.create { background: #eef2ff; color: #6366f1; }

/* Selected confirmation banner */
.onboard-selected-banner {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border-radius: 8px;
  background: #ecfdf5; font-size: 0.85rem; font-weight: 500; color: #065f46;
}

/* Course chips in onboarding */
.onboard-course-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.75rem;
  font-weight: 500; border: 1px solid;
}

/* Vertical course list (onboarding + settings) */
.course-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;
}
.course-list-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  background: #fff; transition: background .1s;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.course-list-item:last-child { border-bottom: none; }
.course-list-item:hover { background: #fafafa; }
.course-list-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.course-list-remove {
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border: none; background: transparent;
  border-radius: 4px; cursor: pointer; color: #d1d5db; transition: all .15s;
}
.course-list-remove:hover { background: #fef2f2; color: #ef4444; }

/* ── Long-press tooltip (mobile) ── */
.longpress-tip {
  position: fixed; z-index: 9999;
  padding: .45rem .75rem; border-radius: 8px;
  background: #1f2937; color: #fff; font-size: .8125rem;
  line-height: 1.4; word-break: break-word;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transform: translateY(calc(-100% - 0.5rem));
  animation: lp-in .15s ease;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
@keyframes lp-in { from { opacity: 0; transform: translateY(calc(-90% - 0.5rem)); } to { opacity: 1; transform: translateY(calc(-100% - 0.5rem)); } }
.dark .longpress-tip { background: #e5e7eb; color: #111827; }

/* ══════════════ Markdown Editor Toolbar ══════════════ */
.editor-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; padding: .35rem;
  background: #f9fafb; border: 1px solid #d1d5db;
  border-bottom: none; border-radius: 8px 8px 0 0;
}
.editor-toolbar button {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: none; background: transparent;
  border-radius: 4px; cursor: pointer; color: #6b7280;
}
.editor-toolbar button:hover { background: #e5e7eb; color: #374151; }
textarea.editor-input {
  border-radius: 0 0 8px 8px !important; border-top: none !important;
}

/* ══════════════ Overdue ══════════════ */
.overdue { color: #ef4444; }
.due-soon { color: #f59e0b; }

/* ══════════════ Transitions ══════════════ */
.fade-in { animation: fade-in .2s ease; }

/* Hide top header on desktop (sidebar already visible) */
@media (min-width: 768px) {
  header { display: none !important; }
  main { padding-top: 3rem !important; }
}

/* ══════════════ Empty States ══════════════ */
.empty-state {
  text-align: center; padding: 3rem 1rem; color: #9ca3af;
}
.empty-state svg { width: 48px; height: 48px; margin: 0 auto .75rem; opacity: .5; }

/* Mobile spacing */
@media (max-width: 767px) {
  .cal-day { min-height: 3rem; }
  .cal-day .day-num { font-size: .65rem; }
}

/* ============== Improved Calendar Month ============== */
/* The month is let out wider than main's max-w-5xl column, centred on it.
   From md up the 16rem sidebar takes the left of the window, so the room is
   what is right of it, less main's own 1.5rem padding a side (which also
   leaves room for a scrollbar, since 100vw counts one). Measured against the
   whole window instead, the grid slid under the sidebar and the page
   scrolled sideways (1120 px of calendar in a 1280 px window). */
.calendar-page {
  width: min(1320px, calc(100vw - .8rem));
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: calc(100dvh - 5.5rem);
}
@media (min-width: 768px) {
  .calendar-page {
    width: min(1120px, calc(100vw - 16rem - 3rem));
  }
}
.calendar-toolbar {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
}
.calendar-toolbar-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.calendar-title {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-view-toggle {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cal-month-wrap {
  background: #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  min-height: calc(100dvh - 11.2rem);
  display: flex;
  flex-direction: column;
}
.cal-header-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: #e5e7eb;
}
.cal-header {
  background: #f9fafb; padding: .3rem .35rem; text-align: center;
  font-size: .7rem; font-weight: 600; color: #6b7280; text-transform: uppercase;
  line-height: 1;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(6rem, 1fr);
  gap: 1px;
  background: #e5e7eb;
  flex: 1;
}
.cal-day {
  min-height: 6rem !important;
  align-items: flex-start !important;
  padding: .25rem .12rem .35rem;
}
.cal-day-events {
  width: 100%;
  margin-top: .1rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: none;
  overflow: visible;
}
.cal-event-pill {
  display: block;
  width: 100%;
  font-size: 0.65rem;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  border-left: none;
  background: #f3f4f6;
  color: #4b5563;
  font-weight: 500;
  text-decoration: none;
}
.cal-event-pill:hover { opacity: .88; }
.cal-event-pill.lecture { background: #eff6ff; color: #1e40af; }
.cal-event-pill-wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}
.cal-month-wrap .cal-day .day-num {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: .08rem;
  line-height: 1;
}
.cal-more {
  font-size: .65rem;
  color: #6b7280;
  font-weight: 600;
  padding: 0 2px;
}

/* ============== Calendar List View ============== */
.cal-list-wrap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.cal-list-day {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.cal-list-today {
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f130;
}
.cal-list-day-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .85rem;
  background: #f9fafb;
  border-bottom: 1px solid #f1f5f9;
  font-size: .78rem;
  font-weight: 700;
  color: #374151;
}
.cal-list-today .cal-list-day-header {
  background: #eef2ff;
  color: #4338ca;
}
.cal-list-today-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6366f1;
  flex-shrink: 0;
}
.cal-list-day-items {
  display: flex;
  flex-direction: column;
}
.cal-list-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid #f5f5f5;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.cal-list-item:last-child { border-bottom: none; }
.cal-list-item:hover { background: #f9fafb; }
a.cal-list-item:hover { background: #f0f4ff; }
.cal-list-icon {
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cal-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cal-list-title {
  font-size: .82rem;
  font-weight: 600;
  color: #1f2937;
}
.cal-list-course {
  font-size: .7rem;
  color: #8b919a;
}
.cal-list-sub {
  font-size: .7rem;
  color: #8b919a;
  display: flex;
  align-items: center;
  gap: 3px;
}
.cal-list-time {
  font-size: .72rem;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}

/* TODO: Timetable / Week View (future implementation)
/* ============== Timetable (Week View) ============== */
/*
.timetable-shell {
  width: 100%;
  height: calc(100dvh - 8rem);
  min-height: 520px;
}
.timetable-scroll {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
.timetable-container {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.timetable-header {
  display: grid;
  grid-template-columns: 2.2rem repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}
.timetable-header-cell {
  padding: .25rem .1rem;
  text-align: center;
  border-left: 1px solid #eef2f7;
  color: #475569;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.timetable-header-cell:first-child { border-left: none; }
.timetable-header-cell.today { background: #eef2ff; color: #4338ca; }
.tt-day { font-size: .66rem; font-weight: 700; line-height: 1.05; }
.tt-date { font-size: .58rem; opacity: .85; line-height: 1.05; margin-top: 1px; }

.timetable-allday-row {
  display: grid;
  grid-template-columns: 2.2rem repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.timetable-allday-label {
  font-size: .54rem;
  color: #94a3b8;
  font-weight: 700;
  padding: .25rem .1rem;
  border-right: 1px solid #eef2f7;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.timetable-allday-cell {
  border-left: 1px solid #f1f5f9;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: .18rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timetable-body {
  display: grid;
  grid-template-columns: 2.2rem repeat(7, minmax(0, 1fr));
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.timetable-time-col {
  border-right: 1px solid #e5e7eb;
  background: #fff;
}
.timetable-time-slot {
  height: 3rem;
  position: relative;
}
.timetable-time-label {
  position: absolute;
  top: -0.5rem;
  right: .25rem;
  font-size: .62rem;
  color: #94a3b8;
  font-weight: 600;
}

.timetable-day-col {
  position: relative;
  border-left: 1px solid #f1f5f9;
  background-image: linear-gradient(#eef2f7 1px, transparent 1px);
  background-size: 100% 3rem;
}
.timetable-day-col.today { background-color: #f5f7ff; }

.timetable-event {
  position: absolute;
  left: 3px;
  right: 3px;
  padding: 3px 5px;
  font-size: .66rem;
  border-radius: 5px;
  z-index: 10;
  border-left-width: 3px;
  border-left-style: solid;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
  display: flex;
  flex-direction: column;
}
.timetable-event strong {
  font-weight: 700;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timetable-event span {
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.timetable-event-deadline {
  background: #ef444415;
  border-left: none;
  text-decoration: none;
  color: inherit;
  height: 1.5rem;
  min-height: 0;
  max-height: 1.5rem;
  left: 1px;
  right: 1px;
  padding: 1px 4px;
  align-items: center;
}
.timetable-event-deadline strong {
  color: #ef4444;
  font-size: .6rem;
  flex: 1;
  min-width: 0;
}
*/

@media (max-width: 767px) {
  .calendar-page { width: calc(100vw - .7rem); }
  .calendar-toolbar { gap: .35rem; }
  .calendar-toolbar-left {
    justify-content: space-between;
  }
  .calendar-title {
    font-size: .8rem;
    flex: 1;
  }
  .calendar-view-toggle { justify-self: end; }
  .calendar-view-toggle button {
    padding: .2rem .55rem;
    font-size: .7rem;
  }
  .cal-month-wrap { min-height: calc(100dvh - 10.5rem); }
  .cal-grid { grid-auto-rows: minmax(5.2rem, 1fr); }
  .cal-day { min-height: 5.2rem !important; }
  .cal-day-events { max-height: 3.8rem; }
  /* TODO: Week view responsive (future implementation)
  .timetable-shell { height: calc(100dvh - 7.9rem); min-height: 420px; }
  .tt-day { font-size: .6rem; }
  .tt-date { font-size: .54rem; }
  */
}

/* ══════════════════════════════════════════════════════
   DARK  MODE
   ══════════════════════════════════════════════════════ */

/* ── Palette tokens ── */
.dark {
  --d-bg:       #0d1018;
  --d-surface:  #1a1e29;
  --d-surface2: #242938;
  --d-surface3: #2f3548;
  --d-border:   #3a4259;
  --d-border-l: #343c53;
  --d-text:     #f0f1f7;
  --d-text2:    #c8cad8;
  --d-text3:    #9a9db3;
  --d-brand:    #818cf8;
  --d-brand-bg: #1e1b4b;
}

/* ── Body / root overrides ── */
.dark body,
html.dark body { background-color: var(--d-bg) !important; color: var(--d-text) !important; }

/* ── Tailwind utility overrides ── */
.dark .bg-white,
.dark .bg-gray-50,
.dark .bg-gray-100,
.dark .bg-gray-200        { background-color: var(--d-bg) !important; }
.dark .border-gray-100,
.dark .border-gray-200    { border-color: var(--d-border) !important; }
.dark .border-gray-300    { border-color: var(--d-border) !important; }
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--d-border) !important; }
.dark .text-gray-800,
.dark .text-gray-900      { color: var(--d-text) !important; }
.dark .text-gray-700      { color: #dcdee8 !important; }
.dark .text-gray-600      { color: #c8cad8 !important; }
.dark .text-gray-500      { color: #bfc2d0 !important; }
.dark .text-gray-400      { color: #b0b3c3 !important; }
.dark .text-brand-600     { color: var(--d-brand) !important; }
.dark .bg-brand-50        { background-color: var(--d-brand-bg) !important; }
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover { background-color: var(--d-surface3) !important; }
.dark .bg-brand-600       { background-color: #6366f1 !important; }
.dark .ring-brand-100     { --tw-ring-color: rgba(99,102,241,.15) !important; }
.dark .bg-green-50        { background-color: #052e16 !important; }
.dark .bg-red-50          { background-color: #2c0b0b !important; }

/* ── Scrollbar ── */
.dark ::-webkit-scrollbar-thumb { background: #3a3d50; }

/* ── Sidebar ── */
.dark .sidebar { background: var(--d-surface); border-right-color: var(--d-border); }
.dark .sidebar .border-gray-100 { border-color: var(--d-border) !important; }
.dark .sidebar a.text-gray-600 { color: var(--d-text2) !important; }
.dark .sidebar a:hover { background-color: var(--d-surface3) !important; }

/* ── Bottom Nav ── */
.dark .bottom-nav { background: var(--d-surface); border-top-color: var(--d-border); }
.dark .bottom-nav a { color: #9a9db3; }
.dark .bottom-nav a.active,
.dark .bottom-nav a:hover { color: var(--d-brand); }

/* ── Header ── */
.dark header { background: rgba(26,30,41,.82) !important; border-bottom-color: var(--d-border) !important; }
.dark header .text-gray-500 { color: var(--d-text2) !important; }
.dark header h1 { color: var(--d-text) !important; }

/* ── Markdown Content ── */
.dark .md-content { color: #d8dae5; }
.dark .md-content h1 { color: #f0f0f5; }
.dark .md-content h2, .dark .md-content h3 { color: #e0e1e8; }
.dark .md-content h4 { color: #d0d1da; }
.dark .md-content code { background: var(--d-surface3); color: #d4d6e0; }
.dark .md-content pre { background: #0d0d14; color: #d4d6e0; }
.dark .md-content pre code { background: none; color: inherit; }
.dark .md-content blockquote { border-left-color: var(--d-brand); background: var(--d-brand-bg); color: #b8bbd0; }
.dark .md-content a { color: var(--d-brand); }
.dark .md-content th { background: var(--d-surface3); }
.dark .md-content th, .dark .md-content td { border-color: var(--d-border); }
.dark .md-content hr { border-top-color: var(--d-border); }

/* ── Admonitions ── */
.dark .admonition { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.dark .admonition:hover { box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.dark .admonition-note { background: #448aff10; }
.dark .admonition-info, .dark .admonition-todo { background: #00b8d410; }
.dark .admonition-tip, .dark .admonition-hint { background: #00bfa510; }
.dark .admonition-important { background: #a855f710; }
.dark .admonition-success, .dark .admonition-check, .dark .admonition-done { background: #09ad7110; }
.dark .admonition-question, .dark .admonition-help, .dark .admonition-faq { background: #dba64210; }
.dark .admonition-warning, .dark .admonition-attention, .dark .admonition-caution { background: #db894210; }
.dark .admonition-failure, .dark .admonition-fail, .dark .admonition-danger, .dark .admonition-error, .dark .admonition-bug, .dark .admonition-missing { background: #db424210; }
.dark .admonition-example { background: #7a43b510; }
.dark .admonition-abstract, .dark .admonition-summary, .dark .admonition-tldr { background: #00b0ff10; }
.dark .admonition-quote, .dark .admonition-cite { background: #9e9e9e10; }

/* ── Calendar ── */
.dark .cal-day { background: var(--d-surface); }
.dark .cal-day:hover { background: var(--d-surface2); }
.dark .cal-day.today { background: var(--d-brand-bg); }
.dark .cal-day.other-month { color: var(--d-text3); }
.dark .cal-month-wrap { background: var(--d-border); }
.dark .cal-header-row { background: var(--d-border); }
.dark .cal-header { background: var(--d-surface2); color: #ffffff; }
.dark .cal-grid { background: var(--d-border); }
.dark .cal-event-pill { background: var(--d-surface3); color: #d0d2de; }
.dark .cal-event-pill.lecture { background: #0c1a38; color: #60a5fa; }
.dark .cal-more { color: var(--d-text2); }

/* Calendar list view */
.dark .cal-list-day { background: var(--d-surface); border-color: var(--d-border); }
.dark .cal-list-today { border-color: #6366f1; box-shadow: 0 0 0 1px rgba(99,102,241,.2); }
.dark .cal-list-day-header { background: var(--d-surface2); border-bottom-color: var(--d-border); color: var(--d-text); }
.dark .cal-list-today .cal-list-day-header { background: var(--d-brand-bg); color: var(--d-brand); }
.dark .cal-list-item { border-bottom-color: var(--d-border); }
.dark .cal-list-item:hover { background: var(--d-surface2); }
.dark a.cal-list-item:hover { background: var(--d-brand-bg); }
.dark .cal-list-title { color: var(--d-text); }
.dark .cal-list-course { color: #d8dae4; }
.dark .cal-list-sub { color: #c8cad8; }
.dark .cal-list-time { color: #d0d2de; }

/* ── Vote Widget ── */
.dark .dl-vote-group { background: var(--d-surface3); }
.dark .vote-btn-mini { color: #9a9db3; }
.dark .vote-btn-mini:hover { background: var(--d-surface3); color: #d0d2de; }
.dark .vote-btn-mini.active-up { color: #34d399; background: #052e1680; }
.dark .vote-btn-mini.active-down { color: #f87171; background: #2c0b0b80; }
.dark .vote-score { color: #b0b3c3; }
.dark .vote-pill { background: var(--d-surface3); color: #b0b3c3; }
.dark .vote-pill.positive { background: #052e1680; color: #34d399; }
.dark .vote-pill.negative { background: #2c0b0b80; color: #f87171; }

/* ── Cards ── */
.dark .card { background: var(--d-surface); border-color: var(--d-border); }
.dark .card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.dark .deadline-overdue-collapsible {
  border-color: var(--d-border);
  background: var(--d-surface2);
}
.dark .deadline-overdue-summary {
  color: #b8bfd1;
}
.dark .deadline-overdue-count {
  background: var(--d-surface3);
  color: #c8cad8;
}
.dark .deadline-overdue-body {
  border-top-color: var(--d-border);
}

/* ── Toast ── */
.dark .toast { box-shadow: 0 4px 12px rgba(0,0,0,.35); }

/* ── Modal ── */
.dark .modal-backdrop { background: rgba(0,0,0,.6); }
.dark .modal-box { background: var(--d-surface); }

/* ── Inputs & Buttons ── */
.dark .input { background: var(--d-surface2); border-color: var(--d-border); color: var(--d-text); }
.dark .input:focus { border-color: var(--d-brand); box-shadow: 0 0 0 3px rgba(129,140,248,.15); }
.dark .input::placeholder { color: #8a8da2; }

/* Ensure native date/time picker icons render light in dark mode */
html.dark input[type="date"],
html.dark input[type="time"],
body.dark input[type="date"],
body.dark input[type="time"],
.dark input[type="date"],
.dark input[type="time"] {
  color-scheme: dark !important;
}

html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
body.dark input[type="date"]::-webkit-calendar-picker-indicator,
body.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark #lec-edit-date::-webkit-calendar-picker-indicator,
html.dark #lec-edit-end::-webkit-calendar-picker-indicator,
html.dark #lec-edit-start::-webkit-calendar-picker-indicator,
html.dark #note-lecture-date::-webkit-calendar-picker-indicator,
html.dark #dl-date::-webkit-calendar-picker-indicator {
  -webkit-filter: invert(1) brightness(1.15) !important;
  filter: invert(1) brightness(1.15) !important;
  opacity: 1 !important;
}

/* Fallback: explicit white icons for affected inputs when browsers ignore indicator filters */
html.dark #lec-edit-date,
html.dark #note-lecture-date,
html.dark #dl-date,
.dark #lec-edit-date,
.dark #note-lecture-date,
.dark #dl-date {
  padding-right: 2rem;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 1rem 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

html.dark #lec-edit-start,
html.dark #lec-edit-end,
html.dark #dl-time,
.dark #lec-edit-start,
.dark #lec-edit-end,
.dark #dl-time {
  padding-right: 2rem;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 1rem 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12,7 12,12 15,14'/%3E%3C/svg%3E");
}

html.dark #lec-edit-date::-webkit-calendar-picker-indicator,
html.dark #note-lecture-date::-webkit-calendar-picker-indicator,
html.dark #dl-date::-webkit-calendar-picker-indicator,
html.dark #lec-edit-start::-webkit-calendar-picker-indicator,
html.dark #lec-edit-end::-webkit-calendar-picker-indicator,
html.dark #dl-time::-webkit-calendar-picker-indicator,
.dark #lec-edit-date::-webkit-calendar-picker-indicator,
.dark #note-lecture-date::-webkit-calendar-picker-indicator,
.dark #dl-date::-webkit-calendar-picker-indicator,
.dark #lec-edit-start::-webkit-calendar-picker-indicator,
.dark #lec-edit-end::-webkit-calendar-picker-indicator,
.dark #dl-time::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
}
.dark .btn-ghost { color: var(--d-text2); }
.dark .btn-ghost:hover { background: var(--d-surface3); }
.dark .btn-danger { background: #2c0b0b; color: #f87171; }
.dark .btn-danger:hover { background: #3b1111; }
.dark .btn-outline { background: var(--d-surface); border-color: var(--d-border); color: var(--d-text); }
.dark .btn-outline:hover { background: var(--d-surface2); }
.dark .btn-toggle-on { background: transparent; border: 1px solid #6366f1; color: #818cf8; }
.dark .btn-toggle-on:hover { background: rgba(99,102,241,.1); }

/* ── Tabs ── */
.dark .tabs { border-bottom-color: var(--d-border); }
.dark .tab { color: #9a9db3; }
.dark .tab:hover { color: #d0d2de; }
.dark .tab.active { color: var(--d-brand); border-bottom-color: var(--d-brand); }

/* ── Chips ── */
.dark .chip { border-color: var(--d-border); color: #c8cad8; }
.dark .chip:hover { background: var(--d-surface3); }
.dark .chip.selected { background: var(--d-brand-bg); border-color: #6366f1; color: var(--d-brand); }

/* ── Skeleton ── */
.dark .skeleton { background: linear-gradient(90deg, var(--d-surface2) 25%, var(--d-surface3) 50%, var(--d-surface2) 75%); background-size: 200% 100%; }

/* ── Sidebar overlay ── */
.dark .sidebar-overlay { background: rgba(0,0,0,.55); }

/* ── Onboarding ── */
.dark .onboard-wrapper { background: linear-gradient(135deg, #0d0e18, #121320, #0d0e18); }
.dark .onboarding-card { background: var(--d-surface); box-shadow: 0 8px 40px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15); }
.dark .onboard-step-dot { background: var(--d-surface3); color: #9a9db3; border-color: var(--d-border); }
.dark .onboard-step-dot.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.dark .onboard-step-dot.done { background: #10b981; color: #fff; border-color: #10b981; }
.dark .onboard-step-line { background: var(--d-border); }
.dark .onboard-step-line.done { background: #10b981; }
.dark .onboard-icon-wrap.blue { background: var(--d-brand-bg); color: var(--d-brand); }
.dark .onboard-icon-wrap.orange { background: #2a1508; color: #fb923c; }
.dark .onboard-icon-wrap.purple { background: #1a0f2e; color: #c084fc; }
.dark .onboard-icon-wrap.green { background: #052e16; color: #34d399; }
.dark .onboard-suggestion-item:hover { background: var(--d-surface3); }
.dark .onboard-suggestion-item.create:hover { background: var(--d-brand-bg); }
.dark .onboard-suggestion-icon { background: var(--d-surface3); color: #9a9db3; }
.dark .onboard-suggestion-icon.create { background: var(--d-brand-bg); color: var(--d-brand); }
.dark .onboard-selected-banner { background: #052e16; color: #34d399; }

/* Course list items */
.dark .course-list { border-color: var(--d-border); }
.dark .course-list-item { background: var(--d-surface); border-bottom-color: var(--d-border); }
.dark .course-list-item:hover { background: var(--d-surface2); }
.dark .course-list-remove { color: #9a9db3; }
.dark .course-list-remove:hover { background: #2c0b0b; color: #f87171; }

/* ── Editor toolbar ── */
.dark .editor-toolbar { background: var(--d-surface2); border-color: var(--d-border); }
.dark .editor-toolbar button { color: #9a9db3; }
.dark .editor-toolbar button:hover { background: var(--d-surface3); color: var(--d-text); }

/* ── Empty states ── */
.dark .empty-state { color: #9a9db3; }

/* ── Badge ── */
.dark .badge { opacity: 1; filter: brightness(1.2); }

/* ── Dark mode toggle ── */
.dark-toggle {
  position: relative; width: 2.75rem; height: 1.5rem;
  background: #d1d5db; border-radius: 999px; cursor: pointer;
  transition: background .2s; border: none; padding: 0;
  flex-shrink: 0;
}
.dark-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #fff; transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.dark-toggle.active { background: #6366f1; }
.dark-toggle.active::after { transform: translateX(1.25rem); }
.dark .dark-toggle { background: var(--d-surface3); }
.dark .dark-toggle.active { background: #6366f1; }
.dark .dark-toggle::after { background: #e4e4ed; }

/* ── Faculty View (amber / orange accent) ── */
.faculty-icon-accent {
  background: #fff7ed; color: #ea580c;
}
.faculty-tabs .tab.active {
  color: #ea580c; border-bottom-color: #ea580c;
}
.faculty-btn {
  background: #ea580c; color: #fff; border-color: #ea580c;
}
.faculty-btn:hover { background: #c2410c; border-color: #c2410c; }
.faculty-accent-text { color: #ea580c; }
.faculty-select:focus { border-color: #ea580c; box-shadow: 0 0 0 2px rgba(234,88,12,.15); }
.faculty-event-icon { background: #fff7ed; color: #ea580c; }
.faculty-event-card { border-left: 3px solid #fb923c; }
.faculty-section-card {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.75rem; padding: 1rem;
}
.faculty-editor-card {
  border-left: 3px solid #ea580c;
}
.faculty-btn-outline {
  background: transparent; color: #ea580c; border: 1px solid #ea580c;
}
.faculty-btn-outline:hover { background: #fff7ed; }
.faculty-programme-badge {
  display: inline-block; margin-top: 0.25rem;
  font-size: .7rem; font-weight: 600; padding: 0.125rem 0.5rem;
  background: #fff7ed; color: #ea580c; border-radius: 999px;
}
/* dark overrides */
.dark .faculty-icon-accent { background: #2a1508; color: #fb923c; }
.dark .faculty-tabs .tab.active { color: #fb923c; border-bottom-color: #fb923c; }
.dark .faculty-btn { background: #c2410c; border-color: #c2410c; }
.dark .faculty-btn:hover { background: #9a3412; border-color: #9a3412; }
.dark .faculty-accent-text { color: #fb923c; }
.dark .faculty-select:focus { border-color: #fb923c; box-shadow: 0 0 0 2px rgba(251,146,60,.15); }
.dark .faculty-event-icon { background: #2a1508; color: #fb923c; }
.dark .faculty-event-card { border-left-color: #c2410c; }
.dark .faculty-section-card { background: #1a1208; border-color: #92400e; }
.dark .faculty-editor-card { border-left-color: #c2410c; }
.dark .faculty-btn-outline { color: #fb923c; border-color: #fb923c; }
.dark .faculty-btn-outline:hover { background: #2a1508; }
.dark .faculty-programme-badge { background: #2a1508; color: #fb923c; }

/* ═══════════ Dark Mode Toggle Button ═══════════ */
.dark-mode-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: transparent; border: none; cursor: pointer;
  color: #6b7280; transition: color .15s, background .15s;
}
.dark-mode-btn:hover { background: #f3f4f6; color: #4f46e5; }
.dark .dark-mode-btn { color: #9ca3af; }
.dark .dark-mode-btn:hover { background: var(--d-surface3); color: #a5b4fc; }

/* ═══════════ Feedback Modal ═══════════ */
.feedback-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.feedback-overlay.hidden { display: none; }
.feedback-dialog {
  background: #fff; border-radius: 1.25rem; padding: 1.5rem;
  width: 100%; max-width: 26rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  animation: feedbackSlideUp .25s ease;
}
@keyframes feedbackSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Star rating */
.star-rating {
  display: flex; gap: 0.25rem; justify-content: center;
}
.star-btn {
  background: none; border: none; cursor: pointer; padding: 0.25rem;
  color: #d1d5db; transition: color .15s, transform .15s;
}
.star-btn:hover { transform: scale(1.15); }
.star-btn.hover { color: #fbbf24; }
.star-btn.active { color: #f59e0b; }
.star-btn.active i, .star-btn.hover i { fill: currentColor; }

/* Dark mode */
.dark .feedback-dialog { background: #1f2937; }
.dark .feedback-dialog h3 { color: #f3f4f6; }
.dark .feedback-dialog textarea { background: #111827; border-color: #374151; color: #f3f4f6; }
.dark .star-btn { color: #4b5563; }
.dark .star-btn.hover { color: #fbbf24; }
.dark .star-btn.active { color: #f59e0b; }

/* ══════════════ Course info tab ══════════════ */
.course-info-semester {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .875rem;
  margin-bottom: .875rem;
  border: 1px solid #e0e7ff;
  border-radius: .875rem;
  background: #eef2ff;
  color: #3730a3;
}

.course-info-semester.archived {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.course-info-semester-name { font-size: .8125rem; font-weight: 600; }
.course-info-semester-range { font-size: .75rem; opacity: .8; }

.course-info-source {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: .875rem;
  font-size: .75rem;
  font-weight: 600;
  color: #4f46e5;
}

.course-info-source:hover { text-decoration: underline; }

.course-info-grid {
  display: flex;
  flex-direction: column;
  gap: .125rem;
}

.course-info-row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 1rem;
  padding: .625rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.course-info-row:last-child { border-bottom: 0; }

.course-info-row dt {
  font-size: .75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.course-info-row dd {
  font-size: .875rem;
  color: #1f2937;
  min-width: 0;
}

.course-info-text { white-space: pre-wrap; word-break: break-word; }

.course-info-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  list-style: disc;
  padding-left: 1.1rem;
}

.course-info-link { color: #4f46e5; word-break: break-all; }
.course-info-link:hover { text-decoration: underline; }

.dark .course-info-semester {
  border-color: #3730a3;
  background: rgba(67, 56, 202, .18);
  color: #c7d2fe;
}

.dark .course-info-semester.archived {
  border-color: #9a3412;
  background: rgba(154, 52, 18, .18);
  color: #fed7aa;
}

.dark .course-info-row { border-bottom-color: #1f2937; }
.dark .course-info-row dt { color: #9ca3af; }
.dark .course-info-row dd { color: #e5e7eb; }
.dark .course-info-link,
.dark .course-info-source { color: #a5b4fc; }

@media (max-width: 640px) {
  .course-info-row {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
}

/* ══════════════ Lecture recorder ══════════════ */
.rec-page { display: flex; flex-direction: column; gap: 1rem; }
/* A saved recording (.rec-detail) shares the live recorder's 1rem rhythm. Its
   tabs and their pane are one child of the stack, so the gap never stacks on
   the tabs' own margin. The Summary tab inside it is a .reading-column with
   .md-content in it — the same 70ch column and typography as the published
   lecture note — so the two read alike. */
.rec-detail-tabs { min-width: 0; }
.rec-summary-doc { padding-bottom: .5rem; }

.rec-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.rec-hint { font-size: .75rem; color: #9ca3af; }
.rec-hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #f3f4f6;
  font-size: .7rem;
}

.rec-alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid #fed7aa;
  border-radius: .875rem;
  background: #fff7ed;
  color: #9a3412;
  font-size: .8125rem;
}
.rec-alert p { font-size: .75rem; opacity: .85; margin-top: .125rem; }
.rec-alert-info {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  align-items: center;
}

/* ── the stage: one button, nothing else ── */
.rec-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 3rem 1rem 2.5rem;
}

.rec-button {
  width: 108px;
  height: 108px;
  border-radius: 999px;
  border: 2px solid #e5e7eb;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.rec-button:hover:not(:disabled) {
  border-color: #fca5a5;
  box-shadow: 0 10px 30px -12px rgba(220, 38, 38, .5);
  transform: translateY(-1px);
}
.rec-button:active:not(:disabled) { transform: scale(.97); }
.rec-button:disabled { opacity: .45; cursor: not-allowed; }

.rec-button-dot {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #dc2626;
}

.rec-stage-label { font-size: .875rem; font-weight: 600; color: #374151; }
.rec-stage-hint {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: #4f46e5;
}

.rec-settings { display: flex; flex-direction: column; gap: .75rem; }

.rec-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.rec-field > span {
  font-size: .75rem;
  font-weight: 600;
  color: #6b7280;
}

.rec-toggle-group {
  display: flex;
  gap: .375rem;
  flex-wrap: wrap;
}
.rec-toggle-group button {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .75rem;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  background: #fff;
  font-size: .8125rem;
  color: #4b5563;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.rec-toggle-group button.active {
  border-color: #4f46e5;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600;
}

/* ── live bar ── */
.rec-live-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .875rem;
  border: 1px solid #e5e7eb;
  border-radius: .875rem;
  background: #fff;
  position: sticky;
  top: 3rem;
  z-index: 20;
}
/* From 768px up the app header is hidden, so the bar sticks to the top of the
   window itself; 3rem would leave a see-through strip above it. */
@media (min-width: 768px) {
  .rec-live-bar { top: 0; }
}

.rec-live-state {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #6b7280;
}
.rec-live-state.is-live { color: #dc2626; }

.rec-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}
.rec-live-state.is-live .rec-live-dot { animation: rec-pulse 1.4s ease-in-out infinite; }

@keyframes rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8); }
}

.rec-live-clock {
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

.rec-live-actions { margin-left: auto; display: flex; gap: .5rem; }

/* ── speakers ── */
.rec-speakers { display: flex; flex-wrap: wrap; gap: .375rem; }

.rec-speaker-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3rem .625rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: .75rem;
  color: #374151;
  cursor: pointer;
  transition: border-color .15s ease;
}
.rec-speaker-chip:hover:not(:disabled) { border-color: #a5b4fc; }
.rec-speaker-chip:disabled { cursor: default; }

.rec-speaker-dot { width: 8px; height: 8px; border-radius: 999px; }

/* ── live page regions ──
   The recorder page is one vertical stack. The live head (bar, keep-alive
   tip, transcript status) is re-rendered as a unit, but its wrapper takes no
   box of its own: the live bar stays sticky across the whole page instead of
   only inside the wrapper, and its parts share the stack's spacing. Hosts
   that hold nothing take no gap. */
#rec-body { display: flex; flex-direction: column; gap: 1rem; }
#rec-live-head { display: contents; }
#rec-media-host:empty { display: none; }
/* Scrolled or focused into view, the panel and a transcript image stop below
   the sticky live bar rather than under it. */
#rec-media-host,
.rec-media { scroll-margin-top: 10rem; }
@media (min-width: 768px) {
  #rec-media-host,
  .rec-media { scroll-margin-top: 4.5rem; }
}
#rec-speakers-host:not(:has(> :not([hidden]))) { display: none; }
/* The finish screen redraws its controls as a unit; they still share the stack's gap. */
#rec-review-controls { display: contents; }

/* ── transcript ──
   One block per paragraph, text or media, on a 30px + text grid so a
   speaker's later paragraphs line up under the name. Blocks off screen skip
   layout and paint — a two-hour lecture is thousands of them — and the
   browser's scroll anchoring is off because the recorder pins the newest
   line itself. */
.rec-transcript {
  max-height: 55vh;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: .875rem;
  background: #fff;
}
.rec-transcript-review { max-height: none; }

/* ── Ask the transcript ──
   An assistant bar above the transcript, the width of it: one rounded field
   with the sparkles inside and a round send button, the Beta mark beside it,
   and a line under it saying how far back it reads. It stays one line high
   until there is an answer: it is read mid-lecture, so it must never push the
   words being transcribed off the screen. */
.rec-askbox { margin: 0 0 .6rem; }
.rec-askbox-row { display: flex; gap: .5rem; align-items: center; }
.rec-askbox-field {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: .375rem;
  padding: .25rem .25rem .25rem .75rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rec-askbox-field:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.rec-askbox-icon { width: 16px; height: 16px; flex-shrink: 0; color: #6366f1; }
.rec-askbox-input {
  flex: 1;
  min-width: 0;
  padding: .3rem 0;
  border: 0;
  background: transparent;
  font-size: .875rem;
  color: #111827;
}
.rec-askbox-input:focus { outline: none; }
.rec-askbox-input::placeholder { color: #9ca3af; }
.rec-askbox-input:disabled { color: #9ca3af; }
/* Like .input: iOS zooms in on any field under 16px. */
@media (pointer: coarse) {
  .rec-askbox-input { font-size: 16px; }
}
.rec-askbox-send {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #6366f1;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.rec-askbox-send:hover:not(:disabled) { background: #4f46e5; }
.rec-askbox-send:disabled { opacity: .55; cursor: default; }
.rec-askbox-send:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.rec-askbox-caption { margin: .375rem 0 0 .875rem; font-size: .6875rem; color: #9ca3af; }

/* The answer is a soft card: a small label row — "Answer" and the question it
   answers, cut short — then the body. While the tail is being read the body
   pulses; an error keeps the red accent. */
.rec-askbox-card {
  margin: .625rem 0 0;
  padding: .625rem .875rem;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  background: #f9fafb;
}
.rec-askbox-card[hidden] { display: none; }
.rec-askbox-card:has(.rec-askbox-error) { border-color: #fecaca; background: #fef2f2; }
.rec-askbox-label {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
  margin-bottom: .25rem;
  font-size: .6875rem;
}
.rec-askbox-label-text {
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4f46e5;
}
.rec-askbox-card:has(.rec-askbox-error) .rec-askbox-label-text { color: #b91c1c; }
.rec-askbox-q {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9ca3af;
}
.rec-askbox-answer {
  font-size: .875rem;
  line-height: 1.55;
  color: #374151;
  white-space: pre-wrap;
}
.rec-askbox-answer.rec-askbox-note { color: #6b7280; }
/* Only a question in flight pulses; "Nothing has been transcribed yet" is a
   plain note and would otherwise blink as if something were happening. */
.rec-askbox.is-busy .rec-askbox-answer.rec-askbox-note { animation: rec-ask-pulse 1.4s ease-in-out infinite; }
.rec-askbox-answer.rec-askbox-error { color: #b91c1c; }
@keyframes rec-ask-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-askbox.is-busy .rec-askbox-answer.rec-askbox-note { animation: none; }
}
/* An answer is rendered Markdown (bold, a few bullets). pre-wrap stays for the
   plain status lines only — on rendered HTML it would turn the newlines marked
   leaves between blocks into blank lines. Kept compact: it is read on a phone
   in the middle of a lecture. */
.rec-askbox-answer.md-content { white-space: normal; font-size: .875rem; line-height: 1.55; color: #374151; }
.rec-askbox-answer.md-content > :first-child { margin-top: 0; }
.rec-askbox-answer.md-content > :last-child { margin-bottom: 0; }
.rec-askbox-answer.md-content p { margin: .4em 0; }
.rec-askbox-answer.md-content ul,
.rec-askbox-answer.md-content ol { margin: .3em 0 .3em 1.2rem; }
.rec-askbox-answer.md-content li { margin: .1em 0; }
.rec-askbox-answer.md-content strong { color: #111827; font-weight: 600; }

.rec-waiting {
  text-align: center;
  padding: 2rem 1rem;
  font-size: .8125rem;
  color: #9ca3af;
}

.rec-seg {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: .75rem;
  margin: .65rem 0 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 3.5rem;
}
.rec-turn-start { margin-top: 1rem; }
.rec-seg:first-child { margin-top: 0; }

.rec-seg-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
}

.rec-seg-head {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
  margin-bottom: .125rem;
}
.rec-turn-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 600;
  color: #374151;
}
.rec-turn-time { flex-shrink: 0; font-size: .6875rem; color: #9ca3af; font-variant-numeric: tabular-nums; }

.rec-seg-text {
  grid-column: 2;
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: #1f2937;
  overflow-wrap: anywhere;
}
.rec-turn-start .rec-seg-text { grid-row: 2; }

/* The words still being decided on read as the next paragraph, greyed. */
#rec-live {
  margin-top: .65rem;
  font-size: .875rem;
  line-height: 1.6;
  font-style: italic;
  color: #9ca3af;
  overflow-wrap: anywhere;
}
#rec-live .rec-seg-text { color: inherit; }
#rec-segs:empty { display: none; }
#rec-segs:empty + #rec-live { margin-top: 0; }

/* A slide or photo. The button is sized from the image's shape (--ar, set
   inline) so the block is final before the image loads. */
.rec-media {
  margin: 1rem 0 0;
  contain-intrinsic-size: auto 18rem;
}
.rec-media:first-child { margin-top: 0; }

.rec-media-open,
.rec-media-caption { grid-column: 2; min-width: 0; }

.rec-media-open {
  justify-self: start;
  display: block;
  width: min(100%, calc(var(--ar, 1.7778) * 60vh));
  padding: 0;
  border: 0;
  border-radius: .625rem;
  background: none;
  cursor: zoom-in;
}
.rec-media-open:disabled { cursor: default; }
.rec-media-open:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }

/* A slide or photo is a picture among the words, not a page of its own. The
   live transcript is a 55vh window, and a block taller than a good part of it
   scrolls away the words spoken before it; the lightbox shows it full size.
   The finish screen and the saved page have more room. The placeholder takes
   the same width and --ar, so the space reserved stays the space used. */
.rec-transcript:not(.rec-transcript-review) .rec-media-open {
  width: min(100%, 36rem, calc(var(--ar, 1.7778) * min(25vh, 16rem)));
}
.rec-transcript-review .rec-media-open {
  width: min(100%, 48rem, calc(var(--ar, 1.7778) * 45vh));
}

.rec-media-open img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: .625rem;
  background: #f3f4f6;
}

.rec-media-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  max-height: 60vh;
  padding: .5rem;
  border: 1px dashed #d1d5db;
  border-radius: .625rem;
  background: #f9fafb;
  font-size: .75rem;
  color: #9ca3af;
  text-align: center;
}

.rec-media-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin-top: .375rem;
  font-size: .75rem;
  color: #6b7280;
}
.rec-media-label { min-width: 0; font-weight: 600; color: #374151; overflow-wrap: anywhere; }
.rec-media-note { flex-basis: 100%; color: #4b5563; overflow-wrap: anywhere; }

.rec-media-state {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: .6875rem;
  font-weight: 600;
  color: #6b7280;
}
.rec-media-state[data-state="uploading"]::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  animation: rec-pulse 1.4s ease-in-out infinite;
}
.rec-media-state[data-state="failed"] { background: #fef2f2; color: #b91c1c; }

.rec-media-retry {
  padding: .125rem .25rem;
  border: 0;
  background: none;
  font-size: .75rem;
  font-weight: 600;
  color: #4f46e5;
  cursor: pointer;
}
.rec-media-retry:hover { text-decoration: underline; }

.rec-media-remove {
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: .8125rem;
  color: #9ca3af;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.rec-media-remove:hover { background: #fef2f2; color: #dc2626; }
.rec-media-remove:focus-visible,
.rec-media-retry:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }

/* ── image lightbox ── */
.rec-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(17, 24, 39, .92);
  color: #f9fafb;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
}
.rec-lightbox[open] { display: flex; flex-direction: column; }
.rec-lightbox::backdrop { background: rgba(17, 24, 39, .5); }

.rec-lightbox-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem .5rem;
  user-select: none;
  -webkit-user-select: none;
}
.rec-lightbox-img {
  display: block;
  max-width: min(1600px, 100%);
  max-height: 100%;
  object-fit: contain;
  border-radius: .5rem;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
  -webkit-user-drag: none;
}

.rec-lightbox-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .5rem 1rem calc(.875rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.rec-lightbox-caption { max-width: 48rem; font-size: .8125rem; color: #e5e7eb; overflow-wrap: anywhere; }
.rec-lightbox-count { font-size: .75rem; color: #9ca3af; font-variant-numeric: tabular-nums; }

.rec-lightbox-close,
.rec-lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  cursor: pointer;
}
.rec-lightbox-close {
  top: .75rem;
  right: .75rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
}
/* With several images the stage keeps clear of the side buttons, which would
   otherwise sit on a wide slide's edges — where its text often is. */
.rec-lightbox-multi .rec-lightbox-stage { padding-inline: 4rem; }
.rec-lightbox-nav {
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  transform: translateY(-50%);
}
.rec-lightbox-prev { left: .75rem; }
.rec-lightbox-next { right: .75rem; }
.rec-lightbox-nav[aria-disabled="true"] { opacity: .3; cursor: default; }
.rec-lightbox-close:hover,
.rec-lightbox-nav:not([aria-disabled="true"]):hover { background: rgba(0, 0, 0, .7); }
.rec-lightbox-close:focus-visible,
.rec-lightbox-nav:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }

/* ── transcript, dark ── */
.dark .rec-seg-text { color: #e5e7eb; }
.dark .rec-media-label { color: #d1d5db; }
.dark .rec-media-caption { color: #9ca3af; }
.dark .rec-media-note { color: #d1d5db; }
.dark .rec-media-open img { border-color: #1f2937; background: #1f2937; }
.dark .rec-media-placeholder { border-color: #374151; background: #1f2937; color: #9ca3af; }
.dark .rec-media-state { background: #1f2937; color: #9ca3af; }
.dark .rec-media-state[data-state="failed"] { background: rgba(185, 28, 28, .2); color: #fca5a5; }
.dark .rec-media-retry { color: #a5b4fc; }
.dark .rec-media-remove { color: #6b7280; }
.dark .rec-media-remove:hover { background: rgba(220, 38, 38, .18); color: #fca5a5; }

/* Phones: media use the whole width instead of the text column, still capped
   in height; the lightbox's side buttons move down beside the count, where
   they leave a narrow screen's width to the image (a swipe moves too). */
@media (max-width: 480px) {
  .rec-transcript { padding: .75rem; }
  .rec-seg { column-gap: .625rem; }
  .rec-media-open,
  .rec-media-caption { grid-column: 1 / -1; }
  .rec-transcript:not(.rec-transcript-review) .rec-media-open { width: min(100%, calc(var(--ar, 1.7778) * 25vh)); }
  .rec-transcript-review .rec-media-open { width: min(100%, calc(var(--ar, 1.7778) * 45vh)); }
  .rec-lightbox-multi .rec-lightbox-stage { padding-inline: 1rem; }
  .rec-lightbox-multi .rec-lightbox-foot { padding-inline: 4rem; }
  .rec-lightbox-nav {
    top: auto;
    bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
}

/* ── "Removed from the transcript · Undo" without the media panel ──
   The panel's own chip (lecture-media.css) in look and place, so the two
   never differ and neither covers the app's toasts. */
.rec-undo {
  position: fixed;
  left: 50%;
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  max-width: calc(100vw - 2rem);
  padding: .125rem .125rem .125rem .875rem;
  border-radius: 999px;
  background: #1f2937;
  color: #f9fafb;
  font-size: .8125rem;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35);
}
.rec-undo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-undo-button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 .875rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a5b4fc;
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}
.rec-undo-button:hover { background: rgba(255, 255, 255, .1); }
.rec-undo-button:focus-visible { outline: 2px solid #a5b4fc; outline-offset: -2px; }
@media (min-width: 768px) {
  .rec-undo { bottom: 4.5rem; }
}
@media (pointer: fine) {
  .rec-undo-button { min-height: 32px; }
}
.dark .rec-undo { background: #e5e7eb; color: #111827; }
.dark .rec-undo-button { color: #4338ca; }

/* On a phone the toasts sit just above the bottom bar, which is where the undo
   chips go; while one shows, the toasts make room above it. */
@media (max-width: 767px) {
  body.lm-chip-shown #toast-container,
  body:has(> .rec-undo) #toast-container { bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }
}

/* ── review ── */
.rec-review-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rec-review-actions { display: flex; align-items: center; gap: .5rem; }

/* ── the lecture question asked once, right after recording ── */
.rec-ask {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1px solid #c7d2fe;
  border-radius: .875rem;
  background: #eef2ff;
  color: #3730a3;
}
.rec-ask-title { font-size: .875rem; }
.rec-ask-meta { font-size: .75rem; opacity: .8; margin-top: .125rem; }
.rec-ask-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.rec-tools { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── list ── */
.rec-card-list { display: flex; flex-direction: column; gap: .5rem; }

.rec-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  border: 1px solid #e5e7eb;
  border-radius: .875rem;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.rec-card:hover { border-color: #a5b4fc; transform: translateY(-1px); }

.rec-card-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: .625rem;
  display: grid;
  place-items: center;
  background: #f3f4f6;
  color: #6b7280;
}
.rec-card-icon.shared { background: #eef2ff; color: #4f46e5; }

.rec-card-body { flex: 1; min-width: 0; }
.rec-card-title {
  font-size: .875rem;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rec-card-meta { font-size: .75rem; color: #9ca3af; }

.rec-card-tags { display: flex; gap: .25rem; flex-shrink: 0; }
.rec-tag {
  padding: .125rem .4rem;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: .625rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.rec-tag-summary { background: #eef2ff; color: #4f46e5; }
.rec-tag-note { background: #ecfdf5; color: #047857; }

/* The title row of a saved recording: the name, a chip while the server is
   still naming it, and the owner's rename pencil (or the field it becomes). */
.rec-title-row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.rec-title-row h2 { min-width: 0; }
.rec-title-row .btn { flex-shrink: 0; color: #9ca3af; }
.rec-title-row .input { padding: .3rem .5rem; font-weight: 600; }
.rec-tag-naming { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; }

/* ── dark mode ── */
.dark .rec-button { background: #111827; border-color: #374151; }
.dark .rec-stage-label { color: #e5e7eb; }
.dark .rec-hint code { background: #1f2937; }
.dark .rec-live-bar,
.dark .rec-transcript,
.dark .rec-card,
.dark .rec-speaker-chip,
.dark .rec-toggle-group button { background: #111827; border-color: #1f2937; }
.dark .rec-askbox-field { background: #111827; border-color: #1f2937; }
.dark .rec-askbox-field:focus-within { border-color: var(--d-brand); box-shadow: 0 0 0 3px rgba(129,140,248,.15); }
.dark .rec-askbox-icon { color: var(--d-brand); }
.dark .rec-askbox-input { color: var(--d-text); }
.dark .rec-askbox-input::placeholder { color: #8a8da2; }
.dark .rec-askbox-input:disabled { color: #8a8da2; }
.dark .rec-askbox-card { background: #111827; border-color: #1f2937; }
.dark .rec-askbox-card:has(.rec-askbox-error) { background: rgba(127, 29, 29, .18); border-color: #7f1d1d; }
.dark .rec-askbox-label-text { color: var(--d-brand); }
.dark .rec-askbox-card:has(.rec-askbox-error) .rec-askbox-label-text { color: #fca5a5; }
.dark .rec-askbox-answer { color: #d1d5db; }
.dark .rec-askbox-answer.rec-askbox-note { color: #9ca3af; }
.dark .rec-askbox-answer.rec-askbox-error { color: #fca5a5; }
.dark .rec-askbox-answer.md-content { color: #d1d5db; }
.dark .rec-askbox-answer.md-content strong { color: #f3f4f6; }
.dark .rec-live-clock { color: #f3f4f6; }
.dark .rec-turn-name { color: #d1d5db; }
.dark .rec-speaker-chip { color: #d1d5db; }
.dark .rec-toggle-group button { color: #9ca3af; }
.dark .rec-toggle-group button.active {
  background: rgba(67, 56, 202, .25);
  border-color: #4338ca;
  color: #c7d2fe;
}
.dark .rec-card-title { color: #f3f4f6; }
.dark .rec-card-icon { background: #1f2937; color: #9ca3af; }
.dark .rec-card-icon.shared { background: rgba(67, 56, 202, .25); color: #a5b4fc; }
.dark .rec-tag { background: #1f2937; color: #9ca3af; }
.dark .rec-ask,
.dark .rec-alert-info {
  background: rgba(67, 56, 202, .18);
  border-color: #3730a3;
  color: #c7d2fe;
}
.dark .rec-alert {
  background: rgba(154, 52, 18, .18);
  border-color: #9a3412;
  color: #fed7aa;
}

@media (max-width: 640px) {
  .rec-live-bar { flex-wrap: wrap; }
  .rec-live-actions { margin-left: 0; width: 100%; }
  .rec-live-actions .btn { flex: 1; }
  .rec-ask { flex-wrap: wrap; }
  .rec-ask-actions { width: 100%; }
}

/* ── uploaded lecture audio ── */
.rec-upload {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .875rem;
  border: 1px solid #e5e7eb;
  border-radius: .875rem;
  background: #fff;
}

.rec-upload-empty { padding: 0; border-style: dashed; background: transparent; }

.rec-upload-drop {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem .875rem;
  cursor: pointer;
  color: #4b5563;
  border-radius: .875rem;
  transition: background-color .15s ease;
}
.rec-upload-drop:hover { background: #f9fafb; }
.rec-upload-drop strong { font-size: .8125rem; color: #111827; }

.rec-upload-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: #374151;
  min-width: 0;
}

.rec-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.rec-progress-bar span {
  display: block;
  height: 100%;
  background: #4f46e5;
  transition: width .2s ease;
}

.rec-audio {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: .75rem .875rem;
  border: 1px solid #e5e7eb;
  border-radius: .875rem;
  background: #fff;
}
.rec-audio audio { width: 100%; }

.rec-audio-meta {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .6875rem;
  color: #9ca3af;
  min-width: 0;
}

.rec-audio-drop {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  color: #dc2626;
  font-size: .6875rem;
  font-weight: 600;
  cursor: pointer;
}
.rec-audio-drop:hover { text-decoration: underline; }

.rec-spin { animation: rec-rotate 1s linear infinite; }

@keyframes rec-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dark .rec-upload,
.dark .rec-audio { background: #111827; border-color: #1f2937; }
.dark .rec-upload-empty { background: transparent; }
.dark .rec-upload-drop { color: #9ca3af; }
.dark .rec-upload-drop:hover { background: #1f2937; }
.dark .rec-upload-drop strong { color: #f3f4f6; }
.dark .rec-upload-head { color: #d1d5db; }
.dark .rec-progress-bar { background: #1f2937; }

.rec-recover-bar { margin-top: .5rem; }
.rec-saving-bar { margin-top: -.25rem; }

/* ── what to do so a recording does not stop ── */
.rec-tip {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .75rem;
  line-height: 1.5;
  color: #6b7280;
}
.rec-tip i, .rec-tip svg { flex-shrink: 0; margin-top: .12rem; }
.rec-tip-warn { color: #b45309; font-weight: 500; }

.dark .rec-tip { color: #9ca3af; }
.dark .rec-tip-warn { color: #fbbf24; }

/* ── onboarding semester picker ── */
.onboard-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  color: #6b7280;
}

.onboard-semester-note {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .625rem;
  border-radius: .625rem;
  background: #eef2ff;
  color: #4338ca;
  font-size: .75rem;
  font-weight: 600;
}

.dark .onboard-field { color: #9ca3af; }
.dark .onboard-semester-note { background: rgba(67, 56, 202, .22); color: #c7d2fe; }

/* ── live transcript, updated in place ── */
.rec-seg[hidden], #rec-live[hidden], .rec-waiting[hidden], .rec-speakers[hidden], .rec-turn-name[hidden] { display: none !important; }

/* ── renaming a speaker inline ── */
.rec-speaker-edit {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .15rem .25rem .15rem .625rem;
  border: 1px solid #a5b4fc;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.rec-speaker-input {
  width: 9.5rem;
  max-width: 45vw;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .75rem;
  color: #111827;
  padding: .15rem 0;
}
.rec-speaker-save {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  font-size: .75rem;
  line-height: 1;
  cursor: pointer;
}
.rec-chip-pencil { opacity: .5; flex-shrink: 0; }
.dark .rec-speaker-edit { background: #111827; border-color: #4338ca; }
.dark .rec-speaker-input { color: #f3f4f6; }

/* Touch screens: the recorder's own controls get finger-sized targets
   (44 px) — Pause and Stop above all — while a mouse keeps the compact look.
   The name field is 16px so a phone does not zoom the page in when it takes
   focus. Placed after the base rules above so it wins over them. */
@media (pointer: coarse) {
  .rec-live-actions .btn { min-height: 44px; }
  .rec-speaker-chip,
  .rec-speaker-edit { min-height: 44px; }
  .rec-speaker-input { font-size: 16px; }
  .rec-speaker-save { width: 2.25rem; height: 2.25rem; }
  .rec-media-remove { width: 44px; height: 44px; }
  .rec-media-retry { min-height: 44px; padding: 0 .75rem; }
}

/* ══════════════════════════════════════════════════════
   EVENTS  —  photos, venues and "Near me"
   ══════════════════════════════════════════════════════ */

/* An imported event carries a photo, a venue and a host from the page it was
   scraped from. A student's own event has none of those, so everything here
   styles only what those fields add, and a student's card reads as before. */

/* ── Near me toolbar ── */
.events-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: -.25rem 0 .75rem;
}
.events-radius {
  width: auto;
  padding: .3rem .5rem;
  font-size: .75rem;
}
.events-near-status { font-size: .75rem; color: #6b7280; }
.events-radius[hidden],
.events-near-status[hidden],
.event-thumb-fallback[hidden] { display: none !important; }

/* Both icons are drawn once and the pressed state picks one, so switching
   Near me on and off never has to run lucide again. */
.events-near-btn[aria-pressed="false"] .events-near-icon-on,
.events-near-btn[aria-pressed="true"] .events-near-icon-off { display: none; }

/* ── Card ── */
.event-thumb {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: .5rem;
  object-fit: cover;
  background: #f3f4f6;
}
.event-distance-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  flex-shrink: 0;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* ── Event page ── */
.event-hero { margin: 0 0 1rem; }
.event-hero-img {
  display: block;
  width: 100%;
  max-height: 20rem;
  object-fit: cover;
  border-radius: 12px;
  background: #f3f4f6;
}
.event-page-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  font-size: .8rem;
  font-weight: 500;
  color: #4f46e5;
  text-decoration: none;
}
.event-page-link:hover .event-page-label { text-decoration: underline; }
.event-page-host { color: #9ca3af; font-weight: 400; }

/* Facebook text is prose with line breaks, not Markdown: keep the breaks,
   and let a long pasted link wrap instead of widening the page. */
.event-plain-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: .9rem;
  line-height: 1.65;
  color: #374151;
}
.event-plain-text a { color: #4f46e5; text-decoration: underline; text-underline-offset: 2px; }

.dark .events-near-status { color: var(--d-text3); }
.dark .event-thumb,
.dark .event-hero-img { background: var(--d-surface2); }
.dark .event-distance-badge { background: var(--d-brand-bg); color: #c7d2fe; }
.dark .event-page-link { color: var(--d-brand); }
.dark .event-page-host { color: var(--d-text3); }
.dark .event-plain-text { color: #d8dae5; }
.dark .event-plain-text a { color: var(--d-brand); }

/* ══════════════════════════════════════════════════════
   Events — date filter and sorting
   ══════════════════════════════════════════════════════ */

/* The date menu follows the one on Facebook's own events page, where most of
   these events come from: the presets as rows with the choice on the right,
   "Any date" set apart, and a custom range one step further in. On a wide
   screen it drops down under its button; on a phone it is a sheet from the
   bottom, where a thumb reaches every row. */

.events-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.events-sort {
  width: auto;
  padding: .3rem .5rem;
  font-size: .75rem;
}

/* A new list is on its way: the old one stays readable but looks settled. */
#events-list { transition: opacity .15s ease; }
#events-list[aria-busy="true"] { opacity: .6; }

/* ── Date button ── */
.events-date { position: relative; }
.events-date-btn { white-space: nowrap; }
.events-date-chevron { opacity: .6; transition: transform .15s ease; }
.events-date-btn[aria-expanded="true"] .events-date-chevron { transform: rotate(180deg); }

/* ── Menu ── */
.events-date-pop {
  position: absolute;
  top: calc(100% + .375rem);
  left: 0;
  z-index: 45;
  width: 18rem;
  max-width: calc(100vw - 2rem);
  padding: .375rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .14), 0 2px 6px rgba(17, 24, 39, .06);
  animation: fade-in .12s ease;
}
.events-date-backdrop { display: none; }
.events-date-pop[hidden],
.events-date-backdrop[hidden],
.events-date-pop [data-date-view][hidden],
.events-date-custom-value[hidden],
.events-date-error[hidden] { display: none !important; }

.events-date-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.events-date-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  min-height: 2.5rem;
  padding: .5rem .625rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  color: #111827;
  text-align: left;
  cursor: pointer;
}
.events-date-option:hover { background: #f3f4f6; }
.events-date-option:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
/* Kept as its own rule: a browser without :has() drops only this line. */
.events-date-option:has(> .events-date-radio:focus-visible) { background: #f3f4f6; }

/* The native radio, drawn as a ring that fills with a dot, so the list keeps
   a radio group's keyboard and screen-reader behaviour. */
.events-date-radio {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.events-date-radio:checked {
  border-color: #6366f1;
  background: #6366f1;
  box-shadow: inset 0 0 0 3px #fff;
}
.events-date-radio:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
@media (forced-colors: active) {
  .events-date-radio { -webkit-appearance: auto; appearance: auto; }
}

.events-date-divider {
  height: 1px;
  margin: .25rem .625rem;
  background: #e5e7eb;
}

.events-date-custom-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.events-date-custom-value {
  font-size: .75rem;
  font-weight: 600;
  color: #4f46e5;
}
.events-date-row-chevron { flex-shrink: 0; color: #9ca3af; }

/* ── Custom range ── */
.events-date-custom {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: .125rem .375rem .375rem;
}
.events-date-custom-head {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: -.25rem;
  font-size: .875rem;
  font-weight: 600;
  color: #111827;
}
.events-date-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 600;
  color: #6b7280;
}
.events-date-error {
  margin: 0;
  font-size: .75rem;
  color: #dc2626;
}
.events-date-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}

/* ── Phone: a bottom sheet over the page and the bottom nav ── */
@media (max-width: 767px) {
  .events-date-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(17, 24, 39, .4);
    animation: fade-in .15s ease;
  }
  .events-date-pop {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    width: auto;
    max-width: none;
    max-height: 85vh;
    overflow-y: auto;
    padding: .5rem .5rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    animation: slide-up .2s ease;
  }
  .events-date-option { min-height: 3rem; font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .events-date-pop,
  .events-date-backdrop { animation: none; }
  .events-date-chevron { transition: none; }
}

.dark .events-date-pop {
  background: var(--d-surface);
  border-color: var(--d-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.dark .events-date-backdrop { background: rgba(0, 0, 0, .55); }
.dark .events-date-option { color: var(--d-text); }
.dark .events-date-option:hover { background: var(--d-surface3); }
.dark .events-date-option:focus-visible { outline-color: var(--d-brand); }
.dark .events-date-option:has(> .events-date-radio:focus-visible) { background: var(--d-surface3); }
.dark .events-date-radio { border-color: #6b7089; }
.dark .events-date-radio:checked {
  border-color: var(--d-brand);
  background: var(--d-brand);
  box-shadow: inset 0 0 0 3px var(--d-surface);
}
.dark .events-date-radio:focus-visible { outline-color: var(--d-brand); }
.dark .events-date-divider { background: var(--d-border); }
.dark .events-date-custom-value { color: var(--d-brand); }
.dark .events-date-row-chevron { color: var(--d-text3); }
.dark .events-date-custom-head { color: var(--d-text); }
.dark .events-date-field { color: var(--d-text3); }
.dark .events-date-error { color: #f87171; }

/* ══════════════════════════════════════════════════════
   Events — categories, free entry, adding a missing event
   ══════════════════════════════════════════════════════ */

/* The category menu is the date menu's popover with checkboxes in place of
   radios: several can be on, so it stays open while they are ticked. */
.events-cat[hidden],
.events-free-btn[hidden] { display: none !important; }
.events-cat-name {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  min-width: 0;
}
.events-cat-count { font-size: .75rem; font-weight: 500; color: #9ca3af; }
.events-cat-check {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: #6366f1;
  cursor: pointer;
}
.events-cat-actions {
  margin-top: .25rem;
  padding: .375rem .25rem .125rem;
  border-top: 1px solid #e5e7eb;
}
@media (min-width: 768px) {
  .events-cat-list { max-height: min(60vh, 26rem); overflow-y: auto; }
}

.event-free-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 .4rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 1px;
  white-space: nowrap;
}

/* "Missing an event?" — present, never in the way. */
.events-missing {
  margin: 1rem 0 .5rem;
  text-align: center;
  font-size: .8125rem;
}
.events-missing a { color: #6b7280; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #d1d5db; }
.events-missing a:hover { color: #4f46e5; text-decoration-color: currentColor; }

/* ── Add an event ── */
.event-form-hint { margin-top: .35rem; font-size: .75rem; color: #9ca3af; overflow-wrap: anywhere; }
.event-form-hint-ok { color: #047857; }
.event-form-hint-warn { color: #b45309; }

.event-poster-pick {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1.5px dashed #c7d2fe;
  border-radius: 12px;
  background: #f8faff;
  color: #6366f1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.event-poster-pick:hover { background: #eef2ff; border-color: #a5b4fc; }
.event-poster-pick:focus-within { outline: 2px solid #6366f1; outline-offset: 2px; }
.event-poster-text { display: flex; flex-direction: column; min-width: 0; }
.event-poster-title { font-size: .875rem; font-weight: 600; color: #3730a3; }
.event-poster-sub { font-size: .75rem; color: #6b7280; }
.event-poster-chosen {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.event-poster-img {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f4f6;
}
.event-poster-status { flex: 1; min-width: 0; font-size: .8125rem; color: #4b5563; }
.event-poster-pick[hidden],
.event-poster-chosen[hidden] { display: none !important; }

.dark .events-cat-count { color: var(--d-text3); }
.dark .events-cat-actions { border-top-color: var(--d-border); }
.dark .events-cat-check { accent-color: var(--d-brand); }
.dark .event-free-badge { background: rgba(16, 185, 129, .15); color: #6ee7b7; }
.dark .events-missing a { color: var(--d-text3); text-decoration-color: var(--d-border); }
.dark .events-missing a:hover { color: var(--d-brand); }
.dark .event-form-hint { color: var(--d-text3); }
.dark .event-form-hint-ok { color: #6ee7b7; }
.dark .event-form-hint-warn { color: #fbbf24; }
.dark .event-poster-pick { background: var(--d-surface2); border-color: var(--d-border); color: var(--d-brand); }
.dark .event-poster-pick:hover { background: var(--d-surface3); }
.dark .event-poster-title { color: var(--d-text); }
.dark .event-poster-sub { color: var(--d-text3); }
.dark .event-poster-chosen { border-color: var(--d-border); }
.dark .event-poster-img { background: var(--d-surface2); }
.dark .event-poster-status { color: var(--d-text2); }

/* ── a finished lecture's audio, saved to the device ── */
.rec-audio-download {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  margin-top: .25rem;
}

/* ══════════════ Credit (billing.js, views/credits.js) ══════════════
   Only drawn while the admin has credit switched on. Quiet everywhere but the
   Credits page itself: a line of small text, a card in Settings, and the
   top-up sheet when something was refused — a bottom sheet on a phone (like
   the note copy menu), a small dialog on a wider screen. */
.credit-sidebar { font-size: .75rem; color: #6b7280; text-decoration: none; }
.credit-sidebar:hover { color: #4f46e5; }
.credit-sidebar.is-low { color: #b45309; }

.credit-line { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .375rem; font-size: .75rem; color: #6b7280; }
.credit-line[hidden] { display: none; }
.credit-line .is-low { color: #b45309; font-weight: 500; }
.credit-sep { color: #d1d5db; }
.credit-topup { color: #4f46e5; font-weight: 500; text-decoration: none; }
.credit-topup:hover { text-decoration: underline; }
.rec-credit-line { justify-content: center; margin-top: -.25rem; }

.credit-card-balance { font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: #111827; font-variant-numeric: tabular-nums; }
.credit-card-balance.is-negative { color: #dc2626; }

.rec-credit-actions { display: flex; gap: 1rem; margin-top: .375rem; }
.rec-credit-actions a,
.rec-credit-actions button { font: inherit; font-weight: 600; color: inherit; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }

/* Kč | € */
.cur-switch { display: inline-flex; padding: 2px; border: 1px solid #e5e7eb; border-radius: 999px; background: #f9fafb; flex-shrink: 0; }
.cur-switch button { min-width: 2.25rem; padding: .2rem .6rem; border: 0; border-radius: 999px; background: transparent; font-size: .75rem; font-weight: 600; color: #6b7280; cursor: pointer; }
.cur-switch button[aria-pressed="true"] { background: #fff; color: #4f46e5; box-shadow: 0 1px 2px rgba(17, 24, 39, .12); }
.cur-switch button:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }

/* The Credits page */
.credits-hero { text-align: center; padding: 1.5rem 1rem; }
.credits-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; }
.credits-balance { margin-top: .25rem; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #111827; font-variant-numeric: tabular-nums; }
.credits-balance.is-negative { color: #dc2626; }
.credits-sub { margin-top: .5rem; font-size: .875rem; color: #6b7280; }
.credits-sub.is-bad { color: #b91c1c; font-size: .8125rem; }
.credits-notice { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; border-radius: 12px; background: #eef2ff; color: #3730a3; font-size: .875rem; }
.credits-notice.is-bad { background: #fef2f2; color: #991b1b; }
.credits-fine { margin-top: .75rem; font-size: .7rem; color: #9ca3af; }

.credit-packages { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); padding-top: .375rem; }
.credit-pack { position: relative; display: flex; flex-direction: column; gap: .125rem; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; }
.credit-pack.is-highlight { border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1, 0 8px 24px -12px rgba(79, 70, 229, .45); }
.credit-pack-badge { position: absolute; top: -.625rem; left: .875rem; padding: .1rem .5rem; border-radius: 999px; background: #4f46e5; color: #fff; font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.credit-pack-name { font-size: .875rem; font-weight: 600; color: #374151; }
.credit-pack-price { font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; color: #111827; font-variant-numeric: tabular-nums; }
.credit-pack-meta { flex: 1; font-size: .75rem; line-height: 1.5; color: #6b7280; }
.credit-pack .btn { margin-top: .75rem; justify-content: center; }

.credits-costs { font-size: .8125rem; }
.credits-costs li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid #f3f4f6; }
.credits-costs li:first-child { border-top: 0; }
.credits-costs li > span:first-child { color: #4b5563; }
.credits-costs li > span:last-child { font-weight: 600; color: #111827; white-space: nowrap; }
.credits-costs .is-free { color: #059669 !important; }

.credit-activity { margin-top: .25rem; }
.credit-row { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-top: 1px solid #f3f4f6; }
.credit-row:first-child { border-top: 0; }
.credit-row-icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 999px; background: #f3f4f6; color: #6b7280; }
.credit-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.credit-row-text strong { font-size: .875rem; font-weight: 500; color: #111827; }
.credit-row-text small { font-size: .75rem; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credit-row-amt { font-size: .875rem; font-weight: 600; color: #374151; font-variant-numeric: tabular-nums; }
.credit-row-amt.is-plus { color: #059669; }

/* The top-up sheet */
.topup-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(17, 24, 39, .4); animation: fade-in .15s ease; }
.topup-sheet {
  position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(24rem, calc(100vw - 2rem)); max-height: 85vh; overflow-y: auto;
  padding: 1.125rem 1.125rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  box-shadow: 0 24px 48px -12px rgba(17, 24, 39, .3); animation: fade-in .15s ease; outline: none;
}
.topup-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.topup-head h3 { font-size: 1rem; font-weight: 700; color: #111827; }
.topup-x { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent; color: #6b7280; cursor: pointer; }
.topup-x:hover { background: #f3f4f6; }
.topup-status { margin-top: .125rem; font-size: .875rem; color: #6b7280; }
.topup-status.is-error { color: #b91c1c; }
.topup-cur-row { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 .5rem; font-size: .75rem; font-weight: 600; color: #6b7280; }
.topup-packs { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.topup-pack {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .625rem .75rem;
  border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; font: inherit; color: inherit;
  text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.topup-pack:hover:not(:disabled):not(.is-static) { border-color: #a5b4fc; background: #f5f7ff; }
.topup-pack:disabled { opacity: .6; cursor: progress; }
.topup-pack.is-static { cursor: default; }
.topup-pack.is-highlight { border-color: #6366f1; }
.topup-pack:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.topup-pack-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.topup-pack-text strong { font-size: .9rem; font-weight: 600; color: #111827; }
.topup-pack-text small { font-size: .75rem; color: #6b7280; }
.topup-pack-price { font-size: .95rem; font-weight: 700; color: #111827; white-space: nowrap; font-variant-numeric: tabular-nums; }
.topup-note { margin: .5rem 0 0; font-size: .75rem; color: #6b7280; text-align: center; }
.topup-more { display: block; margin-top: .75rem; font-size: .8125rem; font-weight: 500; color: #4f46e5; text-align: center; text-decoration: none; }
.topup-more:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .topup-sheet {
    top: auto; left: 0; right: 0; bottom: 0; transform: none; width: auto; max-height: 85vh;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0; border-radius: 16px 16px 0 0; animation: slide-up .2s ease;
  }
  .topup-pack { min-height: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .topup-sheet, .topup-backdrop { animation: none; }
}

.dark .credit-sidebar { color: var(--d-text3); }
.dark .credit-sidebar:hover { color: var(--d-brand); }
.dark .credit-sidebar.is-low,
.dark .credit-line .is-low { color: #fbbf24; }
.dark .credit-line { color: var(--d-text3); }
.dark .credit-sep { color: var(--d-border); }
.dark .credit-topup,
.dark .topup-more { color: var(--d-brand); }
.dark .credit-card-balance,
.dark .credits-balance,
.dark .credit-pack-price,
.dark .credits-costs li > span:last-child,
.dark .credit-row-text strong,
.dark .topup-head h3,
.dark .topup-pack-text strong,
.dark .topup-pack-price { color: var(--d-text); }
.dark .credit-card-balance.is-negative,
.dark .credits-balance.is-negative { color: #f87171; }
.dark .cur-switch { background: var(--d-surface2); border-color: var(--d-border); }
.dark .cur-switch button { color: var(--d-text3); }
.dark .cur-switch button[aria-pressed="true"] { background: var(--d-surface3); color: var(--d-text); box-shadow: none; }
.dark .credits-label,
.dark .credits-fine,
.dark .credit-row-text small { color: var(--d-text3); }
.dark .credits-sub,
.dark .credit-pack-meta,
.dark .credits-costs li > span:first-child,
.dark .topup-status,
.dark .topup-cur-row,
.dark .topup-note,
.dark .topup-pack-text small { color: var(--d-text2); }
.dark .credits-sub.is-bad { color: #fca5a5; }
.dark .credits-notice { background: var(--d-brand-bg); color: #c7d2fe; }
.dark .credits-notice.is-bad { background: #2c0b0b; color: #fecaca; }
.dark .credit-pack { background: var(--d-surface2); border-color: var(--d-border); }
.dark .credit-pack.is-highlight { border-color: var(--d-brand); box-shadow: 0 0 0 1px var(--d-brand), 0 8px 24px -12px rgba(0, 0, 0, .6); }
.dark .credit-pack-name { color: var(--d-text2); }
.dark .credits-costs li,
.dark .credit-row { border-top-color: var(--d-border); }
.dark .credits-costs .is-free,
.dark .credit-row-amt.is-plus { color: #34d399 !important; }
.dark .credit-row-icon { background: var(--d-surface3); color: var(--d-text2); }
.dark .credit-row-amt { color: var(--d-text2); }
.dark .topup-backdrop { background: rgba(0, 0, 0, .55); }
.dark .topup-sheet { background: var(--d-surface); border-color: var(--d-border); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .6); }
.dark .topup-x { color: var(--d-text2); }
.dark .topup-x:hover { background: var(--d-surface3); }
.dark .topup-pack { background: var(--d-surface2); border-color: var(--d-border); }
.dark .topup-pack:hover:not(:disabled):not(.is-static) { background: var(--d-surface3); border-color: var(--d-brand); }
.dark .topup-pack.is-highlight { border-color: var(--d-brand); }
.dark .topup-status.is-error { color: #fca5a5; }