/* styles.css — "Brutalist Mono", light paper-&-ink. Black-and-white, high
   contrast, hard 2px rules, square corners; mono for labels/meta, sans for
   content. Still mobile-first (>=44px tap targets, thumb-reach bottom bar).
   ALL color lives in :root so a dark mode can be added later as one override. */

:root {
  /* ── palette (light "paper & ink") ── */
  --bg:        #f0efe9;  /* app background behind surfaces */
  --paper:     #fcfcf8;  /* card / bar / input surface */
  --surface:   #fcfcf8;  /* (alias kept for legacy rules) */
  --surface-2: #e9e7df;  /* band — section-header band, insets, inputs:focus */
  --ink:       #111111;  /* text, 2px borders, inverted-button background */
  --text:      #111111;
  --text-dim:  #666666;  /* subtitles, meta, tags, kicker — #666 clears WCAG AA (~5.6:1) on paper; #777 was ~4.3:1 */
  --cjk-mut:   #444444;  /* reserved: bilingual translation lines */
  --border:    #111111;  /* (alias) — borders are ink */
  --accent:    #111111;  /* was blue; now ink (active tab, section headers) */

  /* ── structure ── */
  --line: 2px solid var(--ink);
  --radius: 0px;          /* brutalist: square corners everywhere */
  --maxw: 680px;

  /* ── type ── */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, "Noto Sans Mono CJK SC", monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, "Noto Sans CJK SC", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);            /* content is king → sans by default */
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- top bar ---- */
.topbar {
  position: relative;
  padding: 12px 18px;
  border-bottom: var(--line);
  background: var(--paper);
  text-align: center;
}
.brand {
  margin: 0; font-family: var(--mono);
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.nav-toggle {
  position: absolute; top: 50%; left: 12px; transform: translateY(-50%);
  width: 34px; height: 30px; font-size: 15px;
  background: var(--paper); color: var(--ink); border: var(--line); border-radius: 0;
  font-family: var(--mono); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (hover: hover) { .nav-toggle:hover { background: var(--ink); color: var(--paper); } }

main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 18px 40px;
  overflow-y: auto;
}

/* ---- views ---- */
.view { display: none; }
.view.active { display: block; animation: fade 0.16s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.view-title {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 2px 0 16px;
}

/* ---- flashcard (review prompt) ---- */
.card-stage { display: flex; flex-direction: column; gap: 16px; }
/* `display: flex` outranks the UA [hidden] rule — let `hidden` win (otherwise the
   finished card lingers after "All caught up"). Recurring gotcha. */
.card-stage[hidden] { display: none; }

.flashcard {
  background: var(--paper);
  border: var(--line);
  border-radius: 0;
  padding: 40px 24px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
/* `display: flex` outranks [hidden]; let `hidden` win so the prompt doesn't
   linger behind the revealed sections. (Recurring gotcha.) */
.flashcard[hidden] { display: none; }
.card-text { white-space: pre-wrap; word-break: break-word; }
.card-front {
  font-family: var(--sans);
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  text-wrap: balance;
}
.card-back { font-size: 20px; line-height: 1.4; }
.card-sub { font-family: var(--mono); color: var(--text-dim); font-size: 14px; margin-top: 12px; }
.divider { border: none; border-top: var(--line); margin: 18px 0; }

/* Review reveals the sections (can be tall) — full-height flex column so the
   reveal area scrolls instead of the page. */
#view-review.active { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#view-review .card-stage { flex: 1; min-height: 0; }
#review-prompt { flex: 0 0 auto; }
#review-reveal { flex: 1; min-height: 0; overflow-y: auto; }
#review-reveal[hidden] { display: none; }

/* ---- buttons ---- */
button { font: inherit; cursor: pointer; border: none; border-radius: 0; }

/* primary = inverted (ink fill, paper text), mono uppercase label */
.primary {
  background: var(--ink); color: var(--paper); border: var(--line);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 14px 18px;
}
@media (hover: hover) { .primary:hover { background: var(--paper); color: var(--ink); } }
.primary.big { width: 100%; padding: 16px; font-size: 13px; }
.primary.danger { background: var(--ink); color: var(--paper); }

/* ghost = paper fill, 2px ink border, inverts on hover */
.ghost {
  background: var(--paper); color: var(--ink); border: var(--line);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 11px 15px;
}
@media (hover: hover) { .ghost:hover { background: var(--ink); color: var(--paper); } }

/* ---- rating keypad (monochrome; connected by 2px rules, inverts on press) ---- */
.rating-row { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--line); }
.rating-row[hidden] { display: none; }   /* same [hidden] vs display fix as above */
.rate {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 6px; background: var(--paper); color: var(--ink);
  border-right: var(--line); transition: background 0.1s, color 0.1s;
}
.rate:last-child { border-right: none; }
.rate > span:first-child {
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.rate .iv { font-family: var(--mono); font-size: 14px; font-weight: 700; opacity: 1; }
.rate:active { background: var(--ink); color: var(--paper); }   /* touch press feedback (always) */
@media (hover: hover) { .rate:hover { background: var(--ink); color: var(--paper); } }

/* ---- legacy add form (kept; superseded by the .se-* editor below) ---- */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 6px; }
.field em { font-style: normal; opacity: 0.7; }
textarea {
  width: 100%; resize: vertical;
  background: var(--paper); color: var(--text);
  border: var(--line); border-radius: 0;
  padding: 12px 14px; font-size: 16px; line-height: 1.4; font-family: var(--sans);
}
textarea:focus { outline: none; background: var(--surface-2); }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.hint { font-family: var(--mono); color: var(--text-dim); font-size: 11px; margin-left: auto; }

/* ---- cards library: tag filter bar + grouped-by-tag list ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 20px; }
.filter-bar[hidden] { display: none; }
.filter-chip {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink); background: var(--paper); border: var(--line); border-radius: 0;
  padding: 7px 11px; cursor: pointer;
}
.filter-chip .t::before { content: "#"; opacity: 0.55; }
.filter-chip .n { opacity: 0.5; margin-left: 5px; }
.filter-chip.active { background: var(--ink); color: var(--paper); }
.filter-chip.active .n { opacity: 0.6; }

.tag-group { border: var(--line); background: var(--paper); margin-bottom: 18px; }
.tag-group-head {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-2); border-bottom: var(--line); padding: 9px 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.tag-group-head .count { color: var(--text-dim); }

.card-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: var(--line);
}
.card-row:last-child { border-bottom: none; }
.card-row-main { flex: 1; min-width: 0; cursor: pointer; }
.card-row-title { font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-row-sub { font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  background: var(--paper); color: var(--ink); border: var(--line);
  padding: 7px 10px; font-size: 14px;
}
@media (hover: hover) { .icon-btn:hover { background: var(--ink); color: var(--paper); } }

/* ---- tag chips (plain mono #tag, no pill) ---- */
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-row[hidden] { display: none; }
.tag-chip {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.02em; white-space: nowrap;
}
.tag-chip::before { content: "#"; opacity: 0.7; }

/* ---- empty states ---- */
.empty-state { text-align: center; color: var(--text-dim); padding: 56px 20px; }
.empty-state .empty-emoji { font-size: 34px; color: var(--ink); margin-bottom: 10px; }
.empty-state p { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; }
.empty-state button { margin-top: 16px; }

/* ---- settings ---- */
.settings-list { border: var(--line); background: var(--paper); }
.settings-row { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: var(--line); }
.settings-row:last-child { border-bottom: none; }
.settings-row[hidden] { display: none; }
.settings-row-main { flex: 1; min-width: 0; }
.settings-row-title { font-family: var(--sans); font-weight: 700; font-size: 16px; }
.settings-row-desc { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.settings-row a.ghost { text-decoration: none; white-space: nowrap; }

/* ---- navigation: slide-out drawer (phone) / persistent sidebar (landscape) ---- */
/* the surface. On phone it's an off-canvas drawer; >=900px overrides below make
   it the persistent left column. The same .tab[data-view] buttons drive both. */
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 55;
  width: 264px; max-width: 82vw;
  display: flex; flex-direction: column;
  background: var(--paper); border-right: var(--line);
  transform: translateX(-100%); transition: transform 0.22s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
body.nav-open .sidebar { transform: translateX(0); }

/* drawer header (brand + close) — only meaningful on phone; hidden in landscape */
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: var(--line);
}
.drawer-brand { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.drawer-close {
  background: var(--paper); color: var(--ink); border: var(--line); border-radius: 0;
  width: 30px; height: 30px; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (hover: hover) { .drawer-close:hover { background: var(--ink); color: var(--paper); } }

/* nav items — a vertical list (shared by phone drawer + wide sidebar) */
.tab {
  display: flex; align-items: center; gap: 8px;
  width: 100%; justify-content: flex-start;
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 18px; border: none; border-bottom: var(--line); border-radius: 0;
}
.tab.active { background: var(--ink); color: var(--paper); }
/* Settings sits at the bottom of the nav (above Help), separated by the gap */
.tab-foot { margin-top: auto; }

.sidebar-help {
  margin-top: auto; padding: 14px 18px; border-top: var(--line);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
}
@media (hover: hover) { .sidebar-help:hover { background: var(--ink); color: var(--paper); } }

.badge {
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 0; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* on the inverted active tab, invert the badge too so it stays legible */
.tab.active .badge { background: var(--paper); color: var(--ink); }

/* dimmed scrim behind the open drawer (phone only) */
.scrim {
  position: fixed; inset: 0; z-index: 54;
  background: rgba(17, 17, 17, 0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
}
body.nav-open .scrim { opacity: 1; pointer-events: auto; }

/* ---- auth overlay ---- */
.auth-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
/* higher-specificity [hidden] override so the overlay actually hides */
.auth-overlay[hidden] { display: none; }
.auth-card {
  width: 100%; max-width: 360px;
  background: var(--paper); border: var(--line); border-radius: 0; padding: 28px 24px;
}
.auth-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.auth-sub { font-family: var(--mono); color: var(--text-dim); font-size: 12px; margin: 0 0 18px; line-height: 1.5; }
.auth-sub span { color: var(--ink); }
.auth-input {
  width: 100%; margin-bottom: 12px;
  background: var(--paper); color: var(--text);
  border: var(--line); border-radius: 0;
  padding: 13px 14px; font-size: 16px; font-family: var(--sans);
}
.auth-input:focus { outline: none; background: var(--surface-2); }
.auth-input.code { letter-spacing: 6px; text-align: center; font-size: 22px; font-family: var(--mono); }
.auth-card .ghost { width: 100%; margin-top: 10px; }
.auth-error { font-family: var(--mono); color: var(--ink); font-weight: 700; font-size: 12px; margin: 12px 0 0; }

/* ---- confirmation modal (destructive actions) ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(17, 17, 17, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  width: 100%; max-width: 340px;
  background: var(--paper); border: var(--line); border-radius: 0; padding: 22px 22px 18px;
}
.modal-message { margin: 0 0 20px; font-size: 16px; line-height: 1.45; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-actions .ghost, .modal-actions .primary { padding: 11px 18px; }

/* ---- toast (inverted) ---- */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--paper);
  border: var(--line); border-radius: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em;
  padding: 10px 16px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Undo action inside a toast. The toast stays pointer-events:none (never blocks
   taps); only the button opts back in so it's tappable for its lifetime. */
.toast-undo {
  pointer-events: auto;
  background: var(--paper); color: var(--ink); border: none; border-radius: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; cursor: pointer;
}

/* ===========================================================================
   Landscape chrome (laptop + tablet landscape, >=900px): the drawer becomes a
   persistent left sidebar in a 2-column grid; the phone-only drawer chrome
   (hamburger, close ✕, scrim) is hidden.
   =========================================================================== */
@media (min-width: 900px) {
  body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "top  top"
      "side main";
    height: 100vh;
  }
  .topbar { grid-area: top; }

  main { grid-area: main; max-width: none; padding: 28px 40px 40px; }

  /* persistent, not a drawer: cancel the off-canvas transform + fixed pinning */
  .sidebar {
    grid-area: side; position: static; transform: none;
    width: auto; max-width: none; z-index: auto;
  }
  .nav-toggle, .drawer-head, .scrim { display: none; }
}

/* ===========================================================================
   SECTIONS — a card's content (content.js). Phone: a `header ┃ body` table row.
   Wide (>=760px): a Bento block grid — header band on top, auto-fit columns,
   2px gap-lines. The renderer outputs header+body per section, so this is pure
   CSS. (grouping/swipe, media are still a deferred display layer — SchemaProposal §6.)
   =========================================================================== */
#view-study.active { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.study-top { flex: 0 0 auto; display: flex; gap: 10px; margin-bottom: 14px; }
.study-top .ghost { padding: 8px 14px; }
.study-wrap { flex: 1; min-height: 0; overflow-y: auto; }
.study-wrap[hidden], .study-nav[hidden] { display: none; }  /* let [hidden] win over display:flex */
.study-nav { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.study-nav .hint { margin: 0; }

.study-card-head { margin-bottom: 16px; }
.study-title { font-family: var(--sans); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.study-card-head .card-sub { margin-top: 4px; }
.study-card-head .tag-row { margin-top: 12px; }

/* the section list — shared by Study and the Review reveal */
.sections { display: flex; flex-direction: column; border: var(--line); background: var(--paper); }
.section { border-bottom: var(--line); }
.section:last-child { border-bottom: none; }
/* a section WITH a header → table row (mono label cell | body cell) */
.section:has(.section-header) { display: grid; grid-template-columns: 104px 1fr; }
.section-header {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--surface-2);
  border-right: var(--line); padding: 12px 10px;
}
.section-body {
  font-family: var(--sans); white-space: pre-wrap;
  word-break: break-word; overflow-wrap: anywhere; /* break long unbroken tokens/URLs, incl. inside the bento grid */
  font-size: 15px; line-height: 1.5; padding: 12px 16px;
}
/* rich body: the markdown subset + KaTeX math (content.js renderBody) */
.section-body strong { font-weight: 700; color: var(--ink); }
.section-body em { font-style: italic; }
.section-body mark { background: var(--ink); color: var(--paper); border-radius: 0; padding: 0 3px; }
.section-body code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--surface-2); border: 1px solid var(--ink); border-radius: 0; padding: 1px 5px;
}
.section-body .katex { font-size: 1.08em; font-family: "Times New Roman", Georgia, serif; }
.section-body .katex-display { margin: 8px 0; overflow-x: auto; overflow-y: hidden; }

@media (min-width: 760px) {
  /* prompt grows on wide screens */
  .card-front { font-size: 46px; }

  /* sections → Bento block grid */
  .sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2px; background: var(--ink); border: var(--line);
  }
  .section, .section:has(.section-header) {
    display: flex; flex-direction: column;
    border: none; background: var(--paper);
  }
  .section-header { border-right: none; border-bottom: var(--line); width: 100%; }
  .section-body { flex: 1; }
}

/* ---- card editor ---- */
.se-form { display: flex; flex-direction: column; }
.se-input, .se-textarea {
  width: 100%; background: var(--paper); color: var(--text);
  border: var(--line); border-radius: 0;
  padding: 11px 13px; font-size: 15px; margin-bottom: 10px; font-family: var(--sans);
}
.se-input:focus, .se-textarea:focus { outline: none; background: var(--surface-2); }
.se-textarea { resize: vertical; line-height: 1.45; }
.se-sections-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.se-h { font-family: var(--mono); font-size: 11px; color: var(--text-dim); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.se-add { padding: 6px 12px; font-size: 11px; }
.se-section { background: var(--surface-2); border: var(--line); border-radius: 0; padding: 14px; margin-bottom: 10px; }
.se-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.se-section-head .se-header { flex: 1; margin-bottom: 0; background: var(--paper); }
.se-moves { flex: 0 0 auto; display: flex; gap: 4px; }
.se-section .se-textarea { background: var(--paper); margin-bottom: 0; }
.danger-text { color: var(--ink); }
#se-form-pane[hidden], #se-paste-pane[hidden] { display: none; }

/* ---- editor: Form/Paste mode toggle ---- */
.se-mode { display: inline-flex; border: var(--line); margin-bottom: 18px; }
.se-mode[hidden] { display: none; }
.se-mode-btn {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 16px; background: var(--paper); color: var(--ink);
  border: none; border-right: var(--line); border-radius: 0; cursor: pointer;
}
.se-mode-btn:last-child { border-right: none; }
.se-mode-btn.active { background: var(--ink); color: var(--paper); }

/* ---- paste-to-cards: input + live preview ---- */
.import-wrap { display: grid; gap: 20px; }
@media (min-width: 820px) { .import-wrap { grid-template-columns: 1fr 1fr; align-items: start; } }
.import-input textarea {
  width: 100%; min-height: 320px; box-sizing: border-box;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  padding: 12px 14px; border: var(--line); border-radius: 0;
  background: var(--paper); color: var(--text); resize: vertical;
}
.import-input textarea:focus { outline: none; background: var(--surface-2); }
/* collapsible format help (click to expand; collapsed by default to save space) */
.import-help {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  margin: 10px 0 0; border: var(--line); background: var(--paper);
}
.import-help summary {
  cursor: pointer; padding: 8px 12px; list-style: none;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.import-help summary::-webkit-details-marker { display: none; }
.import-help summary::before { content: "\25B8  "; }      /* ▸ collapsed */
.import-help[open] summary::before { content: "\25BE  "; } /* ▾ expanded */
.import-help[open] summary { border-bottom: var(--line); }
.import-help-body { padding: 10px 12px; line-height: 1.7; }
.import-help-body b { color: var(--ink); }
.prev-count { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin: 0 0 12px; }
.prev-card { border: var(--line); background: var(--paper); margin-bottom: 16px; }
.prev-card-head { padding: 14px 16px; border-bottom: var(--line); }
.prev-card .study-title { font-size: 20px; }
.prev-card .sections { border: none; }
.prev-empty { font-family: var(--mono); font-size: 12px; color: var(--text-dim); padding: 18px; border: 2px dashed var(--text-dim); }