/* ============================================================
   Flashcards — SEED Design System (scoped PoC, full lean-in)
   ----------------------------------------------------------------
   Tokens + a small slice of SEED component primitives are scoped
   to #page-flashcards. Rest of class/index.html keeps its legacy
   styling so the visual contrast is obvious.

   When the full classroom adopts SEED, delete the token & primitive
   blocks below and link assets/seed.css globally instead.
   ============================================================ */

#page-flashcards {
  /* ---- SEED tokens (subset) ---- */
  --seed-bg-layer-default:        #FFFFFF;
  --seed-bg-layer-basement:       #F4F4F5;
  --seed-fg-neutral:               #212124;
  --seed-fg-neutral-muted:         #4D4D52;
  --seed-fg-neutral-subtle:        #74747A;
  --seed-fg-neutral-subtlest:      #A4A4AB;
  --seed-stroke-neutral:           #E2E2E5;
  --seed-stroke-neutral-muted:     #EFEFF0;
  --seed-bg-brand-solid:           #1E40AF;
  --seed-bg-brand-solid-pressed:   #1E3A8A;
  --seed-fg-brand:                 #1E40AF;
  --seed-fg-brand-contrast:        #FFFFFF;
  --seed-fg-positive:              #008B4D;
  --seed-fg-critical:              #E5202C;

  --seed-radius-2: 4px;
  --seed-radius-3: 8px;
  --seed-radius-4: 12px;
  --seed-radius-5: 16px;
  --seed-radius-6: 20px;
  --seed-radius-full: 9999px;

  --seed-space-1:  4px;
  --seed-space-2:  8px;
  --seed-space-3:  12px;
  --seed-space-4:  16px;
  --seed-space-5:  20px;
  --seed-space-6:  24px;
  --seed-space-8:  32px;
  --seed-space-10: 40px;

  /* SEED typography (size / leading) */
  --seed-display-1-size: 36px;  --seed-display-1-leading: 44px;
  --seed-display-2-size: 32px;  --seed-display-2-leading: 40px;
  --seed-title-1-size:   28px;  --seed-title-1-leading:   36px;
  --seed-title-2-size:   22px;  --seed-title-2-leading:   30px;
  --seed-title-3-size:   20px;  --seed-title-3-leading:   28px;
  --seed-body-l-size:    18px;  --seed-body-l-leading:    26px;
  --seed-body-m-size:    16px;  --seed-body-m-leading:    24px;
  --seed-body-s-size:    14px;  --seed-body-s-leading:    20px;
  --seed-label-l-size:   17px;
  --seed-label-m-size:   15px;
  --seed-label-s-size:   13px;
  --seed-caption-size:   12px;  --seed-caption-leading:   16px;

  --seed-shadow-small:  0 1px 2px rgba(0,0,0,0.05);
  --seed-shadow-medium: 0 4px 8px rgba(0,0,0,0.08);

  --seed-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --seed-duration-short:  150ms;
  --seed-duration-medium: 250ms;
  --seed-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Pretendard everywhere inside the flashcards page. */
  font-family: var(--seed-font-sans);
  color: var(--seed-fg-neutral);
  letter-spacing: -0.01em;
}

#page-flashcards.active {
  position: relative;                /* anchors the floating chip */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: calc(100dvh - 120px);
}
/* #fc-app spans the page width up to the card's natural max. */
#page-flashcards.active > #fc-app {
  width: 100%;
  max-width: 480px;
  flex: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
}
/* Filter chip floats over the top of the centered card area — it
   doesn't displace the card. Card stays at exact viewport center
   regardless of chip presence. */
#page-flashcards.active > .fc-filters {
  position: absolute;
  top: var(--seed-space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* Activity header carries the back arrow to the Practice hub. The page
   centers its main content; force the header to full width + flex-start
   so the arrow lives at top-left, not centered above the card. */
#page-flashcards .activity-header {
  width: 100%;
  align-self: flex-start;
  margin-bottom: 0;
}
/* Match the back arrow's size + radius to the SEED Smart-mode chip
   (40px tall, fully rounded) so they read as a matched pair. */
#page-flashcards .activity-header .nav-arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--seed-radius-full);
  border: 1px solid var(--seed-stroke-neutral);
  background: var(--seed-bg-layer-default);
}

