/* Glass surfaces for the Phase 2 app shell and cards. */
.app-page,
.onboarding-page-wrap {
  min-height: 100vh;
  background: #f5f5fa url('/static/images/glass-minimal.png') center / cover no-repeat;
  background-attachment: scroll;
  --c-ink: #202c40;
  --c-ink-2: #3e4c62;
  --c-muted: #53627a;
  --c-line: rgba(89, 109, 143, .2);
  --c-primary: #5146c5;
  --c-primary-hover: #3f35a3;
  --c-primary-text: #4037a0;
  --c-leaf: #1C855E;
  --c-leaf-tint: #E6F3EC;
  --c-leaf-tint-text: #10563F;
  --c-water: #2F6FB0;
  --c-glass: rgba(255,255,255,.52);
  --c-glass-border: rgba(255,255,255,.8);
}
.app-page .topbar {
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 4px 22px rgba(42,57,87,.04);
}
.app-page .card,
.onboarding-page-wrap .onboarding-card {
  background: var(--c-glass);
  border: 1px solid var(--c-glass-border);
  border-radius: 20px;
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 28px rgba(44,62,97,.07), inset 0 1px 0 rgba(255,255,255,.65);
}
.app-page .card__header { border-color: var(--c-line); }
.app-page .draft-row { background: transparent; }
.app-page .draft-row:hover { background: rgba(255,255,255,.42); }
.app-page input,
.app-page textarea,
.app-page select,
.onboarding-page-wrap input,
.onboarding-page-wrap textarea {
  background: rgba(255,255,255,.72);
  border-color: rgba(83,102,133,.3);
}
.app-page :focus-visible,
.onboarding-page-wrap :focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.app-page .page-header { margin-bottom: 28px; }
.app-page .page-header h1 { letter-spacing: -.035em; }
.source-evidence { margin: 16px 0; border-top: 1px solid var(--c-line); padding-top: 12px; }
.source-evidence summary { font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.source-evidence p { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; font-size: 14px; line-height: 1.65; padding: 10px; border-radius: 10px; background: var(--c-glass); }
.next-step { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; margin-bottom: 24px; }
.next-step p { margin: 5px 0 0; color: var(--c-muted); }
.next-step a { flex-shrink: 0; }
.next-step__eyebrow { color: var(--c-primary-text); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.next-step h2 { margin: 5px 0; font-size: 20px; }

@media (max-width: 700px) {
  .app-page .card, .onboarding-page-wrap .onboarding-card { background: var(--c-glass); border-radius: 16px; backdrop-filter: blur(8px); }
  .next-step { align-items: flex-start; flex-direction: column; padding: 20px; }
}
@media (prefers-reduced-transparency: reduce) {
  .app-page .card, .app-page .topbar, .onboarding-page-wrap .onboarding-card { backdrop-filter: none; }
}
@supports not (backdrop-filter: blur(1px)) {
  .app-page .card, .app-page .topbar, .onboarding-page-wrap .onboarding-card { background: var(--c-surface); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .app-page,
  :root:not([data-theme]) .public-page {
    color-scheme: dark;
    background-color: #0E1120;
    background-image: radial-gradient(ellipse at 15% 10%, rgba(42,36,112,.35), transparent 56%),
      radial-gradient(ellipse at 85% 90%, rgba(18,64,58,.30), transparent 58%);
  }
  :root:not([data-theme]) .app-page,
  :root:not([data-theme]) .onboarding-page-wrap {
    --c-ink: #E9EBF4;
    --c-ink-2: #C4C9DA;
    --c-muted: #9AA3BB;
    --c-line: rgba(255,255,255,.12);
    --c-primary: #5F55DD;
    --c-primary-hover: #7068E8;
    --c-primary-text: #B3ADFF;
    --c-leaf: #34D399;
    --c-leaf-tint: rgba(52,211,153,.16);
    --c-leaf-tint-text: #6EE7B7;
    --c-water: #8CC3F5;
    --c-glass: rgba(24,28,46,.66);
    --c-glass-border: rgba(255,255,255,.10);
  }
  :root:not([data-theme]) .app-page .topbar,
  :root:not([data-theme]) .app-page .card,
  :root:not([data-theme]) .onboarding-page-wrap .onboarding-card { background: var(--c-glass); border-color: var(--c-glass-border); }
  :root:not([data-theme]) .app-page input,
  :root:not([data-theme]) .app-page textarea,
  :root:not([data-theme]) .app-page select,
  :root:not([data-theme]) .onboarding-page-wrap input,
  :root:not([data-theme]) .onboarding-page-wrap textarea { color: var(--c-ink); background: rgba(24,28,46,.78); border-color: rgba(255,255,255,.2); }
  :root:not([data-theme]) :focus-visible { outline-color: #B3ADFF; }
}

[data-theme="dark"] .app-page,
[data-theme="dark"] .public-page {
  color-scheme: dark;
  background-color: #0E1120;
  background-image: radial-gradient(ellipse at 15% 10%, rgba(42,36,112,.35), transparent 56%),
    radial-gradient(ellipse at 85% 90%, rgba(18,64,58,.30), transparent 58%);
}
[data-theme="dark"] .app-page,
[data-theme="dark"] .onboarding-page-wrap {
  --c-ink: #E9EBF4;
  --c-ink-2: #C4C9DA;
  --c-muted: #9AA3BB;
  --c-line: rgba(255,255,255,.12);
  --c-primary: #5F55DD;
  --c-primary-hover: #7068E8;
  --c-primary-text: #B3ADFF;
  --c-leaf: #34D399;
  --c-leaf-tint: rgba(52,211,153,.16);
  --c-leaf-tint-text: #6EE7B7;
  --c-water: #8CC3F5;
  --c-glass: rgba(24,28,46,.66);
  --c-glass-border: rgba(255,255,255,.10);
}
[data-theme="dark"] .app-page .topbar,
[data-theme="dark"] .app-page .nav-sheet,
[data-theme="dark"] .app-page .card,
[data-theme="dark"] .onboarding-page-wrap .onboarding-card { background: var(--c-glass); border-color: var(--c-glass-border); }
[data-theme="dark"] .app-page input,
[data-theme="dark"] .app-page textarea,
[data-theme="dark"] .app-page select,
[data-theme="dark"] .onboarding-page-wrap input,
[data-theme="dark"] .onboarding-page-wrap textarea { color: var(--c-ink); background: rgba(24,28,46,.78); border-color: rgba(255,255,255,.2); }
[data-theme="dark"] :focus-visible { outline-color: #B3ADFF; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .public-page:not(.public-page--creator) { --c-surface: #111525; }
}
[data-theme="dark"] .public-page:not(.public-page--creator) { --c-surface: #111525; }
.public-page--creator {
  color-scheme: light;
  background: #fff;
  --c-ink: #16141F;
  --c-ink-2: #3D3A4B;
  --c-muted: #615E73;
  --c-line: #E3E1EC;
  --c-bg: #F7F6FB;
  --c-surface: #fff;
  --c-primary: #5134E8;
  --c-primary-hover: #3F24C9;
  --c-primary-text: #4037a0;
}