@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..700&display=swap');


/* Astronomicon font for astrological glyphs */
@font-face {
    font-family: 'Astronomicon';
    src: url('Astronomicon.woff2') format('woff2'),
         url('Astronomicon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/* Utility class for astrological glyphs */
.astro-glyph {
    font-family: 'Astronomicon', sans-serif;
}


/* Global Color Variables - Change these to update colors throughout the app */
:root {
    /* ── Sparkline bar brightness/saturation modulation ──
       dL and dS are fractional HSL deltas (0–1 range).
       Bright values boost color near exactitude; dim values reduce it near max orb. */
    --sparkline-bright-l-max: 0.28;  /* max lightness boost at exactitude */
    --sparkline-bright-s-max: 0.25;  /* max saturation boost at exactitude */
    --sparkline-dim-l-max:    0.15;  /* max lightness reduction near max orb */
    --sparkline-dim-s-max:    0.25;  /* max saturation reduction near max orb */

    --box-bg-color: rgba(17, 19, 28, 0.4);
    --box-border-color: #35434d;
    --button-bg-color: #3f4a64;
    --button-border-color: #557189;
    --button-hover-color: #656b71;
    --button-active-color: #141e26;
    --global-text-color: #b6c6d1;
    --global-text-color2: #d3dfe6;
    --natal-glyph-bg: var(--button-bg-color);
    --natal-glyph-border: #2cb3e0;
    --natal-glyph-color: #ffffff;
    --transit-glyph-bg: #2a4a3a;
    --tooltip-background-color: #222222;
    --global-shadow-opacity: 0.5;
    --global-glow-opacity: 0;
    --app-ground-color: #232529;

    /* ── Input field background (zoom box, recenter field) ── */
    --input-bg-color: #2c3347;

    /* ── Wheel ring fills ── */
    --wheel-bg-color: #0b1120;
    --wheel-ring-fill: #090e1787;
    --wheel-natal-ring-fill: #343e57ff;
    --wheel-sign-ring-fill: #19212eff;
    --wheel-house-ring-fill: #151a21ff;

    /* ── Wheel border gradient (opaque — inner rings) ── */
    --wheel-border-opaque-0:   rgb(182, 209, 236);
    --wheel-border-opaque-10:  rgb(138, 179, 204);
    --wheel-border-opaque-25:  rgb(100, 151, 176);
    --wheel-border-opaque-40:  rgb(64, 111, 142);
    --wheel-border-opaque-50:  rgb(46, 89, 110);
    --wheel-border-opaque-60:  rgb(52, 95, 124);
    --wheel-border-opaque-75:  rgb(72, 119, 148);
    --wheel-border-opaque-90:  rgb(106, 151, 176);
    --wheel-border-opaque-100: rgb(146, 179, 204);

    /* ── Wheel border gradient (transparent — outer ring) ── */
    --wheel-border-alpha-0:   rgba(130, 170, 195, calc(0.85 * var(--global-glow-opacity)));
    --wheel-border-alpha-10:  rgba(110, 160, 185, calc(0.8 * var(--global-glow-opacity)));
    --wheel-border-alpha-25:  rgba(90, 150, 175, calc(0.75 * var(--global-glow-opacity)));
    --wheel-border-alpha-40:  rgba(70, 130, 160, calc(0.7 * var(--global-glow-opacity)));
    --wheel-border-alpha-50:  rgba(60, 120, 145, calc(0.65 * var(--global-glow-opacity)));
    --wheel-border-alpha-60:  rgba(65, 125, 155, calc(0.65 * var(--global-glow-opacity)));
    --wheel-border-alpha-75:  rgba(75, 135, 165, calc(0.7 * var(--global-glow-opacity)));
    --wheel-border-alpha-90:  rgba(95, 150, 175, calc(0.75 * var(--global-glow-opacity)));
    --wheel-border-alpha-100: rgba(115, 160, 185, calc(0.8 * var(--global-glow-opacity)));

    /* ── Wheel hover highlight color ── */
    --wheel-hover-color: #8ec5e0;

    /* ── Wheel planet hover/active ring colors (isHovered state) ── */
    --wheel-planet-hover-fill: rgba(60, 75, 95, 0.7);
    --wheel-planet-hover-stroke: rgba(115, 178, 198, 1);
    --wheel-glyph-hover-bg: rgba(60, 75, 95, 0.7);

    /* ── Wheel: birth-date marker and mouse highlight lines ── */
    --wheel-birth-marker-color: rgba(236, 221, 176, 0.9);
    --wheel-mouse-highlight-color: rgba(255, 255, 255, 0.6);

    /* ── Graph: vertical cursor line (drawn under crosshair on mousemove) ── */
    --graph-cursor-line-color: rgba(255, 255, 255, 0.6);

    /* ── Aspect line center junction ring fill color ── */
    --wheel-aspect-center-ring-color: #000000;

    /* ── Aspect line fallback color (when no aspect color is set) ── */
    --wheel-aspect-fallback-color: #b1c1d0;

    /* ── Box shadow variables ── */
    --box-shadow-inset-top:    rgba(255, 255, 255, 0.15);
    --box-shadow-inset-left:   rgba(255, 255, 255, 0.1);
    --box-shadow-inset-bottom: rgba(0, 0, 0, 0.15);
    --box-shadow-inset-right:  rgba(0, 0, 0, 0.3);
    --box-shadow-outer-glow:   rgba(77, 88, 96, calc(0.3 * var(--global-glow-opacity)));
    --box-glow-white:          rgba(255, 255, 255, 0.9);
    --box-glow-near-white:     rgba(240, 250, 255, 0.9);
    --box-glow-light-blue:     rgba(200, 240, 255, 0.6);
    --box-glow-mid-blue:       rgba(150, 200, 255, 0.3);
    --transit-glyph-border: #a7f2c5;
    --transit-glyph-color: #ffffff;
    --synastry-glyph-color: #d4a97a;  /* warm amber — set freely for chart B planet glyphs */
    --wheel-label-color: #4c89a7;
    --wheel-ring-stroke: #5e84aa;
    --wheel-divider-line: rgba(84, 112, 139, 0.9);
    --graph-line-width: 2;
    --graph-fill-opacity: 0.7;

    /* ── Aspect colors: GRAPH LINES ── */
    --aspect-conjunction-graph-color: #7d3e24;
    --aspect-opposition-graph-color: #285a77;
    --aspect-square-graph-color: #482580;
    --aspect-trine-graph-color: #1f7856;
    --aspect-sextile-graph-color: #7c741e;
    
    --aspect-conjunction-line-top: #ffe8df;
    --aspect-opposition-line-top: #e0f1ff;
    --aspect-square-line-top: #eee1ff;
    --aspect-trine-line-top: #e2fff5;
    --aspect-sextile-line-top: #fcfce8; 

    /* ── Aspect colors: GRAPH FILL GRADIENTS (rgba — control opacity here) ── */
    --aspect-conjunction-fill-bottom: rgb(98, 14, 13);
    --aspect-opposition-fill-bottom: rgb(31, 52, 106);
    --aspect-square-fill-bottom: rgb(111, 26, 106); 
    --aspect-trine-fill-bottom: rgb(10, 89, 109);
    --aspect-sextile-fill-bottom: rgb(113, 60, 27);

    --aspect-conjunction-fill-mid: rgb(181, 122, 90);
    --aspect-opposition-fill-mid: rgb(85, 119, 176);
    --aspect-square-fill-mid: rgb(138, 85, 181);
    --aspect-trine-fill-mid: rgb(81, 161, 166);
    --aspect-sextile-fill-mid: rgb(170, 165, 85);
    
    --aspect-conjunction-fill-top: rgb(253, 204, 174);
    --aspect-opposition-fill-top: rgb(176, 225, 255);
    --aspect-square-fill-top: rgb(198, 166, 247);
    --aspect-trine-fill-top: rgb(165, 249, 216);
    --aspect-sextile-fill-top: rgb(248, 244, 166); 

    /* ── Aspect colors: SPARKLINE BARS ── */
    --aspect-conjunction-sparkline-color: #954d33;
    --aspect-opposition-sparkline-color: #2e5892;
    --aspect-square-sparkline-color: #583491;
    --aspect-trine-sparkline-color: #318766;
    --aspect-sextile-sparkline-color: #978f32;

    /* ── Aspect colors: WHEEL ASPECT LINES ── */
    --aspect-conjunction-wheel-color: #9d5743;
    --aspect-opposition-wheel-color: #69bff1;
    --aspect-square-wheel-color: #9f69f6;
    --aspect-trine-wheel-color: #439d68;
    --aspect-sextile-wheel-color: #9d8e43;
    /* ── Natal configuration aspect line colors ── */
    --natal-tsquare-line-color: #e8403a;
    --natal-grandtrine-line-color: #c8e030;
    --natal-yod-line-color: #ffffff;
    --natal-conjoppo-line-color: #ff9940;
    --natal-grandcross-line-color: #e8403a;
    --natal-conjsquare-line-color: #9f69f6;   /* matches square wheel color */
    --natal-conjtrine-line-color:  #439d68;   /* matches trine wheel color  */

    /* ── Modal ── */
    --modal-fade-duration: 0.3s;
    --modal-backdrop-opacity: 1;
    --modal-switch-opacity: 1;

    /* ── Modal positioning: startup (centered on landing overlay) ── */
    --modal-startup-top: 100px;
    --modal-startup-left: 50%;
    --modal-startup-transform: translateX(-50%);

    /* ── Modal positioning: switch-chart (aligned to app layout) ── */
    --modal-switch-top: 24px;
    --modal-switch-left: 418px;

    /* ── Graph vertical grid lines ── */
    --graph-grid-line-color: rgba(221, 221, 221, 0.25);

    /* ── Modal backgrounds ── */
    --modal-bg-color: rgb(21, 24, 29);
    --modal-startup-bg-color: rgb(24, 25, 31);

    /* ── Modal / settings text ── */
    --modal-title-color: #ffffff;
    --modal-section-title-color: #b6c6d1;
    --modal-section-note-color: rgba(182, 198, 209, 0.6);
    --modal-label-color: #b6c6d1;
    --modal-sublabel-color: rgba(182, 198, 209, 0.55);
    --modal-dirty-indicator-color: #e8a44a;

    /* ── Settings section background / border ── */
    --settings-section-bg: rgba(255, 255, 255, 0.06);
    --settings-section-border: rgba(85, 113, 137, 0.3);

    /* ── Settings tab buttons ── */
    --settings-tab-btn-bg: rgba(63, 74, 100, 0.4);
    --settings-tab-btn-color: rgba(182, 198, 209, 0.7);
    --settings-tab-btn-hover-bg: rgba(63, 74, 100, 0.8);
    --settings-tab-btn-active-border: #27aaba;

    /* ── Slider / checkbox accent ── */
    --slider-track-bg: rgba(85, 113, 137, 0.5);
    --slider-thumb-color: #7ec8e3;
    --slider-thumb-hover-color: #a8dff0;
    --slider-value-color: #7ec8e3;
    --checkbox-checked-bg: #3f7ea6;
    --checkbox-checked-border: #7ec8e3;

    /* ── Framework dropdown ── */
    --framework-display-bg: rgba(255, 255, 255, 0.07);
    --framework-options-bg: rgb(19, 31, 42);

    /* ── Bio textarea ── */
    --bio-textarea-bg: rgba(255, 255, 255, 0.06);
    --bio-textarea-border: rgba(85, 113, 137, 0.45);
    --bio-textarea-focus-bg: rgba(255, 255, 255, 0.09);
    --bio-textarea-focus-border: rgba(126, 200, 227, 0.5);
    --bio-textarea-placeholder-color: rgba(182, 198, 209, 0.5);
}


#settings-graph-fill-slider {
    margin-bottom:20px;
    margin-top:18px;
}

/* App scaling wrapper – renders at fixed design size, then CSS transform shrinks it */
#app-scale-outer {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;  /* must beat landing-overlay so modal is visible above it */
}
#app-scale {
    transform-origin: top center;
    width: 1800px;
    min-width: 1800px;
    max-width: 1800px;
    height: 1000px;
    min-height: 1000px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--app-ground-color);
    background-image: none;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--global-text-color);
    min-height: 100vh;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: background-color 0.4s ease;
}

