/* Astro Engine · Observatory, tools shell (ASTRO_OBSERVATORY_UI=site). Loaded by api/observatory_ui.py only on
   pages of this shell, after observatory.css (shared tokens, type, focus, reduced motion). Every selector is
   scoped to body.obs and :where(.obs-tools), in both themes: the daylight values come from the tokens in observatory.css and the [data-theme="light"] rules
   at the end of this file. */
/* ---------- shell tokens: legacy names these pages use that the shared remap above does not cover ---------- */
/* Zodiac and planet glyphs print as text (the shared glyph stack puts a symbol face before the system's colour
   emoji); moon-phase and other pictographs keep their emoji, so no font-variant-emoji here (Firefox draws boxes). */
:where(:root) body.obs:where(.obs-tools) { font-family: var(--o-sans-glyph, var(--o-sans)); }
:where(:root) body.obs:where(.obs-tools) { --o-chrome: var(--o-sans-header);
  --o-wordmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23c0dfff' stroke-width='1'%3E%3Ccircle cx='13' cy='13' r='8'/%3E%3Cellipse cx='13' cy='13' rx='12.2' ry='4.4' transform='rotate(-36 13 13)'/%3E%3C/svg%3E");
  --o-theme-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4ebff' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.6M12 18.9v2.6M2.5 12h2.6M18.9 12h2.6M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E");
  --o-paper-surface: radial-gradient(120% 70% at 0% 0%, rgba(255, 236, 205, .55), rgba(255, 236, 205, 0) 60%), linear-gradient(180deg, #f7f2e9, #f2ebdf);
  --glass: rgba(10, 16, 27, .78); --glass-vivid: rgba(10, 16, 27, .97); --glass-border: var(--o-line); --glass-border-hover: rgba(174, 217, 255, .45);
  --card-bg: var(--o-night-2); --deep-space: var(--o-night-2);
  --surface-hover: rgba(174, 217, 255, .06); --border-active: rgba(174, 217, 255, .55);
  --gold-light: var(--o-ice-2); --gold-text: var(--o-ice); --purple-bright: var(--o-ice-2); --cyan-dim: var(--gold-dim);
  --gradient-primary: linear-gradient(var(--o-ice), var(--o-ice)); --gradient-gold: linear-gradient(var(--o-ice), var(--o-ice));
  --gradient-accent: linear-gradient(var(--o-ice), var(--o-ice)); --shadow-glow: none;
  --transition: 160ms cubic-bezier(.2, .7, .2, 1);
  /* Shell inks and surfaces without a shared token (night values here; daylight values at the end of the file). */
  --s-ink-2: var(--o-ink-2, #d3dbe8); --s-text-2: var(--o-ink-3, #c4ccd9); --s-link: #c6cfdc; --s-field: #070c16; --s-scheme: dark;
  --s-bar: rgba(6, 10, 18, .92); --s-banner: rgba(10, 16, 27, .97);
  --s-tint: rgba(174, 217, 255, .06); --s-glow: rgba(174, 217, 255, .18); --s-spin: rgba(174, 217, 255, .25);
  --s-lift: 0 10px 30px -14px rgba(174, 217, 255, .55);
  --s-sheen: rgba(174, 217, 255, .06); --s-sheen-2: rgba(174, 217, 255, .08);
  --s-lamp-tint: rgba(243, 200, 139, .07); --s-lamp-line: rgba(243, 200, 139, .35); --s-lamp-chip: rgba(243, 200, 139, .45);
  --s-lamp-rule: rgba(243, 200, 139, .55); --s-scrim: rgba(3, 6, 12, .62);
  --s-error-tint: rgba(255, 120, 100, .08); --s-error-line: rgba(255, 150, 130, .35); }
/* The pages' scripts show and hide states with the hidden attribute; no layer display rule may reveal one. */
:where(:root) body.obs:where(.obs-tools) [hidden] { display: none !important; }
:where(:root) body.obs:where(.obs-tools) { --teal: var(--o-ice-2); --rose: var(--o-error); --rose-bright: var(--o-error); }
:where(:root) body.obs:where(.obs-tools) .skip-link { background: var(--o-ice); color: var(--o-on-ice); }
:where(:root) body.obs:where(.obs-tools) ::placeholder { color: var(--o-faint); opacity: 1; }
/* Theme toggle: a hairline sign of what the button offers, as today's emoji did: the sun by night, the deep-ice moon by
   day (--o-theme-glyph, the same token as the topnav and auth shells). The emoji is decorative (the button is named by
   its aria-label), so the same sign is drawn as a hairline glyph. */
:where(:root) body.obs:where(.obs-tools) .theme-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 6px;
  background: var(--o-theme-glyph) center / 20px no-repeat, var(--s-bar); border: 1px solid var(--o-control); color: transparent;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; transition: border-color 160ms var(--o-ease); }
:where(:root) body.obs:where(.obs-tools) .theme-toggle:hover { transform: none; border-color: var(--o-ice); }
:where(:root) body.obs:where(.obs-tools) .theme-toggle .theme-icon { opacity: 0; }
:where(:root) body.obs:where(.obs-tools) .theme-toggle:focus-visible { outline: 2px solid var(--o-ice); outline-offset: 3px; }
/* ==========================================================================================================
   Header bars. topnav = the editorial template and the static company, pricing and account pages (nav.top-nav with
   role and label); tools = the nine sky tools (plain nav.top-nav). Same bar as the seo shell's header.
   ========================================================================================================== */
:where(:root) body.obs:where(.obs-tools) .top-nav { background: var(--s-bar); border-bottom: 1px solid var(--o-line); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  min-height: 72px; padding: 10px clamp(20px, 4.4vw, 64px); column-gap: 24px; }
:where(:root) body.obs:where(.obs-tools) .top-nav .logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-family: var(--o-chrome); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--o-ink); -webkit-text-fill-color: currentColor; background: none; text-decoration: none; white-space: nowrap; }
:where(:root) body.obs:where(.obs-tools) .top-nav .logo::before { content: ""; flex: none; width: 26px; height: 26px; background: var(--o-wordmark) center / contain no-repeat; }
:where(:root) body.obs:where(.obs-tools) .top-nav .logo:hover { color: var(--o-ink); text-decoration: none; }
:where(:root) body.obs:where(.obs-tools) .top-nav .nav-links { column-gap: clamp(12px, 1.4vw, 22px); }
/* Links keep whatever display the page gives them (the narrow-screen menus hide them); as flex items they are blocks,
   so padding gives the 44 px target. !important: pricing and the homepage put an inline gold emphasis on one link, and
   no link should look like the current page. */
