/* Mist forest refinement — preserve the supplied imagery, copy and interaction.
 * Canvas: distant blue woodland. Reading: ivory mist. Action: deep blue/cyan.
 * Image crops vary by surface; opaque-enough reading veils protect legibility.
 * The forest remains still, leaving motion to the existing growing trees.
 */
:root {
  --mist-image: url('/assets/blue-mist-forest-v1.png');
  --bg: #e5eef2;
  --panel: #f0f5f7;
  --paper: #f0f5f7;
  --paper-soft: #e4eef4;
  --line: #b9cddd;
  --text: #182f46;
  --text-2: #425e73;
  --muted: #425e73;
  --blue: #1262ae;
  --mist-shadow: 0 12px 32px #214e7214;
}

html { background: var(--bg); }
body { background: transparent; color: var(--text); isolation: isolate; }
body::before {
  content: '';
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, #faf8f1eb 0%, #edf4f8b8 44%, #d4e7f15c 100%),
    var(--mist-image) 58% center / cover no-repeat;
}
.sidebar {
  background: linear-gradient(100deg, #f8faf6eb, #dfedf6db) !important;
  border-color: #759bb438 !important;
  backdrop-filter: blur(18px);
}
.nav-item { color: #425e73 !important; }
.nav-item.active {
  background: linear-gradient(120deg, #ffffffdc, #e0effbd9) !important;
  color: #124c7c !important;
  box-shadow: 0 4px 14px #275b8021 !important;
}
.brand small { color: #4c687c !important; }
.app-body main { padding-top: 32px; }

/* The reference's ivory-to-woodland transition, without a rectangular seam. */
.page-heading {
  background: linear-gradient(90deg, #faf8f1ed 0%, #f5f6eee8 29%, #e7f0f58c 54%, #80acce12 76%),
    var(--mist-image) 58% center / cover;
  border: 0;
  border-radius: 0;
  margin-inline: -30px;
  padding-left: 30px;
  min-height: 340px;
  box-shadow: none;
  mask-image: linear-gradient(#000 90%, transparent);
}
.page-heading::before, .page-heading::after { content: none; }
.page-heading h1 { letter-spacing: -.025em; text-wrap: balance; }
.page-heading p { color: #425e73; }
.page-heading > .collection-heading-actions { left: 30px; bottom: 34px; }
.page-tree-orb > span { color: #173f60; text-shadow: 0 1px 4px #fff; }
.page-tree-orb { right: 38px; }
.eyebrow, .section-kicker, .serif-accent, .source-type { color: #1262ae; }
.text-btn, .catalog-results a { color: #15578d; }
.text-btn:hover, .catalog-results a:hover { color: #0b3c65; }
.muted, .page-footer { color: #425e73; }
.primary-btn {
  color: #102f46;
  background: linear-gradient(120deg, #9be5f4, #5ac6e6);
  border-color: #8ed9e9;
  box-shadow: 0 7px 18px #24648824;
}
.primary-btn:hover:not(:disabled) { color: #102f46; background: #8adeef; }
.secondary-btn, .account-btn {
  color: #164766;
  background: linear-gradient(120deg, #fcfdf9e8, #d9eaf6e6);
  border-color: #aec8da;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #1262ae;
  outline-offset: 3px;
}

/* Near mist: sources and controls are quiet, but never detached white boxes. */
.identity-strip, .basket-group, .source-card, .evidence-list, .collection-panel,
.achievement-panel, .notice, .bottom-callout {
  background: linear-gradient(105deg, #f6f9f4f2, #ecf4f7df 56%, #c5deefad),
    var(--mist-image) 50% 60% / cover !important;
  border-color: transparent !important;
  box-shadow: var(--mist-shadow);
}
.identity-strip span, .basket-group p, .basket-list p, .source-card > p { color: #425e73; }
.basket-group > header { background: #e9f3f769; border-color: #9ebbd552; }
.basket-list article { border-color: #9ebbd54a; background: #f8fbfa24; }
.basket-list article:hover { background: #ffffff65; }
.theme-card, .catalog-theme {
  --crop: 50% 55%;
  background: linear-gradient(100deg, #f9faf4f5 0%, #eaf2f4e3 46%, #d5e8f69c 75%, #c6ddef80),
    var(--mist-image) var(--crop) / auto 165%;
  border-color: transparent;
  border-radius: 16px;
  box-shadow: var(--mist-shadow);
  color: #182f46;
  min-height: 182px;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.theme-card:nth-child(2), .catalog-theme:nth-child(2) { --crop: 20% 80%; }
.theme-card:nth-child(3), .catalog-theme:nth-child(3) { --crop: 85% 25%; }
.theme-card:nth-child(4), .catalog-theme:nth-child(4) { --crop: 5% 100%; }
.theme-card:nth-child(5), .catalog-theme:nth-child(5) { --crop: 70% 70%; }
.theme-card:nth-child(6), .catalog-theme:nth-child(6) { --crop: 100% 100%; }
.theme-card:hover, .catalog-theme:hover {
  border-color: #7facc6;
  box-shadow: 0 15px 30px #214e7226;
}
.theme-card small, .catalog-theme small { color: #36566e; }
.theme-card > span:last-child { color: #125687; }
.theme-symbol, .catalog-theme > span {
  background: #f4faf9b8;
  color: #165c91;
  border: 1px solid #ffffffbf;
}

/* Deep woodland gives trees depth; tree labels sit on their own dark mist. */
.theme-forest-shell {
  background-image: linear-gradient(145deg, #264e7066, #0c345d8c), var(--mist-image) !important;
  background-position: center, 62% center !important;
  border-color: transparent !important;
  box-shadow: 0 18px 42px #214e7226 !important;
}
.forest-title span { color: #fff0d0; }
.forest-title strong { color: #fff; }
.theme-tree-copy {
  background: #103651d9;
  border: 1px solid #c6e5f570;
  padding: 9px 14px;
  border-radius: 12px;
}
.theme-tree-copy strong { color: #fff; }
.theme-tree-copy small { color: #e2f0f7; }
.theme-guide-card {
  background: linear-gradient(160deg, #f6f9f3f2, #e4f0f5e0 55%, #c4deedb8),
    var(--mist-image) 82% bottom / cover;
  border-color: transparent;
  box-shadow: var(--mist-shadow);
}
.theme-guide-card h3, .theme-progress-copy strong { color: #182f46; }
.theme-guide-card p, .theme-progress-copy small, .theme-material-list small { color: #425e73; }
.theme-guide-card .section-kicker { color: #1262ae; }
.theme-material-preview a, .theme-material-preview p { color: #294e69; border-color: #9dbbd05c; }
.theme-material-preview a span { color: #155c90; }
.theme-progress { background: #b9d2e1; }
.theme-progress span { background: #287faa; box-shadow: none; }
.points-inline { color: #3d6371; }
.growth-mini { background: #eff6f6b8; border-color: #b9d2e178; }
.theme-material-list > *, .theme-progress { border-color: #98b7ce60; }
.forest-overview > span { background: #ecf5f8b8; border-color: #a9c6da80; color: #36566e; box-shadow: none; }

/* Practice and community use a reading veil over the same landscape. */
.practice-summary, .practice-card, .social-banner, .sharing-card, .peer-card, .learning-pulse {
  background-image: linear-gradient(100deg, #f5f9f4f5, #e9f3f7eb 52%, #c0daedb8), var(--mist-image) !important;
  background-position: center, 60% center !important;
  color: #182f46 !important;
  border-color: transparent !important;
  box-shadow: var(--mist-shadow) !important;
}
.practice-summary::after, .practice-card::after, .social-banner::after,
.sharing-card::after, .peer-card::after, .learning-pulse::after { content: none; }
.practice-summary h2, .practice-card h3, .social-banner h2, .sharing-card h3,
.peer-card h3, .learning-pulse h2, .practice-summary .large-number { color: #182f46 !important; text-shadow: none; }
.practice-summary p, .practice-summary > div > span:last-child, .practice-card p,
.social-banner p, .sharing-card p, .peer-card p, .peer-role, .sharing-card small,
.learning-pulse-live { color: #425e73 !important; }
.social-banner .section-kicker, .learning-pulse .section-kicker { color: #1262ae !important; }
.practice-card .status-pill, .social-banner .tag, .sharing-card .tag, .peer-card .tag,
.share-topic, .peer-card .matching-reason { background: #e0edf6dc !important; color: #244c69 !important; border-color: #9dbdd380 !important; }
.share-topic.selected { background: #1a5779 !important; color: #fff !important; }
.pulse-card { background: #f5faf9a6; border-color: #a3bed180; backdrop-filter: none; }
.pulse-card h3 { color: #182f46; }
.pulse-card small, .pulse-card p, .pulse-status { color: #425e73; }
.pulse-icon { color: #18597e; background: #d4e8f5; border-color: #9cbed3; }
.pulse-status { background: #e2f0f5; border-color: #acc8d9; }

/* Focused task: distant trees at the margins, clear paper under the question. */
.modal-backdrop { background: #14375369; backdrop-filter: blur(10px); }
.modal {
  background: linear-gradient(110deg, #f9fbf7fa, #edf5f8f2 58%, #d4e8f4d9),
    var(--mist-image) 75% center / cover !important;
  border-color: #e7f2f9 !important;
  color: #182f46 !important;
  box-shadow: 0 28px 85px #0d2d5052;
}
.modal-close { color: #244c69; background: #deedf6; }
.modal-lead, .source-disclaimer { color: #425e73 !important; }
.catalog-scene, .catalog-results article, .account-option, .recall-answer,
.example-box, .source-link {
  color: #182f46;
  border-color: #aec7d987;
  background: linear-gradient(110deg, #f8fcf9d9, #dcecf5b8);
}
.catalog-scene small, .catalog-results small, .account-option p, .account-option small,
.source-link small, .recall-answer small { color: #425e73; }
.keyword-cloud button { background: #e2eff8; color: #1b5279; border-color: #a9c7dc; }
.keyword-cloud button:hover { background: #c8e2f2; border-color: #4d87b0; }
.account-option.chosen { background: #dfedf2e6; border-color: #5c91ac; }
.detail-hero, .detail-footer, .challenge-footer { border-color: #b5ccdd; }
.answer-option { background: #f3f8fa; border-color: #b0c8d8; color: #29475e; }
.modal .example-box, .modal .source-link, .modal .answer-option { background: #f3f8fa !important; border-color: #b0c8d8 !important; color: #29475e; }
.modal .answer-option:hover:not(:disabled), .modal .answer-option.chosen { background: #dbeefa !important; border-color: #387bab !important; color: #123b5c !important; }
.modal .answer-option.correct { background: #e3f3e8 !important; color: #20583c !important; border-color: #528e69 !important; }
.modal .answer-option.incorrect { background: #f9e9e6 !important; color: #83382c !important; border-color: #b56b5f !important; }
.challenge-topic, .challenge-topic > span, .challenge-label, .challenge-label > span,
.challenge-footer > .muted, .answer-note { color: #425e73; }
.practice-summary small { color: #425e73; }
.icon-btn { color: #285c7e; }
.progress-track { background: #c3d9e6; }
.progress-track > span { background: #287faa; }
.answer-feedback { background: #e8f3ed; border-color: #a7c6b5; color: #244e3b; }
.answer-feedback.reflect { background: #f7efe3; border-color: #cbb78e; color: #644c28; }
.answer-feedback p, .feedback-principle { color: #365448; }
.answer-feedback.reflect p, .answer-feedback.reflect .feedback-principle { color: #644c28; }
.answer-feedback .growth-feedback { color: #244e3b; background: #d9ede2; border-color: #a3c6b3; }
.answer-feedback.reflect .growth-feedback { color: #644c28; background: #eee0c9; border-color: #cbb78e; }
.answer-growth-visual > span { color: #315746; }
.recall-answer textarea { background: #f8fcfd; color: #29475e; border-color: #aec8da; }
.answer-letter { color: #185785; background: #e3eff7; border-color: #86aec9; }
.answer-growth-visual .tree-art-3d { flex: 0 0 180px; width: 180px; height: 170px; overflow: hidden; }
.page-footer { border-color: #9cbad050; }

@media (max-width: 1100px) {
  .page-heading { padding-left: 30px; }
  .page-heading > .collection-heading-actions { bottom: 26px; }
}
@media (max-width: 760px) {
  body::before { background-position: center, 65% center; }
  .app-body main#main-content { padding-top: 16px; padding-left: 16px !important; padding-right: 16px !important; }
  .page-heading {
    margin-inline: -16px;
    padding: 30px 118px 35px 16px;
    min-height: 285px;
    background-image: linear-gradient(90deg, #faf8f1f2 0%, #f3f6f0d9 43%, #d7e9f483 72%, #99bdd937), var(--mist-image);
  }
  .page-heading h1 { font-size: clamp(34px, 7.5vw, 52px); line-height: 1.22; }
  .page-heading p { line-height: 1.8; }
  .page-heading > .collection-heading-actions { left: auto; bottom: auto; }
  .page-tree-orb { right: -8px; opacity: .82; }
  .theme-card, .catalog-theme { min-height: 166px; }
  .forest-title strong { font-size: 17px; }
  .theme-tree-copy { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-card, .catalog-theme { transition: none; }
  .theme-card:hover, .catalog-theme:hover { transform: none; }
}