/**
 * ConceptRecall UI — premium flashcard detail page.
 *
 * Inspired by modern learning products: focused canvas, strong hierarchy,
 * clear action, compact metadata, and swipeable next ideas.
 */

.cr-card,
.cr-related {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* =========================
   Main flashcard canvas
   ========================= */
.cr-card {
  --cr-card-min-h: clamp(430px, 36vw, 520px);
  margin: clamp(0.25rem, 0.9vw, 0.75rem) 0 clamp(1.45rem, 2.6vw, 2.35rem);
  perspective: 1600px;
  outline: none;
}

.cr-card:focus-visible {
  outline: 2px solid var(--cr-accent, #003f34);
  outline-offset: 4px;
  border-radius: 30px;
}

.cr-card__inner {
  position: relative;
  width: 100%;
  min-height: var(--cr-card-min-h);
  transition: transform 0.64s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.cr-card.is-flipped .cr-card__inner {
  transform: rotateY(180deg);
}

.cr-card__face {
  position: absolute;
  inset: 0;
  min-height: var(--cr-card-min-h);
  padding: clamp(1.35rem, 3.2vw, 3.15rem);
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 63, 52, 0.065), transparent 34%),
    radial-gradient(circle at 100% 8%, rgba(228, 243, 240, 0.42), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.985));
  border: 1px solid color-mix(in srgb, var(--cr-border, #d9e5e2) 90%, transparent);
  border-radius: 30px;
  box-shadow:
    0 1px 2px rgba(24, 21, 18, 0.03),
    0 18px 60px rgba(24, 21, 18, 0.085);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.cr-card__back {
  transform: rotateY(180deg);
}

.cr-card__face-body {
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* =========================
   Front side
   ========================= */
.cr-card__front-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(1.5rem, 4vw, 4.25rem);
  align-items: center;
}

.cr-card__front-main {
  min-width: 0;
}

.cr-card__kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
}

.cr-card__kicker,
.cr-card__category,
.cr-card__back-eyebrow,
.cr-related__eyebrow,
.cr-card__panel-topline,
.cr-card__panel-label {
  font-family: var(--cr-font-sans, sans-serif);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.155em;
  text-transform: uppercase;
}

.cr-card__kicker,
.cr-card__back-eyebrow,
.cr-related__eyebrow {
  color: var(--cr-warm, #c8633f);
}

.cr-card__category {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.25rem 0.65rem;
  color: var(--cr-accent, #003f34);
  background: var(--cr-accent-soft, #e4f3f0);
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.cr-card__category:hover {
  color: #fff;
  background: var(--cr-accent, #003f34);
}

.cr-card__title {
  max-width: 13.5ch;
  margin: 0 0 1rem;
  font-family: var(--cr-font-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(3.15rem, 5.25vw, 5.2rem);
  font-weight: 670;
  line-height: 0.94;
  letter-spacing: -0.062em;
  color: var(--cr-text, #211f1b);
  text-wrap: balance;
}

.cr-card__teaser {
  max-width: 60ch;
  margin: 0 0 1.35rem;
  font-size: clamp(1rem, 1.05vw, 1.16rem);
  line-height: 1.6;
  color: var(--cr-text-muted, #5d5953);
}

.cr-card__meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  max-width: 760px;
}

.cr-card__meta-pill {
  display: grid;
  gap: 0.28rem;
  min-width: 124px;
  padding: 0.72rem 0.86rem;
  background: color-mix(in srgb, var(--cr-bg-sunken, #f3efe7) 74%, #fff);
  border: 1px solid var(--cr-border, #d9e5e2);
  border-radius: 16px;
}

.cr-card__meta-pill--wide {
  min-width: min(100%, 340px);
}

.cr-card__meta-pill span:first-child {
  font-family: var(--cr-font-sans, sans-serif);
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cr-text-faint, #8b8378);
}

.cr-card__meta-pill strong,
.cr-card__meta-pill .field,
.cr-card__meta-pill .field__item {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 720;
  color: var(--cr-text, #211f1b);
}

.cr-card__meta-pill .field__label {
  display: none;
}

.cr-card__topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.cr-tag-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.22rem 0.68rem;
  font-size: 0.76rem;
  font-weight: 760;
  color: var(--cr-accent, #003f34);
  background: var(--cr-accent-soft, #e4f3f0);
  border-radius: 999px;
  text-decoration: none;
}

.cr-tag-pill:hover {
  color: #fff;
  background: var(--cr-accent, #003f34);
}

.cr-card__study-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  min-width: 0;
  min-height: 300px;
  padding: clamp(1.15rem, 2.2vw, 1.65rem);
  background:
    linear-gradient(180deg, rgba(243, 239, 231, 0.82), rgba(255, 255, 255, 0.84));
  border: 1px solid var(--cr-border, #d9e5e2);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cr-card__panel-topline,
.cr-card__panel-label {
  color: var(--cr-text-faint, #8b8378);
}

.cr-card__panel-title {
  max-width: 12ch;
  margin: 0;
  font-family: var(--cr-font-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.7rem, 2vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--cr-text, #211f1b);
}

.cr-card__panel-copy {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.58;
  color: var(--cr-text-muted, #5d5953);
}

.cr-card__primary-flip,
.cr-card__flip-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: fit-content;
  min-height: 46px;
  padding: 0.78rem 1.18rem;
  font-family: var(--cr-font-sans, sans-serif);
  font-size: 0.92rem;
  font-weight: 780;
  color: #fff;
  background: var(--cr-accent, #003f34);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(45, 125, 110, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.cr-card__primary-flip:hover,
.cr-card__flip-back:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--cr-accent, #003f34) 88%, black);
  box-shadow: 0 16px 34px rgba(45, 125, 110, 0.23);
}

.cr-card__micro-grid {
  display: grid;
  gap: 0.48rem;
  margin-top: 0.35rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--cr-border, #d9e5e2);
}

.cr-card__micro-grid span {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.82rem;
  font-weight: 690;
  color: var(--cr-text-muted, #5d5953);
}

.cr-card__micro-grid span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 0.38rem;
  height: 0.38rem;
  background: var(--cr-accent, #003f34);
  border-radius: 999px;
}

/* =========================
   Back side
   ========================= */
.cr-card__back-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(1.4rem, 3.6vw, 3.2rem);
  align-items: start;
  height: 100%;
  overflow: hidden;
}

.cr-card__lesson {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 0.45rem;
  scrollbar-width: thin;
}

.cr-card__lesson-title {
  margin: 0 0 0.9rem;
  font-family: var(--cr-font-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.9rem, 2.5vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--cr-text, #211f1b);
}

.cr-card__explanation {
  max-width: 78ch;
  font-family: var(--cr-font-bangla, 'Hind Siliguri', 'Noto Sans Bengali', sans-serif);
  font-size: clamp(1.08rem, 1.15vw, 1.2rem);
  line-height: 1.95;
  color: var(--cr-text, #211f1b);
}

.cr-card__explanation .field,
.cr-card__explanation .field__item {
  margin: 0;
}

.cr-card__back-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.cr-card__example,
.cr-card__source-box {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.05rem;
  background: color-mix(in srgb, var(--cr-bg-sunken, #f3efe7) 83%, #fff);
  border: 1px solid var(--cr-border, #d9e5e2);
  border-left: 4px solid var(--cr-accent, #003f34);
  border-radius: 16px;
  font-family: var(--cr-font-bangla, 'Hind Siliguri', 'Noto Sans Bengali', sans-serif);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--cr-text, #211f1b);
}

.cr-card__source-box {
  border-left-color: var(--cr-warm, #c8633f);
}

.cr-card__example .field,
.cr-card__source-box .field,
.cr-card__example .field__item,
.cr-card__source-box .field__item {
  margin: 0;
}

.cr-card__flip-back {
  margin-top: 0.25rem;
}

/* Reduced motion: no rotation, just swap faces. */
@media (prefers-reduced-motion: reduce) {
  .cr-card__inner {
    transition: none;
  }
  .cr-card.is-flipped .cr-card__inner {
    transform: none;
  }
  .cr-card__back {
    transform: none;
  }
  .cr-card:not(.is-flipped) .cr-card__back {
    display: none;
  }
  .cr-card.is-flipped .cr-card__front {
    display: none;
  }
  .cr-card.is-flipped .cr-card__inner {
    min-height: 0;
  }
}

/* =========================
   Related concepts rail
   ========================= */
.cr-related {
  margin: clamp(1.2rem, 2.5vw, 2.25rem) 0 clamp(3rem, 6vw, 5rem);
}

.cr-related__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cr-related__heading {
  margin: 0;
  font-family: var(--cr-font-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.85rem, 2.8vw, 2.55rem);
  font-weight: 660;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--cr-text, #211f1b);
}

.cr-related__intro {
  max-width: 52ch;
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cr-text-muted, #5d5953);
}

.cr-related__controls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.cr-related__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--cr-border, #d9e5e2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cr-accent, #003f34);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(24, 21, 18, 0.08);
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.cr-related__arrow:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #fff;
}

.cr-related__arrow:disabled {
  opacity: 0.34;
  cursor: default;
}

.cr-related__viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.cr-related__track {
  --cr-related-columns: 4;
  --cr-related-gap: 1rem;
  display: flex;
  gap: var(--cr-related-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.12rem 0.12rem 0.95rem;
}

.cr-related__track::-webkit-scrollbar {
  display: none;
}

.cr-related-card {
  flex: 0 0 calc((100% - (var(--cr-related-gap) * (var(--cr-related-columns) - 1))) / var(--cr-related-columns));
  min-width: 0;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.15rem 1.15rem 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.99));
  border: 1px solid var(--cr-border, #d9e5e2);
  border-radius: 18px;
  color: var(--cr-text, #211f1b);
  text-decoration: none;
  scroll-snap-align: start;
  box-shadow: 0 2px 10px rgba(24, 21, 18, 0.05), 0 12px 30px rgba(24, 21, 18, 0.045);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.cr-related-card:hover,
.cr-related-card:focus-visible {
  color: var(--cr-text, #211f1b);
  border-color: color-mix(in srgb, var(--cr-accent, #003f34) 35%, var(--cr-border, #d9e5e2));
  box-shadow: 0 8px 24px rgba(24, 21, 18, 0.08), 0 18px 45px rgba(24, 21, 18, 0.07);
  transform: translateY(-2px);
  outline: none;
}

.cr-related-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--cr-font-serif, 'Source Serif 4', Georgia, serif);
  font-size: 1.2rem;
  font-weight: 660;
  line-height: 1.15;
  letter-spacing: -0.024em;
}

.cr-related-card__teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.94rem;
  line-height: 1.48;
  color: var(--cr-text-muted, #5d5953);
}

.cr-related-card__cue {
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 760;
  color: var(--cr-accent, #003f34);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.cr-related-card:hover .cr-related-card__cue,
.cr-related-card:focus-visible .cr-related-card__cue {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1100px) {
  .cr-card {
    --cr-card-min-h: clamp(560px, 70vw, 720px);
  }

  .cr-card__front-grid,
  .cr-card__back-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cr-card__study-panel {
    min-height: 0;
  }

  .cr-related__track {
    --cr-related-columns: 3;
  }
}

@media (max-width: 760px) {
  .cr-card {
    --cr-card-min-h: 650px;
    margin: 0.6rem 0 1.35rem;
  }

  .cr-card__face {
    padding: 1.15rem;
    border-radius: 22px;
  }

  .cr-card__title {
    max-width: 12ch;
    font-size: clamp(2.55rem, 13vw, 3.65rem);
  }

  .cr-card__teaser {
    font-size: 0.98rem;
  }

  .cr-card__meta-strip {
    display: grid;
  }

  .cr-card__study-panel {
    padding: 1rem;
    border-radius: 18px;
  }

  .cr-card__back-layout {
    height: 100%;
    overflow-y: auto;
    padding-right: 0.1rem;
  }

  .cr-card__lesson {
    height: auto;
    overflow: visible;
  }

  .cr-related__header {
    align-items: center;
  }

  .cr-related__intro {
    display: none;
  }

  .cr-related__track {
    --cr-related-columns: 1;
    --cr-related-gap: 0.85rem;
  }

  .cr-related-card {
    flex-basis: min(86vw, 420px);
  }
}

/* =====================================================================
   v12 premium learning-card polish
   ---------------------------------------------------------------------
   The earlier right-side back panel felt disconnected and created too much
   empty space. v12 makes the front side a compact study decision card and
   the back side a single content-first lesson with support cards underneath.
   ===================================================================== */

.cr-card {
  --cr-card-min-h: clamp(390px, 31vw, 470px);
  margin-top: clamp(0.55rem, 1.1vw, 1rem);
  margin-bottom: clamp(1.35rem, 2.4vw, 2.25rem);
}

.cr-card__face {
  padding: clamp(1.45rem, 3vw, 2.85rem);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 125, 110, 0.085), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(228, 243, 240, 0.42), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.992));
}

.cr-card__front-grid {
  grid-template-columns: minmax(0, 1fr) minmax(290px, 330px);
  gap: clamp(1.6rem, 4vw, 4.8rem);
}

.cr-card__title {
  max-width: 12.8ch;
  margin-bottom: 0.9rem;
  font-size: clamp(3rem, 4.85vw, 4.95rem);
}

.cr-card__teaser {
  max-width: 58ch;
  margin-bottom: 1.15rem;
}

.cr-card__meta-strip {
  gap: 0.55rem;
}

.cr-card__meta-pill {
  background: rgba(243, 239, 231, 0.72);
}

.cr-card__study-panel {
  min-height: 255px;
  align-self: center;
  background:
    linear-gradient(180deg, rgba(246, 243, 236, 0.96), rgba(255, 255, 255, 0.88));
  border-color: color-mix(in srgb, var(--cr-border, #d9e5e2) 88%, var(--cr-accent, #003f34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 16px 34px rgba(24, 21, 18, 0.055);
}

.cr-card__panel-title {
  max-width: 11ch;
}

/* Back side: content first, support below. */
.cr-card__back-layout {
  display: block;
  height: 100%;
  overflow: hidden;
}

.cr-card__lesson {
  height: 100%;
  max-width: none;
  overflow-y: auto;
  padding-right: 0.45rem;
}

.cr-card__lesson-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.05rem;
}

.cr-card__lesson-title {
  max-width: 18ch;
  margin-bottom: 0;
  font-size: clamp(2rem, 2.65vw, 2.9rem);
}

.cr-card__explanation {
  max-width: 88ch;
  margin-top: 0.25rem;
  padding: 0.15rem 0 0.35rem;
  font-size: clamp(1.08rem, 1.08vw, 1.18rem);
  line-height: 1.92;
}

.cr-card__back-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  max-width: 900px;
  margin-top: 1.1rem;
}

.cr-card__example,
.cr-card__source-box {
  min-height: 110px;
  padding: 1rem 1.05rem;
  background:
    linear-gradient(180deg, rgba(247, 244, 238, 0.92), rgba(255, 255, 255, 0.84));
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.cr-card__panel-label {
  margin-bottom: 0.1rem;
  color: var(--cr-text-faint, #8b8378);
}

.cr-card__flip-back--desktop {
  flex: 0 0 auto;
  margin-top: 0;
}

.cr-card__flip-back--mobile {
  display: none;
  margin-top: 1rem;
}

/* Related cards: slightly calmer and more clickable. */
.cr-related {
  margin-top: clamp(1rem, 2vw, 1.75rem);
}

.cr-related__header {
  margin-bottom: 0.9rem;
}

.cr-related__intro {
  max-width: 44ch;
}

.cr-related-card {
  min-height: 132px;
  padding: 1.05rem 1.1rem 1rem;
  border-radius: 17px;
}

.cr-related-card__title {
  font-size: 1.14rem;
}

.cr-related-card__teaser {
  -webkit-line-clamp: 2;
}

@media (max-width: 1100px) {
  .cr-card {
    --cr-card-min-h: 600px;
  }

  .cr-card__front-grid {
    grid-template-columns: 1fr;
  }

  .cr-card__study-panel {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .cr-card {
    --cr-card-min-h: 620px;
  }

  .cr-card__face {
    padding: 1.15rem;
    border-radius: 22px;
  }

  .cr-card__lesson-head {
    display: block;
  }

  .cr-card__flip-back--desktop {
    display: none;
  }

  .cr-card__flip-back--mobile {
    display: inline-flex;
  }

  .cr-card__back-panel {
    grid-template-columns: 1fr;
  }

  .cr-card__example,
  .cr-card__source-box {
    min-height: 0;
  }
}

/* =====================================================================
   v13 requested simplification: cleaner metadata and content-first back.
   ---------------------------------------------------------------------
   - No micro benefit list on the front.
   - Front metadata reads as one line: Difficulty + Learning path.
   - Back side uses full-width explanation/example, with source as a quiet
     bottom line and the back button centered at the top of the card.
   ===================================================================== */

.cr-card__micro-grid {
  display: none !important;
}

.cr-card__meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.65rem;
  max-width: 100%;
  padding: 0.72rem 0.9rem;
  background: rgba(243, 239, 231, 0.72);
  border: 1px solid var(--cr-border, #d9e5e2);
  border-radius: 16px;
  overflow: hidden;
}

.cr-card__meta-inline {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--cr-text-muted, #5d5953);
}

.cr-card__meta-inline + .cr-card__meta-inline::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin-right: 0.65rem;
  background: var(--cr-accent, #003f34);
  border-radius: 999px;
  opacity: 0.65;
}

.cr-card__meta-inline strong {
  margin-right: 0.28rem;
  color: var(--cr-text, #211f1b);
  font-weight: 780;
}

.cr-card.is-flipped {
  --cr-card-min-h: clamp(500px, 39vw, 620px);
}

.cr-card__back .cr-card__face-body {
  position: relative;
}

.cr-card__back-actionbar {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cr-card__back-actionbar .cr-card__flip-back {
  pointer-events: auto;
}

.cr-card__back .cr-card__lesson {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: none;
  padding: clamp(2.8rem, 4vw, 3.65rem) 0 0;
  overflow-y: auto;
}

.cr-card__back .cr-card__lesson-head {
  display: block;
  margin: 0 0 0.8rem;
}

.cr-card__back .cr-card__lesson-title {
  max-width: none;
  margin: 0;
  font-size: clamp(1.85rem, 2.35vw, 2.55rem);
  letter-spacing: -0.035em;
}

.cr-card__back .cr-card__explanation {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: clamp(1.08rem, 1.12vw, 1.2rem);
  line-height: 1.92;
}

.cr-card__example--wide {
  width: 100%;
  min-height: 0;
  margin-top: clamp(1rem, 2vw, 1.35rem);
  padding: 1.05rem 1.15rem;
  border-left: 4px solid var(--cr-accent, #003f34);
}

.cr-card__source-line {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.42rem;
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--cr-font-sans, sans-serif);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--cr-text-muted, #5d5953);
}

.cr-card__source-line span {
  font-weight: 760;
  color: var(--cr-text-faint, #8b8378);
}

.cr-card__source-line strong {
  font-weight: 780;
  color: var(--cr-text, #211f1b);
}

.cr-card__source-line .field,
.cr-card__source-line .field__item {
  display: inline;
  margin: 0;
}

@media (max-width: 760px) {
  .cr-card__meta-strip {
    flex-wrap: wrap;
    padding: 0.72rem 0.82rem;
  }

  .cr-card__meta-inline {
    white-space: normal;
  }

  .cr-card__meta-inline + .cr-card__meta-inline::before {
    display: none;
  }

  .cr-card__back-actionbar {
    position: static;
    transform: none;
    margin-bottom: 0.8rem;
  }

  .cr-card__back .cr-card__lesson {
    padding-top: 0;
  }

  .cr-card__flip-back--desktop {
    display: inline-flex;
  }

  .cr-card__flip-back--mobile {
    display: none;
  }

  .cr-card__source-line {
    justify-content: flex-start;
    margin-top: 0.75rem;
  }
}


/* =====================================================================
   v14 final metadata polish + bookmark alignment
   ---------------------------------------------------------------------
   - Learning-path topics are clickable discovery links.
   - Metadata remains a single premium line and gracefully scrolls if long.
   - Bookmark button is positioned relative to the flashcard, not the page.
   ===================================================================== */

.cr-card {
  position: relative;
}

.cr-card > .cr-bookmark {
  position: absolute;
  top: clamp(1rem, 1.7vw, 1.35rem);
  right: clamp(1rem, 1.7vw, 1.35rem);
  z-index: 12;
  min-height: 38px;
  padding: 0.52rem 0.95rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid color-mix(in srgb, var(--cr-accent, #003f34) 24%, var(--cr-border, #d9e5e2));
  box-shadow: 0 8px 24px rgba(24, 21, 18, 0.08);
  backdrop-filter: blur(12px);
}

.cr-card > .cr-bookmark:hover {
  background: var(--cr-accent-soft, #e4f3f0);
  transform: translateY(-1px);
}

.cr-card__meta-strip {
  width: min(100%, 780px);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0.66rem 0.86rem;
  background:
    linear-gradient(180deg, rgba(247, 244, 238, 0.9), rgba(255, 255, 255, 0.78));
  border: 1px solid color-mix(in srgb, var(--cr-border, #d9e5e2) 88%, #fff);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 6px 18px rgba(24, 21, 18, 0.035);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cr-card__meta-strip::-webkit-scrollbar {
  display: none;
}

.cr-card__meta-inline {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--cr-font-sans, sans-serif);
  font-size: 0.91rem;
  line-height: 1.25;
  color: var(--cr-text-muted, #5d5953);
}

.cr-card__meta-inline strong {
  margin-right: 0.28rem;
  color: var(--cr-text, #211f1b);
  font-weight: 820;
}

.cr-card__meta-inline + .cr-card__meta-inline::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin: 0 0.72rem;
  background: var(--cr-accent, #003f34);
  border-radius: 999px;
  opacity: 0.62;
}

.cr-card__path-links {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  min-width: 0;
}

.cr-card__path-link {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.1rem 0.38rem;
  color: var(--cr-accent, #003f34);
  font-weight: 820;
  text-decoration: none;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.cr-card__path-link:hover,
.cr-card__path-link:focus-visible {
  color: #fff;
  background: var(--cr-accent, #003f34);
  transform: translateY(-1px);
  outline: none;
}

.cr-card__path-sep {
  color: var(--cr-text-faint, #8b8378);
  margin-right: 0.08rem;
}

.cr-card.is-flipped .cr-card__back-actionbar {
  top: clamp(1rem, 1.7vw, 1.35rem);
}

.cr-card.is-flipped .cr-card__flip-back--desktop {
  min-height: 38px;
  padding: 0.52rem 0.95rem;
}

@media (max-width: 760px) {
  .cr-card > .cr-bookmark {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    bottom: auto;
    padding: 0.5rem 0.78rem;
  }

  .cr-card__meta-strip {
    width: 100%;
    border-radius: 18px;
    padding: 0.68rem 0.78rem;
  }

  .cr-card__meta-inline {
    white-space: nowrap;
  }

  .cr-card__meta-inline + .cr-card__meta-inline::before {
    display: inline-block;
  }
}

/* =====================================================================
   v15 final alignment polish
   ---------------------------------------------------------------------
   - Aligns the bookmark button to the padded content grid edge rather
     than the card's outer border.
   - Gives the metadata strip the requested 15px radius while keeping the
     premium soft-pill treatment and clickable learning path links.
   ===================================================================== */

.cr-card {
  --cr-card-pad-x: clamp(1.45rem, 3vw, 2.85rem);
  --cr-card-pad-y: clamp(1.45rem, 3vw, 2.85rem);
}

.cr-card__face {
  padding: var(--cr-card-pad-y) var(--cr-card-pad-x);
}

.cr-card > .cr-bookmark {
  top: var(--cr-card-pad-y);
  right: var(--cr-card-pad-x);
}

.cr-card__meta-strip {
  border-radius: 15px;
}

@media (max-width: 760px) {
  .cr-card {
    --cr-card-pad-x: 1.15rem;
    --cr-card-pad-y: 1.15rem;
  }

  .cr-card > .cr-bookmark {
    top: var(--cr-card-pad-y);
    right: var(--cr-card-pad-x);
  }

  .cr-card__meta-strip {
    border-radius: 15px;
  }
}

/* =====================================================================
   v16 bookmark dock polish
   ---------------------------------------------------------------------
   - The Save button now belongs visually to the right study panel instead
     of floating in the empty corner above it.
   - The front grid starts from the same top line, so the card feels more
     intentional and aligned.
   ===================================================================== */

@media (min-width: 901px) {
  .cr-card__front-grid {
    align-items: start;
  }

  .cr-card__study-panel {
    position: relative;
    min-height: 284px;
    padding-top: clamp(3.8rem, 4.5vw, 4.75rem);
  }

  .cr-card:not(.is-flipped) > .cr-bookmark {
    top: calc(var(--cr-card-pad-y) + 1rem);
    right: calc(var(--cr-card-pad-x) + 1rem);
    border-radius: 999px;
  }

  .cr-card:not(.is-flipped) > .cr-bookmark::after {
    content: '';
    position: absolute;
    inset: -0.35rem;
    border-radius: 999px;
    pointer-events: none;
  }

  .cr-card.is-flipped > .cr-bookmark {
    top: var(--cr-card-pad-y);
    right: var(--cr-card-pad-x);
  }
}

@media (max-width: 900px) {
  .cr-card > .cr-bookmark {
    top: calc(var(--cr-card-pad-y) + 0.45rem);
    right: calc(var(--cr-card-pad-x) + 0.45rem);
  }
}

/* =====================================================================
   v17 bookmark corner alignment restore
   ---------------------------------------------------------------------
   - The Save button is NOT docked inside the right study-action card.
   - It floats at the main flashcard's top-right, aligned to the same
     right content edge as .cr-card__front-grid.
   - The study-action panel returns to natural center alignment, leaving a
     clean intentional gap between the save pill and the panel.
   ===================================================================== */

@media (min-width: 901px) {
  .cr-card__front-grid {
    align-items: center;
  }

  .cr-card__study-panel {
    min-height: 300px;
    padding-top: clamp(1.15rem, 2.2vw, 1.65rem);
  }

  .cr-card > .cr-bookmark,
  .cr-card:not(.is-flipped) > .cr-bookmark,
  .cr-card.is-flipped > .cr-bookmark {
    top: var(--cr-card-pad-y);
    right: var(--cr-card-pad-x);
    bottom: auto;
    z-index: 14;
    border-radius: 999px;
    transform: none;
  }

  .cr-card:not(.is-flipped) > .cr-bookmark::after {
    display: none;
  }
}

@media (max-width: 900px) {
  .cr-card > .cr-bookmark,
  .cr-card:not(.is-flipped) > .cr-bookmark,
  .cr-card.is-flipped > .cr-bookmark {
    top: var(--cr-card-pad-y);
    right: var(--cr-card-pad-x);
    bottom: auto;
    transform: none;
  }
}


/* =====================================================================
   v18 world-class final node polish
   ---------------------------------------------------------------------
   Goal: keep the current successful structure, but make the flashcard feel
   more intentional: tighter vertical rhythm, bookmark aligned to the card
   action edge, calmer metadata, and stronger clickable related cards.
   ===================================================================== */

.cr-card {
  --cr-card-min-h: clamp(365px, 29vw, 445px);
  --cr-card-pad-x: clamp(1.45rem, 2.8vw, 2.65rem);
  --cr-card-pad-y: clamp(1.35rem, 2.65vw, 2.45rem);
  margin-top: clamp(0.45rem, 1vw, 0.9rem);
  margin-bottom: clamp(1.15rem, 2vw, 1.8rem);
}

.cr-card__face {
  padding: var(--cr-card-pad-y) var(--cr-card-pad-x);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 125, 110, 0.072), transparent 33%),
    radial-gradient(circle at 100% 4%, rgba(200, 99, 63, 0.028), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.982), rgba(255, 255, 255, 0.995));
  box-shadow:
    0 1px 2px rgba(24, 21, 18, 0.035),
    0 18px 56px rgba(24, 21, 18, 0.072);
}

.cr-card__front-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 336px);
  gap: clamp(1.75rem, 4.2vw, 5.1rem);
  align-items: center;
}

.cr-card__front-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 268px;
}

.cr-card__kicker-row {
  margin-bottom: 0.8rem;
}

.cr-card__title {
  max-width: 12.2ch;
  margin-bottom: 0.78rem;
  font-size: clamp(3rem, 4.65vw, 4.75rem);
  line-height: 0.94;
}

.cr-card__teaser {
  margin-bottom: 1rem;
  color: color-mix(in srgb, var(--cr-text-muted, #5d5953) 92%, black);
}

.cr-card__meta-strip {
  width: min(100%, 755px);
  border-radius: 15px;
  padding: 0.62rem 0.84rem;
  background:
    linear-gradient(180deg, rgba(248, 246, 241, 0.96), rgba(255, 255, 255, 0.82));
  border: 1px solid color-mix(in srgb, var(--cr-border, #d9e5e2) 92%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 22px rgba(24, 21, 18, 0.03);
}

.cr-card__meta-inline {
  font-size: 0.9rem;
}

.cr-card__path-link {
  padding-inline: 0.32rem;
}

.cr-card__study-panel {
  position: relative;
  align-self: center;
  min-height: 258px;
  padding: clamp(1.25rem, 2vw, 1.55rem);
  border-radius: 23px;
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 125, 110, 0.052), transparent 34%),
    linear-gradient(180deg, rgba(247, 244, 238, 0.96), rgba(255, 255, 255, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 14px 34px rgba(24, 21, 18, 0.048);
}

.cr-card__panel-title {
  font-size: clamp(1.72rem, 1.92vw, 2rem);
}

.cr-card__panel-copy {
  max-width: 29ch;
}

.cr-card > .cr-bookmark,
.cr-card:not(.is-flipped) > .cr-bookmark,
.cr-card.is-flipped > .cr-bookmark {
  top: calc(var(--cr-card-pad-y) + 0.08rem);
  right: calc(var(--cr-card-pad-x) + 0.08rem);
  bottom: auto;
  transform: none;
  min-height: 38px;
  padding: 0.5rem 0.92rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border-color: color-mix(in srgb, var(--cr-accent, #003f34) 28%, var(--cr-border, #d9e5e2));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 10px 26px rgba(24, 21, 18, 0.075);
  backdrop-filter: blur(12px);
}

.cr-card > .cr-bookmark:hover {
  background: var(--cr-accent-soft, #e4f3f0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 14px 34px rgba(24, 21, 18, 0.1);
}

/* Back side: clean lesson canvas, no cramped support column. */
.cr-card.is-flipped {
  --cr-card-min-h: clamp(460px, 36vw, 580px);
}

.cr-card__back .cr-card__lesson {
  padding-top: clamp(2.7rem, 3.7vw, 3.45rem);
}

.cr-card__back .cr-card__lesson-title {
  margin-bottom: 0.75rem;
}

.cr-card__example--wide {
  max-width: none;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 8px 22px rgba(24, 21, 18, 0.035);
}

.cr-card__source-line {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid color-mix(in srgb, var(--cr-border, #d9e5e2) 72%, transparent);
}

.cr-related {
  margin-top: clamp(1rem, 1.8vw, 1.45rem);
  margin-bottom: clamp(2.6rem, 5vw, 4.4rem);
}

.cr-related__header {
  align-items: end;
}

.cr-related-card {
  min-height: 124px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.995));
  box-shadow:
    0 1px 2px rgba(24, 21, 18, 0.035),
    0 10px 28px rgba(24, 21, 18, 0.052);
}

.cr-related-card::after {
  content: '→';
  position: absolute;
  right: 1rem;
  bottom: 0.92rem;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--cr-accent, #003f34);
  background: var(--cr-accent-soft, #e4f3f0);
  border-radius: 999px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.cr-related-card:hover::after,
.cr-related-card:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.cr-related-card__cue {
  display: none;
}

@media (max-width: 1100px) {
  .cr-card {
    --cr-card-min-h: clamp(560px, 65vw, 700px);
  }

  .cr-card__front-main {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .cr-card {
    --cr-card-min-h: 610px;
    --cr-card-pad-x: 1.05rem;
    --cr-card-pad-y: 1.05rem;
  }

  .cr-card__face {
    border-radius: 22px;
  }

  .cr-card__title {
    max-width: 11.5ch;
  }

  .cr-card__study-panel {
    min-height: 0;
  }

  .cr-card > .cr-bookmark,
  .cr-card:not(.is-flipped) > .cr-bookmark,
  .cr-card.is-flipped > .cr-bookmark {
    top: 0.85rem;
    right: 0.85rem;
  }

  .cr-card__meta-strip {
    width: 100%;
    max-width: 100%;
    border-radius: 15px;
  }
}

/* =====================================================================
   v19 final node-page polish
   ---------------------------------------------------------------------
   This pass keeps the successful v18 structure but tightens the premium
   rhythm: less unused white space, clearer action alignment, calmer card
   shadows, and a stronger but still understated related-card affordance.
   ===================================================================== */

.cr-card {
  --cr-card-min-h: clamp(345px, 27.5vw, 425px);
  --cr-card-pad-x: clamp(1.4rem, 2.65vw, 2.55rem);
  --cr-card-pad-y: clamp(1.15rem, 2.35vw, 2.25rem);
  margin-top: clamp(0.35rem, 0.85vw, 0.75rem);
  margin-bottom: clamp(0.95rem, 1.7vw, 1.5rem);
}

.cr-card__face {
  border-radius: 27px;
  box-shadow:
    0 1px 2px rgba(24, 21, 18, 0.032),
    0 16px 48px rgba(24, 21, 18, 0.066);
}

.cr-card__front-grid {
  grid-template-columns: minmax(0, 1fr) minmax(292px, 324px);
  gap: clamp(1.65rem, 3.8vw, 4.65rem);
}

.cr-card__front-main {
  min-height: clamp(220px, 21vw, 252px);
}

.cr-card__title {
  max-width: 12.5ch;
  margin-bottom: 0.68rem;
  font-size: clamp(2.85rem, 4.45vw, 4.55rem);
}

.cr-card__teaser {
  margin-bottom: 0.92rem;
}

.cr-card__meta-strip {
  width: min(100%, 748px);
  min-height: 40px;
  border-radius: 15px;
  padding: 0.58rem 0.82rem;
  background:
    linear-gradient(180deg, rgba(249, 247, 243, 0.98), rgba(255, 255, 255, 0.88));
  border-color: color-mix(in srgb, var(--cr-border, #d9e5e2) 86%, #fff);
}

.cr-card__study-panel {
  min-height: clamp(224px, 20vw, 248px);
  padding: clamp(1.15rem, 1.8vw, 1.45rem);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 125, 110, 0.06), transparent 34%),
    linear-gradient(180deg, rgba(248, 245, 239, 0.98), rgba(255, 255, 255, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 12px 30px rgba(24, 21, 18, 0.044);
}

.cr-card__panel-title {
  font-size: clamp(1.62rem, 1.82vw, 1.92rem);
}

.cr-card__panel-copy {
  font-size: 0.93rem;
  line-height: 1.56;
}

.cr-card > .cr-bookmark,
.cr-card:not(.is-flipped) > .cr-bookmark,
.cr-card.is-flipped > .cr-bookmark {
  top: calc(var(--cr-card-pad-y) + 0.12rem);
  right: calc(var(--cr-card-pad-x) + 0.02rem);
  min-height: 37px;
  padding: 0.48rem 0.9rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 22px rgba(24, 21, 18, 0.07);
}

/* Back side: enough room for learning, but less unused bottom space. */
.cr-card.is-flipped {
  --cr-card-min-h: clamp(420px, 32vw, 520px);
}

.cr-card__back .cr-card__lesson {
  padding-top: clamp(2.35rem, 3.25vw, 3.05rem);
}

.cr-card__back .cr-card__lesson-title {
  font-size: clamp(1.8rem, 2.2vw, 2.42rem);
}

.cr-card__back .cr-card__explanation {
  line-height: 1.86;
}

.cr-card__example--wide {
  margin-top: clamp(0.85rem, 1.55vw, 1.15rem);
}

.cr-card__source-line {
  margin-top: 0.72rem;
}

.cr-related {
  margin-top: clamp(0.75rem, 1.45vw, 1.15rem);
}

.cr-related__header {
  margin-bottom: 0.76rem;
}

.cr-related__heading {
  letter-spacing: -0.044em;
}

.cr-related-card {
  min-height: 118px;
  padding: 1rem 1.05rem 0.96rem;
  border-radius: 17px;
}

.cr-related-card:hover,
.cr-related-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cr-accent, #003f34) 30%, var(--cr-border, #d9e5e2));
}

@media (max-width: 1100px) {
  .cr-card {
    --cr-card-min-h: clamp(520px, 62vw, 660px);
  }
}

@media (max-width: 760px) {
  .cr-card {
    --cr-card-min-h: 590px;
    --cr-card-pad-x: 1.05rem;
    --cr-card-pad-y: 1.05rem;
  }

  .cr-card.is-flipped {
    --cr-card-min-h: 600px;
  }

  .cr-card > .cr-bookmark,
  .cr-card:not(.is-flipped) > .cr-bookmark,
  .cr-card.is-flipped > .cr-bookmark {
    top: 0.82rem;
    right: 0.82rem;
  }
}

/* =====================================================================
   v20 final metadata + baseline alignment polish
   ---------------------------------------------------------------------
   User-requested final pass:
   - Make the metadata strip visually part of the card canvas: white/same
     background, border only, 15px radius, no beige fill or shadow.
   - Align the bottom edge of the metadata strip with the bottom edge of
     the study action panel on short front-card content.
   ===================================================================== */

.cr-card__front-grid {
  align-items: end;
}

.cr-card__front-main {
  justify-content: flex-end;
  min-height: clamp(224px, 20vw, 248px);
}

.cr-card__meta-strip {
  width: min(100%, 748px);
  min-height: 40px;
  border-radius: 15px;
  padding: 0.58rem 0.82rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid color-mix(in srgb, var(--cr-border, #d9e5e2) 96%, #fff);
  box-shadow: none;
}

.cr-card__meta-strip:hover,
.cr-card__meta-strip:focus-within {
  background: rgba(255, 255, 255, 0.9);
  border-color: color-mix(in srgb, var(--cr-accent, #003f34) 28%, var(--cr-border, #d9e5e2));
}

.cr-card__study-panel {
  align-self: end;
}

@media (max-width: 1100px) {
  .cr-card__front-grid {
    align-items: stretch;
  }

  .cr-card__front-main {
    min-height: 0;
    justify-content: flex-start;
  }

  .cr-card__study-panel {
    align-self: stretch;
  }
}

/* =====================================================================
   v23 compact related-concepts CTA color polish
   ---------------------------------------------------------------------
   Keeps the CTA in one line, but makes all three parts the same font size
   with calmer premium colors so it reads as one polished sentence rather
   than three competing headings.
   ===================================================================== */

.cr-related__header--compact {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.82rem;
}

.cr-related__heading--compact {
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.52rem;
  flex-wrap: nowrap;
  font-family: var(--cr-font-sans, Inter, system-ui, sans-serif);
  font-size: clamp(0.88rem, 0.92vw, 0.96rem);
  line-height: 1.25;
  letter-spacing: -0.006em;
  white-space: nowrap;
}

.cr-related__heading--compact .cr-related__eyebrow,
.cr-related__heading-main,
.cr-related__heading-note {
  font-size: inherit;
  line-height: inherit;
}

.cr-related__heading--compact .cr-related__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-coral, #d97757);
}

.cr-related__heading-main {
  flex: 0 0 auto;
  font-weight: 760;
  color: var(--cr-text, #1f1d1a);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-related__heading-note {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 520;
  letter-spacing: -0.004em;
  color: color-mix(in srgb, var(--cr-text-muted, #5d5953) 86%, var(--cr-text, #1f1d1a));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-related__heading-note::before {
  content: '•';
  margin-right: 0.52rem;
  color: color-mix(in srgb, var(--cr-teal, #003f34) 74%, var(--cr-paper, #fafaf7));
}

.cr-related__header--compact .cr-related__controls {
  align-self: center;
  margin-left: auto;
}

@media (max-width: 760px) {
  .cr-related__header--compact {
    align-items: flex-start;
  }

  .cr-related__heading--compact {
    flex-wrap: wrap;
    white-space: normal;
    gap: 0.42rem;
  }

  .cr-related__heading-note {
    flex-basis: 100%;
  }

  .cr-related__heading-note::before {
    display: none;
  }
}

/* =====================================================================
   v24 final whitespace polish
   ---------------------------------------------------------------------
   Tightens the bottom rhythm between the related cards and the footer.
   Keeps the node page premium without a large empty band after the rail.
   ===================================================================== */

.cr-related {
  margin-top: clamp(1rem, 2vw, 1.65rem);
  margin-bottom: clamp(1.35rem, 2.4vw, 2.25rem);
}

.cr-related__viewport {
  margin-bottom: 0;
}

.cr-related__track {
  padding-bottom: 0.15rem;
}

.cr-related-card {
  min-height: 104px;
}

@media (max-width: 760px) {
  .cr-related {
    margin-bottom: 1.5rem;
  }
}

/* =====================================================================
   v25 back-card premium layout polish
   ---------------------------------------------------------------------
   - Explanation title and save button share the same visual top row.
   - Example uses the same clean card surface; border only, no beige fill.
   - Back button moves to the bottom source/action row.
   ===================================================================== */

.cr-card.is-flipped > .cr-bookmark {
  top: calc(var(--cr-card-pad-y) + 0.05rem);
  right: calc(var(--cr-card-pad-x) + 0.05rem);
}

.cr-card.is-flipped .cr-card__back .cr-card__lesson {
  padding-top: 0;
}

.cr-card__back .cr-card__lesson-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding-right: clamp(10rem, 18vw, 15rem);
  margin-bottom: clamp(0.85rem, 1.4vw, 1.15rem);
}

.cr-card__back .cr-card__lesson-title {
  font-size: clamp(1.65rem, 2.05vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
}

.cr-card__back .cr-card__explanation {
  max-width: none;
  font-size: clamp(1.04rem, 1.06vw, 1.14rem);
  line-height: 1.86;
}

.cr-card__example--wide {
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid color-mix(in srgb, var(--cr-border, #d9e5e2) 88%, #fff) !important;
  border-left: 4px solid var(--cr-accent, #003f34) !important;
  box-shadow: none !important;
}

.cr-card__lesson-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.95rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--cr-border, #d9e5e2) 70%, transparent);
}

.cr-card__lesson-footer .cr-card__flip-back {
  position: static;
  display: inline-flex;
  min-height: 38px;
  padding: 0.52rem 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cr-accent, #003f34) 9%, #fff);
  color: var(--cr-accent-strong, #0f6e56);
  border: 1px solid color-mix(in srgb, var(--cr-accent, #003f34) 28%, var(--cr-border, #d9e5e2));
  box-shadow: 0 8px 22px rgba(24, 21, 18, 0.045);
}

.cr-card__lesson-footer .cr-card__flip-back:hover,
.cr-card__lesson-footer .cr-card__flip-back:focus-visible {
  color: #fff;
  background: var(--cr-accent, #003f34);
  box-shadow: 0 12px 28px rgba(45, 125, 110, 0.22);
}

.cr-card__lesson-footer .cr-card__source-line {
  margin: 0;
  padding: 0;
  border: 0;
  justify-content: flex-end;
  text-align: right;
  min-width: 0;
}

.cr-card__lesson-footer .cr-card__source-line span {
  color: var(--cr-text-faint, #8b8378);
}

.cr-card__lesson-footer .cr-card__source-line strong {
  color: var(--cr-text, #211f1b);
}

.cr-card__back-actionbar,
.cr-card__flip-back--mobile {
  display: none !important;
}

@media (max-width: 760px) {
  .cr-card__back .cr-card__lesson-head {
    min-height: 0;
    padding-right: 0;
    padding-top: 3rem;
  }

  .cr-card.is-flipped > .cr-bookmark {
    top: 0.82rem;
    right: 0.82rem;
  }

  .cr-card__lesson-footer {
    align-items: flex-start;
    flex-direction: column-reverse;
  }

  .cr-card__lesson-footer .cr-card__source-line {
    text-align: left;
    justify-content: flex-start;
  }
}

/* =====================================================================
   v26 back-card readability + responsive polish
   ---------------------------------------------------------------------
   - Example text now matches the explanation body size and rhythm.
   - Back card becomes slightly more compact for short explanations.
   - Mobile/small-screen layout gets safer spacing and wrapping.
   ===================================================================== */

.cr-card.is-flipped {
  --cr-card-min-h: clamp(390px, 31vw, 460px);
}

.cr-card__example--wide {
  margin-top: clamp(1rem, 1.55vw, 1.35rem);
  padding: clamp(1rem, 1.7vw, 1.28rem) clamp(1rem, 2vw, 1.55rem) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-radius: 18px !important;
}

.cr-card__example--wide .field,
.cr-card__example--wide .field__item,
.cr-card__example--wide p,
.cr-card__example--wide div:not(.contextual),
.cr-card__example--wide > :not(.cr-card__panel-label) {
  font-size: clamp(1.04rem, 1.06vw, 1.14rem);
  line-height: 1.78;
  color: var(--cr-text, #211f1b);
}

.cr-card__example--wide .cr-card__panel-label {
  display: block;
  margin-bottom: 0.56rem;
  font-size: 0.68rem;
  line-height: 1;
  color: var(--cr-text-faint, #8b8378);
}

.cr-card__back .cr-card__lesson-title {
  margin-bottom: clamp(0.75rem, 1.15vw, 1rem);
}

.cr-card__lesson-footer {
  margin-top: clamp(0.72rem, 1.2vw, 1rem);
}

@media (max-width: 1100px) {
  .cr-card {
    --cr-card-min-h: auto;
  }

  .cr-card.is-flipped {
    --cr-card-min-h: auto;
  }

  .cr-card__inner,
  .cr-card__face {
    min-height: 0;
  }

  .cr-card__face {
    position: relative;
    display: none;
  }

  .cr-card:not(.is-flipped) .cr-card__front,
  .cr-card.is-flipped .cr-card__back {
    display: block;
  }

  .cr-card.is-flipped .cr-card__inner {
    transform: none;
  }

  .cr-card__front-grid {
    grid-template-columns: 1fr;
    gap: clamp(1.1rem, 3vw, 1.8rem);
  }

  .cr-card__study-panel {
    min-height: 0;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .cr-card {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .cr-card__face {
    padding: clamp(1.05rem, 5vw, 1.35rem);
    border-radius: 22px;
  }

  .cr-card__title {
    max-width: 100%;
    font-size: clamp(2.5rem, 13vw, 3.75rem);
  }

  .cr-card__teaser,
  .cr-card__explanation,
  .cr-card__example--wide .field,
  .cr-card__example--wide .field__item,
  .cr-card__example--wide p,
  .cr-card__example--wide div:not(.contextual),
  .cr-card__example--wide > :not(.cr-card__panel-label) {
    font-size: 1rem;
    line-height: 1.72;
  }

  .cr-card__meta-strip {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cr-card__lesson-footer {
    gap: 0.75rem;
    padding-top: 0.85rem;
  }

  .cr-card__lesson-footer .cr-card__flip-back {
    width: 100%;
  }

  .cr-card__lesson-footer .cr-card__source-line {
    width: 100%;
    line-height: 1.55;
  }

  .cr-related__header--compact {
    gap: 0.6rem;
  }

  .cr-related-card {
    min-height: 108px;
  }
}


/* =====================================================================
   v27 example typography parity
   ---------------------------------------------------------------------
   Force the example body to use the exact same family, size and rhythm as
   the explanation body. The label stays small and uppercase only.
   ===================================================================== */
.cr-card__back .cr-card__explanation,
.cr-card__example--wide .cr-card__example-body,
.cr-card__example--wide .cr-card__example-body *,
.cr-card__example--wide .field,
.cr-card__example--wide .field *,
.cr-card__example--wide .field__item,
.cr-card__example--wide .field__item *,
.cr-card__example--wide p,
.cr-card__example--wide div:not(.contextual):not(.cr-card__panel-label) {
  font-family: inherit !important;
  font-size: clamp(1.04rem, 1.06vw, 1.14rem) !important;
  line-height: 1.86 !important;
  letter-spacing: normal !important;
  color: var(--cr-text, #211f1b) !important;
}

.cr-card__example--wide .cr-card__panel-label {
  font-family: var(--cr-font-sans, Inter, system-ui, sans-serif) !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--cr-text-faint, #8b8378) !important;
}

.cr-card__example--wide .cr-card__example-body > :first-child {
  margin-top: 0;
}

.cr-card__example--wide .cr-card__example-body > :last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .cr-card__back .cr-card__explanation,
  .cr-card__example--wide .cr-card__example-body,
  .cr-card__example--wide .cr-card__example-body *,
  .cr-card__example--wide .field,
  .cr-card__example--wide .field *,
  .cr-card__example--wide .field__item,
  .cr-card__example--wide .field__item *,
  .cr-card__example--wide p,
  .cr-card__example--wide div:not(.contextual):not(.cr-card__panel-label) {
    font-size: 1rem !important;
    line-height: 1.76 !important;
  }
}


/* =====================================================================
   v28 related-card premium interest polish
   ---------------------------------------------------------------------
   Centers related-card copy vertically and adds subtle subject-card energy.
   The cards remain calm and academic, but feel more clickable for students.
   ===================================================================== */
.cr-related-card {
  position: relative;
  justify-content: center;
  gap: 0.58rem;
  padding: 1.15rem 1.22rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 12%, rgba(45, 125, 110, 0.055), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(255, 255, 255, 0.955));
}

.cr-related-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--cr-teal, #003f34);
  opacity: 0.72;
  border-radius: 18px 0 0 18px;
  z-index: -1;
}

.cr-related-card:nth-child(4n + 1) {
  background:
    radial-gradient(circle at 92% 12%, rgba(45, 125, 110, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 255, 253, 0.96));
}

.cr-related-card:nth-child(4n + 1)::before {
  background: var(--cr-teal, #003f34);
}

.cr-related-card:nth-child(4n + 2) {
  background:
    radial-gradient(circle at 92% 12%, rgba(217, 119, 87, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 251, 248, 0.96));
}

.cr-related-card:nth-child(4n + 2)::before {
  background: var(--cr-coral, #d97757);
}

.cr-related-card:nth-child(4n + 3) {
  background:
    radial-gradient(circle at 92% 12%, rgba(179, 136, 67, 0.075), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 253, 247, 0.96));
}

.cr-related-card:nth-child(4n + 3)::before {
  background: #b38843;
}

.cr-related-card:nth-child(4n + 4) {
  background:
    radial-gradient(circle at 92% 12%, rgba(86, 111, 158, 0.072), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 255, 0.96));
}

.cr-related-card:nth-child(4n + 4)::before {
  background: #566f9e;
}

.cr-related-card__title,
.cr-related-card__teaser {
  position: relative;
  z-index: 1;
}

.cr-related-card__title {
  line-height: 1.16;
}

.cr-related-card__teaser {
  margin: 0;
}

.cr-related-card:hover,
.cr-related-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cr-accent, #003f34) 32%, var(--cr-border, #d9e5e2));
  box-shadow:
    0 6px 18px rgba(24, 21, 18, 0.07),
    0 20px 42px rgba(24, 21, 18, 0.075);
}

@media (max-width: 760px) {
  .cr-related-card {
    min-height: 118px;
    justify-content: center;
  }
}

/* =====================================================================
   v29 mobile node-page polish
   ---------------------------------------------------------------------
   Fixes small-screen flashcard rendering:
   - prevents the front/back faces from creating a blank card area on mobile
   - keeps the save button visible without covering the concept labels
   - lets the metadata strip wrap cleanly instead of clipping the learning path
   - improves related-card rail spacing and tap targets on phones
   ===================================================================== */

@media (max-width: 900px) {
  .cr-card {
    --cr-card-min-h: auto;
  }

  .cr-card__inner {
    min-height: 0 !important;
    transform: none !important;
    transform-style: flat;
  }

  .cr-card__face {
    position: relative !important;
    inset: auto !important;
    min-height: 0 !important;
    overflow: visible;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    transform: none !important;
  }

  .cr-card:not(.is-flipped) .cr-card__front,
  .cr-card.is-flipped .cr-card__back {
    display: block !important;
  }

  .cr-card:not(.is-flipped) .cr-card__back,
  .cr-card.is-flipped .cr-card__front {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .cr-card {
    margin-top: 0.4rem;
    margin-bottom: 1.05rem;
  }

  .cr-card__face {
    padding: 1.15rem;
    border-radius: 22px;
  }

  .cr-card > .cr-bookmark,
  .cr-card:not(.is-flipped) > .cr-bookmark,
  .cr-card.is-flipped > .cr-bookmark {
    top: 1rem;
    right: 1rem;
    min-height: 38px;
    padding: 0.48rem 0.78rem;
    font-size: 0.86rem;
    z-index: 18;
  }

  .cr-card__kicker-row {
    min-height: 2.45rem;
    padding-right: 9.5rem;
    gap: 0.42rem;
    margin-bottom: 0.72rem;
  }

  .cr-card__kicker,
  .cr-card__category {
    font-size: 0.64rem;
  }

  .cr-card__category {
    max-width: 100%;
    min-height: 24px;
    padding-inline: 0.55rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cr-card__title {
    max-width: 10.8ch;
    margin-bottom: 0.72rem;
    font-size: clamp(2.7rem, 12vw, 3.55rem);
    line-height: 0.95;
  }

  .cr-card__teaser {
    margin-bottom: 0.95rem;
  }

  .cr-card__meta-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 0.32rem 0.55rem;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 0.7rem 0.82rem;
    overflow-x: visible;
    white-space: normal;
  }

  .cr-card__meta-inline {
    flex: 1 1 100%;
    white-space: normal;
    line-height: 1.35;
  }

  .cr-card__meta-inline + .cr-card__meta-inline::before {
    display: none !important;
  }

  .cr-card__path-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.12rem 0.18rem;
    white-space: normal;
  }

  .cr-card__path-link {
    min-height: 24px;
    padding: 0.05rem 0.25rem;
  }

  .cr-card__study-panel {
    margin-top: 0.15rem;
    padding: 1.05rem;
    border-radius: 20px;
  }

  .cr-card__panel-title {
    font-size: clamp(1.75rem, 8vw, 2.05rem);
  }

  .cr-card__primary-flip,
  .cr-card__flip-back {
    min-height: 44px;
  }

  .cr-card__back .cr-card__lesson-head {
    padding-top: 3.05rem;
  }

  .cr-card__back .cr-card__lesson-title {
    font-size: clamp(1.7rem, 8vw, 2.15rem);
  }

  .cr-card__example--wide {
    padding: 1rem !important;
    border-radius: 16px !important;
  }

  .cr-card__lesson-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .cr-card__lesson-footer .cr-card__source-line {
    text-align: left;
  }

  .cr-related {
    margin-top: 1rem;
    margin-bottom: 1.35rem;
  }

  .cr-related__header--compact {
    align-items: center;
    gap: 0.75rem;
  }

  .cr-related__heading--compact {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cr-related__header--compact .cr-related__controls {
    flex: 0 0 auto;
  }

  .cr-related__track {
    --cr-related-gap: 0.78rem;
    padding-inline: 0.02rem;
    scroll-padding-left: 0.02rem;
  }

  .cr-related-card {
    flex-basis: min(86vw, 360px);
    min-height: 116px;
    padding: 1.05rem 1.15rem;
  }
}

@media (max-width: 430px) {
  .cr-card__kicker-row {
    padding-right: 8.5rem;
  }

  .cr-card > .cr-bookmark,
  .cr-card:not(.is-flipped) > .cr-bookmark,
  .cr-card.is-flipped > .cr-bookmark {
    right: 0.9rem;
    padding-inline: 0.68rem;
    font-size: 0.82rem;
  }

  .cr-card__title {
    font-size: clamp(2.45rem, 12.5vw, 3.25rem);
  }
}


/* v55 mobile flashcard cleanup.
   Mobile request:
   - Save button icon only.
   - Hide Study Action / Read. Reveal. Recall. / helper paragraph on mobile.
   - Show only the Reveal explanation button in the right/action panel.
*/

@media (max-width: 700px) {
  /* Save card: icon only on mobile, still tappable and accessible. */
  .cr-save-button,
  .cr-card__save,
  .cr-save-card,
  .cr-bookmark-button,
  .cr-card [data-cr-save],
  .cr-card button[aria-label*="Save"],
  .cr-card a[aria-label*="Save"] {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    color: #00483d !important;
  }

  /* Hide visible save text regardless of exact markup. */
  .cr-save-button span:not([aria-hidden="true"]),
  .cr-card__save span:not([aria-hidden="true"]),
  .cr-save-card span:not([aria-hidden="true"]),
  .cr-bookmark-button span:not([aria-hidden="true"]),
  .cr-card [data-cr-save] span:not([aria-hidden="true"]) {
    display: none !important;
  }

  /* If text is a direct text node, collapse by hiding text color and restore icon color. */
  .cr-save-button,
  .cr-card__save,
  .cr-save-card,
  .cr-bookmark-button,
  .cr-card [data-cr-save] {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .cr-save-button svg,
  .cr-card__save svg,
  .cr-save-card svg,
  .cr-bookmark-button svg,
  .cr-card [data-cr-save] svg,
  .cr-save-button i,
  .cr-card__save i,
  .cr-save-card i,
  .cr-bookmark-button i,
  .cr-card [data-cr-save] i,
  .cr-save-button::before,
  .cr-card__save::before,
  .cr-save-card::before,
  .cr-bookmark-button::before,
  .cr-card [data-cr-save]::before {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    color: #00483d !important;
    margin: 0 !important;
  }

  /* Study action panel: turn into a clean CTA-only area on mobile. */
  .cr-card__study-panel {
    padding: 1.05rem !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .cr-card__study-panel > *:not(.cr-card__reveal):not(.cr-card__reveal-btn):not(.cr-btn):not(button):not(a),
  .cr-card__study-panel .cr-eyebrow,
  .cr-card__study-panel .cr-card__eyebrow,
  .cr-card__study-panel .cr-card__panel-label,
  .cr-card__study-panel .cr-card__study-label,
  .cr-card__study-panel h2,
  .cr-card__study-panel h3,
  .cr-card__study-panel p,
  .cr-card__study-panel ul,
  .cr-card__study-panel ol {
    display: none !important;
  }

  /* Keep only the reveal button visible and premium. */
  .cr-card__study-panel .cr-card__reveal,
  .cr-card__study-panel .cr-card__reveal-btn,
  .cr-card__study-panel .cr-btn,
  .cr-card__study-panel button,
  .cr-card__study-panel a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 320px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0.9rem 1.25rem !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  /* Reduce vertical weight of the whole card after removing text. */
  .cr-card__front-grid {
    gap: 1rem !important;
  }
}

@media (max-width: 380px) {
  .cr-save-button,
  .cr-card__save,
  .cr-save-card,
  .cr-bookmark-button,
  .cr-card [data-cr-save] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .cr-card__study-panel .cr-card__reveal,
  .cr-card__study-panel .cr-card__reveal-btn,
  .cr-card__study-panel .cr-btn,
  .cr-card__study-panel button,
  .cr-card__study-panel a {
    min-height: 50px !important;
    font-size: 0.94rem !important;
  }
}


/* v56 final mobile card audit polish.
   Fixes missed real bookmark class (.cr-bookmark) and makes the mobile card
   cleaner after hiding the study-action copy. */
@media (max-width: 700px) {
  /* Actual bookmark button generated by conceptrecall_bookmarks/js/bookmark-button.js. */
  .cr-card > .cr-bookmark,
  .cr-card:not(.is-flipped) > .cr-bookmark,
  .cr-card.is-flipped > .cr-bookmark,
  .cr-bookmark {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .cr-bookmark__text,
  .cr-card > .cr-bookmark .cr-bookmark__text,
  .cr-card:not(.is-flipped) > .cr-bookmark .cr-bookmark__text,
  .cr-card.is-flipped > .cr-bookmark .cr-bookmark__text {
    display: none !important;
  }

  .cr-bookmark__icon,
  .cr-card > .cr-bookmark .cr-bookmark__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* The save button is now icon-only, so the kicker row no longer needs a large right guard area. */
  .cr-card__kicker-row {
    padding-right: 3.45rem !important;
    min-height: 2.25rem !important;
  }

  /* CTA-only study panel on mobile. */
  .cr-card__study-panel {
    margin-top: 0.25rem !important;
    padding: 0.35rem 0 0 !important;
    min-height: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .cr-card__panel-topline,
  .cr-card__panel-title,
  .cr-card__panel-copy {
    display: none !important;
  }

  .cr-card__primary-flip {
    width: auto !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 0.92rem 1.2rem !important;
    border-radius: 999px !important;
    font-size: 0.98rem !important;
    font-weight: 850 !important;
    box-shadow: 0 14px 30px rgba(0, 83, 70, 0.18) !important;
  }

  .cr-card__front-grid {
    gap: 0.85rem !important;
  }

  .cr-card__front-main {
    min-width: 0 !important;
  }

  .cr-card__meta-strip {
    font-size: 0.88rem !important;
  }
}

@media (max-width: 380px) {
  .cr-card > .cr-bookmark,
  .cr-card:not(.is-flipped) > .cr-bookmark,
  .cr-card.is-flipped > .cr-bookmark,
  .cr-bookmark {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .cr-card__kicker-row {
    padding-right: 3.1rem !important;
  }

  .cr-card__primary-flip {
    min-height: 50px !important;
    font-size: 0.92rem !important;
    padding-inline: 1.05rem !important;
  }
}


/* v66: mobile flashcard metadata polish
   Makes Difficulty / Learning path feel lighter, more premium and less bulky
   on mobile while keeping the desktop design unchanged. */

@media (max-width: 760px) {
  .cr-card__meta-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: 0.52rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .cr-card__meta-inline {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto !important;
    min-width: 0;
    min-height: 58px;
    padding: 0.62rem 0.72rem !important;
    border: 1px solid color-mix(in srgb, var(--cr-border, #d9e5e2) 92%, #fff);
    border-radius: 17px;
    background:
      radial-gradient(circle at 100% 0%, rgba(45, 125, 110, 0.055), transparent 42%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      0 8px 22px rgba(24, 21, 18, 0.045);
    white-space: normal !important;
  }

  .cr-card__meta-inline strong {
    display: block;
    margin: 0 0 0.18rem 0 !important;
    font-family: var(--cr-font-sans, system-ui, sans-serif);
    font-size: 0.63rem !important;
    line-height: 1.05;
    font-weight: 900 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cr-accent, #003f34) 78%, var(--cr-copper, #c8643f));
  }

  .cr-card__meta-inline > span:not(.cr-card__path-links),
  .cr-card__path-link {
    font-family: var(--cr-font-sans, system-ui, sans-serif);
    font-size: 0.98rem !important;
    line-height: 1.18 !important;
    font-weight: 820 !important;
    color: var(--cr-accent, #003f34) !important;
  }

  .cr-card__meta-inline--difficulty > span {
    color: color-mix(in srgb, var(--cr-text, #211f1b) 88%, var(--cr-accent, #003f34)) !important;
  }

  .cr-card__path-links {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.14rem 0.18rem !important;
    min-width: 0;
  }

  .cr-card__path-link {
    min-height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
  }

  .cr-card__path-link:hover,
  .cr-card__path-link:focus-visible {
    background: transparent !important;
    color: color-mix(in srgb, var(--cr-accent, #003f34) 84%, var(--cr-copper, #c8643f)) !important;
    transform: none !important;
  }

  .cr-card__path-sep {
    font-size: 0.9rem;
    margin: 0 0.06rem !important;
  }
}

@media (max-width: 390px) {
  .cr-card__meta-strip {
    grid-template-columns: 1fr;
    gap: 0.48rem !important;
  }

  .cr-card__meta-inline {
    min-height: 52px;
    padding: 0.58rem 0.68rem !important;
  }
}

/* v73: saved-state visibility fix.
   Earlier UI overrides could keep the saved button surface white while the
   saved text/icon became white, making the button look empty. These selectors
   intentionally target both the class and aria state, so stale/async states
   are still visibly correct. */
.cr-card > .cr-bookmark.is-saved,
.cr-card > .cr-bookmark[aria-pressed="true"],
.cr-card:not(.is-flipped) > .cr-bookmark.is-saved,
.cr-card:not(.is-flipped) > .cr-bookmark[aria-pressed="true"],
.cr-card.is-flipped > .cr-bookmark.is-saved,
.cr-card.is-flipped > .cr-bookmark[aria-pressed="true"],
.cr-bookmark.is-saved,
.cr-bookmark[aria-pressed="true"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--cr-accent, #004b3f), #006454) !important;
  border-color: color-mix(in srgb, var(--cr-accent, #004b3f) 86%, #ffffff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 12px 30px rgba(0, 75, 63, 0.18) !important;
}

.cr-card > .cr-bookmark.is-saved:hover,
.cr-card > .cr-bookmark[aria-pressed="true"]:hover,
.cr-bookmark.is-saved:hover,
.cr-bookmark[aria-pressed="true"]:hover {
  background: linear-gradient(135deg, #003f34, var(--cr-accent, #004b3f)) !important;
  color: #ffffff !important;
}

.cr-bookmark.is-saved .cr-bookmark__icon,
.cr-bookmark[aria-pressed="true"] .cr-bookmark__icon,
.cr-bookmark.is-saved .cr-bookmark__text,
.cr-bookmark[aria-pressed="true"] .cr-bookmark__text {
  color: #ffffff !important;
}

.cr-bookmark .cr-bookmark__icon,
.cr-bookmark .cr-bookmark__text {
  position: relative;
  z-index: 1;
}