body.light-theme {
    /* ── Sparkline bar brightness/saturation modulation (light theme) ──
       Adjust independently from the dark theme values above. */
    --sparkline-bright-l-max: 0.18;
    --sparkline-bright-s-max: 0.45;
    --sparkline-dim-l-max:    0.1;
    --sparkline-dim-s-max:    0.15;

 --input-bg-color: #cad3db;
 --box-border-color: #b7c6d0;
 --tooltip-background-color: #d7e7f6;
 --global-text-color: #242728;   
 --button-bg-color: #e2e6eb;
 --global-text-color2: #2c3744;
 --button-hover-color: #9ccee0;
 --button-active-color: #c1e5fa;
 --box-bg-color: rgba(255, 255, 254, 0.75);
 --natal-glyph-border: #000000;
 --natal-glyph-color: #020202;
 --transit-glyph-bg: #d9ede3;
 --transit-glyph-border: #000000;
 --transit-glyph-color: #000000;
 --synastry-glyph-color: #6c4b28;
 --wheel-label-color: #4c89a7;
 --wheel-ring-stroke: #191b1e;
 --wheel-divider-line: rgba(77, 104, 133, 0.9);
 --wheel-bg-color: #feffff;
 --wheel-ring-fill: #eff3f9;
 --wheel-natal-ring-fill: rgb(250, 251, 253);
 --wheel-sign-ring-fill: rgb(219, 225, 235);
 --wheel-house-ring-fill: rgb(227, 234, 243);
 --global-shadow-opacity: 0.0;
  --global-glow-opacity: 0.99;
 --app-ground-color: #edecea;

 --box-shadow-inset-top:    rgba(255, 255, 255, 0);
 --box-shadow-inset-left:   rgba(255, 255, 255, 0);
 --box-shadow-inset-bottom: rgba(0, 0, 0, 0);
 --box-shadow-inset-right:  rgba(0, 0, 0, 0);
 --box-shadow-outer-glow:   rgba(77, 88, 96, 0);
 --box-glow-white:          rgba(255, 255, 255, 0.009);
 --box-glow-near-white:     rgba(240, 250, 255, 0.009);
 --box-glow-light-blue:     rgba(200, 240, 255, 0.006);
 --box-glow-mid-blue:       rgba(150, 200, 255, 0.003);

 /* ── Graph grid lines ── */
 --graph-grid-line-color: rgba(43, 43, 43, 0.32);

 /* ── Modal / settings ── */
 --modal-bg-color: rgb(232, 233, 234);
 --modal-startup-bg-color: rgba(240, 244, 248, 0.95);
 --modal-title-color: #1a2530;
 --modal-section-title-color: #2a4a6a;
 --modal-section-note-color: rgba(42, 74, 106, 0.7);
 --modal-label-color: #2a4a6a;
 --modal-sublabel-color: rgba(42, 74, 106, 0.6);
 --modal-dirty-indicator-color: #c07020;
 --settings-section-bg: rgba(255, 255, 255, 0.75);
 --settings-section-border: rgba(80, 130, 170, 0.5);
 --settings-tab-btn-bg: var(--button-bg-color);
 --settings-tab-btn-color: #2a4a6a;
 --settings-tab-btn-hover-bg: rgba(160, 190, 215, 0.8);
 --settings-tab-btn-active-border: #1a7a9a;
 --slider-track-bg: rgba(80, 130, 170, 0.35);
 --slider-thumb-color: #3269a1;
 --slider-thumb-hover-color: #2896d6;
 --slider-value-color: #1a6080;
 --checkbox-checked-bg: #2a7aa0;
 --checkbox-checked-border: #1a5a80;
 --framework-display-bg: rgba(255, 255, 255, 0.5);
 --framework-options-bg: rgb(210, 225, 238);
 --bio-textarea-bg: rgba(255, 255, 255, 0.45);
 --bio-textarea-border: rgba(80, 130, 170, 0.4);
 --bio-textarea-focus-bg: rgba(255, 255, 255, 0.65);
 --bio-textarea-focus-border: rgba(40, 120, 170, 0.6);
 --button-border-color: #7aaabf;

--aspect-conjunction-fill-bottom: rgb(147, 45, 45);
--aspect-opposition-fill-bottom: rgb(44, 49, 149);
--aspect-square-fill-bottom: rgb(160, 42, 156);
--aspect-trine-fill-bottom: rgb(41, 141, 152);
--aspect-sextile-fill-bottom: rgb(169, 99, 62);

--aspect-conjunction-fill-mid: rgb(211, 133, 99);
--aspect-opposition-fill-mid: rgb(98, 166, 205);
--aspect-square-fill-mid: rgb(145, 95, 202);
--aspect-trine-fill-mid: rgb(103, 213, 149);
--aspect-sextile-fill-mid: rgb(214, 203, 99);

--aspect-conjunction-fill-top: rgb(251, 175, 143);
--aspect-opposition-fill-top: rgb(143, 212, 252);
--aspect-square-fill-top: rgb(194, 142, 253);
--aspect-trine-fill-top: rgb(139, 255, 186);
--aspect-sextile-fill-top: rgb(253, 243, 130);

--aspect-conjunction-graph-color: #ffd5c3;
--aspect-opposition-graph-color: #c3e8ff;
--aspect-square-graph-color: #dcbdff;
--aspect-trine-graph-color: #bbffd6;
--aspect-sextile-graph-color: #fff8ad;

--aspect-conjunction-line-top: #b65e39;
--aspect-opposition-line-top: #4285bc;
--aspect-square-line-top: #7c43bc;
--aspect-trine-line-top: #3dc875;
--aspect-sextile-line-top: #bdb33d;

/* ── Aspect colors: SPARKLINE BARS ── */
--aspect-conjunction-sparkline-color: #d66238;
--aspect-opposition-sparkline-color: #3293d9;
--aspect-square-sparkline-color: #7538d7;
--aspect-trine-sparkline-color: #33cb91;
--aspect-sextile-sparkline-color: #d2c42b;

/* ── Aspect colors: WHEEL ASPECT LINES ── */
--aspect-conjunction-wheel-color: #793320;
--aspect-opposition-wheel-color: #2776a4;
--aspect-square-wheel-color: #582ba1;
--aspect-trine-wheel-color: #209953;
--aspect-sextile-wheel-color: #94811e;

/* ── Natal configuration aspect line colors ── */
--natal-tsquare-line-color: #e8403a;
--natal-grandtrine-line-color: #c8e030;
--natal-yod-line-color: #ffffff;
--natal-conjoppo-line-color: #ff9940;
--natal-grandcross-line-color: #e8403a;
--natal-conjsquare-line-color: #9f69f6;   /* matches square wheel color */
--natal-conjtrine-line-color:  #439d68;   /* matches trine wheel color  */


 /* ── Light theme: cursor/highlight line colors ── */
 --graph-cursor-line-color: rgba(60, 80, 120, 0.55);
 --wheel-birth-marker-color: rgba(20, 50, 120, 0.85);

 /* ── Light theme: wheel aspect center ring ── */
 --wheel-aspect-center-ring-color: #ffffff;

 /* ── Light theme: bio textarea placeholder ── */
 --bio-textarea-placeholder-color: rgba(42, 74, 106, 0.45);

 /* ── Light theme: natal glyph bg (active/selected in wheel) ── */
 --natal-glyph-bg: var(--button-bg-color);

 /* ── Light theme: glyph hover background ── */
 --wheel-glyph-hover-bg: #57aaf5;
}