:where(:root) body.obs:where(.obs-tools) .top-nav .nav-links > a { font-family: var(--o-chrome); font-size: .9375rem; font-weight: 400 !important; line-height: 24px; padding-block: 10px;
  color: var(--s-ink-2) !important; text-decoration: none; }
:where(:root) body.obs:where(.obs-tools) .top-nav .nav-links > a:hover { color: var(--o-ink) !important; text-decoration: underline; }
/* The current page: ink and an ice underline (not colour alone). */
:where(:root) body.obs:where(.obs-tools) .top-nav .nav-links > a.active { color: var(--o-ink) !important; text-decoration: underline; text-decoration-color: var(--o-ice); text-underline-offset: .45em; text-decoration-thickness: 1px; }
/* ==========================================================================================================
   Shared surfaces: footers, share bar, newsletter, cookie banners, feedback (topnav and tools)
   ========================================================================================================== */
:where(:root) body.obs:where(.obs-tools) .site-footer { background: transparent; border-top: 1px solid var(--o-line) !important; color: var(--o-muted) !important;
  font-family: var(--o-sans); font-size: .875rem; line-height: 1.6; padding-block: 40px 48px; margin-top: 48px; }
/* !important: the dashboard's footer links are inline-styled. */
:where(:root) body.obs:where(.obs-tools) .site-footer a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px;
  color: var(--s-link) !important; text-decoration: none; }
