/* Astro Engine · Observatory UI layer: design tokens and components for every page shell, in both themes.
   Loaded only when ASTRO_OBSERVATORY_UI selects the page (api/observatory_ui.py), which also adds body.obs and the
   shell's class (obs-seo, obs-topnav, obs-tools, obs-landing, obs-auth, obs-bare). Every rule is scoped to body.obs,
   so this file is inert anywhere else. :where() adds no specificity.
   Two themes, one rule set: the rules are theme-neutral and take their colours from the tokens below; a saved light
   theme (theme-preference.js sets html[data-theme="light"] before paint) switches the tokens to their daylight values
   (design system, section "Daylight"), and the [data-theme="light"] rules override the few literal colours.
   Two lights: cold instrument light (ice by night, deep ice by day) for calculation, warm lamp light for reading.
   Paper appears only on reading surfaces (answers, worked examples, offers) and is the same in both themes.
   Colour never carries meaning alone. Fonts: the page's existing DM Sans + Cormorant Garamond request, unchanged. */

/* Metric-matched local fallbacks (no download). Until the web fonts arrive, Arial and Georgia are scaled to
   DM Sans (as Google serves it: opsz 14) and Cormorant Garamond, so the font swap re-wraps far less text and
   moves less of the page (CLS). size-adjust = rendered width ratio in Chromium, kerning included: regular sans
   = median over 25 long prose paragraphs (decans, calculator, /now), other faces = all page text;
   ascent/descent = the web font's metrics divided by size-adjust. The wrapped header lines (--o-sans-header) use
   these faces alone: a self-hosted DM Sans there re-flowed them after first paint in Firefox (measured 2026-10-31). */
@font-face { font-family: "Obs Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 450;
  size-adjust: 104.5%; ascent-override: 94.93%; descent-override: 29.67%; line-gap-override: 0%; }
@font-face { font-family: "Obs Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 451 549;
  size-adjust: 105.2%; ascent-override: 94.3%; descent-override: 29.47%; line-gap-override: 0%; }
@font-face { font-family: "Obs Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 649;
  size-adjust: 100.08%; ascent-override: 99.12%; descent-override: 30.98%; line-gap-override: 0%; }
@font-face { font-family: "Obs Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 650 1000;
  size-adjust: 101.62%; ascent-override: 97.62%; descent-override: 30.51%; line-gap-override: 0%; }
@font-face { font-family: "Obs Serif Fallback"; src: local("Georgia"); font-weight: 100 549;
  size-adjust: 88.28%; ascent-override: 104.67%; descent-override: 32.51%; line-gap-override: 0%; }
@font-face { font-family: "Obs Serif Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 550 1000;
  size-adjust: 76.8%; ascent-override: 120.31%; descent-override: 37.37%; line-gap-override: 0%; }
/* Android, ChromeOS and most Linux have neither Arial nor Georgia, so the faces above do not resolve there.
   Same method against Roboto and Noto Serif (Android's system families; calibrated with Google's files). */
@font-face { font-family: "Obs Sans Fallback Android"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 100 450;
  size-adjust: 104.58%; ascent-override: 94.86%; descent-override: 29.64%; line-gap-override: 0%; }
@font-face { font-family: "Obs Sans Fallback Android"; src: local("Roboto Medium"), local("Roboto-Medium"); font-weight: 451 549;
  size-adjust: 104.98%; ascent-override: 94.49%; descent-override: 29.53%; line-gap-override: 0%; }
@font-face { font-family: "Obs Sans Fallback Android"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 550 649;
  size-adjust: 106.4%; ascent-override: 93.23%; descent-override: 29.14%; line-gap-override: 0%; }
@font-face { font-family: "Obs Sans Fallback Android"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 650 1000;
  size-adjust: 108.03%; ascent-override: 91.83%; descent-override: 28.7%; line-gap-override: 0%; }
@font-face { font-family: "Obs Serif Fallback Android"; src: local("Noto Serif"), local("NotoSerif-Regular"); font-weight: 100 549;
  size-adjust: 82.37%; ascent-override: 112.18%; descent-override: 34.84%; line-gap-override: 0%; }
@font-face { font-family: "Obs Serif Fallback Android"; src: local("Noto Serif Bold"), local("NotoSerif-Bold"); font-weight: 550 1000;
  size-adjust: 78.26%; ascent-override: 118.07%; descent-override: 36.67%; line-gap-override: 0%; }

:where(:root) body.obs {
  /* Observatory tokens (source of truth: gate2 design system) */
  --o-night: #060a12; --o-night-2: #0a101b; --o-night-3: #0f1726; --o-line: #1f2c42; --o-line-2: #2f405b;
  --o-control: #5a6f91; /* control borders: >= 3.5:1 on every dark surface (WCAG 1.4.11) */
  --o-ink: #eef3fc; --o-ivory: #f4eee4; --o-muted: #b4bfd0; --o-faint: #8f9bb0;
  --o-ice: #aed9ff; --o-ice-2: #d4ebff; --o-on-ice: #07101e;
  --o-lamp: #f3c88b; --o-lamp-2: #ffdcaa;
  --o-paper: #f5f0e6; --o-paper-2: #ede5d6; --o-paper-rule: #d8cebb; --o-paper-ink: #161b27;
  --o-paper-muted: #4b5467; --o-paper-faint: #5b657c; --o-paper-accent: #1d4b80;
  --o-error: #ffb4a8; --o-error-paper: #8f2d1f;
  --o-ink-2: #d3dbe8; --o-ink-3: #c4ccd9; /* secondary inks: navigation, labels, table text (2); ledes, captions (3) */
  --o-moon-lit: #eef3fc; --o-moon-dark: #1f2c42; --o-moon-rim: #5a6f91; /* the monochrome moon (calendar day cells) */
  --o-serif: "Cormorant Garamond", "Obs Serif Fallback", "Obs Serif Fallback Android", Georgia, serif;
  --o-sans: "DM Sans", "Obs Sans Fallback", "Obs Sans Fallback Android", Arial, Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif;
  --o-sans-header: "Obs Sans Fallback", "Obs Sans Fallback Android", Arial, Helvetica, system-ui, sans-serif; /* no web font: lines that must not re-wrap */
  /* Zodiac and planet glyphs drawn as text, not as colour emoji tiles: a symbol face before the system faces (WebKit has
     no font-variant-emoji; Chromium and Firefox also get font-variant-emoji: text on the shells that use this stack). */
  --o-sans-glyph: "DM Sans", "Obs Sans Fallback", "Obs Sans Fallback Android", Arial, Helvetica, "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", system-ui, -apple-system, "Segoe UI", sans-serif;
  --o-ease: cubic-bezier(.2, .7, .2, 1);
  /* Existing shell tokens, remapped so inline styles that use them follow the new language */
  --void: #060a12; --cosmos: #060a12; --nebula: #0b111e;
  --surface: rgba(174, 217, 255, .035); --border: rgba(174, 217, 255, .14); --border-hover: rgba(174, 217, 255, .45);
  --gold: #aed9ff; --gold-bright: #d4ebff; --gold-dim: #cfe3f7; --gold-glow: rgba(174, 217, 255, .12);
  --cyan: #aed9ff; --purple: #aed9ff;
  --text: #eef3fc; --text-dim: #b4bfd0; --muted: #8f9bb0; --text-muted: #8f9bb0;
  --radius: 14px; --radius-sm: 10px; --radius-xs: 6px;
  /* foundation.css tokens (shared focus ring, inputs): Observatory values */
  --ae-ink: #060a12; --ae-ivory: #eef3fc; --ae-surface: #070c16; --ae-border: #5a6f91; --ae-muted: #b4bfd0;
  --ae-accent: #aed9ff; --ae-accent-ink: #07101e; --ae-focus: #aed9ff;
  --shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
  background: radial-gradient(1100px 620px at 82% -12%, rgba(90, 150, 220, .10), transparent 62%), #060a12;
  color: var(--o-ink);
  font-family: var(--o-sans);
  line-height: 1.62;
}
/* Daylight (a saved light theme): the same tokens, daylight values (design system, section "Daylight"; every text
   token >= 4.5:1 and --o-control >= 3:1 on the field, panels, white and both papers). Paper tokens are unchanged. */
:where(:root[data-theme="light"]) body.obs {
  --o-night: #eef2f7; --o-night-2: #f7f9fc; --o-night-3: #ffffff; --o-line: #d4dce7; --o-line-2: #c3cedc;
  --o-control: #64748b;
  --o-ink: #121826; --o-ivory: #0f1522; --o-muted: #44506a; --o-faint: #56627a;
  --o-ice: #1d4b80; --o-ice-2: #163d69; --o-on-ice: #f7f9fc;
  --o-lamp: #8a5a10; --o-lamp-2: #7a4f0e;
  --o-error: #b3261e;
  --o-ink-2: #263042; --o-ink-3: #3a4559; /* >= 8.5:1 on the field, panels, white and both papers */
  --o-moon-lit: #ffffff; --o-moon-dark: #44506a; --o-moon-rim: #64748b;
  --void: #eef2f7; --cosmos: #eef2f7; --nebula: #f7f9fc;
  --surface: rgba(29, 75, 128, .04); --border: rgba(29, 75, 128, .18); --border-hover: rgba(29, 75, 128, .45);
  --gold: #1d4b80; --gold-bright: #163d69; --gold-dim: #24364f; --gold-glow: rgba(29, 75, 128, .10);
  --cyan: #1d4b80; --purple: #1d4b80;
  --text: #121826; --text-dim: #44506a; --muted: #56627a; --text-muted: #56627a;
  --ae-ink: #eef2f7; --ae-ivory: #121826; --ae-surface: #ffffff; --ae-border: #64748b; --ae-muted: #44506a;
  --ae-accent: #1d4b80; --ae-accent-ink: #f7f9fc; --ae-focus: #1d4b80;
  --shadow: 0 18px 40px -24px rgba(18, 24, 38, .28);
  background: radial-gradient(1100px 620px at 82% -12%, rgba(29, 75, 128, .07), transparent 62%), #eef2f7;
}
:where(:root[data-theme="light"]) body.obs ::selection { background: rgba(29, 75, 128, .18); }
:where(:root) body.obs .bg-stars { display: none; }
:where(:root) body.obs ::selection { background: rgba(174, 217, 255, .28); }
:where(:root) body.obs :focus-visible { outline: 2px solid var(--o-ice); outline-offset: 3px; border-radius: 4px; }
:where(:root) body.obs h1, :where(:root) body.obs h2, :where(:root) body.obs h3, :where(:root) body.obs h4 { font-family: var(--o-serif); font-weight: 400; color: var(--o-ivory); letter-spacing: -.005em; }
/* Links take their colour from the shell's own rule (a { color: var(--gold) }, remapped above). This fallback has
   zero specificity, so component rules such as the gold Advisor buttons (.advisor-whisper a: dark ink on gold)
   keep their own ink. */
:where(:root body.obs a) { color: var(--o-ice); text-underline-offset: .22em; text-decoration-thickness: 1px; }
:where(:root body.obs a:hover) { color: var(--o-ice-2); }

/* ---------- the seo_common shell (obs-seo) ----------
   Every rule below is scoped to the seo_common shell with :where(.obs-seo), which adds no specificity: other shells
   reuse class names such as .logo, .container, .card, .site-footer and .lang-dd, so these rules must not reach them.
   Other shells get their own blocks; the tokens, type and focus above are shared by all.
   Colours come from the tokens (night above, daylight in the token block and at the end of this file); the shell's own
   tokens below hold its few literal night values. Translucent tints are color-mix() of a token, so they follow the
   theme. The site's light-theme rules (legacy-theme.css) use ID-specificity selectors for .site-header and
   .summary-card; the daylight section beats them with a commented !important where they would win. */
