/* KNPM v98.3: layered water along the header and consistent section colours.
   Answer status colours and the original app behaviour are intentionally kept. */
:root {
  --home-ink: #087673; --home-soft: #e7f4f0; --home-line: #b9ddd4;
  --learn-ink: #245e8d; --learn-soft: #edf5fc; --learn-line: #c6dff1;
  --flash-ink: #76509a; --flash-soft: #f5effb; --flash-line: #dfcfee;
  --exam-ink: #96501d; --exam-soft: #fdf2e6; --exam-line: #edd3b7;
  --materials-ink: #116a7b; --materials-soft: #eaf6f8; --materials-line: #bddfe6;
  --database-ink: #515e99; --database-soft: #f0f2fb; --database-line: #d3daf1;
  --on-section: #fff;
  --header-start: #eef8fc; --header-end: #f7fbfc;
  --wave-light: #c5e6f1; --wave-middle: #88c9de; --wave-deep: #348fb7;
  --wave-back: #e0eff5;
}
html[data-theme=dark] {
  --home-ink: #8bd3c6; --home-soft: #203c38; --home-line: #3c665f;
  --learn-ink: #9bc8ed; --learn-soft: #223746; --learn-line: #3b5e78;
  --flash-ink: #d1b3ef; --flash-soft: #342c44; --flash-line: #62507a;
  --exam-ink: #edbf87; --exam-soft: #3b3025; --exam-line: #756046;
  --materials-ink: #8ed5e0; --materials-soft: #203a41; --materials-line: #3e6973;
  --database-ink: #b6c1f1; --database-soft: #2c3249; --database-line: #535f87;
  --on-section: #11232b;
  --header-start: #152d3a; --header-end: #1b323c;
  --wave-light: #28576e; --wave-middle: #377e9c; --wave-deep: #57acc5;
  --wave-back: #203e50;
}

/* Match the existing page gutters, so the water reaches the edges on a phone. */
.content { --header-gutter: 42px; }
.topbar {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  margin-bottom: 0;
}
.topbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--header-gutter));
  background: linear-gradient(90deg, var(--header-start), var(--header-end));
  pointer-events: none;
}
.header-wave {
  height: 64px;
  margin: 0 calc(-1 * var(--header-gutter)) 20px;
  overflow: hidden;
  pointer-events: none;
}
.header-wave svg { display: block; width: 100%; height: 100%; }
.wave-layer-back { fill: var(--wave-back); }
.wave-stop-light { stop-color: var(--wave-light); }
.wave-stop-middle { stop-color: var(--wave-middle); }
.wave-stop-deep { stop-color: var(--wave-deep); }
.wave-stop-header-start { stop-color: var(--header-start); }
.wave-stop-header-end { stop-color: var(--header-end); }

