/* Stage uses the saved V8 palette throughout the layout. */
@media (prefers-color-scheme: light) {
  :root[data-palette="current"] {
    --paper: #fbfaf3;
    --ink: #243b30;
    --muted: #596b5e;
    --line: #d7dfd0;
    --primary: #365e43;
    --onPrimary: #fff;
    --soft: #e6efdf;
  }
}
body { background: color-mix(in srgb, var(--soft) 74%, var(--paper)); }
#app { max-width: 1360px; }
#app header { background: var(--paper); }
.parent-layout .card, .activity-chart {
  border-radius: 19px;
  min-inline-size: 0;
}
.activity-chart {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(14px, 2vw, 24px);
}
#main .parent-overview { background: var(--soft); }
#main .activity-overview > h1 { letter-spacing: -.035em; }
.parent-banner button[aria-current="page"] { box-shadow: inset 3px 0 var(--primary); }
@media (min-width: 601px) {
  #app { border-inline: 1px solid var(--line); }
  #main.parent-layout:not(.journey) {
    grid-template-columns: clamp(155px, 18vw, 225px) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 36px);
    padding: clamp(20px, 2.4vw, 36px);
  }
  .parent-layout > .parent-banner {
    position: sticky; top: 16px;
    max-height: calc(100dvh - 32px); overflow-y: auto;
    padding: 10px; border-radius: 16px; border: 1px solid var(--line);
  }
}
@media (min-width: 1050px) {
  .parent.activity-overview {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(300px, 1.15fr);
    align-items: start;
  }
  .activity-overview > h1 { grid-column: 1 / -1; }
  .parent.activity-overview .activity-foot { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .parent-layout, .child-view { max-width: 100%; }
  .activity-overview { gap: 16px; }
  .activity-chart { padding: 16px; }
  .parent.activity-overview > * { min-width: 0; }
  .mission-layout { row-gap: 16px; }
}