:where(:root) body.obs:where(.obs-seo) {
  /* names read by the shared components' inline styles and scripts (newsletter, feedback popup, share, email modal) */
  --rose: var(--o-error); --teal: var(--o-ice); --card-bg: var(--o-night-3); --card: var(--o-night-3); --purple-bright: var(--o-ice-2);
  --o-seo-bar: rgba(6, 10, 18, .92);
  --o-seo-strip: #03060c;
  --o-seo-hover: #111a2b;
  --o-seo-field: #070c16;
  --o-seo-cookie: rgba(10, 16, 27, .97);
  --o-seo-note: #e8dcc8;
  --o-seo-soft: #9fd0ff;
  --o-seo-action-shadow: 0 10px 30px -12px rgba(174, 217, 255, .55);
  --o-seo-paper-shadow: 0 40px 80px -36px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .2);
  --o-seo-summary-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 40px 80px -36px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .2);
  --o-seo-scheme: dark;
  font-variant-emoji: text;
}

/* The page's scripts show and hide states with the hidden attribute; no layer display rule may reveal one. */
:where(:root) body.obs:where(.obs-seo) [hidden] { display: none !important; }

/* ---------- advisor line above the header (inline-styled in seo_common) ---------- */
:where(:root) body.obs:where(.obs-seo) a[data-cta="seo-advisor-banner"] {
  background: var(--o-seo-strip) !important; border-bottom: 1px solid var(--o-line) !important; padding: 9px 20px !important;
}
/* This line sits on a wrap threshold at common phone widths (375 px): a web-font swap re-wrapped it and moved the
   whole page (CLS 0.32). The header stack never swaps: DM Sans when ready at first render, otherwise the local faces. */
:where(:root) body.obs:where(.obs-seo) a[data-cta="seo-advisor-banner"], :where(:root) body.obs:where(.obs-seo) a[data-cta="seo-advisor-banner"] span {
  font-family: var(--o-sans-header) !important;
}
:where(:root) body.obs:where(.obs-seo) a[data-cta="seo-advisor-banner"] span:first-child { color: var(--o-ice) !important; font-weight: 600 !important; }
:where(:root) body.obs:where(.obs-seo) a[data-cta="seo-advisor-banner"] span:last-child { color: var(--o-muted) !important; }

/* ---------- header ---------- */
:where(:root) body.obs:where(.obs-seo) .site-header { background: var(--o-seo-bar); color: var(--o-ink); border-bottom: 1px solid var(--o-line); box-shadow: none; }
:where(:root) body.obs:where(.obs-seo) .header-inner { max-width: 1360px; min-height: 72px; gap: 24px; }
:where(:root) body.obs:where(.obs-seo) .logo {
  display: inline-flex; align-items: center; gap: 12px; font-family: var(--o-sans-header); font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--o-ink); text-decoration: none; white-space: nowrap; min-height: 44px;
}
:where(:root) body.obs:where(.obs-seo) .logo::before {
  content: ""; flex: none; width: 26px; height: 26px;
  background: 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") center / contain no-repeat;
}
:where(:root) body.obs:where(.obs-seo) .header-nav { gap: clamp(12px, 1.4vw, 22px); }
/* The header's text (wordmark, nav, language button) uses the same never-swapping stack as the advisor line: the nav
   wraps onto several rows on phones, and any width change from a font swap (the wordmark's included) moved a link to
   another row and shifted the page (Android-like fonts: CLS 0.15-0.19 at 344-360 px). */
:where(:root) body.obs:where(.obs-seo) .header-nav > a { font-family: var(--o-sans-header); font-size: .9375rem; font-weight: 400; color: var(--o-ink-2); min-height: 44px; display: inline-flex; align-items: center; }
:where(:root) body.obs:where(.obs-seo) .header-nav > a:hover { color: var(--o-ink); text-decoration: underline; }
/* The first link carries an inline gold emphasis; neutralise it so no link looks like the current page. */
:where(:root) body.obs:where(.obs-seo) .header-nav > a:first-child { color: var(--o-ink-2) !important; }
/* language button and its menu (.lang-sw scope: legacy-theme.css styles these three at 0,2,2 in a saved light theme) */
:where(:root) body.obs:where(.obs-seo) .lang-sw .lang-sw-btn { background: transparent; border: 1px solid var(--o-control); color: var(--o-ink); min-height: 44px; padding: 0 12px; border-radius: 6px; font-family: var(--o-sans-header); }
:where(:root) body.obs:where(.obs-seo) .lang-sw .lang-sw-btn:hover { border-color: var(--o-ice); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-seo) .lang-sw .lang-dd {
  background: var(--o-night-3); border: 1px solid var(--o-line-2); border-radius: 12px; padding: 6px; min-width: 190px;
  backdrop-filter: none; box-shadow: var(--shadow);
}
:where(:root) body.obs:where(.obs-seo) .lang-sw .lang-dd a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; background: transparent; color: var(--o-ink-2); font-size: .9375rem; }
:where(:root) body.obs:where(.obs-seo) .lang-sw .lang-dd a:hover { background: color-mix(in srgb, var(--o-ice) 10%, transparent); color: var(--o-ink); }
/* the current language: weight and an underline as well as colour */
:where(:root) body.obs:where(.obs-seo) .lang-sw .lang-dd a.active { color: var(--o-ice); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 1024px) {
  /* seo_common keeps every destination visible on narrow screens (wrapped, non-sticky); keep that. */
  :where(:root) body.obs:where(.obs-seo) .header-inner { gap: 8px; padding-block: 2px; min-height: 0; }
  :where(:root) body.obs:where(.obs-seo) .header-nav { gap: 0 18px; }
  :where(:root) body.obs:where(.obs-seo) .header-nav > a { font-size: .9375rem; }
}

/* ---------- page frame and article typography (library pages) ---------- */
:where(:root) body.obs:where(.obs-seo) main.container, :where(:root) body.obs:where(.obs-seo) .container { max-width: 1100px; }
:where(:root) body.obs:where(.obs-seo) .page-title, :where(:root) body.obs:where(.obs-seo) main h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem); line-height: 1.02; color: var(--o-ivory); text-wrap: balance; }
/* Headings painted with a gradient through background-clip: text get solid ink (no gold or pink gradients). */
:where(:root) body.obs:where(.obs-seo) :is(main, .container) :is(h1, h2, h3) { -webkit-text-fill-color: currentColor; }
:where(:root) body.obs:where(.obs-seo) :is(h1, h2, h3)[style*="background-clip"], :where(:root) body.obs:where(.obs-seo) :is(h1, h2, h3)[style*="text-fill"] {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--o-ivory) !important;
}
/* Measures in em, not ch: ch is the width of "0" in whichever font is showing, so a ch measure changes width
   when the web font arrives (DM Sans digits are wide). 42.4em = 62ch and 45.1em = 66ch in DM Sans. */
:where(:root) body.obs:where(.obs-seo) main h1 + p, :where(:root) body.obs:where(.obs-seo) .page-subtitle, :where(:root) body.obs:where(.obs-seo) .hero-subtitle { color: var(--o-ink-3); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; max-width: 42.4em; margin-inline: auto; }
:where(:root) body.obs:where(.obs-seo) .section-title { color: var(--o-ivory); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
:where(:root) body.obs:where(.obs-seo) .section-text { color: var(--o-ink-3); }
/* section titles given an inline accent (green strengths, purple shadow side): every section title is ink */
:where(:root) body.obs:where(.obs-seo) .section-title[style*="color"] { color: var(--o-ivory) !important; }
:where(:root) body.obs:where(.obs-seo) .hero-date { color: var(--o-faint); }
/* UI labels in sentence case: no tracked capitals anywhere in the content (the wordmark is in the header) */
:where(:root) body.obs:where(.obs-seo) :is(main, footer, aside, section, .container) * { text-transform: none; }
:where(:root) body.obs:where(.obs-seo) :is(main, .container) :is([class*="label"], [class*="eyebrow"], [class*="badge"], [class*="kicker"], [class*="-tag"], [class*="meta-"], th, .tag, .card-sign, .sign-element, .hero-badge) { text-transform: none; letter-spacing: normal; }
:where(:root) body.obs:where(.obs-seo) [style*="uppercase"] { text-transform: none !important; letter-spacing: normal !important; }

/* ---------- glyphs: zodiac and planet symbols drawn as text in instrument ink, never as colour emoji tiles ---------- */
:where(:root) body.obs:where(.obs-seo) :is(.hero-symbol, .symbol, .sign-symbol, .sign-sym, .ptable-cell-sym, .ptable-sign-sym, .ptable-planet-sym, .tgrid-planet-sym, .card-sign, .sign-icon, .wsc-symbol, .celeb-sign, .aspect-glyph, .aspect-type-symbol, .placement-glyph, .transit-icon, .tnp-glyph, .sign-section-symbol, .compat-symbols, .dual-symbol, .pair-signs, .rc-icon, .aspect-hero-symbols, .planet-symbol, .sign-glyph) {
  font-family: var(--o-sans-glyph); font-variant-emoji: text; text-shadow: none; filter: none !important;
}
:where(:root) body.obs:where(.obs-seo) .hero-symbol { color: var(--o-ice-2); font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem); line-height: 1.1; }
/* Per-sign and per-element colours written inline (red, green, yellow, cyan, purple glyphs and labels) become one
   instrument ink: the sign or element is always named in text beside them, so no information is lost. */