/* ============================================================
   SEED COMPONENT PRIMITIVES (scoped subset)
   Copied verbatim from assets/seed.css so flashcards can use the
   stock .btn-primary / .btn-secondary / .seed-* type utilities
   without linking the full seed.css globally.
   ============================================================ */

#page-flashcards .btn-primary,
#page-flashcards .btn-secondary,
#page-flashcards .btn-tertiary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--seed-space-2);
  height: 56px;
  padding: 0 var(--seed-space-5);
  font-family: var(--seed-font-sans);
  font-size: var(--seed-label-l-size);
  line-height: 1;
  font-weight: 700;
  border-radius: var(--seed-radius-4);
  border: none;
  cursor: pointer;
  transition: background var(--seed-duration-short) var(--seed-easing-standard),
              color var(--seed-duration-short) var(--seed-easing-standard),
              transform var(--seed-duration-short) var(--seed-easing-standard);
}
#page-flashcards .btn-primary {
  color: var(--seed-fg-brand-contrast);
  background: var(--seed-bg-brand-solid);
}
#page-flashcards .btn-primary:hover { background: var(--seed-bg-brand-solid-pressed); }
#page-flashcards .btn-secondary {
  color: var(--seed-fg-neutral-muted);
  background: var(--seed-bg-layer-basement);
}
#page-flashcards .btn-secondary:hover { background: var(--seed-stroke-neutral-muted); }
#page-flashcards .btn-primary:active,
#page-flashcards .btn-secondary:active { transform: scale(0.97); }
#page-flashcards .btn-size-medium { height: 48px; font-size: var(--seed-label-m-size); }
#page-flashcards .btn-size-small  { height: 40px; font-size: var(--seed-label-s-size); padding: 0 var(--seed-space-4); }

/* Typography utilities */
#page-flashcards .seed-display-1 { font-size: var(--seed-display-1-size); line-height: var(--seed-display-1-leading); font-weight: 700; letter-spacing: -0.02em; }
#page-flashcards .seed-display-2 { font-size: var(--seed-display-2-size); line-height: var(--seed-display-2-leading); font-weight: 700; letter-spacing: -0.02em; }
#page-flashcards .seed-title-1   { font-size: var(--seed-title-1-size);   line-height: var(--seed-title-1-leading);   font-weight: 700; letter-spacing: -0.02em; }
#page-flashcards .seed-title-2   { font-size: var(--seed-title-2-size);   line-height: var(--seed-title-2-leading);   font-weight: 700; letter-spacing: -0.01em; }
#page-flashcards .seed-title-3   { font-size: var(--seed-title-3-size);   line-height: var(--seed-title-3-leading);   font-weight: 700; }
#page-flashcards .seed-body-l    { font-size: var(--seed-body-l-size);    line-height: var(--seed-body-l-leading);    font-weight: 400; }
#page-flashcards .seed-body-m    { font-size: var(--seed-body-m-size);    line-height: var(--seed-body-m-leading);    font-weight: 400; }
#page-flashcards .seed-body-s    { font-size: var(--seed-body-s-size);    line-height: var(--seed-body-s-leading);    font-weight: 400; }
#page-flashcards .seed-caption   { font-size: var(--seed-caption-size);   line-height: var(--seed-caption-leading);   font-weight: 400; }
#page-flashcards .fg-muted   { color: var(--seed-fg-neutral-muted); }
#page-flashcards .fg-subtle  { color: var(--seed-fg-neutral-subtle); }
#page-flashcards .fg-positive { color: var(--seed-fg-positive); }
#page-flashcards .fg-brand   { color: var(--seed-fg-brand); }

/* ============================================================
   FILTER — single trigger + popover
   Replaces the old "5 pills in a row" pattern. Default state is a
   compact chip-like trigger labeled with the current selection
   (Smart mode by default). Clicking opens a popover with the full
   set of choices grouped by section. Outside-click and ESC close.
   ============================================================ */
#page-flashcards .fc-filters {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;       /* center the chip horizontally above the card */
}