:where(:root) body.obs:where(.obs-tools) .site-footer a:hover { color: var(--o-ink) !important; text-decoration: underline; }
:where(:root) body.obs:where(.obs-tools) .site-footer p { color: var(--o-muted); }
:where(:root) body.obs:where(.obs-tools) .site-footer p[style] { color: var(--o-faint) !important; opacity: 1 !important; }
:where(:root) body.obs:where(.obs-tools) :is(#cookie-banner, .cookie-banner) { background: var(--s-banner); border-top: 1px solid var(--o-line-2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-tools) :is(#cookie-banner, .cookie-banner) p { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-tools) :is(#cookie-banner, .cookie-banner) a { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-tools) :is(#cookie-banner, .cookie-banner) button { min-height: 44px; padding: 0 20px; border-radius: 999px; font: 600 .9375rem var(--o-sans); background: var(--o-ice); color: var(--o-on-ice); border: 0; }
:where(:root) body.obs:where(.obs-tools) :is(#cookie-banner button.deny, .cookie-banner .cookie-decline) { background: transparent; color: var(--o-ink); border: 1px solid var(--o-control); }
/* the lunar calendar, returns, progressions and profections use the homepage's inline-styled consent bar */
:where(:root) body.obs:where(.obs-tools) #cookie-consent { background: var(--s-banner) !important; border-top: 1px solid var(--o-line-2) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:where(:root) body.obs:where(.obs-tools) #cookie-consent p { color: var(--o-ink) !important; }
:where(:root) body.obs:where(.obs-tools) #cookie-consent a { color: var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-tools) #cookie-consent button { min-height: 44px; padding: 0 20px !important; border-radius: 999px !important; font: 600 .9375rem var(--o-sans) !important; }
:where(:root) body.obs:where(.obs-tools) #cookie-consent button:first-child { background: transparent !important; color: var(--o-ink) !important; border: 1px solid var(--o-control) !important; }
:where(:root) body.obs:where(.obs-tools) #cookie-consent button:last-child { background: var(--o-ice) !important; color: var(--o-on-ice) !important; border: 0 !important; }
/* ==========================================================================================================
   tools: the nine sky tools (eclipses, void Moon, lunar calendar, returns, progressions, profections,
   astrocartography, composite). Calculation lives here, so: night panels, ice controls. Chart images are drawn by
   the server in the Observatory palette (observatory-charts.js asks for observatory-dark|light); their SVG fills are
   never restyled here.
   ========================================================================================================== */
:where(:root) body.obs:where(.obs-tools) .container { max-width: 1100px; }
/* The chart frame takes the instrument panel colour in both themes, matching the Observatory chart images.
   legacy-theme.css kept it dark (#0a0a1a) in a light theme for the old dark images; same specificity, later here. */
:where(:root) body.obs:where(.obs-tools) .chart-frame { background: var(--o-night-2); border-color: var(--o-line); color: var(--o-ink);
  --text: var(--o-ink); --text-dim: var(--o-muted); --text-muted: var(--o-faint); --muted: var(--o-faint); --gold: var(--o-ice); }
:where(:root) body.obs:where(.obs-tools) :is(.hero, .page-hero) h1 { color: var(--o-ivory); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1.05; text-wrap: balance; }
:where(:root) body.obs:where(.obs-tools) :is(.hero, .page-hero) h1 .gold-accent { color: var(--o-ice-2); }
:where(:root) body.obs:where(.obs-tools) :is(.hero-sub, .hero-subtitle, .page-hero p, .hero p) { color: var(--s-text-2); }
:where(:root) body.obs:where(.obs-tools) :is(.hero-title) { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-tools) .hero-icon { filter: none; }
:where(:root) body.obs:where(.obs-tools) .source-line { color: var(--o-muted); opacity: 1; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-tools) .breadcrumb { color: var(--o-faint); }
:where(:root) body.obs:where(.obs-tools) .breadcrumb a { color: var(--s-link); }
:where(:root) body.obs:where(.obs-tools) :is(.card-glass, .form-section, .result-card, .personalize-bar, .eclipse-card, .status-card, .answer-block, .advice-card, .detail-card, .explainer, .angle-card, .line-card, .pl-card, .person-block, .luminary, .lunar-utc-snapshot, .lunar-report, .calendar-guide, .about-section, .moment-hero, .lord-hero, .interpretation) { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 14px; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.obs:where(.obs-tools) :is(.card-glass, .form-section) { border-color: var(--o-line-2); background-image: radial-gradient(70% 90% at 100% 0%, var(--s-sheen), transparent 70%); }
:where(:root) body.obs:where(.obs-tools) :is(.eclipse-card, .angle-card, .line-card, .pl-card):hover { transform: none; border-color: var(--o-line-2); }
:where(:root) body.obs:where(.obs-tools) .eclipse-card.hits-natal { border-color: var(--s-lamp-rule); background: var(--o-night-2); box-shadow: none; }
:where(:root) body.obs:where(.obs-tools) :is(.eclipse-type, .section-title, .person-title, .ang-title, .detail-section-title, .moment-label, .lord-label, .theme-label, .meta-label) { text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-tools) :is(.eclipse-type, .card-glass h2, .card-glass h3, .form-section h2, .form-section h3, .result-card h2, .result-card h3, .section-title, .person-title, .upgrade-banner h3, .upsell-card h3, .crosssell h2, .cross-sell h2, .cross-sell h3) { color: var(--o-ivory); font-family: var(--o-serif); font-weight: 400; }
:where(:root) body.obs:where(.obs-tools) :is(.natal-banner) { background: var(--s-lamp-tint); border: 1px solid var(--s-lamp-line); border-left: 3px solid var(--o-lamp); }
:where(:root) body.obs:where(.obs-tools) .natal-banner-label { color: var(--o-lamp); text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-tools) .natal-tag { background: transparent; border: 1px solid var(--s-lamp-chip); color: var(--o-lamp); }
:where(:root) body.obs:where(.obs-tools) :is(.countdown-label, .detail-card-label, .hero-detail-label, .status-label) { color: var(--o-muted); text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-tools) :is(.hero .pill, .line-card .lt, .upsell-card .badge, .lum-label, .report-do h4, .report-dont h4, .report-domain h4, .advice-card h3, .detail-section-title) { text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-tools) .hero .pill { background: transparent; border: 1px solid var(--o-line-2); color: var(--s-ink-2); }
:where(:root) body.obs:where(.obs-tools) :is(.countdown-num, .detail-card-value, .hero-detail-value, .status-value, .moment-date, .lord-name) { color: var(--o-ivory); font-variant-numeric: tabular-nums; }
/* forms */
:where(:root) body.obs:where(.obs-tools) :is(.form-row, .form-grid, .form-section) label { color: var(--s-ink-2); font: 500 .9375rem var(--o-sans); text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-tools) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) { background: var(--s-field); border: 1px solid var(--o-control); border-radius: 10px; color: var(--o-ink); min-height: 48px; color-scheme: var(--s-scheme); }
:where(:root) body.obs:where(.obs-tools) :is(input, select, textarea):focus { border-color: var(--o-ice); box-shadow: 0 0 0 3px var(--s-glow); }
:where(:root) body.obs:where(.obs-tools) .chart-select select { min-height: 44px; max-width: 240px; }
:where(:root) body.obs:where(.obs-tools) :is(.city-suggestions) { background: var(--o-night-3); border: 1px solid var(--o-line-2); border-radius: 12px; }
:where(:root) body.obs:where(.obs-tools) .sug-item { color: var(--s-ink-2); min-height: 44px; }
:where(:root) body.obs:where(.obs-tools) .sug-item:hover { background: var(--s-tint); color: var(--o-ink); }
/* actions */
:where(:root) body.obs:where(.obs-tools) :is(.btn-primary, .upsell-btn, .btn:not(.btn-ghost)) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  background: var(--o-ice); color: var(--o-on-ice); border: 0; border-radius: 999px; box-shadow: var(--s-lift);
  font: 600 1rem/1.25 var(--o-sans); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; transform: none; }
:where(:root) body.obs:where(.obs-tools) :is(.btn-primary, .upsell-btn)[style*="display"] { display: inline-flex !important; } /* inline display:inline-block */
:where(:root) body.obs:where(.obs-tools) :is(.btn-primary, .upsell-btn, .btn:not(.btn-ghost)):hover { background: var(--o-ice-2); color: var(--o-on-ice); opacity: 1; transform: none; }
:where(:root) body.obs:where(.obs-tools) :is(.btn-primary, .upsell-btn, .btn):disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
:where(:root) body.obs:where(.obs-tools) :is(.btn-ghost, .upsell-btn-outline, .btn-link, .preset-pill, .city-tag, .related-links a, .month-nav button) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  background: transparent; color: var(--o-ink); border: 1px solid var(--o-control); border-radius: 999px; box-shadow: none;
  font: 500 .9375rem/1.25 var(--o-sans); text-decoration: none; cursor: pointer; transform: none; }