:where(:root) body.obs:where(.obs-seo) :is([style*="#ef4444" i], [style*="#22c55e" i], [style*="#eab308" i], [style*="#06b6d4" i], [style*="#9a78c9" i], [style*="#7f1d1d" i], [style*="#8b7355" i], [style*="#f97316" i], [style*="#3b82f6" i], [style*="#ec4899" i], [style*="#f59e0b" i], [style*="#57534e" i], [style*="#c0c0c0" i], [style*="#10b981" i], [style*="#fbbf24" i], [style*="#e6c878" i], [style*="#d4a843" i], [style*="#d4af37" i], [style*="#8b5cf6" i], [style*="#a855f7" i], [style*="#94a3b8" i], [style*="#f0d289" i], [style*="#78716c" i], [style*="#f43f5e" i], [style*="#64748b" i], [style*="#a8a29e" i]) {
  color: var(--o-ice-2) !important; border-color: var(--o-line-2) !important; text-shadow: none !important; filter: none !important;
}
:where(:root) body.obs:where(.obs-seo) :is(h1, h2, h3, h4):is([style*="#ef4444" i], [style*="#22c55e" i], [style*="#eab308" i], [style*="#06b6d4" i], [style*="#9a78c9" i], [style*="#f97316" i], [style*="#3b82f6" i], [style*="#ec4899" i], [style*="#f59e0b" i], [style*="#10b981" i], [style*="#fbbf24" i], [style*="#8b5cf6" i], [style*="#a855f7" i], [style*="#c0c0c0" i], [style*="#78716c" i], [style*="#f43f5e" i], [style*="#64748b" i]) { color: var(--o-ivory) !important; }
/* any heading coloured inline (planet colours, gold accents) reads as a heading: ink */
:where(:root) body.obs:where(.obs-seo) :is(main, .container) :is(h1, h2, h3, h4)[style*="color"] { color: var(--o-ivory) !important; }
/* the same colours given to cards and cells through a custom property */
:where(:root) body.obs:where(.obs-seo) [style*="--sign-color"] { --sign-color: var(--o-ice-2) !important; }
:where(:root) body.obs:where(.obs-seo) [style*="--cell-color"] { --cell-color: var(--o-ice-2) !important; }
/* inline gold panels and rules (rgba gold tints) become night panels with a hairline */
:where(:root) body.obs:where(.obs-seo) :is([style*="background:rgba(212" i], [style*="background: rgba(212" i], [style*="background:rgba(230" i], [style*="background: rgba(230" i], [style*="background:rgba(240" i], [style*="background: rgba(240" i], [style*="background:rgba(245" i], [style*="background: rgba(245" i], [style*="background:rgba(251" i], [style*="background: rgba(251" i]) {
  background: var(--o-night-2) !important;
}
:where(:root) body.obs:where(.obs-seo) :is([style*="solid rgba(212" i], [style*="solid rgba(230" i], [style*="solid rgba(240" i], [style*="solid rgba(251" i], [style*="solid var(--gold" i]) { border-color: var(--o-line-2) !important; }
/* inline gold buttons (background var(--gold) or a gold gradient, dark ink): the instrument's primary action */
:where(:root) body.obs:where(.obs-seo) :is(a, button):is([style*="background:var(--gold" i], [style*="background: var(--gold" i], [style*="linear-gradient(135deg,#d4" i], [style*="linear-gradient(135deg, #d4" i], [style*="linear-gradient(135deg,#f0d289" i], [style*="linear-gradient(135deg, #f0d289" i], [style*="linear-gradient(135deg, rgb(212" i]) {
  background: var(--o-ice) !important; color: var(--o-on-ice) !important; border: 0 !important; border-radius: 999px !important;
  font-weight: 600 !important; box-shadow: none !important; text-decoration: none !important;
}