#page-flashcards .fc-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--seed-space-2);
  height: 40px;        /* SEED Small — on-system + touch-target friendly */
  padding: 0 var(--seed-space-3) 0 var(--seed-space-4);
  border-radius: var(--seed-radius-full);
  border: 1px solid var(--seed-stroke-neutral);
  background: var(--seed-bg-layer-default);
  color: var(--seed-fg-neutral);
  font-family: var(--seed-font-sans);
  font-size: var(--seed-label-s-size);
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--seed-duration-short) var(--seed-easing-standard),
              border-color var(--seed-duration-short) var(--seed-easing-standard);
}
#page-flashcards .fc-filter-trigger:hover {
  background: var(--seed-bg-layer-basement);
  border-color: var(--seed-fg-neutral-muted);
}
#page-flashcards .fc-filter-trigger.open {
  background: var(--seed-bg-layer-basement);
  border-color: var(--seed-fg-neutral-muted);
}
#page-flashcards .fc-filter-trigger-count {
  color: var(--seed-fg-neutral-subtle);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
#page-flashcards .fc-filter-trigger-count:empty { display: none; }
#page-flashcards .fc-filter-chevron {
  color: var(--seed-fg-neutral-subtle);
  transition: transform var(--seed-duration-short) var(--seed-easing-standard);
  margin-left: var(--seed-space-1);
}
#page-flashcards .fc-filter-trigger.open .fc-filter-chevron {
  transform: rotate(180deg);
}

/* Popover panel — horizontally centered below the trigger now that the
   chip itself is centered above the card. Uses translateX(-50%) so the
   popover sits squarely under the chip regardless of chip width. */
#page-flashcards .fc-filter-popover {
  position: absolute;
  top: calc(100% + var(--seed-space-2));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  min-width: 280px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--seed-space-2);
  background: var(--seed-bg-layer-default);
  border: 1px solid var(--seed-stroke-neutral-muted);
  border-radius: var(--seed-radius-5);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);
  animation: fcFilterPopoverIn var(--seed-duration-short) var(--seed-easing-standard);
}
#page-flashcards .fc-filter-popover[hidden] { display: none; }
@keyframes fcFilterPopoverIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

#page-flashcards .fc-filter-section + .fc-filter-section {
  margin-top: var(--seed-space-1);
  padding-top: var(--seed-space-2);
  border-top: 1px solid var(--seed-stroke-neutral-muted);
}

/* Days drill-down header: back arrow + week title. Looks like a tiny
   nav bar above the option list. */
#page-flashcards .fc-filter-header {
  display: flex;
  align-items: center;
  gap: var(--seed-space-1);
  padding: var(--seed-space-1) var(--seed-space-2) var(--seed-space-2);
  border-bottom: 1px solid var(--seed-stroke-neutral-muted);
  margin-bottom: var(--seed-space-1);
}
#page-flashcards .fc-filter-back {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--seed-radius-full);
  background: transparent;
  color: var(--seed-fg-neutral);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--seed-duration-short) var(--seed-easing-standard);
}
#page-flashcards .fc-filter-back:hover { background: var(--seed-bg-layer-basement); }
#page-flashcards .fc-filter-back svg { width: 18px; height: 18px; }
#page-flashcards .fc-filter-header-title {
  font-size: var(--seed-label-m-size);   /* 15px */
  font-weight: 700;
  color: var(--seed-fg-neutral);
  letter-spacing: -0.01em;
}

/* Right-side chevron on options that drill into a sub-view (weeks). */
#page-flashcards .fc-filter-option-chevron {
  width: 16px;
  height: 16px;
  color: var(--seed-fg-neutral-subtle);
  flex-shrink: 0;
  margin-left: var(--seed-space-1);
}
/* Options with chevrons aren't "applied" in place — they navigate.
   Suppress the active checkmark so it doesn't sit next to the chevron. */
#page-flashcards .fc-filter-option.has-chevron.active::after { display: none; }
#page-flashcards .fc-filter-section-title {
  font-size: var(--seed-caption-size);
  line-height: var(--seed-caption-leading);
  color: var(--seed-fg-neutral-subtle);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--seed-space-2) var(--seed-space-3);
}

