/* ============================================================= *
 *  card.css — the deck viewer: card faces, formula sizing,
 *  nav arrows, approve buttons. Loads after base.css.
 * ============================================================= */

/* ---------- viewer ---------- */
#viewer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-width: 0;
  min-height: 0;
  /* Scrolls only if a tall card + long note list ever exceed the window; the
     deck is top-anchored, so scrolling reaches it cleanly. */
  overflow-y: auto;
}

.empty { text-align: center; color: var(--faint); }
.empty-title { font-size: 18px; color: var(--muted); margin-bottom: 6px; }
.empty-sub { font-size: 13px; }

.deck {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Top-anchor the deck so the card keeps a fixed Y. Flipping to the back, or
     opening a card that has notes, must never push the card up/down — only the
     area BELOW it (meta + notes) may change. If a tall card plus a long note
     list ever exceed the window, #viewer scrolls (the card stays at the top). */
  align-self: flex-start;
  /* Sit lower than a hard top-pin — roughly midway to the old centered spot.
     Fixed (vh, not content-driven) so it never re-introduces the bounce. */
  margin-top: 5vh;
}
.hidden { display: none !important; }

.deck-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.deck-title { font-size: 20px; font-weight: 650; text-align: center; }
/* card position counter — mirrors the FRONT/BACK label in the card's top-right */
.deck-pos {
  position: absolute;
  top: 14px;
  right: 18px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.card {
  position: relative;
  /* Phone-faithful portrait shape: W/H = 0.6 (matches the app's Flashcards card,
     which fills a narrow phone screen ≈ 4:7–2:3). Capped to a phone-like width and
     centered so the ratio yields a ~380×633 card, not a giant deck-wide slab.
     Content taller than the ratio height still grows the card (long backs/formulas). */
  width: 100%;
  max-width: 380px;
  align-self: center;
  aspect-ratio: 0.6;
  min-height: 320px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 38px 34px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  will-change: transform;
}
.card:hover { border-color: rgba(255,255,255,.24); box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.55); }
.card:active { cursor: grabbing; }
.card:focus-visible { outline: 2px solid #6f8cff; outline-offset: 2px; }
.card.back { background: var(--panel-alt); }

.side-label {
  position: absolute;
  top: 14px;
  left: 18px;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--faint);
  font-weight: 700;
}

.card-body {
  font-size: 21px;
  line-height: 1.45;
  max-width: 38ch;
  white-space: pre-wrap;
  color: var(--ink);
  text-wrap: pretty;      /* avoid a single short word/letter orphaned on its own line */
}
.card.front .card-body { font-weight: 600; }
.card-body.bulleted { text-align: left; }

/* ΤΥΠΟΙ cards: two halves — equation focus on the TOP half, symbol legend on the
   bottom half. The card stretches its body to full height only for formula backs. */
.card:has(.card-body.has-formula) { align-items: stretch; }
.card-body.has-formula {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: left;
  white-space: normal;
}
.card-body .formula {
  text-align: center;
  color: var(--ink);
}
.card-body.has-formula .formula {
  flex: 1;                 /* top half */
  align-self: stretch;     /* full width so the auto-fit can measure the sides */
  display: flex;
  align-items: center;     /* equation vertically centred in the top half */
  justify-content: center;
  margin: 0;
  overflow: hidden;
}
/* MathJax display formula: bold heading, base 4em; js/features/card_math.js
   shrinks it to fit the card width when a wide equation would otherwise run off
   the sides. */
.card-body .formula mjx-container {
  font-size: 2.5em;
  max-width: 100%;
  margin: 0 auto;
}
.card-body.has-formula .back-bullets { flex: 1; align-self: center; }  /* bottom half */
.card-body .back-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  /* Space BETWEEN bullets: clearly larger than the tight line-height inside a
     wrapped bullet, so a wrapped second line reads as the same bullet, not a new one. */
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}
.card-body .back-bullets li {
  padding-left: 1.1em;
  text-indent: -1.1em;
  line-height: 1.28;   /* tight wrap inside a bullet (card-body's 1.45 read as a gap) */
}
/* Inline MathJax runs render ~118% of the text size and inherit the 1.28 line-height
   at that larger size, so any wrapped line holding math gets a taller line box — the
   "second line sits too far down" bug. line-height:0 removes the math's contribution;
   the surrounding text's strut alone sets every line's height (uniform spacing).
   Scoped to INLINE math (legend bullets + plain fronts/backs); the display formula
   lives inside .formula and keeps its own layout. */
.card-body > mjx-container,
.card-body .back-bullets mjx-container { line-height: 0; }
.card-body .back-bullets li::before { content: "• "; }
.card-body .back-line { text-align: left; }
.card .note {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  align-content: center;
  /* Reserve room for the back-side tags + source so flipping front<->back does
     not shift the nav arrows. This is the spacing between the card and arrows. */
  min-height: 46px;
  font-size: 11.5px;
  color: var(--muted);
}
.tag {
  background: var(--hover);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}
.src { color: var(--faint); }

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.nav {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease;
}
.nav:hover:not(:disabled) { background: var(--hover); }
.nav:disabled { opacity: .35; cursor: default; }

/* approve button — sits between the ‹ › arrows */
.approve {
  min-width: 132px;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: none;
  background: var(--approve);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .12s ease, transform .05s ease, opacity .12s ease;
}
.approve:hover:not(:disabled) { background: var(--approve-hover); }
.approve:active:not(:disabled) { transform: translateY(1px); }
.approve:disabled { cursor: default; }
.approve.approve--busy { opacity: .6; }
.approve.approve--approved { background: var(--approved); color: #d7f5e3; }
.approve.approve--approved:hover:not(:disabled) { background: var(--approved-hover); }
.approve.approve--undo { background: var(--undo); }
.approve.approve--undo:hover:not(:disabled) { background: var(--undo-hover); }

/* whole-deck approve — same pill, pinned to the screen's top-right corner */
.approve-deck {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 20;
  min-width: 150px;
  box-shadow: var(--shadow);
}

.shit {
  min-width: 150px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: none;
  background: var(--shit);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .12s ease, transform .05s ease;
}
.shit:hover { background: var(--shit-hover); }
.shit:active { transform: translateY(1px); }
.shit.on { background: var(--shit-on); }