:where(:root) body.obs:where(.obs-tools) :is(.btn-ghost, .upsell-btn-outline, .btn-link, .preset-pill, .city-tag, .related-links a, .month-nav button):hover { background: transparent; border-color: var(--o-ice); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-tools) .month-nav button { padding: 0 14px; min-width: 44px; }
/* breadcrumbs (eclipses, void Moon): 44 px tall links, like the other shells' */
:where(:root) body.obs:where(.obs-tools) .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
/* offers: the seo shell's invitation panel */
:where(:root) body.obs:where(.obs-tools) :is(.crosssell, .cross-sell, .upsell-card, .upgrade-banner) { background: var(--o-night-2); border: 1px solid var(--o-line-2); border-radius: 14px; box-shadow: none;
  background-image: radial-gradient(60% 120% at 100% 0%, var(--s-sheen-2), transparent 70%); }
:where(:root) body.obs:where(.obs-tools) :is(.crosssell, .cross-sell, .upsell-card, .upgrade-banner) p { color: var(--s-text-2); }
:where(:root) body.obs:where(.obs-tools) .crosssell .price-line, :where(:root) body.obs:where(.obs-tools) .upsell-price { color: var(--o-ink); opacity: 1; font-variant-numeric: tabular-nums; }
/* a price inside an action takes the action's ink (the pages colour it gold, which read as ice on ice) */
:where(:root) body.obs:where(.obs-tools) :is(.upsell-btn, .btn-primary, .upsell-btn-outline) .upsell-price { color: inherit; }
/* the price is a flex item of the pill: keep it whole, let the label wrap around it */
:where(:root) body.obs:where(.obs-tools) :is(.upsell-btn, .btn-primary, .upsell-btn-outline) { flex-wrap: wrap; column-gap: .35em; text-align: center; }
:where(:root) body.obs:where(.obs-tools) .upsell-price { white-space: nowrap; }
/* .interpretation is drawn as a panel above; the page gives it no inset */
:where(:root) body.obs:where(.obs-tools) .interpretation { padding: 14px 16px; color: var(--s-text-2); }
/* chips, pills, tags */
:where(:root) body.obs:where(.obs-tools) :is(.theme-pill, .meta-pill, .tag, .exact-phase-badge, .day-exact-badge, .retro-tag, .key-line-item, .ang-label) { background: transparent; border: 1px solid var(--o-line-2); box-shadow: none; text-transform: none; letter-spacing: 0; }
/* lists and tables */
:where(:root) body.obs:where(.obs-tools) .planet-table th, :where(:root) body.obs:where(.obs-tools) .lunar-utc-table th { color: var(--o-faint); background: transparent; text-transform: none; letter-spacing: 0; font: 500 .875rem var(--o-sans); border-bottom: 1px solid var(--o-line-2); }
:where(:root) body.obs:where(.obs-tools) .planet-table td, :where(:root) body.obs:where(.obs-tools) .lunar-utc-table td { border-bottom: 1px solid var(--o-line); color: var(--s-ink-2); font-variant-numeric: tabular-nums; }
:where(:root) body.obs:where(.obs-tools) .faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--o-line); border-radius: 0; padding-inline: 0; }
:where(:root) body.obs:where(.obs-tools) .faq-item :is(h3, summary) { color: var(--o-ivory); font-family: var(--o-serif); font-weight: 400; font-size: 1.3rem; }
:where(:root) body.obs:where(.obs-tools) .faq-item p { color: var(--s-text-2); }
/* lunar calendar grid */
:where(:root) body.obs:where(.obs-tools) .day-cell { background: var(--o-night-2); border: 1px solid var(--o-line); box-shadow: none; }
:where(:root) body.obs:where(.obs-tools) .day-cell:hover { border-color: var(--o-control); transform: none; }
:where(:root) body.obs:where(.obs-tools) .day-cell.selected { border-color: var(--o-ice); background: var(--s-tint); }
:where(:root) body.obs:where(.obs-tools) .weekday-cell, :where(:root) body.obs:where(.obs-tools) .weekday-header { color: var(--o-muted); text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-tools) .detail-panel { background: var(--o-night-3); border: 1px solid var(--o-line-2); }
/* !important: the lunar calendar's own active rule paints the language button gold with !important. */
:where(:root) body.obs:where(.obs-tools) .language-switcher .lang-btn { min-height: 44px; min-width: 44px; background: transparent; border: 1px solid var(--o-control); color: var(--s-ink-2); border-radius: 6px; }
:where(:root) body.obs:where(.obs-tools) .language-switcher .lang-btn.active { border-color: var(--o-ice) !important; color: var(--o-ink) !important; background: var(--s-tint) !important; }
:where(:root) body.obs:where(.obs-tools) :is(.error-msg) { color: var(--o-error); }
:where(:root) body.obs:where(.obs-tools) .spinner { border-color: var(--s-spin); border-top-color: var(--o-ice); }
/* ==========================================================================================================
   tools: states completed for both themes (state captures, 2026-10-31)
   ========================================================================================================== */