#page-flashcards .fc-filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--seed-space-3);
  border: none;
  background: transparent;
  border-radius: var(--seed-radius-3);
  font-family: var(--seed-font-sans);
  cursor: pointer;
  text-align: left;
  transition: background var(--seed-duration-short) var(--seed-easing-standard);
}
#page-flashcards .fc-filter-option:hover {
  background: var(--seed-bg-layer-basement);
}
#page-flashcards .fc-filter-option.active {
  background: var(--seed-bg-layer-basement);
}
#page-flashcards .fc-filter-option-label {
  font-size: var(--seed-label-m-size);
  line-height: 1.2;
  font-weight: 600;
  color: var(--seed-fg-neutral);
}
#page-flashcards .fc-filter-option.active .fc-filter-option-label {
  color: var(--seed-fg-brand);
}
#page-flashcards .fc-filter-option-meta {
  font-size: var(--seed-caption-size);
  line-height: 1;
  color: var(--seed-fg-neutral-subtle);
  font-weight: 400;
}
/* Checkmark indicator on the active row */
#page-flashcards .fc-filter-option.active::after {
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  margin-left: var(--seed-space-2);
  background: var(--seed-fg-brand);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px no-repeat;
  flex-shrink: 0;
}

/* ============================================================
   CARD AREA
   ============================================================ */
#page-flashcards .fc-card-area {
  /* Cluster (progress + card + below-card) centers as a unit. Justify-
     content: center distributes empty space evenly above and below the
     cluster — so the BLOCK is centered, not the card specifically. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  gap: var(--seed-space-4);
}
#page-flashcards .fc-below-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--seed-space-3);
  width: 100%;
}

/* ============================================================
   PROGRESS — "big-number-as-identity"
   The current card number (1 in "1 / 2") is the hero; the rest
   reads as supporting info.
   ============================================================ */
#page-flashcards .fc-progress-wrap {
  margin: 0 auto;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--seed-space-3);
}
#page-flashcards .fc-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
/* "1 / 43" reads as a single unit — same size for both numerator and
   denominator. SEED title-4 (18/26/600) gives status-line weight without
   the old big-number hero feel. */
#page-flashcards .fc-progress-info .fraction {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--seed-fg-neutral);
  font-variant-numeric: tabular-nums;
}
#page-flashcards .fc-progress-info .fraction .current { font-size: inherit; font-weight: inherit; }
#page-flashcards .fc-progress-info .fraction .total   { font-size: inherit; font-weight: inherit; color: var(--seed-fg-neutral-subtle); }
#page-flashcards .fc-progress-info .known {
  font-size: var(--seed-body-s-size);
  color: var(--seed-fg-positive);
  font-weight: 600;
}
#page-flashcards .fc-progress-bar {
  height: 4px;
  background: var(--seed-bg-layer-basement);
  border-radius: var(--seed-radius-full);
  overflow: hidden;
  position: relative;
}
#page-flashcards .fc-progress-bar .track {
  position: absolute;
  height: 100%;
  border-radius: var(--seed-radius-full);
  transition: width 0.4s var(--seed-easing-standard);
}
#page-flashcards .fc-progress-bar .track.pos   { background: var(--seed-stroke-neutral); }
#page-flashcards .fc-progress-bar .track.known { background: var(--seed-fg-positive); }

/* ============================================================
   FLIP CARD
   ============================================================ */
#page-flashcards .fc-card-container {
  perspective: 1200px;
  position: relative;     /* anchors the absolutely-positioned audio button */
  width: 100%;
  max-width: 480px;
  height: 340px;
  margin: 0 auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.3s var(--seed-easing-standard), opacity 0.3s var(--seed-easing-standard);
  touch-action: pan-y;
}
#page-flashcards .fc-card-container.dragging   { transition: none; }
#page-flashcards .fc-card-container.exit-right { transform: translateX(120%) rotate(20deg);  opacity: 0; }
#page-flashcards .fc-card-container.exit-left  { transform: translateX(-120%) rotate(-20deg); opacity: 0; }

#page-flashcards .fc-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#page-flashcards .fc-card-inner.flipped { transform: rotateY(180deg); }

#page-flashcards .fc-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--seed-radius-6);   /* SEED's largest card radius (20px) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--seed-space-10);          /* 40px — more breathing room */
  overflow: hidden;
}
/* SEED card faces — 1px hairline stroke lives on each face so the border
   flips with the card (border is part of the rotating element). Shadows
   live on the .fc-card-face boxes too: small, so 3D-context clipping is
   not noticeable. */