/* Body background is now the solid app-ground-color; no image fade needed.
   The landing-overlay handles the AstroBG display during load. */

html {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.container {
    max-width: 1800px;
    width: 1800px;
    margin: 0;
    padding: 0px 30px 20px 0px;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.7s ease;
}

/* App is ready — reveal the UI */
body.bg-visible .container {
    opacity: 1;
}

/* Graph title area — sits above graph-container, outside the box */
.graph-title-area {
    text-align: center;
    padding: 4px 0 0 0;
    position: relative;
    z-index: 1;
    height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* (Removed: the graph-title-area::after rule is no longer needed now that
   the title area lives outside graph-container.) */

.graph-main-title {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-style: normal;
    color: var(--global-text-color2);
    /*text-shadow: 0 0px 12px rgba(0, 0, 0, 0.3);*/
    margin: 0;
    line-height: 1.2;
}

.graph-window-info {
    font-size: 15px;
    font-weight: 200;
    color: var(--global-text-color);
    text-align: center;
    margin-top: 1px;
    min-height: 1em;
    margin-bottom: 1px;
}

/* Main layout */
.main-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    gap: 10px;
    align-items: start;
    justify-items: center;
    padding: 20px 20px 20px 20px;
    position: relative;
}

.left-panel {
    grid-column: 1;
    grid-row: 1;
    width: 342px;
    flex-shrink: 0;
    margin-right: 0px;
    margin-left: 32px;
    margin-top: 1px; /* Panels now reach to top of screen */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-self: start;
}
.left-panel-top {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
    margin-top: -10px;
    width: 80%;
    align-self: center;
}
/* Wheel moves to left side below theme controls */
/* Wrapper for graph */
.center-panel {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    justify-self: center;
    margin-left: -480px; /* Moved 100px further left from -450px to make room for right panel */
    margin-top: 6px;
}

.right-panel {
    position: absolute;
    top: 25px; /* Panels reach to top of screen */
    right: 38px;
    width: 490px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between transit-mode-box and active-transits */
}

/* Transit view tabs - inside the box */
/* ── Timeline view dimensions (editable) ── */
:root {
    --timeline-button-width: 72px;
    --timeline-row-height: 26px;
    --timeline-glyph-size: 20px;
    --timeline-button-gap: 6px;
    --timeline-group-spacing: 14px;
    --timeline-grid-color: rgba(61, 102, 128, 0.743);
    --timeline-grid-opacity: 1;
    --timeline-hline-width: 1px;
    --timeline-vline-width: 1px;
    --timeline-hline-color: var(--timeline-grid-color);
    --timeline-vline-color: var(--timeline-grid-color);
}

/* Timeline row button */
.timeline-transit-btn {
    padding: 0 1px;
    margin: 0;
    flex-shrink: 0;
}

.timeline-transit-btn .astro-glyph {
    font-size: var(--timeline-glyph-size);
}

/* Timeline row layout */
.timeline-row {
    display: flex;
    align-items: flex-end;
    height: var(--timeline-row-height);
    margin-bottom: 2px;
}

/* Timeline grid lines — adjust color and width via CSS variables */
.timeline-hline,
.timeline-vline {
    opacity: var(--timeline-grid-opacity, 1);
}
.timeline-hline {
    height: var(--timeline-hline-width, 1px) !important;
    background: var(--timeline-hline-color, var(--timeline-grid-color)) !important;
}
.timeline-vline {
    width: var(--timeline-vline-width, 1px) !important;
    background: var(--timeline-vline-color, var(--timeline-grid-color)) !important;
}

/* Timeline date labels */
.timeline-date-label {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; 
    color: var(--global-text-color);
}

/* Planet selectors — h3 label and dropdown inline */
.planet-selector {
    background: var(--box-bg-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 0;
    box-sizing: border-box;
}

.planet-selector h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--global-text-color2);
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
    width: 55%;
    text-align: right;
    padding-right: 15px;
    box-sizing: border-box;
}

/* No extra margin when stacked */
.planet-selector:nth-child(2) {
    margin-left: 0;
    margin-top: 0;
}

/* Theme Description Controls */
/* Transit Mode Box — styled like other UI boxes */
.transit-mode-box {
    background: var(--box-bg-color);
    border-radius: 8px;
    padding: 10px 14px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;

    /* Match the enhanced border from other boxes */
    border: 1px solid var(--box-border-color);
    position: relative;
    background-clip: padding-box;
}

.transit-mode-label {
    display: none; /* Label removed; keeping rule for backward compatibility */
}

/* ── Natal Aspects Panel ── */
.natal-aspects-panel {
    padding: 6px 0 10px;
    width: 100%;
    overflow-y: auto;
    max-height: calc(895px - 60px);
    scrollbar-width: thin;
    scrollbar-color: rgba(140, 170, 200, 0.3) transparent;
}
.natal-aspects-panel::-webkit-scrollbar {
    width: 6px;
}
.natal-aspects-panel::-webkit-scrollbar-track {
    background: transparent;
}
.natal-aspects-panel::-webkit-scrollbar-thumb {
    background: rgba(140, 170, 200, 0.25);
    border-radius: 3px;
}

/* Holistic natal report button */
.natal-holistic-btn {
    font-size: 17px !important;
    padding: 7px 18px !important;
    letter-spacing: 0.03em;
    opacity: 0.85;
    white-space: nowrap;
    margin-top:30px;
}
.natal-holistic-btn:hover {
    opacity: 1;
}

/* Section label separating pairs from config section */
.natal-section-label {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: var(--global-text-color);
    opacity: 1;
     /*letter-spacing: 0.08em;
   text-transform: uppercase;*/
    margin-bottom: 19px;
}

.natal-aspects-title {
    text-align: center;
    font-size: 19px;
    font-weight: 600;
    color: var(--global-text-color2);
    padding: 4px 0 2px;
    margin-bottom: 30px;
    /*margin-left: -30px;  match existing timeline title offset */
}

.natal-aspects-section {
    margin-bottom: 4px;
}

/* ── Named configuration group (T-Square, Grand Trine, etc.) ──────────────
   Outer wrapper: controls padding BETWEEN groups.
   Inner rows: header-row (main btn) and pairs-row (sub-buttons).
   This lets you tune inter-group vs intra-group spacing independently.     */
.aspect-group-wrap {
    padding: 10px 3px 8px;   /* vertical padding between groups */
    border-radius: 6px;
    margin-bottom: 4px;
}

.aspect-group-wrap.group-named {
    padding: 8px 3px 6px;
}

/* Row 1: main button, centered */
.aspect-group-header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

/* Row 2: sub-pair buttons, centered and wrapping into multiple rows */
.aspect-group-pairs-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
}

/* Legacy standalone row (individual pairs not in a named config) */
.aspect-group-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 11px 3px;
    border-radius: 5px;
    margin-bottom: 2px;
}

.aspect-group-row.group-named {
    gap: 5px;
}

/* Two-column centered grid for lone aspect pair buttons */
.natal-pairs-grid {
    width: 70%;
    margin: 53px auto 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    justify-items: stretch;
}

/* Two-column grid for complex aspect group buttons.
   Same column-gap as natal-pairs-grid. Buttons auto-size to their label.
   Left column right-aligns its button; right column left-aligns its button.
   An odd last item spans both columns and centers. */
.natal-configs-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* Left column (odd children) → right-aligned */
.natal-configs-grid > .aspect-group-wrap:nth-child(odd) {
    display: flex;
    justify-content: flex-end;
    padding: 0;
}

/* Right column (even children) → left-aligned */
.natal-configs-grid > .aspect-group-wrap:nth-child(even) {
    display: flex;
    justify-content: flex-start;
    padding: 0;
}

/* If the last item is odd (i.e. unpaired), span both columns and center it */
.natal-configs-grid > .aspect-group-wrap:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-content: center;
}

/* Config main buttons inside the configs grid: auto-width, 20px h-padding */
.natal-configs-grid .natal-config-main-btn {
    padding: 0 20px !important;
    width: auto;
}

