/* Layered white is the default. Alternate surface studies remain available. */
html[data-surface="canvas"] {
  --study-canvas: #f3f3f3;
  --study-panel: #ffffff;
  --study-border: #e0e0e0;
  --study-shadow: 0 3px 10px #00000004;
}
html[data-surface="panels"] {
  --study-canvas: #ffffff;
  --study-panel: #f4f4f4;
  --study-border: #e5e5e5;
  --study-shadow: none;
}
html[data-surface="depth"] {
  --study-canvas: #ffffff;
  --study-panel: #ffffff;
  --study-border: #dedede;
  --study-shadow: 0 3px 6px #00000004, 0 12px 32px #0000000b;
}
html[data-surface] {
  --ds-canvas: var(--study-canvas);
  --ds-panel-surface: var(--study-panel);
  --ds-panel-border: var(--study-border);
  --ds-panel-shadow: var(--study-shadow);
}
html[data-surface] body,
html[data-surface] .shell { background: var(--study-canvas); }
html[data-surface] .app-chrome { background: #fffffff5; }
html[data-surface] :is(.panel, .understanding-panel, .questions-panel,
  .physical-scope, .brief-details, .review-card, .task-card, .scan-card,
  .metric, .project-card, .document-card, .chat-layout) {
  background: var(--study-panel);
  border-color: var(--study-border);
  box-shadow: var(--study-shadow);
}
html[data-surface] .home-summary {
  background: var(--study-panel);
  border: var(--ds-section-border-width) solid var(--study-border);
  border-radius: 20px;
  box-shadow: var(--study-shadow);
  padding: 24px 20px;
}
/* Keep functional controls and nested content distinct from their section. */
html[data-surface="panels"] :is(.home-item-icon, .attention-dot, .doc-icon,
  .home-review-status, .home-review-status.ready, .home-project-progress,
  .cp-label, .cp-label-head, .cp-timeline-head) { background: #ffffff; }
@media(max-width:600px) {
  html[data-surface] .home-summary { padding: 22px 16px; }
}

/* ---------- Separation studies (November 2026) ----------
   The orb wash anchor card and white section cards are now live (src/theme.css).
   halo: the anchor glows around its edges instead · labels: compact card titles. */
html:is([data-surface="halo"], [data-surface="labels"]) {
  --study-canvas: #ffffff;
  --study-panel: #ffffff;
  --study-border: #dedede;
  --study-shadow: 0 3px 6px #00000004, 0 12px 32px #0000000b;
}

/* Halo: a white card with the orb's blurred colour ring glowing around its edges. */
html[data-surface="halo"] :is(.panel.welcome-panel, .home-welcome) {
  background: #ffffff;
  border: var(--ds-section-border-width) solid #ffffffcc;
  box-shadow:
    -22px -14px 46px -18px color-mix(in oklab, var(--glow-coral) 55%, transparent),
    10px -20px 46px -18px color-mix(in oklab, var(--glow-sun) 55%, transparent),
    30px 6px 50px -18px color-mix(in oklab, var(--glow-lilac) 60%, transparent),
    8px 26px 50px -18px color-mix(in oklab, var(--glow-teal) 55%, transparent),
    -26px 18px 48px -18px color-mix(in oklab, var(--glow-pink) 45%, transparent),
    0 1px 3px #00000008;
}
html[data-surface="halo"] .hub-hero { padding: 6px 0 6px 6px; }

/* Labels: card titles become compact labels, so the page title clearly leads. */
html[data-surface="labels"] :is(.panel:not(.welcome-panel) h2, .section-line h2, .metric h2) {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #393541;
}
/* A section label and its content read as one card with the label inside. */
html[data-surface="labels"] .section-line:has(+ :is(.team-strip, .milestones)) {
  margin-bottom: 0;
  padding: 18px 22px 4px;
  background: #ffffff;
  border: var(--ds-section-border-width) solid var(--study-border);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
}
html[data-surface="labels"] .section-line + :is(.team-strip, .milestones) { border-top: 0; border-radius: 0 0 22px 22px; padding-top: 10px; box-shadow: none; }
html[data-surface="labels"] .section-line .eyebrow { font-size: 9px; }