#page-flashcards .fc-card-front {
  background: var(--seed-bg-layer-default);
  border: 1px solid var(--seed-stroke-neutral);
  box-shadow: var(--seed-shadow-small);
}
#page-flashcards .fc-card-back {
  transform: rotateY(180deg);
  background: var(--seed-bg-layer-basement);
  border: 1px solid var(--seed-stroke-neutral);
  box-shadow: var(--seed-shadow-small);
}

/* Day chip + type label (use caption + label-s) */
#page-flashcards .fc-card-day {
  position: absolute;
  top: var(--seed-space-4);
  left: var(--seed-space-4);
  font-size: var(--seed-caption-size);
  line-height: 1;
  color: var(--seed-fg-neutral-subtle);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--seed-bg-layer-basement);
  padding: var(--seed-space-1) var(--seed-space-2);
  border-radius: var(--seed-radius-2);
}
#page-flashcards .fc-card-back .fc-card-day {
  background: var(--seed-bg-layer-default);
}
#page-flashcards .fc-card-type {
  position: absolute;
  top: var(--seed-space-4);
  right: var(--seed-space-4);
  font-size: var(--seed-caption-size);
  line-height: 1;
  color: var(--seed-fg-neutral-subtlest);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Hero text — bigger than SEED's biggest token; extends the scale
   for the flashcard-specific "readable from across a room" use case. */
#page-flashcards .fc-front-text {
  font-size: 64px;
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
  color: var(--seed-fg-neutral);
  letter-spacing: -0.03em;
}
#page-flashcards .fc-front-text.sm     { font-size: 48px; }
#page-flashcards .fc-front-text.xs     { font-size: var(--seed-display-1-size); line-height: var(--seed-display-1-leading); }
#page-flashcards .fc-front-text.hangul { font-size: 120px; line-height: 1.05; font-weight: 700; letter-spacing: -0.04em; }

#page-flashcards .fc-back-prompt {
  font-size: var(--seed-title-1-size);
  line-height: var(--seed-title-1-leading);
  font-weight: 700;
  text-align: center;
  color: var(--seed-fg-neutral);
  padding: 0 var(--seed-space-6);
  letter-spacing: -0.02em;
}

#page-flashcards .fc-front-roman {
  font-size: var(--seed-title-2-size);
  line-height: var(--seed-title-2-leading);
  color: var(--seed-fg-neutral-muted);
  margin-top: var(--seed-space-3);
  font-weight: 400;
}

#page-flashcards .fc-tap-hint {
  position: absolute;
  bottom: var(--seed-space-4);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--seed-caption-size);
  line-height: 1;
  color: var(--seed-fg-neutral-subtlest);
  font-weight: 400;
}

#page-flashcards .fc-swipe-label {
  position: absolute;
  top: var(--seed-space-4);
  padding: var(--seed-space-1) var(--seed-space-3);
  border-radius: var(--seed-radius-3);
  font-size: var(--seed-label-s-size);
  line-height: 1;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--seed-duration-short), transform var(--seed-duration-short);
  pointer-events: none;
  letter-spacing: 0.02em;
}
#page-flashcards .fc-swipe-label.know     { right: var(--seed-space-4); background: var(--seed-fg-positive); }
#page-flashcards .fc-swipe-label.dontknow { left: var(--seed-space-4);  background: var(--seed-fg-critical); }
#page-flashcards .fc-swipe-label.visible  { opacity: 1; transform: scale(1); }

#page-flashcards .fc-back-sub {
  font-size: var(--seed-body-m-size);
  line-height: var(--seed-body-m-leading);
  color: var(--seed-fg-neutral-subtle);
  margin-bottom: var(--seed-space-3);
  font-weight: 400;
}
#page-flashcards .fc-back-text {
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  color: var(--seed-fg-neutral);
  letter-spacing: -0.02em;
}
#page-flashcards .fc-back-text.sm { font-size: var(--seed-display-2-size); line-height: var(--seed-display-2-leading); }
#page-flashcards .fc-back-hint {
  margin-top: var(--seed-space-4);
  font-size: var(--seed-title-3-size);
  line-height: var(--seed-title-3-leading);
  color: var(--seed-fg-neutral-muted);
  background: var(--seed-bg-layer-default);
  padding: var(--seed-space-2) var(--seed-space-4);
  border-radius: var(--seed-radius-3);
  font-weight: 400;
}
#page-flashcards .fc-swipe-hint {
  position: absolute;
  bottom: var(--seed-space-4);
  font-size: var(--seed-caption-size);
  line-height: 1;
  color: var(--seed-fg-neutral-subtlest);
  display: flex;
  gap: var(--seed-space-6);
  font-weight: 400;
}