/* ---------- paper: answers and worked examples are reading surfaces (warm paper under a lamp, the same in both themes) ---------- */
:where(:root) body.obs:where(.obs-seo) .summary-card {
  position: relative; color: var(--o-paper-ink); border: 0; border-radius: 3px; padding: clamp(24px, 3.4vw, 48px);
  box-shadow: var(--o-seo-summary-shadow);
  background: radial-gradient(120% 70% at 0% 0%, rgba(255, 236, 205, .55), rgba(255, 236, 205, 0) 60%), linear-gradient(180deg, #f7f2e9, #f2ebdf);
}
:where(:root) body.obs:where(.obs-seo) .summary-card .section-title, :where(:root) body.obs:where(.obs-seo) .summary-card h2, :where(:root) body.obs:where(.obs-seo) .summary-card h3 { color: var(--o-paper-ink); }
:where(:root) body.obs:where(.obs-seo) .summary-card p, :where(:root) body.obs:where(.obs-seo) .summary-card li { color: #1f2533; font-size: 1.0625rem; line-height: 1.68; max-width: 45.1em; }
:where(:root) body.obs:where(.obs-seo) .summary-card a { color: var(--o-paper-accent); }
:where(:root) body.obs:where(.obs-seo) .summary-card strong, :where(:root) body.obs:where(.obs-seo) .summary-card b { color: var(--o-paper-ink); }
:where(:root) body.obs:where(.obs-seo) .summary-card table { width: 100%; border-collapse: collapse; margin-top: 12px; font-variant-numeric: tabular-nums; }
:where(:root) body.obs:where(.obs-seo) .summary-card caption { text-align: left; color: var(--o-paper-muted); font-size: .9375rem; padding-bottom: 8px; }
:where(:root) body.obs:where(.obs-seo) .summary-card th { text-align: left; color: var(--o-paper-muted); font-weight: 500; font-size: .875rem; border-bottom: 1px solid var(--o-paper-rule); padding: 8px 10px 8px 0; background: none; }
:where(:root) body.obs:where(.obs-seo) .summary-card td { color: #1f2533; border-bottom: 1px solid var(--o-paper-rule); padding: 10px 10px 10px 0; background: none; }
/* Tokens inside paper. Answer cards and offers carry inline styles such as color: var(--gold-dim) or var(--text), and
   the layer's own components read the Observatory tokens: on paper both must resolve to paper inks (the night values
   left such headings at 1.14:1). Paper is the same in both themes, so this rule is too. */
/* both themes */
:where(:root) body.obs:where(.obs-seo) .summary-card, :where(:root) body.obs:where(.obs-seo) #calculator-reading-offer, :where(:root) body.obs:where(.obs-seo) #calculator-report-panel, :where(:root) body.obs:where(.obs-seo) #calculator-save-panel {
  --gold: #1d4b80; --gold-bright: #163d69; --gold-dim: #161b27; --gold-glow: rgba(29, 75, 128, .12);
  --cyan: #1d4b80; --purple: #1d4b80;
  --text: #1f2533; --text-dim: #4b5467; --muted: #4b5467; --text-muted: #4b5467;
  --surface: rgba(22, 27, 39, .04); --border: #d8cebb; --border-hover: #8a7f6a;
  --o-ink: #161b27; --o-ink-2: #1f2533; --o-ink-3: #4b5467; --o-ivory: #161b27; --o-muted: #4b5467; --o-faint: #5b657c;
  --o-ice: #1d4b80; --o-ice-2: #163d69; --o-on-ice: #f5f0e6; --o-lamp: #735d2e; --o-error: #8f2d1f;
  --o-line: #d8cebb; --o-line-2: #d8cebb; --o-control: #8a7f6a; --o-night-2: transparent; --o-night-3: #fbf8f2;
  --o-seo-field: #fffdf8; --o-seo-scheme: light; --o-seo-action-shadow: none;
  /* tokens defined with var() on the body inherit their night value: restate them for paper */
  --rose: #8f2d1f; --teal: #1d4b80; --purple-bright: #163d69;
  /* focus on paper: dark ink ring (ice on paper would be ~1.3:1) */
  --ae-focus: #1d4b80;
}

/* ---------- invitations into the calculator and the Advisor ---------- */
:where(:root) body.obs:where(.obs-seo) .cta-section, :where(:root) body.obs:where(.obs-seo) .report-cta, :where(:root) body.obs:where(.obs-seo) .advisor-whisper, :where(:root) body.obs:where(.obs-seo) .calc-advisor-banner {
  background: var(--o-night-2) !important; border: 1px solid var(--o-line-2) !important; border-radius: 14px !important; box-shadow: none; backdrop-filter: none;
  background-image: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--o-ice) 8%, transparent), transparent 70%) !important;
}
:where(:root) body.obs:where(.obs-seo) .cta-section h3 { color: var(--o-ivory); font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); }
:where(:root) body.obs:where(.obs-seo) .cta-section p { color: var(--o-ink-3); }
/* report card (cta_components): the eyebrow is a sentence-case label, the price is data */
:where(:root) body.obs:where(.obs-seo) .report-cta { padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 40px); }
:where(:root) body.obs:where(.obs-seo) .report-cta::before { display: none; }
:where(:root) body.obs:where(.obs-seo) .report-cta .cta-eyebrow { font: 500 .9375rem var(--o-sans); letter-spacing: 0; text-transform: none; color: var(--o-faint); opacity: 1; margin-bottom: 12px; }
:where(:root) body.obs:where(.obs-seo) .report-cta .cta-body { max-width: 34em; }
:where(:root) body.obs:where(.obs-seo) .report-cta .cta-body p { color: var(--o-ink-3); font-size: 1.0625rem; line-height: 1.62; margin-bottom: 20px; }
:where(:root) body.obs:where(.obs-seo) .report-cta .cta-price { display: block; font: 600 1rem var(--o-sans); letter-spacing: 0; color: var(--o-ink); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
:where(:root) body.obs:where(.obs-seo) .report-cta .cta-note { color: var(--o-faint); font-size: .875rem; margin-top: 12px; }
/* Advisor whisper: one quiet line and the way in (Cormorant only at >= 20 px, upright: the italic face is not loaded) */
:where(:root) body.obs:where(.obs-seo) .advisor-whisper { padding: 28px 24px; }
:where(:root) body.obs:where(.obs-seo) .advisor-whisper p { font: 400 1.25rem/1.45 var(--o-serif); font-style: normal; color: var(--o-ink-3); margin-bottom: 16px; }
/* the calculator's Advisor banner */
:where(:root) body.obs:where(.obs-seo) .calc-advisor-banner .cab-text { font: 400 1.25rem/1.45 var(--o-serif); color: var(--o-ink-2); }
:where(:root) body.obs:where(.obs-seo) .calc-advisor-banner .cab-free { color: var(--o-faint); font-size: .875rem; letter-spacing: 0; opacity: 1; }

/* ---------- actions ---------- */
/* primary: ice pill on night, deep-ice pill by day (paper keeps the ink pill, below) */
:where(:root) body.obs:where(.obs-seo) .by-cta-button, :where(:root) body.obs:where(.obs-seo) .cta-button, :where(:root) body.obs:where(.obs-seo) .cta-primary, :where(:root) body.obs:where(.obs-seo) .calc-form > button, :where(:root) body.obs:where(.obs-seo) #calculator-reading-choose, :where(:root) body.obs:where(.obs-seo) #calculator-report-continue, :where(:root) body.obs:where(.obs-seo) #calculator-save-button, :where(:root) body.obs:where(.obs-seo) .report-cta .cta-btn, :where(:root) body.obs:where(.obs-seo) .advisor-whisper a, :where(:root) body.obs:where(.obs-seo) .calc-advisor-banner .cab-btn, :where(:root) body.obs:where(.obs-seo) .email-capture button[type="submit"], :where(:root) body.obs:where(.obs-seo) .ec-atf-form button[type="submit"], :where(:root) body.obs:where(.obs-seo) .syn-cta-primary, :where(:root) body.obs:where(.obs-seo) .hero-cta, :where(:root) body.obs:where(.obs-seo) .star-cta, :where(:root) body.obs:where(.obs-seo) .email-modal-submit, :where(:root) body.obs:where(.obs-seo) #feedbackPopup > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--o-ice) !important; color: var(--o-on-ice) !important; border: 0 !important; font: 600 1rem var(--o-sans);
  box-shadow: var(--o-seo-action-shadow); text-decoration: none; cursor: pointer; transform: none; transition: background 160ms var(--o-ease);
  -webkit-text-fill-color: currentColor; letter-spacing: 0; text-transform: none;
}
:where(:root) body.obs:where(.obs-seo) .by-cta-button:hover, :where(:root) body.obs:where(.obs-seo) .cta-button:hover, :where(:root) body.obs:where(.obs-seo) .cta-primary:hover, :where(:root) body.obs:where(.obs-seo) .calc-form > button:hover, :where(:root) body.obs:where(.obs-seo) .report-cta .cta-btn:hover, :where(:root) body.obs:where(.obs-seo) .advisor-whisper a:hover, :where(:root) body.obs:where(.obs-seo) .calc-advisor-banner .cab-btn:hover, :where(:root) body.obs:where(.obs-seo) .email-capture button[type="submit"]:hover, :where(:root) body.obs:where(.obs-seo) .ec-atf-form button[type="submit"]:hover, :where(:root) body.obs:where(.obs-seo) .syn-cta-primary:hover, :where(:root) body.obs:where(.obs-seo) .hero-cta:hover, :where(:root) body.obs:where(.obs-seo) .star-cta:hover, :where(:root) body.obs:where(.obs-seo) .email-modal-submit:hover, :where(:root) body.obs:where(.obs-seo) #feedbackPopup > button:hover {
  background: var(--o-ice-2) !important; color: var(--o-on-ice) !important; transform: none; box-shadow: var(--o-seo-action-shadow); opacity: 1;
}
:where(:root) body.obs:where(.obs-seo) button:disabled, :where(:root) body.obs:where(.obs-seo) #calculator-reading-choose:disabled, :where(:root) body.obs:where(.obs-seo) #calculator-report-continue:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* secondary: hairline outline */
:where(:root) body.obs:where(.obs-seo) .cta-outline, :where(:root) body.obs:where(.obs-seo) .cta-secondary, :where(:root) body.obs:where(.obs-seo) .syn-cta-outline, :where(:root) body.obs:where(.obs-seo) #calculator-wheel-retry, :where(:root) body.obs:where(.obs-seo) .email-modal-cancel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px;
  background: transparent !important; color: var(--o-ink) !important; border: 1px solid var(--o-control) !important; font: 500 .9375rem var(--o-sans);
  box-shadow: none; transform: none; width: auto; cursor: pointer; text-decoration: none;
}
:where(:root) body.obs:where(.obs-seo) .cta-outline:hover, :where(:root) body.obs:where(.obs-seo) .cta-secondary:hover, :where(:root) body.obs:where(.obs-seo) .syn-cta-outline:hover, :where(:root) body.obs:where(.obs-seo) #calculator-wheel-retry:hover, :where(:root) body.obs:where(.obs-seo) .email-modal-cancel:hover { border-color: var(--o-ice) !important; background: color-mix(in srgb, var(--o-ice) 8%, transparent) !important; }
/* every other button inside the calculator form keeps its own look: no gold hover lift or glow from the shell */
:where(:root) body.obs:where(.obs-seo) .calc-form button:hover { transform: none; }
:where(:root) body.obs:where(.obs-seo) .calc-form button:not(.calc-form > button, #calculator-reading-choose, #calculator-report-continue, #calculator-save-button, .cta-primary, .syn-cta-primary):hover { box-shadow: none; }
/* text actions inside results ("View full chart", "Save this synastry") reach 44 px */
:where(:root) body.obs:where(.obs-seo) #expand-btn, :where(:root) body.obs:where(.obs-seo) .syn-save-row :is(a, button), :where(:root) body.obs:where(.obs-seo) .chart-save-row a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- index grids (decans, signs): hairline library index, not feature cards ---------- */
:where(:root) body.obs:where(.obs-seo) .sign-grid { gap: 1px; background: var(--o-line); border: 1px solid var(--o-line); border-radius: 12px; overflow: hidden; }
:where(:root) body.obs:where(.obs-seo) .sign-card { background: var(--o-night-2); border: 0; border-radius: 0; box-shadow: none; transition: background 160ms var(--o-ease); }
:where(:root) body.obs:where(.obs-seo) .sign-card:hover { background: var(--o-seo-hover); transform: none; box-shadow: none; }
:where(:root) body.obs:where(.obs-seo) .sign-name { font-family: var(--o-serif); font-size: 1.25rem; color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-seo) .sign-dates { color: var(--o-faint); font-variant-numeric: tabular-nums; }
:where(:root) body.obs:where(.obs-seo) .sign-symbol, :where(:root) body.obs:where(.obs-seo) .sign-sym { color: var(--o-ice-2); }
/* Decan cards carry per-sign inline colours (two fail contrast); one quiet ink keeps the ruler text readable. */
:where(:root) body.obs:where(.obs-seo) .sign-card .symbol, :where(:root) body.obs:where(.obs-seo) .sign-card .sign-element { color: var(--o-ice-2) !important; border-color: var(--o-line-2) !important; }
:where(:root) body.obs:where(.obs-seo) .sign-card .sign-element { background: transparent; letter-spacing: 0; font-weight: 500; font-size: .875rem; }
/* The planet table's sign headers carry per-sign inline colours too (Virgo #8b7355: 4.42:1 on night); same quiet ink.
   The abbreviation under each symbol names the sign, so colour never carries the meaning alone. */
:where(:root) body.obs:where(.obs-seo) .ptable-header { color: var(--o-ice-2) !important; }
/* the decorative glyph tiles that failed contrast: planet table cells (/astrology), decan index labels, avatar initials */
:where(:root) body.obs:where(.obs-seo) .ptable-cell { background: var(--o-night-2); border-color: var(--o-line); }
:where(:root) body.obs:where(.obs-seo) .ptable-cell:hover { background: var(--o-seo-hover); border-color: var(--o-control); box-shadow: none; transform: none; }
:where(:root) body.obs:where(.obs-seo) .ptable-cell-sym { color: var(--o-ice-2) !important; }
:where(:root) body.obs:where(.obs-seo) .ptable-cell:hover .ptable-cell-sym { filter: none; color: var(--o-ink) !important; }
/* dignity marks: line style as well as tone (domicile solid, exalted double, detriment dashed, fall dotted);
   !important: the cells' inline colours are neutralised with !important above */
:where(:root) body.obs:where(.obs-seo) .ptable-dignity-domicile { border-bottom: 2px solid var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-seo) .ptable-dignity-exaltation { border-bottom: 3px double var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-seo) .ptable-dignity-detriment { border-bottom: 2px dashed var(--o-lamp) !important; }
:where(:root) body.obs:where(.obs-seo) .ptable-dignity-fall { border-bottom: 2px dotted var(--o-lamp) !important; }
:where(:root) body.obs:where(.obs-seo) span[style*="border-radius:50%"][style*="width:10px"]:is([style*="#22c55e" i], [style*="#fbbf24" i], [style*="#94a3b8" i], [style*="#f97316" i], [style*="#ef4444" i]) {
  width: 18px !important; height: 0 !important; border-radius: 0 !important; background: none !important; vertical-align: middle;
}
:where(:root) body.obs:where(.obs-seo) span[style*="border-radius:50%"][style*="width:10px"][style*="#22c55e" i] { border-bottom: 2px solid var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-seo) span[style*="border-radius:50%"][style*="width:10px"][style*="#fbbf24" i] { border-bottom: 3px double var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-seo) span[style*="border-radius:50%"][style*="width:10px"][style*="#94a3b8" i] { border-bottom: 1px solid var(--o-faint) !important; }
:where(:root) body.obs:where(.obs-seo) span[style*="border-radius:50%"][style*="width:10px"][style*="#f97316" i] { border-bottom: 2px dashed var(--o-lamp) !important; }
:where(:root) body.obs:where(.obs-seo) span[style*="border-radius:50%"][style*="width:10px"][style*="#ef4444" i] { border-bottom: 2px dotted var(--o-lamp) !important; }
:where(:root) body.obs:where(.obs-seo) .decan-index-card { background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 12px; box-shadow: none; }
:where(:root) body.obs:where(.obs-seo) .decan-index-card:hover { border-color: var(--o-control); background: var(--o-seo-hover); box-shadow: none; transform: none; }
:where(:root) body.obs:where(.obs-seo) .decan-index-card .card-sign { color: var(--o-ink-3) !important; font-size: .9375rem; letter-spacing: 0; text-transform: none; }
:where(:root) body.obs:where(.obs-seo) .decan-index-card .card-title { font-weight: 400; font-size: 1.35rem; color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-seo) .decan-index-card .card-ruler { color: var(--o-muted); }
:where(:root) body.obs:where(.obs-seo) .celeb-avatar { background: transparent; border: 1px solid var(--o-line-2); color: var(--o-ivory); font: 400 1.35rem var(--o-serif); }

/* ---------- generic cards, lists, chips, FAQ, cross-links, related content, breadcrumbs ---------- */
:where(:root) body.obs:where(.obs-seo) .card, :where(:root) body.obs:where(.obs-seo) .compat-card, :where(:root) body.obs:where(.obs-seo) .list-card, :where(:root) body.obs:where(.obs-seo) .transit-card, :where(:root) body.obs:where(.obs-seo) .lucky-section {
  background: var(--o-night-2); border: 1px solid var(--o-line); border-radius: 14px; box-shadow: none;
}
:where(:root) body.obs:where(.obs-seo) :is(.card, .compat-card, .sign-card, .list-card):hover { border-color: var(--o-control); box-shadow: none; transform: none; }
:where(:root) body.obs:where(.obs-seo) .answer-block { border-left: 3px solid var(--o-ice) !important; }
/* do / don't lists: the mark's shape carries the meaning (tick, cross), the heading is ink */
:where(:root) body.obs:where(.obs-seo) .list-card h3, :where(:root) body.obs:where(.obs-seo) .list-card.do-list h3, :where(:root) body.obs:where(.obs-seo) .list-card.dont-list h3 { color: var(--o-ivory) !important; font-weight: 400; font-size: 1.35rem; }
:where(:root) body.obs:where(.obs-seo) :is(.list-card, .bullet-list) li { border-bottom-color: var(--o-line); color: var(--o-ink-3); }
:where(:root) body.obs:where(.obs-seo) .list-card.do-list li::before { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-seo) .list-card.dont-list li::before { color: var(--o-faint); }
:where(:root) body.obs:where(.obs-seo) .bullet-list li::before { color: var(--o-ice); }
/* transit card */
:where(:root) body.obs:where(.obs-seo) .transit-icon { color: var(--o-ice-2); }
:where(:root) body.obs:where(.obs-seo) .transit-label { color: var(--o-faint); font-size: .875rem; }
:where(:root) body.obs:where(.obs-seo) .transit-desc { color: var(--o-ink-3); }
/* energy and rating marks: the words say high, moderate or low, so the chip is one quiet outline */
:where(:root) body.obs:where(.obs-seo) .energy-badge, :where(:root) body.obs:where(.obs-seo) :is(.energy-high, .energy-moderate, .energy-low) {
  background: transparent !important; border: 1px solid var(--o-control) !important; color: var(--o-ink-2) !important; /* !important: legacy-theme.css colours these at 0,3,2 by day */
  border-radius: 999px; font: 500 .9375rem var(--o-sans); letter-spacing: 0; text-transform: none;
}
:where(:root) body.obs:where(.obs-seo) .energy-badge { padding: 6px 16px; }
:where(:root) body.obs:where(.obs-seo) .rating-label, :where(:root) body.obs:where(.obs-seo) .lucky-label, :where(:root) body.obs:where(.obs-seo) .sub-score-label { color: var(--o-faint); font-size: .875rem; }
:where(:root) body.obs:where(.obs-seo) .star.filled { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-seo) .star.empty { color: var(--o-faint); opacity: .55; }
:where(:root) body.obs:where(.obs-seo) .lucky-value { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-seo) .lucky-num { background: transparent; border: 1px solid var(--o-line-2); color: var(--o-ink); font-variant-numeric: tabular-nums; }
:where(:root) body.obs:where(.obs-seo) .score-ring { border-color: var(--o-ice); background: transparent; color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-seo) .sub-score-bar { background: var(--o-line); }
:where(:root) body.obs:where(.obs-seo) .sub-score-fill { background: var(--o-ice); }
:where(:root) body.obs:where(.obs-seo) .compat-names { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-seo) .compat-score { color: var(--o-ink-2) !important; font-variant-numeric: tabular-nums; }
/* tags and chips that are not controls: a decorative hairline, ink text */
:where(:root) body.obs:where(.obs-seo) :is(.trait-tag, .focus-tag, .mh-theme-tag, .tc-kw, .sr-badge, .hero-badge, .planet-hero-badge, .dignity-badge, .aspect-nature-badge, .pair-count-badge, .celeb-count-badge, .question-element, .wsc-element, .sign-badge, .tag, .gen-label, .tnp-kw) {
  background: transparent !important; border: 1px solid var(--o-line-2) !important; color: var(--o-ink-2) !important; border-radius: 999px;
  font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: none;
}
:where(:root) body.obs:where(.obs-seo) .shadow-tag { border-style: dashed !important; color: var(--o-ink-3) !important; }
/* tabs */
:where(:root) body.obs:where(.obs-seo) .tone-tab { min-height: 44px; display: inline-flex; align-items: center; background: transparent; border: 1px solid var(--o-control); color: var(--o-ink-2); font-size: .9375rem; }
:where(:root) body.obs:where(.obs-seo) .tone-tab:hover { border-color: var(--o-ice); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-seo) .tone-tab.active { background: var(--o-ice); border-color: var(--o-ice); color: var(--o-on-ice); font-weight: 600; }
/* FAQ */
:where(:root) body.obs:where(.obs-seo) .faq-section h2, :where(:root) body.obs:where(.obs-seo) .faq-section > h3 { color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-seo) .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-seo) .faq-item h3 { font-family: var(--o-serif); font-size: 1.35rem; color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-seo) .faq-item p { color: var(--o-ink-3); }
:where(:root) body.obs:where(.obs-seo) .decan-faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--o-line); border-radius: 0; }
:where(:root) body.obs:where(.obs-seo) .decan-faq-q { color: var(--o-ivory); min-height: 48px; }
/* cross-links (site-wide "Cosmic timing" and per-page link lists) */
:where(:root) body.obs:where(.obs-seo) .cross-links { background: transparent !important; border: 0 !important; border-top: 1px solid var(--o-line) !important; border-radius: 0 !important; padding: 28px 0 8px !important; }
:where(:root) body.obs:where(.obs-seo) .cross-links h2, :where(:root) body.obs:where(.obs-seo) .cross-links h3 { color: var(--o-ivory) !important; font-family: var(--o-serif) !important; font-weight: 400 !important; }
:where(:root) body.obs:where(.obs-seo) .cross-links-grid { gap: 0 28px; }
:where(:root) body.obs:where(.obs-seo) .cross-link {
  display: flex; align-items: center; min-height: 44px; padding: 8px 0; background: none !important; border: 0 !important;
  border-bottom: 1px solid var(--o-line) !important; border-radius: 0 !important; color: var(--o-ink-2) !important; text-decoration: none;
}
:where(:root) body.obs:where(.obs-seo) .cross-link:hover { color: var(--o-ink) !important; text-decoration: underline; }
:where(:root) body.obs:where(.obs-seo) .cross-link.current { color: var(--o-ice) !important; font-weight: 600; text-decoration: underline; }
/* related content (api/related_content.py): a hairline list like the cross-links */
:where(:root) body.obs:where(.obs-seo) .related-content-section { background: transparent; border: 0; border-top: 1px solid var(--o-line); border-radius: 0; padding: 28px 0 8px; transition: none; }
:where(:root) body.obs:where(.obs-seo) .related-content-section:hover { border-color: var(--o-line); }
:where(:root) body.obs:where(.obs-seo) .related-content-section h3 { font: 400 clamp(1.4rem, 1.2rem + .8vw, 1.9rem) var(--o-serif); color: var(--o-ivory); border: 0; padding-bottom: 0; margin-bottom: 8px; }
:where(:root) body.obs:where(.obs-seo) .related-content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: 0 28px; }
:where(:root) body.obs:where(.obs-seo) .related-content-grid a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; background: none; border: 0; border-bottom: 1px solid var(--o-line);
  border-radius: 0; color: var(--o-ink-2); font-size: .9375rem; transform: none;
}
:where(:root) body.obs:where(.obs-seo) .related-content-grid a:hover { background: none; border-color: var(--o-line); color: var(--o-ink); text-decoration: underline; transform: none; }
:where(:root) body.obs:where(.obs-seo) .related-content-grid a .rc-icon { width: 1.25em; text-align: center; color: var(--o-ice-2); opacity: 1; font-size: 1rem; }
/* breadcrumbs (api/related_content.py) */
:where(:root) body.obs:where(.obs-seo) .breadcrumbs-nav { gap: 0 .4rem; font-size: .875rem; color: var(--o-faint); margin-bottom: 8px; padding: 0; }
:where(:root) body.obs:where(.obs-seo) .breadcrumbs-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--o-muted); text-decoration: underline; text-decoration-color: var(--o-line-2); }
:where(:root) body.obs:where(.obs-seo) .breadcrumbs-nav a:hover { color: var(--o-ink); text-decoration-color: currentColor; }
:where(:root) body.obs:where(.obs-seo) .breadcrumbs-nav .bc-sep { color: var(--o-faint); opacity: 1; font-size: .875rem; }
:where(:root) body.obs:where(.obs-seo) .breadcrumbs-nav .bc-current { color: var(--o-ink-3); font-weight: 500; }
/* data tables in articles and timing pages: hairlines, tabular figures */
:where(:root) body.obs:where(.obs-seo) main table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
:where(:root) body.obs:where(.obs-seo) main th { background: transparent; color: var(--o-faint); font: 500 .875rem var(--o-sans); letter-spacing: 0; border-bottom: 1px solid var(--o-line-2); }
:where(:root) body.obs:where(.obs-seo) main td { background: transparent; border-bottom: 1px solid var(--o-line); color: var(--o-ink-2); }
:where(:root) body.obs:where(.obs-seo) main tr:hover td { background: color-mix(in srgb, var(--o-ice) 4%, transparent); }
/* timing pages: the direct answer (TLDR) is a lamp-ruled note, the short answer an ice-ruled panel */
:where(:root) body.obs:where(.obs-seo) .tldr { background: transparent; border-left: 3px solid var(--o-lamp); border-radius: 0; color: var(--o-ink); font-weight: 400; padding: 4px 0 4px 16px; }
:where(:root) body.obs:where(.obs-seo) .tldr strong { color: var(--o-ivory); }

