/*
 * HNC Resource Redesign — Shared Base CSS
 * Provides design tokens + flat utilities consumed by per-type renderers.
 * Scope class: .hnc-rrd (top-level wrapper) + theme variants .hnc-rrd--paper / .hnc-rrd--studio.
 * Type modules wrap their UI in `<div class="hnc-rrd hnc-rrd--paper hnc-rrd-<type>">`.
 */

/* ========== 1. Design tokens ========== */

.hnc-rrd {
  --rrd-font-serif: 'Source Serif 4', 'Songti SC', 'Noto Serif SC', Georgia, serif;
  --rrd-font-sans: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --rrd-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Paper palette (theme A) */
  --rrd-paper: #FAF6EE;
  --rrd-paper-deep: #F3ECDC;
  --rrd-ink: #231F1A;
  --rrd-ink-2: #5E5347;
  --rrd-ink-3: #8D8375;
  --rrd-rule: #E5DCC6;
  --rrd-rule-soft: #EFE7D4;
  --rrd-coral: #D8593A;
  --rrd-coral-soft: #F6E6DD;
  --rrd-leaf: #5A7A47;
  --rrd-leaf-soft: #E7EEDD;
  --rrd-gold: #B88A2D;
  --rrd-gold-soft: #F5EBCD;
  --rrd-indigo: #2D4057;
  --rrd-indigo-soft: #DDE4EC;

  font-family: var(--rrd-font-sans);
  box-sizing: border-box;
  color: var(--rrd-ink);
}

.hnc-rrd *, .hnc-rrd *::before, .hnc-rrd *::after { box-sizing: inherit; }

.hnc-rrd button {
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.hnc-rrd [hidden] { display: none !important; }

/* ========== 2. Paper theme (default) ========== */

.hnc-rrd--paper {
  background: var(--rrd-paper);
  min-height: 60vh;
}

/* ========== 3. Section background image scaffold ========== */
/* Multi-bg stack: linear-gradient(cream 72%) on top, image 720px center bottom layer.
   JS sets --hnc-rrd-bg CSS var on .hnc-rrd.has-rrd-bg per current resource/section. */

.hnc-rrd--paper.has-rrd-bg {
  background-image:
    linear-gradient(rgba(250, 246, 238, 0.72), rgba(250, 246, 238, 0.72)),
    var(--hnc-rrd-bg, none);
  background-size: cover, 720px auto;
  background-position: center, center 80px;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
  background-color: var(--rrd-paper);
}

@media (max-width: 720px) {
  .hnc-rrd--paper.has-rrd-bg {
    background-size: cover, 480px auto;
    background-position: center, center 60px;
  }
}

/* ========== 4. Flat option/qcard utilities ========== */
/* Type modules use these classes when their old DOM had cream-on-cream borders */

.hnc-rrd__qcard {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 18px 0;
  border-bottom: 1px solid rgba(229, 220, 198, 0.5);
  border-radius: 0;
}
.hnc-rrd__qcard:last-child { border-bottom: none; }

.hnc-rrd__option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  text-align: left;
  width: 100%;
  font-family: var(--rrd-font-serif);
  transition: border-color 120ms, background 120ms;
}
.hnc-rrd__option:hover {
  background: rgba(229, 220, 198, 0.25);
  border-left-color: rgba(35, 31, 26, 0.15);
}
.hnc-rrd__option.is-picked {
  background: transparent;
  border-left-color: var(--rrd-ink);
}
.hnc-rrd__option.is-correct {
  background: var(--rrd-leaf-soft);
  border-left-color: var(--rrd-leaf);
}
.hnc-rrd__option.is-wrong {
  background: var(--rrd-coral-soft);
  border-left-color: var(--rrd-coral);
}

.hnc-rrd__opt-letter {
  width: auto;
  height: auto;
  padding: 3px 6px 0 0;
  font-family: var(--rrd-font-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--rrd-ink-3);
  flex-shrink: 0;
}
.hnc-rrd__opt-text {
  flex: 1;
  font-size: 19.5px;
  line-height: 1.5;
  color: var(--rrd-ink);
  padding-top: 3px;
}

/* ========== 5. Single-toggle Answer Key bar ========== */

.hnc-rrd__answerkey {
  background: var(--rrd-ink);
  color: var(--rrd-paper);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.hnc-rrd__answerkey-label {
  font-family: var(--rrd-font-serif);
  font-size: 16.9px;
  font-style: italic;
  opacity: 0.7;
  letter-spacing: 1px;
}
.hnc-rrd__answerkey-cells {
  display: flex;
  gap: 8px;
}
.hnc-rrd__answerkey-cell {
  display: flex;
  flex-direction: row;
  gap: 0;
}
.hnc-rrd__answerkey-box {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rrd-font-serif);
  font-size: 20.8px;
  font-weight: 600;
  font-style: italic;
}
.hnc-rrd__answerkey-box.is-revealed {
  background: var(--rrd-leaf);
  border-color: var(--rrd-leaf);
}
.hnc-rrd__answerkey-sp { flex: 1; }
.hnc-rrd__answerkey-btn {
  font-size: 16.9px;
  padding: 8px 14px;
  color: var(--rrd-paper);
  border: 1px solid var(--rrd-paper);
  border-radius: 8px;
  cursor: pointer;
}
.hnc-rrd__answerkey-btn.is-primary {
  background: var(--rrd-coral);
  border-color: var(--rrd-coral);
}

/* ========== 6. Vocab card + pos slot ========== */

