* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: var(--font-body);
        }
        body {
            /*background: linear-gradient(135deg, #f8fbfa 0%, #f0f8f4 100%);*/
            background: linear-gradient(135deg, #f8fbfa 0%, #f0f8f4 100%);
            background-color: #f0f8f4; /* Fallback for older browsers */
            background-image: radial-gradient(circle at center, #3EAC77 0%, #f0f8f4 100%);
            background-size: cover;
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center;display: flex;
            flex-direction: column;
            min-height: 100vh; 
        }
        /* avoid horizontal scrolling on narrow devices */
        html, body {
            overflow-x: hidden;
            height: 100%;
            min-height: 100%;
        }
        .header {
            background: #3EAC76;
            color: white;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .logo {
            font-size: 2rem;
            font-weight: 600;
            letter-spacing: -0.5px;
            color: #fff;
        }
        .header-right {
            display: flex;
            align-items: center;
            gap: 0.1rem;
        }
        .badge {
            background: #FAEB16;
            color: #2f855a;
            padding: 0.3rem 1rem;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        .credits-badge-wrap {
            position: relative;
        }
        .credits-badge-wrap .badge {
            cursor: pointer;
            user-select: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }
        .credits-badge-wrap .badge:hover {
            filter: brightness(0.98);
        }
        .badge-plus-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            color: #fff;
            font-size: 13px;
            font-weight: 800;
            line-height: 1;
        }
        .credits-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
            display: none;
            min-width: 275px;
            z-index: 200;
            padding: 0;
            overflow: hidden;
        }
        .credits-dropdown.show {
            display: block;
        }
        .credits-dropdown a.credits-dd-link {
            display: block;
            padding: 0.57rem 0.9rem;
            text-decoration: none;
            color: #1f6b45;
            background: linear-gradient(135deg, #3EAC77 0%, #ffffff 100%);
            font-size: 0.9rem;
            font-weight: 600;
            border-radius: 0;
            white-space: nowrap;
        }
        .credits-dropdown a.credits-dd-link:hover {
            background: linear-gradient(135deg, #3EAC77 0%, #ffffff 100%);
            color: #143d29;
            filter: brightness(0.97);
        }
        .credits-dd-header {
            padding: 0.55rem 0.7rem;
            font-size: 0.8rem;
            color: #1f6b45;
            font-weight: 700;
            border-bottom: 1px solid #f0ead6;
        }
        .credits-dd-providers {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 0.5rem 0.7rem;
        }
        
        .credits-dd-providers .credits-provider-btn {
            width: 100%;
            white-space: nowrap;
        }
        .credits-provider-btn {
            padding: 0.32rem 0.25rem;
            font-size: 0.72rem;
            text-align: center;
            border: 1px solid #d1d9e6;
            border-radius: 6px;
            background: #fff;
            color: #53635d;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .credits-provider-btn.active {
            background: #FAEB16;
            border-color: #e3d30b;
            color: #2f855a;
            font-weight: 600;
        }
        .credits-dd-list {
            max-height: 260px;
            overflow-y: auto;
        }
        .credits-pkg-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            width: 100%;
            padding: 0.55rem 0.7rem;
            border: none;
            background: none;
            cursor: pointer;
            text-align: left;
            border-radius: 6px;
            color: #214f37;
        }
        .credits-pkg-row:hover {
            background: #f4fcf5;
        }
        .credits-pkg-row:disabled {
            opacity: 0.6;
            cursor: wait;
        }
        .credits-pkg-name {
            font-weight: 600;
            font-size: 0.9rem;
        }
        .credits-pkg-price {
            color: #2f855a;
            font-size: 0.85rem;
            font-weight: 700;
        }
        .credits-dd-loading {
            padding: 0.8rem 0.7rem;
            font-size: 0.85rem;
            color: #718096;
            text-align: center;
        }
        .avatar {
           width: 45px;
           height: 45px;
           border-radius: 50%;
           background: linear-gradient(135deg, #3EAC76 0%, #ffffff 100%);
           display: flex;
           align-items: center;
           justify-content: center;
           font-weight: bold;
           color: white;
           cursor: pointer;
           position: relative;
           transition: background 0.2s;
        }
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;  /* hidden by default, shown via JS */
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
        }
        .avatar span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: absolute;  /* take it out of flow */
        }
        .avatar span[style*="display: none"] {
            visibility: hidden;  /* keep space but hide */
        }
        .avatar:hover {
           background: linear-gradient(135deg, #e8e6c9 0%, #ffffff 100%);
        }
        .avatar:hover .avatar-dropdown {
            display: block;
        }
        .avatar-dropdown {
          position: absolute;
          /* Flush with the bottom of the circle (= the avatar's height). A fixed
             55px left a gap that broke .avatar:hover on the way into the menu. */
          top: 100%;
          right: 0;
          background: white;
          border-radius: 10px;
          box-shadow: 0 5px 20px rgba(0,0,0,0.15);
          display: none;
          min-width: 176px;
          z-index: 100;
          overflow: hidden;
        }
        .avatar-dropdown.show {
          display: block;
        }
        .avatar-dropdown a {
          display: block;
          padding: 0.67rem 1.2rem;
          text-decoration: none;
          color: #1f6b45;
          background: linear-gradient(135deg, #3EAC77 0%, #ffffff 100%);
          transition: background 0.2s;
        }
        .avatar-dropdown a:hover {
             background: linear-gradient(135deg, #3EAC77 0%, #ffffff 100%);
             filter: brightness(0.97);
        }
        .container {
            /* body is a COLUMN flex container and this block has auto inline
               margins. Auto margins absorb the free space, which switches off
               `align-items: stretch` — so without a definite width this grid is
               sized to fit-content. While the cards are visible their long text
               makes it fill the viewport, but hide every card (Show/Hide) and it
               collapses to the width of whatever is left, dragging the
               view-toggles bar and the profile card down with it. `width: 100%`
               makes the width definite, so it only ever follows the viewport. */
            width: 100%;
            max-width: 1300px;
            margin-top: 0.0rem;
            margin-bottom: 0.0rem;
            margin-left: auto;
            margin-right: auto;
            padding: 0 0%;
            display: grid;
            grid-template-columns: 1fr;
            /* Card spacing. Was 0.75rem, reduced by 66% (i.e. kept at 34% of
               that) as requested — this single value is the whole gap. */
            gap: 0.25rem;
            align-items: start;
            flex: 1 0 auto;
            align-content: start;  /* keep grid rows at top in the container */
        }
        /* ── Card spacing ─────────────────────────────────────────────
           The grid gap above is the ONLY thing that separates stacked items.
           Every grid item is forced to zero vertical margin, because a margin
           would ADD to the gap (the Show/Hide bar used to carry 0.25rem/0.8rem,
           which is what made the spacing around it bigger than the rest) and
           would also leave an extra gap behind when a neighbour is hidden.
           Hiding a card sets display:none, so it leaves the grid entirely and
           the gaps between the cards that remain stay exactly the same. */
        .container > *,
        .container > div > * {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
        /* use display:contents so nested cards become grid items again
           (keeps the profile card at the top via grid placement) */
        .container > div {
            display: contents;
        }
        .dashboard-profile-card {
            grid-column: 1 / -1;
            grid-row: 1;
        }
        /* Chart Selector */
        .chart-selector-bar {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }
        .chart-selector-bar label {
            font-size: 0.85rem;
            color: #2f855a;
            font-weight: 600;
            white-space: nowrap;
        }
        .chart-selector-bar select {
            flex: 1;
            min-width: 0;
            padding: 0.38rem 0.65rem;
            border: 2px solid #3EAC77;
            border-radius: 8px;
            font-size: 0.9rem;
            color: #3a2800;
            background: #f8faff;
            cursor: pointer;
        }
        .upgrade-nudge {
            font-size: 0.8rem;
            color: #9a7000;
            margin-top: 0.4rem;
        }
        .upgrade-nudge a { color: #2f855a; font-weight: 600; text-decoration: underline; }
        .compare-layout {
            display: flex;
            flex-direction: row;
            gap: 1.5rem;
            align-items: flex-start;
        }
        .compare-layout > .compare-form-col {
            flex: 1 1 55%;
            min-width: 0;
        }
        .compare-layout > .compare-recent-col {
            flex: 1 1 45%;
            min-width: 0;
        }
        @media (max-width: 900px) {
            .compare-layout {
                flex-direction: column;
            }
            .compare-layout > .compare-form-col,
            .compare-layout > .compare-recent-col {
                flex: 1 1 auto;
                width: 100%;
            }
        }
        .dashboard-compare-card {
            grid-column: 1 / -1;
            padding-right: 0.8rem;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
        }
        #compareForm, .partner-form {
            width: 100%;
            box-sizing: border-box;
            padding-right: 0.15rem;
        }
        .partner-form {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.6rem;
            align-items: start;
        }
        .partner-form input, .partner-form select {
            width: 100%;
            box-sizing: border-box;
        }
        html, body {
            min-height: 100%;
        }
        .card {
            background: linear-gradient(rgba(248, 251, 250, 0.75), rgba(240, 248, 244, 0.75)), url('/images/cardbg.jpg') 0 0 / 100% 100% no-repeat;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 0 14px;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0.0rem;
            margin-right: 0.0rem;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            position: relative;
        }
        /* No vertical spacing between cards */
        #chartInfoCard,
        #visualChartCard,
        #chartConceptsCard,
        #chartActionsCard {
            margin-bottom: 0;
        }
        h2 {
            margin-bottom: 0.2rem;
            color: #2f855a;
            font-size: 1.4rem;
            border-bottom: 3px solid #3EAC77;
            display: inline-block;
            padding-bottom: 0.3rem;
        }
        /* The Birth Chart label is the chart column's own header — see
           .chart-panel-head / .chart-panel-title below. */
        .primary-chart {
            border: none;
            border-radius: 0px;
            padding: 0;
            box-sizing: border-box;
            max-width: 100%;
        }
        /* ensure flex/grid children can shrink */
        .card > * { min-width: 0; }

        /* content layout inside card */
        .card .row {
            display: flex;
            gap: 0.1rem;
            align-items: center;
            flex-wrap: wrap;
        }

        /* images, iframes */
        .card img, .card iframe {
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* text wrapping for long tokens */
        .card, .card p, .card h2, .card .astro-card {
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        /* compact spacing on small screens */
        @media (max-width: 900px) {
            .card { padding: 0 12px; }
            .card h2 { font-size: clamp(1rem, 2.8vw, 1.25rem); margin-bottom: 0.5rem; }
            .card .row { gap: 0.0rem; }
            .btn { padding: 0.45rem 0.8rem; font-size: 0.95rem; }
            .chart-info-grid { grid-template-columns: 1fr; }
            .view-toggles-bar {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: flex-start;
                justify-content: flex-start;
                text-align: left;
                width: 100%;
                margin-left: 0;
                margin-right: auto;             
            }
            .view-toggles-bar > span {
                color: #654f11;
                display:flex;
                width: 100%;
                text-align: left;
                margin-right: 0;
                margin-bottom: 0.25rem;
                white-space: normal;
            }
            .view-toggles-bar .view-group {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                width: auto;
                margin: 0.15rem 0.55rem 0.15rem 0;
            }
            .view-toggles-bar .view-group-btn {
                white-space: nowrap;
            }
            /* On narrow screens menus overlay below the button (never extend the bar height) */
            .view-toggles-bar .view-group-menu {
                position: absolute;
                top: calc(100% + 8px);
                left: 0;
                min-width: 231px;
                width: max-content;
                max-width: 92vw;
                margin: 0;
            }
        }

        /* for very small screens */
        @media (max-width: 420px) {
            .card { padding: 0 10px; border-radius: 8px; }
            .card .row { flex-direction: column; align-items: stretch; }
        }
        .chart-info {
            width: 100%;
            font-size: 0.90rem;
        }
        .chart-info p {
            margin: 0.4rem 0;
            color: #2f855a;
            font-size: 0.88rem;
        }
        .chart-info-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.3rem;
            padding: 0.3rem;
            background: transparent;
            border: 1px solid #d7eee5;
            border-radius: 8px;
            margin-top: 0.1rem;
        }
        .view-toggles-bar {
            position: relative;
            z-index: 100;
            display: flex;
            align-items: center;
            padding: 0 0.75rem;
            background: linear-gradient(rgba(248, 251, 250, 0.75), rgba(240, 248, 244, 0.75)), url('/images/cardbg.jpg') 0 0 / 100% 100% no-repeat;
            border: 1px solid rgba(47, 133, 90, 0.35);
            border-radius: 8px;
            /* No margins: this bar is a grid item, so spacing around it comes
               from the container's single grid gap (see .container). */
            color: #ffffff;
            box-shadow: 0 4px 6px rgba(62, 172, 119, 0.2);
            transition: all 0.3s ease;
            backdrop-filter: blur(4px);
        }

        /* View group dropdowns (Personal / Compare / See Dates) */
        .view-group {
            position: relative;
            display: inline-flex;
            margin-right: 0.55rem;
        }
        .view-group:last-child {
            margin-right: 0;
        }
        .view-group-btn {
            font-family: inherit;
            cursor: pointer;
            padding: 0.45rem 0.8rem;
            border: 1px solid rgba(47, 133, 90, 0.45);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.92);
            font-size: 0.83rem;
            color: #1a4730;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            box-shadow: 0 2px 4px rgba(62, 172, 119, 0.15);
            transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        }
        .view-group.open .view-group-btn {
            background: rgba(62, 172, 119, 0.14);
            color: #0d2f1f;
        }
        .view-group-btn:focus-visible {
            outline: 2px solid rgba(47, 133, 90, 0.6);
            outline-offset: 2px;
        }
        .view-group-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            z-index: 1000;
            min-width: 231px;
            margin: 0;
            padding: 0;
            overflow: hidden;
            list-style: none;
            background: #ffffff;
            border: 1px solid rgba(47, 133, 90, 0.35);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
            display: none;
        }
        .view-group.open .view-group-menu {
            display: block;
        }
        .view-group-menu .toggle-word {
            display: block;
            width: 100%;
            white-space: nowrap;
            text-align: left;
            margin: 0;
            border-radius: 0;
        }
        /* RTL: align menus to the right edge */
        [dir="rtl"] .view-group {
            margin-right: 0;
            margin-left: 0.55rem;
        }
        [dir="rtl"] .view-group:last-child {
            margin-left: 0;
        }
        [dir="rtl"] .view-group-menu {
            left: auto;
            right: 0;
        }
        [dir="rtl"] .view-group-menu .toggle-word {
            text-align: right;
        }
        .chart-info-item {
            padding: 0.45rem;
            border: 1px solid #e1f2ec;
            border-radius: 8px;
            background: white;
            min-width: 0;
            font-size: 0.83rem;
            color: #2f855a;
        }
        .chart-info-item strong {
            display: block;
            margin-bottom: 0.20rem;
            color: #276644;
            font-size: 0.86rem;
        }
        .chart-concepts {
            margin-top: 0.1rem;
            padding: 0.25rem;
        }
        /* `.collapsible.collapsed` is a JS state marker only; no size/shape
           changes — the card keeps its padding/border while collapsing. */
        .collapsible.collapsed {
            /* no style changes */
        }
        .chart-concepts h4 {
            margin: 0 0 0.5rem 0;
            color: #2f855a;
            font-size: 0.95rem;
        }
        .chart-concepts ul {
            margin: 0;
            padding-left: 1rem;
            color: #2d3748;
            font-size: 0.92rem;
        }
        .chart-concepts li {
            margin-bottom: 0.35rem;
            line-height: 1.4;
        }
        /* Highlights → one card per part (no astrological labels shown) */
        .chart-concepts .concept-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 0.7rem;
        }
        .chart-concepts .concept-card {
            background: #f7faf8;
            border: 1px solid #d7ede2;
            border-left: 4px solid #3EAC77;
            border-radius: 10px;
            padding: 0.7rem 0.85rem;
            box-sizing: border-box;
        }
        .chart-concepts .concept-card-title {
            margin: 0 0 0.35rem 0;
            font-size: 0.92rem;
            font-weight: 800;
            color: #276749;
        }
        .chart-concepts .concept-card-text {
            margin: 0;
            font-size: 0.88rem;
            line-height: 1.5;
            color: #2d3748;
        }
        @media (max-width: 700px) {
            .chart-concepts .concept-cards { grid-template-columns: 1fr; }
        }
        .chart-info strong {
            width: 62px;
            display: inline-block;
        }
        .chart-actions {
            margin-top: 1rem;
            border-radius: 8px;
            overflow: hidden;
        }
        /* actions-toggle removed: static actions heading used instead */
        .actions-content {
            display: none;
            padding: 0.55rem 0.2rem 0.2rem;
        }
        .actions-content.expanded {
            display: block;
        }
        .action-row {
            display: flex;
            flex-direction: column;
            /*align-items: stretch;*/
            gap: 0.3rem;
            padding: 0.5rem 0.2rem;
            border: none;
        }
        .actions-content > .action-row:not(:first-child) {
            border: none;
        }
        .action-row:last-child {
            padding-bottom: 0;
            border: none;
        }
        .action-text {
            color: #2f855a;
            font-size: 1rem;
            line-height: 1.5;
            font-weight: 500;
        }
        .action-row.hidden {
            display: none;
        }
        .seedates-btn-row {
            display: none;
        }
        .btn {
            background: #3EAC76;
            color: white;
            border: none;
            padding: 0.8rem 1.8rem;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 6px rgba(62, 172, 119, 0.2);
            text-decoration: none;
            display: flex;
            text-align: center;
        }
        .btn:hover {
            background: #359b69;
            transform: scale(1.02);
            box-shadow: 0 6px 12px rgba(62, 172, 119, 0.3);
        }
        .btn-small {
            padding: 0.4rem 1rem;
            font-size: 0.9rem;
        }
        .btn-outline {
           background: transparent;
           border: 2px solid #3EAC77;
           color: #3EAC77;
           box-shadow: none;
        }
        .btn-outline:hover {
           background: #3EAC76;
           color: white;
        }
        a.btn {
           color: white;
        }
        a.btn-outline {
           color: #3EAC77;
        }
        a.btn-outline:hover {
           color: white;
        }
        .partner-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 1rem;
        }
        .partner-form input, .partner-form select {
            padding: 0.8rem;
            border: 1px solid #d1d9e6;
            border-radius: 30px;
            font-size: 1rem;
            transition: border 0.2s;
            background: #f9fbfd;
        }
        .partner-form input:focus {
            border-color: #3EAC77;
            outline: none;
        }
        .full-width {
            grid-column: span 2;
        }
        .comparison-result {
            background: #f8fcfa;
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }
        .comparison-result h3 {
            color: #2f855a;
            margin-bottom: 1rem;
        }
        .score {
            font-size: 3rem;
            font-weight: 700;
            color: #3EAC77;
            display: inline-block;
            margin-right: 1rem;
        }
        .interpretation {
            font-size: 1.2rem;
            color: #2f855a;
        }
        .compat-message {
            min-height: 1.5em;
            display: inline-block;
            margin-left: 1.5rem;
            margin-top: 0.25rem;
            color: #2f855a;
            font-size: 1.02rem;
            font-weight: 500;
            vertical-align: middle;
        }
        .compat-result-header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.75rem;
            margin-top: 0.8rem;
        }
        .compat-summary-panel,
        .compat-directional-panel {
            display: grid;
            gap: 1rem;
            margin-top: 1rem;
        }
        .compat-chart-info {
            background: #f7faf8;
            display: contents;
        }
        .cci-block {
            background: #ffffff;
            border: 1px solid #c6f6d5; border-radius: 8px;
            padding: 0.55rem 0.8rem;
            flex: 1 1 200px;
            min-width: 180px;
        }
        .cci-name {
            font-weight: 700;
            color: #2f855a;
            font-size: 0.9rem;
            margin-bottom: 0.3rem;
        }
        .cci-row {
            display: flex;
            gap: 0.4rem;
            font-size: 0.83rem;
            color: #4a5568;
            padding: 0.1rem 0;
        }
        .cci-label {
            color: #718096;
            font-weight: 600;
            min-width: 4.8rem;
            flex-shrink: 0;
        }
        .cci-message {
            margin: 0;
            color: #4a5568;
            font-size: 0.95rem;
        }
        .compat-secondary-grid {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-top: 1rem;
        }
        @media (max-width: 900px) {
            .compat-secondary-grid {
                grid-template-columns: 1fr;
            }
        }
        .compare-location-status {
            font-size: 0.95rem;
            color: #2f855a;
            background: #e6fffa;
            border: 1px solid #c6f6d5;
            border-radius: 8px;
            padding: 0.9rem 1rem;
            margin-top: 0.8rem;
            display: none;
        }
        .compare-location-status.error {
            color: #c53030;
            background: #fff5f5;
            border-color: #fed7d7;
        }
        .reason-group h4 {
            margin: 0 0 0.5rem;
            font-size: 0.9rem;
            color: #2f855a;
        }
        .reason-group ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .reason-group li {
            padding: 0.35rem 0;
            border-bottom: 1px solid #e2e8f0;
            font-size: 0.9rem;
        }
        /* Markers for directional reason lists */
        .reason-group.reason-pos li::before { content: "\2713 "; color: #2f855a; }
        .reason-group.reason-neg li::before { content: "! "; color: #c53030; font-weight: 700; }
        .danger-item {
            margin-bottom: 0.6rem;
            font-size: 0.88rem;
            border-left: 4px solid #e53e3e;
            background: #fff5f5;
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
        }
        /* severity states for danger-item */
        .danger-item.sev-critical:not(.reduced) {
            border-left-color: #7b1c1c;
            background: #ffffff;
        }
        .danger-item.sev-high:not(.reduced) {
            border-left-color: #e53e3e;
            background: #ffffff;
        }
        .danger-item.sev-critical.reduced {
            border-left-color: #c05621;
            background: #fdfcf8;
        }
        .danger-item.sev-high.reduced {
            border-left-color: #ecc94b;
            background: #fdfcf8;
        }
        .danger-item .di-horseman {
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.78rem;
            letter-spacing: 0.04em;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        .danger-item.sev-critical:not(.reduced) .di-horseman { color: #7b1c1c; }
        .danger-item.sev-high:not(.reduced) .di-horseman    { color: #c53030; }
        .danger-item.sev-critical.reduced .di-horseman      { color: #c05621; }
        .danger-item.sev-high.reduced .di-horseman          { color: #b7791f; }
        .danger-item .di-detail {
            color: #4a5568;
            font-size: 0.82rem;
            line-height: 1.4;
        }
        /* ── Saved Plans & Comparisons Styles ─────────────────────── */
        .saved-plans-card {
            grid-column: 1 / -1;
            margin-top: 0;
            margin-bottom: 0;
            padding: 0 14px;
        }
        .saved-plans-card h2 {
            margin-bottom: 0.2rem;
        }
        .saved-plans-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .saved-plan-item {
            background: #f8fcfa;
            border: 1px solid #d7eee5;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin-bottom: 0.6rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }
        .saved-plan-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.4rem;
        }
        /* Row checkbox + plan name stay together on the left, so the meta on the
           right (saved date · View Results · status pill) keeps its alignment. */
        .saved-plan-head-left {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            min-width: 0;
        }
        /* Select-all + bulk actions, mirroring the history cards' bulk bar. */
        .saved-plan-selbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.6rem;
            padding: 0.35rem 0.15rem 0.6rem;
            font-size: 0.82rem;
            color: #276749;
        }
        .saved-plan-selectall {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            cursor: pointer;
        }
        .saved-plan-bulk {
            align-items: center;
            gap: 10px;
        }
        .saved-plan-bulk .btn-small {
            padding: 0.3rem 0.7rem;
            font-size: 0.78rem;
        }
        .saved-plan-meta .view-results-link {
            font-size: 0.82rem;
        }
        .saved-plan-name {
            font-weight: 700;
            color: #2f855a;
            font-size: 0.95rem;
            /* Auto names can be long ("Analyze relation with … born on …") */
            overflow-wrap: anywhere;
        }
        .saved-plan-meta {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            flex-wrap: wrap;
            font-size: 0.82rem;
            color: #718096;
        }
        .saved-plan-status {
            font-size: 0.82rem;
            font-weight: 600;
            padding: 0.1rem 0.5rem;
            border-radius: 999px;
            white-space: nowrap;
        }
        .saved-plan-status.ready { color: #0e7a3d; background: #d9f2e3; }
        .saved-plan-status.pending { color: #9a6700; background: #fdf1d3; }
        .saved-plan-status.idle { color: #718096; background: #edf0f4; }
        .saved-plan-actions {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            flex-wrap: wrap;
        }
        .saved-plan-actions .btn-small {
            padding: 0.3rem 0.7rem;
            font-size: 0.78rem;
        }
        .saved-link {
            color: #3EAC77;
            text-decoration: underline;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0.1rem 0.15rem;
            transition: color 0.15s;
        }
        .saved-link:hover {
            color: #2d8c5e;
        }
        .saved-link.delete-link {
            color: #e53e3e;
        }
        .saved-link.delete-link:hover {
            color: #c53030;
        }
        .saved-plan-edit-form {
            display: none;
            margin-top: 0.6rem;
            padding-top: 0.6rem;
            border-top: 1px dashed #d7eee5;
        }
        .saved-plan-edit-form.open {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
        }
        .saved-plan-edit-form .full-width {
            grid-column: 1 / -1;
        }
        .saved-plan-edit-form label {
            font-size: 0.78rem;
            font-weight: 600;
            color: #4a5568;
        }
        .saved-plan-edit-form input,
        .saved-plan-edit-form select {
            padding: 0.4rem 0.6rem;
            border: 1px solid #d1d9e6;
            border-radius: 8px;
            font-size: 0.85rem;
            width: 100%;
            box-sizing: border-box;
        }
        .saved-plan-edit-form .edit-actions {
            grid-column: 1 / -1;
            display: flex;
            gap: 0.5rem;
            justify-content: flex-end;
        }
        .saved-plan-empty {
            color: #718096;
            font-style: italic;
            padding: 1rem;
            text-align: center;
            font-size: 0.9rem;
        }
        .recalc-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .recalc-modal-box {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            text-align: center;
        }
        .recalc-modal-box h3 {
            color: #2f855a;
            margin-bottom: 0.6rem;
        }
        .recalc-modal-box p {
            color: #4a5568;
            font-size: 0.9rem;
            margin-bottom: 1.2rem;
        }
        .recalc-modal-box .btn-row {
            display: flex;
            gap: 0.6rem;
            justify-content: center;
        }
        .saved-toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #276749;
            color: white;
            padding: 0.65rem 1.2rem;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 600;
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
            z-index: 2500;
            display: none;
            white-space: nowrap;
        }

        /* ── V2 Compatibility Result Styles ────────────────────────── */

        /* ── Single Area Search: step-9 area picker ───────────────── */
        .sa-area-list { display: flex; flex-direction: column; gap: 6px; max-width: 480px; }
        .sa-area-loading { color: #718096; font-size: 0.85rem; padding: 6px 2px; }
        .sa-area-item {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            background: #fff;
            border: 1px solid #c6f6d5;
            border-radius: 10px;
            padding: 0.45rem 0.7rem;
            font-size: 0.88rem;
            color: #2f855a;
            font-weight: 600;
            cursor: pointer;
        }
        .sa-area-item:hover { background: #f0fff4; }
        .sa-area-item.selected { background: #f0fff4; border-color: #38a169; }
        .sa-area-radio { color: #3EAC77; font-size: 0.9rem; }
        .sa-area-empty { color: #c53030; font-size: 0.85rem; padding: 6px 2px; }

        /* ── Single Area page (date-details.html ?sa=) ── */
        .sa-area-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: 0.4rem 0 0.9rem;
            padding: 12px 16px;
            background: #f0fff4;
            border: 1px solid #9ae6b4;
            border-radius: 10px;
        }
        .sa-area-header-name { font-weight: 700; color: #276749; font-size: 1.05rem; }
        .sa-area-header-score { font-weight: 800; color: #2f855a; font-size: 1.4rem; }
        .sa-reading { margin: 0.6rem 0 0.4rem; color: #2d3748; line-height: 1.55; }
        .sa-reading p { margin: 0.3rem 0 0.6rem; }
        /* ── See Dates filter controls ──────────────────────────── */
        .seedates-filters {
            display: none;
        }
        /* ── Walkthrough (6-step questionnaire) ────────────────────── */
        .seedates-walkthrough {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem;
            margin: 0;
            padding: 1.2rem 1.4rem;
            background: rgba(247, 250, 248, 0.5);
            border-radius: 8px;
            border: 1px solid #d6e9df;
            align-items: flex-start;
        }
        .compare-walkthrough {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem;
            margin: 0;
            padding: 1.2rem 1.4rem;
            background: rgba(247, 250, 248, 0.5);
            border-radius: 8px;
            border: 1px solid #d6e9df;
            align-items: flex-start;
        }
        .walkthrough-content-area {
            flex: 1 1 100%;
            min-width: 280px;
            order: 3;
        }
        .walkthrough-step-content {
            display: none;
            flex-direction: column;
            gap: 0.75rem;
        }
        .walkthrough-step-content.active {
            display: flex;
        }
        .walkthrough-step-content h3 {
            color: #2f855a;
            font-size: 1.05rem;
            margin: 0;
            font-weight: 700;
        }
        /* Big title / sub-title hierarchy for walkthrough steps */
        .walkthrough-step-content .wt-big-title {
            color: #2f855a;
            font-size: 1.2rem;
            font-weight: 800;
            margin: 0;
            line-height: 1.3;
        }
        .walkthrough-step-content .wt-sub-title {
            color: #4a5568;
            font-size: 0.9rem;
            font-weight: 500;
            margin: 0;
            line-height: 1.4;
        }
        .walkthrough-step-content .wt-validation-error {
            color: #c53030;
            font-size: 0.85rem;
            font-weight: 600;
            margin: 0;
        }
        .walkthrough-step-content p.wt-desc {
            color: #718096;
            font-size: 0.88rem;
            margin: 0;
            line-height: 1.45;
        }
        .walkthrough-step-content .filter-group {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            flex: 1 1 140px;
            min-width: 120px;
        }
        .walkthrough-step-content .filter-group label {
            color: #4a5568;
            font-weight: 600;
            font-size: 0.95rem;
            text-align: start;
        }
        .walkthrough-step-content .filter-group input[type="date"],
        .walkthrough-step-content .filter-group input[type="text"],
        .walkthrough-step-content .filter-group input[type="time"],
        .walkthrough-step-content .filter-group input[type="number"],
        .walkthrough-step-content .filter-group select {
            border: 1px solid #cbd5e0;
            border-radius: 30px;
            padding: 0.7rem 1rem;
            font-size: 1rem;
            background: #f9fbfd;
            transition: border 0.2s;
            width: 100%;
            box-sizing: border-box;
            text-align: start;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
        }
        .walkthrough-step-content .filter-group select {
            padding-right: 2.5rem;
            background-image: linear-gradient(45deg, transparent 50%, #718096 50%),
                              linear-gradient(135deg, #718096 50%, transparent 50%),
                              linear-gradient(to right, #f9fbfd, #f9fbfd);
            background-position: calc(100% - 1rem) calc(50% - 0.15rem), calc(100% - 0.7rem) calc(50% - 0.15rem), 0 0;
            background-size: 0.45rem 0.45rem, 0.45rem 0.45rem, 100% 100%;
            background-repeat: no-repeat;
        }
        .walkthrough-step-content .filter-group input:focus,
        .walkthrough-step-content .filter-group select:focus {
            border-color: #3EAC77;
            outline: none;
        }
        /* Choice cards (See Dates step 1 / step 6) */
        .wt-choice-cards {
            display: flex;
            gap: 0.7rem;
            flex-wrap: wrap;
        }
        .wt-choice-card {
            flex: 1 1 160px;
            min-width: 140px;
            padding: 0.8rem 1rem;
            border: 2px solid #d6e9df;
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            text-align: left;
        }
        .wt-choice-card:hover {
            border-color: #3EAC77;
            background: #f0fff4;
        }
        .wt-choice-card.selected {
            border-color: transparent;
            background: #3EAC77;
            box-shadow: 0 0 0 3px rgba(62,172,119,0.15);
        }
        .wt-choice-card.selected .wt-card-title {
            color: #fff;
        }
        .wt-choice-card.selected .wt-card-desc {
            color: rgba(255,255,255,0.85);
        }
        .wt-choice-card .wt-card-icon {
            font-size: 1.5rem;
            line-height: 1;
        }
        .wt-choice-card .wt-card-title {
            font-weight: 700;
            font-size: 0.95rem;
            color: #2f855a;
        }
        .wt-choice-card .wt-card-desc {
            font-size: 0.78rem;
            color: #718096;
            line-height: 1.35;
        }
        /* Nav buttons */
        .walkthrough-nav {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.5rem;
            flex: 0 0 auto;
            order: 2;
            margin-left: auto;
        }
        .walkthrough-nav .btn {
            flex: 0 0 auto;
        }
        /* Step progress label — moved out of the nav into the content header */
        .wt-content-header {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 100%;
            margin-bottom: 0.4rem;
        }
        .wt-step-label {
            white-space: nowrap;
            font-size: 1rem;
            font-weight: 700;
            color: #2f855a;
            background: #e6fffa;
            border: 1px solid #b2f5ea;
            border-radius: 30px;
            padding: 0.3rem 1rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        }
        /* Only render the step pill once it has text. */
        .wt-step-label:empty {
            display: none;
        }
        /* Summary grid */
        .wt-summary-grid {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            padding: 0.7rem 0;
        }
        .wt-summary-row {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
            padding: 0.35rem 0;
            border-bottom: 1px solid #edf2f7;
            font-size: 0.88rem;
        }
        .wt-summary-row:last-child {
            border-bottom: none;
        }
        .wt-summary-label {
            color: #718096;
            font-weight: 600;
            min-width: 110px;
            flex-shrink: 0;
        }
        .wt-summary-value {
            color: #2f855a;
            font-weight: 700;
            flex: 1;
        }
        .wt-summary-edit {
            font-size: 0.75rem;
            color: #3EAC77;
            cursor: pointer;
            flex-shrink: 0;
            padding: 0.1rem 0.4rem;
            border-radius: 10px;
            border: 1px solid transparent;
            background: none;
        }
        .wt-summary-edit:hover {
            background: #e6fffa;
            border-color: #3EAC77;
        }
        .wt-confirm-btn {
            margin-top: 0.5rem;
            width: 100%;
            padding: 0.9rem 1rem;
            font-size: 1.05rem;
            justify-content: center;
        }
        /* Final step: Run + Save side by side (shown by the walkthrough JS) */
        .wt-final-actions {
            display: none;
            gap: 0.6rem;
            margin-top: 0.5rem;
        }
        .wt-final-actions .wt-confirm-btn {
            flex: 1 1 0;
            width: auto;
            margin-top: 0;
        }
        /* Live search-status label — sits to the right of "Review and Apply" */
        .wt-step-apply-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        .seedates-search-status {
            font-size: 1rem;
            font-weight: 600;
            color: #2f855a;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 30px;
            padding: 0.4rem 1rem;
            line-height: 1.4;
            max-width: 100%;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        }
        /* Only render the status pill once it actually has text to show. */
        .seedates-search-status:empty {
            display: none;
        }
        /* Focus pulse for a result a notification just loaded — makes it obvious
           which area the "View Results" action filled in. */
        @keyframes sdResultFocusPulse {
            0%   { box-shadow: 0 0 0 0 rgba(62, 172, 119, 0.55); }
            60%  { box-shadow: 0 0 0 12px rgba(62, 172, 119, 0.02); }
            100% { box-shadow: 0 0 0 0 rgba(62, 172, 119, 0); }
        }
        .sd-result-focus {
            scroll-margin-top: 90px;
            border-radius: 8px;
            animation: sdResultFocusPulse 1.8s ease-out 2;
        }
        .sd-result-focus:focus {
            outline: 2px solid #3EAC77;
            outline-offset: 3px;
        }
        .seedates-search-status.seedates-status-error {
            color: #c0392b;
            background: #fff5f5;
            border: 1px solid #fc8181;
        }
        .seedates-search-status.seedates-status-done {
            color: #276749;
            background: #f0fff4;
            border: 1px solid #9ae6b4;
        }

        /* ── Single Area Searches card (2-level: searches → results) ───── */
        /* table-layout:fixed keeps the list at the card width; the nested results
           table then scrolls inside .sa-res-wrap instead of being clipped. */
        .sa-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.87rem; }
        /* Header styling comes from the shared `.tbl-th` block further down.
           The `>` combinators matter: the level-2 results table is nested inside
           this one, and a plain descendant selector would style it too. */
        .sa-table > tbody > tr > td {
            padding: 12px 10px; border-bottom: 1px solid #e2e8f0; vertical-align: middle;
        }
        .sa-th-chev { width: 28px; }
        .sa-th-act { width: 44px; text-align: center !important; }

        .sa-row { cursor: pointer; }
        .sa-row:hover { background: #f7fbf9; }
        .sa-row.sa-open { background: #f0fff4; }
        .sa-row.sa-open td { border-bottom-color: #9ae6b4; }
        .sa-chev {
            display: inline-block; width: 16px; color: #3EAC77; font-size: 0.95rem;
            font-weight: 700; line-height: 1; transition: transform 0.15s;
        }
        .sa-row.sa-open .sa-chev { transform: rotate(90deg); }

        .sa-name { font-weight: 700; color: #276749; overflow-wrap: anywhere; }
        .sa-meta { font-size: 0.75rem; color: #718096; margin-top: 2px; overflow-wrap: anywhere; }

        .sa-detail-cell {
            padding: 0 !important; background: #f7fbf9;
            border-bottom: 2px solid #9ae6b4 !important;
        }
        .sa-detail { padding: 0 12px; }

        /* Results drawer — the date + the AREA score (no chart score columns). */
        .sa-res-wrap { overflow-x: auto; padding: 2px 0 10px; }
        .sa-res-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 520px; }
        .sa-res-table td { padding: 8px 12px; }
        .sa-res-caption { font-size: 0.8rem; color: #718096; padding: 2px 0 8px; }

        .sa-link { font-size: 0.75rem; font-weight: 700; color: #2f855a; text-decoration: underline; }
        .sa-empty { padding: 14px 2px 0; font-size: 0.85rem; color: #718096; font-style: italic; }
        .sa-note { padding: 14px 12px; font-size: 0.85rem; color: #718096; }
        .sa-note.sa-error { color: #c53030; }
        /* Responsive */
        @media (max-width: 700px) {
            .seedates-walkthrough,
            .compare-walkthrough {
                flex-direction: column;
            }
            .walkthrough-content-area {
                order: 2;
                min-width: 100%;
            }
            .walkthrough-nav {
                order: 1;
                flex-direction: row;
                position: static;
                width: 100%;
                min-width: 100%;
                justify-content: center;
                gap: 0.5rem;
            }
            .walkthrough-nav .btn {
                width: auto;
                flex: 1 1 0;
            }
            .wt-choice-cards {
                flex-direction: column;
            }
            .wt-summary-label {
                min-width: 85px;
            }
        }

        .grade-badge {
            display: inline-block;
            font-size: 2rem;
            font-weight: 800;
            padding: 0.3rem 1rem;
            border-radius: 12px;
            margin-left: 1rem;
            vertical-align: middle;
        }
        .grade-S { background: #d4edda; color: #155724; }
        .grade-A { background: #d4edda; color: #155724; }
        .grade-B { background: #d1ecf1; color: #0c5460; }
        .grade-C { background: #fff3cd; color: #856404; }
        .grade-D { background: #ffeeba; color: #856404; }
        .grade-E { background: #f8d7da; color: #721c24; }
        .grade-F { background: #f5c6cb; color: #721c24; }

        .pillar-section { margin-top: 1.2rem; }
        .pillar-section h4 { color: #2f855a; margin-bottom: 0.6rem; }
        .pillar-bar-row {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.3rem;
            font-size: 0.88rem;
        }
        .pillar-label {
            width: 170px;
            min-width: 120px;
            color: #4a5568;
            flex-shrink: 0;
        }
        .pillar-bar-track {
            flex: 0 1 320px;
            max-width: 320px;
            height: 8px;
            background: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
            margin: 0 0.6rem;
        }
        .pillar-bar-fill {
            height: 100%;
            border-radius: 4px;
            background: #3EAC77;
            transition: width 0.6s ease;
        }
        .pillar-pct {
            width: 40px;
            text-align: right;
            font-weight: 600;
            color: #4a5568;
        }
        .pillar-expl-title {
            display: block;
            font-size: 0.74rem;
            color: #718096;
            font-style: italic;
            margin-top: 0.15rem;
            line-height: 1.3;
        }
        .bdr-pillar-expl-box {
            background: #f0f4ff;
            border-left: 3px solid #667eea;
            border-radius: 4px;
            padding: 0.55rem 0.85rem;
            margin-bottom: 0.9rem;
            font-size: 0.86rem;
            color: #2d3748;
        }
        .bdr-pillar-expl-box .bdr-expl-title {
            font-weight: 700;
            margin-bottom: 0.3rem;
            color: #4c51bf;
        }
        .bdr-pillar-expl-box .bdr-expl-text {
            color: #4a5568;
            line-height: 1.55;
        }
        .bdr-comp-expl-note {
            margin-top: 0.55rem;
            padding: 0.4rem 0.7rem;
            background: #f0f4ff;
            border-left: 3px solid #a3b4f5;
            border-radius: 4px;
            font-size: 0.8rem;
            color: #4a5568;
            line-height: 1.5;
        }
        .bdr-comp-expl-title {
            font-weight: 700;
            color: #4c51bf;
        }

        .danger-section { margin-top: 1.2rem; }
        .danger-section h4 { color: #c53030; margin-bottom: 0.6rem; }
        /* Base card — overridden by modifier classes below */
        .danger-card {
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin-bottom: 0.6rem;
            border-left: 5px solid #e53e3e;
            background: #fff5f5;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
        /* unreduced critical — darkest red */
        .danger-card.sev-critical:not(.reduced) {
            border-left-color: #7b1c1c;
            background: #ffffff;
        }
        /* unreduced high — standard red */
        .danger-card.sev-high:not(.reduced) {
            border-left-color: #e53e3e;
            background: #ffffff;
        }
        /* critical + reduced — orange */
        .danger-card.sev-critical.reduced {
            border-left-color: #c05621;
            background: #fdfcf8;
        }
        /* high + reduced — yellow */
        .danger-card.sev-high.reduced {
            border-left-color: #ecc94b;
            background: #fdfcf8;
        }
        /* header row inside card */
        .danger-card-header {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
        }
        .danger-card .horseman-name {
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.82rem;
            letter-spacing: 0.04em;
        }
        .danger-card.sev-critical:not(.reduced) .horseman-name { color: #7b1c1c; }
        .danger-card.sev-high:not(.reduced) .horseman-name    { color: #c53030; }
        .danger-card.sev-critical.reduced .horseman-name      { color: #c05621; }
        .danger-card.sev-high.reduced .horseman-name          { color: #b7791f; }
        .danger-card .danger-detail {
            font-size: 0.85rem;
            color: #4a5568;
            line-height: 1.45;
        }
        /* severity / reduced pill badges — shared by .danger-card and .danger-item */
        .danger-severity-badge {
            display: inline-flex;
            align-items: center;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 0.15rem 0.5rem;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .danger-severity-badge.critical          { background: #7b1c1c; color: #fff; }
        .danger-severity-badge.high              { background: #e53e3e; color: #fff; }
        .danger-severity-badge.reduced-critical { background: #c05621; color: #fff; }
        .danger-severity-badge.reduced-high     { background: #ecc94b; color: #744210; }

        /* ── Expandable danger explanations (on-demand) ─────────────────── */
        .danger-item-head,
        .danger-card-head {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
            cursor: pointer;
        }
        .danger-expl-toggle {
            margin-left: auto;
            font-size: 0.72rem;
            font-weight: 700;
            color: #718096;
            white-space: nowrap;
            opacity: 0.85;
        }
        .danger-item-head:hover .danger-expl-toggle,
        .danger-card-head:hover .danger-expl-toggle { opacity: 1; color: #c53030; }
        .danger-expl-wrapper {
            margin-top: 0.4rem;
            padding-top: 0.4rem;
            border-top: 1px dashed rgba(197, 48, 48, 0.25);
        }
        .danger-explanation {
            background: #ffffff;
            border: 1px solid #fed7d7;
            border-radius: 8px;
            padding: 0.6rem 0.75rem;
            font-size: 0.85rem;
        }
        .danger-expl-title {
            font-weight: 700;
            color: #7b1c1c;
            margin-bottom: 0.35rem;
        }
        .danger-expl-section { margin-bottom: 0.5rem; }
        .danger-expl-section p { margin: 0.15rem 0 0; color: #4a5568; line-height: 1.5; }
        .danger-expl-label {
            display: inline-block;
            font-size: 0.68rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #c53030;
            margin-bottom: 0.1rem;
        }
        .danger-expl-antidote {
            margin-top: 0.4rem;
            padding-top: 0.4rem;
            border-top: 1px solid #fed7d7;
            color: #2f855a;
            font-size: 0.83rem;
            line-height: 1.4;
        }

        /* ── Collapsible danger level sections ──────────────────────────── */
        .danger-level-section {
            border: 1px solid #fed7d7;
            border-radius: 8px;
            margin-bottom: 0.6rem;
            overflow: hidden;
            background: #ffffff;
        }
        .danger-level-head {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 0.9rem;
            cursor: pointer;
            background: #fff5f5;
            user-select: none;
        }
        .danger-level-arrow { font-size: 0.75rem; color: #c53030; }
        .danger-level-title {
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: 0.85rem;
            color: #7b1c1c;
            flex: 1;
        }
        .danger-level-count {
            background: #fed7d7;
            color: #7b1c1c;
            font-weight: 700;
            font-size: 0.72rem;
            padding: 0.1rem 0.5rem;
            border-radius: 20px;
        }
        .danger-level-desc {
            padding: 0.4rem 0.9rem;
            font-size: 0.8rem;
            color: #744210;
            background: #fefce8;
            border-bottom: 1px solid #fefcbf;
            line-height: 1.45;
        }
        .danger-level-body { padding: 0.6rem 0.9rem; }

        .recent-comparisons {
            list-style: none;
            margin-top: 1rem;
        }
        .recent-comparisons li {
            padding: 0.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 0.8rem;
            cursor: pointer;
            border: 1px solid #e1f2ec;
            border-radius: 8px;
            background: white;
            min-width: 0;
            font-size: 0.83rem;
            color: #2f855a;
        }
        .recent-comparisons li .comp-text {
            cursor: pointer;
            flex: 1;
            min-width: 0;
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            overflow-wrap: anywhere;
            word-wrap: break-word;
            word-break: break-word;
            padding-right: 0.45rem;
        }
        .recent-comparisons li .delete-comp {
            background: none;
            border: none;
            color: #999;
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0rem 0.3rem 0rem 0rem;
        }
        .recent-comparisons li .delete-comp:hover {
            color: #e74c3c;
        }
        .profile-snapshot {
            padding: 0 1.4rem;
            margin-bottom: 0rem;
            background: linear-gradient(180deg, #ffffff 0%, #f4fcf5 100%);
            border: 1px solid rgba(62, 172, 118, 0.16);
            box-shadow: 0 20px 40px rgba(46, 128, 83, 0.08);
            border-radius: 8px;
            position: relative;
            overflow: hidden;
        }
        .profile-snapshot::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 96px;
            height: 6px;
            background: linear-gradient(90deg, #3EAC76 0%, #7edea2 100%);
            border-bottom-right-radius: 16px;
        }
        .profile-card-header {
            margin-bottom: 1rem;
        }
        .profile-card-header h2 {
            font-size: 1.2rem;
            margin: 0 0 0.3rem;
            color: #1f4330;
        }
        .profile-subtitle {
            margin: 0;
            color: #53635d;
            font-size: 0.92rem;
            line-height: 1.5;
        }
        .profile-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: minmax(min-content, max-content);
            column-gap: 0.9rem;
            row-gap: 0.8rem;
            align-items: start;
        }
        .profile-meta-left {
            grid-column: 1;
            grid-row: 1 / 4;
            display: grid;
            grid-template-rows: repeat(2, minmax(28px, auto));
            row-gap: 0.35rem;
        }
        .profile-meta-left p {
            margin: 0;
            display: flex;
            align-items: center;
            min-height: 15px;
            line-height: 1.2;
        }
        .profile-meta-left p:first-child {
            font-size: 1rem;
            color: #214f37;
            font-weight: 700;
        }
        .profile-meta-left p:nth-child(2) {
            color: #4a5e4f;
            font-size: 0.95rem;
        }
        .profile-meta-left p:nth-child(3) {
            color: #718096;
            font-size: 0.85rem;
        }
        .profile-tier-col {
            grid-column: 2;
            grid-row: 1;
        }
        .profile-snapshot p {
            margin: 0.25rem 0;
            color: #4a5568;
            font-size: 0.92rem;
        }
        .profile-snapshot strong {
            color: #2f855a;
            width: 78px;
            display: inline-block;
        }
        .stat-box {
            grid-column: 2;
            grid-row: 2 / 4;
            height: auto;
            background: rgba(255,255,255,0.75);
            border: 1px solid rgba(62, 172, 118, 0.12);
            border-radius: 8px;
            padding: 0.9rem 1rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 0.5rem;
        }
        .stat-item {
            color: #2f855a;
            font-size: 0.95rem;
            display: flex;
            align-items: baseline;
            gap: 0.35rem;
        }
        .stat-item .number {
            font-size: 1.1rem;
            font-weight: 700;
            color: #214f37;
        }
        .action-links {
            grid-column: 3;
            grid-row: 1 / 4;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            align-self: stretch;
            justify-content: flex-start;
            align-items: flex-end;
            width: auto;
        }

        /* Make individual action links compact and not stretch the column */
        .action-links .profile-action-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.55rem 1rem;
            font-size: 0.95rem;
            white-space: nowrap;
            border-radius: 16px;
            background: #3EAC76;
            color: white;
            border: none;
            box-shadow: 0 12px 24px rgba(62, 172, 118, 0.18);
            transition: transform 0.2s ease, background 0.2s ease;
            text-decoration: none;
        }
        .action-links .profile-action-link:hover {
            background: #2f8c5e;
            transform: translateY(-1px);
            text-decoration: none;
        }

        /* Mobile: keep it small and align with the other columns */
        @media (max-width: 900px) {
            .action-links {
                align-items: flex-end;
                justify-content: flex-end;
            }
            .action-links .profile-action-link {
                padding: 0.12rem 0.35rem;
                font-size: 0.85rem;
            }
        }
        .profile-snapshot .btn-small {
            padding: 0.35rem 0.75rem;
            font-size: 0.78rem;
            width: 100%;
        }
        .action-links .profile-action-link {
            text-decoration: none;
            color: #2f855a;
            font-weight: 400;
            font-size: 0.9rem;
            line-height: 1.35;
            display: flex;
            align-items: center;
            min-height: 28px;
        }
        .action-links .profile-action-link:hover {
            text-decoration: underline;
        }
        .message {
            margin-top: 1rem;
            padding: 0.8rem;
            border-radius: 30px;
            display: none;
        }
        .message.success {
            background: #d4edda;
            color: #2f855a;
            display: block;
        }
        .message.error {
            background: #f8d7da;
            color: #2f855a;
            display: block;
        }
        .modal-close-btn {
            background: #3EAC76;
            color: white;
            border: none;
            padding: 0.8rem 2rem;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            display: block;
            margin: 0 auto;
        }
        .modal-close-btn:hover {
            background: #359b69;
        }
        .aspects-pillar-group {
            margin-bottom: 0.8rem;
        }
        .aspects-pillar-group h4 {
            font-size: 1.05rem;
            color: #2f855a;
            margin: 0 0 0.4rem 0;
            padding-bottom: 0.3rem;
            border-bottom: 2px solid #e1f2ec;
        }
        .aspects-pillar-group h4.supporting-pillar {
            color: #805ad5;
            border-bottom-color: #e9d8fd;
        }
        .aspects-pillar-group ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .aspects-pillar-group li {
            display: flex;
            flex-direction: column;
            padding: 0.3rem 0.4rem;
            border-bottom: 1px solid #f0f0f0;
            font-size: 0.92rem;
        }
        .aspects-pillar-group li:last-child {
            border-bottom: none;
        }
        .aspect-row-header {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            flex-wrap: wrap;
        }
        .aspect-name {
            flex: 1;
            min-width: 0;
            font-weight: 500;
        }
        .aspect-calc-grid {
            display: flex;
            flex-wrap: nowrap;
            gap: 0.15rem 0.5rem;
            margin-top: 0.2rem;
            padding: 0.25rem 0.4rem;
            background: #f7fafc;
            border-radius: 8px;
            font-size: 0.8rem;
            overflow-x: auto;
        }
        .calc-item {
            display: flex;
            align-items: center;
            gap: 0.2rem;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .calc-label {
            color: #718096;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .calc-val {
            font-weight: 600;
            color: #2d3748;
            font-family: 'Courier New', monospace;
            font-size: 0.82rem;
        }
        .aspect-weight {
            margin-left: 0.6rem;
            font-size: 0.82rem;
            font-weight: 600;
            padding: 0.15rem 0.5rem;
            border-radius: 10px;
            white-space: nowrap;
        }
        .aspect-weight.exact { background: #c6f6d5; color: #276749; }
        .aspect-weight.strong { background: #bee3f8; color: #2a4365; }
        .aspect-weight.moderate { background: #fefcbf; color: #744210; }
        .aspect-weight.weak { background: #fed7d7; color: #822727; }
        .aspect-weight.negligible { background: #e2e8f0; color: #4a5568; }
        .aspect-type-badge {
            margin-left: 0.4rem;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 0.1rem 0.4rem;
            border-radius: 8px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .aspect-type-badge.major { background: #3EAC76; color: white; }
        .aspect-type-badge.minor { background: #a0aec0; color: white; }
        .aspect-type-badge.element { background: #805ad5; color: white; }

        /* ── Pillar Breakdown Report ── */
        .breakdown-pillar-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            margin-bottom: 1.2rem;
            overflow: hidden;
        }
        .breakdown-pillar-header {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.8rem 1.2rem;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s;
        }
        .breakdown-pillar-header:hover { background: #f7fafc; }
        .breakdown-pillar-header.primary-hdr { border-left: 4px solid #d69e2e; }
        .breakdown-pillar-header.supporting-hdr { border-left: 4px solid #805ad5; }
        .bdr-toggle { font-size: 0.7rem; color: #a0aec0; transition: transform 0.2s; flex-shrink: 0; }
        .bdr-toggle.open { transform: rotate(90deg); }
        .bdr-pillar-name { font-weight: 700; font-size: 1rem; color: #2d3748; flex: 1; }
        .bdr-domain-tag {
            font-size: 0.72rem;
            font-weight: 600;
            padding: 0.15rem 0.5rem;
            border-radius: 8px;
            background: #edf2f7;
            color: #4a5568;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .bdr-score-badge {
            font-weight: 700;
            font-size: 0.95rem;
            padding: 0.2rem 0.6rem;
            border-radius: 10px;
            min-width: 52px;
            text-align: center;
        }
        .bdr-score-badge.strong { background: #c6f6d5; color: #22543d; }
        .bdr-score-badge.moderate { background: #fefcbf; color: #744210; }
        .bdr-score-badge.weak { background: #fed7d7; color: #742a2a; }
        .bdr-flag-tag {
            font-size: 0.68rem;
            font-weight: 600;
            padding: 0.1rem 0.4rem;
            border-radius: 6px;
            text-transform: uppercase;
        }
        .bdr-flag-tag.strength { background: #c6f6d5; color: #276749; }
        .bdr-flag-tag.area_to_watch { background: #fed7d7; color: #9b2c2c; }
        .bdr-pillar-body {
            display: none;
            padding: 0 1.2rem 1rem 1.2rem;
        }
        .bdr-pillar-body.open { display: block; }
        /* Score equation summary */
        .bdr-equation-box {
            background: #f7fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 0.6rem 0.8rem;
            margin-bottom: 0.8rem;
            font-family: 'Courier New', monospace;
            font-size: 0.82rem;
            color: #4a5568;
            display: flex;
            flex-wrap: wrap;
            gap: 0.3rem 1rem;
            align-items: center;
        }
        .bdr-eq-label { font-weight: 700; color: #2d3748; }
        .bdr-eq-val { font-weight: 600; }
        .bdr-eq-pos { color: #276749; }
        .bdr-eq-neg { color: #822727; }
        .bdr-eq-dim { color: #a0aec0; }
        /* Factor rows */
        .bdr-factors-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.84rem;
        }
        .bdr-factors-table thead th {
            background: #f7fafc;
            font-weight: 700;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #718096;
            padding: 0.45rem 0.5rem;
            border-bottom: 2px solid #e2e8f0;
            text-align: left;
            white-space: nowrap;
        }
        .bdr-factors-table thead th:not(:first-child) { text-align: center; }
        .bdr-factors-table tbody tr { transition: background 0.12s; }
        .bdr-factors-table tbody tr:hover { background: #f0fff4; }
        .bdr-factors-table tbody tr.elem-row:hover { background: #faf5ff; }
        .bdr-factors-table tbody tr.house-row { background: #faf0ff; }
        .bdr-factors-table tbody tr.house-row:hover { background: #f3e8ff; }
        .bdr-factors-table tbody tr.angle-row { background: #ebf8ff; }
        .bdr-factors-table tbody tr.angle-row:hover { background: #bee3f8; }
        .bdr-factors-table tbody tr:nth-child(even) { background: #fafafa; }
        .bdr-factors-table tbody tr:nth-child(even):hover { background: #f0fff4; }
        .bdr-factors-table td {
            padding: 0.45rem 0.5rem;
            border-bottom: 1px solid #f0f0f0;
            vertical-align: middle;
        }
        .bdr-factors-table td:not(:first-child) { text-align: center; }
        .bdr-factor-name {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
        }
        .bdr-factor-planets { font-weight: 600; color: #2d3748; }
        .bdr-dw-badge { font-size: 0.65rem; color: #744210; background: #fefcbf; border: 1px solid #f6e05e; border-radius: 3px; padding: 0 0.25rem; vertical-align: middle; cursor: default; }
        .bdr-factor-angles { font-size: 0.68rem; color: #718096; font-family: 'Courier New', monospace; display: block; margin-top: 0.05rem; }
        /* Power Factors section */
        .bdr-power-factors-section { margin-top: 0.65rem; border: 1px solid #e9d8fd; border-radius: 6px; overflow: hidden; }
        .bdr-pf-header { display: flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.75rem; background: #faf5ff; font-size: 0.78rem; font-weight: 600; color: #553c9a; cursor: pointer; user-select: none; }
        .bdr-pf-header .bdr-pf-arrow { font-size: 0.65rem; transition: transform 0.2s; }
        .bdr-pf-header.open .bdr-pf-arrow { transform: rotate(90deg); }
        .bdr-pf-count { margin-left: auto; background: #e9d8fd; color: #553c9a; font-size: 0.68rem; font-weight: 700; padding: 0.06rem 0.38rem; border-radius: 10px; }
        .bdr-pf-body { display: none; padding: 0.4rem 0.6rem 0.5rem; background: #fff; }
        .bdr-pf-body.open { display: block; }
        .bdr-pf-realm { font-size: 0.66rem; font-weight: 600; padding: 0.06rem 0.32rem; border-radius: 4px; }
        .pf-realm-chart { background: #ebf8ff; color: #2b6cb0; }
        .pf-realm-global { background: #f0fff4; color: #276749; }
        .bdr-factor-aspect {
            font-size: 0.76rem;
            color: #718096;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }
        .bdr-factor-sign { font-weight: 700; font-size: 0.9rem; }
        .bdr-factor-sign.pos { color: #276749; }
        .bdr-factor-sign.neg { color: #822727; }
        .bdr-mono {
            font-family: 'Courier New', monospace;
            font-size: 0.8rem;
            color: #2d3748;
        }
        .bdr-formula {
            font-family: 'Courier New', monospace;
            font-size: 0.75rem;
            color: #a0aec0;
            white-space: nowrap;
        }
        .bdr-contribution {
            font-weight: 700;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
        }
        .bdr-contribution.pos { color: #276749; }
        .bdr-contribution.neg { color: #822727; }
        .bdr-impact {
            font-size: 0.72rem;
            font-weight: 600;
            padding: 0.1rem 0.35rem;
            border-radius: 6px;
            display: inline-block;
        }
        .bdr-impact.pos-imp { background: #c6f6d5; color: #276749; }
        .bdr-impact.neg-imp { background: #fed7d7; color: #822727; }
        /* Element badges */
        .elem-badge {
            display: inline-flex;
            align-items: center;
            font-size: 0.72rem;
            font-weight: 600;
            padding: 0.1rem 0.4rem;
            border-radius: 6px;
        }
        .elem-badge.fire { background: #fff5f5; color: #c53030; }
        .elem-badge.earth { background: #f0fff4; color: #276749; }
        .elem-badge.air { background: #ebf8ff; color: #2a4365; }
        .elem-badge.water { background: #ebf4ff; color: #3182ce; }
        .elem-arrow { color: #a0aec0; font-size: 0.68rem; margin: 0 0.15rem; }
        /* Explanation row (nested under factor) */
        .bdr-explain-row td {
            padding: 0.2rem 0.5rem 0.4rem 0.5rem;
            border-bottom: 1px solid #f0f0f0;
            font-size: 0.76rem;
            color: #718096;
            font-style: italic;
            background: #fcfcfc;
        }
        /* ── Rich explanation block for backend-generated explanations ── */
        .bdr-rich-expl {
            background: #f8fafd;
            border-left: 3px solid #4c6ef5;
            border-radius: 6px;
            padding: 0.6rem 0.8rem;
            font-style: normal;
            font-size: 0.82rem;
            color: #2d3748;
            line-height: 1.55;
        }
        .bdr-rich-label {
            font-weight: 700;
            font-size: 0.88rem;
            color: #2b3a8c;
            margin-bottom: 0.4rem;
        }
        .bdr-rich-practical {
            color: #2d3748;
            margin: 0.35rem 0;
        }
        .bdr-rich-context {
            color: #4a5568;
            font-style: italic;
            margin: 0.3rem 0;
        }
        .bdr-rich-contrib {
            color: #2b6cb0;
            font-weight: 500;
            margin: 0.3rem 0;
            font-size: 0.78rem;
        }
        .bdr-rich-toggle-row {
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.78rem;
            font-weight: 600;
            color: #4c6ef5;
            padding: 0.35rem 0;
            margin-top: 0.25rem;
            border-top: 1px dashed #e2e8f0;
            transition: color 0.12s;
        }
        .bdr-rich-toggle-row:hover {
            color: #3649c9;
        }
        .bdr-rich-toggle-row.open {
            color: #553c9a;
        }
        .bdr-rich-arrow {
            font-size: 0.62rem;
            display: inline-block;
            transition: transform 0.15s;
            flex-shrink: 0;
        }
        .bdr-rich-extra {
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px dashed #e2e8f0;
        }
        .bdr-rich-extra p {
            margin: 0.4rem 0;
            font-size: 0.8rem;
            color: #4a5568;
            line-height: 1.5;
        }
        .bdr-rich-sig { color: #553c9a; }
        .bdr-rich-mod { 
            background: #f7fafc;
            padding: 0.4rem 0.6rem;
            border-radius: 4px;
        }
        .bdr-rich-cond {
            background: #faf5ff;
            padding: 0.4rem 0.6rem;
            border-radius: 4px;
        }
        /* Totals row */
        .bdr-totals-row td {
            font-weight: 700;
            padding: 0.5rem;
            border-top: 2px solid #e2e8f0;
            border-bottom: none;
            background: #f7fafc;
        }
        /* Section dividers */
        .bdr-section-label {
            font-size: 1.05rem;
            font-weight: 700;
            margin: 1.2rem 0 0.6rem 0;
            padding: 0.4rem 0.7rem;
            border-radius: 8px;
        }
        .bdr-section-label.primary-sec { color: #2f855a; background: #fffbeb; border-left: 4px solid #d69e2e; }
        .bdr-section-label.supporting-sec { color: #805ad5; background: #faf5ff; border-left: 4px solid #805ad5; }
        /* Legend */
        .bdr-legend {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1rem;
            padding: 0.5rem 0.8rem;
            background: #f7fafc;
            border-radius: 8px;
            font-size: 0.74rem;
            color: #718096;
        }
        .bdr-legend-item { display: flex; align-items: center; gap: 0.25rem; }
        .bdr-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
        .bdr-legend-dot.pos-dot { background: #38a169; }
        .bdr-legend-dot.neg-dot { background: #e53e3e; }
        .bdr-legend-dot.elem-dot { background: #805ad5; }
        /* ── Condition drawer ──────────────────────────────────────── */
        .bdr-cond-toggle-row {
            cursor: pointer;
            user-select: none;
        }
        .bdr-cond-toggle-row td {
            padding: 0.18rem 0 0.18rem 0.6rem;
            background: transparent;
            border-top: 1px dashed #e2e8f0;
            font-size: 0.72rem;
            color: #718096;
        }
        .bdr-cond-toggle-row:hover td { color: #2d3748; background: #f7fafc; }
        .bdr-cond-toggle-row .bdr-cond-arrow { font-size: 0.65rem; margin-right: 0.3rem; }
        .bdr-cond-drawer { display: none; }
        .bdr-cond-drawer.open { display: table-row; }
        .bdr-cond-drawer td { padding: 0.6rem 0.8rem 0.8rem; background: #f7fafc; border-top: none; }
        .bdr-cond-equation {
            font-size: 0.76rem; font-family: 'Courier New', monospace;
            background: #edf2f7; border-radius: 6px;
            padding: 0.4rem 0.75rem; margin-bottom: 0.55rem;
            color: #2d3748; line-height: 1.5;
        }
        .bdr-cond-equation .ceq-result { font-weight: 700; color: #276749; }
        .bdr-cond-equation .ceq-result.neg { color: #c53030; }
        .bdr-cond-table {
            width: 100%; border-collapse: collapse; font-size: 0.73rem;
        }
        .bdr-cond-table th {
            text-align: left; padding: 0.2rem 0.5rem;
            background: #e2e8f0; color: #4a5568; font-weight: 600;
            border-bottom: 1px solid #cbd5e0;
        }
        .bdr-cond-table td { padding: 0.22rem 0.5rem; border-bottom: 1px solid #edf2f7; color: #4a5568; }
        .bdr-cond-table tr:last-child td { border-bottom: none; }
        .bdr-cond-table tr:hover td { background: #ebf8ff; }
        .cond-pct { font-weight: 700; font-family: monospace; padding: 0.08rem 0.35rem; border-radius: 4px; }
        .cond-pct.pos { color: #22543d; background: #c6f6d5; }
        .cond-pct.neg { color: #822727; background: #fed7d7; }
        .cond-pct.zero { color: #718096; background: #edf2f7; }
        /* ── V3 result block ──────────────────────────────────────────── */
        .v3-hero {
            display:flex; align-items:center; gap:1.5rem;
            padding:1rem 1.4rem; margin-bottom:0.9rem;
            background:#f0fff4; border-radius:0.7rem;
            border-left:4px solid #2f855a;
        }
        .v3-hero-score { font-size:2.6rem; font-weight:800; color:#2f855a; line-height:1; }
        .v3-hero-meta { display:flex; flex-direction:column; gap:0.35rem; }
        .v3-grade-badge { display:inline-block; font-size:1.25rem; font-weight:700; padding:0.15rem 0.6rem; border-radius:0.4rem; }
        .v3-mode-badge { font-size:0.76rem; color:#718096; font-style:italic; }
        .v3-grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:0.75rem; }
        @media(max-width:600px) { .v3-grid-2col { grid-template-columns:1fr; } }
        .v3-card { background:#fff; border:1px solid #e2e8f0; border-radius:0.6rem; padding:0.75rem 1rem; margin-bottom:0.75rem; }
        .v3-card-title { font-size:0.75rem; font-weight:700; color:#718096; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.6rem; }
        .v3-toggle-header { cursor:pointer; user-select:none; display:flex; align-items:center; gap:0.4rem; }
        .v3-toggle-header:hover { color:#2d3748; }
        .v3-section-arrow { font-size:0.6rem; display:inline-block; transition:transform 0.15s; }
        .v3-section-arrow.open { transform:rotate(90deg); }
        .v3-count-badge { font-size:0.68rem; font-weight:700; padding:0.08rem 0.4rem; border-radius:1rem; background:#edf2f7; color:#4a5568; }
        .v3-count-badge.danger { background:#fed7d7; color:#c53030; }
        .v3-count-badge.gold { background:#fefcbf; color:#744210; }
        /* Pillar bars */
        .v3-pillar-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.45rem; }
        .v3-pillar-name { font-size:0.78rem; color:#4a5568; width:38%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .v3-pillar-type { font-size:0.62rem; padding:0.05rem 0.28rem; border-radius:0.2rem; vertical-align:middle; margin-left:0.2rem; }
        .v3-pillar-type.core { background:#e6fffa; color:#234e52; }
        .v3-pillar-type.supp { background:#f7fafc; color:#718096; border:1px solid #e2e8f0; }
        .v3-pillar-track { flex:1; height:8px; background:#edf2f7; border-radius:4px; overflow:hidden; }
        .v3-pillar-fill { height:8px; border-radius:4px; }
        .v3-pillar-score { font-size:0.78rem; font-weight:700; width:2.4rem; text-align:right; flex-shrink:0; }
        /* Polarity */
        .v3-polarity-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.4rem; }
        .v3-polarity-card { background:#f7fafc; border-radius:0.4rem; padding:0.4rem 0.6rem; text-align:center; }
        .v3-polarity-label { font-size:0.68rem; color:#718096; margin-bottom:0.15rem; }
        .v3-polarity-val { font-size:1rem; font-weight:700; color:#2d3748; }
        /* DW chips */
        .v3-dw-chips { display:flex; flex-wrap:wrap; gap:0.4rem; padding-top:0.4rem; }
        .v3-dw-chip { font-size:0.76rem; font-weight:600; padding:0.2rem 0.65rem; border-radius:1rem; background:#fefcbf; color:#744210; border:1px solid #f6e05e; }
        /* Danger items */
        .v3-danger-item { display:flex; align-items:baseline; flex-wrap:wrap; gap:0.35rem; padding:0.4rem 0; border-bottom:1px solid #fed7d7; font-size:0.81rem; }
        .v3-danger-item:last-child { border-bottom:none; }
        .v3-danger-sev { margin-left:auto; color:#c53030; font-weight:700; font-size:0.76rem; white-space:nowrap; }
        /* Pairs table header */
        .v3-pairs-head th { text-align:left; padding:0.3rem 0.5rem; background:#f7fafc; color:#718096; font-size:0.72rem; font-weight:700; text-transform:uppercase; border-bottom:2px solid #e2e8f0; letter-spacing:0.03em; }
        /* V3 cross-pair condition drawer */
        .v3-pair-row { cursor: pointer; }
        .v3-pair-row:hover td { background: #ebf8ff !important; }
        .v3-cond-drawer { display: none; }
        .v3-cond-drawer.open { display: table-row; }
        .v3-cond-drawer td {
            padding: 0.6rem 0.8rem 0.8rem; background: #f7fafc;
            border-bottom: 1px solid #e2e8f0;
        }
        /* No-data */
        .bdr-no-factors { color: #a0aec0; font-style: italic; padding: 0.5rem 0; font-size: 0.86rem; }
        @media (max-width: 768px) {
            .bdr-factors-table { font-size: 0.78rem; }
            .bdr-factors-table thead th { font-size: 0.65rem; padding: 0.35rem 0.3rem; }
            .bdr-factors-table td { padding: 0.35rem 0.3rem; }
            .bdr-formula { display: none; }
            .breakdown-pillar-header { flex-wrap: wrap; gap: 0.4rem; }
            .bdr-equation-box { font-size: 0.75rem; }
        }
        
        .no-aspects-msg {
            color: #999;
            font-style: italic;
            padding: 0.3rem 0.5rem;
            font-size: 0.88rem;
        }
        .date-item {
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e2e8f0;
        }
        .date-item:last-child {
            border-bottom: none;
        }
        .reasons-list {
            margin-left: 1.5rem;
            margin-top: 0.5rem;
            font-size: 0.9rem;
            color: #2f855a;
            list-style-type: disc;
        }
        .reasons-list li {
            margin-bottom: 0.2rem;
        }
        footer {
            background: white;;
            border-top: 1px solid #dddfe2;
            padding: 0 1.5rem;
            text-align: center;
            color: #999da3;
            margin-top: 2rem;
        }
        .quick-tips-card {
            background: #fffbe6;
            border: 1.5px solid #ffe58f;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            max-width: 1300px;
            margin: 1rem auto 0;
            padding: 1rem;
        }
        .quick-tips-card .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        .quick-tips-card .close-icon {
            border: none;
            background: transparent;
            color: #2f855a;
            font-size: 1.25rem;
            cursor: pointer;
            font-weight: 700;
            line-height: 1;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        .quick-tips-card .close-icon:hover {
            background: rgba(62, 172, 119, 0.15);
            color: #3EAC76;
        }
        .quick-tips-card ul {
            margin: 0;
            padding-left: 1.2rem;
            color: #2f855a;
            font-size: 0.9rem;
            line-height: 1.45;
        }
        .quick-tips-bottom { display: none; }
        .small {
            display: block;
             margin-top: .75rem;
            color: #2f855a;
            font-size: .82rem;  
        }
        /* Astro display styles (encoding-safe) */
        .astro-section { margin-top: 0.6rem; padding: 0.6rem; background: #fff; border-radius: 8px; border: 1px solid #e6f4ea; }
        .astro-section h4 { margin: 0 0 0.45rem 0; color: #2f855a; font-size: 0.98rem; }
        /* Prevent planet/astro cards from overflowing their card container */
        .astro-grid,
        .astro-grid-planets {
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 0;
            justify-items: start;
            align-items: start;
            grid-auto-flow: row;
        }

        .astro-card {
            box-sizing: border-box;
            margin: 0;
            max-width: 100%;
            overflow: hidden;
            word-break: break-word;
        }

        /* Ensure the primary chart area clips any accidental overflow */
        .primary-chart {
            overflow: hidden;
        }

        /* Planet grid: two horizontal rows of five on wide screens; responsive shrink on smaller widths */
        .astro-grid-planets {
            display: grid;
            gap: 0.4rem;
            grid-auto-rows: min-content;
            /* default fallback for small screens */
            grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
        }

        /* Desktop / wide: force 5 columns so 10 items become 2 rows of 5 */
        @media (min-width: 1000px) {
            .astro-grid-planets {
                grid-template-columns: repeat(5, 1fr);
            }
        }

        .astro-grid-planets .astro-card {
            padding: 0.40rem;
            font-size: 0.85rem;
            line-height: 1.03;
            text-align: center;
        }

        @media (max-width: 1200px) {
            .astro-grid-planets .astro-card { font-size: 0.80rem; padding: 0.34rem; }
        }

        @media (max-width: 900px) {
            .astro-grid-planets { grid-template-columns: repeat(4, minmax(56px, 1fr)); }
            .astro-grid-planets .astro-card { font-size: 0.74rem; padding: 0.30rem; }
        }

        @media (max-width: 420px) {
            .astro-grid-planets { grid-template-columns: repeat(4, minmax(46px, 1fr)); }
            .astro-grid-planets .astro-card { font-size: 0.68rem; padding: 0.22rem; }
        }
        .astro-list { list-style: none; margin: 0; padding: 0; }
        .astro-list li { padding: 0.20rem 0; color: #3a2800; font-size: 0.85rem; }
        .astro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.35rem; }
        /* Planets grid: allow up to 10 columns on wide screens, fall back responsively */
        .astro-grid-planets { grid-template-columns: repeat(10, minmax(80px, 1fr)); }
        @media (max-width: 1600px) {
            .astro-grid-planets { grid-template-columns: repeat(8, minmax(90px, 1fr)); }
        }
        @media (max-width: 1200px) {
            .astro-grid-planets { grid-template-columns: repeat(6, minmax(100px, 1fr)); }
        }
        @media (max-width: 900px) {
            .astro-grid-planets { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
        }
        .astro-card { background: #f8fcfa; border-radius: 8px; padding: 0.45rem; box-shadow: 0 3px 8px rgba(0,0,0,0.04); box-sizing: border-box; width: 100%; overflow: hidden; overflow-wrap: break-word; word-break: normal; min-height: 54px; font-size: 0.83rem; }
        .astro-line { display:flex; gap:0.4rem; align-items:baseline; flex-wrap:wrap; }
        .astro-card-left { display:flex; flex-direction:column; gap:0.14rem; align-items:flex-start; min-width:0; }
        .astro-name { font-weight:800; color:#234f3a; font-size:clamp(0.75rem, 1.0vw, 0.83rem); line-height:1.05; }
        .astro-degree { color:#1f3f2b; font-weight:700; font-size:clamp(0.7rem, 0.95vw, 0.78rem); line-height:1.05; }
        .astro-sign { color:#6b7280; font-size:clamp(0.68rem, 0.85vw, 0.72rem); line-height:1.05; }
        .astro-card-header { display:flex; align-items:center; justify-content:space-between; gap:0.4rem; }
        .astro-card-left { display:flex; gap:0.45rem; align-items:baseline; }
        .astro-actions { display:flex; gap:0.3rem; align-items:center; flex-shrink:1; }
        .astro-actions button { background:#2f9f63; border:none; color:white; padding:0.26rem 0.45rem; border-radius:8px; cursor:pointer; font-size:0.78rem; height:40px; display:inline-flex; align-items:center; justify-content:center; }
        .astro-detail { margin-top:0.35rem; color:#586067; font-size:0.8rem; max-height:0; overflow:hidden; transition: max-height 220ms ease; }
        .astro-detail.open { max-height:220px; overflow:auto; }
        @media (max-width: 600px) {
            .astro-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.3rem; }
            .astro-card { min-height:48px; padding:0.35rem; }
            .astro-name { font-size:0.82rem; }
            .astro-degree { font-size:0.76rem; }
            .astro-sign { font-size:0.7rem; }
        }
        @media (max-width: 900px) {
            .container {
                grid-template-columns: 1fr;
            }
            .dashboard-profile-card {
                grid-column: 1;
                grid-row: 1;
            }
            .dashboard-birth-card {
                grid-column: 1;
                grid-row: 2;
            }
            .dashboard-compare-card {
                grid-column: 1;
            }
            .profile-grid {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
                row-gap: 0.15rem;
                gap: 0.15rem;
            }
            .profile-meta-left {
                grid-column: 1;
                grid-row: 1;
                grid-template-rows: auto;
                row-gap: 0.2rem;
            }
            .profile-tier-col {
                grid-column: 2;
                grid-row: 1;
            }
            .stat-box {
                grid-column: 2 / 3;
                grid-row: 2;
                height: auto;
            }
            .action-links {
                grid-column: 3;
                grid-row: 2;
            }
            .chart-actions {
                margin-top: 0.85rem;
            }
            .action-row #seeDatesBtn {
            width: 100%;
            padding: 0.9rem 2rem;
            font-size: 1.1rem;
            box-sizing: border-box;
            }            
            .quick-tips-bottom {
                padding: 0 1.2rem;
            }
            .container { padding: 1rem; overflow-x: hidden; }
            .card { padding: 0 12px; }
            .header { padding: 0 1rem; }
        }

        /* extra mobile safety: ensure media/grid items don't overflow */
        @media (max-width: 420px) {
            .container { padding-left: 10px; padding-right: 10px; }
            img, iframe, .astro-card, .astro-grid, .chart-info { max-width: 100%; box-sizing: border-box; }
            .primary-chart { padding: 0 0.5rem 1rem 0; }
        }

        /* ===== LOG VIEWER MODAL ===== */
        .log-viewer-modal {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            justify-content: center;
            align-items: center;
            z-index: 3000;
            backdrop-filter: blur(4px);
        }
        .log-viewer-modal.active {
            display: flex;
        }
        .log-viewer-modal-content {
            background: #fff;
            border-radius: 8px;
            width: 92%;
            max-width: 860px;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 25px 60px rgba(0,0,0,0.3);
            animation: logModalFadeIn 0.2s ease;
        }
        @keyframes logModalFadeIn {
            from { opacity: 0; transform: scale(0.96) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .log-viewer-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 1.8rem;
            border-bottom: 2px solid #e2e8f0;
            background: linear-gradient(135deg, #f8fbfa, #f0f8f4);
            border-radius: 8px 8px 0 0;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .log-viewer-modal-header h2 {
            margin: 0;
            color: #2f855a;
            font-size: 1.3rem;
            border: none;
        }
        .log-viewer-close {
            font-size: 1.8rem;
            color: #718096;
            cursor: pointer;
            line-height: 1;
            transition: color 0.15s;
            padding: 0 0.25rem;
        }
        .log-viewer-close:hover {
            color: #e53e3e;
        }
        .log-viewer-modal-footer {
            padding: 1rem 1.8rem;
            border-top: 1px solid #e2e8f0;
            text-align: right;
            background: #f8fafc;
            border-radius: 0 0 8px 8px;
            position: sticky;
            bottom: 0;
        }
        .log-viewer-modal-footer .btn {
            padding: 0.6rem 2rem;
        }
        #logViewerContent {
            padding: 1.2rem 1.8rem;
        }
        #logViewerContent .collapsible-section {
            border-top: 1px solid rgba(0,0,0,0.04);
            margin: 0.5rem 0;
        }
        #logViewerContent .collapsible-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: transparent;
            border: 0;
            padding: 0.5rem 0;
            font-weight: 600;
            cursor: pointer;
            color: #2f855a;
            font-size: 1rem;
        }
        #logViewerContent .collapsible-toggle:focus {
            outline: 2px solid rgba(47,133,90,0.25);
            border-radius: 4px;
        }
        #logViewerContent .collapsible-body {
            padding: 0.25rem 0 0.75rem;
        }
        #logViewerContent .collapsible-toggle .chevron {
            transition: transform 0.18s ease;
            margin-left: 0.5rem;
        }
        #logViewerContent .collapsible-section:not(.open) .collapsible-toggle .chevron {
            transform: rotate(-90deg);
        }
        #logViewerContent .collapsible-body pre {
            max-height: 300px;
            overflow: auto;
            background: #f7f7f7;
            padding: 8px;
            border-radius: 4px;
        }
        #logViewerContent .log-section {
            background: #f8fcfa;
            border: 1px solid #d6efe2;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        #logViewerContent .log-section h3 {
            color: #2f855a;
            font-size: 1.05rem;
            margin: 0 0 0.8rem 0;
            border: none;
        }
        #logViewerContent .step {
            border-left: 4px solid #3EAC77;
            padding-left: 0.8rem;
            margin-bottom: 0.8rem;
        }
        #logViewerContent .step .timestamp {
            color: #888;
            font-size: 0.85em;
        }
        #logViewerContent .step .formula {
            color: #16a085;
            font-size: 0.9em;
            margin: 0.2em 0;
        }
        #logViewerContent .step .inputs,
        #logViewerContent .step .output {
            font-size: 0.93em;
            background: #f4f8fb;
            border-radius: 4px;
            padding: 0.5em;
            margin: 0.2em 0;
        }
        @media (max-width: 600px) {
            .log-viewer-modal-content {
                width: 96%;
                max-height: 90vh;
                border-radius: 8px;
            }
            .log-viewer-modal-header {
                padding: 0.8rem 1rem;
                flex-wrap: wrap;
            }
            .log-viewer-modal-header h2 {
                font-size: 1.1rem;
            }
            #logViewerContent {
                padding: 0.8rem 1rem;
            }
        }
        /* ===== MAP MODAL ===== */
        .map-modal {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        .map-modal.active { display: flex; }
        .map-modal-content {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            width: 90%; max-width: 860px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .map-modal-content h3 { margin-bottom: 0.9rem; color: #2d3436; font-size: 1.1rem; }
        #compareMap,
        #seeDatesMap { height: 420px; width: 100%; border-radius: 10px; margin-bottom: 1rem; }
        .map-modal-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
        .map-modal-info { font-size: 0.85rem; color: #4a5568; text-align: left; word-break: break-word; min-width: 0; flex: 1; }
        .map-modal-buttons { display: flex; gap: 10px; flex-shrink: 0; }
/* ── Positions Card Tabs ─────────────────────────────────────── */
.toggle-tabs {
    display: flex;
    margin-bottom: 0.6rem;
    border-bottom: 2px solid #e4e6eb;
}
.toggle-tab {
    flex: 1;
    text-align: center;
    padding: 0.8rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    font-size: 1.1rem;
    color: #718096;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.2s;
}
.toggle-tab:hover {
    opacity: 1;
}
.toggle-tab.active {
    color: #2d3748;
    opacity: 1;
    border-bottom: 3px solid #2d3748;
}
.toggle-tab-panel {
    display: none;
}
.toggle-tab-panel.active {
    display: block;
}

/* ── Compact Astro Positions Styles ──────────────────────────── */
.astro-compact {
    padding: 0.3rem 0.5rem;
    margin-top: 0.25rem;
}

.astro-planets-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    align-items: center;
    padding: 0.25rem 0;
}

.astro-planet-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.90rem;
    color: #2d3748;
    white-space: nowrap;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    background: rgba(248,252,250,0.7);
    border: 1px solid rgba(62,172,118,0.08);
}

.apc-name {
    font-weight: 700;
    color: #2f855a;
    font-size: 0.83rem;
}

.apc-glyph {
    font-size: 1.0rem;
    color: #3EAC77;
    font-weight: bold;
    min-width: 1rem;
    text-align: center;
}

.apc-degree {
    font-weight: 600;
    color: #276644;
    font-size: 0.86rem;
}

.apc-sign {
    color: #4a5568;
    font-size: 0.82rem;
}

.apc-rx {
    color: #e53e3e;
    font-weight: 700;
    font-size: 0.72rem;
    margin-left: 0.05rem;
}

/* Angles Row */
.astro-angles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: center;
    padding: 0.25rem 0;
}

.astro-angle-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.90rem;
    color: #2d3748;
    white-space: nowrap;
}

.aac-symbol {
    font-weight: 700;
    color: #1a70b8;
    font-size: 0.90rem;
    min-width: 1.8rem;
}

.aac-degree {
    font-weight: 600;
    color: #276644;
    font-size: 0.86rem;
}

.aac-sign {
    color: #4a5568;
    font-size: 0.82rem;
}

/* Houses 2-Column Compact Grid */
.astro-houses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem 0.8rem;
    padding: 0.25rem 0;
    font-size: 0.83rem;
}

.astro-house-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    white-space: normal;
    padding: 0.15rem 0;
    border-bottom: 1px solid rgba(62,172,118,0.06);
}

.ahc-row {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ahc-num {
    font-weight: 700;
    color: #1a70b8;
    min-width: 3.2rem;
    font-size: 0.8rem;
}

.ahc-degree {
    font-weight: 600;
    color: #276644;
}

.ahc-sign {
    color: #4a5568;
    font-size: 0.78rem;
}

.ahc-meaning {
    color: #718096;
    font-size: 0.72rem;
    font-style: italic;
    padding-left: 3.5rem;
}

@media (max-width: 600px) {
    .astro-houses-grid {
        grid-template-columns: 1fr;
    }
    .astro-planets-row {
        gap: 0.3rem 0.5rem;
    }
    .astro-planet-chip {
        font-size: 0.68rem;
    }
}

/* ── Birth Chart card: positions + chart side by side ───────── */
.chart-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

.chart-positions-panel {
    flex: 0 0 290px;
    max-width: 298px;
    min-width: 0;
}

.chart-canvas-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* stretch, not center: the column header spans the full width so it lines
       up with the Positions header opposite it */
    align-items: stretch;
    gap: 0.6rem;
}

/* The header already sits in a 0.6rem flex gap. */
.chart-canvas-col .chart-panel-head {
    margin-bottom: 0;
}

/* ── what the chart responds to ────────────────────────────────
   The chart carries its own controls now — move buttons on its edges, a zoom
   cluster in the corner, a name index down one side — so the card spells them
   out underneath rather than leaving the reader to find them. Two columns while
   there is room, one when there is not. */
.chart-hints {
    /* Lives inside .chart-canvas-col, so it is shown/hidden with the chart
       itself (the column is the toggle target for "Birth Space"). The flex
       gap already spaces it from the canvas — no top margin needed. */
    margin: 0 0 0.15rem;
    padding: 0.6rem 0.4rem 0 1.5rem;
    padding-inline: 1.5rem 0.4rem;
    border-top: 1px solid rgba(62, 172, 118, 0.18);
    font-size: 0.72rem;
    line-height: 1.6;
    color: #7a8b80;
    letter-spacing: 0.02em;
    /* Two columns while the chart column is wide enough; the column width
       (20rem) drops it to one before the lines get cramped, e.g. while the
       Positions panel still sits beside the chart. */
    columns: 2 20rem;
    column-gap: 1.8rem;
}

.chart-hints li {
    break-inside: avoid;
    margin: 0 0 0.22rem;
}

@media (max-width: 820px) {
    .chart-hints { columns: 1; }
}

.chart-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.12rem;
    border-bottom: 2px solid #3EAC77;
}

.chart-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2f855a;
    min-width: 0;
}

/* Hide keycap for the Positions column. It drives the very same
   "Positions" toggle in the top bar, so the two always stay in sync. */
.chart-panel-hide {
    flex: 0 0 auto;
    font-size: 0.68rem;
    line-height: 1;
    padding: 0.22rem 0.46rem;
    border-radius: 10px;
    border: 1px solid rgba(62, 172, 118, 0.35);
    background: rgba(62, 172, 118, 0.10);
    color: #2f855a;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chart-panel-hide:hover {
    background: rgba(229, 62, 62, 0.10);
    border-color: rgba(229, 62, 62, 0.30);
    color: #e53e3e;
}

/* Narrow screens: the chart comes first and the positions stack under it. */
@media (max-width: 980px) {
    .chart-layout {
        flex-direction: column;
        align-items: stretch;
    }
    .chart-positions-panel {
        flex: 1 1 auto;
        max-width: none;
        order: 2;
    }
    .chart-canvas-col {
        order: 1;
    }
}

/* The positions column is narrow while the card is side-by-side, so the tab bar
   and every chip has to reflow instead of overflowing. Scoped to >=981px only:
   below that the panel goes full width and the roomier defaults come back. */
@media (min-width: 981px) {
    .chart-positions-panel .toggle-tabs {
        flex-wrap: wrap;
    }
    .chart-positions-panel .toggle-tab {
        /* Content-sized, so a tab that wraps onto its own row keeps its natural
           width instead of stretching across the whole row. */
        flex: 0 1 auto;
        padding: 0.42rem 0.38rem;
        font-size: 0.76rem;
    }
    .chart-positions-panel .astro-planets-row {
        gap: 0.28rem 0.4rem;
    }
    .chart-positions-panel .astro-planet-chip {
        flex-wrap: wrap;
        white-space: normal;
        gap: 0.2rem;
        font-size: 0.78rem;
    }
    .chart-positions-panel .apc-name { font-size: 0.76rem; }
    .chart-positions-panel .apc-sign { font-size: 0.74rem; }
    .chart-positions-panel .astro-angles-row {
        gap: 0.3rem 0.6rem;
    }
    .chart-positions-panel .astro-angle-chip {
        flex-wrap: wrap;
        white-space: normal;
        gap: 0.2rem;
        font-size: 0.78rem;
    }
    .chart-positions-panel .aac-symbol { font-size: 0.78rem; min-width: 1.55rem; }
    .chart-positions-panel .aac-sign { font-size: 0.74rem; }
    .chart-positions-panel .astro-houses-grid {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
    .chart-positions-panel .ahc-num { min-width: 2.9rem; font-size: 0.76rem; }
    .chart-positions-panel .ahc-sign { font-size: 0.74rem; }
    .chart-positions-panel .ahc-meaning { padding-left: 0; }
    .chart-positions-panel .astro-list li { font-size: 0.76rem; }
}

/* Chart column hidden: the positions column takes the whole card, so restore the
   roomier type the narrow side-by-side column had to give up. */
@media (min-width: 981px) {
    .chart-layout--no-chart .chart-positions-panel {
        flex: 1 1 auto;
        max-width: none;
    }
    .chart-layout--no-chart .chart-positions-panel .toggle-tab {
        padding: 0.8rem;
        font-size: 1.1rem;
    }
    .chart-layout--no-chart .chart-positions-panel .astro-planets-row { gap: 0.5rem 0.8rem; }
    .chart-layout--no-chart .chart-positions-panel .astro-planet-chip {
        white-space: nowrap;
        font-size: 0.90rem;
    }
    .chart-layout--no-chart .chart-positions-panel .apc-name { font-size: 0.83rem; }
    .chart-layout--no-chart .chart-positions-panel .apc-sign { font-size: 0.82rem; }
    .chart-layout--no-chart .chart-positions-panel .astro-angles-row { gap: 0.4rem 1rem; }
    .chart-layout--no-chart .chart-positions-panel .astro-angle-chip {
        white-space: nowrap;
        font-size: 0.90rem;
    }
    .chart-layout--no-chart .chart-positions-panel .aac-symbol { font-size: 0.90rem; min-width: 1.8rem; }
    .chart-layout--no-chart .chart-positions-panel .aac-sign { font-size: 0.82rem; }
    .chart-layout--no-chart .chart-positions-panel .astro-houses-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem 0.8rem;
    }
    .chart-layout--no-chart .chart-positions-panel .ahc-num { min-width: 3.2rem; font-size: 0.8rem; }
    .chart-layout--no-chart .chart-positions-panel .ahc-sign { font-size: 0.78rem; }
    .chart-layout--no-chart .chart-positions-panel .ahc-meaning { padding-left: 3.5rem; }
    .chart-layout--no-chart .chart-positions-panel .astro-list li { font-size: 0.85rem; }
}

/* ── Legend tab (sign key) ───────────────────────────────────── */
.slg-head {
    margin: 0.75rem 0 0.4rem;
    padding-bottom: 0.12rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2f855a;
    border-bottom: 1px solid rgba(47, 133, 90, 0.16);
}
.slg-head:first-child {
    margin-top: 0.15rem;
}

.sign-legend-hint {
    margin: 0 0 0.5rem;
    font-size: 0.74rem;
    font-style: italic;
    color: #718096;
}

.sign-legend-elements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    padding-bottom: 0.45rem;
    margin-bottom: 0.45rem;
    border-bottom: 1px solid rgba(62, 172, 118, 0.18);
}

.sle-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.26rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3a4a44;
    white-space: nowrap;
}

.sle-sw,
.slg-sw {
    flex: 0 0 auto;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Short marker for the angle rows (ASC / DSC / MC / IC). */
.slg-abbr {
    flex: 0 0 auto;
    min-width: 1.05rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* auto-fill so the legend uses the extra width when the panel is full-bleed
   on mobile, and settles into two tidy columns in the narrow side-by-side panel */
.sign-legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 0.24rem 0.5rem;
}

/* Structural band names are long — give them the full column width. */
.sign-legend-grid--list {
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

/* “Chart parts” rows: swatch, name and a one-line description of the part. */
.slg-part {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    min-width: 0;
}
.slg-part > .slg-sw {
    margin-top: 0.2rem;
}
.slg-part-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.slg-part-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2d3748;
}
.slg-desc {
    font-size: 0.7rem;
    line-height: 1.3;
    color: #718096;
}

.slg-item {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    font-size: 0.78rem;
    color: #2d3748;
}

.slg-glyph {
    flex: 0 0 auto;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
}

.slg-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Birth Chart (three.js glass disc) ──────────────────────────
   A dark "observatory window" set into the light card. The gradient is
   deliberately not fully opaque — a little of the card's own tint survives
   at the edges, so the chart reads as a window rather than a black hole. */
#birthChartSvg {
    background:
        radial-gradient(circle at 50% 32%,
            rgba(28, 38, 76, 0.86) 0%,
            rgba(12, 17, 38, 0.92) 46%,
            rgba(3, 5, 14, 0.96) 100%);
    position: relative;
    /* Required: horizontal drag orbits the chart instead of scrolling. */
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

#birthChartSvg:active {
    cursor: grabbing;
}

#birthChartSvg canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── the CSS2D label layer drawn over the chart ────────────────
   Scoped to #birthChartSvg on purpose: .lbl-* are generic names and this
   stylesheet is shared with every other page. */
#birthChartSvg .chart-labels {
    position: absolute;
    inset: 0;
    animation: bcw-fade-in 0.5s ease-out;
}

/* ── every chip scales with the chart ──────────────────────────
   CSS2DRenderer sets the outer element's transform on every frame to position
   it, so the outer element cannot carry a scale of its own. Each chip's whole
   appearance lives on an inner span instead, and that is what scales: by
   --lbl-zoom, the factor the renderer publishes as the camera moves, so every
   family grows and shrinks with the chart instead of sitting at a fixed size
   over a chart that is changing size. Each family keeps its own type size, so
   the house numbers and the hub's word stay the smaller ones. */
#birthChartSvg .lbl-in {
    display: inline-block;
    transform: scale(var(--lbl-zoom, 1));
    transform-origin: 50% 50%;
}

#birthChartSvg .lbl-degree > .lbl-in {
    font: 600 8.5px/1 ui-sans-serif, system-ui, sans-serif;
    color: #eaf4ff; white-space: nowrap;
    padding: 2px 4px; border-radius: 999px;
    background: rgba(8, 14, 28, 0.55);
    border: 1px solid rgba(150, 195, 255, 0.35);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    text-shadow: 0 0 10px rgba(130, 185, 255, 0.9);
    letter-spacing: 0.02em;
    /* "☉ 24°♊℞" always reads left to right, whatever the page direction is. */
    direction: ltr;
}

#birthChartSvg .lbl-degree .rx { color: #ff8ea8; margin-left: 2px; }
#birthChartSvg .lbl-degree .rx.st { color: #ffd76b; }

#birthChartSvg .lbl-house > .lbl-in {
    font: 700 10px/1 ui-sans-serif, system-ui, sans-serif;
    color: rgba(190, 225, 255, 0.9);
    text-shadow: 0 0 12px rgba(90, 160, 255, 0.95), 0 0 3px rgba(0, 0, 0, 0.9);
    user-select: none; letter-spacing: 0.04em;
    direction: ltr;
}

#birthChartSvg .lbl-sign > .lbl-in {
    font: 500 10px/1 ui-sans-serif, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.62);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    user-select: none;
    direction: ltr;
}

/* The sign's NAME, which a tap on its wedge gives back. The glyph above the
   band marks every sign at all times; this one names the sign you asked about,
   so it carries more weight — and no forced direction, so Arabic reads naturally
   rather than being laid out as a left-to-right string. */
#birthChartSvg .lbl-signname > .lbl-in {
    font: 600 9px/1 ui-sans-serif, system-ui, sans-serif;
    color: rgba(240, 247, 255, 0.96);
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(80, 150, 235, 0.95), 0 0 3px rgba(0, 0, 0, 0.95);
    letter-spacing: 0.03em;
    user-select: none;
}

#birthChartSvg .lbl-angle > .lbl-in {
    font: 700 9px/1 ui-sans-serif, system-ui, sans-serif;
    color: #dbe8ff; white-space: nowrap;
    padding: 2px 6px; border-radius: 5px;
    background: rgba(8, 14, 28, 0.62);
    border: 1px solid rgba(150, 195, 255, 0.28);
    letter-spacing: 0.06em;
    direction: ltr;
}

/* The hub's own name: deliberately small, so it stays a hint rather than a
   headline sitting on top of the chart. Zoom in to read it. */
#birthChartSvg .lbl-earth > .lbl-in {
    font: 500 7px/1.2 ui-sans-serif, system-ui, sans-serif;
    color: rgba(226, 240, 255, 0.78);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    letter-spacing: 0.05em;
    direction: ltr;
}

/* ── surface-painting overlay ───────────────────────────────── */
#birthChartSvg .chart-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 5, 14, 0.9);
    color: #8fb6ff;
    font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

#birthChartSvg .chart-loading.hide { opacity: 0; }

/* Wide tracking breaks the joining of Arabic script. */
[dir="rtl"] #birthChartSvg .chart-loading {
    letter-spacing: 0;
    text-transform: none;
}

/* ── narrow charts ──────────────────────────────────────────────
   Zooming now scales the labels with the chart, but the FITTED view of a narrow
   column still crowds them, so the chips step down there as before. */
#birthChartSvg.chart--sm .lbl-degree > .lbl-in { font-size: 7.5px; padding: 1px 4px; }
#birthChartSvg.chart--sm .lbl-angle  > .lbl-in { font-size: 8px; padding: 2px 5px; }
#birthChartSvg.chart--sm .lbl-house  > .lbl-in { font-size: 9px; }
#birthChartSvg.chart--sm .lbl-sign   > .lbl-in { font-size: 9px; }
#birthChartSvg.chart--sm .lbl-signname > .lbl-in { font-size: 8px; }

/* Phone widths: a 57-label chart cannot read at this size, so the two
   decorative layers go. The Positions panel lists the signs and the houses
   in full, and the planet and angle labels are the ones that must survive. */
#birthChartSvg.chart--xs .lbl-sign,
#birthChartSvg.chart--xs .lbl-signname { display: none; }
#birthChartSvg.chart--xs .lbl-earth  { display: none; }
#birthChartSvg.chart--xs .lbl-house  > .lbl-in { font-size: 8px; }
#birthChartSvg.chart--xs .lbl-degree > .lbl-in { font-size: 7px; padding: 1px 3px; }
#birthChartSvg.chart--xs .lbl-angle  > .lbl-in { font-size: 7px; padding: 1px 4px; }

/* ── Zoom controls overlaid on the 3D birth chart ─────────────
   A horizontal strip in the chart's top trailing corner (top right in LTR),
   wearing the same face as the move buttons so the chart has one control
   language rather than two. */
.chart-zoom {
    position: absolute;
    top: 10px;
    /* Trailing edge: right in LTR, left in RTL. */
    inset-inline-end: 10px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    z-index: 3;
}

/* ── the chart's own controls ──────────────────────────────────
   Everything the chart draws on itself: the zoom cluster in the corner and the
   four move buttons on the edge mid-points. One face for all of them — a small
   translucent disc that rests at half opacity and comes to full opacity under
   the pointer or the keyboard, so it is findable without competing with the
   chart, which is the thing being read.
   button-theme.css keycaps EVERY bare <button> with !important, so the shell,
   the key face and the hover / press transforms all have to be undone here. */
#chartZoom .chart-zoom-btn,
#birthChartSvg .chart-pan-btn {
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(150, 195, 255, 0.45) !important;
    background: rgba(8, 14, 28, 0.55) !important;
    box-shadow: none !important;
    color: #dbe8ff !important;
    /* A plus, a minus and a reset arrow need more room than a solid triangle. */
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    overflow: visible !important;
    opacity: 0.5;
    cursor: pointer !important;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.18s ease, background 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease !important;
    transform: none !important;
}

#chartZoom .chart-zoom-btn::before,
#chartZoom .chart-zoom-btn::after,
#birthChartSvg .chart-pan-btn::before,
#birthChartSvg .chart-pan-btn::after {
    content: none !important;
}

#chartZoom .chart-zoom-btn:hover,
#chartZoom .chart-zoom-btn:active,
#birthChartSvg .chart-pan-btn:hover,
#birthChartSvg .chart-pan-btn:active {
    opacity: 1;
    background: rgba(20, 34, 60, 0.88) !important;
    border-color: rgba(190, 220, 255, 0.9) !important;
    box-shadow: 0 0 12px rgba(120, 180, 255, 0.45) !important;
    transform: none !important;
    filter: none !important;
}

#chartZoom .chart-zoom-btn:focus-visible,
#birthChartSvg .chart-pan-btn:focus-visible {
    opacity: 1;
    outline: 2px solid #9dc0ff !important;
    outline-offset: 2px !important;
}

/* ── the chart's own controls: move buttons + body index ───────
   Both live inside the chart, so the view can be nudged and a body can be
   singled out without leaving it. The buttons rest at half opacity and come to
   full opacity under the pointer or the keyboard: findable without competing
   with the chart, which is the thing being read.

   button-theme.css keycaps EVERY bare <button>, so each of these has to undo
   the shell, the key face and the hover / press transforms it forces. */
#birthChartSvg {
    /* Width of the index column: three quarters of the first cut. The right-hand
       move button clears it. */
    --ci-w: 99px;
}

#birthChartSvg .chart-pan {
    position: absolute;
    inset: 0;
    z-index: 3;
    /* The pad is a frame, not a block: only the buttons catch the pointer. */
    pointer-events: none;
}

#birthChartSvg .chart-pan-btn {
    /* The face is shared with the zoom cluster; only the glyph size differs. */
    position: absolute;
    font-size: 9px !important;
}

/* Anchored on the edge mid-points. The left / right pair is placed in physical
   screen space, because that is what the buttons move — so in RTL, where the
   index column mirrors to the other side, the two swap their offsets. */
#birthChartSvg .chart-pan--up    { top: 10px;    left: 50%; margin-left: -15px; }
#birthChartSvg .chart-pan--down  { bottom: 10px; left: 50%; margin-left: -15px; }
#birthChartSvg .chart-pan--left  { left: 10px;   top: 50%;  margin-top: -15px; }
#birthChartSvg .chart-pan--right { right: calc(var(--ci-w) + 16px); top: 50%; margin-top: -15px; }

[dir="rtl"] #birthChartSvg .chart-pan--left  { left: calc(var(--ci-w) + 16px); }
[dir="rtl"] #birthChartSvg .chart-pan--right { right: 10px; }

/* ── the index down the side of the chart ───────────────────────
   Every body that owns a cone, in the order its lane runs outward from the
   Earth: nearest to the hub first, which is the order they are read in. */
#birthChartSvg .chart-index {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: var(--ci-w);
    max-height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: rgba(6, 11, 24, 0.55);
    border: 1px solid rgba(150, 195, 255, 0.18);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

#birthChartSvg .chart-index-head {
    flex: none;
    padding: 5px 8px 4px;
    font: 600 8px/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(175, 205, 245, 0.85);
    border-bottom: 1px solid rgba(150, 195, 255, 0.14);
    text-align: center;
}

[dir="rtl"] #birthChartSvg .chart-index-head {
    letter-spacing: 0;
    text-transform: none;
}

#birthChartSvg .chart-index-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-width: thin;
}

#birthChartSvg .chart-index-body::-webkit-scrollbar { width: 6px; }
#birthChartSvg .chart-index-body::-webkit-scrollbar-thumb {
    background: rgba(150, 195, 255, 0.25);
    border-radius: 3px;
}

/* One name per row and nothing else. The row WRAPS rather than truncating: a
   longer localisation simply takes a second line, so a name is never clipped. */
#birthChartSvg .chart-index-row {
    flex: none;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    display: block !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(228, 240, 255, 0.88) !important;
    font: 500 12.5px/1.3 ui-sans-serif, system-ui, sans-serif !important;
    text-align: start !important;
    text-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    overflow: visible !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    transform: none !important;
}

#birthChartSvg .chart-index-row::before,
#birthChartSvg .chart-index-row::after {
    content: none !important;
}

#birthChartSvg .chart-index-row:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: none !important;
    filter: none !important;
}

/* The picked body: the row wears its colour, matching the glow on the chart. */
#birthChartSvg .chart-index-row.is-on {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: var(--ci-hex, rgba(190, 220, 255, 0.9)) !important;
    color: #ffffff !important;
}

#birthChartSvg .chart-index-row:focus-visible {
    outline: 2px solid #9dc0ff !important;
    outline-offset: 1px !important;
}

/* ── narrow charts ─────────────────────────────────────────────
   The column narrows with the chart, and the type steps down with it. */
#birthChartSvg.chart--sm { --ci-w: 87px; }
#birthChartSvg.chart--sm .chart-index-body { padding: 4px; }
#birthChartSvg.chart--sm .chart-index-row { font-size: 11.5px !important; padding: 4px 6px !important; }

#birthChartSvg.chart--xs { --ci-w: 75px; }
#birthChartSvg.chart--xs .chart-index-head { padding: 4px 6px 3px; }
#birthChartSvg.chart--xs .chart-index-row { font-size: 11px !important; padding: 4px 5px !important; }

/* Legacy 2D SVG wheel (kept for rollback) */
#birthChartSvg svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Astrological glyphs styling */
.bcw-glyph {
    font-family: 'Segoe UI Symbol', 'Arial Unicode MS', 'DejaVu Sans', sans-serif;
    pointer-events: none;
}

/* Chart section when visible (toggle-friendly) */
#visualChartSection[style*="display: block"],
#visualChartSection:not([style*="display:none"]) {
    padding: 0.5rem 0;
}


/* Pulse animation for chart loading */
@keyframes bcw-fade-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

#birthChartSvg canvas {
    animation: bcw-fade-in 0.5s ease-out;
}

#birthChartSvg svg {
    animation: bcw-fade-in 0.5s ease-out;
}

/* ── Card Hide Button ───────────────────────────────────────── */
.card-hide-btn {
    position: absolute;
    top: 8px;
    /* Trailing edge of the card: RIGHT in English (LTR), LEFT in Arabic (RTL).
       Logical properties so the button follows the reading direction on its
       own — no [dir="rtl"] override required. */
    inset-inline-end: 12px;
    inset-inline-start: auto;
    font-size: 0.78rem;
    color: #a0aec0;
    cursor: pointer;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: none;
    text-decoration: none;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    line-height: 1;
    z-index: 1;
}
.card-hide-btn:hover {
    color: #e53e3e;
    background: rgba(229,62,62,0.08);
    border-color: rgba(229,62,62,0.2);
}

/* The Hide keycap sits in the card's trailing corner — push the card title
   away from that edge so the two never overlap (right in LTR, left in RTL). */
.card:has(.card-hide-btn) > h2 {
    margin-inline-end: 76px;
}
@media (max-width: 900px) {
    .card:has(.card-hide-btn) > h2 {
        margin-inline-end: 70px;
    }
}

/* ── Shared history-table header ─────────────────────────────
   See Dates History, Comparison History and the Single Area tables all share
   one header look (micro-caps). `.tbl-th` is used by the two history tables;
   the `>` combinators keep the L1 Single Area rules from leaking into its
   nested results table. */
.tbl-th,
.sa-table > thead > tr > th,
.sa-res-table th {
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #276749;
    font-weight: 700;
    padding: 0 12px 8px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    user-select: none;
}
.tbl-th.tbl-c, .sa-res-table th.tbl-c { text-align: center; padding: 0 6px 8px; }
.tbl-th.sortable-th, .sa-res-table th.sa-sort-th { cursor: pointer; }
.tbl-head-row { border-bottom: 2px solid #e2e8f0; }

/* Cards that need relative positioning for hide button */
#chartInfo,
#visualChartSection,
#chartPositions,
#chartConcepts,
#compareCard,
#chartActions,
#seeDatesHistoryCard,
#singleAreaSearchesCard,
#savedSearchCard,
#savedComparisonCard {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════
   OPTION SELECTORS — POINTS-LABEL LOOK  (ALWAYS ON)
   -----------------------------------------------------------------------
   When a user CLICKS and chooses an option, the chosen selector looks like
   the header points label: green→white gradient, dark-green text.
   Covered widgets (all share `.wt-choice-card`):
     • See Dates card  — the Standard / Single Area "Type" cards
   plus the <select> dropdowns inside both cards (Relation Type, Analysis
   Depth …), which get the same pill palette.

   DELIBERATELY NOT tied to the button-style switch: this card look stays
   in BOTH designs (old keycap and new points), per user request.

   COLOUR ONLY — border widths, radius, padding and box sizes are exactly
   as before, so nothing shifts or changes shape on click. The V2/Single Area
   handler only toggles `.selected`, so this is purely presentational.
   ═══════════════════════════════════════════════════════════════════════ */

.wt-choice-card.selected {
    background: linear-gradient(135deg, #3EAC76 0%, #ffffff 100%);
}
.wt-choice-card.selected .wt-card-title {
    color: #1f6b45;
}
.wt-choice-card.selected .wt-card-desc {
    color: #2f7a55;
}
/* Soften instead of the old hover repaint (the hover rule would otherwise
   flip the chosen card back to the pale unselected fill). */
.wt-choice-card.selected:hover {
    background: linear-gradient(135deg, #3EAC76 0%, #ffffff 100%);
    filter: brightness(0.98);
}

/* Dropdowns inside the See Dates card and the Analysis card.
   The existing rule paints the chevron with three background layers and an
   opaque #f9fbfd bar; the bar layer is swapped for the pill gradient and
   the chevron recoloured, so the arrow keeps working (appearance:none). */
#chartActionsCard .walkthrough-step-content .filter-group select,
#compareCard .walkthrough-step-content .filter-group select {
    color: #1f6b45;
    font-weight: 600;
    border-color: rgba(31, 107, 69, 0.35);
    background-image:
        linear-gradient(45deg, transparent 50%, #1f6b45 50%),
        linear-gradient(135deg, #1f6b45 50%, transparent 50%),
        linear-gradient(135deg, #3EAC76 0%, #ffffff 100%);
    background-position: calc(100% - 1rem) calc(50% - 0.15rem), calc(100% - 0.7rem) calc(50% - 0.15rem), 0 0;
    background-size: 0.45rem 0.45rem, 0.45rem 0.45rem, 100% 100%;
    background-repeat: no-repeat;
}
#chartActionsCard .walkthrough-step-content .filter-group select:focus,
#compareCard .walkthrough-step-content .filter-group select:focus {
    border-color: #1f6b45;
}
/* The dropdown's own option list keeps normal browser colours (a gradient
   cannot be painted on native <option>s, and dark-green on dark would be
   unreadable). */
#chartActionsCard .walkthrough-step-content .filter-group select option,
#compareCard .walkthrough-step-content .filter-group select option {
    color: #1a202c;
    background: #ffffff;
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER STACKING ORDER — dropdowns above the Show/Hide bar
   -----------------------------------------------------------------------
   Both header dropdowns hang BELOW the header bar (the avatar's
   Settings/Logout list and the points list), straight into the top of the
   dashboard content, where `.view-toggles-bar` sits at z-index 100 and its
   open menus at z-index 1000. The container comes later in the DOM, so it
   painted over the bottom of those lists and swallowed the clicks.

   Giving the header its own stacking context above 1000 keeps both lists
   fully visible and clickable, while staying BELOW every modal/overlay
   level in this file (2000 / 2500 / 3000) and below #dashboardLoading
   (9999), so nothing that should cover the header loses its place.
   ═══════════════════════════════════════════════════════════════════════ */
.header {
    position: relative;
    z-index: 1100;
}

/* ═════════════════════════════════════════════════════════
   ANALYSIS CARD — GLASS on five cards: Analysis, Birth Space, Actions (See Dates), Saved
   Analysis Plans, Saved Search Plans.

   Same recipe as the site header and .auth-box in index.html, so the
   dashboard reads like the pages that are already glass.

   Two things had to go before the blur had anything to work on:
   1. url('/images/cardbg.jpg') — an image layer INSIDE the card's own
      background. backdrop-filter blurs what is painted BEHIND the element,
      never its own background, so the photo starved the blur.
   2. the 0.75 white veil — a strong white alpha desaturates the green wash
      behind it toward grey (the lesson recorded on .auth-box).

   The ID selectors are deliberate, not laziness. .dashboard-compare-card
   and .saved-plans-card are declared ABOVE .card at equal specificity
   (0,1,0), so a rule on those classes alone would keep losing "background"
   to .card — and .saved-plans-card is SHARED with #seeDatesHistoryCard and
   #singleAreaSearchesCard, which must keep their current look.

   Every inner rule names the card it belongs to instead of the shared
   class: .wt-choice-card belongs only to #chartActionsCard now,
   .saved-plan-item is shared with the history lists, and
   .recent-comparisons is not shared at all. Same scoping pattern as the
   rules near line 4330.
   ═════════════════════════════════════════════════════════ */
#compareCard,
#visualChartCard,
#chartActionsCard,
#savedComparisonCard,
#savedSearchCard {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.34) 0%,
        rgba(255, 255, 255, 0.16) 55%,
        rgba(255, 255, 255, 0.26) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border-radius: 12px;
    border: none;                 /* the rim is the masked ring below */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 12px 40px rgba(17, 66, 45, 0.18);
}

/* GLASS RIM — not a flat white line. The masked-ring technique from
   .auth-box::after: padding-box minus content-box leaves a 1px band, and the
   gradient is bright where light would catch the edge and nearly gone where
   it would not. A flat 1px solid rgba(255,255,255,.75) reads as a white
   outline stuck on the glass, not as a lit edge.
   .card is already position:relative + overflow:hidden, so this clips to the
   radius with no extra setup. */
#compareCard::after,
#visualChartCard::after,
#chartActionsCard::after,
#savedComparisonCard::after,
#savedSearchCard::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.25) 28%,
        rgba(255, 255, 255, 0.08) 55%,
        rgba(255, 255, 255, 0.60) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* ── The cards INSIDE them — glass on glass ─────────────
   A child's backdrop-filter resolves against the nearest backdrop root, and
   the parent card is one now (its own filter creates it). So the blur here
   has almost no flat colour to work on: on the inner panels the glass reads
   from the translucent fill and the lit edge, and the small blur only softens
   what sits behind them. The fills are a touch more opaque than the outer
   that is what makes them read as raised.
   #visualChartCard is deliberately absent below: its two columns
   (.chart-positions-panel, .chart-canvas-col) carry NO background at all —
   they are bare layout columns with a headed rule — so it has no inner
   surface to turn to glass, and inventing one would be a redesign rather
   than this treatment. Its card-level glass still applies. */
#compareCard .compare-walkthrough,
#chartActionsCard .seedates-walkthrough {
    background: rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    backdrop-filter: blur(8px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 4px 14px rgba(17, 66, 45, 0.07);
}

/* The step-choice tiles (Standard / Single Area in the See Dates card).
   Base .wt-choice-card is background:#fff with a 2px #d6e9df
   border and is shared with the Actions card, so all three states are
   restated. Border WIDTH stays 2px and padding is untouched — the
   selected-tile block near line 4310 is explicit that nothing may shift on
   click, so colour is the only thing changed here. */
#compareCard .wt-choice-card,
#chartActionsCard .wt-choice-card {
    background: rgba(255, 255, 255, 0.44);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
    backdrop-filter: blur(6px) saturate(130%);
    border-color: rgba(255, 255, 255, 0.60);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.60),
        0 4px 12px rgba(17, 66, 45, 0.06);
}
#compareCard .wt-choice-card:hover,
#chartActionsCard .wt-choice-card:hover {
    background: rgba(240, 255, 244, 0.66);
    border-color: #3EAC77;
}
/* Chosen tile. Keeps the green-to-white identity documented at length near
   line 4310, but lets the glass through so the selected tile is not the one
   opaque slab among translucent ones. Revert to the solid gradient if you
   prefer the harder affordance. */
#compareCard .wt-choice-card.selected,
#compareCard .wt-choice-card.selected:hover,
#chartActionsCard .wt-choice-card.selected,
#chartActionsCard .wt-choice-card.selected:hover {
    background: linear-gradient(135deg,
        rgba(62, 172, 118, 0.80) 0%,
        rgba(255, 255, 255, 0.58) 100%);
    border-color: rgba(255, 255, 255, 0.60);
}

/* Recent-analysis rows. Unbounded in number, so they get the translucent
   fill and a lit edge but NO backdrop-filter: a blur per row is real
   compositor work to soften something nobody can see at this size. */
#compareCard .recent-comparisons li {
    background: rgba(255, 255, 255, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.60);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
#compareCard .recent-comparisons li:hover {
    background: rgba(255, 255, 255, 0.60);
    border-color: rgba(62, 172, 119, 0.45);
}

/* Saved Analysis Plans / Saved Search Plans rows. Same reasoning as the
   recent-analysis rows: unbounded in number, so translucent fill and a lit
   edge, no backdrop-filter. .saved-plan-item is shared with the history
   lists, hence the two IDs. No hover fill is added — the row is not
   clickable as a whole (it holds a checkbox and a View Results link), and
   inventing an affordance it did not have would be a redesign. */
#savedComparisonCard .saved-plan-item,
#savedSearchCard .saved-plan-item {
    background: rgba(255, 255, 255, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.60);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Phones: keep the translucency and the lit edges, drop every blur. The card
   is large, body uses background-attachment:fixed, and a stack of nested
   backdrop-filters would repaint on every scroll frame. */
@media (max-width: 900px) {
    #compareCard,
    #visualChartCard,
    #chartActionsCard,
    #savedComparisonCard,
    #savedSearchCard,
    #compareCard .compare-walkthrough,
    #chartActionsCard .seedates-walkthrough,
    #compareCard .wt-choice-card,
    #chartActionsCard .wt-choice-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    #compareCard,
    #visualChartCard,
    #chartActionsCard,
    #savedComparisonCard,
    #savedSearchCard { background: rgba(255, 255, 255, 0.46); }
    #compareCard .compare-walkthrough,
    #chartActionsCard .seedates-walkthrough { background: rgba(255, 255, 255, 0.40); }
    #compareCard .wt-choice-card,
    #chartActionsCard .wt-choice-card { background: rgba(255, 255, 255, 0.52); }
}

/* Engines with no backdrop-filter get a more opaque sheet rather than a
   washed-out transparent card. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #compareCard,
    #visualChartCard,
    #chartActionsCard,
    #savedComparisonCard,
    #savedSearchCard {
        background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(240, 248, 244, 0.86) 100%);
    }
}

/* See Dates walkthrough: clear, accessible choices and a compact day wheel. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#chartActionsCard .seedates-walkthrough,
#compareCard .compare-walkthrough {
    gap: 0.65rem 1rem;
    padding: clamp(1rem, 2.5vw, 1.6rem);
    border-radius: 16px;
    border-color: rgba(62, 172, 119, 0.22);
}

#chartActionsCard .wt-progress,
#compareCard .wt-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    order: 1;
}

#chartActionsCard .wt-progress-track,
#compareCard .wt-progress-track {
    flex: 1 1 auto;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(35, 121, 79, 0.12);
}

#chartActionsCard #wtProgressFill,
#compareCard #cwProgressFill {
    display: block;
    width: 12.5%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3eac77, #79cfa2);
    transition: width 220ms ease;
}

#chartActionsCard .walkthrough-nav,
#compareCard .walkthrough-nav {
    width: 100%;
    margin-inline-start: 0;
    justify-content: center;
    gap: 0.75rem;
    order: 0;
}

#chartActionsCard .walkthrough-content-area,
#compareCard .walkthrough-content-area {
    order: 2;
}

#chartActionsCard .wt-step-label,
#compareCard .wt-step-label {
    color: #276749;
    background: rgba(230, 255, 250, 0.75);
    border-color: rgba(62, 172, 119, 0.24);
    box-shadow: none;
}

#chartActionsCard .walkthrough-step-content,
#compareCard .walkthrough-step-content {
    gap: 0.9rem;
}

/* Inputs in these cards match the choice cards / buttons (12px) instead of the
   site-wide 30px pill, which read as a different, oversized control here. */
#chartActionsCard .walkthrough-step-content .filter-group input,
#chartActionsCard .walkthrough-step-content .filter-group select,
#compareCard .walkthrough-step-content .filter-group input,
#compareCard .walkthrough-step-content .filter-group select {
    border-radius: 12px;
}

#chartActionsCard .walkthrough-step-content .wt-big-title,
#compareCard .walkthrough-step-content .wt-big-title {
    color: #174c34;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    letter-spacing: -0.02em;
}

#chartActionsCard .walkthrough-step-content .wt-sub-title,
#compareCard .walkthrough-step-content .wt-sub-title {
    max-width: 62ch;
    color: #40584b;
    font-size: 0.98rem;
    line-height: 1.6;
}

#chartActionsCard .walkthrough-step-content .wt-step-note,
#compareCard .walkthrough-step-content .wt-step-note {
    max-width: 62ch;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-inline-start: 3px solid rgba(62, 172, 119, 0.55);
    border-radius: 8px;
    background: rgba(230, 255, 250, 0.45);
    color: #365744;
    font-size: 0.86rem;
    line-height: 1.5;
}

#chartActionsCard .wt-choice-fieldset,
#compareCard .wt-choice-fieldset {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#chartActionsCard .wt-relationship-cards,
#chartActionsCard .wt-analysis-cards,
#chartActionsCard .wt-analysis-depth-cards,
#compareCard .wt-relationship-cards,
#compareCard .wt-analysis-cards,
#compareCard .wt-analysis-depth-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 0.8rem;
    margin-top: 0.25rem;
}

#chartActionsCard .wt-choice-card,
#compareCard .wt-choice-card {
    position: relative;
    min-width: 0;
    min-height: 7rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(39, 103, 73, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 3px 12px rgba(17, 66, 45, 0.05);
    text-align: start;
}

#chartActionsCard .wt-choice-card:hover,
#compareCard .wt-choice-card:hover {
    border-color: rgba(35, 121, 79, 0.55);
    box-shadow: 0 8px 20px rgba(17, 66, 45, 0.09);
    transform: translateY(-1px);
}

#chartActionsCard .wt-choice-card.disabled,
#compareCard .wt-choice-card.disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

#chartActionsCard .wt-choice-card.disabled:hover,
#compareCard .wt-choice-card.disabled:hover {
    transform: none;
}

#chartActionsCard .wt-choice-card.selected,
#compareCard .wt-choice-card.selected {
    border: 2px solid #23794f;
    background: linear-gradient(145deg, rgba(219, 245, 229, 0.96), rgba(255, 255, 255, 0.94));
    box-shadow: 0 0 0 3px rgba(35, 121, 79, 0.12), 0 8px 20px rgba(17, 66, 45, 0.07);
}

#chartActionsCard .wt-choice-card.selected .wt-card-title,
#compareCard .wt-choice-card.selected .wt-card-title {
    color: #174c34;
}

#chartActionsCard .wt-choice-card.selected .wt-card-desc,
#compareCard .wt-choice-card.selected .wt-card-desc {
    color: #365744;
}

#chartActionsCard .wt-choice-card.selected::after,
#compareCard .wt-choice-card.selected::after {
    content: "✓";
    position: absolute;
    inset-block-start: 0.7rem;
    inset-inline-end: 0.75rem;
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border-radius: 50%;
    background: #23794f;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

#chartActionsCard .wt-card-radio,
#compareCard .wt-card-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#chartActionsCard .wt-choice-card:focus-within,
#compareCard .wt-choice-card:focus-within {
    outline: 3px solid #1b6b48;
    outline-offset: 3px;
}

#chartActionsCard .wt-choice-card .wt-card-title,
#compareCard .wt-choice-card .wt-card-title {
    padding-inline-end: 1.5rem;
    color: #174c34;
    font-size: 1rem;
}

#chartActionsCard .wt-choice-card .wt-card-desc,
#compareCard .wt-choice-card .wt-card-desc {
    color: #4e6658;
    font-size: 0.87rem;
    line-height: 1.5;
}

/* ── Keep a whole wizard step inside the viewport ───────────────────
   Both wizards use tall choice tiles (min-height 7rem) and generous type; the
   See Dates card keeps its intro sentence on top of that, and the Analysis
   (Compare) card also sits in a narrower column with the "recent analyses"
   panel beside it. Tightened for BOTH cards so a step fits the fold and the
   choices never stack one-per-row. */
#chartActionsCard .seedates-walkthrough,
#compareCard .compare-walkthrough {
    gap: 0.5rem 0.9rem;
}
#chartActionsCard .walkthrough-step-content,
#compareCard .walkthrough-step-content {
    gap: 0.55rem;
}
#chartActionsCard .walkthrough-step-content .wt-big-title,
#compareCard .walkthrough-step-content .wt-big-title {
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
}
#chartActionsCard .walkthrough-step-content .wt-sub-title,
#compareCard .walkthrough-step-content .wt-sub-title {
    font-size: 0.92rem;
    line-height: 1.45;
}
#chartActionsCard .walkthrough-step-content .wt-step-note,
#compareCard .walkthrough-step-content .wt-step-note {
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    line-height: 1.4;
}
#chartActionsCard .wt-relationship-cards,
#chartActionsCard .wt-analysis-cards,
#chartActionsCard .wt-analysis-depth-cards,
#compareCard .wt-relationship-cards,
#compareCard .wt-analysis-cards,
#compareCard .wt-analysis-depth-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 0.55rem;
}
#chartActionsCard .wt-choice-card,
#compareCard .wt-choice-card {
    min-height: 0;
    padding: 0.7rem 0.85rem;
    gap: 0.15rem;
}
#chartActionsCard .wt-choice-card .wt-card-title,
#compareCard .wt-choice-card .wt-card-title {
    font-size: 0.95rem;
}
#chartActionsCard .wt-choice-card .wt-card-desc,
#compareCard .wt-choice-card .wt-card-desc {
    font-size: 0.8rem;
    line-height: 1.35;
}

/* ── Actions card: close the empty band at the top ──────────────────
   Title → description → walkthrough used to sit ~40px apart (h2 margin +
   .chart-actions margin-top + .actions-content/.action-row padding + the <p>'s
   own margin all stacked). Collapsed to a hairline so the card reads tight, and
   the walkthrough's internal rows are squeezed too. Scoped to #chartActionsCard. */
#chartActionsCard h2 {
    margin-bottom: 0;
}
#chartActionsCard #resultStatus {
    margin: 0;
}
#chartActionsCard .chart-actions {
    margin-top: 0.3rem;
}
#chartActionsCard .actions-content {
    padding: 0 0.2rem 0.2rem;
}
#chartActionsCard .action-row {
    padding: 0 0.2rem;
    gap: 0.2rem;
}
#chartActionsCard .action-text {
    margin: 0;
    line-height: 1.4;
}
/* Hug the walkthrough to the description and tighten its internal rows. */
#chartActionsCard .seedates-walkthrough {
    padding-top: 0.75rem;
    padding-bottom: 0.8rem;
    row-gap: 0.4rem;
}
#chartActionsCard .wt-final-actions .wt-confirm-btn,
#compareCard .wt-final-actions .wt-confirm-btn {
    min-height: 2.6rem;
}
#chartActionsCard .wt-summary-grid,
#compareCard .wt-summary-grid {
    padding: 0.4rem 0;
}
#chartActionsCard .wt-summary-row,
#compareCard .wt-summary-row {
    padding: 0.2rem 0;
}

/* Derived caption under the Days input (e.g. "30 days (1 month)"). */
#chartActionsCard .wt-day-value {
    display: block;
    color: #365744;
    font-size: 0.88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#chartActionsCard .wt-filter-desc,
#compareCard .wt-filter-desc {
    color: #4e6658;
    font-size: 0.88rem;
    line-height: 1.5;
}

#chartActionsCard .wt-final-actions .wt-confirm-btn,
#compareCard .wt-final-actions .wt-confirm-btn {
    min-height: 3rem;
    border-radius: 12px;
}

[dir="rtl"] #chartActionsCard #wtProgressFill,
[dir="rtl"] #compareCard #cwProgressFill {
    margin-inline-start: auto;
}

@media (max-width: 700px) {
    #chartActionsCard .seedates-walkthrough,
    #compareCard .compare-walkthrough {
        padding: 1rem;
    }

    #chartActionsCard .walkthrough-nav,
    #compareCard .walkthrough-nav {
        width: 100%;
        justify-content: space-between;
    }

    #chartActionsCard .wt-relationship-cards,
    #chartActionsCard .wt-analysis-cards,
    #chartActionsCard .wt-analysis-depth-cards {
        grid-template-columns: 1fr;
    }

    /* Two-up on phones so the Compare card's choices do not stack off-screen. */
    #compareCard .wt-relationship-cards,
    #compareCard .wt-analysis-cards,
    #compareCard .wt-analysis-depth-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #chartActionsCard .wt-choice-card {
        min-height: 0;
        padding: 0.9rem 1rem;
    }
    /* #compareCard keeps its tighter tile padding (see the compact block). */
}

@media (prefers-reduced-motion: reduce) {
    #chartActionsCard #wtProgressFill,
    #compareCard #cwProgressFill,
    #chartActionsCard .wt-choice-card,
    #compareCard .wt-choice-card {
        transition: none;
    }

    #chartActionsCard .wt-choice-card:hover,
    #compareCard .wt-choice-card:hover {
        transform: none;
    }
}