/* the lunar calendar's language buttons are inline-styled (light text and a white tint) */
:where(:root) body.obs:where(.obs-tools) .language-switcher .lang-btn { background: transparent !important; border: 1px solid var(--o-control) !important; color: var(--s-ink-2) !important; font: 600 .875rem var(--o-sans) !important; }
/* panels the layer draws around a section need their own inset (the page gives these none) */
:where(:root) body.obs:where(.obs-tools) .calendar-guide { padding: clamp(18px, 3vw, 28px); }
:where(:root) body.obs:where(.obs-tools) .calendar-guide h1 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-tools) .calendar-guide :is(h2, h3) { color: var(--o-ivory); font-size: 1.35rem; font-weight: 400; }
:where(:root) body.obs:where(.obs-tools) .calendar-guide p { color: var(--s-text-2); }
:where(:root) body.obs:where(.obs-tools) :is(.calendar-guide, .lunar-utc-snapshot, .about-section, .explainer, .result-card) a:not([class]) { color: var(--o-ice); }
/* loading, empty and unavailable states */
:where(:root) body.obs:where(.obs-tools) :is(.empty-state, .loading-state) { background: var(--o-night-2); border: 1px solid var(--o-line); color: var(--o-muted); border-radius: 14px; }
:where(:root) body.obs:where(.obs-tools) .empty-state[role="alert"] { background: var(--s-error-tint); border-color: var(--s-error-line); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-tools) .card-glass.error-msg { background: var(--s-error-tint); border-color: var(--s-error-line); color: var(--o-error); }
:where(:root) body.obs:where(.obs-tools) .error-msg.show { background: var(--s-error-tint); border: 1px solid var(--s-error-line); color: var(--o-error); }
:where(:root) body.obs:where(.obs-tools) .spinner-wrap { color: var(--o-muted); }
/* "Could not load" states that reuse a loading box (void Moon) or write an inline error line (lunar calendar): the
   error tint and its rule, the words carry the message. A loading box keeps its spinner, so :not(:has(.spinner))
   (a :has() inside :has() is invalid and would drop the rule). */