/* One palette follows a section from its menu item to its heading and cards. */
:is(#home, [data-tab=home], [data-open-tab=home]) {
  --section-ink: var(--home-ink); --section-soft: var(--home-soft); --section-line: var(--home-line);
}
:is(#learn, [data-tab=learn], [data-open-tab=learn], #homeTopics) {
  --section-ink: var(--learn-ink); --section-soft: var(--learn-soft); --section-line: var(--learn-line);
}
:is(#flashcards, [data-tab=flashcards], [data-open-tab=flashcards]) {
  --section-ink: var(--flash-ink); --section-soft: var(--flash-soft); --section-line: var(--flash-line);
}
:is(#exam, [data-tab=exam], [data-open-tab=exam]) {
  --section-ink: var(--exam-ink); --section-soft: var(--exam-soft); --section-line: var(--exam-line);
}
:is(#materials, #presentation, [data-tab=materials], [data-tab=presentation], [data-open-tab=presentation]) {
  --section-ink: var(--materials-ink); --section-soft: var(--materials-soft); --section-line: var(--materials-line);
}
:is(#database, [data-tab=database], [data-open-tab=database]) {
  --section-ink: var(--database-ink); --section-soft: var(--database-soft); --section-line: var(--database-line);
}
.tab-btn[data-tab] { color: var(--section-ink); }
.tab-btn[data-tab]:hover { background: var(--section-soft); }
.tab-btn[data-tab].active {
  color: var(--section-ink);
  background: var(--section-soft);
  box-shadow: inset 0 -2px 0 var(--section-ink);
  font-weight: 750;
}
:is([data-tab], [data-open-tab]):focus-visible { outline-color: var(--section-ink); }
.tab-panel .page-heading h1,
.tab-panel .page-heading .eyebrow { color: var(--section-ink); }
.tab-panel:not(#home) .page-heading .muted { color: var(--section-ink); }
.tab-panel:not(#home) .page-heading { border-left: 3px solid var(--section-line); padding-left: 17px; }
.tab-panel:not(#home) .primary {
  background: var(--section-ink);
  border-color: var(--section-ink);
  color: var(--on-section);
}
.tab-panel:not(#home) .primary:hover { filter: brightness(.94); }
.tab-panel:not(#home) :is(.secondary, .back-button, .text-button, .text-link) { color: var(--section-ink); }
.tab-panel:not(#home) .secondary { border-color: var(--section-line); }
.tab-panel:not(#home) .secondary:hover { background: var(--section-soft); }

/* Home shortcuts carry coloured text, an icon and a visible side accent. */
.quick-card[data-open-tab] {
  border-color: var(--section-line);
  background: var(--section-soft);
  box-shadow: inset 3px 0 0 var(--section-ink);
}
.quick-card[data-open-tab]:hover { border-color: var(--section-ink); }
.quick-card[data-open-tab] :is(strong, small, .quick-arrow) { color: var(--section-ink); }
.quick-card[data-open-tab] .feature-icon {
  background: var(--surface);
  color: var(--section-ink);
}
#home .text-button[data-open-tab=learn],
:is(#learn, #homeTopics) .topic-copy strong,
:is(#learn, #homeTopics) .topic-percent,
#learn :is(#subjectTitle, .subject-heading .eyebrow) { color: var(--section-ink); }
:is(#learn, #homeTopics) .feature-icon { background: var(--section-soft); color: var(--section-ink); }
:is(#learn, #homeTopics) .topic-card { border-color: var(--section-line); }
:is(#learn, #homeTopics) .topic-card:hover { border-color: var(--section-ink); }
#learn .subject-hero { border-color: var(--section-line); }
#learn .filter-chips button.active { background: var(--section-ink); border-color: var(--section-ink); color: var(--on-section); }

/* Fiszki: violet, without suggesting a correct/incorrect grade. */
#flashcards :is(.flash-progress, .flash-hint, .answer-reveal) { color: var(--section-ink); }
#flashcards .flash-card {
  border-color: var(--section-line);
  background: var(--section-soft);
  box-shadow: 0 8px 0 -3px var(--bg), 0 8px 0 -2px var(--section-line), 0 16px 0 -6px var(--bg), 0 16px 0 -5px var(--section-line);
}
#flashcards .flash-card h3 { color: var(--section-ink); }

/* Test: amber for navigation; green/red still describe the result only. */
#exam .exam-intro { background: var(--section-soft); }
#exam .exam-intro :is(h2, p, .exam-rules),
#exam .exam-options :is(h3, label),
#exam .exam-history h2,
#exam .exam-toolbar :is(.eyebrow, #examTimer) { color: var(--section-ink); }
#exam .exam-intro .feature-icon { color: var(--section-ink); background: var(--surface); }
#exam .exam-nav button.answered { color: var(--section-ink); background: var(--section-soft); border-color: var(--section-line); }
#exam .exam-nav button.active { color: var(--on-section); background: var(--section-ink); border-color: var(--section-ink); }
#exam .answer-btn.selected { border-color: var(--section-ink); background: var(--section-soft); }
#exam .answer-btn.selected .letter { background: var(--section-ink); color: var(--on-section); }

/* Materials: presentation and question bank each keep their own palette. */
.material-card[data-open-tab] { border-color: var(--section-line); border-top: 3px solid var(--section-ink); }
.material-card[data-open-tab]:hover { background: var(--section-soft); }
.material-card[data-open-tab] :is(h2, p, .text-link) { color: var(--section-ink); }
.material-card[data-open-tab] .material-art { background: var(--section-soft); color: var(--section-ink); }
#presentation .pdf-toolbar { color: var(--section-ink); background: var(--section-soft); }
#presentation .pdf-toolbar .icon-button { color: var(--section-ink); border-color: var(--section-line); }
#database .db-item { border-color: var(--section-line); }
#database :is(.db-item h3, .db-hint) { color: var(--section-ink); }

@media(min-width:1600px) { .content { --header-gutter: 54px; } }
@media(max-width:1180px) { .content { --header-gutter: 26px; } }
@media(max-width:880px) { .content { --header-gutter: 25px; } }
@media(max-width:600px) {
  .content { --header-gutter: 18px; }
  .header-wave { height: 52px; margin-bottom: 16px; }
  .tab-panel:not(#home) .page-heading { padding-left: 13px; }
}
@media(max-width:360px) { .content { --header-gutter: 14px; } }