/* ---------- page families: accents written by individual routers ----------
   The audit of every seo family (lane A, slice evidence) found these leftovers of today's gold, green and purple. */
/* tip and hook boxes inside articles: a night panel with a lamp rule (reading accents), not a gold tint */
:where(:root) body.obs:where(.obs-seo) :is(.quick-answer, .fc-pro-tip, .sc-pro-tip, .wd-meeting-tip, .pc-gift-box, .meditation-card, .sm-hook, .cosmic-now-block, .calc-section, .why-section) {
  background: var(--o-night-2) !important; border: 1px solid var(--o-line) !important; border-left: 3px solid var(--o-lamp) !important; border-radius: 10px !important; box-shadow: none !important;
}
:where(:root) body.obs:where(.obs-seo) :is(.calc-section, .why-section, .cosmic-now-block) { border-left-color: var(--o-line) !important; }
/* intro panels painted with a fixed dark slate gradient (aspects, Sabian degrees, schools, celebrities): night-2 panels,
   so they become daylight panels by day instead of grey slabs */
:where(:root) body.obs:where(.obs-seo) :is(.intro-card, .degree-symbol-card, .about-section, .celeb-intro) { background: var(--o-night-2); border: 1px solid var(--o-line); box-shadow: none; }
:where(:root) body.obs:where(.obs-seo) .quick-answer h2 { font-size: 1.25rem; font-weight: 400; color: var(--o-ivory); }
/* gradient tiles on the library hub (/astrology): night tiles with a hairline */
:where(:root) body.obs:where(.obs-seo) a:is([style*="linear-gradient(135deg, rgba(" i], [style*="linear-gradient(135deg,rgba(" i]) { background: var(--o-night-2) !important; border-color: var(--o-line-2) !important; }
:where(:root) body.obs:where(.obs-seo) :is([style*="rgba(34, 197, 94" i], [style*="rgba(34,197,94" i], [style*="rgba(239, 68, 68" i], [style*="rgba(239,68,68" i], [style*="rgba(168, 85, 247" i], [style*="rgba(168,85,247" i]) { border-color: var(--o-line-2) !important; }
/* gradient display titles (schools, love horoscopes) */
:where(:root) body.obs:where(.obs-seo) :is(.hamburg-hero, .hellen-hero, .love-hero, .cm-hero, .daily-hero, .mh-hero, .week-hero, .hero-section, [class*="-hero"]) :is(h1, h2) { background: none !important; -webkit-text-fill-color: currentColor; color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-seo) :is(h1, h2, h3) { -webkit-text-fill-color: currentColor; }
/* the schools' heroes carry a gold and amber glow behind the title */
:where(:root) body.obs:where(.obs-seo) :is(.hamburg-hero, .hellen-hero)::before { display: none; }
/* headings and marks coloured by meaning: ink headings; the mark's shape or the words carry the meaning */
:where(:root) body.obs:where(.obs-seo) :is(.manifest-card h2, .wim-section h3, .day-highlight .dh-label) { color: var(--o-ivory) !important; }
:where(:root) body.obs:where(.obs-seo) .feat-check { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-seo) .day-highlight { border-color: var(--o-line-2) !important; }
:where(:root) body.obs:where(.obs-seo) :is(.te-desc, .mh-event-desc) { color: var(--o-ink-3) !important; }
:where(:root) body.obs:where(.obs-seo) .intensity-bar-fill { background: var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-seo) .intensity-bar-track { background: var(--o-line); }
/* glyphs and borders of the star card, school pages and aspect heroes */
:where(:root) body.obs:where(.obs-seo) :is(.aspect-glyph, .tnp-glyph, .placement-glyph) { color: var(--o-ice-2) !important; }
:where(:root) body.obs:where(.obs-seo) :is(.placements > .placement, .star-card-img) { border-color: var(--o-line-2) !important; }
:where(:root) body.obs:where(.obs-seo) .sm-related-links a { background: transparent !important; border: 1px solid var(--o-control) !important; color: var(--o-ink-2) !important; min-height: 44px; display: inline-flex; align-items: center; }
:where(:root) body.obs:where(.obs-seo) .sm-related-links a:hover { border-color: var(--o-ice) !important; color: var(--o-ink) !important; }

/* amber accents (#f59e0b family) on celebrity, house, horoscope, birth-year and sun-rising pages */
:where(:root) body.obs:where(.obs-seo) :is([style*="rgba(245, 158, 11" i], [style*="rgba(245,158,11" i]) { border-color: var(--o-line-2) !important; }
:where(:root) body.obs:where(.obs-seo) :is(.big-three-card.sun-card, .by-cta, .ingress-card, .sr-mask-core-card) { border-color: var(--o-line-2); }
:where(:root) body.obs:where(.obs-seo) .tomorrow-teaser { background: var(--o-night-2); border-color: var(--o-line-2); }
:where(:root) body.obs:where(.obs-seo) .energy-bar.active { background: var(--o-ice) !important; } /* the count of lit bars is the reading */
/* horoscope pages: the AI disclosure line (11.5 px at 4.16:1 by night, 1.01:1 by day) and the moon glyph */
:where(:root) body.obs:where(.obs-seo) .ai-disclosure {
  color: var(--o-faint) !important; font-size: .8125rem !important; font-style: normal !important; letter-spacing: 0 !important; border-top-color: var(--o-line) !important;
}
:where(:root) body.obs:where(.obs-seo) .moon-glyph { color: var(--o-ice-2); font-family: var(--o-sans-glyph); }
/* love horoscopes: ink headings, outline chips, hearts in instrument ink (the count of filled hearts is the rating) */
:where(:root) body.obs:where(.obs-seo) .love-card h2 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-seo) .heart.filled { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-seo) .heart.empty { color: var(--o-faint); opacity: .55; }
:where(:root) body.obs:where(.obs-seo) .love-energy-badge { background: transparent !important; border: 1px solid var(--o-line-2) !important; color: var(--o-ink-2) !important; text-transform: none; }
/* inline-styled date fields in article forms (the Saturn-return estimate) */
:where(:root) body.obs:where(.obs-seo) main form input[style]:is([type="date"], [type="text"], [type="email"]) {
  background: var(--o-seo-field) !important; border: 1px solid var(--o-control) !important; color: var(--o-ink) !important; min-height: 48px; color-scheme: var(--o-seo-scheme);
}