/* ── Natal aspect button letter-spacing ─────────────────────────────────
   Tune --natal-btn-letter-spacing to adjust spacing between characters
   (glyphs and text) inside all natal aspect buttons.                      */
:root {
    --natal-btn-letter-spacing: 0.055em; /* ~10% wider than default 0.05em */
}

/* Natal aspect buttons — #1: 21px glyphs, 28px height */
.natal-aspect-btn {
    height: 28px;
    padding: 0 12px !important;
    line-height: 28px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    letter-spacing: var(--natal-btn-letter-spacing);
}

/* Inside the two-column grid, stretch buttons to fill the cell */
.natal-pairs-grid .natal-aspect-btn {
    width: 100%;
    display: flex;
    padding: 0 5px !important;  /* tighter padding so gap between columns is more visible */
}

.natal-aspect-btn .astro-glyph {
    font-size: 21px;      /* #1: was 20px */
}

.natal-aspect-btn .natal-asc-label {
    font-size: 15px;      /* +1px */
}

/* Sub-pair buttons — same sizing as main */
.natal-pair-btn {
    height: 28px;
    padding: 0 12px !important;
    line-height: 28px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    opacity: 1;
    letter-spacing: var(--natal-btn-letter-spacing);
}

.natal-pair-btn .astro-glyph {
    font-size: 21px;      /* #1: was 20px */
}

.natal-pair-btn .natal-asc-label {
    font-size: 15px;      /* +1px */
}

.natal-pair-btn:hover {
    opacity: 1;
}

/* Config type inline label inside main button — plain text, no badge box */
.natal-config-inline-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--global-text-color);
    white-space: nowrap;
    margin-left: 5px;
}

/* The centered main button for a named config (T-Square header, etc.) */
.natal-config-main-btn {
    padding: 0 18px !important; /* slightly wider horizontal padding for the header row */
}

/* Dash between planet glyphs inside config button */
.natal-glyph-dash {
    font-size: 13px;
    color: var(--global-text-color);
    opacity: 0.65;
}

/* Parentheses in ConjOppo group label */
.natal-conj-paren {
    font-size: 15px;
    color: var(--global-text-color);
    opacity: 0.55;
    font-family: inherit;
}

/* ASC label (Ascendant — not in Astronomicon font) */
.natal-asc-label {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;      /* +1px */
    font-weight: 400;
    color: var(--global-text-color2);
    letter-spacing: -0.5px;
    vertical-align: middle;
}

/* Orb badge — #6: +2px (was 13px → 15px) */
.aspect-orb-badge {
    font-size: 15px;
    color: var(--global-text-color);
    margin-left: 7px;
}

/* Divider between importance tiers — #5: hidden */
.aspect-tier-divider {
    display: none;
}

/* No-birth-time notice */
.natal-no-asc-notice {
    font-size: 12px;
    color: rgba(182, 198, 209, 0.55);
    text-align: center;
    padding: 2px 8px 6px;
    font-style: italic;
}


/* ── Synastry Secondary Chart Panel (inside .active-transits box) ── */
#synastry-chart-panel {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 10px;
}

.synastry-chart-b-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: rgba(116, 129, 148, 0.1);
    border: 1px solid rgba(126, 136, 151, 0.3);
    border-radius: 6px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.synastry-chart-b-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--global-text-color2);
    text-align: center;
}

.synastry-chart-b-details {
    font-size: 14px;
    font-weight: 200;
    color: var(--global-text-color);
    text-align: center;
    line-height: 1.4;
}

/* Row that holds the select button, centered so button doesn't stretch */
.synastry-select-row {
    display: flex;
    justify-content: center;
}

.synastry-select-btn {
    width: auto;
    padding: 5px 16px;
    font-size: 14px;
    color: var(--global-text-color);
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
    margin-bottom: 45px;
}

.synastry-select-btn:hover {
    background: var(--button-hover-color);
    border-color: var(--box-border-color);
}

/* Synastry sub-view toggle row */
.synastry-view-toggle-row {
    display: flex;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
}

.synastry-view-toggle-btn {
    height: 30px;
    padding: 5px 10px 5px 10px;
    font-size: 15px;
    font-weight: 500;
    /*letter-spacing: 0.03em;*/
    color: var(--global-text-color);
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.synastry-view-toggle-btn:first-child {
    border-radius: 5px 0 0 5px;
    border-right: none;
}

.synastry-view-toggle-btn:last-child {
    border-radius: 0 5px 5px 0;
}

.synastry-view-toggle-btn:hover {
    background: var(--button-hover-color);
    border-color: var(--box-border-color);
}

.synastry-view-toggle-btn:focus {
    outline: none;
}

.synastry-view-toggle-btn.active {
    background: var(--button-active-color);
    border-color: #27aaba;
    color: var(--global-text-color);
    font-weight: bold;
}

.synastry-view-toggle-btn:first-child.active {
    border-right: none;
}

.synastry-view-toggle-btn:last-child.active {
    border-left: 1px solid #27aaba;
}

/* Comprehensive synastry report button */
.synastry-comprehensive-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 5px 24px;
    font-size: 14px;
}


.synastry-aspects-panel {
    padding: 6px 0 10px;
    width: 100%;
    overflow-y: auto;
    /* Height budget: 865px box; panel header ~55px; synastry chart-b section ~100px;
       view-toggle row ~50px; 5px bottom gap */
    max-height: calc(865px - 210px);
    scrollbar-width: thin;
    scrollbar-color: rgba(140, 170, 200, 0.3) transparent;
}
.synastry-aspects-panel::-webkit-scrollbar { width: 6px; }
.synastry-aspects-panel::-webkit-scrollbar-track { background: transparent; }
.synastry-aspects-panel::-webkit-scrollbar-thumb {
    background: rgba(140, 170, 200, 0.25);
    border-radius: 3px;
}

.synastry-aspects-title {
    text-align: center;
    font-size: 19px;
    font-weight: 600;
    color: var(--global-text-color2);
    padding: 14px 0 2px;
    margin-bottom: 50px;
}

/* Two-column grid matching natal-pairs-grid exactly */
.synastry-pairs-grid {
    width: calc(100% - 40px);
    margin: 0 auto 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 18px;
    justify-items: stretch;
}

/* Inside synastry grid, stretch buttons to fill cell (same as natal) */
.synastry-pairs-grid .natal-aspect-btn {
    width: 100%;
    display: flex;
    padding: 0 5px !important;
}


/* Gradient border for transit-mode-box */


.transit-mode-btn {
    flex: 1;
    padding: 6px 6px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    font-size: 14px;
    color: var(--global-text-color);
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.transit-mode-btn:hover {
    background: var(--button-hover-color);
    border-color: var(--box-border-color);
}

.transit-mode-btn:focus {
    outline: none;
}

.transit-mode-btn:focus-visible {
    outline: none;
}

.transit-mode-btn.active {
    background: var(--button-active-color);
    border-color: #27aaba;
    color: var(--global-text-color);
    font-weight: bold;
}

.theme-controls {
    background: var(--box-bg-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 15px;
    padding-top: 16px;
    width: 80%; /* Narrowed to 65% of left panel */
    align-self: center;
    margin-top: -5px;
}

.theme-controls-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 27px;
}

.theme-controls .theme-controls-header h3 {
    font-size: 17px;
    color: var(--global-text-color2);
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.3;
    font-weight: 600;
}

.theme-controls h3 {
    font-size: 17px;
    color: var(--global-text-color2);
    margin-bottom: 27px;
    text-align: center;
    line-height: 1.3;
    font-weight: 600;
}

/* ON / OFF toggle pair */
.llm-toggle-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left:5px;
}

.llm-toggle-btn {
    height: 21px;
    padding: 0 7px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--global-text-color);
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.llm-toggle-btn:first-child {
    border-radius: 5px 0 0 5px;
    border-right: none;
}

.llm-toggle-btn:last-child {
    border-radius: 0 5px 5px 0;
}

.llm-toggle-btn:hover {
    background: var(--button-hover-color);
    border-color: var(--box-border-color);
}

.llm-toggle-btn:focus {
    outline: none;
}

.llm-toggle-btn.active {
    background: var(--button-active-color);
    border-color: #27aaba;
    color: var(--global-text-color);
    font-weight: bold;
}

/* Restore right border on ON button when OFF is active */
.llm-toggle-btn:first-child.active {
    border-right: none;
}
.llm-toggle-btn:last-child.active {
    border-left: 1px solid #27aaba;
}

.slider-group {
    margin-bottom: 10px; /* Reduced by 5px from 15px */
}

.slider-group:last-child {
    margin-bottom: 12;
}

.slider-group-second {
    margin-top: 24px; /* Reduced by 5px from 27px (extra 12px padding + reduced 10px base) */
}

.framework-group {
    margin-top: 27px;
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select-display {
    padding: 7px 10px 7px 10px;
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    color: var(--global-text-color);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60%;
    margin: 0 auto;
}

.custom-select-display:hover {
    background: rgba(255, 255, 255, 0.15);
}

.custom-select-arrow {
    font-size: 8px;
    color: #888;
    transform: rotate(180deg);
    transition: transform 0.2s;
}

.custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(0deg);
}

