*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: #1c1917;
  /* Reserve scrollbar gutter always — when content grows past the
     viewport and the scrollbar appears, the page no longer reflows
     by a few px and everything stays put. */
  scrollbar-gutter: stable;
}
body {
  max-width: 36rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  line-height: 1.55;
}

.brand-lockup {
  /* Inline (not flex) so the "streamo" text and the page-title text
     share a single baseline — no more streamo-floating-above-the-app-
     name. The img is baseline-aligned so the logo's BOTTOM sits on
     the baseline (logo extends UP into the line height); brings the
     logo "down" to where the text reads, rather than pulling streamo
     "up" to the logo's center. */
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.4rem;
}
.brand-lockup img { width: 1.6rem; height: 1.6rem; vertical-align: baseline; margin-right: 0.35rem; }
.brand-lockup:hover { opacity: 0.85; }
.page-title {
  font-weight: 400;
  color: #888;
  letter-spacing: .04em;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}
.page-title::before { content: '· '; opacity: 0.5; }
h1 { display: flex; align-items: baseline; margin-bottom: 0.4rem; }
.tagline {
  color: #666;
  font-size: 0.92rem;
  margin-bottom: 1.75rem;
}
h2 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
  margin: 1.75rem 0 0.65rem;
  font-weight: 500;
}
.who {
  font-size: 0.78rem;
  color: #888;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: -0.4rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.who code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #555;
}
.who button {
  background: none;
  border: none;
  color: #1d4ed8;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline dotted;
  font-family: inherit;
}