/* ============================================================
   CONTROLS — Toss "one primary action" layout
   "Got it" is the dominant CTA (wide, brand-blue). "Again" is
   secondary. Audio sits on the card itself now (.fc-card-audio).
   ============================================================ */
#page-flashcards .fc-controls {
  display: flex;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
#page-flashcards .fc-controls-row {
  display: flex;
  gap: var(--seed-space-3);
  width: 100%;
}
#page-flashcards .fc-ctrl-again,
#page-flashcards .fc-ctrl-got {
  flex: 1;
  height: 56px;
  border-radius: var(--seed-radius-4);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--seed-space-2);
  font-family: var(--seed-font-sans);
  font-size: var(--seed-label-l-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--seed-duration-short) var(--seed-easing-standard),
              transform var(--seed-duration-short) var(--seed-easing-standard);
}
#page-flashcards .fc-ctrl-again {
  flex: 0 0 auto;
  min-width: 120px;
  background: var(--seed-bg-layer-basement);
  color: var(--seed-fg-neutral-muted);
}
#page-flashcards .fc-ctrl-again:hover { background: var(--seed-stroke-neutral-muted); }
#page-flashcards .fc-ctrl-got {
  background: var(--seed-bg-brand-solid);
  color: var(--seed-fg-brand-contrast);
}
#page-flashcards .fc-ctrl-got:hover { background: var(--seed-bg-brand-solid-pressed); }
#page-flashcards .fc-ctrl-again:active,
#page-flashcards .fc-ctrl-got:active { transform: scale(0.98); }

/* Audio: anchored to the bottom-right of the card itself. Sits OUTSIDE
   the 3D-flipping inner so it doesn't flip with the card — always visible.
   Sized at SEED Medium (48px) — on-system AND satisfies touch-target
   minimums (Apple HIG 44pt, Material 48dp). */
#page-flashcards .fc-card-audio {
  position: absolute;
  right: var(--seed-space-4);
  bottom: var(--seed-space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--seed-radius-full);
  border: 1px solid var(--seed-stroke-neutral);
  background: var(--seed-bg-layer-default);
  color: var(--seed-fg-neutral-muted);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background var(--seed-duration-short) var(--seed-easing-standard),
              color var(--seed-duration-short) var(--seed-easing-standard),
              transform var(--seed-duration-short) var(--seed-easing-standard);
}
#page-flashcards .fc-card-audio:hover:not(:disabled) {
  background: var(--seed-bg-layer-basement);
  color: var(--seed-fg-neutral);
  border-color: var(--seed-fg-neutral-muted);
}
#page-flashcards .fc-card-audio:active:not(:disabled) { transform: scale(0.92); }
#page-flashcards .fc-card-audio:disabled { opacity: 0.35; cursor: not-allowed; }
#page-flashcards .fc-card-audio.playing {
  color: var(--seed-fg-brand);
  border-color: var(--seed-fg-brand);
}
#page-flashcards .fc-card-audio.playing svg {
  animation: fcAudioPulse 1.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes fcAudioPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

#page-flashcards .fc-key-hint {
  text-align: center;
  font-size: var(--seed-caption-size);
  line-height: var(--seed-caption-leading);
  color: var(--seed-fg-neutral-subtlest);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ============================================================
   RESULT SCREEN — Toss "emotional moment"
   Warm sentence is the hero. Stats are subordinate, single line.
   One primary CTA. Optional tertiary text link below.
   ============================================================ */