.custom-select-options {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    margin-bottom: 2px;
    background: #2a3450;
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    overflow: hidden;
    z-index: 200;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

.custom-select-wrapper.open .custom-select-options {
    display: block;
}

.custom-select-option {
    padding: 8px 10px 8px 20px;
    color: var(--global-text-color);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.custom-select-option:hover {
    background: rgba(100, 150, 255, 0.25);
}

.custom-select-option.selected {
    background: rgba(100, 150, 255, 0.15);
}

.slider-title {
    display: block;
    font-size: 14px;
    color: var(--modal-label-color);
    margin-bottom: 8px;
    text-align: center;
}

.slider-title span {
    color: var(--slider-value-color);
    font-weight: 500;
}

.theme-controls .slider-track {
    width: 100%;
    height: 4px;
    background: var(--slider-track-bg);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.planet-dropdown {
    width: 40%;
    flex-shrink: 0;
    padding: 4px 10px;
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    color: var(--global-text-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* When a real planet is selected (not placeholder) */
.planet-dropdown.planet-selected {
    font-size: 14px;
    font-weight: normal;
    padding-left: 10px;
}

.planet-dropdown:hover {
    border-color: var(--box-border-color);
}

.planet-dropdown:focus {
    outline: none;
    border-color: #27aaba;
}

.planet-dropdown option {
    background: var(--button-bg-color);
    color: var(--global-text-color);
    font-size: 14px;
    font-weight: normal;
    padding-left: 10px;
}

/* Graph container */
.graph-container {
    background-image: url('BG1a.jpg');
    background-size: cover;
    background-position: center;
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    position: relative;
    display: inline-block;
    background-clip: padding-box;
    
}

/* Gradient border for graph-container */

/* Ensure graph content is above the gradient border */


/* Date labels above graph */
.date-labels {
    position: relative;
    width: 806px;
    height: 120px;
    padding: 35px 5px 3px 0px;
    font-size: 9px;
    color: var(--global-text-color);
    background: rgba(0, 0, 0, 0.005);
}

.date-label {
    position: absolute;
    bottom: 8px; /* Moved up by 5px (was 3px) */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    text-align: center;
    white-space: nowrap;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; 
    font-weight: 400;
    font-size: 13.5px; /* Increased by 2px from 11px */
    line-height: 1.2;
    letter-spacing: -0.01em;
}

#transit-canvas {
    display: block;
    cursor: crosshair;
    position: relative;
    z-index: 10;
    margin-left: 0; /* Graph curve starts at x=0 on canvas, flush with left edge of container */
}

/* Info display */
.info-display {
    background: var(--box-bg-color);
    border: 1px solid var(--box-border-color);
    border-radius: 6px;
    padding: 12px 10px;
    min-height: 50px;
    width: 816px;
    cursor: pointer;
}

.info-display.asking {
    cursor: default;
}

.info-question-input {
    background: transparent;
    border: none;
    color: var(--global-text-color);
    font-size: 15px;
    width: 100%;
    padding: 4px 0;
    outline: none;
    font-family: inherit;
}

.info-question-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 16px;
}

/* Graph controls row - single row under graph */
.graph-controls-row {
    display: grid;
    grid-template-columns: auto 30px auto auto auto 175px auto 25px 25px;
    gap: 5px;
    width: 826px;
    margin-top: -3px;
    margin-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}

/* Graph-specific control buttons */
.graph-control-btn {
    padding: 6px 5px;
    white-space: nowrap;
}

.zoom-level-box {
    background: var(--input-bg-color);
    border: 1px solid var(--button-border-color);
    color: var(--global-text-color);
    padding: 4px 2px;
    border-radius: 4px;
    font-size: 15px;
    font-family: 'Inter', system-ui, sans-serif;
    width: 30px;
    min-width: 30px;
    flex-shrink: 0;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
    text-align: center;
    -moz-appearance: textfield;
}

.zoom-level-box::-webkit-inner-spin-button,
.zoom-level-box::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.zoom-level-box:focus {
    border-color: rgba(255, 255, 255, 0.5);
}

.recenter-input {
    background: var(--input-bg-color);
    border: 1px solid var(--button-border-color);
    color: var(--global-text-color);
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    width: 175px;
    min-width: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.recenter-input::placeholder {
    color: var(--global-text-color2);
    font-size: 13px;
}

.recenter-input:focus {
    border-color: var(--global-text-color2);
}

.recenter-btn {
    font-size: 15px !important;
    padding: 6px 10px !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Peak navigation buttons in the graph controls row */
.peak-nav-global-btn {
    width: 25px !important;
    min-width: 25px !important;
    padding: 0 !important;
    font-size: 11px !important;
    flex-shrink: 0;
}
.peak-nav-global-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

#info-text {
    color: var(--global-text-color);
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    letter-spacing: -0.4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Transit Themes Display (frame stays fixed) */
.themes-display {
    background: var(--box-bg-color);
    border: 1px solid var(--box-border-color);
    border-radius: 6px;
    width: 816px;
    height: 310px; /* Reduced from 387px to account for graph controls row moved above */
    overflow: visible;
    scrollbar-width: none;
    margin-top: 40px;              /* <-- key change */
    box-sizing: border-box;  /* good hygiene */
}

.themes-display::-webkit-scrollbar {
  display: none;
}

#themes-text {
    color: var(--global-text-color);
    font-size: 17px;
    line-height: 1.5;
    font-weight: 300; 

    height: calc(100% - 10px);
    margin: 3px 1px 1px 1px;
    overflow-y: auto;
    overflow-x: hidden;

    padding-top: 9px;
    padding-left: 20px;
    padding-right: 24px;
    padding-bottom: 4px;
    box-sizing: border-box;
}

/* Custom scrollbar for themes text (WebKit browsers) */
#themes-text::-webkit-scrollbar {
    width: 12px;
}

#themes-text::-webkit-scrollbar-track {
    background: #000000;
    border-radius: 6px;
}

#themes-text::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 6px;
    border: 2px solid #000000;
}

#themes-text::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* Firefox scrollbar */
#themes-text {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #000000;
}

#themes-text p {
    margin: 0 0 15px 0;
    text-align: justify;
}

#themes-text .welcome-text {
    font-weight: 200;
}

#themes-text .welcome-text p {
    text-align: center;
}

#themes-text p:last-child {
    margin-bottom: 0;
}

#themes-text strong {
    color: var(--global-text-color);
    font-weight: 600;
}

/* Slider track and handle styles */
.slider-track {
    width: 100%;
    height: 4px;
    background: var(--slider-track-bg);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

/* No tick marks on main panel sliders */
.slider-track::before {
    content: none;
}

.slider-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--slider-thumb-color);
    border: none;
    border-radius: 50%;
    top: -4px;
    left: 0;
    transform: translateX(-50%);
    cursor: grab;
    transition: background 0.15s;
    z-index: 1;
}

.slider-handle:hover {
    background: var(--slider-thumb-hover-color);
}

.slider-handle:active {
    cursor: grabbing;
    background: var(--slider-thumb-hover-color);
}

/* Active Transits Display */
.active-transits {
    background: var(--box-bg-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 6px 30px 15px 15px;
    width: 100%;
    height: 865px; /* Adjusted: panels now reach top of screen */
    overflow: hidden;
    position: relative;
}

/* Scrollable timeline content */
#timeline-transits-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(895px - 50px);
    margin-right: -29px;
    padding-right: 34px;
    padding-left: 10px;
    margin-top: 10px;
}

/* Fixed header (title + date labels) — stays at top, not scrollable */
.timeline-fixed-header {
    flex-shrink: 0;
    padding-bottom: 0px;
}

/* Scrollable area below header — content clips at top edge */
.timeline-scroll-area {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(140, 170, 200, 0.3) transparent;
    margin-left:35px;
    padding-bottom: 60px;
}
.active-transits > .transit-view::-webkit-scrollbar {
    width: 8px;
}
.active-transits > .transit-view::-webkit-scrollbar-track {
    background: transparent;
}
.active-transits > .transit-view::-webkit-scrollbar-thumb {
    background: rgba(140, 170, 200, 0.3);
    border-radius: 4px;
}
.active-transits > .transit-view::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 170, 200, 0.5);
}

.active-transits h3 {
    font-size: 18px; /* Increased by 1px from 15px */
    font-weight: 600;
    color: var(--global-text-color2);
    margin: 0 0 25px 0; /* Increased bottom margin by 10px */
    text-align: center;
    padding-top: 8px;
    padding-bottom: 0px;
}

.active-transits-list {
    display: grid;
    grid-template-columns: auto repeat(5, 1fr); /* label + 5 button columns */
    gap: 6px;
    align-items: center;
}

.transit-group-label {
    font-size: 16px;
    color: var(--global-text-color);
    text-align: right;
    padding-right: 6px;
    white-space: nowrap;
    min-height: 1px; /* ensure empty labels still occupy space */
}


.transit-btn {
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    color: var(--global-text-color);
    padding: 0.5px 2px; /* Reduced vertical padding from 4px to 1px (3px less) */
    border-radius: 4px;
    cursor: pointer;
    font-size: 13.5px; /* Increased by 1px from 13px */
    transition: all 0.2s;
    text-align: center;
    white-space: normal; /* Allow wrapping if needed */
    overflow: visible; /* Show all content */
    line-height: 1.1; /* Tighten line height */
}