.hnc-rrd__vocab-grid {
  display: grid;
  /* auto-fit + 540px gives 2 wide cards on desktop (~1500px); each card has
     much more horizontal room → bigger primary fonts read comfortably. */
  grid-template-columns: repeat(auto-fit, minmax(540px, 1fr));
  gap: 16px;
}
.hnc-rrd__vocab-card {
  padding: 18px 22px;
  border: 1px solid var(--rrd-rule);
  border-radius: 12px;
  background: rgba(250, 246, 238, 0.7);
}
.hnc-rrd__vocab-head {
  display: flex;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
/* Visual hierarchy v3 — bigger primary content + stronger contrast.
   Word(32) > 中文释义(23) > 例句(20.5) > 英文释义(17) > 例句中译(16) > IPA/POS(15-16). */
.hnc-rrd__vocab-word {
  font-family: var(--rrd-font-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--rrd-ink);
  flex-shrink: 0;
  letter-spacing: -0.3px;
  line-height: 1.15;
}
.hnc-rrd__vocab-pos {
  font-family: var(--rrd-font-mono);
  font-size: 15px;
  font-style: italic;
  color: var(--rrd-ink-3);
  opacity: 0.8;
  margin-left: -2px;
}
.hnc-rrd__vocab-ipa {
  font-family: var(--rrd-font-mono);
  font-size: 16.5px;
  color: var(--rrd-ink-3);
}
.hnc-rrd__vocab-cn {
  font-size: 23px;
  color: var(--rrd-ink);
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.45;
}
.hnc-rrd__vocab-en {
  font-family: var(--rrd-font-serif);
  font-size: 19px;
  font-style: italic;
  color: var(--rrd-ink-2);
  margin-bottom: 14px;
  line-height: 1.55;
}
.hnc-rrd__vocab-eg {
  font-family: var(--rrd-font-serif);
  font-size: 22.5px;
  font-style: italic;
  color: var(--rrd-ink);
  line-height: 1.55;
  padding: 16px 18px;
  border-left: 3px solid var(--rrd-coral);
  margin-top: 10px;
  hyphens: auto;
  word-break: normal;
  overflow-wrap: anywhere;
  background: rgba(245, 235, 205, 0.35);
  border-radius: 0 6px 6px 0;
}
.hnc-rrd__vocab-eg-tag {
  font-family: var(--rrd-font-mono);
  font-style: normal;
  color: var(--rrd-ink-3);
  margin-right: 6px;
}
.hnc-rrd__vocab-eg-cn {
  font-family: var(--rrd-font-sans);
  font-style: normal;
  font-size: 17.5px;
  color: var(--rrd-ink-2);
  margin-top: 10px;
  line-height: 1.6;
}

/* ========== 7. Microhint dot + hover tooltip ========== */

.hnc-rrd__microhint {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rrd-rule);
  border: none;
  cursor: help;
  vertical-align: middle;
  position: relative;
}
.hnc-rrd__microhint:hover::after {
  content: attr(data-label);
  font-size: 12px;
  font-family: var(--rrd-font-mono);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -4px);
  white-space: nowrap;
  padding: 3px 8px;
  background: rgba(35, 31, 26, 0.9);
  color: #faf6ee;
  border-radius: 4px;
  letter-spacing: 0.5px;
  z-index: 100;
}

/* ========== 8. Cite drawer reveal animation ========== */
/* Type modules add .is-entering class on first-open transcript/drawer element */

@keyframes hnc-rrd-drawer-reveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateX(0);
  }
}
.hnc-rrd__drawer.is-entering {
  animation: hnc-rrd-drawer-reveal 380ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

@keyframes hnc-rrd-cite-line-flash {
  0%   { stroke-opacity: 0.4; stroke-width: 1.5; }
  35%  { stroke-opacity: 1;   stroke-width: 3.5; }
  100% { stroke-opacity: 1;   stroke-width: 2; }
}
.hnc-rrd__cite-path.is-flashing {
  animation: hnc-rrd-cite-line-flash 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 9. Common header / chip / meta ========== */

.hnc-rrd__chip {
  display: inline-block;
  font-family: var(--rrd-font-mono);
  font-size: 14.3px;
  padding: 3px 8px;
  background: var(--rrd-coral);
  color: var(--rrd-paper);
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hnc-rrd__title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.hnc-rrd__h1 {
  margin: 6px 0 0;
  font-family: var(--rrd-font-serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--rrd-ink);
  letter-spacing: -0.5px;
}
.hnc-rrd__meta {
  font-family: var(--rrd-font-mono);
  font-size: 14.3px;
  color: var(--rrd-ink-3);
}

/* ========== 10. Tab switcher (study materials, vocab buckets, etc.) ========== */

.hnc-rrd__tabs {
  display: flex;
  gap: 4px;
  background: var(--rrd-paper-deep);
  padding: 4px;
  border-radius: 8px;
}
.hnc-rrd__tab {
  padding: 6px 14px;
  border-radius: 6px;
  color: var(--rrd-ink-3);
  font-size: 16.9px;
  cursor: pointer;
}
.hnc-rrd__tab.is-active {
  background: var(--rrd-paper);
  color: var(--rrd-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.hnc-rrd__tab .count {
  font-family: var(--rrd-font-mono);
  font-size: 14.3px;
  opacity: 0.6;
  margin-left: 3px;
}

/* ========== 11. Body wrapper + max-width ========== */

.hnc-rrd__body {
  max-width: 1360px;
  margin: 0 auto;
  padding: 28px 32px 64px;
  position: relative;
  z-index: 1;
}