/* ── IELTS Cue Cards — library + detail page ─────────────────────
   Lives under Speaking. Two surfaces:
     1. Library  — grid of 55 cards across 5 topic categories
     2. Detail   — single card: cue card + tip + sample + vocab + Part 1/3

   Visual language: dark cocoa shell, cream paper insets for the cue
   card and sample answer, honey accents, Source Serif 4 italic for
   titles. Decorative ornaments and hero numerals between sections to
   keep the page feeling editorial rather than database-listy.
   ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   LIBRARY PAGE — redesigned 2026-06-08
   Cream/honey/serif surface. Hero + practice-summary card up top,
   category-selector grid in a calm cream panel, then the active-
   category's individual cue-card tiles in a 4-up grid.
   ═══════════════════════════════════════════════════════════════════ */

.cc-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.4rem 1.5rem 5rem;
  position: relative;
  color: var(--ielts-ink, #2A1F12);
}

/* ── Hero row — single column, calm and left-aligned. */
.cc-hero {
  margin-bottom: 2.4rem;
}
.cc-hero-text { max-width: 620px; }
.cc-hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ielts-honey, #B57A2E);
  margin-bottom: 1rem;
}
.cc-hero-title {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 4.5rem);
  letter-spacing: -.018em;
  line-height: 1.02;
  color: var(--ielts-ink, #2A1F12);
  margin: 0 0 1.1rem;
}
.cc-hero-desc {
  font-size: 1rem;
  color: var(--ielts-ink-soft, #5C4A35);
  line-height: 1.6;
  margin: 0 0 1.1rem;
  max-width: 56ch;
}
.cc-hero-flourish {
  display: block;
  width: 80px;
  height: 10px;
  color: var(--ielts-honey, #B57A2E);
  opacity: .85;
}

/* Practice summary — cream card with calendar icon + 3 inline stats. */
.cc-summary-card {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.4rem 1.7rem;
  background: linear-gradient(180deg, #FFFCF3 0%, #FAF3DE 100%);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, .10));
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 14px 28px -22px rgba(74, 58, 38, .14);
  min-width: 380px;
}
@media (max-width: 980px) {
  .cc-summary-card { min-width: 0; }
}
@media (max-width: 560px) {
  .cc-summary-card { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.2rem; }
}

.cc-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(181, 122, 46, 0.12);
  color: var(--ielts-honey, #B57A2E);
  flex-shrink: 0;
}

.cc-summary-body { flex: 1; min-width: 0; }
.cc-summary-h {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ielts-honey, #B57A2E);
  margin-bottom: .9rem;
  text-align: center;
}
.cc-summary-stats {
  display: flex;
  gap: 2.2rem;
}
.cc-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  min-width: 0;
}
.cc-summary-n {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--ielts-ink, #2A1F12);
  letter-spacing: -.01em;
}
.cc-summary-l {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ielts-ink-mute, #8C7757);
  white-space: nowrap;
}

/* ── Topic category selector — outer panel, inner 5-up grid. */
.cc-cat-panel {
  background: rgba(255, 252, 244, 0.5);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, .08));
  border-radius: 24px;
  padding: 1.6rem 1.6rem 1.8rem;
  margin-bottom: 1.8rem;
}
.cc-cat-panel-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.3rem;
  flex-wrap: wrap;
}
.cc-cat-panel-title {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  color: var(--ielts-ink, #2A1F12);
  margin: 0;
}
.cc-cat-panel-hint {
  font-size: .85rem;
  color: var(--ielts-ink-mute, #8C7757);
}

.cc-cat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1080px) {
  .cc-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cc-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .cc-cat-grid { grid-template-columns: 1fr; }
}

/* Each category card. The per-category tint comes in via the inline
   --cat-tint / --cat-tint-soft custom properties set on the element. */
.cc-cat-card {
  --cat-tint: #B57A2E;
  --cat-tint-soft: rgba(181, 122, 46, 0.10);
  position: relative;
  text-align: center;
  padding: 1.5rem 1rem 1.2rem;
  background: #FFFFFF;
  border: 1.5px solid var(--ielts-line, rgba(74, 58, 38, .08));
  border-radius: 18px;
  cursor: pointer;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s cubic-bezier(.16, 1, .3, 1),
    background-color .25s ease;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.cc-cat-card:hover {
  border-color: var(--cat-tint);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -20px rgba(74, 58, 38, .18);
}
.cc-cat-card.is-active {
  border-color: var(--cat-tint);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.95) 0%,
    color-mix(in srgb, var(--cat-tint) 8%, transparent) 100%);
  box-shadow:
    0 0 0 4px var(--cat-tint-soft),
    0 10px 24px -18px color-mix(in srgb, var(--cat-tint) 50%, transparent);
}
@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  /* Fallback for browsers without color-mix — solid honey-soft. */
  .cc-cat-card.is-active {
    background: rgba(181, 122, 46, 0.06);
  }
}

