/* A flowing geometric background for every app screen except the editorial landing.
   The fixed paint layer also works on iOS without background-attachment:fixed.
   No route handlers or stored learning data are involved. */
body:has(> #app > .shell),
body:has(> #app > .public-site:not(.landing-editorial)) {
  background: #081947;
  isolation: isolate;
}
body:has(> #app > .shell)::before,
body:has(> #app > .public-site:not(.landing-editorial))::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #081947;
  background-image: url('../assets/backgrounds/workspace-fluid-ribbons.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Solid reading surfaces; the artwork appears in the space around them. */
#app > .shell .main-wrap { background: transparent; }
#app > .shell .panel,
#app > .shell .card,
#app > .shell .path-card,
#app > .shell .stat,
#app > .shell .question {
  box-shadow: 0 8px 28px #2536580d, 0 1px 3px #25365804;
}
#app > .shell .sidebar {
  background-color: #101e43;
  background-image: linear-gradient(180deg, #101e43f2, #14254bf2), url('../assets/backgrounds/workspace-fluid-ribbons.webp');
  background-size: cover;
  background-position: left center;
}
#app > .public-site:not(.landing-editorial) .public-header {
  background: #ffffffd9;
  backdrop-filter: blur(12px);
}
#app > .public-site:not(.landing-editorial) .account-gate {
  background-color: #fff;
  box-shadow: 0 18px 60px #273b6814, 0 2px 6px #273b6806;
}
/* Headings painted directly over the blue artwork, never inside reading cards. */
#app > .shell .page-head {
  padding: 22px 24px;
  border: 1px solid #a1c5ff30;
  border-radius: 20px;
  background: linear-gradient(110deg, #081947df, #081947bf);
}
#app > .shell :is(.page-head, .section-head) :is(h1, h2, h3),
#app > .shell #account-main > section:not(.panel) > h2 {
  color: #f7faff;
  text-shadow: 0 2px 12px #03112d80;
}
#app > .shell .page-head p,
#app > .shell .section-head > .help {
  color: #dce9ff;
}
#app > .shell .page-head .eyebrow { color: #b6d9ff; }
#app > .shell .path-crumbs,
#app > .shell .path-crumbs .text-link,
#app > .shell #account-main > .text-link,
#app > .shell #account-main > nav:not(.panel) .text-link,
#app > .shell .footer,
#app > .shell .footer .text-link { color: #e3efff; }
/* A nested header on a light card keeps the card's existing ink colors. */
#app > .shell :is(.panel, .card, .path-card, .question, .stat) :is(.page-head, .section-head) :is(h1, h2, h3) {
  color: var(--ink);
  text-shadow: none;
}
#app > .shell :is(.panel, .card, .path-card, .question, .stat) .page-head {
  background: none;
  border: 0;
  padding: 0;
}
#app > .shell :is(.panel, .card, .path-card, .question, .stat) .page-head :is(p, .eyebrow) { color: var(--muted); }
@media (max-width: 720px) {
  body:has(> #app > .shell)::before,
  body:has(> #app > .public-site:not(.landing-editorial))::before {
    /* Preserve the colored right edge in a portrait viewport. */
    background-position: right center;
  }
}
@media (forced-colors: active) {
  body:has(> #app > .shell)::before,
  body:has(> #app > .public-site:not(.landing-editorial))::before { display: none; }
  #app > .shell .sidebar { background-image: none; }
}

@media (max-width: 720px) { #app > .shell .page-head { padding: 20px 18px; } }
@media (forced-colors: active) {
  #app > .shell .page-head { background: Canvas; border-color: CanvasText; }
  #app > .shell :is(.page-head, .section-head) :is(h1, h2, h3, p, .eyebrow),
  #app > .shell #account-main > section:not(.panel) > h2,
  #app > .shell .footer, #app > .shell .footer .text-link { color: CanvasText; text-shadow: none; }
}