.login { display: flex; flex-direction: column; gap: 0.5rem; }
.login input {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  font-family: monospace;
}
.login input:focus { outline: none; border-color: #1d4ed8; }
.login input:disabled { background: #f9f9f9; }
.login button {
  padding: 0.55rem 1.1rem;
  background: #1d4ed8;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
}
.login button:hover { opacity: 0.88; }
.hint {
  font-size: 0.82rem;
  color: #888;
  margin-top: 0.5rem;
  font-style: italic;
}
.connecting {
  color: #1d4ed8;
  font-size: 0.88rem;
  padding: 0.5rem 0;
}

.decks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
}
.deck {
  padding: 1rem 1.1rem;
  border: 1px solid #eee;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.05s;
}
.deck:hover { border-color: #1d4ed8; }
.deck:active { transform: scale(0.99); }
.deck-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.deck-desc {
  font-size: 0.88rem;
  color: #555;
  margin-bottom: 0.55rem;
  line-height: 1.45;
}
.deck-stats {
  display: flex;
  gap: 0.85rem;
  font-size: 0.78rem;
  color: #888;
  font-variant-numeric: tabular-nums;
  align-items: baseline;
}
.deck-stats .due  { color: #b91c1c; }
.deck-stats .new  { color: #047857; }
/* Deck-action buttons on the home page (fork, edit, delete) share
   the same bordered chip look as the edit-page's edit/delete buttons.
   Color shifts on hover signal the action: blue for edit/fork, red
   for delete. */
.deck-action-btn {
  background: none;
  border: 1px solid #ddd;
  color: #555;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-family: inherit;
}
.deck-action-btn:hover {
  border-color: #1d4ed8;
  color: #1d4ed8;
}
.deck-action-btn.deck-action-delete:hover {
  border-color: #b91c1c;
  color: #b91c1c;
}
.deck-stats .deck-action-btn:first-of-type {
  margin-left: auto;
}
.deck-stats .deck-action-btn + .deck-action-btn {
  margin-left: 0.5rem;  /* matches .edit-card-actions { gap: 0.5rem } */
}
.deck-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #047857;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.study {
  padding: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
.study-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #666;
}
.study-back {
  background: none;
  border: none;
  color: #1d4ed8;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline dotted;
  font-family: inherit;
}
.study-back:hover { text-decoration-style: solid; }
/* Inline 'stop studying ahead' affordance in the study-header
   right-side text. Replaces the 'N left' count when studyAhead is
   on — same color family as .study-back so it reads as a matching
   way out of the mode. */
.study-ahead-stop {
  background: none;
  border: none;
  color: #1d4ed8;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline dotted;
}
.study-ahead-stop:hover { text-decoration-style: solid; }
/* The card is a 3D-flip container — clicking it toggles `.revealed`,
   which rotates `.card-inner` 180° on the Y axis. `backface-visibility:
   hidden` on each face means only one side is ever visible. Fixed
   height keeps the layout stable so the grade buttons and mastery
   strip never shift when flipping. */
.card {
  perspective: 1000px;
  box-sizing: border-box;
  height: 13rem;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.card.revealed .card-inner {
  transform: rotateY(180deg);
}
.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: white;
  padding: 1.5rem 1.5rem 2.4rem;  /* extra bottom for the flip hint */
  text-align: center;
}
.card-face-back {
  transform: rotateY(180deg);
}
.card-front-text {
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.2;
}
.card-back-text {
  font-size: 1.6rem;
  color: #333;
  line-height: 1.3;
}
.card-flip-hint {
  position: absolute;
  bottom: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #aaa;
  font-style: italic;
  pointer-events: none;
}
.card-flip-icon {
  width: 22px;
  height: 14px;
}

/* Mastery strip under the studied card — same primitive shape as the
   manage-card mastery, but slightly taller bar. Bar + label flush
   (no internal gap). */
.study-mastery-wrap {
  margin-top: 0.7rem;
  /* margin-bottom moved into .study-actions-slot — see below */
}
.study-mastery {
  position: relative;
  height: 4px;
  background: #f3f4f6;
  border-radius: 999px;
}
.study-mastery-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: currentColor;
  border-radius: 999px;
  transition: width 0.3s ease-out, background 0.6s ease-out;
}
.study-mastery-label {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  margin-top: 0;
  display: flex;
  justify-content: space-between;
}
.reveal-btn {
  align-self: center;
  padding: 0.55rem 1.5rem;
  background: white;
  border: 1px solid #1d4ed8;
  color: #1d4ed8;
  border-radius: 6px;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
}
.reveal-btn:hover { background: #1d4ed8; color: white; }
/* Fixed-height slot for the grade buttons. Reserved even when the
   buttons aren't shown so the manage panel below doesn't move when
   you flip / grade. */
.study-actions-slot {
  min-height: 2.6rem;
  margin-top: 0.7rem;
}
.grades {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.grades button {
  padding: 0.7rem 0.3rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid;
  background: white;
}
.grade-again { color: #b91c1c; border-color: #fecaca; }
.grade-hard  { color: #b45309; border-color: #fed7aa; }
.grade-good  { color: #047857; border-color: #a7f3d0; }
.grade-easy  { color: #1d4ed8; border-color: #bfdbfe; }
.grades button:hover { background: #fafafa; }
.done {
  text-align: center;
  padding: 2rem 1rem;
  color: #555;
}
.done h3 { font-weight: 500; font-size: 1.1rem; margin-bottom: 0.5rem; }
.empty {
  font-size: 0.88rem;
  color: #999;
  font-style: italic;
  padding: 0.75rem 0;
}
.explorer-link {
  font-size: 0.82rem;
  color: #1d4ed8;
  text-decoration: none;
  border-bottom: 1px dotted;
  display: inline-block;
  margin-top: 1.25rem;
}
.explorer-link:hover { border-bottom-style: solid; }

/* Deck mastery — a thin solid-color bar that grows AND shifts color
   with mastery. Width and color both derive from the same value, so
   they always agree. The label below is tinted to match. Reactive
   and time-based: ticks every second via liveTime, so you can watch
   mastery climb between reviews. */
.deck-mastery {
  position: relative;
  height: 0.35rem;
  background: #f3f4f6;
  border-radius: 999px;
  margin-top: 0.6rem;
  overflow: hidden;
  /* `color` is set inline per-deck via masteryColor(); the bar inside
     inherits via currentColor. */
}
.deck-mastery-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: currentColor;
  border-radius: 999px;
  transition: width 0.3s ease-out, background 0.6s ease-out;
}
.deck-mastery-label {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  margin-top: 0;
  /* `color` set inline per-deck via masteryColor() — tinted, legible. */
}

/* Live next-up schedule — ticks every second via liveTime. */
.deck-schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  font-size: 0.72rem;
  color: #666;
  margin-top: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.deck-schedule-label {
  color: #888;
  font-style: italic;
}
.deck-schedule-tick {
  background: #f3f4f6;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  color: #333;
}

/* ── edit view ─────────────────────────────────────────────────────── */
.edit {
  padding: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
.edit-lineage {
  margin-top: -0.4rem;
  margin-bottom: 0.5rem;
}
.edit-cards {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.edit-card {
  border: 1px solid #eee;
  border-radius: 8px;
  background: white;
  padding: 0.75rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.6rem;
  align-items: center;
}
.edit-card-front {
  font-size: 1.1rem;
  font-weight: 500;
}
.edit-card-back {
  font-size: 0.95rem;
  color: #555;
}
.edit-card-actions {
  display: flex;
  gap: 0.5rem;
}
.edit-card-btn {
  background: none;
  border: 1px solid #ddd;
  color: #555;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-family: inherit;
}
.edit-card-btn:hover { border-color: #1d4ed8; color: #1d4ed8; }
.edit-card-btn.delete:hover { border-color: #b91c1c; color: #b91c1c; }

.edit-card-editing {
  display: block;  /* override the grid for the form view */
  border-color: #1d4ed8;
}
.edit-card-editing form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.edit-card-editing input {
  padding: 0.5rem 0.7rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}
.edit-card-editing input:focus {
  outline: none;
  border-color: #1d4ed8;
}
.edit-card-editing .edit-card-actions {
  justify-content: flex-end;
}
.edit-card-editing .save-btn {
  padding: 0.4rem 1rem;
  background: #1d4ed8;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
}
.edit-card-editing .save-btn:hover { opacity: 0.88; }
.edit-card-editing .cancel-btn {
  padding: 0.4rem 0.9rem;
  background: none;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
}
.edit-card-editing .cancel-btn:hover { color: #1c1917; border-color: #1c1917; }
.edit-card-new {
  border-style: dashed;
}

/* Editable deck title on the edit page. Reads as the page's
   heading by default; the dotted underline + blue focus state
   signal it's an input without forcing a "form field" look. */
.edit-deck-title {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 500;
  font-family: inherit;
  color: #1c1917;
  background: none;
  border: none;
  border-bottom: 1px dotted #ccc;
  padding: 0.3rem 0;
  margin: 0.5rem 0;
}
.edit-deck-title:hover { border-bottom-color: #999; }
.edit-deck-title:focus {
  outline: none;
  border-bottom-color: #1d4ed8;
  border-bottom-style: solid;
}

.add-card-btn {
  align-self: flex-start;
  background: white;
  border: 1px dashed #1d4ed8;
  color: #1d4ed8;
  font-size: 0.92rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 0.5rem;
}
.add-card-btn:hover {
  background: #1d4ed8;
  color: white;
}

/* ── manage view ───────────────────────────────────────────────────── */
.manage {
  padding: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
.manage-section {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
  margin: 1.25rem 0 0.5rem;
  font-weight: 500;
}
.manage-count {
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
  color: #aaa;
  margin-left: 0.3rem;
}
.manage-section-hint {
  text-transform: none;
  letter-spacing: 0;
  color: #aaa;
  font-style: italic;
  margin-left: 0.5rem;
  font-weight: 400;
}
.manage-cards {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;          /* hit boxes meet — no dead space between cards
                      that would briefly drop the hover state and
                      collapse the previously-expanded card */
  padding: 0;
  margin: 0;
}
/* Overlap card borders by 1px so adjacent cards share a single line
   instead of a doubled one. The hovered card lifts to z-index 1 so
   its (highlighted) border paints over its neighbors' edges. */
.manage-cards .manage-card + .manage-card {
  margin-top: -1px;
}
.manage-cards .manage-card:hover {
  z-index: 1;
}
.manage-card {
  position: relative;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;  /* between content and the mastery wrap; NOT between bar/label */
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.manage-card-content,
.manage-card-mastery-wrap {
  position: relative;
  z-index: 1;  /* sit above the SVG overlay */
}
.manage-card-content {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.6rem;
  align-items: center;
}
.manage-card-front {
  font-size: 1rem;
  font-weight: 500;
  color: #1c1917;
}
/* Eye-icon "peek" button — bumps this card into the studied slot
   (with its back revealed) without grading or de-queueing. Lets the
   learner browse the manage list and pick a specific card to look
   at without committing to it. Tiny + inline so it doesn't claim
   visual weight from the front-text. */
.manage-card-peek {
  background: none;
  border: none;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  color: #888;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
  position: relative;
  z-index: 1;  /* above the X/+ overlay */
}
.manage-card-peek:hover {
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.08);
}
.manage-card-peek svg {
  width: 22px;
  height: 14px;
  display: block;
}
/* Mastery bar + label are wrapped so their internal gap can be 0 while
   the outer card-flex still has spacing between content and mastery. */
.manage-card-mastery-wrap {
  display: block;
}
.manage-card-mastery {
  position: relative;
  height: 3px;
  background: #f3f4f6;
  border-radius: 999px;
  /* `color` set inline via masteryColor(); the bar inherits. */
}
.manage-card-mastery-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: currentColor;
  border-radius: 999px;
  transition: width 0.3s ease-out, background 0.6s ease-out;
}
.manage-card-mastery-label {
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  margin-top: 0;  /* flush against the bar */
  display: flex;
  justify-content: space-between;
  /* `color` set inline via masteryColor() — tinted, legible. Mastery
     name/value on the left, due-state on the right, matching the
     bar's anchor semantics (remaining drains rightward, overdue
     fills rightward). */
}

/* SVG icon overlay — faded X (active) or + (available) that appears
   on hover. Positioned absolutely behind the content; pointer-events
   off so clicks pass through to the card itself. Sized to 2/3 the
   card's height with square aspect (NOT stretched), centered. The
   default preserveAspectRatio keeps the X at true right angles
   regardless of card width. */
.manage-card-icon {
  position: absolute;
  top: 16.67%;            /* (100 - 66.67) / 2 — centered vertically */
  height: 66.67%;         /* 2/3 the card's height */
  aspect-ratio: 1 / 1;    /* keep it square — strokes meet at right angles */
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  z-index: 0;
}
.manage-card:hover .manage-card-icon {
  opacity: 0.22;
}
.manage-card-active .manage-card-icon rect {
  fill: #dc2626;  /* red */
}
.manage-card-available .manage-card-icon rect {
  fill: #16a34a;  /* green */
}

/* Active vs. available cards preview their *post-click* state on hover:
   active card hovered → looks like an available card resting (it's
   about to become one). Available card hovered → looks like an
   active card resting (the symmetric direction was already there
   and David flagged he liked it). The colored borders are the
   forward-signal: red on the way out, green on the way in. */
.manage-card-active {
  background: white;
}
.manage-card-active:hover {
  background: #fafafa;
  opacity: 0.7;
  border-color: #fecaca;
}
.manage-card-active:hover .manage-card-front,
.manage-card-active:hover .manage-card-back {
  color: #777;
}

.manage-card-available {
  background: #fafafa;
  opacity: 0.7;
}
.manage-card-available .manage-card-front,
.manage-card-available .manage-card-back {
  color: #777;
}
.manage-card-available:hover {
  opacity: 1;
  border-color: #a7f3d0;
  background: white;
}
.manage-card-available:hover .manage-card-front {
  color: #1c1917;
}
.manage-card-available:hover .manage-card-back {
  color: #555;
}

/* ── manage panel on the study page ───────────────────────────────────
   Collapsed by default — shows just a faded "manage deck" pill.
   Hovering the panel expands it to reveal the active + available
   card lists. Uses the `grid-template-rows: 0fr ↔ 1fr` trick so the
   expansion animates to the content's natural height. */
.manage-deck {
  position: relative;
  /* spacing comes from .study-actions-slot's margin-bottom now */
  border: 1px dashed #ddd;
  border-radius: 10px;
  background: transparent;  /* no bg in the collapsed state */
  transition: background 0.2s ease, border-color 0.2s ease, border-style 0.2s ease;
}
.manage-deck-pill {
  padding: 0.75rem 1rem;
  text-align: center;
  color: #ddd;          /* matches the dashed border in collapsed state */
  font-style: italic;
  user-select: none;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.manage-deck-expanded {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.manage-deck-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 1rem;
}
.manage-deck-pill {
  cursor: pointer;
}
.manage-deck:hover,
.manage-deck-pinned {
  background: #fafafa;   /* expanded picks up the soft gray that
                            used to be on collapsed — color states
                            swapped, animation preserved */
  border-color: #ccc;
  border-style: solid;
}
.manage-deck:hover .manage-deck-pill,
.manage-deck-pinned .manage-deck-pill {
  color: #555;
  font-style: normal;
  border-bottom: 1px solid #eee;
}
.manage-deck-pinned .manage-deck-expanded {
  grid-template-rows: 1fr;  /* pinned: stay expanded regardless of hover */
}
.manage-deck:hover .manage-deck-expanded {
  grid-template-rows: 1fr;
}
.manage-deck-inner > .manage-section:first-child {
  margin-top: 1rem;
}

/* Per-deck retention slider — sits at the top of the expanded manage
   panel. Tunes the deck's review aggressiveness; the cards visibly
   re-sort as you drag. */
.retention-control {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 0 0.8rem;
  border-bottom: 1px solid #eee;
}
.retention-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.retention-control label {
  font-size: 0.82rem;
  color: #555;
}
.retention-save {
  background: #1d4ed8;
  color: white;
  border: none;
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: opacity 0.15s;
}
.retention-save:hover { opacity: 0.88; }
.retention-control label strong {
  font-variant-numeric: tabular-nums;
  color: #1d4ed8;
  font-weight: 600;
}
.retention-hint {
  color: #999;
  font-style: italic;
  font-weight: 400;
}
.retention-control input[type=range] {
  width: 100%;
  accent-color: #1d4ed8;
  cursor: pointer;
}
.manage-deck-inner > .manage-cards:last-child,
.manage-deck-inner > .empty:last-child {
  padding-bottom: 1rem;
}

/* Compact card variant — used inside the manage panel.
   Default state: only the mastery bar + label are visible (the
   "bottom of a card" look David asked for). Hovering an individual
   card expands the front/back content above the bar. The grid-rows
   transition gives a smooth height animation; the margin-bottom on
   the content-wrap is the "slight margin" so the bar isn't flush
   against the front/back text when expanded. */
.manage-card-compact {
  padding: 0.55rem 0.9rem;
  gap: 0;
}
.manage-card-content-wrap {
  position: relative;
  z-index: 1;
}
.manage-card-compact .manage-card-content-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease, margin-bottom 0.2s ease;
  margin-bottom: 0;
}
.manage-card-compact .manage-card-content-wrap > * {
  overflow: hidden;
  min-height: 0;
}
.manage-card-compact:hover .manage-card-content-wrap,
.manage-deck-pinned .manage-card-compact .manage-card-content-wrap {
  /* hover-expand on desktop, AND open all cards when the panel is
     click-pinned — the hover-to-peek doesn't work on touch, so
     pinning unfolds everything at once. */
  grid-template-rows: 1fr;
  margin-bottom: 0.45rem;
}

/* Empty-state card area on the study page — shown when the active
   set is empty (fresh deck) or when nothing is currently due. Same
   footprint as a real card so the layout doesn't shift between
   states. */
.study-empty {
  box-sizing: border-box;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px dashed #ddd;
  border-radius: 10px;
  background: #fafafa;
  height: 13rem;  /* match .card exactly so the studied-card slot
                     never changes height between states */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.study-empty h3 {
  margin: 0 0 0.5rem;
  font-weight: 500;
  font-size: 1.3rem;
  color: #555;
}
.study-empty p {
  margin: 0;
  color: #777;
  max-width: 26rem;
  line-height: 1.4;
}
.study-empty em {
  font-style: normal;
  font-weight: 500;
  color: #444;
}
/* Clickable variant — the "all caught up" card invites a click to
   keep studying past the algorithm's threshold (study-ahead mode). */
.study-empty-clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.study-empty-clickable:hover {
  border-color: #1d4ed8;
  border-style: solid;
  background: white;
}
.study-empty-clickable:hover em {
  color: #1d4ed8;
}