:where(:root) body.obs:where(.obs-tools) #answer-block:has(> .loading):not(:has(.spinner)) { background: var(--s-error-tint); border-color: var(--s-error-line); }
:where(:root) body.obs:where(.obs-tools) #answer-block:not(:has(.spinner)) > .loading { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-tools) :is(#hero-today, #calendar-grid) > p:is([data-i18n="lc_load_error"], [data-i18n="lc_cal_error"]) { color: var(--o-error) !important; } /* inline */
:where(:root) body.obs:where(.obs-tools) #hero-today:has(> p[data-i18n="lc_load_error"]) { background: var(--s-error-tint); border-color: var(--s-error-line); }
/* eclipses */
:where(:root) body.obs:where(.obs-tools) .personalize-bar.personalized { background: var(--o-night-2); border-color: var(--s-lamp-line); }
:where(:root) body.obs:where(.obs-tools) .personalize-bar p strong { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-tools) :is(.eclipse-icon, .answer-icon, .hero-icon) { filter: none; }
:where(:root) body.obs:where(.obs-tools) .eclipse-meta .pill strong { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-tools) .natal-tag .orb { color: var(--o-muted); }
/* void Moon: the answer, the four facts, the two lists (each list carries its own marks and words) */
:where(:root) body.obs:where(.obs-tools) .answer-block::before { display: none; }
:where(:root) body.obs:where(.obs-tools) .answer-headline { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-tools) .answer-headline .yes { color: var(--o-lamp); }
:where(:root) body.obs:where(.obs-tools) .answer-headline .no { color: var(--o-ice-2); }
:where(:root) body.obs:where(.obs-tools) .answer-sub { color: var(--s-text-2); }
:where(:root) body.obs:where(.obs-tools) :is(.advice-card.do, .advice-card.dont) { background: var(--o-night-2); border-color: var(--o-line); }
:where(:root) body.obs:where(.obs-tools) .advice-card h3 { font: 600 .9375rem var(--o-sans); }
:where(:root) body.obs:where(.obs-tools) :is(.advice-card.do h3, .advice-card.do li::before) { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-tools) :is(.advice-card.dont h3, .advice-card.dont li::before) { color: var(--o-error); }
:where(:root) body.obs:where(.obs-tools) .advice-card li { color: var(--s-text-2); }
/* returns, progressions, profections */
:where(:root) body.obs:where(.obs-tools) :is(.moment-label, .lord-label) { color: var(--o-muted); font-size: .9375rem; }
:where(:root) body.obs:where(.obs-tools) :is(.moment-meta, .lord-meta, .lord-sub, .moment-time) { color: var(--s-text-2); }
:where(:root) body.obs:where(.obs-tools) :is(.meta-pill, .theme-pill) { padding: .8rem 1rem; }
:where(:root) body.obs:where(.obs-tools) .small-muted { color: var(--o-muted); }
/* Cormorant only at 20 px and above: small serif headings move up to 20 px, small labels move to the sans */
:where(:root) body.obs:where(.obs-tools) :is(.eclipse-type, .month-nav .month-label, .lunar-utc-snapshot h2, .lunar-utc-snapshot h3, .pl-card h4, .detail-phase) { font-size: max(1.25rem, 20px); }
:where(:root) body.obs:where(.obs-tools) #lunar-utc-events h3 { font-size: 1.25rem; } /* the page sizes it 1rem from an ID rule */
:where(:root) body.obs:where(.obs-tools) :is(.form-section .section-title, .report-headline) { font-family: var(--o-sans); }
:where(:root) body.obs:where(.obs-tools) .form-section .section-title { color: var(--o-muted); font-size: .9375rem; font-weight: 500; border-bottom-color: var(--o-line); }
:where(:root) body.obs:where(.obs-tools) .report-headline { font-size: 1.0625rem; font-weight: 600; }
/* lunar calendar: today, phase badges, the day panel and its report */
:where(:root) body.obs:where(.obs-tools) .hero-today::before { display: none; }
:where(:root) body.obs:where(.obs-tools) .day-cell.today { border-color: var(--o-lamp); box-shadow: inset 0 0 0 1px var(--o-lamp); }
:where(:root) body.obs:where(.obs-tools) .day-cell.today::after { background: var(--o-lamp); }
:where(:root) body.obs:where(.obs-tools) .day-cell.today .day-num { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-tools) :is(.exact-phase-badge, .day-exact-badge) { color: var(--o-ink-2, var(--s-ink-2)); }
:where(:root) body.obs:where(.obs-tools) .detail-overlay { background: var(--s-scrim); }
:where(:root) body.obs:where(.obs-tools) .detail-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--o-muted); border-radius: 6px; }
:where(:root) body.obs:where(.obs-tools) .detail-close:hover { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-tools) .detail-phase { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-tools) .detail-section-title { color: var(--o-muted); border-bottom-color: var(--o-line); font-size: .875rem; }
:where(:root) body.obs:where(.obs-tools) .tag.avoid { border-color: var(--s-error-line); }
:where(:root) body.obs:where(.obs-tools) :is(.rating-stars) { color: var(--o-lamp); }
:where(:root) body.obs:where(.obs-tools) .lunar-report { border-top-color: var(--o-line); }
:where(:root) body.obs:where(.obs-tools) .report-headline { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-tools) :is(.report-do, .report-dont, .report-domain) { background: transparent; border: 1px solid var(--o-line); }
:where(:root) body.obs:where(.obs-tools) :is(.report-do, .report-dont, .report-domain) h4 { font-family: var(--o-sans); font-size: .875rem; font-weight: 600; } /* labels: the shared h4 face is Cormorant */
:where(:root) body.obs:where(.obs-tools) .report-domain h4 { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-tools) .report-tip { background: var(--s-lamp-tint); border: 1px solid var(--s-lamp-line); color: var(--s-text-2); }
:where(:root) body.obs:where(.obs-tools) .report-tip strong { color: var(--o-lamp); }
/* astrocartography result: angle labels as small chips (they spanned the card), the key lines as a hairline list,
   the "moved" / "on angle" tag in ice */