.cc-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cat-tint-soft);
  color: var(--cat-tint);
  margin: 0 auto .25rem;
}
.cc-cat-name {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -.005em;
  color: var(--cat-tint);
}
.cc-cat-card.is-active .cc-cat-name { color: var(--cat-tint); }
.cc-cat-card:not(.is-active) .cc-cat-name { color: var(--ielts-ink, #2A1F12); }
.cc-cat-card:not(.is-active):hover .cc-cat-name { color: var(--cat-tint); }

.cc-cat-count {
  font-size: .76rem;
  color: var(--ielts-ink-mute, #8C7757);
  font-weight: 600;
  letter-spacing: .02em;
}
.cc-cat-desc {
  font-size: .8rem;
  color: var(--ielts-ink-soft, #5C4A35);
  line-height: 1.45;
  margin-top: .15rem;
  flex: 1;
}
.cc-cat-cta {
  margin-top: .55rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cat-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.cc-cat-cta-arr {
  transition: transform .2s ease;
  display: inline-block;
}
.cc-cat-card:hover .cc-cat-cta-arr { transform: translateX(2px); }

/* ── Active-category cards panel ── */
.cc-cards-panel {
  margin-top: 2rem;
  scroll-margin-top: 90px;
}
.cc-cards-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.cc-cards-panel-h-l {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
}
.cc-cards-panel-h-r {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ielts-ink-soft, #5C4A35);
}

.cc-cards-panel-icon {
  --cat-tint: #B57A2E;
  --cat-tint-soft: rgba(181, 122, 46, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cat-tint-soft);
  color: var(--cat-tint);
}
.cc-cards-panel-title {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: -.01em;
  color: var(--ielts-ink, #2A1F12);
  margin: 0;
  line-height: 1.1;
}
.cc-cards-panel-count {
  font-size: .78rem;
  color: var(--ielts-ink-mute, #8C7757);
  letter-spacing: .02em;
}

.cc-cards-sort-l {
  font-size: .82rem;
  color: var(--ielts-ink-mute, #8C7757);
}
.cc-cards-sort {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  background: var(--ielts-card-lift, #FFFCF4);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, .10));
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ielts-ink, #2A1F12);
}

.cc-cards-empty {
  padding: 2rem;
  text-align: center;
  color: var(--ielts-ink-mute, #8C7757);
  font-size: .9rem;
}

.cc-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1080px) { .cc-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .cc-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .cc-cards-grid { grid-template-columns: 1fr; } }

/* Each individual cue-card tile. White paper surface with the
   numeral in honey at the top-left, bookmark at top-right, italic
   serif title, and a honey arrow at the bottom-right. */
.cc-card-tile {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.1rem 1.2rem 1rem;
  background: #FFFFFF;
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, .08));
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  position: relative;
  min-height: 150px;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}
.cc-card-tile:hover {
  border-color: rgba(181, 122, 46, 0.40);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -16px rgba(74, 58, 38, 0.18);
}

.cc-card-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cc-card-tile-num {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ielts-honey, #B57A2E);
  letter-spacing: .02em;
}

.cc-card-tile-bm {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ielts-ink-mute, #8C7757);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.cc-card-tile-bm:hover {
  color: var(--ielts-honey, #B57A2E);
  background: rgba(181, 122, 46, 0.08);
}
.cc-card-tile-bm.is-saved {
  color: var(--ielts-honey, #B57A2E);
}
.cc-card-tile-bm.is-saved:hover { transform: scale(1.06); }

.cc-card-tile-title {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ielts-ink, #2A1F12);
  letter-spacing: -.005em;
  line-height: 1.3;
  margin: 0;
  flex: 1;
}

.cc-card-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cc-card-tile-meta {
  font-size: .8rem;
  color: var(--ielts-ink-mute, #8C7757);
}
.cc-card-tile-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(181, 122, 46, 0.10);
  color: var(--ielts-honey, #B57A2E);
  transition: background-color .2s ease, transform .2s ease;
}
.cc-card-tile:hover .cc-card-tile-arrow {
  background: var(--ielts-honey, #B57A2E);
  color: #FFFCF3;
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .cc-cat-card,
  .cc-cat-card *,
  .cc-card-tile,
  .cc-card-tile * {
    transition: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DETAIL PAGE — redesigned 2026-06-09
   Light cream/honey palette to match the library, Reading practice,
   and lessons. Editorial "physical paper" feel for the cue card itself
   (warmer cream + subtle grain); cream-white mini-cards for everything
   else; espresso ink throughout. Practice-mode bits live further down.
   ═══════════════════════════════════════════════════════════════════ */

.cc-detail-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  color: var(--ielts-ink, #2A1F12);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Top bar — back link left, Save button right. */
.cc-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.6rem;
}

.cc-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 0;
  background: transparent;
  border: none;
  color: var(--ielts-ink-mute, #8C7757);
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s, transform .15s;
  cursor: pointer;
  width: max-content;
}
.cc-back:hover {
  color: var(--ielts-ink, #2A1F12);
  transform: translateX(-2px);
}

/* Detail hero — eyebrow row + big italic title. */
.cc-detail-head {
  position: relative;
  padding: 1.6rem 0 1.6rem;
}
.cc-detail-eyebrow-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.cc-detail-category {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .8rem;
  background: rgba(181, 122, 46, 0.10);
  border: 1px solid rgba(181, 122, 46, 0.28);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ielts-honey, #B57A2E);
}
.cc-detail-category-icon { width: 11px; height: 11px; }
.cc-detail-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ielts-ink-mute, #8C7757);
}

/* Save button — sits in the top bar opposite the back link. */
.cc-detail-save {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
  padding: .5rem .9rem;
  background: var(--ielts-card-lift, #FFFCF4);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, .10));
  border-radius: 999px;
  color: var(--ielts-ink-mute, #8C7757);
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.cc-detail-save:hover {
  color: var(--ielts-honey, #B57A2E);
  border-color: rgba(181, 122, 46, 0.45);
  background: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -10px rgba(74, 58, 38, .18);
}
.cc-detail-save.is-saved {
  color: var(--ielts-honey, #B57A2E);
  border-color: rgba(181, 122, 46, 0.45);
  background: rgba(181, 122, 46, 0.08);
}
.cc-detail-save svg { width: 16px; height: 16px; }

.cc-detail-title {
  position: relative;
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--ielts-ink, #2A1F12);
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0;
  max-width: 22ch;
}

/* Editorial section divider — honey hairlines flanking an uppercase
   label. Same pattern across the whole IELTS surface. */
.cc-section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.6rem 0 1.2rem;
}
.cc-section-label::before,
.cc-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181, 122, 46, 0.30), transparent);
}
.cc-section-label-text {
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ielts-honey, #B57A2E);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Paper inset — cream-white surface with warm brown hairline + subtle
   paper grain via SVG noise. Used by the cue card and sample answer. */
.cc-paper {
  background: var(--ielts-card-lift, #FFFCF4);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.50  0 0 0 0 0.32  0 0 0 0 0.16  0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  color: var(--ielts-ink, #2A1F12);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, 0.08));
  border-radius: 16px;
  padding: 2rem 2.2rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 14px 28px -22px rgba(74, 58, 38, 0.18);
  font-family: 'Inter', sans-serif;
  line-height: 1.55;
  position: relative;
}

/* Cue card paper — focal point. Slightly warmer cream gradient + a
   deeper shadow so it sits visually above the other cards. Decorative
   serif quotation marks at the corners. */
.cc-cuecard { position: relative; }
.cc-cuecard .cc-paper {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.50  0 0 0 0 0.32  0 0 0 0 0.16  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg, #FFFCF4 0%, #FAF3DE 100%);
  border-color: rgba(181, 122, 46, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 22px 42px -22px rgba(74, 58, 38, 0.22);
}
.cc-cuecard::before,
.cc-cuecard::after {
  position: absolute;
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 4.5rem;
  color: var(--ielts-honey, #B57A2E);
  opacity: .26;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.cc-cuecard::before {
  content: '\201C';
  top: -.4rem;
  left: -.3rem;
}
.cc-cuecard::after {
  content: '\201D';
  bottom: -1.6rem;
  right: -.3rem;
}
@media (max-width: 720px) {
  .cc-cuecard::before, .cc-cuecard::after { display: none; }
}

.cc-cuecard-prompt {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  color: var(--ielts-ink, #2A1F12);
  margin: 0 0 1.3rem;
  letter-spacing: -.005em;
  line-height: 1.32;
}
.cc-cuecard-leadin {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ielts-honey, #B57A2E);
  margin-bottom: .55rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.cc-cuecard-bullets {
  margin: 0;
  padding-left: 1.4rem;
  list-style: none;
}
.cc-cuecard-bullets li {
  font-size: 1.02rem;
  color: var(--ielts-ink, #2A1F12);
  padding: .28rem 0;
  line-height: 1.55;
  position: relative;
}
.cc-cuecard-bullets li::before {
  content: '◆';
  position: absolute;
  left: -1.4rem;
  top: .4rem;
  font-size: .55rem;
  color: var(--ielts-honey, #B57A2E);
  opacity: .8;
}

/* Examiner tip — calm cream callout with honey left border. */
.cc-tip {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 1.6rem;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(180deg, rgba(181, 122, 46, 0.07), rgba(181, 122, 46, 0.02));
  border: 1px solid rgba(181, 122, 46, 0.22);
  border-left: 3px solid var(--ielts-honey, #B57A2E);
  border-radius: 12px;
}
.cc-tip-label {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ielts-honey, #B57A2E);
  padding-top: .2rem;
}
.cc-tip-body {
  font-size: .98rem;
  color: var(--ielts-ink, #2A1F12);
  line-height: 1.6;
}

/* Sample answer block — cream paper, paragraph/bullets toggle. */
.cc-sample {}
.cc-sample-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.3rem;
  padding-bottom: .95rem;
  border-bottom: 1px solid var(--ielts-line, rgba(74, 58, 38, 0.10));
}
.cc-sample-eyebrow {
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ielts-ink-mute, #8C7757);
  font-variant-numeric: tabular-nums;
}
.cc-sample-toggle {
  display: inline-flex;
  background: rgba(74, 58, 38, 0.06);
  border-radius: 999px;
  padding: 3px;
  font-family: 'Inter', sans-serif;
}
.cc-sample-toggle button {
  background: transparent;
  border: none;
  padding: .35rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ielts-ink-mute, #8C7757);
  cursor: pointer;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.cc-sample-toggle button:hover { color: var(--ielts-ink, #2A1F12); }
.cc-sample-toggle button.is-active {
  background: var(--ielts-ink, #2A1F12);
  color: var(--ielts-card-lift, #FFFCF4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.cc-sample-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem;
  color: var(--ielts-ink, #2A1F12);
  line-height: 1.7;
  letter-spacing: -.002em;
}
.cc-sample-body[hidden] { display: none; }
.cc-sample-bullets {
  margin: 0;
  padding-left: 1.5rem;
  list-style: none;
}
.cc-sample-bullets li {
  padding: .3rem 0;
  font-size: 1.02rem;
  line-height: 1.55;
  position: relative;
  font-style: normal;
  font-family: 'Inter', sans-serif;
}
.cc-sample-bullets li::before {
  content: '·';
  position: absolute;
  left: -1.1rem;
  top: 0;
  color: var(--ielts-honey, #B57A2E);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
}
.cc-bullets-note {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--ielts-line, rgba(74, 58, 38, 0.18));
  font-size: .82rem;
  font-style: italic;
  color: var(--ielts-ink-mute, #8C7757);
  font-family: 'Source Serif 4', Georgia, serif;
}

/* Vocabulary — cream mini-cards in a 2-col grid. Italic honey phrases,
   espresso glosses, decorative quote ornament at the top-left. */
.cc-vocab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 640px) { .cc-vocab-grid { grid-template-columns: 1fr; } }

.cc-vocab-item {
  position: relative;
  padding: 1.1rem 1.25rem 1rem;
  background: var(--ielts-card-lift, #FFFCF4);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, 0.08));
  border-radius: 12px;
  transition: background .18s, border-color .18s, transform .15s, box-shadow .18s;
  box-shadow: 0 6px 14px -12px rgba(74, 58, 38, 0.18);
}
.cc-vocab-item:hover {
  border-color: rgba(181, 122, 46, 0.36);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -14px rgba(74, 58, 38, 0.22);
}
.cc-vocab-item::before {
  content: '"';
  position: absolute;
  top: -.2rem;
  left: .6rem;
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 2.2rem;
  color: rgba(181, 122, 46, 0.42);
  line-height: 1;
  pointer-events: none;
}
.cc-vocab-phrase {
  display: block;
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--ielts-honey, #B57A2E);
  font-weight: 500;
  letter-spacing: -.005em;
  margin-bottom: .4rem;
}
.cc-vocab-gloss {
  display: block;
  font-size: .88rem;
  color: var(--ielts-ink-soft, #5C4A35);
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
}

/* Part 1 questions — single cream-paper list with old-style honey
   numerals. Reads like a printed warm-up sheet. */
.cc-part1-list {
  counter-reset: cc-part1;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--ielts-card-lift, #FFFCF4);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, 0.08));
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 14px -12px rgba(74, 58, 38, 0.18);
}
.cc-part1-list li {
  counter-increment: cc-part1;
  position: relative;
  padding: 1.05rem 1.5rem 1.05rem 3.4rem;
  font-size: 1.02rem;
  color: var(--ielts-ink, #2A1F12);
  line-height: 1.55;
  border-bottom: 1px solid var(--ielts-line, rgba(74, 58, 38, 0.08));
  font-family: 'Inter', sans-serif;
}
.cc-part1-list li:last-child { border-bottom: none; }
.cc-part1-list li::before {
  content: counter(cc-part1);
  position: absolute;
  left: 1.4rem;
  top: 1.05rem;
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ielts-honey, #B57A2E);
  font-variant-numeric: oldstyle-nums;
}

/* Part 3 — cream paper accordion. Each Q&A pair feels like a folded
   sheet that opens to reveal the model answer underneath. */
.cc-part3-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.cc-part3-item {
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, 0.08));
  border-radius: 14px;
  background: var(--ielts-card-lift, #FFFCF4);
  overflow: hidden;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s;
  box-shadow: 0 6px 14px -12px rgba(74, 58, 38, 0.18);
}
.cc-part3-item:hover {
  border-color: rgba(181, 122, 46, 0.30);
  transform: translateY(-1px);
}
.cc-part3-item.is-open {
  background: linear-gradient(180deg, #FFFCF4 0%, #FAF3DE 100%);
  border-color: rgba(181, 122, 46, 0.45);
  box-shadow: 0 12px 24px -14px rgba(74, 58, 38, 0.24);
}
.cc-part3-q {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.35rem;
  background: transparent;
  border: none;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--ielts-ink, #2A1F12);
  line-height: 1.45;
  cursor: pointer;
}
.cc-part3-q-num {
  flex-shrink: 0;
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  font-variant-numeric: oldstyle-nums;
  color: var(--ielts-honey, #B57A2E);
  min-width: 1.5rem;
}
.cc-part3-q-text { flex: 1; }
.cc-part3-q-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--ielts-ink-mute, #8C7757);
  transition: transform .25s, color .15s;
}
.cc-part3-item:hover .cc-part3-q-icon { color: var(--ielts-ink, #2A1F12); }
.cc-part3-item.is-open .cc-part3-q-icon {
  transform: rotate(180deg);
  color: var(--ielts-honey, #B57A2E);
}
.cc-part3-a {
  padding: .25rem 1.35rem 1.3rem 4.1rem;
  font-size: 1rem;
  color: var(--ielts-ink-soft, #5C4A35);
  line-height: 1.7;
  font-family: 'Source Serif 4', Georgia, serif;
  position: relative;
}
.cc-part3-a::before {
  content: '';
  position: absolute;
  left: 1.7rem;
  top: 0;
  bottom: 1.3rem;
  width: 2px;
  background: linear-gradient(180deg, var(--ielts-honey, #B57A2E) 0%, rgba(181, 122, 46, 0) 100%);
  opacity: .65;
  border-radius: 1px;
}
.cc-part3-a[hidden] { display: none; }

/* Pager — Previous / Next as cream paper cards. */
.cc-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ielts-line, rgba(74, 58, 38, 0.10));
}
.cc-pager-link {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.25rem 1.4rem;
  background: var(--ielts-card-lift, #FFFCF4);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, 0.08));
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 6px 14px -12px rgba(74, 58, 38, 0.18);
}
.cc-pager-link:hover {
  border-color: rgba(181, 122, 46, 0.40);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -14px rgba(74, 58, 38, 0.22);
}
.cc-pager-link.is-next { text-align: right; align-items: flex-end; }
.cc-pager-link.is-disabled {
  visibility: hidden;
  pointer-events: none;
}
.cc-pager-label {
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ielts-honey, #B57A2E);
}
.cc-pager-title {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--ielts-ink, #2A1F12);
  line-height: 1.3;
  letter-spacing: -.005em;
}
@media (max-width: 640px) {
  .cc-pager { grid-template-columns: 1fr; }
  .cc-pager-link.is-next { text-align: left; align-items: flex-start; }
}

/* Empty / fallback */
.cc-empty {
  text-align: center;
  padding: 5rem 1rem;
  color: var(--ielts-ink-mute, #8C7757);
  font-style: italic;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem;
}

/* Mobile tightening */
@media (max-width: 620px) {
  .cc-page, .cc-detail-page { padding-left: 1rem; padding-right: 1rem; }
  .cc-paper { padding: 1.4rem 1.5rem; border-radius: 14px; }
  .cc-cuecard-prompt { font-size: 1.25rem; }
  .cc-sample-body { font-size: 1.02rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   SPEAKING SUBJECT HOME — Practice tools section
   Sits between the page header and the lesson phases. Surfaces the
   two practice tools (Cue Cards live, AI Coach coming soon) as a pair
   of large entry cards so students don't need to know about the nav
   dropdown to find them.
   ═══════════════════════════════════════════════════════════════════ */
.sp-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 720px) {
  .sp-tools-grid { grid-template-columns: 1fr; }
}

/* Active tool — cream paper card, matches the cue-card visual language. */
.sp-tool-card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.7rem 1.8rem 1.5rem;
  background: var(--ielts-paper, #F5EBD3);
  border: 1px solid rgba(31, 24, 18, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.18),
    0 10px 24px -16px rgba(0, 0, 0, 0.45);
  min-height: 200px;
}
.sp-tool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ielts-honey, #D9A268), transparent);
  opacity: 0;
  transition: opacity .25s;
}
.sp-tool-card:hover {
  background: #F8EFD9;
  border-color: rgba(217, 162, 104, 0.5);
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.2),
    0 16px 32px -16px rgba(0, 0, 0, 0.55);
}
.sp-tool-card:hover::before { opacity: 1; }

.sp-tool-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(181, 122, 46, 1);
}
.sp-tool-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.7rem;
  color: var(--ielts-paper-ink, #1F1812);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.01em;
}
.sp-tool-desc {
  font-size: .96rem;
  color: rgba(31, 24, 18, 0.7);
  line-height: 1.55;
  flex: 1;
  font-family: 'Inter', sans-serif;
}
.sp-tool-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(31, 24, 18, 0.10);
}
.sp-tool-cta {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  letter-spacing: .005em;
  font-weight: 600;
  color: rgba(181, 122, 46, 1);
}
.sp-tool-badge {
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgba(217, 162, 104, 0.18);
  color: rgba(181, 122, 46, 1);
  border: 1px solid rgba(181, 122, 46, 0.35);
}

/* Disabled tool — dark transparent, visually distinct from active. */
.sp-tool-card.is-disabled {
  background: rgba(245, 235, 211, 0.04);
  border: 1px solid rgba(242, 230, 204, 0.10);
  cursor: default;
  box-shadow: none;
}
.sp-tool-card.is-disabled::before { display: none; }
.sp-tool-card.is-disabled:hover {
  background: rgba(245, 235, 211, 0.04);
  border-color: rgba(242, 230, 204, 0.10);
  transform: none;
  box-shadow: none;
}
.sp-tool-card.is-disabled .sp-tool-eyebrow {
  color: var(--ielts-ink-soft, #B6A484);
  opacity: .8;
}
.sp-tool-card.is-disabled .sp-tool-title {
  color: var(--ielts-ink, #F2E6CC);
  opacity: .75;
}
.sp-tool-card.is-disabled .sp-tool-desc {
  color: var(--ielts-ink-soft, #B6A484);
  opacity: .8;
}
.sp-tool-card.is-disabled .sp-tool-foot {
  border-top-color: rgba(242, 230, 204, 0.10);
}
.sp-tool-card.is-disabled .sp-tool-cta {
  color: var(--ielts-ink-soft, #B6A484);
  opacity: .7;
}
.sp-tool-card.is-disabled .sp-tool-badge {
  background: rgba(242, 230, 204, 0.06);
  color: var(--ielts-ink-soft, #B6A484);
  border-color: rgba(242, 230, 204, 0.18);
}

/* ─────────────────────────────────────────────────────────────────────
   Practice mode — CTA, sticky timer bar, scratch notes
   Activated by .is-practice on .cc-detail-page (#cc-detail-root)
   Light theme — matches the rest of the redesigned detail page.
   ───────────────────────────────────────────────────────────────────── */

/* CTA — sits between the hero and the cue card */
.cc-practice-cta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  margin: 0 0 1.8rem;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(135deg, rgba(181, 122, 46, 0.13), rgba(181, 122, 46, 0.04));
  border: 1px solid rgba(181, 122, 46, 0.32);
  border-radius: 14px;
  color: var(--ielts-ink, #2A1F12);
  font-family: 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.cc-practice-cta:hover {
  background: linear-gradient(135deg, rgba(181, 122, 46, 0.20), rgba(181, 122, 46, 0.06));
  border-color: rgba(181, 122, 46, 0.50);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(74, 58, 38, 0.22);
}
.cc-practice-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ielts-honey, #B57A2E);
  color: #FFFCF4;
}
.cc-practice-cta-icon svg {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}
.cc-practice-cta-text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.cc-practice-cta-title {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: .005em;
  color: var(--ielts-honey, #B57A2E);
}
.cc-practice-cta-sub {
  font-size: .85rem;
  color: var(--ielts-ink-soft, #5C4A35);
  letter-spacing: .01em;
}
.cc-practice-cta.is-done {
  border-style: dashed;
}

/* Timer panel — sits inside the cue-card paper as a right-column
   inset during practice mode. Reads as an exam clock stamped on
   the paper itself. */
.cc-practice-bar {
  background: rgba(74, 58, 38, 0.05);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, 0.14));
  border-radius: 12px;
  overflow: hidden;
  align-self: start;
  position: sticky;
  top: 1rem;
}
.cc-practice-bar-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .85rem;
  padding: 1rem 1.1rem 1.1rem;
}
.cc-practice-bar-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .2rem;
}
.cc-practice-stage {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ielts-ink, #2A1F12);
  letter-spacing: .005em;
}
.cc-practice-sub {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  color: var(--ielts-ink-mute, #8C7757);
  line-height: 1.35;
}
.cc-practice-clock {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--ielts-ink, #2A1F12);
  letter-spacing: .015em;
  text-align: center;
  line-height: 1;
}
.cc-practice-bar-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
}
.cc-practice-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1rem;
  background: var(--ielts-honey, #B57A2E);
  color: #FFFCF4;
  border: none;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.cc-practice-skip:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -10px rgba(181, 122, 46, 0.45);
}
.cc-practice-quit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, 0.22));
  border-radius: 50%;
  color: var(--ielts-ink-mute, #8C7757);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cc-practice-quit:hover {
  color: var(--ielts-ink, #2A1F12);
  border-color: rgba(74, 58, 38, 0.45);
}
.cc-practice-quit svg { width: 13px; height: 13px; }
.cc-practice-progress {
  height: 3px;
  background: rgba(74, 58, 38, 0.10);
}
.cc-practice-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--ielts-honey, #B57A2E);
  transition: width 1s linear;
}
.cc-practice-bar[data-stage="speaking"] .cc-practice-progress-fill {
  background: var(--ielts-ember, #B6442C);
}

/* During practice, the cue card paper becomes a two-column composition:
   prompt content on the left, timer panel on the right. */
.cc-detail-page.is-practice .cc-cuecard .cc-paper {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 1.8rem;
  align-items: start;
}
.cc-cuecard-body { min-width: 0; }

/* Scratch notes — cream paper with faint horizontal rules */
.cc-practice-notes {
  margin-top: 1.5rem;
}
.cc-paper--lined {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.50  0 0 0 0 0.32  0 0 0 0 0.16  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(74, 58, 38, 0.10) 31px, rgba(74, 58, 38, 0.10) 32px);
}
.cc-practice-notes-label {
  display: block;
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ielts-ink-mute, #8C7757);
  margin-bottom: .6rem;
}
.cc-practice-notes-area {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  min-height: 7rem;
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  line-height: 32px;
  color: var(--ielts-ink, #2A1F12);
}
.cc-practice-notes-area::placeholder {
  color: var(--ielts-ink-mute, #8C7757);
  font-style: italic;
}

/* In practice mode, hide everything tagged as spoiler. */
.cc-detail-page.is-practice [data-cc-hide-in-practice] {
  display: none !important;
}

/* Narrow screens — timer stacks above the prompt */
@media (max-width: 640px) {
  .cc-detail-page.is-practice .cc-cuecard .cc-paper {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .cc-practice-bar {
    order: -1;
    position: static;
  }
  .cc-practice-clock {
    font-size: 2.2rem;
  }
  .cc-practice-cta {
    padding: .95rem 1.1rem;
  }
  .cc-practice-cta-title {
    font-size: 1.15rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SPEAKING PRACTICE HUB — added 2026-06-09
   The /speaking/practice page. Two big entry-mode cards: Cue Cards
   (ready) and Random Mock (coming soon). Sits inside the .rpi-page
   shell shared with Reading Practice for cross-section coherence.
   ═══════════════════════════════════════════════════════════════════ */

.sp-prac-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: .5rem;
}
@media (max-width: 760px) {
  .sp-prac-modes { grid-template-columns: 1fr; }
}

.sp-prac-mode {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.6rem 1.7rem 1.4rem;
  background: var(--ielts-card-lift, #FFFCF4);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, .08));
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow:
    0 1px 0 rgba(74, 58, 38, .02),
    0 12px 28px -16px rgba(74, 58, 38, .14);
  transition:
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
  position: relative;
  min-height: 240px;
}
.sp-prac-mode.is-ready:hover {
  border-color: rgba(181, 122, 46, 0.40);
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(74, 58, 38, .02),
    0 20px 36px -16px rgba(74, 58, 38, .20);
}
.sp-prac-mode.is-locked {
  background: rgba(255, 252, 244, 0.55);
  cursor: default;
  opacity: .92;
}

/* Icon disc — honey tint for ready mode, muted for locked. */
.sp-prac-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(181, 122, 46, 0.14);
  color: var(--ielts-honey, #B57A2E);
  flex-shrink: 0;
}
.sp-prac-mode.is-locked .sp-prac-mode-icon {
  background: rgba(74, 58, 38, 0.06);
  color: var(--ielts-ink-mute, #8C7757);
}

.sp-prac-mode-body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}
.sp-prac-mode-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ielts-honey, #B57A2E);
}
.sp-prac-mode.is-locked .sp-prac-mode-eyebrow {
  color: var(--ielts-ink-mute, #8C7757);
}
.sp-prac-mode-title {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.85rem;
  letter-spacing: -.015em;
  color: var(--ielts-ink, #2A1F12);
  line-height: 1.05;
  margin: 0;
}
.sp-prac-mode.is-locked .sp-prac-mode-title {
  color: var(--ielts-ink-soft, #5C4A35);
}
.sp-prac-mode-desc {
  font-size: .95rem;
  color: var(--ielts-ink-soft, #5C4A35);
  line-height: 1.55;
  margin: 0;
}
.sp-prac-mode.is-locked .sp-prac-mode-desc {
  color: var(--ielts-ink-mute, #8C7757);
}

.sp-prac-mode-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ielts-line, rgba(74, 58, 38, .08));
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ielts-honey, #B57A2E);
}
.sp-prac-mode.is-locked .sp-prac-mode-cta {
  color: var(--ielts-ink-mute, #8C7757);
  border-top-color: rgba(74, 58, 38, .05);
}
.sp-prac-mode-cta svg {
  transition: transform .2s ease;
}
.sp-prac-mode.is-ready:hover .sp-prac-mode-cta svg {
  transform: translateX(3px);
}
.sp-prac-mode-soon {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .3rem .75rem;
  background: rgba(74, 58, 38, 0.06);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, .10));
  border-radius: 999px;
  color: var(--ielts-ink-mute, #8C7757);
}

/* ── Dashboard placeholder ── */
.sp-dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 3rem 1.5rem 2.6rem;
  background: var(--ielts-card-lift, #FFFCF4);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, .08));
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(74, 58, 38, .02),
    0 12px 28px -16px rgba(74, 58, 38, .14);
}
.sp-dash-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(181, 122, 46, 0.10);
  color: var(--ielts-honey, #B57A2E);
  margin-bottom: .4rem;
}
.sp-dash-empty-title {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -.01em;
  color: var(--ielts-ink, #2A1F12);
  margin: 0;
}
.sp-dash-empty-desc {
  font-size: .95rem;
  color: var(--ielts-ink-soft, #5C4A35);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0;
}
.sp-dash-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .8rem;
  padding: .65rem 1.2rem;
  background: var(--ielts-honey, #B57A2E);
  color: #FFFCF4;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.sp-dash-empty-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -10px rgba(181, 122, 46, 0.45);
}

/* ── Speaking Practice — mock history list ──
   Sits below the two entry-mode cards on the Practice page. Loaded
   asynchronously after the page paints (see _renderSpeakingMockHistory).
   ─────────────────────────────────────────────────────────────────── */
.sp-prac-history {
  margin-top: 2rem;
}
.sp-prac-history-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.sp-prac-history-title {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  color: var(--ielts-ink, #2A1F12);
  margin: 0;
}
.sp-prac-history-meta {
  font-size: .8rem;
  color: var(--ielts-ink-mute, #8C7757);
  letter-spacing: .02em;
}

.sp-prac-history-empty {
  padding: 1.4rem 1.6rem;
  background: rgba(255, 252, 244, 0.55);
  border: 1px dashed var(--ielts-line, rgba(74, 58, 38, .12));
  border-radius: 14px;
  text-align: center;
}
.sp-prac-history-empty p {
  margin: 0;
  font-size: .92rem;
  color: var(--ielts-ink-mute, #8C7757);
  font-style: italic;
  font-family: 'Source Serif 4', Georgia, serif;
}

.sp-prac-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sp-prac-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.2rem;
  background: var(--ielts-card-lift, #FFFCF4);
  border: 1px solid var(--ielts-line, rgba(74, 58, 38, .08));
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sp-prac-history-row:hover {
  border-color: rgba(181, 122, 46, 0.36);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -12px rgba(74, 58, 38, .18);
}

.sp-prac-history-l {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  flex: 1;
}
.sp-prac-history-date {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ielts-honey, #B57A2E);
}
.sp-prac-history-title-r {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ielts-ink, #2A1F12);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-prac-history-r {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  flex-shrink: 0;
  color: var(--ielts-ink-mute, #8C7757);
}
.sp-prac-history-band-l {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.sp-prac-history-band {
  font-family: 'Cormorant Garamond', 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -.005em;
  color: var(--ielts-honey, #B57A2E);
  line-height: 1;
}
.sp-prac-history-kind {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .35rem .75rem;
  background: rgba(181, 122, 46, 0.10);
  border: 1px solid rgba(181, 122, 46, 0.25);
  border-radius: 999px;
  color: var(--ielts-honey, #B57A2E);
  white-space: nowrap;
}
.sp-prac-history-arr {
  color: var(--ielts-ink-mute, #8C7757);
  align-self: center;
  margin-left: .25rem;
  transition: transform .15s ease, color .15s ease;
}
.sp-prac-history-row:hover .sp-prac-history-arr {
  color: var(--ielts-honey, #B57A2E);
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .sp-prac-history-row { padding: .85rem 1rem; }
  .sp-prac-history-title-r { font-size: .98rem; }
}