@import url("./seasonal-dashboard.css");

/* A vertical picker unfolds below a single fixed toolbar slot. */
html[data-season][data-season-page] body aside.seasonal-preview {
  --preview-ink: var(--season-ink, #143e40);
  --preview-paper: var(--season-paper, #fff);
  --preview-border: var(--season-control-border, #92b7a8);
  --preview-focus: var(--season-accent, #176553);
  position: relative;
  z-index: 18;
  display: block;
  box-sizing: border-box;
  flex: 0 0 44px;
  width: 44px;
  max-width: none;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--preview-ink);
  box-shadow: none;
  font: 500 13px/1.4 "Noto Sans Thai", Tahoma, system-ui, sans-serif;
  color-scheme: light;
}
html[data-season][data-season-page][data-season-surface="dark"] body aside.seasonal-preview {
  --preview-ink: var(--season-on-deep, #ecfbf8);
  --preview-paper: var(--season-deep-2, #0d2d2e);
  --preview-border: var(--season-muted-on-deep, #9abbb5);
  --preview-focus: var(--season-accent-on-deep, #83e6bd);
  color-scheme: dark;
}
html[data-season][data-season-page] body aside.seasonal-preview .seasonal-preview__dock {
  position: absolute;
  inset: -5px -5px auto auto;
  width: 54px;
  max-width: none;
  height: 54px;
  pointer-events: none;
}
html[data-season][data-season-page] body aside.seasonal-preview .seasonal-preview__choices {
  position: absolute;
  top: 54px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  box-sizing: border-box;
  width: 54px;
  height: 160px;
  margin: 0;
  padding: 7px 4px;
  border: 1px solid var(--preview-border);
  border-radius: 999px;
  background: var(--preview-paper);
  box-shadow: 0 2px 8px #102e320d;
  opacity: 0;
  clip-path: inset(0 0 100% 0 round 27px);
  transform: translateX(0);
  pointer-events: none;
  visibility: hidden;
  transition: clip-path 280ms cubic-bezier(.22,.7,.25,1), opacity 180ms ease, visibility 0s linear 280ms;
}
html[data-season][data-season-page] body aside.seasonal-preview[data-expanded="true"] .seasonal-preview__dock { pointer-events: auto; }
/* A narrow pointer bridge connects the trigger and tray without covering links. */
html[data-season][data-season-page] body aside.seasonal-preview[data-expanded="true"] .seasonal-preview__dock::after {
  content: "";
  position: absolute;
  right: 0;
  top: 49px;
  width: 49px;
  height: 5px;
}
html[data-season][data-season-page] body aside.seasonal-preview[data-expanded="true"] .seasonal-preview__choices {
  opacity: 1;
  clip-path: inset(0 round 27px);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
html[data-season][data-season-page] body aside.seasonal-preview .seasonal-preview__button {
  --season-button-paper: linear-gradient(135deg, #fff, #e7edf0);
  --season-button-ink: #25424b;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--season-button-ink);
  background: var(--season-button-paper);
  box-shadow: inset 0 1px 1px #ffffffb3;
  font: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
html[data-season][data-season-page] body aside.seasonal-preview .seasonal-preview__toggle {
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 5px;
  pointer-events: auto;
  border-color: var(--preview-border);
  box-shadow: inset 0 1px 1px #ffffffb3, 0 2px 8px #102e3212;
}
html[data-season][data-season-page] body aside.seasonal-preview [data-season-preview="winter"],
html[data-season][data-season-page] body aside.seasonal-preview[data-preview-season="winter"] .seasonal-preview__toggle {
  --season-button-paper: linear-gradient(135deg, #f6fcff, #b8dcf9);
  --season-button-ink: #17466e;
}
html[data-season][data-season-page] body aside.seasonal-preview [data-season-preview="summer"],
html[data-season][data-season-page] body aside.seasonal-preview[data-preview-season="summer"] .seasonal-preview__toggle {
  --season-button-paper: linear-gradient(135deg, #ffe6be, #de9d65);
  --season-button-ink: #62320e;
}
html[data-season][data-season-page] body aside.seasonal-preview [data-season-preview="rainy"],
html[data-season][data-season-page] body aside.seasonal-preview[data-preview-season="rainy"] .seasonal-preview__toggle {
  --season-button-paper: linear-gradient(135deg, #e0f3dc, #91c4a5);
  --season-button-ink: #154c35;
}
html[data-season][data-season-page] body aside.seasonal-preview .seasonal-preview__button[aria-pressed="true"] {
  border-color: var(--season-button-ink);
  box-shadow: inset 0 0 0 2px #ffffffb3, 0 0 0 1px var(--preview-border);
}
html[data-season][data-season-page] body aside.seasonal-preview .seasonal-preview__button:focus-visible {
  outline: 2px solid var(--preview-focus);
  outline-offset: 2px;
}
html[data-season][data-season-page] body aside.seasonal-preview .seasonal-preview__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 23px;
}
html[data-season][data-season-page] body aside.seasonal-preview .seasonal-preview__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Preserve the button slot while editing so neighbouring actions never move. */
html[data-season][data-season-page] body aside.seasonal-preview[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}
html[data-season][data-season-page] body aside.seasonal-preview--standalone {
  position: fixed;
  top: 16px;
  right: 20px;
}
.knowledge-header.seasonal-preview-host { position: relative; }
.knowledge-header.seasonal-preview-host > nav { margin-left: auto; }
html[data-season][data-season-page] .knowledge-header > aside.seasonal-preview {
  flex-basis: 44px;
  width: 44px;
}
@media (max-width: 850px) {
  header.knowledge-header.seasonal-preview-host { gap: 8px; }
  header.knowledge-header.seasonal-preview-host > nav { order: 3; flex-basis: 100%; }
  html[data-season][data-season-page] header.knowledge-header.seasonal-preview-host :is(.knowledge-brand, .knowledge-brand img) { width: 128px; }
  header.knowledge-header.seasonal-preview-host .knowledge-menu-button {
    order: 0;
    margin-left: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 13px;
  }
  html[data-season][data-season-page] header.knowledge-header.seasonal-preview-host .knowledge-brand {
    order: 1;
    margin-inline: auto;
  }
  html[data-season][data-season-page] .knowledge-header > aside.seasonal-preview {
    order: 2;
    flex-basis: 44px;
    width: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-season][data-season-page] body aside.seasonal-preview :is(.seasonal-preview__choices, .seasonal-preview__button) { transition: none; }
  html[data-season][data-season-page] .knowledge-header .knowledge-brand { transition: none; }
}
@media print {
  html[data-season][data-season-page] body aside.seasonal-preview { display: none !important; }
}


/* Seasonal colours come from seasonal-theme.js. Rainy season keeps every original rule. */
html:is([data-season="winter"], [data-season="summer"])[data-season-surface="light"] {
  color-scheme: light;
  --ink: var(--season-ink);
  --ink-soft: var(--season-muted);
  --muted: var(--season-muted);
  --soft: var(--season-muted);
  --forest: var(--season-deep);
  --forest-2: var(--season-accent);
  --mint: var(--season-soft);
  --mint-strong: var(--season-soft-strong);
  --cream: var(--season-page);
  --paper: var(--season-paper);
  --card: var(--season-paper);
  --green: var(--season-accent);
  --navy: var(--season-deep);
  --deep: var(--season-deep);
  --teal: var(--season-accent);
  --line: var(--season-border);
  --shadow: var(--season-shadow);
  --knowledge-ink: var(--season-ink);
  --knowledge-muted: var(--season-muted);
  --knowledge-paper: var(--season-page);
  --knowledge-border: var(--season-border);
  --knowledge-accent: var(--season-accent);
  color: var(--season-ink);
  background: var(--season-page);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-surface="light"] body {
  color: var(--season-ink);
  background: var(--season-page);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-surface="dark"] {
  color-scheme: dark;
  --ink: var(--season-on-deep);
  --muted: var(--season-muted-on-deep);
  --deep: var(--season-deep);
  --sea: var(--season-deep);
  --panel: color-mix(in srgb, var(--season-deep-2) 86%, transparent);
  --mint: var(--season-accent-on-deep);
  --line: color-mix(in srgb, var(--season-accent-on-deep) 30%, transparent);
  color: var(--season-on-deep);
  background: var(--season-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-surface="dark"] body {
  color: var(--season-on-deep);
  background: radial-gradient(ellipse at 80% 0%, var(--season-deep-2), transparent 36rem), var(--season-deep);
}
/* Brand marks only: photographs and diagrams retain their original colours. */
html:is([data-season="winter"], [data-season="summer"])[data-season-surface="light"] :is(.knowledge-header .knowledge-brand img, .site-header .brand img, .site-header > a > img) {
  filter: var(--season-logo-filter);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-surface="light"] :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-surface="dark"] :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--season-accent-on-deep);
}

/* Public registry and the knowledge library share a light seasonal surface. */
html:is([data-season="winter"], [data-season="summer"]) :is(.knowledge-header, .knowledge-header.knowledge-menu-open nav, .knowledge-menu-button, .knowledge-card, .knowledge-search, .knowledge-glossary, .knowledge-illustration, .lesson, .fin-comparison, .variety-profile, .knowledge-sources, .variety-table) {
  background: var(--season-paper);
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"]) :is(.knowledge-header a, .knowledge-main a, .knowledge-footer a, .knowledge-card span, .reference-profile h2, .reference-profile .variety-table td, .reference-hero .reference-title) {
  color: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"]) :is(.knowledge-header nav a.nav-login, .reference-button, .reference-hero__summary span, .knowledge-glossary dt, .variety-table th, .lesson aside, .variety-origin, .fin-summary-grid article, .knowledge-note, .body-caution) {
  color: var(--season-ink);
  background: var(--season-soft);
  border-color: var(--season-control-border);
}
html:is([data-season="winter"], [data-season="summer"]) :is(.knowledge-header nav a.nav-login:hover, .reference-button:hover, .knowledge-card:hover) {
  border-color: var(--season-accent);
  background-color: var(--season-soft);
}
html:is([data-season="winter"], [data-season="summer"]) :is(.knowledge-search input, .knowledge-search select) {
  color: var(--season-ink);
  background: var(--season-paper);
  border-color: var(--season-control-border);
  accent-color: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"]) :is(.reference-profile .variety-table th, .reference-profile .variety-table td.reference-missing, .reference-hero p.reference-hero__name, .knowledge-breadcrumb, .knowledge-hero > span) {
  color: var(--season-muted);
}
html:is([data-season="winter"], [data-season="summer"]) .reference-hero__media {
  background: var(--season-deep);
}
html:is([data-season="winter"], [data-season="summer"]) .reference-hero__media figcaption {
  color: var(--season-on-deep);
  background: var(--season-deep-2);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .hero {
  background: var(--season-page);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.hero .eyebrow, .medaka-learning .eyebrow, .varieties .eyebrow, .directory .eyebrow, .hero h1 em, .stats strong, .filters-more summary, .filters-reset, .variety-empty a) {
  color: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.hero__content > p, .hero-filters label, .active-filters strong) {
  color: var(--season-muted);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.hero-search, .hero-filters) {
  background: color-mix(in srgb, var(--season-paper) 91%, transparent);
  border-color: var(--season-border);
  box-shadow: var(--season-shadow);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.hero-search input, .hero-filters select) {
  color: var(--season-ink);
  background: var(--season-paper);
  border-color: var(--season-control-border);
  accent-color: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .hero-search input {
  background: transparent;
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .hero-search:focus-within {
  border-color: var(--season-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--season-accent) 20%, transparent), var(--season-shadow);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.hero-search button, .hero-cta__primary, .empty__actions > :first-child) {
  color: #fff;
  background: var(--season-accent);
  border-color: var(--season-accent);
  box-shadow: var(--season-shadow);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.hero-search button:hover, .hero-cta__primary:hover, .empty__actions > :first-child:hover) {
  background: var(--season-accent-strong);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.hero-cta__secondary, .active-filters button, .load-more, .trait-guide span, .empty__actions > :nth-child(n+2)) {
  color: var(--season-accent);
  background: var(--season-paper);
  border-color: var(--season-control-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.hero-cta__secondary:hover, .active-filters button:hover, .load-more:hover) {
  background: var(--season-soft);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.medaka-learning, .reference-note, .empty) {
  background: linear-gradient(120deg, var(--season-page), var(--season-soft));
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.varieties, .directory, .variety-card, .fish-card) {
  background: var(--season-paper);
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.variety-card:hover, .fish-card:hover) {
  border-color: var(--season-control-border);
  box-shadow: var(--season-shadow);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .variety-card__media {
  background: radial-gradient(ellipse at center, var(--season-deep-2), var(--season-deep) 75%);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .fish-card__media {
  background: radial-gradient(ellipse at center, var(--season-deep-2), var(--season-deep) 75%);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .fish-card__facts span {
  color: var(--season-ink);
  background: var(--season-soft);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.stats div, .fish-card__owner, .filters-more__content) {
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .medaka-learning .knowledge-card::before {
  background-image: linear-gradient(to right, var(--season-paper), color-mix(in srgb, var(--season-paper) 92%, transparent) 18%, color-mix(in srgb, var(--season-paper) 45%, transparent) 60%, transparent), var(--knowledge-card-image);
}
/* The image fades into paper; keep that same canvas during hover and focus. */
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .medaka-learning .knowledge-card:is(:hover, :focus-visible) {
  background-color: var(--season-paper);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .medaka-learning .knowledge-card__arrow {
  background: var(--season-paper);
  box-shadow: 0 0 0 7px var(--season-paper);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .knowledge-card__icon {
  /* Legacy icon colour is important; retain that cascade level here. */
  color: var(--season-accent) !important;
  background: var(--season-soft);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.trust, body > footer) {
  color: var(--season-on-deep);
  background: var(--season-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.trust p, body > footer p) {
  color: var(--season-muted-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] :is(.trust .eyebrow, .trust-grid article > span, body > footer a) {
  color: var(--season-accent-on-deep);
}
@media (max-width: 1050px) {
  html:is([data-season="winter"], [data-season="summer"])[data-season-page="public"] .hero__content {
    background: linear-gradient(90deg, color-mix(in srgb, var(--season-page) 96%, transparent), color-mix(in srgb, var(--season-page) 85%, transparent) 48%, color-mix(in srgb, var(--season-page) 40%, transparent));
  }
}

/* Registration, legal content and the downloadable breeder guide. */
html:is([data-season="winter"], [data-season="summer"])[data-season-page="register"] :is(.intro, .fish-art) {
  background: linear-gradient(135deg, var(--season-deep), var(--season-deep-2));
  color: var(--season-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="register"] :is(.intro > p, .intro .eyebrow, .benefits span) {
  color: var(--season-muted-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="register"] :is(a, .capacity b, .signup-card .eyebrow) {
  color: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="register"] .intro .site-header > a:last-child {
  color: var(--season-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="register"] :is(.signup-card, .capacity > div span, form input) {
  background: var(--season-paper);
  color: var(--season-ink);
  border-color: var(--season-control-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="register"] .capacity {
  background: var(--season-soft);
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="register"] .capacity-note {
  color: var(--season-ink);
  background: var(--season-soft);
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="register"] form button {
  color: #fff;
  background: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="register"] form button:hover {
  background: var(--season-accent-strong);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="terms"] .terms-hero {
  background: linear-gradient(135deg, var(--season-deep), var(--season-deep-2));
  color: var(--season-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="terms"] :is(.terms-hero p, .terms-hero span) {
  color: var(--season-muted-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="terms"] :is(aside, article, .benefit-grid div) {
  background: var(--season-paper);
  border-color: var(--season-border);
  box-shadow: var(--season-shadow);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="terms"] :is(section, aside a) {
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="terms"] :is(section h2, aside strong, .benefit-grid strong, aside a:hover) {
  color: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="terms"] :is(aside a, .benefit-grid span) {
  color: var(--season-muted);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="terms"] .terms-summary {
  background: var(--season-soft);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="terms"] .terms-summary span {
  color: #fff;
  background: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="terms"] footer {
  color: var(--season-on-deep);
  background: var(--season-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="terms"] footer span {
  color: var(--season-muted-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="guide"] .guide-header {
  background: color-mix(in srgb, var(--season-deep) 96%, transparent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="guide"] :is(.hero-visual, .hero-card) {
  background: linear-gradient(145deg, var(--season-deep-2), var(--season-deep));
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="guide"] .notice {
  background: var(--season-soft);
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="guide"] :is(.guide-toc, .section-number, .secondary-button) {
  background: var(--season-paper);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="guide"] {
  --mint: var(--season-control-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="guide"] :is(.flow-note, .how-to, .callout:not(.callout--warning), code, th) {
  color: var(--season-ink);
  background: var(--season-soft);
  border-color: var(--season-control-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="guide"] :is(.steps li, .feature-grid article, .workflow-list a, table, details) {
  background: var(--season-paper);
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="knowledge"] .learning-hub-hero::before {
  background-image: linear-gradient(to right, var(--season-page), color-mix(in srgb, var(--season-page) 98%, transparent) 32%, color-mix(in srgb, var(--season-page) 88%, transparent) 52%, color-mix(in srgb, var(--season-page) 20%, transparent) 78%, transparent), url('./images/knowledge/medaka-learning-hero.webp');
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="knowledge"] .learning-hub-hero .lesson-start {
  color: #fff;
  background: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="knowledge"] :is(.chapter-card .chapter-number, .chapter-card .chapter-cta) {
  color: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="knowledge"] :is(.lesson-toc, .lesson-checklist, .lesson-diagram, .lesson-reading code, .lesson-table-wrap th, .lesson-pagination a, .lesson-section blockquote) {
  color: var(--season-ink);
  background: var(--season-soft);
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="knowledge"] :is(.lesson-section, .lesson-cover) {
  background: var(--season-paper);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="knowledge"] :is(.lesson-diagram figcaption, .lesson-table-wrap th, .lesson-table-wrap td) {
  border-color: var(--season-border);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="knowledge"] .lesson-diagram figcaption {
  color: var(--season-muted);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="knowledge"] .lesson-table-wrap tr:nth-child(even) {
  background: var(--season-page);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="knowledge"] :is(.reading-paths .knowledge-card, .lesson-section blockquote) {
  border-color: var(--season-control-border);
}

/* Dark passport and operational pages use the same hue with light type. */
html:is([data-season="winter"], [data-season="summer"])[data-season-surface="dark"] :is(.fish-photo-view, .passport-card, #scan-app .card, .survey-success, .survey-shell form, .survey-main form, .survey-layout form) {
  background: linear-gradient(145deg, var(--season-deep), var(--season-deep-2));
  border-color: var(--line);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="passport-card"] .passport-card::before {
  background: radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--season-accent-on-deep) 22%, transparent), transparent 32%), repeating-radial-gradient(ellipse at 105% 110%, transparent 0 7mm, color-mix(in srgb, var(--season-accent-on-deep) 8%, transparent) 7.2mm 7.5mm);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-surface="dark"] :is(.print-card-link, #print-card, .form-actions #next, .form-actions #submit, .survey-success a) {
  color: var(--season-deep);
  background: var(--season-accent-on-deep);
  border-color: var(--season-accent-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-surface="dark"] :is(.print-card-link:hover, #print-card:hover, .form-actions #next:hover, .form-actions #submit:hover) {
  background: var(--season-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="survey"] :is(form, .survey-success) {
  background: linear-gradient(160deg, var(--season-deep-2), var(--season-deep));
  border-color: var(--line);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="survey"] :is(input, select, textarea, .choice-grid label, .consent-box) {
  color: var(--season-on-deep);
  background: var(--season-deep);
  border-color: var(--season-muted-on-deep);
  accent-color: var(--season-accent-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="survey"] :is(label > span, legend, .step-heading h2, .survey-success h2) {
  color: var(--season-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="survey"] :is(small, #step-dots) {
  color: var(--season-muted-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="survey"] .choice-grid label:has(input:checked) {
  border-color: var(--season-accent-on-deep);
  background: var(--season-deep-2);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="survey"] :is(input, select, textarea):focus {
  outline-color: var(--season-accent-on-deep);
  border-color: var(--season-accent-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="share"] .card {
  color: var(--season-on-deep);
  background: var(--season-deep-2);
  border-color: var(--line);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="share"] :is(p, a) {
  color: var(--season-muted-on-deep);
  border-color: var(--season-muted-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="share"] small {
  color: var(--season-accent-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="share"] button {
  color: #fff;
  background: var(--season-accent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="scan"] :is(input, textarea) {
  color: var(--season-on-deep);
  background: var(--season-deep);
  border-color: var(--season-muted-on-deep);
  accent-color: var(--season-accent-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="scan"] :is(.tag, .secondary) {
  border-color: var(--season-muted-on-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="scan"] :is(button, .button):not(.secondary) {
  color: var(--season-deep);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="scan"] #scan-app .card.warning {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}
html:is([data-season="winter"], [data-season="summer"])[data-season-page="scan"] #scan-app .card.error {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
/* Printing knowledge documents keeps the existing neutral paper treatment. */
@media print {
  html:is([data-season="winter"], [data-season="summer"])[data-season-page="knowledge"] .learning-hub-hero {
    background: none;
    color: var(--season-ink);
  }
}