/* Shared finishing layer for the bundled console and static public pages.
 * All asset paths are relative so the h0 preview and root deployment agree. */
:root {
  --celestial-panel: linear-gradient(145deg, rgba(20, 29, 48, .94), rgba(9, 14, 27, .96));
  --celestial-line: rgba(157, 187, 226, .18);
  --celestial-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 1px rgba(211, 235, 255, .06);
  --celestial-ease: cubic-bezier(.2, .8, .2, 1);
  --celestial-raised: linear-gradient(145deg, color-mix(in srgb, var(--ink-600) 92%, var(--primary)), var(--ink-800) 85%);
  --celestial-rim: color-mix(in srgb, var(--text) 18%, transparent);
}

html { scroll-padding-top: 6rem; }
body { -webkit-font-smoothing: antialiased; }
::selection { color: #eef3fb; background: #51478b; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary, #22e6f0);
  outline-offset: 4px;
}
:where(button, input, select, textarea) { accent-color: var(--primary, #22e6f0); }
:where(button, a) { -webkit-tap-highlight-color: rgba(34, 230, 240, .18); }
:where(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; }

/* Decorative geometry never represents a calculated chart. */
body:has(.nav-strip), body:has(.docs-shell), body:has(.b2b-hero) {
  background-image: radial-gradient(ellipse at 8% 0, rgba(139,124,255,.13), transparent 45%),
    linear-gradient(rgba(6,8,14,.65), rgba(6,8,14,.96)), url('./assets/bg/layer-1-starfield.png');
  background-size: auto, auto, 1200px auto;
}
.glass-header, .glass-panel, .glass-footer, .glass-box, .toc-panel,
.info-card, .step-item, .figure-block, .house-card, .docs-card, .docs-hero {
  border-color: var(--celestial-line);
  border-radius: 22px;
  background: var(--celestial-panel);
  box-shadow: var(--celestial-shadow);
}
.glass-header { background: rgba(11, 18, 32, .85); }
.nav-strip {
  background: rgba(9, 15, 28, .9);
  border-bottom-color: var(--celestial-line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.manuscript-header, .docs-hero, .b2b-hero {
  background-image: url('./assets/bg/celestial-orbits.svg'),
    radial-gradient(ellipse at top right, rgba(139,124,255,.13), transparent 65%);
  background-position: right top;
  background-size: min(45vw, 400px) auto, auto;
  background-repeat: no-repeat;
}
.manuscript-title, .docs-title { letter-spacing: -.045em; }
.manuscript-header { background-image: url('./assets/bg/celestial-orbits.svg'); }
.manuscript-lead, .docs-copy { max-width: 66ch; }
.article-body { overflow-wrap: anywhere; }
.article-body p, .article-body li { color: #b9c5d8; }
.article-body h2 { margin-top: 3rem; letter-spacing: -.025em; }
.toc-grid a, .nav-back, .nav-lang, .docs-btn { min-height: 44px; }
.toc-grid a { border-radius: 10px; padding: .6rem .75rem; }
.data-table-wrapper { overflow-x: auto; border-radius: 16px; }
.data-table th { background: rgba(139,124,255,.08); }
.data-table td { border-bottom-color: var(--celestial-line); }
.data-table tr:focus-within td { background: rgba(34,230,240,.06); }
.figure-frame { background: radial-gradient(ellipse at center, rgba(139,124,255,.1), transparent 70%); }

/* Three surface levels: quiet background, solid reading surface, raised control.
 * Use existing geometry and colors; no extra bitmap or continuously running loop. */
.docs-card, .footer-method-card, .feature-card, .house-card, .guide-facts li {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--violet) 10%, transparent), transparent 60%), var(--celestial-panel);
  border: 1px solid var(--celestial-line);
  border-top-color: var(--celestial-rim);
  box-shadow: 0 16px 36px rgb(0 0 0 / .2), inset 0 1px 0 rgb(255 255 255 / .045);
}
.docs-card h2, .feature-card h3, .footer-method-card h3 { text-wrap: balance; }
.docs-card p, .feature-card p, .footer-method-card p { text-wrap: pretty; }
.docs-hero, .manuscript-header, .b2b-hero {
  box-shadow: inset 0 1px 0 var(--celestial-rim), inset 0 -1px 0 var(--celestial-line), 0 28px 65px rgb(0 0 0 / .18);
}
.guide-nav a[aria-current="location"], .toc-grid a:focus-visible {
  background: color-mix(in srgb, var(--primary) 9%, var(--ink-800));
  box-shadow: inset 3px 0 var(--primary);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .docs-card, .footer-method-card, .feature-card {
    transition: transform .25s var(--celestial-ease), border-color .25s ease, box-shadow .25s ease;
  }
  .docs-card:hover, .footer-method-card:hover, .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 42px rgb(0 0 0 / .3), inset 0 1px 0 var(--celestial-rim);
  }
  .docs-btn:active, .nav-lang:active { transform: translateY(1px); }
}

/* Hover has a matching keyboard treatment; information stays in visible text. */
.footer-method-card, .house-card, .step-item, .docs-card, .feature-card,
.visual-card, .bazi-pillar, .general-info-card {
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.footer-method-card:focus-within, .house-card:focus-within,
.docs-card:focus-within, .feature-card:focus-within, .visual-card:focus-within {
  border-color: rgba(125,240,255,.5);
  box-shadow: 0 14px 42px rgba(0,0,0,.25), 0 0 0 1px rgba(34,230,240,.1);
}
@media (hover: hover) and (pointer: fine) {
  .footer-method-card:hover, .house-card:hover, .step-item:hover,
  .docs-card:hover, .feature-card:hover, .visual-card:hover, .bazi-pillar:hover {
    border-color: rgba(125,240,255,.4);
    box-shadow: 0 14px 42px rgba(0,0,0,.25), inset 0 1px rgba(125,240,255,.1);
  }
  .toc-grid a:hover { background: rgba(34,230,240,.06); }
}

/* Keep the native API explorer's semantic method colors and controls. */
.docs-shell { position: relative; }
.docs-shell .swagger-ui .opblock { border-radius: 14px; overflow: hidden; }
.docs-shell .swagger-ui .opblock-summary:focus-within { outline: 2px solid var(--primary); outline-offset: -3px; }
.docs-shell .swagger-ui input, .docs-shell .swagger-ui select { min-height: 44px; }

@media (max-width: 640px) {
  .manuscript-header, .docs-hero, .b2b-hero { background-size: 220px auto, auto; }
  .manuscript-title, .docs-title { font-size: clamp(2rem, 9vw, 3rem); }
  .nav-actions { flex-wrap: wrap; gap: .5rem; }
  .nav-strip { gap: .75rem; }
  #app .feature-grid { grid-template-columns: minmax(0, 1fr); }
  #app .b2b-hero, #app .comparison-section, #app .developer-section,
  #app .sandbox-section, #app .contact-section { padding: 2rem 1rem; }
  #app .b2b-hero h2 { font-size: clamp(2rem, 10vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  :where(button, a, input, select, .glass-panel, .house-card) { border: 1px solid CanvasText; }
}
@media print {
  body:has(.nav-strip), body:has(.docs-shell), body:has(.b2b-hero),
  .manuscript-header, .docs-hero, .b2b-hero { background-image: none; }
  .glass-panel, .glass-box, .house-card, .docs-card { box-shadow: none; }
  .docs-hero, .manuscript-header, .b2b-hero, .feature-card, .footer-method-card, .guide-facts li {
    background: none; box-shadow: none; transform: none;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .docs-card:hover, .footer-method-card:hover, .feature-card:hover { background-image: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgb(var(--brand-rgb) / .12), transparent 70%); }
}