#page-flashcards .fc-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  gap: var(--seed-space-4);
  text-align: center;
  padding: var(--seed-space-6);
  max-width: 420px;
  margin: 0 auto;
}
#page-flashcards .fc-result .emoji   { font-size: 56px; line-height: 1; margin-bottom: var(--seed-space-2); }
#page-flashcards .fc-result .headline {
  font-size: var(--seed-title-1-size);
  line-height: var(--seed-title-1-leading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--seed-fg-neutral);
}
#page-flashcards .fc-result .meta {
  font-size: var(--seed-body-s-size);
  line-height: var(--seed-body-s-leading);
  color: var(--seed-fg-neutral-subtle);
  font-weight: 400;
}
#page-flashcards .fc-result .btns {
  display: flex;
  flex-direction: column;
  gap: var(--seed-space-3);
  margin-top: var(--seed-space-5);
  width: 100%;
  max-width: 320px;
  align-items: stretch;
}
#page-flashcards .fc-result .btns .btn-primary { width: 100%; }
#page-flashcards .fc-result-tertiary {
  background: none;
  border: none;
  color: var(--seed-fg-neutral-subtle);
  font-family: var(--seed-font-sans);
  font-size: var(--seed-label-m-size);
  font-weight: 600;
  cursor: pointer;
  padding: var(--seed-space-3);
  transition: color var(--seed-duration-short) var(--seed-easing-standard);
}
#page-flashcards .fc-result-tertiary:hover { color: var(--seed-fg-neutral); }

/* Skeleton loader — flashcards-local extension of SEED. SEED ships only
   .seed-spinner; a card-shaped skeleton is bespoke to this component and
   intentionally NOT promoted into seed.css. */
#page-flashcards .fc-skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--seed-bg-layer-basement) 0%,
    var(--seed-stroke-neutral-muted) 50%,
    var(--seed-bg-layer-basement) 100%
  );
  background-size: 200% 100%;
  animation: fcSkeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes fcSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
#page-flashcards .fc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 280px;
  color: var(--seed-fg-neutral-subtle);
  gap: var(--seed-space-3);
}
#page-flashcards .fc-empty .icon { font-size: 36px; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 900px) {
  #page-flashcards.active {
    /* Bleed past main-content's 16/14 padding and the bottom-nav 52px
       margin so the flashcards page fills the entire mobile viewport
       (above the bottom nav and safe-area inset). min-height: 0 resets
       the desktop rule so the explicit height below takes effect. */
    min-height: 0;
    margin: -16px -14px calc(-52px - env(safe-area-inset-bottom, 0px));
    width: calc(100% + 28px);
    height: calc(100dvh - 52px - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    gap: var(--seed-space-3);
    padding: var(--seed-space-3) var(--seed-space-4);
    max-width: none;
  }
  #page-flashcards .fc-card-area    { min-height: 0; flex: 1; gap: var(--seed-space-4); }
  #page-flashcards .fc-card-container { height: 48dvh; max-height: 340px; }
  #page-flashcards .fc-progress-wrap  { margin-bottom: 0; }
  #page-flashcards .fc-controls       { gap: var(--seed-space-3); }
  #page-flashcards .fc-ctrl-btn       { width: 56px; height: 56px; font-size: 22px; }
  #page-flashcards .fc-key-hint       { display: none; }
  #page-flashcards .fc-front-text         { font-size: 48px; }
  #page-flashcards .fc-front-text.sm      { font-size: var(--seed-display-1-size); line-height: var(--seed-display-1-leading); }
  #page-flashcards .fc-front-text.xs      { font-size: var(--seed-display-2-size); line-height: var(--seed-display-2-leading); }
  #page-flashcards .fc-front-text.hangul  { font-size: 96px; }
  #page-flashcards .fc-back-prompt        { font-size: var(--seed-title-2-size); line-height: var(--seed-title-2-leading); }
  #page-flashcards .fc-back-text          { font-size: var(--seed-display-1-size); line-height: var(--seed-display-1-leading); }
  #page-flashcards .fc-back-text.sm       { font-size: var(--seed-title-1-size);   line-height: var(--seed-title-1-leading); }
  #page-flashcards .fc-result .headline   { font-size: var(--seed-title-2-size); line-height: var(--seed-title-2-leading); }
  #page-flashcards #fc-filters            { margin-bottom: var(--seed-space-3); }
  #page-flashcards .fc-filter-trigger     { font-size: 12px; }  /* height stays 40px from base for touch */
  #page-flashcards .fc-filter-popover     { min-width: 260px; }
}