:where(:root) body.obs:where(.obs-tools) .ang-label { display: inline-block; padding: 1px 8px; border-radius: 999px; color: var(--o-muted); font-size: .8125rem; }
:where(:root) body.obs:where(.obs-tools) .key-lines { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 14px; }
:where(:root) body.obs:where(.obs-tools) .key-lines h3 { color: var(--o-ivory); font-weight: 400; font-size: 1.35rem; }
:where(:root) body.obs:where(.obs-tools) .key-line-item { border: 0; border-bottom: 1px solid var(--o-line); border-radius: 0; padding: 10px 0; }
:where(:root) body.obs:where(.obs-tools) .key-line-item .lp { color: var(--o-ice-2); }
:where(:root) body.obs:where(.obs-tools) .key-line-item .lt { color: var(--s-text-2); }
:where(:root) body.obs:where(.obs-tools) .house-change { background: transparent; border: 1px solid var(--o-line-2); color: var(--o-ice); font-size: .75rem; }
:where(:root) body.obs:where(.obs-tools) .upsell-card .badge { background: transparent; border: 1px solid var(--o-line-2); color: var(--s-ink-2); font-size: .8125rem; }
:where(:root) body.obs:where(.obs-tools) .upsell-card h4 { color: var(--o-ivory); font-weight: 400; font-size: 1.35rem; }
:where(:root) body.obs:where(.obs-tools) .upsell-card .px { color: var(--o-ink); font-weight: 600; }
:where(:root) body.obs:where(.obs-tools) .upsell-card .px small { color: var(--o-muted); }
/* composite and astrocartography explainers */
:where(:root) body.obs:where(.obs-tools) :is(.explainer h2, .explainer h3, .explainer .vs-card h4, .lines-intro h2) { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-tools) :is(.explainer h3, .explainer .vs-card h4) { font-size: 1.35rem; }
:where(:root) body.obs:where(.obs-tools) .explainer .vs-card { background: transparent; border: 1px solid var(--o-line); }
:where(:root) body.obs:where(.obs-tools) :is(.explainer p, .result-card p, .lines-intro p, .line-card .ld) { color: var(--s-text-2); }
:where(:root) body.obs:where(.obs-tools) .lines-intro { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 14px; }
:where(:root) body.obs:where(.obs-tools) .line-card .ln { color: var(--o-ink); }
:where(:root) body.obs:where(.obs-tools) .line-card .lt { color: var(--o-muted); font-size: .8125rem; }
/* ---------- daylight ---------- */
:where(:root[data-theme="light"]) body.obs:where(.obs-tools) {
  --o-theme-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4b80' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.6 14.6A8 8 0 0 1 9.4 4.4a8 8 0 1 0 10.2 10.2z'/%3E%3C/svg%3E");
  --o-wordmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%231d4b80' stroke-width='1'%3E%3Ccircle cx='13' cy='13' r='8'/%3E%3Cellipse cx='13' cy='13' rx='12.2' ry='4.4' transform='rotate(-36 13 13)'/%3E%3C/svg%3E");
  --glass: rgba(247, 249, 252, .92); --glass-vivid: rgba(255, 255, 255, .98); --glass-border-hover: rgba(29, 75, 128, .45);
  --surface-hover: rgba(29, 75, 128, .06); --border-active: rgba(29, 75, 128, .55);
  --s-ink-2: var(--o-ink-2, #263042); --s-text-2: var(--o-ink-3, #3a4559); --s-link: #33405a; --s-field: #ffffff; --s-scheme: light;
  --s-bar: rgba(247, 249, 252, .94); --s-banner: rgba(255, 255, 255, .98);
  --s-tint: rgba(29, 75, 128, .07); --s-glow: rgba(29, 75, 128, .2); --s-spin: rgba(29, 75, 128, .2);
  --s-lift: 0 10px 24px -16px rgba(29, 75, 128, .55);
  --s-sheen: rgba(29, 75, 128, .035); --s-sheen-2: rgba(29, 75, 128, .05);
  --s-lamp-tint: rgba(138, 90, 16, .06); --s-lamp-line: rgba(138, 90, 16, .35); --s-lamp-chip: rgba(138, 90, 16, .45);
  --s-lamp-rule: rgba(138, 90, 16, .55); --s-scrim: rgba(18, 24, 38, .32);
  --s-error-tint: rgba(179, 38, 30, .07); --s-error-line: var(--o-error); }
/* legacy-theme.css paints these gold in a saved light theme from an ID-weight rule (#cookie-banner inside :is()):
   !important keeps the deep-ice action. */
:where(:root[data-theme="light"]) body.obs:where(.obs-tools) :is(.btn-primary, .upsell-btn) { background: var(--o-ice) !important; color: var(--o-on-ice) !important; border-color: var(--o-ice) !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-tools) :is(.btn-primary, .upsell-btn):hover { background: var(--o-ice-2) !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-tools) :is(#cookie-banner, .cookie-banner) button:not(.deny):not(.cookie-decline) { background: var(--o-ice); color: var(--o-on-ice); border-color: var(--o-ice); }
/* legacy-theme.css gives these a near-transparent var(--surface) from the same ID-weight rule: keep them solid. */
:where(:root[data-theme="light"]) body.obs:where(.obs-tools) .city-suggestions { background: var(--o-night-3) !important; color: var(--o-ink) !important; box-shadow: var(--shadow); }
:where(:root[data-theme="light"]) body.obs:where(.obs-tools) .detail-panel { background: var(--o-night-3) !important; color: var(--o-ink) !important; box-shadow: var(--shadow); }