/* touch targets (44 px): the routers' pills, cells and pager buttons, in-page navs and breadcrumbs, and links that stand
   alone at the end of a block (inline links inside running text keep their size: WCAG 2.5.8 inline exception) */
:where(:root) body.obs:where(.obs-seo) :is(.aspect-pill, .celeb-pill, .by-pill, .cat-btn, .day-nav-btn, .week-nav-btn, .mh-nav-btn, .archive-week, .related-link, .year-nav a, .question-explore) {
  display: inline-flex; align-items: center; min-height: 44px;
}
/* pager buttons and pills are controls: a control-strength edge (>= 3:1), ink text, the current one marked by weight */
:where(:root) body.obs:where(.obs-seo) :is(.aspect-pill, .celeb-pill, .by-pill, .cat-btn, .day-nav-btn, .week-nav-btn, .mh-nav-btn, .archive-week, .related-link, .year-nav a, .letter-nav a) {
  border-color: var(--o-control); color: var(--o-ink-2); background: transparent;
}
:where(:root) body.obs:where(.obs-seo) :is(.aspect-pill, .celeb-pill, .by-pill, .cat-btn, .day-nav-btn, .week-nav-btn, .mh-nav-btn, .archive-week, .related-link, .year-nav a, .letter-nav a):hover { border-color: var(--o-ice); color: var(--o-ink); }
:where(:root) body.obs:where(.obs-seo) :is(.aspect-pill, .archive-week, .year-nav a, .cat-btn):is(.current, .active) { border-color: var(--o-ice); color: var(--o-ice); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
:where(:root) body.obs:where(.obs-seo) :is(.degree-cell, .tgrid-cell, .ptable-cell) { min-height: 44px; }
:where(:root) body.obs:where(.obs-seo) .letter-nav a { width: 44px; height: 44px; }
:where(:root) body.obs:where(.obs-seo) :is(main, .container) :is(nav, .breadcrumb, .cm-nav, .pc-section, .fc-section, .sc-section, .wd-section) > a { display: inline-flex; align-items: center; min-height: 44px; }
:where(:root) body.obs:where(.obs-seo) :is(main, .container) :is(div, section) > a:last-child:is([style*="color:var(--gold"], [style*="color: var(--gold"]) { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- newsletter (cta_components): footer form and the compact form above the fold ---------- */
:where(:root) body.obs:where(.obs-seo) .email-capture { border-top: 1px solid var(--o-line); padding: 40px 0 12px; }
:where(:root) body.obs:where(.obs-seo) .email-capture h2 { font: 400 clamp(1.5rem, 1.25rem + .9vw, 2rem) var(--o-serif); color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-seo) .email-capture .ec-subtitle { color: var(--o-ink-3); font-size: 1rem; max-width: 34em; }
:where(:root) body.obs:where(.obs-seo) .email-capture form, :where(:root) body.obs:where(.obs-seo) .ec-atf-form { gap: 10px; max-width: 540px; }
:where(:root) body.obs:where(.obs-seo) .ec-atf { background: var(--o-night-2); border: 1px solid var(--o-line-2); border-radius: 14px; backdrop-filter: none; padding: 18px 20px; }
:where(:root) body.obs:where(.obs-seo) .ec-atf-heading { color: var(--o-ink-2); font: 500 1rem var(--o-sans); }
:where(:root) body.obs:where(.obs-seo) :is(.email-capture input[type="email"], .email-capture select, .ec-atf-form input[type="email"], .email-modal input) {
  min-height: 48px; padding: 0 14px; background: var(--o-seo-field); border: 1px solid var(--o-control); border-radius: 10px; color: var(--o-ink);
  font: 400 1rem var(--o-sans); color-scheme: var(--o-seo-scheme); margin-bottom: 0;
}
/* Focus is a ring outside the field (2 px, 3 px off): foundation.css's field border outranks any border change here, so
   the ring carries the indicator. --ae-focus is ice by night, deep ice by day and on paper. */
:where(:root) body.obs:where(.obs-seo) :is(.email-capture input[type="email"], .email-capture select, .ec-atf-form input[type="email"], .email-modal input):focus {
  outline: 2px solid var(--ae-focus); outline-offset: 3px; box-shadow: none; background: var(--o-seo-field);
}
:where(:root) body.obs:where(.obs-seo) :is(.email-capture input, .ec-atf-form input, .email-modal input)::placeholder { color: var(--o-faint); }
:where(:root) body.obs:where(.obs-seo) .email-capture button[type="submit"], :where(:root) body.obs:where(.obs-seo) .ec-atf-form button[type="submit"] { min-height: 48px; }
/* submitted: success text (the form is hidden by the page), or an error panel with words, not colour alone */
:where(:root) body.obs:where(.obs-seo) :is(.ec-msg, .ec-atf-msg) { color: var(--o-ice); font-size: 1rem; font-weight: 500; }
:where(:root) body.obs:where(.obs-seo) .ec-msg[style*="--rose"], :where(:root) body.obs:where(.obs-seo) .ec-atf-msg[style*="--rose"] {
  color: var(--o-error) !important; background: color-mix(in srgb, var(--o-error) 8%, transparent); border: 1px solid color-mix(in srgb, var(--o-error) 45%, transparent);
  border-radius: 10px; padding: 10px 14px; max-width: 540px; margin-inline: auto;
}

/* ---------- share bar, the feedback button and its popup (seo/social_share.py) ---------- */
:where(:root) body.obs:where(.obs-seo) .share-bar { background: transparent !important; border: 0 !important; border-top: 1px solid var(--o-line) !important; border-radius: 0 !important; backdrop-filter: none !important; padding: 16px 0 !important; }
:where(:root) body.obs:where(.obs-seo) .share-bar-label { font: 500 .9375rem var(--o-sans); color: var(--o-ink-3); }
:where(:root) body.obs:where(.obs-seo) .share-btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--o-control) !important; color: var(--o-ink-2) !important;
  background: transparent !important; font: 500 .9375rem var(--o-sans);
}
:where(:root) body.obs:where(.obs-seo) .share-btn:hover { border-color: var(--o-ice) !important; color: var(--o-ink) !important; transform: none; }
:where(:root) body.obs:where(.obs-seo) .share-btn-copy.copied { border-color: var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-seo) .share-btn-copy.copied .copied-label { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-seo) .share-fab { background: var(--o-night-3) !important; border: 1px solid var(--o-control) !important; color: var(--o-ice) !important; box-shadow: none !important; }
/* the open feedback popup (inline-styled): a night-3 panel, real fields, an ice action, 44 px targets */
:where(:root) body.obs:where(.obs-seo) #feedbackPopup { background: var(--o-night-3) !important; border: 1px solid var(--o-line-2) !important; box-shadow: var(--shadow) !important; backdrop-filter: none !important; }
:where(:root) body.obs:where(.obs-seo) #feedbackPopup span { color: var(--o-ivory) !important; font: 400 1.25rem var(--o-serif) !important; }
:where(:root) body.obs:where(.obs-seo) #feedbackPopup div > button { min-width: 44px; min-height: 44px; color: var(--o-ink-2) !important; }
:where(:root) body.obs:where(.obs-seo) #feedbackPopup :is(textarea, input) {
  background: var(--o-seo-field) !important; border: 1px solid var(--o-control) !important; color: var(--o-ink) !important; min-height: 44px;
  font-size: 1rem !important; border-radius: 10px !important; color-scheme: var(--o-seo-scheme);
}
:where(:root) body.obs:where(.obs-seo) #feedbackPopup :is(textarea, input)::placeholder { color: var(--o-faint); }
:where(:root) body.obs:where(.obs-seo) #feedbackPopup > button { width: 100%; margin-top: 12px !important; min-height: 48px; }
:where(:root) body.obs:where(.obs-seo) #feedbackMsg { color: var(--o-ice) !important; }

/* ---------- footer area and the cookie banner ---------- */
:where(:root) body.obs:where(.obs-seo) .site-footer { background: transparent; border-top: 1px solid var(--o-line); color: var(--o-muted); }
:where(:root) body.obs:where(.obs-seo) .site-footer a { color: var(--o-ink-3); }
:where(:root) body.obs:where(.obs-seo) .site-footer p[style] { color: var(--o-faint) !important; }
:where(:root) body.obs:where(.obs-seo) #cookie-consent { background: var(--o-seo-cookie) !important; border-top: 1px solid var(--o-line-2) !important; backdrop-filter: none !important; }
:where(:root) body.obs:where(.obs-seo) #cookie-consent p { color: var(--o-ink-2) !important; font-size: .9375rem !important; }
:where(:root) body.obs:where(.obs-seo) #cookie-consent a { color: var(--o-ice) !important; }
:where(:root) body.obs:where(.obs-seo) #cookie-consent button { min-height: 44px; padding: 0 20px !important; border-radius: 999px !important; font: 500 .9375rem var(--o-sans) !important; }
:where(:root) body.obs:where(.obs-seo) #cookie-consent button:first-child { background: transparent !important; border: 1px solid var(--o-control) !important; color: var(--o-ink) !important; }
:where(:root) body.obs:where(.obs-seo) #cookie-consent button:last-child { background: var(--o-ice) !important; color: var(--o-on-ice) !important; border: 0 !important; font-weight: 600 !important; }