.transit-btn:hover {
    background: var(--button-hover-color);
    border-color: var(--box-border-color);
}

.transit-btn.two-toned:hover {
    background: linear-gradient(90deg, #8a9096 0%, #8a9096 50%, #555a5e 50%, #555a5e 100%) !important;
}

.transit-btn.active {
    background: var(--button-active-color);
    border-color: #27aaba; /* Bright cyan border for active button */
    font-weight: bold;
}

.transit-btn.two-toned.active {
    background: linear-gradient(90deg, #5d6266 0%, #5d6266 50%, #2d3033 50%, #2d3033 100%) !important;
    border-color: #27aaba; /* Maintain cyan border for active two-toned */
}


/* Global tooltip (JS-driven; avoids overflow clipping) */
#global-tooltip {
    position: fixed;
    top: -9999px;
    left: -9999px;
    transform: none;
opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
    z-index: 99999;

    background: var(--tooltip-background-color);
    color: var(--global-text-color);
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 15px;

    border: 1px solid rgba(130, 170, 195, 0.45);
    /*box-shadow:
        0 0 10px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);*/
}

#global-tooltip.visible {
    opacity: 1;
}

/* Chart wheel */
.wheel-wrapper {
    position: relative;
    width: 386px;
    height: 386px;
    margin: -19px 0 8px 0;
    transform: translateX(-12px);
    overflow: visible;
    /* Outer glow matching UI boxes — drop-shadow follows the circular canvas edge */
    /* filter: drop-shadow(0 0 20px rgba(99, 114, 124, var(--global-glow-opacity)));
    No border-radius — the canvas draws its own circles.
       border-radius: 50% clips transit glyphs that extend beyond the ring edge. */
}

/* Glint at 1:30 position on wheel — positioned on the outer ring edge */

#wheel-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    overflow: visible;
    /* No border-radius or box-shadow — the canvas draws its own outer ring.
       A CSS box-shadow here creates a second ring outside the drawn one. */
}

/* Natal planet glyph colors (read by canvas renderer via CSS custom properties) */
/* --natal-glyph-bg, --natal-glyph-border, --natal-glyph-color defined in :root */


.natal-marker {
     background: radial-gradient(
        circle at center,
        #5ed564 0%,
        #4a884e 45%,
        #396f40 75%
    );
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    border: 1px solid #313131;
}

.transit-marker {
    background: radial-gradient(
        circle at center,
        #3ecfd2 0%,
        #377479 75%
    );
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    border: 1px solid #313131;
}

#chart-wheel {
    display: block;
}

/* Controls - legacy (controls box removed, buttons now in graph-controls-row) */

.control-btn {
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    color: var(--global-text-color);
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    width: auto;
    transition: all 0.2s;
}

.control-btn:hover {
    background: var(--button-hover-color); /* Lighter shade */
    border-color: var(--box-border-color);
    color: #ffffff;
}

.control-btn:active {
    background: var(--button-active-color); /* Darker shade for selected */
}

.control-btn:active {
    transform: scale(0.98);
}

/* Legend */
.legend {
    background: var(--box-bg-color);
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    padding: 15px;
}

.legend h3 {
    font-size: 14px;
    color: var(--global-text-color);
    margin: 0 0 15px 0;
    text-align: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--global-text-color);
}

.legend-item:last-child {
    margin-bottom: 0; /* Remove margin on last item */
}

.legend-color {
    width: 30px;
    height: 3px;
    border-radius: 2px;
}

/* Responsive adjustments removed — scaling handles small viewports */

/* Loading welcome message — visible during cold-cache URL loads */
/* ── Light theme graph background overlay (BG2a.jpg) ── */
.light-graph-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('BG2a.jpg') center / cover no-repeat;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;
    border-radius: inherit;
}
.light-graph-bg.hidden {
    opacity: 0;
}


.light-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('AstroBG2.jpg') center / cover no-repeat;
    z-index: 0;              /* sits above the default body bg, below landing-overlay */
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.light-bg-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ── Landing overlay: fullscreen AstroBG shown immediately on startup ── */
.landing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('AstroBG.jpg') center / cover no-repeat;
    z-index: 1;              /* below app-scale-outer (z:2); raised to 3 by landing-url-mode */
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--modal-fade-duration) ease;
}
/* URL load path: overlay already at z-index 500, above container */
.landing-overlay.landing-url-mode {
    z-index: 3;  /* URL-load path: cover app-scale-outer (z:2) while chart loads */
}
.landing-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Kepler quote below the modal on the landing overlay */
.intro-quote-text {
    position: absolute;
    bottom: 23%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(12px, 1.8vw, 21px);
    font-weight: 200;
    color: #b6c6d1 ;
    letter-spacing: 0.3px;
    margin: 0;
    pointer-events: none;
    line-height: 1.65;
}

/* Welcome message shown on landing overlay during URL load path */
.landing-welcome-text {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}
.landing-welcome-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(20px, 3vw, 34px);
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 14px;
    letter-spacing: 0.5px;
}
.landing-welcome-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(13px, 1.5vw, 18px);
    font-weight: 200;
    color: #b6c6d1;
    margin: 0;
    letter-spacing: 0.3px;
}

/* Loading state */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Tooltips and interactions */
button:focus {
    outline: none;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    transition: opacity 120ms ease;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Profile Button - positioned relative to right panel */
.profile-button {
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    margin-bottom: 20px;
    width: 100%;
}

.profile-button:hover {
    background: var(--button-hover-color);
    transform: scale(1.02);
}

/* Modal — inside #app-scale, scales with CSS transform automatically */
.modal {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    opacity: 0;
    transition: opacity var(--modal-fade-duration) ease;
}
.modal.modal-visible {
    opacity: 1;
}

/* Startup modal: same transparent backdrop as default */
.modal.modal-startup {
    background: transparent;
}
.modal.modal-startup .modal-content {
    background: var(--modal-startup-bg-color);
}

/* Force startup modal to always render in dark theme, regardless of body theme setting.
   The user can choose light vs dark in this modal — the UI applies their choice AFTER the
   modal closes. These overrides shadow every body.light-theme variable that would otherwise
   bleed through into the startup modal's contents. */
body.light-theme .modal.modal-startup {
    --modal-startup-bg-color: rgb(24, 25, 31);
    --modal-bg-color: rgb(21, 24, 29);
    --modal-title-color: #ffffff;
    --modal-section-title-color: #b6c6d1;
    --modal-section-note-color: rgba(182, 198, 209, 0.6);
    --modal-label-color: #b6c6d1;
    --modal-sublabel-color: rgba(182, 198, 209, 0.55);
    --modal-dirty-indicator-color: #e8a44a;
    --global-text-color: #c8d8e4;
    --global-text-color2: #dce8f0;
    --box-border-color: #303d46;
    --button-bg-color: #1e2b36;
    --button-border-color: #557189;
    --button-hover-color: #2a3f52;
    --input-bg-color: #1a2530;
    --settings-section-bg: rgba(255, 255, 255, 0.05);
    --settings-section-border: rgba(85, 113, 137, 0.3);
    --settings-tab-btn-bg: #1e2b36;
    --settings-tab-btn-color: #b6c6d1;
    --settings-tab-btn-hover-bg: rgba(50, 80, 110, 0.8);
    --settings-tab-btn-active-border: #27aaba;
    --slider-track-bg: rgba(85, 113, 137, 0.35);
    --slider-thumb-color: #4a7fa8;
    --slider-thumb-hover-color: #5eb8e0;
    --slider-value-color: #7ec8e3;
    --checkbox-checked-bg: #1a7a9a;
    --checkbox-checked-border: #7ec8e3;
    --framework-display-bg: rgba(255, 255, 255, 0.08);
    --framework-options-bg: rgb(20, 28, 38);
    --bio-textarea-bg: rgba(255, 255, 255, 0.05);
    --bio-textarea-border: rgba(85, 113, 137, 0.45);
    --bio-textarea-focus-bg: rgba(255, 255, 255, 0.09);
    --bio-textarea-focus-border: rgba(126, 200, 227, 0.5);
}

.modal-content {
    background: var(--modal-bg-color);
    margin: 3% auto;
    padding: 17px;
    border: 1px solid var(--box-border-color);
    border-radius: 8px;
    width: 900px;
    max-width: 90%;
    max-height: 90vh;
    overflow: visible;
    position: relative;
    background-clip: padding-box;
}

/* Gradient border for modal-content */

/* Ensure modal content is above the gradient border */


/* Switch-chart modal: fully opaque content */
.modal:not(.modal-startup) .modal-content {
    --modal-content-bg-opacity: var(--modal-switch-opacity);
}

/* "Welcome to" line above the title */
.modal-welcome-to {
    font-family: 'Inter', system-ui, sans-serif;
    color: #b6c6d1;
    text-align: center;
    font-size: 19px;
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 0px;
    letter-spacing: 0.5px;
}

/* Modal welcome title (h2) */
.modal-welcome-title {
    font-family: "Cinzel", serif;
    color: var(--global-text-color2);
    font-weight: 400;
    text-align: center;
    margin-top: 0;
    margin-bottom: 38px;
    font-size: 38px;
}

/* Modal subtitle (h3) */
.modal-subtitle {
    color: var(--global-text-color2);
    margin-top: 0;
    margin-bottom: 52px;    /* space below subtitle, before name fields */
    text-align: center;
    font-size: 21px;
    font-weight: 300;
    transition: color 0.3s ease;
}
.modal-subtitle.subtitle-error {
    color: #ff6b6b;
}
.modal-subtitle.subtitle-info {
    color: #7ec8e3;
}

.modal-content h3:not(.modal-subtitle) {
    color: #aaaaaa;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 200;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
}

.close-modal:hover {
    color: #fff;
}

.profile-form label {
    color: var(--global-text-color);
    font-size: 14px;
    margin-bottom: 5px;
    display: inline-block;
    min-width: 80px;
    text-align: right; /* Right align labels */
}

.profile-form input[type="text"] {
    width: 140px; /* Increased from 100px by 40% */
    padding: 8px 10px;
    margin-bottom: 12px;
    margin-left: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    box-sizing: border-box;
}

.profile-form input[type="text"]#profile-name {
    width: 280px; /* Double width for name field */
}

