/* ===================================================================== AsterTel — styles.css --------------------------------------------------------------------- All visual styling for the AsterTel PWA. Three themes, responsive layouts, print stylesheet, modal styling, SVG-internal chart styling. No build step; this file is loaded directly by index.html. ─── FILE MAP ────────────────────────────────────────────────────── 1. THEME VARIABLES (lines ~30–225) Three theme blocks: Classic, Dark, Light. Every other rule in the file resolves through these variables via var(--*). 2. PAGE LAYOUT (lines ~225–500) Body, header, container, birth form, action buttons, tabs, footer, status indicators. 3. CHART CARDS (lines ~500–1000) Western wheel SVG classes, North Indian SVG classes, chart legends, aspects list, positions table. 4. DIVISIONALS / VARGAS (lines ~1000–1220) Per-varga card layout, dignity table styling. 5. PROGRESSIONS / SR (lines ~1220–1390) p4-card styling, comparison table. 6. ZODIACAL RELEASING (lines ~1390–1580) p5-card, period tables, peak highlighting, ZR drill-down focus. 7. CHART LIBRARY (lines ~1580–1715) Saved-chart list, save/restore/delete buttons. 8. PRINT STYLESHEET (lines ~1717–2080) @media print rules — sole source of truth for PDF output. 9. MODALS / FIXED STARS (lines ~2080–end) Modal overlays, planetary hours modal, theme picker, onboarding panel, responsive/mobile rules. ─── THEME VARIABLE SYSTEM ───────────────────────────────────────── Three themes share the SAME variable names; only the values differ. Adding a new themeable property requires defining it in ALL THREE theme blocks. The :root selector aliases to [data-theme="classic"] as a CSS-level safety net for the case where no data-theme attribute is set (e.g. if the pre-paint script in fails). The actual first-paint default for users with NO saved preference is Light, set by the pre-paint script in index.html (Phase 6 release-candidate change for readability). Existing users with a saved theme — Classic, Dark, or Light — keep that preference; nothing about this :root alias overwrites their data. Chart-critical variables (consumed by SVG-internal CSS classes): --chart-bg : Western chart inner-area background --ni-bg : North Indian chart background tile fill --ring-stroke : thin stroke between SVG ring sectors --decan-op : Chaldean decan-wedge opacity --term-op : Egyptian term-wedge opacity --sign-tint-op : zodiac element-tint opacity --bg-grad-1/2-color : page-backdrop radial halos (transparent in Dark/Light to avoid bleed-through) --glyph-shadow : drop-shadow under sign glyphs Legacy aliases: --gold and --gold-bright are kept as semantic aliases. In Classic these are literal gold; in Dark/Light they map to the teal accent. Existing rules referencing --gold continue to work in all themes; new rules should prefer --accent. ─── PHASE 2 NOTE ────────────────────────────────────────────────── This file received documentation comments in Phase 2. NO COLOURS, SPACING, OR LAYOUT WERE CHANGED. Theme variable values, class names, and rule cascades are byte-identical to before Phase 2. ===================================================================== */ /* --------------------------------------------------------------------- THEME: Classic (renaissance manuscript) Modification note: this is the original AsterTel aesthetic. Phase 6 moved the public-launch default for new users to Light for first-time readability, but Classic remains a fully supported, user-selectable theme. Existing users with `astertel.theme.v1 === 'classic'` continue to load Classic on every visit. Preserve the gold/indigo/crimson palette as one of the three first-class themes. --------------------------------------------------------------------- */ :root, [data-theme="classic"] { --bg: #0b0a14; --bg-elev: #15142a; --bg-card: #1a1832; --ink: #f0ead6; --ink-dim: #a89f7a; --accent: #d4af37; /* generic accent name; classic = gold */ --accent-bright: #f0c850; --gold: #d4af37; /* legacy alias kept so no rule loses style */ --gold-bright: #f0c850; --copper: #b87333; --crimson: #8b2c3a; --indigo: #2d1b69; --border: #3a3456; --border-dim: #2a2440; --fire: #c95a3d; --earth: #7a8450; --air: #d4c77a; --water: #4a7a8a; /* Body backdrop gradients (theme-specific). Two soft radial halos in the corners give the page depth without competing with content. */ --bg-grad-1-color: rgba(45, 27, 105, 0.40); /* indigo halo */ --bg-grad-2-color: rgba(139, 44, 58, 0.20); /* crimson halo */ /* Drop-shadow rgba for sign glyphs — needs to be dark in both dark themes, light/translucent in light theme. */ --glyph-shadow: rgba(0,0,0,0.85); /* SVG ring stroke (was hardcoded #2a2440 before) */ --ring-stroke: #2a2440; /* Chart-specific surfaces (used by SVG fills via CSS classes). --chart-bg : the central inner-circle area where aspect lines draw --chart-ring-bg: the ring band background BETWEEN sign tints and ink --ni-bg : NI chart full background tile fill --sign-tint-op : opacity for the colored element tint behind each sign */ --chart-bg: #181630; --chart-ring-bg: #15142a; --ni-bg: #15142a; --sign-tint-op: 0.18; /* Term/decan wedge opacities. Tuned per theme so wedges remain readable both as colour-coding and as backdrop-for-glyphs. */ --decan-op: 0.45; --term-op: 0.30; } /* --------------------------------------------------------------------- THEME: Dark (modern — teal on near-black) Palette: #0B0B0F #1E232B #2D3642 #14B8A6 #5EEAD4 #EAEAF0 --------------------------------------------------------------------- */ [data-theme="dark"] { --bg: #0b0b0f; --bg-elev: #1e232b; --bg-card: #2d3642; --ink: #eaeaf0; --ink-dim: #8b95a3; --accent: #14b8a6; --accent-bright: #5eead4; /* Legacy aliases — keep gold/copper rules functional but in the teal palette so nothing renders out-of-theme */ --gold: #14b8a6; --gold-bright: #5eead4; --copper: #5eead4; --crimson: #f87171; /* coral red retained for "danger" semantics */ --indigo: #1e232b; --border: #2d3642; --border-dim: #1e232b; --fire: #e8782a; --earth: #6fa84d; --air: #d8c84a; --water: #4aa6d8; /* Backdrop halos: ZERO in dark mode. Eliminates any chance of a coloured wash leaking around the chart edges. The page is a flat solid colour. */ --bg-grad-1-color: transparent; --bg-grad-2-color: transparent; --glyph-shadow: rgba(0,0,0,0.85); --ring-stroke: #2d3642; /* Chart surfaces: lighter than page bg so the chart visually lifts. This addresses "Western chart still has classic background in dark mode" and "NI charts in dark mode are too dark." */ --chart-bg: #1e232b; --chart-ring-bg: #1a1f27; --ni-bg: #1e232b; --sign-tint-op: 0.15; --decan-op: 0.45; --term-op: 0.30; } /* --------------------------------------------------------------------- THEME: Light (modern — teal on off-white) Palette: #F7F8FA #E9EDF2 #D6DDE6 #14B8A6 #5EEAD4 #0F172A --------------------------------------------------------------------- */ [data-theme="light"] { --bg: #f7f8fa; --bg-elev: #ffffff; --bg-card: #ffffff; --ink: #0f172a; --ink-dim: #475569; --accent: #14b8a6; --accent-bright: #0d9488; /* a slightly DARKER teal works better on light bg */ --gold: #14b8a6; --gold-bright: #0d9488; --copper: #0d9488; --crimson: #dc2626; --indigo: #14b8a6; --border: #d6dde6; --border-dim: #e9edf2; /* Element colours nudged darker so they read on white backgrounds */ --fire: #c2410c; --earth: #4d7c0f; --air: #a16207; --water: #0369a1; /* Backdrop halos: ZERO in light mode. Flat solid background. */ --bg-grad-1-color: transparent; --bg-grad-2-color: transparent; --glyph-shadow: rgba(255,255,255,0.7); --ring-stroke: #d6dde6; /* Chart surfaces: matches the "progressed chart" look from the reference screenshot — cream/white inner area, soft pastel sign tints, light grey ring background. Sign tint opacity bumped to 0.22 so the pastel element colours actually read on white (otherwise they wash out completely). */ --chart-bg: #ffffff; --chart-ring-bg: #f5f5ec; --ni-bg: #ffffff; --sign-tint-op: 0.22; /* On white, the planet wedges need MUCH lower opacity to read as soft pastels rather than saturated colour blocks. */ --decan-op: 0.20; --term-op: 0.14; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; line-height: 1.5; min-height: 100vh; overscroll-behavior: none; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } body { background: radial-gradient(ellipse at 20% 0%, var(--bg-grad-1-color) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, var(--bg-grad-2-color) 0%, transparent 50%), var(--bg); background-attachment: fixed; padding-bottom: 80px; min-height: 100vh; padding-top: env(safe-area-inset-top); } /* ---------- HEADER ---------- */ header { padding: 24px 20px 16px; border-bottom: 1px solid var(--border-dim); text-align: center; } header h1 { font-family: 'Cinzel', serif; font-weight: 500; font-size: 26px; letter-spacing: 0.15em; color: var(--gold); text-transform: uppercase; } header .subtitle { color: var(--ink-dim); font-style: italic; font-size: 14px; margin-top: 4px; letter-spacing: 0.05em; } .ornament { color: var(--gold); font-size: 12px; margin: 6px 0; letter-spacing: 0.5em; opacity: 0.6; } .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; } /* ---------- BIRTH FORM ---------- */ .birth-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 20px; margin: 20px 0; position: relative; } .birth-form::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.25; pointer-events: none; border-radius: 2px; } .birth-form h2 { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-bottom: 16px; text-align: center; font-weight: 500; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-dim); letter-spacing: 0.05em; } .form-grid label.full { grid-column: 1 / -1; } .form-grid label.button-label { justify-content: flex-end; } .form-grid input, .form-grid select { background: var(--bg-elev); border: 1px solid var(--border); color: var(--ink); padding: 10px 12px; font-family: 'JetBrains Mono', monospace; font-size: 14px; border-radius: 2px; transition: border-color 0.2s; width: 100%; } .form-grid input:focus, .form-grid select:focus { outline: none; border-color: var(--gold); } .location-row { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-end; } .location-row label { flex: 1; } /* ---------- BUTTONS ---------- */ .btn { background: transparent; color: var(--gold); border: 1px solid var(--gold); padding: 10px 16px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: all 0.2s; white-space: nowrap; font-weight: 400; } .btn:hover, .btn:focus-visible { background: var(--gold); color: var(--bg); outline: none; } .btn:active { transform: scale(0.98); } .btn-secondary { font-size: 11px; padding: 10px 12px; } .btn.primary { background: var(--gold); color: var(--bg); font-weight: 500; grid-column: 1 / -1; margin-top: 8px; padding: 14px; letter-spacing: 0.3em; } .btn.primary:hover { background: var(--gold-bright); } .btn.primary:disabled { opacity: 0.4; cursor: wait; } .geo-status { font-size: 12px; color: var(--ink-dim); font-style: italic; margin-top: 4px; grid-column: 1 / -1; min-height: 18px; } .geo-status.error { color: var(--crimson); } .geo-status.success { color: var(--gold-bright); } /* ---------- TABS ---------- */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin: 24px 0 0; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { background: transparent; border: none; color: var(--ink-dim); padding: 14px 20px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; position: relative; white-space: nowrap; transition: color 0.2s; font-weight: 400; } .tab:hover { color: var(--ink); } .tab.active { color: var(--gold); } .tab.active::after { content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%; height: 2px; background: var(--gold); } .tab-content { display: none; padding: 20px 0; } .tab-content.active { display: block; } /* ---------- EMPTY / STATUS STATES ---------- */ .empty-state { text-align: center; color: var(--ink-dim); padding: 60px 20px; font-style: italic; font-size: 16px; } .empty-state::before { content: '☉ ☽ ☿ ♀ ♂ ♃ ♄'; display: block; font-size: 24px; color: var(--gold); letter-spacing: 0.3em; margin-bottom: 16px; opacity: 0.4; font-family: 'Cinzel', serif; } .empty-state.coming-soon::after { content: '— coming in future phase'; display: block; font-size: 11px; margin-top: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; } .error-box { background: rgba(139, 44, 58, 0.2); border: 1px solid var(--crimson); color: var(--ink); padding: 12px 16px; margin: 16px 0; border-radius: 2px; font-size: 14px; } .loading { text-align: center; color: var(--ink-dim); padding: 40px; font-style: italic; } /* ---------- FOOTER ---------- */ footer { text-align: center; padding: 20px; color: var(--ink-dim); font-size: 12px; font-style: italic; opacity: 0.8; line-height: 1.8; } .footer-dim { opacity: 0.75; font-size: 11px; } /* ---------- MOBILE ---------- */ @media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } .location-row { flex-direction: column; align-items: stretch; } .form-grid label.button-label { display: none; } .form-grid label.button-label + .geo-status { grid-column: 1 / -1; } header h1 { font-size: 20px; } header .subtitle { font-size: 12px; } .tab { padding: 12px 14px; font-size: 11px; } body { font-size: 16px; } } /* ===================================================================== PHASE 2 — NATAL CHART STYLES ===================================================================== */ /* ---------- NATAL HEADER ---------- */ .natal-header { text-align: center; margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--border-dim); border-radius: 2px; background: linear-gradient(180deg, rgba(212,175,55,0.03) 0%, transparent 100%); } .natal-header .subject { font-family: 'Cinzel', serif; font-size: 18px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-bottom: 6px; font-weight: 500; } .natal-header .birth-meta { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink); } .natal-header .birth-utc { margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-dim); font-style: italic; } .natal-header .sep { color: var(--gold); opacity: 0.6; margin: 0 6px; } /* ---------- CHART GRID ---------- */ .charts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 24px; } .chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 16px; position: relative; min-width: 0; } .chart-card::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.18; pointer-events: none; border-radius: 2px; } .chart-card figcaption { text-align: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-dim); } .chart-card .chart-title { display: block; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; font-weight: 500; } .chart-card .chart-sub { display: block; font-size: 11px; color: var(--ink-dim); font-style: italic; letter-spacing: 0.05em; margin-top: 3px; } .chart-svg { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; } /* ---------- WESTERN WHEEL — INTERNAL SVG STYLES ---------- Modification notes: - These class names are emitted as raw strings from app.js's renderWesternChart() (Section 14). Renaming any of them requires a coordinated change in BOTH files. - The .wheel-bg → --chart-bg → theme-driven flow is what fixes the previous "Classic background bleeding into Dark/Light" bug. Don't add inline fill="..." attributes in app.js — let CSS resolve through the variable. - .hide-decans and .hide-terms are toggle classes added to the SVG root via opts. They hide both wedge rings and label glyphs. ---------- */ .western-chart .wheel-bg { /* Modification note: this is the inner background of the wheel, resolved via --chart-bg per theme. Do NOT add an inline fill attribute in JS — that would bypass the theme system. */ fill: var(--chart-bg); } .western-chart .sign-sector { /* Modification note: --sign-tint-op is theme-tuned (0.18 Classic, 0.15 Dark, 0.22 Light). On white backgrounds we need MORE opacity so element colours actually read; on dark backgrounds LESS opacity prevents the colour wash from dominating. */ stroke: var(--ring-stroke); stroke-width: 0.6; fill-opacity: var(--sign-tint-op); } .western-chart .sign-fire { fill: var(--fire); } .western-chart .sign-earth { fill: var(--earth); } .western-chart .sign-air { fill: var(--air); } .western-chart .sign-water { fill: var(--water); } .western-chart .ring-circle { fill: none; stroke: var(--gold); stroke-width: 0.6; stroke-opacity: 0.45; } .western-chart .ring-circle.ring-faint { stroke-opacity: 0.2; } .western-chart .ring-circle.ring-inner { stroke-opacity: 0.7; stroke-width: 0.8; } .western-chart .tick-strong { stroke: var(--gold); stroke-width: 0.9; stroke-opacity: 0.9; } .western-chart .tick-minor { stroke: var(--gold); stroke-width: 0.4; stroke-opacity: 0.45; } .western-chart .tick-micro { stroke: var(--gold); stroke-width: 0.25; stroke-opacity: 0.3; } .western-chart .sign-glyph { /* Force a glyph-friendly font stack BEFORE any emoji-presentation fonts. Cinzel doesn't carry zodiac glyphs, so we fall through to a serif that does (Times-style fonts on most platforms include U+2648–U+2653 as monochrome glyphs), then to Symbola as a robust monochrome zodiac font on Linux. The U+FE0E variation selector appended in JS forces text presentation; this stack is the fallback if the browser ignores VS-15. */ font-family: 'Cinzel', 'Noto Sans Symbols 2', 'Symbola', 'Segoe UI Symbol', 'Apple Symbols', serif; font-size: 24px; text-anchor: middle; font-weight: 500; /* Soft drop shadow — separates the glyph from the term/decan ring behind */ filter: drop-shadow(0 0 3px var(--glyph-shadow)); } /* Element-coloured sign glyphs */ .western-chart .sign-glyph-fire { fill: #e8782a; } /* orange — Aries, Leo, Sagittarius */ .western-chart .sign-glyph-earth { fill: #6fa84d; } /* green — Taurus, Virgo, Capricorn */ .western-chart .sign-glyph-air { fill: #d8c84a; } /* yellow — Gemini, Libra, Aquarius */ .western-chart .sign-glyph-water { fill: #4aa6d8; } /* blue — Cancer, Scorpio, Pisces */ /* Term and decan wedges. Opacity is theme-controlled. The `.hide-decans` and `.hide-terms` classes can be added to the western-chart SVG (or its parent) by JS to toggle visibility without re-rendering. */ .western-chart .decan-wedge { fill-opacity: var(--decan-op, 0.45); } .western-chart .term-wedge { fill-opacity: var(--term-op, 0.30); } .western-chart.hide-decans .decan-wedge, .western-chart.hide-decans .term-glyph.decan-glyph { display: none; } .western-chart.hide-terms .term-wedge, .western-chart.hide-terms .term-glyph.egyptian-glyph { display: none; } .western-chart .term-glyph { font-family: 'Cinzel', serif; font-size: 9.5px; fill: var(--ink); fill-opacity: 0.85; text-anchor: middle; } .western-chart .house-sector { /* Modification note: this is the per-house panel inside the wheel where aspect lines draw. Same --chart-bg variable as .wheel-bg so background changes ripple through all house panels. The 0.6 fill-opacity intentionally lets the sign-tint underneath show through slightly — house tints + sign tints layer to give each sector a unique two-tone hue. */ fill: var(--chart-bg); fill-opacity: 0.6; stroke: var(--border); stroke-width: 0.5; } .western-chart .house-sector.house-rising { fill: var(--accent); fill-opacity: 0.08; } .western-chart .house-num { font-family: 'Cinzel', serif; font-size: 13px; fill: var(--ink-dim); text-anchor: middle; letter-spacing: 0.05em; } .western-chart .axis-line { stroke-width: 1.2; stroke-dasharray: none; } .western-chart .axis-asc { stroke: var(--gold-bright); stroke-width: 1.6; } .western-chart .axis-dsc { stroke: var(--gold); stroke-opacity: 0.5; stroke-dasharray: 3 3; } .western-chart .axis-mc { stroke: var(--copper); stroke-width: 1.4; } .western-chart .axis-ic { stroke: var(--copper); stroke-opacity: 0.5; stroke-dasharray: 3 3; } .western-chart .axis-label { font-family: 'Cinzel', serif; font-size: 11px; fill: var(--gold-bright); text-anchor: middle; letter-spacing: 0.15em; font-weight: 500; } .western-chart .aspect-line { stroke-linecap: round; pointer-events: none; } .western-chart .planet-tick { stroke: var(--gold); stroke-width: 1.2; stroke-opacity: 0.8; } .western-chart .planet-connector { stroke: var(--gold); stroke-width: 0.4; stroke-opacity: 0.4; stroke-dasharray: 2 2; } .western-chart .planet-glyph { font-family: 'Cinzel', serif; font-size: 20px; fill: var(--gold-bright); text-anchor: middle; font-weight: 500; } .western-chart .planet-glyph.retro { fill: var(--fire); } .western-chart .retro-mark { font-family: 'JetBrains Mono', monospace; font-size: 8px; fill: var(--crimson); text-anchor: middle; } .western-chart .planet-deg { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; fill: var(--ink-dim); text-anchor: middle; } .western-chart .center-star { font-family: 'Cinzel', serif; font-size: 14px; fill: var(--gold); fill-opacity: 0.8; text-anchor: middle; } /* ---------- NORTH INDIAN DIAMOND — INTERNAL SVG STYLES ---------- Modification notes: - These classes are emitted from renderNorthIndianChart() in app.js Section 15. Renaming requires coordinated change. - .ni-bg uses --ni-bg per theme (white in Light, dark in Dark/Classic). This was previously hardcoded which produced "NI chart too dark in light mode" until fixed. - The element-tint classes (.ni-sign-fire, etc.) use the SAME element-color variables as the Western chart, so both charts stay visually consistent in element coding. ---------- */ .ni-chart .ni-bg { fill: var(--ni-bg); } .ni-chart .ni-house { fill-opacity: var(--sign-tint-op); stroke: var(--border); stroke-width: 0.5; } .ni-chart .sign-fire { fill: var(--fire); } .ni-chart .sign-earth { fill: var(--earth); } .ni-chart .sign-air { fill: var(--air); } .ni-chart .sign-water { fill: var(--water); } .ni-chart .ni-rising { stroke: var(--gold-bright); stroke-width: 1.2; fill-opacity: 0.22; } .ni-chart .ni-outline { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-opacity: 0.85; } .ni-chart .ni-line { stroke: var(--gold); stroke-width: 1; stroke-opacity: 0.7; } .ni-chart .ni-diamond { fill: none; stroke: var(--gold); stroke-width: 1; stroke-opacity: 0.7; } .ni-chart .ni-sign-num { font-family: 'Cinzel', serif; font-size: 13px; fill: var(--gold); text-anchor: middle; letter-spacing: 0.05em; font-weight: 500; } .ni-chart .ni-planet { font-family: 'Cinzel', serif; font-size: 16px; fill: var(--gold-bright); text-anchor: middle; font-weight: 500; } .ni-chart .ni-deg { font-family: 'JetBrains Mono', monospace; font-size: 9px; fill: var(--ink-dim); } .ni-chart .ni-retro { font-family: 'JetBrains Mono', monospace; font-size: 9px; fill: var(--crimson); } .ni-chart .ni-lagna { font-family: 'Cinzel', serif; font-size: 9px; fill: var(--gold); text-anchor: middle; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.7; } /* ---------- CHART LEGEND ---------- */ .chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-dim); font-size: 11px; color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; } .chart-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 1px; vertical-align: -1px; border: 1px solid var(--border-dim); } .chart-legend.ni-legend { font-style: italic; flex-direction: column; text-align: center; gap: 4px; } .chart-legend-note { font-size: 10px; font-style: italic; color: var(--ink-dim); text-align: center; margin-top: 6px; line-height: 1.55; padding: 0 12px; } /* ---------- ASPECTS LIST ---------- */ .aspects-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 16px; margin-bottom: 20px; position: relative; } .aspects-list::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.15; pointer-events: none; border-radius: 2px; } .aspects-list h4 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; font-weight: 500; text-align: center; margin-bottom: 12px; } .aspects-list ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; } .aspects-list li { display: flex; align-items: baseline; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink); padding: 3px 0; } .aspects-list .sym { font-size: 16px; color: var(--gold-bright); min-width: 18px; text-align: center; } .aspects-list .aspect-sym { font-size: 15px; min-width: 18px; text-align: center; } .aspects-list .aspect-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; color: var(--ink-dim); flex: 1; } .aspects-list .aspect-orb { font-size: 11px; color: var(--ink-dim); opacity: 0.75; } /* ---------- POSITIONS TABLE ---------- */ .positions-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 18px; position: relative; } .positions-card::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.18; pointer-events: none; border-radius: 2px; } .positions-card h3 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; text-align: center; padding-bottom: 12px; border-bottom: 1px solid var(--border-dim); margin-bottom: 12px; font-weight: 500; } .positions-table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 13px; } .positions-table th { text-align: left; color: var(--gold); font-family: 'Cinzel', serif; font-weight: 400; letter-spacing: 0.1em; font-size: 10.5px; padding: 8px 6px; border-bottom: 1px solid var(--border); text-transform: uppercase; } .positions-table td { padding: 6px; border-bottom: 1px solid var(--border-dim); color: var(--ink); } .positions-table .sym { font-size: 16px; color: var(--gold-bright); width: 28px; text-align: center; } .positions-table .retro { color: var(--crimson); font-size: 12px; } .positions-footer { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border-dim); font-size: 12px; color: var(--ink-dim); text-align: center; font-family: 'JetBrains Mono', monospace; } .positions-footer strong { color: var(--gold-bright); } .positions-footer .sep { color: var(--gold); opacity: 0.5; margin: 0 6px; } /* ---------- MOBILE ADJUSTMENTS FOR PHASE 2 ---------- */ @media (max-width: 820px) { .charts-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .positions-table { font-size: 11px; } .positions-table th, .positions-table td { padding: 4px 3px; } .positions-table .sym { font-size: 14px; width: 22px; } .natal-header .subject { font-size: 16px; letter-spacing: 0.15em; } .natal-header .birth-meta { font-size: 12px; } .chart-card { padding: 12px; } .aspects-list ul { grid-template-columns: 1fr; } .western-chart .sign-glyph { font-size: 24px; } .western-chart .planet-glyph { font-size: 22px; } .western-chart .term-glyph { font-size: 10.5px; } .ni-chart .ni-planet { font-size: 17px; } .ni-chart .ni-sign-num { font-size: 14px; } } /* ===================================================================== PHASE 3 — DIVISIONAL (VARGA) CHART STYLES ===================================================================== */ .varga-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border-dim); scrollbar-width: thin; scrollbar-color: var(--border) transparent; -webkit-overflow-scrolling: touch; } .varga-tabs::-webkit-scrollbar { height: 3px; } .varga-tabs::-webkit-scrollbar-track { background: transparent; } .varga-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .varga-tab { background: transparent; border: 1px solid var(--border); color: var(--ink-dim); padding: 7px 12px; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.12em; font-weight: 500; cursor: pointer; border-radius: 2px; white-space: nowrap; transition: color 0.15s, border-color 0.15s, background 0.15s; min-width: 46px; text-align: center; } .varga-tab:hover { color: var(--ink); border-color: var(--gold); } .varga-tab.active { background: var(--gold); color: var(--bg); border-color: var(--gold); } .varga-tab:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; } .varga-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 18px; margin-top: 12px; position: relative; } .varga-card::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.18; pointer-events: none; border-radius: 2px; } .varga-header { text-align: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-dim); } .varga-header h3 { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; font-weight: 500; } .varga-meaning { font-size: 13px; color: var(--ink-dim); font-style: italic; margin-top: 6px; font-family: 'Cormorant Garamond', serif; } .varga-card .chart-svg { max-width: 420px; } .varga-positions { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-dim); } .positions-table.compact th, .positions-table.compact td { padding: 5px 6px; } .positions-table.compact { max-width: 380px; margin: 0 auto; } @media (max-width: 520px) { .varga-tab { padding: 6px 10px; font-size: 10.5px; min-width: 42px; } .varga-header h3 { font-size: 12px; letter-spacing: 0.18em; } .varga-meaning { font-size: 12px; } .varga-card { padding: 14px; } } /* ===================================================================== PHASE 4 — PROGRESSED & SOLAR RETURN STYLES ===================================================================== */ .p4-tabs { display: flex; gap: 6px; padding: 4px 2px 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border-dim); } .p4-tab { background: transparent; border: 1px solid var(--border); color: var(--ink-dim); padding: 9px 18px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.15em; font-weight: 500; cursor: pointer; border-radius: 2px; transition: color 0.15s, border-color 0.15s, background 0.15s; text-transform: uppercase; } .p4-tab:hover { color: var(--ink); border-color: var(--gold); } .p4-tab.active { background: var(--gold); color: var(--bg); border-color: var(--gold); } .p4-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border-dim); border-radius: 2px; margin-bottom: 16px; } .p4-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-dim); letter-spacing: 0.05em; min-width: 140px; flex: 1 1 140px; } .p4-controls input { background: var(--bg); border: 1px solid var(--border); color: var(--ink); padding: 8px 10px; font-family: 'JetBrains Mono', monospace; font-size: 13px; border-radius: 2px; width: 100%; } .p4-controls input:focus { outline: none; border-color: var(--gold); } .p4-controls .btn { align-self: flex-end; } .p4-controls .p4-hint { flex-basis: 100%; font-size: 11px; color: var(--ink-dim); font-style: italic; margin-top: 2px; } .p4-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 18px; position: relative; } .p4-card::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.18; pointer-events: none; border-radius: 2px; } .p4-card figcaption { text-align: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-dim); } .p4-card .chart-title { display: block; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; font-weight: 500; } .p4-card .chart-sub { display: block; font-size: 11px; color: var(--ink-dim); font-style: italic; letter-spacing: 0.05em; margin-top: 3px; font-family: 'JetBrains Mono', monospace; } .p4-card .chart-svg { max-width: 520px; margin: 0 auto; } .p4-positions { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-dim); } .p4-positions .positions-table td.natal, .p4-positions .positions-table th.natal { color: var(--ink-dim); opacity: 0.75; } @media (max-width: 520px) { .p4-controls label { min-width: 100%; } .p4-tab { padding: 8px 12px; font-size: 11px; letter-spacing: 0.12em; } .p4-card { padding: 12px; } } /* ===================================================================== PHASE 5 — ZODIACAL RELEASING STYLES ===================================================================== */ .p5-tabs { display: flex; gap: 6px; padding: 4px 2px 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border-dim); } .p5-tab { background: transparent; border: 1px solid var(--border); color: var(--ink-dim); padding: 9px 18px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.15em; font-weight: 500; cursor: pointer; border-radius: 2px; text-transform: uppercase; transition: color 0.15s, border-color 0.15s, background 0.15s; } .p5-tab:hover { color: var(--ink); border-color: var(--gold); } .p5-tab.active { background: var(--gold); color: var(--bg); border-color: var(--gold); } .p5-meta { text-align: center; padding: 12px 16px; margin-bottom: 16px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--ink); background: rgba(212, 175, 55, 0.05); border: 1px solid var(--border-dim); border-radius: 2px; } .p5-meta strong { color: var(--gold-bright); } .p5-meta em { color: var(--ink-dim); font-size: 12px; } .p5-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; } @media (max-width: 720px) { .p5-grid { grid-template-columns: 1fr; } } .p5-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 16px; margin-bottom: 16px; position: relative; } .p5-card::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.15; pointer-events: none; border-radius: 2px; } .p5-card h4 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; font-weight: 500; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-dim); } .p5-card .p5-sub { color: var(--ink-dim); font-size: 10px; font-style: italic; letter-spacing: 0.08em; margin-left: 6px; font-weight: 400; } .p5-lots td, .p5-lots th { padding: 6px 8px; } .p5-lots tr.highlight td { color: var(--gold-bright); font-weight: 500; } .p5-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink); font-family: 'JetBrains Mono', monospace; } .p5-legend .swatch { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -3px; border-radius: 2px; border: 1px solid var(--border); } .p5-legend .swatch.peak-major { background: rgba(212, 175, 55, 0.55); border-color: var(--gold-bright); } .p5-legend .swatch.peak-moderate { background: rgba(184, 115, 51, 0.40); border-color: var(--copper); } .p5-legend .swatch.peak-minor { background: rgba(139, 44, 58, 0.30); border-color: var(--crimson); } .p5-legend .swatch.current { background: rgba(74, 122, 138, 0.45); border-color: var(--water); } .p5-note { font-size: 11px; font-style: italic; color: var(--ink-dim); margin-top: 12px; line-height: 1.5; } .p5-periods { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 13px; } .p5-periods th, .p5-periods td { padding: 7px 8px; text-align: left; } .p5-periods tr.peak-major { background: rgba(212, 175, 55, 0.12); } .p5-periods tr.peak-moderate { background: rgba(184, 115, 51, 0.08); } .p5-periods tr.peak-minor { background: rgba(139, 44, 58, 0.06); } .p5-periods tr.current { outline: 1px solid var(--water); outline-offset: -1px; background: rgba(74, 122, 138, 0.18) !important; } .p5-periods .sign { color: var(--gold-bright); font-weight: 500; letter-spacing: 0.05em; } .p5-periods .yrs { text-align: right; color: var(--ink-dim); font-size: 12px; } .lb-mark { display: inline-block; background: var(--crimson); color: var(--ink); padding: 1px 5px; font-size: 9px; letter-spacing: 0.1em; border-radius: 2px; margin-left: 6px; vertical-align: 1px; } @media (max-width: 520px) { .p5-tab { padding: 8px 12px; font-size: 11px; letter-spacing: 0.12em; } .p5-periods { font-size: 11px; } .p5-periods th, .p5-periods td { padding: 5px 4px; } .p5-card { padding: 12px; } } /* ===================================================================== PHASE 6 — POLISH ===================================================================== */ /* ---------- CHART LIBRARY ---------- */ .library-wrap { margin: 8px 0 24px; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; position: relative; } .library-wrap::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.15; pointer-events: none; border-radius: 2px; } .library-heading { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; font-weight: 500; text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--border-dim); margin-bottom: 12px; } .library-empty { padding: 16px 12px; text-align: center; color: var(--ink-dim); font-style: italic; font-size: 13px; } .library-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .library-item { display: flex; align-items: stretch; gap: 0; background: var(--bg-elev); border: 1px solid var(--border-dim); border-radius: 2px; transition: border-color 0.15s; } .library-item:hover { border-color: var(--gold); } .library-load { flex: 1; text-align: left; background: transparent; border: none; padding: 10px 12px; color: var(--ink); cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .library-load:hover { color: var(--gold-bright); } .library-load:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .library-label { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.08em; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .library-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .library-delete { flex: 0 0 auto; background: transparent; border: none; border-left: 1px solid var(--border-dim); color: var(--ink-dim); padding: 0 14px; cursor: pointer; font-size: 16px; font-family: 'JetBrains Mono', monospace; transition: color 0.15s, background 0.15s; } .library-delete:hover { color: var(--crimson); background: rgba(139, 44, 58, 0.1); } .library-delete:focus-visible { outline: 2px solid var(--crimson); outline-offset: -2px; } #saveChartBtn { border-color: var(--gold-bright); color: var(--gold-bright); } #saveChartBtn:hover { background: var(--gold-bright); color: var(--bg); } /* Secondary row below the primary Cast Charts button for utility buttons */ .form-footer-row { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border-dim); } .form-footer-row .btn { flex: 0 1 auto; min-width: 140px; } #installBtn { border-color: var(--gold-bright); color: var(--gold-bright); } #installBtn:hover { background: var(--gold-bright); color: var(--bg); } /* Ornament glyph row in the header — gives it room to breathe on mobile */ header .ornament { padding: 0 8px; word-spacing: 0.15em; } /* A subtle affordance that the tab bar scrolls when content overflows. A thin gradient fades on the right edge so users see there's more to the right. Only applies when the container is actually scrollable. */ .tabs { position: relative; scroll-behavior: smooth; } .tabs::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 36px; background: linear-gradient(to left, var(--bg) 0%, transparent 100%); pointer-events: none; opacity: 0.8; } /* Hide the scroll hint on wide screens where overflow isn't happening */ @media (min-width: 640px) { .tabs::after { display: none; } } /* Slight tighter header on small screens to prevent the glyph row wrap */ @media (max-width: 380px) { header .ornament { letter-spacing: 0.3em; font-size: 11px; } header h1 { font-size: 18px; } } /* Error box gets a bit more room and a subtle animation so the user's eye catches it when validation fails after a submit attempt */ .error-box { animation: errorFadeIn 200ms ease-out; } @keyframes errorFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================================== PHASE 7 — HOUSE SYSTEMS, NI TOGGLE, PRINT MODE ===================================================================== */ /* The "print all vargas" grid lives in the divisional tab but is hidden during normal viewing. It appears only when we're printing, replacing the single-varga view with the full 15-chart grid. */ .varga-print-all { display: none; } /* House system selector above the Western chart */ .chart-house-selector { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border-dim); border-radius: 2px; } .chart-house-selector label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-dim); letter-spacing: 0.05em; font-family: 'Cormorant Garamond', serif; } .chart-house-selector select { background: var(--bg); border: 1px solid var(--border); color: var(--ink); padding: 6px 10px; font-family: 'JetBrains Mono', monospace; font-size: 13px; border-radius: 2px; flex: 1; max-width: 220px; } .chart-house-selector select:focus { outline: none; border-color: var(--gold); } .chart-house-selector .hs-warning { font-size: 11px; color: var(--crimson); font-style: italic; font-family: 'JetBrains Mono', monospace; line-height: 1.4; } /* Cusp spoke lines (quadrant systems only) drawn across the wheel interior so intermediate house boundaries are visible. */ .western-chart .cusp-line { stroke: var(--gold); stroke-width: 0.5; stroke-opacity: 0.35; stroke-dasharray: 3 2; } /* NI glyph toggle */ .chart-ni-controls { padding: 8px 12px; margin-bottom: 12px; background: var(--bg-elev); border: 1px solid var(--border-dim); border-radius: 2px; } .toggle-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); font-family: 'Cormorant Garamond', serif; cursor: pointer; } .toggle-row input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; } /* NI sign label element coloring. Applies to both numbers and glyphs. */ .ni-chart .ni-sign-fire { fill: #e8782a; } /* orange — matches Western */ .ni-chart .ni-sign-earth { fill: #6fa84d; } /* green — matches Western */ .ni-chart .ni-sign-air { fill: #d8c84a; } /* yellow — matches Western */ .ni-chart .ni-sign-water { fill: #4aa6d8; } /* blue — matches Western */ .ni-chart .ni-sign-glyph { /* Match the Western chart's font stack — forces monochrome glyph rendering instead of OS color emoji. The U+FE0E variation selector is appended in JS; this stack is the fallback if VS-15 is ignored. */ font-family: 'Cinzel', 'Noto Sans Symbols 2', 'Symbola', 'Segoe UI Symbol', 'Apple Symbols', serif; font-size: 17px; font-weight: 500; filter: drop-shadow(0 0 3px var(--glyph-shadow)); } @media (max-width: 520px) { .ni-chart .ni-sign-glyph { font-size: 18px; } } /* Small element-key legend under the NI chart */ .ni-elt-key { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; font-size: 10px; letter-spacing: 0.08em; margin-top: 6px; } .ni-elt-key .swatch { display: inline-block; width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px; border-radius: 50%; } .ni-elt-key .swatch.sign-fire { background: #e46c4f; } .ni-elt-key .swatch.sign-earth { background: #8aa05c; } .ni-elt-key .swatch.sign-air { background: #e8d46a; } .ni-elt-key .swatch.sign-water { background: #5ea3c4; } #printBtn { border-color: var(--ink); color: var(--ink); } #printBtn:hover { background: var(--ink); color: var(--bg); } /* ---------- PRINT STYLESHEET ---------- Purpose: when the user triggers Print / Save to PDF, hide all interactive UI and lay the four tab contents out as sequential printed pages. The user's browser handles Save-to-PDF vs physical printer from the native dialog. Modification notes: - This is the SOLE source of truth for what the PDF looks like. Any change here changes printed output. - Browsers handle @page and page-break rules inconsistently; Chrome and Firefox produce slightly different page-break behaviour. TEST IN BOTH after changes. - Hidden in print: form, library, tabs, action buttons, install button, geo-status, transit controls. - Shown in print regardless of UI state: yogas card, fixed-stars card (via .yogas-print-only / .fixed-stars-print-only wrappers). - The LLM synthesis prompt is appended at the very end. ---------- */ @media print { /* Light theme printed output — ink on paper. Phase 6 (release candidate): this block forces Light-mode values for the chart-critical custom properties so the printed/PDF output of the Western chart, NI chart, and all derived chart surfaces uses Light-mode rendering regardless of which theme the user has selected on screen (Classic, Dark, or Light) and regardless of which interface mode (Chart View or Signal View) they are using. The user's saved theme is NOT mutated — these overrides apply only inside @media print and only affect the rendered output. */ :root { --bg: #ffffff; --bg-elev: #ffffff; --bg-card: #ffffff; --ink: #1a1420; --ink-dim: #555555; --gold: #8a6a1e; --gold-bright: #6b5012; --border: #aa9966; --border-dim: #d4c7a3; /* Phase 6: chart-critical tokens forced to Light-mode values for print. These are the values from the Light theme block at the top of this stylesheet; they are mirrored here so any future Light- theme tuning must also be applied to this print override block. Keeping them in sync is a maintenance contract documented in the theme variable system header at the top of the file. */ --chart-bg: #ffffff; --chart-ring-bg: #f5f5ec; --ni-bg: #ffffff; --ring-stroke: #d6dde6; --sign-tint-op: 0.22; --decan-op: 0.20; --term-op: 0.14; --glyph-shadow: rgba(255,255,255,0.7); /* Backdrop halos zeroed for print so no gradient bleeds onto paper. */ --bg-grad-1-color: transparent; --bg-grad-2-color: transparent; } html, body { background: #ffffff !important; color: #1a1420 !important; font-size: 11pt; } body::before { /* Wipe the radial-gradient background */ content: none; } /* Hide non-content UI */ header .ornament, .birth-form, .library-wrap, .tabs, .form-footer-row, #installBtn, #printBtn, #geoStatus, .chart-house-selector select, .chart-ni-controls, .p5-tabs, .varga-tabs, .p4-tabs, .p4-controls { display: none !important; } /* Keep ornaments and headings but quiet them down */ header { border-bottom: 1pt solid #888; padding: 6pt 12pt 8pt; } header h1 { color: #333 !important; font-size: 20pt; letter-spacing: 0.1em; } header .subtitle { color: #666 !important; } /* Show all four tabs stacked, each as its own page */ .tab-content { display: block !important; page-break-before: always; page-break-inside: avoid; padding: 12pt 0; } .tab-content:first-of-type { page-break-before: auto; } /* Label each section with an h2 */ #tab-natal::before { content: 'Natal Chart'; } #tab-divisional::before { content: 'Divisional Charts'; } #tab-progressed::before { content: 'Progressed & Solar Return'; } #tab-zr::before { content: 'Zodiacal Releasing'; } .tab-content::before { display: block; font-family: 'Cinzel', serif; font-size: 16pt; letter-spacing: 0.15em; text-transform: uppercase; color: #333; border-bottom: 0.5pt solid #aaa; padding-bottom: 6pt; margin-bottom: 10pt; } /* Chart cards: remove decorative borders for a cleaner printed look */ .chart-card, .p4-card, .p5-card, .varga-card, .positions-card, .aspects-list, .natal-header { background: #ffffff !important; border: 0.5pt solid #999 !important; page-break-inside: avoid; box-shadow: none !important; padding: 10pt 12pt; margin-bottom: 10pt; } .chart-card::before, .p4-card::before, .p5-card::before, .varga-card::before, .positions-card::before, .aspects-list::before, .library-wrap::before { display: none !important; } .charts-grid { display: block !important; } .charts-grid .chart-card { margin-bottom: 14pt; } /* SVG tweaks for print */ .chart-svg { max-width: 100% !important; page-break-inside: avoid; } .western-chart { /* Slightly lighter strokes read better on paper */ opacity: 1; } .western-chart .sign-sector { fill-opacity: 0.08 !important; } .western-chart .house-sector { fill: #ffffff !important; fill-opacity: 0 !important; } .western-chart .house-sector.house-rising { fill: #f5edd5 !important; fill-opacity: 1 !important; } .ni-chart .ni-bg { fill: #ffffff !important; } .ni-chart .ni-house { fill-opacity: 0.06 !important; } /* Tables: dark ink on paper */ .positions-table th, .positions-table td, .p5-periods th, .p5-periods td { color: #1a1420 !important; border-color: #bbb !important; } .positions-table th { color: #555 !important; } /* Divisional tab in print: hide the single-varga card, show the full-grid print block with all 15 vargas. */ .varga-tab { display: none !important; } #tab-divisional .varga-tabs, #tab-divisional > .varga-card { display: none !important; } #tab-divisional .varga-print-all { display: block !important; page-break-before: avoid; } .varga-print-title { display: none !important; /* Section header comes from ::before */ } .varga-print-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6pt; page-break-inside: auto; /* allow natural wrap to a 2nd page if needed */ } .varga-print-card { border: 0.5pt solid #999; padding: 4pt; margin: 0; page-break-inside: avoid; text-align: center; background: #ffffff !important; } .varga-print-card::before { display: none !important; } /* Kill the decorative gold edge */ .varga-print-card figcaption { font-family: 'Cinzel', serif; font-size: 7pt; letter-spacing: 0.05em; color: #333; margin-bottom: 2pt; padding: 0; border: none !important; line-height: 1.3; } .varga-print-card figcaption strong { color: #6b5012; letter-spacing: 0.08em; } .varga-print-card .varga-print-lagna { display: block; font-family: 'JetBrains Mono', monospace; font-size: 6pt; color: #666; letter-spacing: 0.03em; font-weight: normal; } .varga-print-card .chart-svg { width: 100%; height: auto; max-width: none !important; max-height: 140pt; /* keep each chart compact so all 15 fit */ } /* Element-colored numbers/glyphs read better on white paper with a slightly darker shade */ .varga-print-card .ni-sign-fire { fill: #b74a2d !important; } .varga-print-card .ni-sign-earth { fill: #5f7a3a !important; } .varga-print-card .ni-sign-air { fill: #a08a20 !important; } .varga-print-card .ni-sign-water { fill: #3a7590 !important; } /* ---------- P&SR tab in print: show BOTH charts ---------- */ #tab-progressed .p4-tabs, #tab-progressed .p4-controls, #tab-progressed > .p4-card { display: none !important; } #tab-progressed .p4-print-all { display: block !important; } .p4-print-card { background: #ffffff !important; border: 0.5pt solid #999 !important; page-break-inside: avoid; margin-bottom: 10pt; padding: 10pt 12pt; } .p4-print-card::before { display: none !important; } .p4-print-card .chart-svg { max-width: 80%; margin: 0 auto; } /* ---------- ZR tab in print: show ALL THREE lots ---------- */ #tab-zr .p5-tabs, #tab-zr > .p5-meta, #tab-zr > .p5-grid, #tab-zr > .p5-card { display: none !important; } #tab-zr .zr-print-all { display: block !important; } .zr-print-title { display: none !important; } .zr-print-lot { page-break-inside: avoid; margin-bottom: 12pt; border: 0.5pt solid #bbb; padding: 6pt 8pt; background: #ffffff !important; } .zr-print-lot-title { font-family: 'Cinzel', serif; font-size: 10pt; letter-spacing: 0.1em; color: #6b5012 !important; margin-bottom: 5pt; padding-bottom: 3pt; border-bottom: 0.3pt solid #ccc; } .zr-print-lot-title em { font-family: 'Cormorant Garamond', serif; font-size: 8pt; color: #666 !important; letter-spacing: 0; } .zr-print-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; } .zr-print-subhead { font-family: 'Cinzel', serif; font-size: 7pt; letter-spacing: 0.1em; color: #333 !important; margin-bottom: 3pt; text-transform: uppercase; } .zr-print-lot .p5-periods { font-size: 7.5pt; } .zr-print-lot .p5-periods th, .zr-print-lot .p5-periods td { padding: 2pt 3pt; } /* LLM synthesis prompt — final page(s) of the PDF. Always starts on its own page so users can flip straight to it or tear it off. */ .llm-prompt-page { display: block !important; page-break-before: always; font-family: 'Cormorant Garamond', serif; color: #1a1420 !important; } .llm-page-title { font-family: 'Cinzel', serif; font-size: 18pt; letter-spacing: 0.15em; text-transform: uppercase; color: #333 !important; border-bottom: 0.5pt solid #aaa; padding-bottom: 6pt; margin-bottom: 10pt; } .llm-intro { font-size: 10pt; line-height: 1.5; margin-bottom: 12pt; color: #444 !important; } .llm-prompt-box { border: 0.75pt solid #666; padding: 10pt 12pt; background: #fafaf5 !important; page-break-inside: auto; } .llm-prompt-header, .llm-prompt-footer { font-family: 'JetBrains Mono', monospace; font-size: 8pt; color: #888 !important; text-align: center; letter-spacing: 0.12em; padding: 2pt 0; } .llm-prompt-text { font-family: 'JetBrains Mono', monospace; font-size: 8.5pt; line-height: 1.45; color: #1a1420 !important; white-space: pre-wrap; margin: 6pt 0; page-break-inside: auto; } .llm-footnote { font-size: 9pt; font-style: italic; color: #666 !important; margin-top: 10pt; line-height: 1.5; } /* Section-header placeholder for this final page — reuses the existing tab-content ::before hook so it labels as "Zodiacal Releasing" on its earlier pages and this synthesis page gets its own internal heading from .llm-page-title. */ /* Footer: keep for attribution, shrink it */ footer { border-top: 0.5pt solid #ccc; font-size: 8pt; color: #666 !important; padding: 6pt 12pt; } footer .ornament, footer br + span { display: none; } /* Browser-specific: better page margins. Chrome/Firefox honor @page. */ @page { size: letter; margin: 12mm 10mm; } } /* In print-mode (body class set just before window.print), ensure every tab panel is rendered visible even before @media print rules apply, so the browser print preview captures them all. */ body.print-mode .tab-content { display: block !important; } /* ===================================================================== PHASE 8 — SYNTHESIS DATA CARDS Rulers + dispositor (Natal tab), Karakas (Divisionals tab) ===================================================================== */ /* LLM synthesis prompt page — hidden on screen, shown in PDF export */ .llm-prompt-page { display: none; } /* Print-only blocks for ZR (all 3 lots) and P&SR (both charts) — hidden on screen, revealed in @media print and body.print-mode. */ .p4-print-all, .zr-print-all { display: none; } .modern-ruler-toggle { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-dim); font-size: 11px; } .modern-ruler-toggle input[type="checkbox"] { width: 14px; height: 14px; } .rulers-card, .karakas-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 16px; margin-bottom: 18px; position: relative; } .rulers-card::before, .karakas-card::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.15; pointer-events: none; border-radius: 2px; } .rulers-card h4, .karakas-card h4 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; font-weight: 500; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-dim); } .rulers-block p, .karakas-summary { font-size: 13px; line-height: 1.55; color: var(--ink); margin: 6px 0; } .ruler-name { color: var(--gold-bright); font-family: 'Cinzel', serif; letter-spacing: 0.08em; font-weight: 500; margin: 0 6px; } .ruler-loc { color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; font-size: 12px; } .dispositor-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-dim); } .dispositor-block h4 { border-bottom: none; margin-bottom: 8px; padding-bottom: 0; } .dispositor-headline { font-size: 13px; color: var(--ink); line-height: 1.5; margin-bottom: 12px; padding: 10px 12px; background: rgba(212, 175, 55, 0.06); border-left: 2px solid var(--gold); border-radius: 1px; } .dispositor-headline strong { color: var(--gold-bright); } .dispositor-chains { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 14px; margin: 10px 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .chain-row { padding: 4px 0; color: var(--ink-dim); border-bottom: 1px dotted var(--border-dim); } .chain-start { color: var(--gold-bright); font-weight: 500; } .chain-arrow { color: var(--ink-dim); } .chain-path { color: var(--ink); } .chain-path em { color: var(--ink-dim); font-style: italic; } .rulers-card .p5-note { margin-top: 8px; } /* Karakas table */ .karakas-table-scroll { /* 8 columns is too wide for most phone screens — allow horizontal scroll rather than cram the columns or wrap text illegibly. */ overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; margin-bottom: 6px; /* Edge-fade hint the table is scrollable */ background: linear-gradient(to right, var(--bg-card) 30%, rgba(19, 16, 27, 0)) left center / 20px 100% no-repeat, linear-gradient(to left, var(--bg-card) 30%, rgba(19, 16, 27, 0)) right center / 20px 100% no-repeat, var(--bg-card); background-attachment: local, local, scroll; } .karakas-table { width: 100%; min-width: 640px; /* ensure we trigger the scroll on narrow phones */ } .karakas-table th, .karakas-table td { padding: 6px 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: left; white-space: nowrap; } .karakas-table tr.karaka-top { background: rgba(212, 175, 55, 0.10); outline: 1px solid var(--gold); outline-offset: -1px; } .karakas-table tr.karaka-top .karaka-abbr { color: var(--gold-bright); font-weight: 600; } .karaka-abbr { color: var(--gold); font-weight: 500; width: 48px; letter-spacing: 0.05em; } .karaka-name { color: var(--ink); font-family: 'Cormorant Garamond', serif; font-size: 13px; } .karaka-planet { color: var(--ink); } .karaka-deg { color: var(--ink-dim); text-align: right !important; } .karaka-nak { color: var(--gold-bright); font-family: 'Cormorant Garamond', serif; font-size: 13px; } .karaka-pada { color: var(--ink-dim); text-align: center !important; } .karaka-sub { color: var(--ink); } .karakas-footnote { font-size: 11px; font-style: italic; color: var(--ink-dim); margin-top: 10px; line-height: 1.5; } @media (max-width: 520px) { .dispositor-chains { grid-template-columns: 1fr; } .karakas-table th, .karakas-table td { padding: 5px 4px; font-size: 11px; } } /* ===================================================================== PHASE 9 — YOGAS CARD ===================================================================== */ .ni-yogas-toggle { margin-top: 10px; text-align: center; } .yogas-print-only { display: none; } .ni-yogas-toggle .btn { font-size: 12px; padding: 8px 18px; letter-spacing: 0.12em; } .yogas-card { margin-top: 14px; padding: 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 2px; position: relative; } .yogas-card::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.2; pointer-events: none; border-radius: 2px; } .yogas-card h4 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; font-weight: 500; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-dim); } .yogas-intro { font-size: 12px; color: var(--ink-dim); font-style: italic; line-height: 1.5; margin-bottom: 14px; } .yogas-section { margin-bottom: 14px; } .yogas-subhead { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.15em; margin-bottom: 8px; padding: 4px 8px; border-radius: 2px; } .yogas-positive { color: #8aa05c; background: rgba(138, 160, 92, 0.1); border-left: 2px solid #8aa05c; } .yogas-mixed { color: var(--gold-bright); background: rgba(212, 175, 55, 0.08); border-left: 2px solid var(--gold); } .yogas-negative { color: var(--crimson); background: rgba(139, 44, 58, 0.1); border-left: 2px solid var(--crimson); } .yoga-row { padding: 10px 10px 10px 14px; margin-bottom: 6px; background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: 2px; } .yoga-name { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.1em; color: var(--gold-bright); font-weight: 500; } .yoga-cat { font-size: 10px; color: var(--ink-dim); font-style: italic; margin-bottom: 4px; } .yoga-rule { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink); margin-bottom: 4px; line-height: 1.5; } .yoga-effect { font-size: 12px; color: var(--ink-dim); line-height: 1.55; } .yogas-empty { font-size: 12px; color: var(--ink-dim); font-style: italic; padding: 8px 0; } .yogas-footnote { font-size: 10px; font-style: italic; color: var(--ink-dim); line-height: 1.5; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-dim); } /* Print: always show the yogas card if data exists */ @media print { .ni-yogas-toggle { display: none !important; } .yogas-print-only { display: block !important; } .yogas-card { page-break-inside: avoid; background: #ffffff !important; border: 0.5pt solid #999 !important; margin-top: 10pt; } .yogas-card::before { display: none !important; } .yoga-row { background: #fafaf5 !important; border: 0.3pt solid #bbb !important; padding: 5pt 8pt; margin-bottom: 4pt; } .yogas-subhead { font-size: 9pt !important; } } /* ===================================================================== PHASE 10 — TRANSIT CONTROLS ===================================================================== */ .transit-toggle { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-dim); font-size: 11px; } .transit-toggle input[type="checkbox"] { width: 14px; height: 14px; } .transit-controls { padding: 12px; margin-bottom: 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 2px; } .transit-date-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .transit-date-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em; flex: 1 1 auto; min-width: 200px; } .transit-date-label input[type="datetime-local"] { background: var(--bg); border: 1px solid var(--border); color: var(--ink); padding: 7px 9px; font-family: 'JetBrains Mono', monospace; font-size: 12px; border-radius: 2px; width: 100%; color-scheme: dark; } .transit-date-label input:focus { outline: none; border-color: var(--gold); } .transit-now-btn { padding: 7px 16px; font-size: 11px; letter-spacing: 0.1em; } .transit-steps { display: flex; flex-direction: column; gap: 5px; } .transit-step-row { display: grid; grid-template-columns: 12px repeat(6, 1fr); gap: 3px; align-items: center; } .transit-step-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-dim); text-align: center; } .transit-step { background: var(--bg); border: 1px solid var(--border); color: var(--ink); padding: 6px 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.03em; cursor: pointer; border-radius: 2px; transition: background 0.1s, border-color 0.1s, color 0.1s; } .transit-step:hover { border-color: var(--gold); color: var(--gold-bright); } .transit-step:active { background: var(--gold); color: var(--bg); } @media (max-width: 480px) { .transit-step-row { grid-template-columns: 10px repeat(6, 1fr); gap: 2px; } .transit-step { font-size: 9px; padding: 6px 0; letter-spacing: 0; } } /* Transit planet glyphs in the Western chart SVG */ .western-chart .transit-ring-bg { fill: none; stroke: var(--water); stroke-width: 0.5; stroke-opacity: 0.25; } .western-chart .transit-tick { stroke: var(--water); stroke-width: 0.7; stroke-opacity: 0.6; } .western-chart .transit-glyph { font-family: 'JetBrains Mono', monospace; font-size: 15px; fill: var(--water); text-anchor: middle; font-weight: 500; } .western-chart .transit-glyph.retro { fill: var(--copper); } /* Transit aspects list beneath the chart */ .transit-aspects { margin-top: 12px; padding: 12px; background: var(--bg-elev); border: 1px solid var(--border-dim); border-radius: 2px; } .transit-aspects h5 { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.15em; color: var(--water); text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-dim); } .transit-aspects.empty { font-size: 12px; color: var(--ink-dim); font-style: italic; text-align: center; padding: 14px; } .transit-aspects-table { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .transit-aspects-table th, .transit-aspects-table td { padding: 4px 8px; text-align: left; } .transit-aspects-table th { color: var(--ink-dim); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'Cinzel', serif; } .transit-aspects-table .tx-t { color: var(--water); font-weight: 500; } .transit-aspects-table .tx-asp { color: var(--ink); } .transit-aspects-table .tx-n { color: var(--ink); } .transit-aspects-table .tx-orb { color: var(--ink-dim); text-align: right; font-size: 11px; } .transit-aspects-table tr.to-angle { background: rgba(212, 175, 55, 0.08); outline: 1px solid var(--gold); outline-offset: -1px; } .transit-aspects-table tr.to-angle .tx-n { color: var(--gold-bright); font-weight: 500; } .transit-aspects-note { font-size: 10px; font-style: italic; color: var(--ink-dim); margin-top: 8px; } /* Hide transit UI in print mode (transits are a live interactive feature; the moment frozen in the PDF would go stale instantly) */ @media print { .transit-controls, .transit-aspects { display: none !important; } } /* ===================================================================== PHASE 11 — QUICK-FILL CONTROLS (Now button, Current Location, Recents) ===================================================================== */ .datetime-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 10px; } .datetime-row > label { margin: 0; } .nowBtn { padding: 10px 16px; font-size: 12px; letter-spacing: 0.1em; align-self: end; height: 40px; white-space: nowrap; } .location-quickfill { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; } .quickfill-btn { flex: 0 1 auto; padding: 8px 12px; font-size: 11px; letter-spacing: 0.05em; white-space: nowrap; } .quickfill-select { flex: 1 1 auto; background: var(--bg); border: 1px solid var(--border); color: var(--ink); padding: 8px 10px; font-family: 'Cormorant Garamond', serif; font-size: 13px; border-radius: 2px; min-width: 0; } .quickfill-select:focus { outline: none; border-color: var(--gold); } @media (max-width: 480px) { .datetime-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 6px; } .nowBtn { grid-column: 1 / 3; width: 100%; height: auto; padding: 9px 0; } .location-quickfill { flex-direction: column; gap: 6px; } .quickfill-btn { width: 100%; padding: 9px 0; } } /* ===================================================================== PLANETARY HOURS MODAL ===================================================================== */ .ph-controls { margin-bottom: 18px; padding: 12px; background: var(--bg-elev); border: 1px solid var(--border-dim); border-radius: 2px; } .ph-controls-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; } .ph-controls-row:last-child { margin-bottom: 0; } .ph-date-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em; flex: 1 1 220px; min-width: 0; } .ph-date-label input[type="datetime-local"] { background: var(--bg); border: 1px solid var(--border); color: var(--ink); padding: 8px 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; border-radius: 2px; color-scheme: dark; } .ph-controls .btn { font-size: 11px; padding: 8px 12px; letter-spacing: 0.05em; } .ph-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; padding: 12px; background: rgba(212, 175, 55, 0.05); border-left: 2px solid var(--gold); border-radius: 2px; } .ph-summary-item { display: flex; flex-direction: column; gap: 3px; } .ph-summary-label { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.15em; color: var(--ink-dim); text-transform: uppercase; } .ph-summary-value { font-size: 14px; color: var(--ink); font-family: 'Cormorant Garamond', serif; } .ph-summary-dim { color: var(--ink-dim); font-size: 12px; font-style: italic; } .ph-summary-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; } .ph-table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-bottom: 12px; } .ph-table thead th { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.15em; color: var(--ink-dim); text-transform: uppercase; text-align: left; padding: 8px 6px 6px; border-bottom: 1px solid var(--border-dim); } .ph-table td { padding: 6px; border-bottom: 1px dotted var(--border-dim); } .ph-row.ph-night td.ph-time, .ph-row.ph-night td.ph-idx { color: var(--ink-dim); } .ph-row.ph-current { background: rgba(212, 175, 55, 0.12); outline: 1px solid var(--gold); outline-offset: -1px; } .ph-row.ph-current td { color: var(--gold-bright); font-weight: 500; } .ph-idx { width: 32px; color: var(--ink-dim); text-align: right; } .ph-time { width: 120px; } .ph-period { width: 40px; text-align: center; } .ph-planet { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; font-size: 13px; margin-right: 4px; vertical-align: middle; } .ph-planet-Saturn { background: rgba(100, 80, 100, 0.25); color: #c0a0c0; } .ph-planet-Jupiter { background: rgba(100, 130, 200, 0.25); color: #88a5dd; } .ph-planet-Mars { background: rgba(180, 60, 60, 0.25); color: #e08080; } .ph-planet-Sun { background: rgba(212, 175, 55, 0.25); color: var(--gold-bright); } .ph-planet-Venus { background: rgba(130, 170, 100, 0.25); color: #a8c888; } .ph-planet-Mercury { background: rgba(140, 140, 180, 0.25); color: #b0b0e0; } .ph-planet-Moon { background: rgba(220, 220, 230, 0.25); color: #dde; } .ph-note { font-size: 11px; font-style: italic; color: var(--ink-dim); line-height: 1.55; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-dim); } @media (max-width: 520px) { .ph-summary { grid-template-columns: 1fr; } .ph-time { width: 110px; font-size: 11px; } .ph-controls-row { flex-direction: column; align-items: stretch; } .ph-controls-row .btn { width: 100%; } } /* ===================================================================== PLANETARY HOURS MODAL ===================================================================== */ .ph-controls { padding: 12px; margin-bottom: 16px; background: var(--bg-elev); border: 1px solid var(--border-dim); border-radius: 2px; } .ph-controls-row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-bottom: 8px; } .ph-controls-row:last-child { margin-bottom: 0; } .ph-date-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em; flex: 1 1 auto; min-width: 180px; } .ph-date-label input[type="datetime-local"] { background: var(--bg); border: 1px solid var(--border); color: var(--ink); padding: 7px 9px; font-family: 'JetBrains Mono', monospace; font-size: 12px; border-radius: 2px; color-scheme: dark; } .ph-controls .btn { font-size: 11px; padding: 8px 14px; letter-spacing: 0.05em; white-space: nowrap; } .ph-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 14px 0 18px; padding: 12px 14px; background: rgba(212, 175, 55, 0.05); border-left: 2px solid var(--gold); border-radius: 2px; } .ph-summary-item { display: flex; flex-direction: column; gap: 3px; } .ph-summary-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); } .ph-summary-value { font-family: 'Cormorant Garamond', serif; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 6px; } .ph-summary-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; } .ph-summary-dim { color: var(--ink-dim); font-size: 12px; font-style: italic; } .ph-planet { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; } .ph-planet-Sun { background: rgba(215,120,40,0.20); color: #d78828; } .ph-planet-Moon { background: rgba(180,180,200,0.20); color: #b4b4c8; } .ph-planet-Mars { background: rgba(160,50,60,0.20); color: #c85560; } .ph-planet-Mercury { background: rgba(140,170,120,0.20); color: #9ab87d; } .ph-planet-Jupiter { background: rgba(200,160,80,0.20); color: #d4af55; } .ph-planet-Venus { background: rgba(100,150,170,0.20); color: #7eb0c8; } .ph-planet-Saturn { background: rgba(90,80,120,0.25); color: #9187b8; } .ph-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .ph-table th, .ph-table td { padding: 6px 8px; text-align: left; border-bottom: 1px dotted var(--border-dim); } .ph-table th { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); font-weight: 500; } .ph-idx { font-family: 'JetBrains Mono', monospace; color: var(--ink-dim); width: 32px; } .ph-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink); } .ph-ruler { font-family: 'Cormorant Garamond', serif; font-size: 14px; } .ph-period { width: 30px; text-align: center; font-size: 14px; color: var(--ink-dim); } .ph-row.ph-night { background: rgba(90, 80, 120, 0.04); } .ph-row.ph-current { background: rgba(212, 175, 55, 0.15) !important; outline: 1px solid var(--gold); outline-offset: -1px; } .ph-row.ph-current .ph-idx { color: var(--gold-bright); font-weight: 600; } .ph-row.ph-current .ph-time { color: var(--gold-bright); } .ph-note { font-size: 11px; font-style: italic; color: var(--ink-dim); line-height: 1.55; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border-dim); } @media (max-width: 480px) { .ph-summary { grid-template-columns: 1fr; gap: 6px 0; } .ph-controls-row { flex-direction: column; align-items: stretch; } .ph-controls .btn { width: 100%; } } /* ===================================================================== ZR DRILL-DOWN (click L1 → L2 → L3 → L4) ===================================================================== */ /* Clickable rows in the ZR tables — pointer cursor + hover hint that the row is interactive. Selected row gets a distinct gold left edge. */ .p5-clickable .zr-clickable { cursor: pointer; transition: background 0.08s ease; } .p5-clickable .zr-clickable:hover { background: rgba(212, 175, 55, 0.06); } .p5-clickable .zr-clickable:focus-visible { outline: 1px dashed var(--gold); outline-offset: -2px; } .p5-clickable .zr-clickable.zr-focused { background: rgba(212, 175, 55, 0.18) !important; box-shadow: inset 3px 0 0 var(--gold-bright); } .p5-clickable .zr-clickable.zr-focused td { color: var(--gold-bright); } /* Current period (today) — shown via existing .current class. When it coincides with the focused row, gold-bright wins over plain current gold styling via specificity above. */ /* Empty-state hint when a deeper level has no parent selected */ .zr-empty { text-align: center; font-style: italic; color: var(--ink-dim); padding: 14px !important; font-size: 12px; } /* Focused-period swatch in the legend */ .swatch.focused { background: rgba(212, 175, 55, 0.18); box-shadow: inset 3px 0 0 var(--gold-bright); } /* Note: the print-mode rules that hide the on-screen ZR tables and keep only the all-lots print block already live in the main @media print block (search for `#tab-zr .p5-tabs`). No duplicate needed. */ /* ===================================================================== FIXED STARS CARD + VARGA OUTER-PLANETS TOGGLE ===================================================================== */ .varga-controls { background: var(--bg-card); border: 1px solid var(--border); padding: 10px 14px; margin-bottom: 12px; border-radius: 2px; } .varga-controls .toggle-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); } .varga-controls .toggle-row input[type="checkbox"] { width: 14px; height: 14px; } .varga-controls-note { font-size: 10px; font-style: italic; color: var(--ink-dim); line-height: 1.55; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-dim); } .fixed-stars-print-only { display: none; } .fixed-stars-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 2px; padding: 14px 16px; margin-top: 12px; position: relative; } .fixed-stars-card::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); opacity: 0.15; pointer-events: none; border-radius: 2px; } .fixed-stars-card h4 { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.18em; color: var(--gold); text-transform: uppercase; font-weight: 500; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-dim); } .fixed-stars-intro, .fixed-stars-empty { font-size: 12px; color: var(--ink-dim); font-style: italic; line-height: 1.55; margin-bottom: 10px; } .fixed-star-row { padding: 10px 10px 10px 14px; margin-bottom: 6px; background: var(--bg-card); border: 1px solid var(--border-dim); border-left: 2px solid var(--gold); border-radius: 2px; } .fixed-star-name { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.1em; color: var(--gold-bright); font-weight: 500; margin-bottom: 4px; } .fixed-star-contact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink); margin-bottom: 4px; } .fixed-star-planet { color: var(--ink); font-weight: 500; } .fixed-star-arrow { color: var(--gold); } .fixed-star-loc { color: var(--ink-dim); } .fixed-star-orb { color: var(--ink-dim); margin-left: auto; font-size: 11px; } .fixed-star-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim); margin-bottom: 4px; } .fixed-star-nature { color: var(--ink); } .fixed-star-latwarn { color: var(--copper); font-style: italic; } .fixed-star-note { font-size: 12px; color: var(--ink-dim); line-height: 1.55; font-style: italic; } .fixed-stars-footnote { font-size: 10px; font-style: italic; color: var(--ink-dim); margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-dim); line-height: 1.55; } @media print { .fixed-stars-print-only { display: block !important; } .ni-yogas-toggle { display: none !important; } .fixed-stars-card { page-break-inside: avoid; background: #ffffff !important; border: 0.5pt solid #999 !important; } .fixed-stars-card::before { display: none !important; } .fixed-star-row { background: #fafaf5 !important; border: 0.3pt solid #bbb !important; border-left: 1pt solid #999 !important; padding: 5pt 8pt; } } /* ===================================================================== THEME PICKER A small segmented control in the footer letting the user choose Classic / Dark / Light. The choice is stored in localStorage and applied to on every load. ===================================================================== */ .theme-picker { display: inline-flex; gap: 2px; background: var(--bg-elev); border: 1px solid var(--border); padding: 2px; border-radius: 4px; margin: 8px 0; } .theme-picker .theme-opt { background: transparent; border: none; color: var(--ink-dim); font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; cursor: pointer; border-radius: 2px; transition: background 0.12s, color 0.12s; } .theme-picker .theme-opt:hover { color: var(--ink); background: var(--bg-card); } .theme-picker .theme-opt[aria-pressed="true"] { background: var(--accent); color: var(--bg); } /* Small utility for future phases */ .hidden { display: none !important; } /* ===================================================================== PHASE 5 — MODERN OBSERVABILITY SHELL --------------------------------------------------------------------- All rules in this block are scoped to: [data-interface-mode="modern"] (or its descendants) so they have ZERO effect in Traditional mode (the default). Tokens use the --modern-* namespace and never override existing --bg, --accent, --ink, --fire/earth/air/water tokens. The chart SVG renderers continue to read from the existing tokens, so SVG output is identical in both modes. Architecture note (Phase 5 / 5.1): The Phase 4 plan proposed a single .app-shell-modern wrapper around body content. Phase 5 instead implements modern chrome as fixed-position siblings under (.modern-sidebar / .modern-topbar / .modern-overview) while leaving the existing

, .container,