/* ---------- calculator: an instrument ---------- */
:where(:root) body.obs:where(.obs-seo) .calc-hero h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); }
:where(:root) body.obs:where(.obs-seo) .calc-hero p { color: var(--o-ink-3); }
:where(:root) body.obs:where(.obs-seo) .calc-form {
  background: var(--o-night-2); border: 1px solid var(--o-line-2); border-radius: 16px; box-shadow: none;
  background-image: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--o-ice) 7%, transparent), transparent 70%);
}
:where(:root) body.obs:where(.obs-seo) .calc-form label { color: var(--o-ink-2); font: 500 .9375rem var(--o-sans); text-transform: none; letter-spacing: 0; }
:where(:root) body.obs:where(.obs-seo) .calc-form input[type="date"], :where(:root) body.obs:where(.obs-seo) .calc-form input[type="time"], :where(:root) body.obs:where(.obs-seo) .calc-form input[type="text"], :where(:root) body.obs:where(.obs-seo) .calc-form select {
  background: var(--o-seo-field); border: 1px solid var(--o-control); border-radius: 10px; color: var(--o-ink); min-height: 48px;
  font: 400 1rem var(--o-sans); color-scheme: var(--o-seo-scheme);
}
/* the same ring outside the field (see the e-mail fields above): the border change alone never showed */
:where(:root) body.obs:where(.obs-seo) .calc-form :is(input:not([type="checkbox"]):not([type="radio"]), select):focus { outline: 2px solid var(--ae-focus); outline-offset: 3px; box-shadow: none; }
:where(:root) body.obs:where(.obs-seo) .calc-form input::placeholder { color: var(--o-faint); }
:where(:root) body.obs:where(.obs-seo) .calc-form input:disabled { opacity: .55; cursor: not-allowed; }
/* a checkbox or radio has no border to show focus with: it keeps a ring (today: the site's 3 px outline) */
:where(:root) body.obs:where(.obs-seo) .calc-form input:is([type="checkbox"], [type="radio"]):focus-visible { outline: 2px solid var(--o-ice); outline-offset: 2px; box-shadow: none; }
:where(:root) body.obs:where(.obs-seo) .calc-form input[type="checkbox"] { accent-color: var(--o-ice); width: 20px !important; height: 20px; color-scheme: var(--o-seo-scheme); }
:where(:root) body.obs:where(.obs-seo) .calc-form .birth-time-unknown-row, :where(:root) body.obs:where(.obs-seo) .calc-form label:has(> input[type="checkbox"]) { color: var(--o-ink-3) !important; font-size: .9375rem !important; min-height: 44px; }
:where(:root) body.obs:where(.obs-seo) #calculator-intent-guidance { color: var(--o-ink-3) !important; }
/* synastry's saved-profile note (inline gold) */
:where(:root) body.obs:where(.obs-seo) #synastry-prefill-indicator { background: var(--o-night-3) !important; border: 1px solid var(--o-line-2) !important; color: var(--o-ink-2) !important; font-size: .9375rem !important; }
/* the result area: no gold-tinted box, a hairline above the answer */
:where(:root) body.obs:where(.obs-seo) #calc-result { background: transparent; border: 0; border-top: 1px solid var(--o-line); border-radius: 0; padding: 20px 0 0; }
/* result messages (inline-styled by the calculator scripts) */
:where(:root) body.obs:where(.obs-seo) #calc-result > p[style*="text-dim"]:only-child { display: flex; align-items: center; gap: 12px; color: var(--o-ink-3) !important; }
:where(:root) body.obs:where(.obs-seo) #calc-result > p[style*="text-dim"]:only-child::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--o-ice) 25%, transparent); border-top-color: var(--o-ice);
  animation: obs-spin .9s linear infinite;
}
@keyframes obs-spin { to { transform: rotate(360deg); } }
:where(:root) body.obs:where(.obs-seo) #calc-result p[style*="#ef4444"] {
  color: var(--o-error) !important; background: color-mix(in srgb, var(--o-error) 8%, transparent); border: 1px solid color-mix(in srgb, var(--o-error) 45%, transparent);
  border-radius: 10px; padding: 12px 14px;
}
:where(:root) body.obs:where(.obs-seo) #calc-result > div[style*="#22c55e"] { color: var(--o-ice) !important; font-weight: 500 !important; }
:where(:root) body.obs:where(.obs-seo) #calc-result > p > strong { color: var(--o-ivory) !important; font-family: var(--o-serif); font-weight: 400; font-size: 1.25em; }
:where(:root) body.obs:where(.obs-seo) .chart-time-notice {
  background: color-mix(in srgb, var(--o-lamp) 7%, transparent); border: 1px solid color-mix(in srgb, var(--o-lamp) 35%, transparent); border-left: 3px solid var(--o-lamp);
  color: var(--o-seo-note); border-radius: 8px; padding: 12px 14px;
}
:where(:root) body.obs:where(.obs-seo) .chart-section-title { color: var(--o-ivory); font-size: 1.6rem; border-bottom-color: var(--o-line); }
:where(:root) body.obs:where(.obs-seo) .chart-table, :where(:root) body.obs:where(.obs-seo) .syn-aspects-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
:where(:root) body.obs:where(.obs-seo) .chart-table th, :where(:root) body.obs:where(.obs-seo) .syn-aspects-table th { background: transparent; color: var(--o-faint); font: 500 .875rem var(--o-sans); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--o-line-2); }
:where(:root) body.obs:where(.obs-seo) .chart-table td, :where(:root) body.obs:where(.obs-seo) .syn-aspects-table td { background: transparent; border-bottom: 1px solid var(--o-line); color: var(--o-ink-2); }
:where(:root) body.obs:where(.obs-seo) .chart-table tr:hover td { background: color-mix(in srgb, var(--o-ice) 4%, transparent); }
/* aspect kinds: a line marker (solid soft, dashed hard), not traffic-light colours */
:where(:root) body.obs:where(.obs-seo) .aspect-tag { display: inline-flex; align-items: center; white-space: nowrap; background: none !important; border: 0 !important; padding: 0 !important; color: var(--o-ink-2) !important; }
:where(:root) body.obs:where(.obs-seo) .aspect-tag::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--o-seo-soft); }
:where(:root) body.obs:where(.obs-seo) .aspect-tag.aspect-tense::before { background: repeating-linear-gradient(90deg, var(--o-lamp) 0 5px, transparent 5px 9px); }
/* The page classes aspects by capitalised names while the API answers in lower case, so most rows arrive "neutral":
   no marker then, rather than one that would call a square soft (the aspect is named in the cell). */
:where(:root) body.obs:where(.obs-seo) .aspect-tag.aspect-neutral::before { display: none; }
:where(:root) body.obs:where(.obs-seo) .element-bar > * { border-radius: 2px; }
:where(:root) body.obs:where(.obs-seo) .element-chip { background: transparent; border: 1px solid var(--o-line-2); color: var(--o-ink-2); font-weight: 500; }
:where(:root) body.obs:where(.obs-seo) .element-fire, :where(:root) body.obs:where(.obs-seo) .element-earth, :where(:root) body.obs:where(.obs-seo) .element-air, :where(:root) body.obs:where(.obs-seo) .element-water { background: transparent; color: var(--o-ink-2); }
:where(:root) body.obs:where(.obs-seo) .chart-free-value { background: transparent; border: 0; border-top: 1px solid var(--o-line); border-radius: 0; }
:where(:root) body.obs:where(.obs-seo) .chart-free-heading { color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-seo) .chart-free-subheading, :where(:root) body.obs:where(.obs-seo) .chart-report-requirement { color: var(--o-ink-3); }
:where(:root) body.obs:where(.obs-seo) .chart-q-chips a { border-color: var(--o-control) !important; color: var(--o-ink-2) !important; min-height: 44px; display: inline-flex !important; align-items: center; }
:where(:root) body.obs:where(.obs-seo) .chart-q-chips a:hover { border-color: var(--o-ice) !important; color: var(--o-ink) !important; background: none; }
:where(:root) body.obs:where(.obs-seo) .chart-q-chips p { color: var(--o-ink-3); opacity: 1 !important; }
/* follow-up messages (PDF, e-mail): words carry the state */
:where(:root) body.obs:where(.obs-seo) .chart-msg-success { color: var(--o-ice); }
:where(:root) body.obs:where(.obs-seo) .chart-msg-error, :where(:root) body.obs:where(.obs-seo) .email-modal-error { color: var(--o-error); }
:where(:root) body.obs:where(.obs-seo) .chart-msg-info { color: var(--o-ink-3); }
/* the "e-mail me the summary" dialog */
:where(:root) body.obs:where(.obs-seo) .email-modal { background: var(--o-night-3); border: 1px solid var(--o-line-2); border-radius: 14px; box-shadow: var(--shadow); }
:where(:root) body.obs:where(.obs-seo) .email-modal h3 { color: var(--o-ivory); font-weight: 400; }
:where(:root) body.obs:where(.obs-seo) .email-modal p { color: var(--o-ink-3); }
:where(:root) body.obs:where(.obs-seo) .email-modal-actions button { min-height: 48px; }
/* offers are reading surfaces: paper, navy ink (the same in both themes) */
:where(:root) body.obs:where(.obs-seo) #calculator-reading-offer, :where(:root) body.obs:where(.obs-seo) #calculator-report-panel, :where(:root) body.obs:where(.obs-seo) #calculator-save-panel {
  background: linear-gradient(180deg, #f7f2e9, #f2ebdf) !important; color: var(--o-paper-ink) !important; border: 0 !important;
  border-radius: 3px !important; padding: clamp(20px, 3vw, 32px) !important;
  box-shadow: var(--o-seo-paper-shadow);
}
:where(:root) body.obs:where(.obs-seo) #calculator-reading-offer h2, :where(:root) body.obs:where(.obs-seo) #calculator-report-panel h2 { color: var(--o-paper-ink) !important; font-size: 1.7rem !important; }
:where(:root) body.obs:where(.obs-seo) #calculator-reading-offer p, :where(:root) body.obs:where(.obs-seo) #calculator-report-panel p, :where(:root) body.obs:where(.obs-seo) #calculator-save-panel p { color: #1f2533; }
:where(:root) body.obs:where(.obs-seo) #calculator-reading-offer a, :where(:root) body.obs:where(.obs-seo) #calculator-report-panel a, :where(:root) body.obs:where(.obs-seo) #calculator-save-panel a { color: var(--o-paper-accent); }
:where(:root) body.obs:where(.obs-seo) #calculator-reading-choose, :where(:root) body.obs:where(.obs-seo) #calculator-report-continue, :where(:root) body.obs:where(.obs-seo) #calculator-save-button { background: var(--o-paper-ink) !important; color: var(--o-paper) !important; box-shadow: none; width: auto; }
:where(:root) body.obs:where(.obs-seo) #calculator-reading-choose:hover, :where(:root) body.obs:where(.obs-seo) #calculator-report-continue:hover, :where(:root) body.obs:where(.obs-seo) #calculator-save-button:hover { background: #1d4b80 !important; color: var(--o-paper) !important; }
:where(:root) body.obs:where(.obs-seo) #calculator-save-cancel, :where(:root) body.obs:where(.obs-seo) #calculator-reading-price-retry {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; width: auto; border-radius: 999px !important;
  background: transparent !important; color: var(--o-paper-muted) !important; border: 1px solid var(--o-paper-faint) !important; font: 500 .9375rem var(--o-sans); box-shadow: none;
}
:where(:root) body.obs:where(.obs-seo) #calculator-reading-price, :where(:root) body.obs:where(.obs-seo) #calculator-report-price { font-family: var(--o-serif); font-size: 1.5rem; color: var(--o-paper-ink); }
:where(:root) body.obs:where(.obs-seo) #calculator-report-recalculate { color: var(--o-ink-3); }
/* the detailed wheel on request (observatory.js wraps today's server wheel, an <img>, in details.ow-more) */
:where(:root) body.obs:where(.obs-seo) #calculator-natal-wheel .calculator-wheel-image img { border-radius: 12px; border: 1px solid var(--o-line); }
:where(:root) body.obs:where(.obs-seo) #calculator-wheel-status { color: var(--o-ink-3); }

/* ---------- small screens ---------- */
@media (max-width: 620px) {
  :where(:root) body.obs:where(.obs-seo) .summary-card { padding: 24px 20px; }
  :where(:root) body.obs:where(.obs-seo) .summary-card table { font-size: .9375rem; }
  :where(:root) body.obs:where(.obs-seo) .calc-form { padding-inline: 14px; }
  :where(:root) body.obs:where(.obs-seo) #calc-result, :where(:root) body.obs:where(.obs-seo) .full-chart-section { padding-inline: 0; }
  :where(:root) body.obs:where(.obs-seo) #cookie-consent button { flex: 1 1 auto; }
}
/* No horizontal scroll at 320 px. Some routers size their grids for wider screens (inline minmax(300px, 1fr) tracks,
   cards whose names never wrap); on a phone they become one column whose items may shrink and wrap. */