.profile-form input[type="text"]:focus {
    outline: none;
    border-color: rgba(100, 150, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

.planet-inputs {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.planet-input-row {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.planet-input-row label {
    font-weight: bold;
    color: #99ccff;
    min-width: 70px;
}

.save-button {
    width: 20%;
    padding: 10px;
    margin-top: auto;
    align-self: center;
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    color: var(--global-text-color);
    font-size: 15px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s;
}

.save-button:hover {
    background: var(--button-hover-color);
    border-color: var(--box-border-color);
    color: #ffffff;
}

.save-button:active {
    background: var(--button-active-color);
    transform: scale(0.98);
}

/* Profile preset buttons */
.profile-presets {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Left panel button row — two buttons side by side */
.left-panel-btn-row {
    display: flex;
    gap: 8px;
    width: 80%;
    margin-top: -22px;
    margin-bottom: 26px;
}

.new-chart-btn {
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    border-radius: 6px;
    color: var(--global-text-color);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    flex: 1;
}

.new-chart-btn:hover {
    background: var(--button-hover-color);
}

/* User Info Box — styled like other UI boxes */
.user-info-box {
    background: var(--box-bg-color);
    border-radius: 8px;
    padding: 9px 18px 12px 18px;
    width: 80%;
    margin: 8px auto 18px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;

    /* Match the enhanced border from other boxes */
    border: 1px solid var(--box-border-color);
    position: relative;
    background-clip: padding-box;
}

.user-info-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--global-text-color2);
    text-align: center;
    min-height: 1.2em; /* Maintain height when empty */
}

.user-info-details {
    font-size: 14px;
    font-weight: 200;
    color: var(--global-text-color);
    text-align: center;
    margin-bottom: 2px;
    min-height: 1.2em; /* Maintain height when empty */
}

/* Gradient border for user-info-box */


/* Birth Info Modal content — fixed design-space coordinates inside #app-scale.
   Scales automatically with the CSS transform. No JS positioning needed. */
.birth-modal-content {
    position: absolute;
    /* Default: switch-chart positioning (aligned to app layout) */
    top: var(--modal-switch-top);
    left: var(--modal-switch-left);
    width: 826px;
    height: 516px;
    margin: 0;
    max-width: none;
    max-height: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Startup modal: centered on landing overlay */
.modal-startup .birth-modal-content {
    top: var(--modal-startup-top);
    left: var(--modal-startup-left);
    transform: var(--modal-startup-transform);
}

.birth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;               /* ← ADJUST: gap between form sections */
    flex: 1; /* Fill remaining height in the modal */
}

/* Phase 1 name fields: centered, 60% width */
.modal-phase-name-fields {
    width: 60%;
    margin: 0 auto;          /* ← ADJUST: top/bottom margin around name fields block */
}

/* In phase 1 (name only), button sits right after the name fields */
.birth-form.phase-name .save-button {
    margin-top: 23px;       /* ← ADJUST: space above Submit button in phase 1 */
}

/* Submit button transition for sliding down in phase 2 */
.birth-form .save-button {
    transition: margin-top 0.6s ease;
}

/* In phase 2, push button to bottom (with 15px upward offset) */
.birth-form:not(.phase-name) .save-button {
    margin-top: auto;
    margin-bottom: 15px;    /* ← ADJUST: pull submit button up from bottom in phase 2 */
}


/* Birth info fields inner wrapper: 80% width, centered */
.birth-fields-inner {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;               /* ← ADJUST: space between date row and place row */
}

/* Phase 2 birth fields: animate in */
#modal-phase-birth {
    animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.birth-form .form-row {
    display: flex;
    gap: 16px;
}

.birth-form .form-field {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.birth-form .form-field label {
    color: var(--global-text-color);
    font-size: 13px;
    margin-bottom: 5px;
}

.birth-form .form-field .optional-label {
    color: #888;
    font-size: 11px;
}

.birth-form input[type="text"],
.birth-form input[type="number"],
.birth-form select {
    padding: 9px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    color: var(--global-text-color);
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
}

.birth-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.birth-form select option {
    background: #2a3450;
    color: #ffffff;
}

.birth-form input:focus,
.birth-form select:focus {
    outline: none;
    border-color: rgba(100, 150, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

/* Hide number input spinners */
.birth-form input[type="number"]::-webkit-inner-spin-button,
.birth-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.birth-form input[type="number"] {
    -moz-appearance: textfield;
}

.birth-form .form-row-date .form-field:first-child {
    flex: 1.3; /* Month dropdown needs a bit more room */
}
.birth-form .form-row-date .form-field:nth-child(4) {
    flex: 1.1; /* Time field */
}


/* Enhanced border effects for UI boxes - gradient borders with corner glints */
.planet-selector,
.theme-controls,
.active-transits,
.legend,
.info-display,
.themes-display {
    /* Override existing border for gradient effect */
    border: 1px solid var(--box-border-color);
    position: relative;
    background-clip: padding-box;
    
}

/* Gradient border using pseudo-element */


/* Title markers - inline indicators next to planet selector headings */

/* Animated loading indicator for LLM generation */
.llm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    gap: 16px;
}

.llm-loading-ripple {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
}

.llm-loading-ripple div {
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.3rem solid #27aaba;
    animation: llm-ripple 1.5s ease-out infinite;
}

.llm-loading-ripple div:nth-child(2) {
    animation-delay: 0.5s;
}

.llm-loading-text {
    color: var(--global-text-color);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.5;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

@keyframes llm-ripple {
    0% {
        transform: scale(0.1);
        opacity: 1;
    }
    70% {
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}/* ── Graph Fill Opacity Slider (inside .graph-title-area) ── */


/* ═══════════════════════════════════════════════════════════
   SETTINGS MODAL
   ═══════════════════════════════════════════════════════════ */

.settings-modal-content {
    height: 943px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 30px 28px 24px;
}

/* Single bold title */
.settings-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 23px;
    font-weight: 700;
    color: var(--global-text-color2);
    text-align: center;
    margin: 0 0 48px 0;
    letter-spacing: 0.01em;
}

/* Two-column body */
.settings-body {
    display: flex;
    gap: 24px;
    flex: 1;
    overflow: hidden;
}

.settings-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 26px;
    overflow: hidden;
}

/* Section container */
.settings-section {
    background: var(--settings-section-bg);
    border: 1px solid var(--settings-section-border);
    border-radius: 7px;
    padding: 16px 18px;
}

/* Greyed-out "coming soon" sections */
.settings-section-coming-soon {
    opacity: 0.45;
    pointer-events: none;
}

.settings-section-title {
    color: var(--modal-section-title-color);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 13px;
    text-align: center;
}

.settings-section-note {
    color: var(--modal-section-note-color);
    font-size: 14px;
    margin: -8px 0 19px 0;
    font-style: italic;
    line-height: 1.5;
}

/* Section header row (title + toggle side by side) */
.settings-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 19px;
}
.settings-section-header .settings-section-title {
    margin-bottom: 0;
    text-align: center;
    width: 100%;
}

/* Tab toggle buttons */
.settings-tab-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--button-border-color);
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Full-width toggle: stretches to fill section width */
.settings-tab-toggle-full {
    width: 100%;
    margin-bottom: 14px;
}

.settings-tab-toggle-full .settings-tab-btn {
    flex: 1;
    text-align: center;
}

.settings-tab-btn {
    background: var(--settings-tab-btn-bg);
    border: none;
    border-right: 1px solid var(--button-border-color);
    color: var(--settings-tab-btn-color);
    font-size: 15px;
    font-family: 'Inter', system-ui, sans-serif;
    padding: 8px 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.settings-tab-btn:last-child {
    border-right: none;
}

.settings-tab-btn:hover:not([disabled]) {
    background: var(--settings-tab-btn-hover-bg);
    color: var(--global-text-color2);
}

.settings-tab-btn.active {
    background: var(--button-active-color);
    color: var(--modal-title-color);
    border-right-color: var(--settings-tab-btn-active-border);
    font-weight: bold;
}

.settings-tab-btn[disabled] {
    cursor: default;
}

/* Orb slider rows */
.orb-sliders {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.orb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.orb-label {
    color: var(--global-text-color);
    font-size: 14px;
    font-family: 'Inter', system-ui, sans-serif;
    min-width: 96px;
    flex-shrink: 0;
}

.orb-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--slider-track-bg);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.orb-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--slider-thumb-color);
    cursor: pointer;
    border: none;
    /*box-shadow: 0 0 5px var(--slider-thumb-color);*/
    transition: background 0.15s;
}

.orb-range::-webkit-slider-thumb:hover {
    background: var(--slider-thumb-hover-color);
}

.orb-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slider-thumb-color);
    cursor: pointer;
    border: none;
}

