/* Small areas of colour guide the reader; the page and story sections stay white. */
body[data-page="topic-guide"] {
  --topic-accent: #ffe29a;
  --topic-accent-strong: #a77917;
  --topic-tint: #fffaf0;
  --accent-blue: #e6eefb;
  --accent-lavender: #e9def8;
  --accent-mint: #dcf0e7;
  --accent-peach: #fbe4d4;
}
body.tasting-topic {
  --topic-accent: #e3d6f5;
  --topic-accent-strong: #8262af;
  --topic-tint: #faf7fe;
}
body.food-pairing-topic {
  --topic-accent: #d4eee3;
  --topic-accent-strong: #43816e;
  --topic-tint: #f4faf7;
}
body[data-page="topic-guide"] .story-button {
  background: var(--topic-accent);
  color: var(--navy);
  border: 1px solid #30356525;
  box-shadow: 0 4px 0 #3035650c;
}
body[data-page="topic-guide"] .story-button:hover { border-color: var(--navy); }
body[data-page="topic-guide"] .story-button:focus-visible,
body[data-page="topic-guide"] .chapter-links a:focus-visible,
body[data-page="topic-guide"] .topic-detail summary:focus-visible {
  outline: 3px solid var(--navy); outline-offset: 5px;
}
body[data-page="topic-guide"] .topic-section-heading h2::after {
  content: ""; display: block; width: 70px; height: 5px;
  margin-top: 19px; background: var(--topic-accent); border-radius: 5px;
}
body[data-page="topic-guide"] .topic-section-heading > .topic-cue {
  background: var(--topic-accent); border-radius: 17px;
}
body[data-page="topic-guide"] .reading-progress { background: #f0f1f6; }
body[data-page="topic-guide"] .reading-progress span { background: var(--topic-accent-strong); }
body[data-page="topic-guide"] .chapter-links a[aria-current] {
  border-bottom-color: var(--topic-accent-strong);
}
body[data-page="topic-guide"] .topic-section a:not(.topic-next-links a) {
  text-decoration-color: var(--topic-accent-strong); text-decoration-thickness: 2px;
}
body[data-page="topic-guide"] .topic-takeaway {
  padding: 24px 26px; background: var(--topic-tint);
  border: 1px solid #30356515; border-left: 4px solid var(--topic-accent-strong);
  border-radius: 0 18px 18px 0;
}
body[data-page="topic-guide"] .style-finder,
body[data-page="topic-guide"] .note-builder,
body[data-page="topic-guide"] .pairing-explorer {
  border-top: 5px solid var(--topic-accent); background: white;
}
body[data-page="topic-guide"] .finder-result,
body[data-page="topic-guide"] .pairing-checklist {
  background: var(--topic-tint); border-left-color: var(--topic-accent-strong);
}
body[data-page="topic-guide"] .finder-controls button,
body[data-page="topic-guide"] .aroma-controls button {
  background: var(--topic-tint); border: 2px solid #30356525;
}
body[data-page="topic-guide"] .finder-controls button:hover,
body[data-page="topic-guide"] .aroma-controls button:hover { border-color: #30356580; }
body[data-page="topic-guide"] .finder-controls button[aria-pressed="true"],
body[data-page="topic-guide"] .aroma-controls button[aria-pressed="true"] {
  background: var(--topic-accent); color: var(--navy); border-color: var(--navy);
}
body[data-page="topic-guide"] .note-field-grid select,
body[data-page="topic-guide"] .pairing-field-grid select { background: var(--topic-tint); }
body[data-page="topic-guide"] .topic-detail summary > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--topic-accent);
}
body[data-page="topic-guide"] .topic-next-links a { border-top: 4px solid var(--topic-accent); }
body[data-page="topic-guide"] .topic-next-links a:nth-child(2) { border-top-color: var(--accent-blue); }
/* Types: gentle row tints separate the grade comparisons without another label. */
.types-topic .terms-grid > div:first-child { background: #fff9e9; }
.types-topic .terms-grid > div:nth-child(2) { background: #f2f6fd; }
.types-topic .category-pair:nth-child(1) { background: #fffbf1; }
.types-topic .category-pair:nth-child(2) { background: #f5f8fd; }
.types-topic .category-pair:nth-child(3) { background: #faf6fe; }
.types-topic .category-pair:nth-child(4) { background: #f2faf6; }
.types-topic .category-pair h3 { display: inline-block; padding: 7px 12px; border-radius: 9px; background: var(--topic-accent); }
.types-topic .category-pair:nth-child(2) h3 { background: var(--accent-blue); }
.types-topic .category-pair:nth-child(3) h3 { background: var(--accent-lavender); }
.types-topic .category-pair:nth-child(4) h3 { background: var(--accent-mint); }
.types-topic .polishing-examples > span:nth-child(1) { background: #fff6dc; }
.types-topic .polishing-examples > span:nth-child(2) { background: #eef3fd; }
.types-topic .polishing-examples > span:nth-child(3) { background: #f4edfc; }
.types-topic .reference-style-grid > section { border-top: 4px solid var(--topic-accent); }
.types-topic .reference-style-grid > section:nth-child(3n+2) { border-top-color: var(--accent-mint); }
.types-topic .reference-style-grid > section:nth-child(3n) { border-top-color: var(--accent-lavender); }
.types-topic .reference-style-grid .topic-cue,
.types-topic .reading-step-number { background: var(--topic-accent); }
.types-topic .reference-style-grid > section:nth-child(3n+2) .topic-cue,
.types-topic .label-reading-steps li:nth-child(3n+2) .reading-step-number { background: var(--accent-mint); }
.types-topic .reference-style-grid > section:nth-child(3n) .topic-cue,
.types-topic .label-reading-steps li:nth-child(3n) .reading-step-number { background: var(--accent-lavender); }
/* Tasting: temperature and sensory cues provide a small visual memory aid. */
.tasting-topic .sense-steps li .topic-cue,
.tasting-topic .taste-reference > section .topic-cue { background: var(--accent-blue); }
.tasting-topic .sense-steps li:nth-child(2) .topic-cue,
.tasting-topic .taste-reference > section:nth-child(2) .topic-cue { background: var(--accent-lavender); }
.tasting-topic .sense-steps li:nth-child(3) .topic-cue,
.tasting-topic .taste-reference > section:nth-child(3) .topic-cue { background: var(--accent-mint); }
.tasting-topic .sense-steps li:nth-child(4) .topic-cue,
.tasting-topic .taste-reference > section:nth-child(4) .topic-cue { background: var(--accent-peach); }
.tasting-topic .temperature-reference > section:nth-child(1) { background: #f1f7fd; border-top: 4px solid #c3ddf2; }
.tasting-topic .temperature-reference > section:nth-child(2) { background: #fbf8f1; border-top: 4px solid #eadbb5; }
.tasting-topic .temperature-reference > section:nth-child(3) { background: #fff5ef; border-top: 4px solid #f2cfb7; }
.tasting-topic .temperature-reference > section:nth-child(1) .topic-cue { background: #deedf9; }
.tasting-topic .temperature-reference > section:nth-child(2) .topic-cue { background: #f2e8cd; }
.tasting-topic .temperature-reference > section:nth-child(3) .topic-cue { background: #fbe1ce; }
/* Food: retain the existing dish/style tag colours and extend their small accents. */
.food-pairing-topic .pairing-principles > section:nth-child(1) .topic-cue { background: var(--accent-blue); }
.food-pairing-topic .pairing-principles > section:nth-child(2) .topic-cue { background: var(--accent-mint); }
.food-pairing-topic .pairing-principles > section:nth-child(3) .topic-cue { background: var(--accent-lavender); }
.food-pairing-topic .cheese-comparisons > section:nth-child(1) { background: #fffaf0; border-top: 4px solid #f0dfa5; }
.food-pairing-topic .cheese-comparisons > section:nth-child(2) { background: #f6faf7; border-top: 4px solid #c9e5d8; }
.food-pairing-topic .cheese-comparisons > section:nth-child(3) { background: #faf7fe; border-top: 4px solid #dfcef2; }
.food-pairing-topic .cheese-comparisons > section:nth-child(1) .topic-cue { background: #f8edcd; }
.food-pairing-topic .cheese-comparisons > section:nth-child(2) .topic-cue { background: var(--accent-mint); }
.food-pairing-topic .cheese-comparisons > section:nth-child(3) .topic-cue { background: var(--accent-lavender); }
.food-pairing-topic .sauce-reference > section:nth-child(1) .topic-cue { background: var(--accent-peach); }
.food-pairing-topic .sauce-reference > section:nth-child(2) .topic-cue { background: var(--accent-mint); }
.food-pairing-topic .sauce-reference > section:nth-child(3) .topic-cue { background: #ffe0e0; }
.food-pairing-topic .sauce-reference > section:nth-child(4) .topic-cue { background: #fff0c5; }
@media(max-width:760px) {
  body[data-page="topic-guide"] .topic-takeaway { padding: 22px; }
  body[data-page="topic-guide"] .topic-section-heading h2::after { margin-top: 15px; width: 56px; }
}