@media (max-width: 480px) {
  :where(:root) body.obs:where(.obs-seo) :is(main, .container) :is([style*="minmax(240px"], [style*="minmax(250px"], [style*="minmax(260px"], [style*="minmax(280px"], [style*="minmax(300px"], [style*="minmax(320px"]) { grid-template-columns: minmax(0, 1fr) !important; }
  :where(:root) body.obs:where(.obs-seo) :is(.pair-grid, .by-celebs-grid) { grid-template-columns: minmax(0, 1fr); }
  :where(:root) body.obs:where(.obs-seo) :is(.content-grid, .lists-grid, .pair-grid, .by-celebs-grid, .compat-grid, .celeb-grid) > * { min-width: 0; }
  :where(:root) body.obs:where(.obs-seo) :is(.pair-card, .by-celeb-card, .celeb-card) > * { min-width: 0; overflow-wrap: anywhere; }
  :where(:root) body.obs:where(.obs-seo) .trait-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5em), 1fr)); }
}

/* ---------- the other calculators' states (moon, rising, synastry, Saturn return, what-is-my) ----------
   Moon and rising write loading and error messages as plain text into #calc-result; Saturn return writes its result
   as a green <p>; synastry uses its own syn-* classes with traffic-light tags. Same language as the birth chart:
   quiet ink for status text, ice for results, a line marker (not colour alone) for each aspect kind. */
:where(:root) body.obs:where(.obs-seo) #calc-result:not(:has(*)) { color: var(--o-ink-3); font-size: 1rem; line-height: 1.55; padding: 10px 0; }
:where(:root) body.obs:where(.obs-seo) #calc-result > p[style*="#22c55e"] { color: var(--o-ice) !important; font-weight: 500; } /* inline green result line */
:where(:root) body.obs:where(.obs-seo) .syn-score-num { color: var(--o-ivory) !important; font-weight: 400; } /* the score's inline traffic-light colour: the label below names the band */
:where(:root) body.obs:where(.obs-seo) .syn-score-label { color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-seo) .syn-meta { color: var(--o-ink-3); }
:where(:root) body.obs:where(.obs-seo) .syn-asp-tag { background: none !important; padding: 0 !important; border-radius: 0; color: var(--o-ink-2) !important; font-weight: 500; display: inline-flex; align-items: center; white-space: nowrap; }
:where(:root) body.obs:where(.obs-seo) .syn-asp-tag::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px; background: var(--o-seo-soft); }
:where(:root) body.obs:where(.obs-seo) .syn-asp-tense::before { background: repeating-linear-gradient(90deg, var(--o-lamp) 0 5px, transparent 5px 9px); }
/* as in the chart table, rows arrive "neutral" when the API's lower-case type misses the page's capitalised lists: no marker */
:where(:root) body.obs:where(.obs-seo) .syn-asp-neutral::before { display: none; }
:where(:root) body.obs:where(.obs-seo) .syn-cta-wrap { background: var(--o-night-2) !important; border: 1px solid var(--o-line-2) !important; border-radius: 14px; }
:where(:root) body.obs:where(.obs-seo) .syn-cta-heading { color: var(--o-ivory); }
:where(:root) body.obs:where(.obs-seo) .syn-cta-sub { color: var(--o-ink-3); }
:where(:root) body.obs:where(.obs-seo) .syn-q-chip { border-color: var(--o-control) !important; color: var(--o-ink-2) !important; min-height: 44px; display: inline-flex !important; align-items: center; }
:where(:root) body.obs:where(.obs-seo) .syn-q-chip:hover { border-color: var(--o-ice) !important; color: var(--o-ink) !important; background: none; }

/* ---------- no decorative emoji (observatory_ui.strip_decorative_emoji on the server, observatory-text.js in the
   browser; both themes, every shell) ---------- */
/* icon slots that only ever held a decorative picture beside a label: not drawn, the label says it */
:where(:root) body.obs :is(.section-icon, .section-emoji, .ql-icon, .tech-icon, .cat-icon, .mr-guidance-icon, .lp-feature-icon,
  .hero-icon, .lunar-phase-emoji, .hero-phase-emoji, .ep-emoji, .detail-emoji, .phase-emoji, .story-locked-icon, .cold-card-title .moon) { display: none; }
/* boxes that held only an emoji and are empty now; slots that can hold a meaningful glyph keep it */
:where(:root) body.obs :is(.feature-icon, .detail-icon, .toast-icon, .spark, .city-tag-icon):empty,
:where(:root) body.obs :is(div, span, strong)[style*="font-size"]:empty { display: none; }
/* a list that lost any icon to the cleanup shows none, so it reads as one consistent plain-text list (link cards that lead
   with an icon box: the /astrology topics, /now, the timing pages' related links; /developers; /about); a list whose icons
   all stay (sign glyphs on every card) keeps them */
:where(:root) body.obs :has(> a > :is(span, div)[style*="font-size"]:first-child:empty) > a > :is(span, div)[style*="font-size"]:first-child,
:where(:root) body.obs .feature-list:has(.feature-icon:empty) .feature-icon,
:where(:root) body.obs .detail-grid:has(.detail-icon:empty) .detail-icon { display: none; }
/* the same for the related-content cards (review R1: their glyphs sit in .rc-icon spans) and for the horoscope pages'
   "right now in the sky" links (review R2: their glyphs sit in a colour-only <strong>, so the rule above cannot see them) */
:where(:root) body.obs .related-content-grid:has(.rc-icon:empty) .rc-icon,
:where(:root) body.obs .cosmic-now-block:has(a > strong:first-child:empty) a > strong:first-child { display: none; }
/* the locked story card keeps its lock, as a monochrome icon */
:where(:root) body.obs .story-locked-lock:empty::before { content: ""; display: inline-block; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Crect x='2.5' y='7' width='11' height='8.5' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Crect x='2.5' y='7' width='11' height='8.5' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* moon phases in calendar day cells: observatory-text.js marks the cell (data-obs-moon); its text still names the
   phase for screen readers, moved out of view, and a monochrome disc is drawn in its place (northern-hemisphere
   lighting, as the emoji). The lit part is ink by night and white by day, the shadow line or slate. */
:where(:root) body.obs [data-obs-moon] { overflow: hidden; white-space: nowrap; text-indent: 200%; }
:where(:root) body.obs :is(.day-emoji, .day-moon)[data-obs-moon] { position: relative; }
:where(:root) body.obs .day-exact-badge[data-obs-moon] { box-sizing: content-box; width: 1.1em; height: 1.1em; padding: 2px; font-size: .75rem; line-height: 1; }
:where(:root) body.obs [data-obs-moon]::before, :where(:root) body.obs [data-obs-moon]::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 1em; height: 1em; margin: -.5em 0 0 -.5em; text-indent: 0; }
:where(:root) body.obs .day-exact-badge[data-obs-moon]::before, :where(:root) body.obs .day-exact-badge[data-obs-moon]::after { width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; }
:where(:root) body.obs [data-obs-moon]::before { border-radius: 50%; background: var(--o-moon-dark); box-shadow: inset 0 0 0 1px var(--o-moon-rim); }
/* the lit part carries the rim on top (by day the lit part is white on a near-white cell, so the rim is its edge) */
:where(:root) body.obs [data-obs-moon]::after { background: radial-gradient(closest-side, transparent calc(100% - 1.25px), var(--o-moon-rim) calc(100% - .75px)), var(--o-moon-lit);
  -webkit-mask: var(--obs-moon) center / 100% 100% no-repeat; mask: var(--obs-moon) center / 100% 100% no-repeat; }
:where(:root) body.obs [data-obs-moon="new"]::after { display: none; }
:where(:root) body.obs [data-obs-moon="full"] { --obs-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E"); }
:where(:root) body.obs [data-obs-moon="first-quarter"] { --obs-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0A8 8 0 0 1 8 16Z'/%3E%3C/svg%3E"); }
:where(:root) body.obs [data-obs-moon="last-quarter"] { --obs-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0A8 8 0 0 0 8 16Z'/%3E%3C/svg%3E"); }
:where(:root) body.obs [data-obs-moon="waxing-crescent"] { --obs-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0A8 8 0 0 1 8 16A4 8 0 0 0 8 0Z'/%3E%3C/svg%3E"); }
:where(:root) body.obs [data-obs-moon="waxing-gibbous"] { --obs-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0A8 8 0 0 1 8 16A4 8 0 0 1 8 0Z'/%3E%3C/svg%3E"); }
:where(:root) body.obs [data-obs-moon="waning-gibbous"] { --obs-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0A8 8 0 0 0 8 16A4 8 0 0 0 8 0Z'/%3E%3C/svg%3E"); }
:where(:root) body.obs [data-obs-moon="waning-crescent"] { --obs-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0A8 8 0 0 0 8 16A4 8 0 0 1 8 0Z'/%3E%3C/svg%3E"); }
/* the research study's aspect tiles: a conjunction's white circle in the monochrome text form */
:where(:root) body.obs .aspect-icon:empty::before { content: "\25CB"; }

/* ---------- reduced motion (shared by every shell, both themes) ----------
   Animations and transitions finish at once instead of being removed: content that animates in from opacity 0
   (fade-in with fill-mode forwards or both) then lands on its visible end state. "animation: none" left such content
   invisible for visitors who prefer reduced motion (rectification, quiz, chemistry). Infinite loops run once. */
@media (prefers-reduced-motion: reduce) {
  :where(:root) body.obs, :where(:root) body.obs *, :where(:root) body.obs *::before, :where(:root) body.obs *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* ---------- daylight ----------
   A saved light theme: the tokens above switch by themselves; these rules give the shell's literal night values their
   daylight counterparts (design system section 8) and beat the site's light-theme rules where those would win. */
:where(:root[data-theme="light"]) body.obs:where(.obs-seo) {
  --o-seo-bar: rgba(247, 249, 252, .94);
  --o-seo-strip: #ffffff;
  --o-seo-hover: #e8eef6;
  --o-seo-field: #ffffff;
  --o-seo-cookie: rgba(255, 255, 255, .98);
  --o-seo-note: #4a3a1c;
  --o-seo-soft: #1d4b80;
  --o-seo-action-shadow: 0 8px 18px -12px rgba(18, 24, 38, .5);
  --o-seo-paper-shadow: 0 0 0 1px #d8cebb, 0 18px 40px -24px rgba(18, 24, 38, .28);
  --o-seo-summary-shadow: 0 0 0 1px #d8cebb, 0 18px 40px -24px rgba(18, 24, 38, .28);
  --o-seo-scheme: light;
}
/* legacy-theme.css paints the header and the answer card at ID specificity (1,1,1) in a saved light theme */
:where(:root[data-theme="light"]) body.obs:where(.obs-seo) .site-header { background: var(--o-seo-bar) !important; color: var(--o-ink) !important; }
:where(:root[data-theme="light"]) body.obs:where(.obs-seo) .summary-card {
  background: radial-gradient(120% 70% at 0% 0%, rgba(255, 236, 205, .55), rgba(255, 236, 205, 0) 60%), linear-gradient(180deg, #f7f2e9, #f2ebdf) !important;
  color: var(--o-paper-ink) !important;
}
:where(:root[data-theme="light"]) body.obs:where(.obs-seo) .logo::before {
  background: 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") center / contain no-repeat;
}