.orb-value {
    color: var(--slider-value-color);
    font-size: 14px;
    font-family: 'Inter', system-ui, sans-serif;
    min-width: 30px;
    text-align: right;
    flex-shrink: 0;
}

/* Framework row inside AI settings */
.settings-framework-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    position: relative;
}

.settings-framework-wrapper {
    flex: 1;
    position: relative;
}

.settings-framework-display {
    background: var(--button-bg-color) !important;
    border: 1px solid var(--button-border-color) !important;
    border-radius: 5px;
    padding: 8px 12px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--global-text-color);
    font-size: 14px;
}

.settings-framework-options {
    display: none;
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    border-radius: 5px;
    position: absolute;
    z-index: 100;
    width: 100%;
    bottom: 100%;
    margin-bottom: 3px;
}

.settings-framework-wrapper.open .settings-framework-options {
    display: block;
}

.settings-framework-options .custom-select-option {
    padding: 9px 12px;
    font-size: 14px;
    color: var(--global-text-color);
    cursor: pointer;
}

.settings-framework-options .custom-select-option:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.settings-framework-options .custom-select-option.selected {
    color: #7ec8e3;
}

/* Checkboxes for minor bodies */
.settings-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.settings-checkbox-label {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--global-text-color);
    font-size: 14px;
    font-family: 'Inter', system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
}

.settings-checkbox-label-disabled {
    opacity: 0.45;
    cursor: default;
}

.settings-checkbox {
    display: none;
}

.settings-checkbox-custom {
    width: 16px;
    height: 16px;
    border: 1px solid var(--button-border-color);
    border-radius: 3px;
    background: var(--settings-section-bg);
    flex-shrink: 0;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}

.settings-checkbox:checked + .settings-checkbox-custom {
    background: var(--checkbox-checked-bg);
    border-color: var(--checkbox-checked-border);
}


.settings-checkbox-disabled {
    opacity: 0.35;
}

.settings-coming-soon {
    color: rgba(182,198,209,0.55);
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    margin-left: 4px;
}

/* Bio textarea section — full width, below columns */
.settings-bio-section {
    padding: 0;
    margin-top: 18px;
    flex-shrink: 0;
}

.settings-bio-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--modal-label-color);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 8px;
    justify-content: center;
    margin-top: -15px;
}

.settings-bio-sublabel {
    color: var(--modal-sublabel-color);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-style: italic;
    flex: initial;
}

.settings-dirty-indicator {
    color: var(--modal-dirty-indicator-color);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-style: normal;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: auto;
}

.settings-dirty-indicator.visible {
    opacity: 1;
}

.settings-bio-textarea {
    width: 100%;
    background: var(--bio-textarea-bg);
    border: 1px solid var(--bio-textarea-border);
    border-radius: 6px;
    color: var(--global-text-color);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 300;
    padding: 12px 14px;
    resize: none;
    box-sizing: border-box;
    outline: none;
    line-height: 1.6;
    transition: border-color 0.2s;
}

.settings-bio-textarea:focus {
    border-color: var(--bio-textarea-focus-border);
    background: var(--bio-textarea-focus-bg);
}

.settings-bio-textarea::placeholder {
    color: var(--bio-textarea-placeholder-color);
    font-style: italic;
}

/* Footer */
.settings-footer {
    display: flex;
    justify-content: center;
    padding: 18px 0 0;
    flex-shrink: 0;
}

.settings-save-btn {
    min-width: 180px;
    font-size: 15px;
    padding: 10px 24px;
}




/* ═══════════════════════════════════════════════════════════
   LOWER-LEFT TABBED PANEL (AI Settings | Saved States)
   ═══════════════════════════════════════════════════════════ */

.lower-left-panel {
    width: 100%;           /* fix 1: full width of left panel */
    align-self: center;
    margin-top: -5px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Tab row: sits on top, shares border with pane below */
.lower-left-tabs {
    border-radius: 5px 5px 0 0;
    border-bottom: none;
    margin-bottom: 0;
}

/* Lower-left tabs: match transit-mode-btn styling exactly */
.lower-left-tabs .settings-tab-btn {
    background: var(--button-bg-color);
    color: var(--global-text-color);
    border-bottom: 1px solid var(--button-border-color);
}

/* Active tab: same highlight as transit-mode-btn.active */
.lower-left-tabs .settings-tab-btn.active {
    background: var(--button-active-color);
    border-color: #27aaba;
    color: var(--global-text-color);
    font-weight: bold;
    border-bottom: 2px solid #27aaba;
    margin-bottom: -1px;
}

.lower-left-pane {
    background: var(--box-bg-color);
    border: 1px solid var(--box-border-color);
    border-radius: 0 0 8px 8px;
    /* fix 1: fixed height matching original theme-controls box */
    height: 246px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lower-left-pane.hidden {
    display: none;
}

/* AI settings pane: scrollable if content overflows */
#ai-settings-pane {
    overflow-y: auto;
}

/* Remove the outer border/radius from theme-controls when nested */
.lower-left-pane .theme-controls {
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
    margin-top: 0;
    flex-shrink: 0;
}

/* ── Saved States panel ────────────────────────────────────── */

.saved-states-panel {
    padding: 12px 14px 0px;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    min-height: 0;         /* required for flex children to scroll */
}

.saved-states-save-btn {
    display: block;
    width: auto;
    align-self: center;
    padding: 6px 20px;
    margin-top: 10px;
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    border-radius: 5px;
    color: var(--global-text-color2);
    font-size: 13px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.saved-states-save-btn:hover:not(:disabled) {
    background: var(--button-hover-color);
    border-color: #27aaba;
    color: var(--global-text-color2);
}

.saved-states-save-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.saved-states-login-hint {
    font-size: 11px;
    color: var(--global-text-color);
    opacity: 0.55;
    text-align: center;
    margin: -6px 0 0;
    display: none; /* shown by JS when not logged in */
}

.saved-states-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;               /* fill remaining space in fixed-height panel */
    min-height: 0;         /* required for flex child to scroll within fixed parent */
    overflow-y: auto;
    margin-top: 20px;
    padding-bottom: 10px;  /* prevent last row from being clipped by border-radius */
    padding-right: 8px;    /* push scrollbar 8px away from delete buttons */
    padding-left: 5px; 
    /* Thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--button-border-color) transparent;
}

.saved-states-list::-webkit-scrollbar { width: 4px; }
.saved-states-list::-webkit-scrollbar-track { background: transparent; }
.saved-states-list::-webkit-scrollbar-thumb {
    background: var(--button-border-color);
    border-radius: 2px;
}

.saved-states-empty {
    font-size: 12px;
    color: var(--global-text-color);
    opacity: 0.45;
    text-align: center;
    padding: 18px 0 10px;
    margin: 0;
}

/* ── Individual saved state row ────────────────────────────── */

.saved-state-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 6px;
    border-bottom: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.12s;
    background: rgba(255,255,255,0.08);  /* dark grey — signals clickability */
}

.saved-state-row:last-child {
    border-bottom: none;
}

.saved-state-row:hover {
    background: rgba(255,255,255,0.3);
}

.saved-state-row.active-restore {
    background: rgba(255,255,255,0.2);  /* lighter grey when active */
}

/* Label — takes remaining space; truncates if too long */
.saved-state-label {
    flex: 1;
    font-size: 16px;
    color: var(--global-text-color2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    cursor: pointer;
}

/* Editable label input (shown during rename) */
.saved-state-label-input {
    flex: 1;
    font-size: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--global-text-color2);
    background: var(--button-bg-color);
    border: 1px solid #27aaba;
    border-radius: 3px;
    padding: 2px 5px;
    outline: none;
    display: none;
}

/* Delete button */
.saved-state-delete-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--global-text-color);
    opacity: 0.35;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
    transition: opacity 0.15s, color 0.15s;
}

.saved-state-delete-btn:hover {
    opacity: 1;
    color: #e07070;
}

/* Confirm-delete state */
.saved-state-delete-btn.confirming {
    opacity: 1;
    color: #e07070;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #e07070;
    padding: 2px 5px;
    border-radius: 3px;
}

/* Share button */
.saved-state-share-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--global-text-color);
    opacity: 0.35;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
    transition: opacity 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
}

.saved-state-share-btn:hover {
    opacity: 1;
}

/* Copied-confirmation state */
.saved-state-share-btn.share-copied {
    opacity: 1;
    color: #70c090;
}

/* Planet glyph characters inside saved state row labels */
.planet-glyph-char {
    font-family: 'Astronomicon', sans-serif;
    font-size: 19px;
    line-height: 1;
}

/* Chart name prefix in saved state row */
.saved-state-chart-name {
    font-size: 16px;
    color: var(--global-text-color2);
    margin-right: 2px;
}

/* Plain text fallback for planets without Astronomicon glyph (e.g. Ascendant) */
.saved-state-plain {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
}