@import 'GeomancyWebUI.Client.bundle.scp.css';

/* _content/GeomancyWebUI/Components/Layout/MainLayout.razor.rz.scp.css */
/*
 * Layout: top nav strip + main content beneath, pinned at every width.
 * The sidebar is intentionally NOT pulled to the side on narrow viewports
 * - on phones it stays as a sticky top bar (with the nav links collapsing
 *   behind the existing hamburger toggler in NavMenu.razor.css).
 */
.page[b-9jqlsh7lom] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-9jqlsh7lom] {
    flex: 1;
    min-width: 0;
}

/*
 * /mobile hosts .mobile-shell with a fixed-position chart handle. If the
 * outer page can scroll even a few pixels (flex min-height quirks, article
 * padding, dynamic toolbars), the tab strip slides up under that handle.
 * Lock the page column height and hide overflow only when the mobile
 * workspace is the active body content.
 */
.page:has(.mobile-shell)[b-9jqlsh7lom] {
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

main:has(.mobile-shell)[b-9jqlsh7lom] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

article.content:has(.mobile-shell)[b-9jqlsh7lom] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Full-bleed on phones; horizontal padding would steal width and can
       contribute to tiny vertical overflow on strict 100dvh layouts. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sidebar[b-9jqlsh7lom] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 1000;
}

article[b-9jqlsh7lom] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.theme-toggle-button[b-9jqlsh7lom] {
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--accent-color, #007bff);
    background: var(--bg-primary, white);
    color: var(--accent-color, #007bff);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 4px var(--shadow, rgba(0, 123, 255, 0.1));
    min-width: 42px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-left: 1rem;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.theme-toggle-button:hover[b-9jqlsh7lom] {
    background: var(--accent-color, #007bff);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--shadow-hover, rgba(0, 123, 255, 0.2));
}

.theme-toggle-button.active[b-9jqlsh7lom] {
    background: var(--accent-color, #007bff);
    color: white;
    box-shadow: 0 2px 6px var(--shadow-hover, rgba(0, 123, 255, 0.3));
}

#blazor-error-ui[b-9jqlsh7lom] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-9jqlsh7lom] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/GeomancyWebUI/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-gj8hohyfhi] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-gj8hohyfhi] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-gj8hohyfhi] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
}

.top-row .container-fluid[b-gj8hohyfhi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.navbar-brand[b-gj8hohyfhi] {
    font-size: 1.1rem;
}

.bi[b-gj8hohyfhi] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-gj8hohyfhi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-gj8hohyfhi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-gj8hohyfhi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-gj8hohyfhi] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-gj8hohyfhi] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-gj8hohyfhi] {
        padding-bottom: 1rem;
    }

    .nav-item[b-gj8hohyfhi]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-gj8hohyfhi]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-gj8hohyfhi]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-gj8hohyfhi] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-gj8hohyfhi] {
    display: block;
}

/*
 * Narrow widths: when the user taps the hamburger toggler the nav-scrollable
 * drops down inline below the top-row strip (the sidebar stays pinned to the
 * top of the viewport via .sidebar's sticky positioning in MainLayout).
 *
 * We cap the dropdown height so a tall menu doesn't take over the screen.
 */
@media (max-width: 640.98px) {
    .nav-scrollable[b-gj8hohyfhi] {
        max-height: 60vh;
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.35);
    }

    /* Theme toggle as last row inside the mobile dropdown */
    .nav-theme-item[b-gj8hohyfhi] {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-top: 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin-top: 0.25rem;
    }
}

/* Desktop: Horizontal top navigation */
@media (min-width: 641px) {
    .navbar-toggler[b-gj8hohyfhi] {
        display: none;
    }

    .nav-scrollable[b-gj8hohyfhi] {
        display: block;
        height: auto;
        overflow-y: visible;
    }

    .nav-scrollable nav.flex-column[b-gj8hohyfhi] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }

    .nav-scrollable .nav-item[b-gj8hohyfhi] {
        padding: 0;
        padding-right: 0.5rem;
    }

    .nav-scrollable .nav-item:first-of-type[b-gj8hohyfhi] {
        padding-top: 0;
    }

    .nav-scrollable .nav-item:last-of-type[b-gj8hohyfhi] {
        padding-bottom: 0;
    }

    /* Theme toggle sits at the end of the horizontal strip */
    .nav-scrollable .nav-item.nav-theme-item[b-gj8hohyfhi] {
        margin-left: auto;
        padding-right: 0;
        display: flex;
        align-items: center;
    }

    .nav-scrollable .nav-item[b-gj8hohyfhi]  .nav-link {
        height: 2.5rem;
        line-height: 2.5rem;
        padding: 0 1rem;
        white-space: nowrap;
        width: auto;
    }
}
/* _content/GeomancyWebUI/Components/Layout/ThemeToggleButton.razor.rz.scp.css */
.theme-toggle-button[b-5uujboiuc8] {
    padding: 0.5rem 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    min-width: 42px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.theme-toggle-button:hover[b-5uujboiuc8] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.theme-toggle-button.active[b-5uujboiuc8] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* _content/GeomancyWebUI/Components/Pages/About.razor.rz.scp.css */
/* About page — readable prose, matches landing rhythm (Home.razor.css tokens). */

.about-page[b-zm1tfn5t79] {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1rem 0 3rem;
    box-sizing: border-box;
}

.about-hero[b-zm1tfn5t79] {
    margin-bottom: 1.5rem;
}

.about-h1[b-zm1tfn5t79] {
    margin: 0 0 1rem;
    font-size: clamp(1.65rem, 5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.about-lead[b-zm1tfn5t79] {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.about-link-line[b-zm1tfn5t79] {
    margin: 0;
    font-size: 1rem;
}

.about-link-line a[b-zm1tfn5t79] {
    font-weight: 600;
}

.about-section[b-zm1tfn5t79] {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-color);
}

.about-h2[b-zm1tfn5t79] {
    margin: 0 0 0.85rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.about-aside[b-zm1tfn5t79] {
    margin: -0.25rem 0 1rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.about-prose[b-zm1tfn5t79] {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.about-prose p[b-zm1tfn5t79] {
    margin: 0 0 1rem;
}

.about-prose p:last-child[b-zm1tfn5t79] {
    margin-bottom: 0;
}

.about-list[b-zm1tfn5t79] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.about-list li[b-zm1tfn5t79] {
    margin-bottom: 0.75rem;
}

.about-list li:last-child[b-zm1tfn5t79] {
    margin-bottom: 0;
}

.about-list strong[b-zm1tfn5t79] {
    color: var(--text-primary);
}

.about-page code[b-zm1tfn5t79] {
    font-size: 0.88em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.about-footer-links[b-zm1tfn5t79] {
    margin: 1.25rem 0 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.about-footer-sep[b-zm1tfn5t79] {
    margin: 0 0.35rem;
    color: var(--border-color);
}

.about-signature[b-zm1tfn5t79] {
    margin: 1.5rem 0 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-style: italic;
}
/* _content/GeomancyWebUI/Components/Pages/Chart.razor.rz.scp.css */
/* Main layout - charts and info column on top, analysis sections below */
.chart-main-layout[b-skgq7wvn1m] {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin: 2rem 0;
}

/* Mobile: Reduce gaps and margins */
@media (max-width: 768px) {
    .chart-main-layout[b-skgq7wvn1m] {
        gap: 1rem;
        margin: 1rem 0;
    }
    
    .houses-column[b-skgq7wvn1m] {
        min-width: 100%;
        max-width: 100%;
        padding: 1rem;
    }
    
    .houses-column .houses-list.condensed li[b-skgq7wvn1m] {
        font-size: 0.8rem;
        padding: 0.6rem 0.4rem;
    }
    
    .chart-controls-wrapper[b-skgq7wvn1m] {
        margin-bottom: 1rem;
    }
    
    .toggle-button[b-skgq7wvn1m] {
        min-width: 140px;
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}

/* Charts and Houses Row */
.charts-and-houses-row[b-skgq7wvn1m] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: stretch;
}

.houses-column[b-skgq7wvn1m] {
    min-width: 220px;
    max-width: 250px;
}

/* Mobile: Stack charts and houses column vertically */
@media (max-width: 992px) {
    .charts-and-houses-row[b-skgq7wvn1m] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .houses-column[b-skgq7wvn1m] {
        order: 2;
    }
    
    .charts-side-by-side[b-skgq7wvn1m] {
        order: 1;
    }
}

/* Houses Column on Right */
.houses-column[b-skgq7wvn1m] {
    background: linear-gradient(to bottom, 
        var(--bg-primary) 0%, 
        var(--bg-secondary) 100%);
    border-radius: 12px;
    padding: clamp(0.75rem, 4cqw, 1rem);
    box-shadow: 0 4px 12px var(--shadow), 
                0 2px 4px var(--shadow);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: stretch;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    animation: fadeIn-b-skgq7wvn1m 0.4s ease-out;
    overflow: hidden;
    box-sizing: border-box;
    container-type: inline-size;
}

.houses-column:hover[b-skgq7wvn1m] {
    box-shadow: 0 6px 16px var(--shadow-hover), 
                0 3px 6px var(--shadow-hover);
    transform: translateY(-2px);
}

.houses-column h3[b-skgq7wvn1m] {
    font-size: clamp(0.6rem, 3.2cqw, 0.75rem);
    margin: 0 0 clamp(0.4rem, 2.5cqw, 0.6rem) 0;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: clamp(0.3rem, 2cqw, 0.4rem);
    flex-shrink: 0;
}

.houses-column .houses-list.condensed[b-skgq7wvn1m] {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.houses-column .houses-list.condensed li[b-skgq7wvn1m] {
    padding: clamp(0.2rem, 1.2cqw, 0.35rem) clamp(0.15rem, 1cqw, 0.25rem);
    font-size: clamp(0.45rem, 2.5cqw, 0.65rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid transparent;
    padding-left: clamp(0.25rem, 1.5cqw, 0.35rem);
    line-height: 1.1;
    gap: clamp(0.1rem, 0.8cqw, 0.2rem);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 0;
    min-height: 0;
}

.houses-column .houses-list.condensed li:hover[b-skgq7wvn1m] {
    background-color: var(--bg-secondary);
    border-radius: 4px;
    border-left-color: var(--accent-color);
}

.houses-column .houses-list.condensed li span[b-skgq7wvn1m] {
    white-space: nowrap;
}

.houses-column .houses-list.condensed li div[b-skgq7wvn1m] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.houses-column .houses-list.condensed li div:first-child[b-skgq7wvn1m] {
    flex-shrink: 1;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: clamp(0.4rem, 2.2cqw, 0.55rem);
    line-height: 1.15;
}

.houses-column .houses-list.condensed li div:last-child[b-skgq7wvn1m] {
    flex-shrink: 1;
    font-weight: 600;
    color: var(--text-primary);
    font-size: clamp(0.5rem, 2.8cqw, 0.65rem);
    line-height: 1.25;
}

.houses-column .houses-list.condensed li.house-separator[b-skgq7wvn1m] {
    margin-top: clamp(0.4rem, 2.5cqw, 0.6rem);
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
    border-bottom: none;
    border-left: none;
    background: none;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0;
    padding-left: 0;
}

.houses-column .houses-list.condensed li.house-separator .court-label[b-skgq7wvn1m] {
    font-size: clamp(0.6rem, 3.2cqw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: clamp(0.3rem, 2cqw, 0.4rem);
    width: 100%;
    text-align: left;
}

/* Analysis Row: Triplicities, Way of Points, Perfection */
.analysis-row[b-skgq7wvn1m] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: start; /* Each column maintains its own height */
}

/* Tablet: 2 columns for analysis row */
@media (max-width: 992px) and (min-width: 769px) {
    .analysis-row[b-skgq7wvn1m] {
        grid-template-columns: 1fr 1fr;
    }
    
    .analysis-row .analysis-column:last-child[b-skgq7wvn1m] {
        grid-column: 1 / -1;
    }
}

/* Mobile: Stack analysis columns vertically */
@media (max-width: 768px) {
    .analysis-row[b-skgq7wvn1m] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.analysis-column[b-skgq7wvn1m] {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 12px var(--shadow), 
                0 2px 4px var(--shadow);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: fit-content; /* Column height based on content */
    align-self: start; /* Don't stretch to match other columns */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeIn-b-skgq7wvn1m 0.4s ease-out;
}

.analysis-column:hover[b-skgq7wvn1m] {
    box-shadow: 0 6px 16px var(--shadow-hover), 
                0 3px 6px var(--shadow-hover);
    transform: translateY(-2px);
}

.analysis-column h3[b-skgq7wvn1m] {
    font-size: 1rem;
    margin: 0 0 0.75rem 0;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.analysis-column .triplicities-list[b-skgq7wvn1m] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.analysis-column .triplicities-list li[b-skgq7wvn1m] {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    line-height: 1.4;
}

.analysis-column .triplicity-item[b-skgq7wvn1m] {
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
}

.analysis-column .triplicity-header[b-skgq7wvn1m] {
    gap: 0.15rem;
}

.analysis-column .triplicity-description[b-skgq7wvn1m] {
    font-size: 0.8rem;
    line-height: 1.3;
}

.analysis-column .triplicity-figures[b-skgq7wvn1m] {
    font-size: 0.9rem;
}

.analysis-column .triplicity-number[b-skgq7wvn1m] {
    font-size: 0.9rem;
}

/* Charts side-by-side container */
.charts-side-by-side[b-skgq7wvn1m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Mobile: Stack charts vertically */
@media (max-width: 768px) {
    .charts-side-by-side[b-skgq7wvn1m] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Info sections in the 3-column row */
.info-sections-row .info-section[b-skgq7wvn1m] {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 12px var(--shadow), 
                0 2px 4px var(--shadow);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0; /* Allow text to wrap */
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.info-sections-row .info-section:hover[b-skgq7wvn1m] {
    box-shadow: 0 6px 16px var(--shadow-hover), 
                0 3px 6px var(--shadow-hover);
    transform: translateY(-2px);
}

.info-sections-row .info-section h3[b-skgq7wvn1m] {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.info-sections-row .triplicity-description[b-skgq7wvn1m] {
    font-size: 0.8rem;
    line-height: 1.3;
}

.info-sections-row .triplicity-figures[b-skgq7wvn1m] {
    font-size: 0.9rem;
}

.info-sections-row .triplicity-number[b-skgq7wvn1m] {
    font-size: 0.9rem;
}

.info-sections-row .court-list[b-skgq7wvn1m],
.info-sections-row .houses-list[b-skgq7wvn1m],
.info-sections-row .triplicities-list[b-skgq7wvn1m] {
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
}

.info-sections-row .court-list li[b-skgq7wvn1m],
.info-sections-row .houses-list li[b-skgq7wvn1m],
.info-sections-row .triplicities-list li[b-skgq7wvn1m] {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    line-height: 1.4;
}

.info-sections-row .houses-list[b-skgq7wvn1m] {
    max-height: 300px;
    overflow-y: auto;
}

.info-sections-row .houses-list.condensed[b-skgq7wvn1m] {
    max-height: none;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
}

.info-sections-row .houses-list.condensed li[b-skgq7wvn1m] {
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.2;
    gap: 0.2rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.info-sections-row .houses-list.condensed li div[b-skgq7wvn1m] {
    width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

.info-sections-row .houses-list.condensed li:last-child[b-skgq7wvn1m] {
    border-bottom: 1px solid var(--border-color);
}

.info-sections-row .houses-list.condensed li.house-separator[b-skgq7wvn1m] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--border-color);
    border-bottom: none;
    justify-content: center;
}

.info-sections-row .houses-list.condensed li.house-separator .court-label[b-skgq7wvn1m] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-sections-row .triplicity-item[b-skgq7wvn1m] {
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
}

.info-sections-row .triplicity-header[b-skgq7wvn1m] {
    gap: 0.15rem;
}

.info-section[b-skgq7wvn1m] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chart-info-column .info-section h3[b-skgq7wvn1m] {
    margin: 0 0 0.4rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.4rem;
}

/* Analysis sections below */
.analysis-sections[b-skgq7wvn1m] {
    background: var(--bg-primary, #fff);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px var(--shadow, rgba(0, 0, 0, 0.1));
}

/* Single chart display - add margins to keep it smaller */
.charts-side-by-side > .shield-chart-container:only-child[b-skgq7wvn1m],
.charts-side-by-side > .traditional-house-chart-container:only-child[b-skgq7wvn1m] {
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
}

/* Shield chart container (existing layout) */
.shield-chart-container[b-skgq7wvn1m] {
    position: relative;
    padding: clamp(0.5rem, 1.5%, 0.75rem);
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 
                0 2px 4px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, transform 0.2s ease;
    aspect-ratio: 1;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    }

/* Keep old class name for backward compatibility with existing CSS */
.house-chart-container[b-skgq7wvn1m] {
    position: relative;
    padding: 1.5rem;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 
                0 2px 4px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, transform 0.2s ease;
}

/* Shield chart rows and columns */
.shield-chart-container .row[b-skgq7wvn1m] {
    margin: 0 !important;
    padding: 0;
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
}

/* Override Bootstrap mb-3 class on shield chart rows */
.shield-chart-container .row.mb-3[b-skgq7wvn1m] {
    margin-bottom: 0 !important;
}

.house-chart-container .row[b-skgq7wvn1m] {
    margin-bottom: 0;
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.shield-chart-container .row.row-1[b-skgq7wvn1m],
.house-chart-container .row.row-1[b-skgq7wvn1m] {
    position: relative;
}

.shield-chart-container .row.row-2[b-skgq7wvn1m],
.house-chart-container .row.row-2[b-skgq7wvn1m] {
    position: relative;
}

.shield-chart-container .col[b-skgq7wvn1m],
.shield-chart-container .col-3[b-skgq7wvn1m],
.shield-chart-container .col-4[b-skgq7wvn1m],
.shield-chart-container .col-6[b-skgq7wvn1m] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(0.25rem, 1%, 0.5rem);
    position: relative;
    contain: layout style;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
    border-right: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
    box-sizing: border-box;
}

.shield-chart-container .row:first-child .col[b-skgq7wvn1m],
.shield-chart-container .row:first-child .col-3[b-skgq7wvn1m],
.shield-chart-container .row:first-child .col-4[b-skgq7wvn1m],
.shield-chart-container .row:first-child .col-6[b-skgq7wvn1m] {
    border-top: 1px solid var(--border-dark);
}

.shield-chart-container .row .col:first-child[b-skgq7wvn1m],
.shield-chart-container .row .col-3:first-child[b-skgq7wvn1m],
.shield-chart-container .row .col-4:first-child[b-skgq7wvn1m],
.shield-chart-container .row .col-6:first-child[b-skgq7wvn1m] {
    border-left: 1px solid var(--border-dark);
}

.house-chart-container .col[b-skgq7wvn1m],
.house-chart-container .col-3[b-skgq7wvn1m],
.house-chart-container .col-4[b-skgq7wvn1m],
.house-chart-container .col-6[b-skgq7wvn1m] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    position: relative;
    contain: layout style;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}

/* Ensure figure containers fill their Bootstrap grid cells */
.shield-chart-container[b-skgq7wvn1m]  .figure-container {
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: clamp(1px, 0.5%, 3px) !important;
    box-sizing: border-box;
    border: none !important;
    background: transparent !important;
}

/* Remove fixed heights to allow scaling */
.shield-chart-container[b-skgq7wvn1m] {
    container-type: size;
}

.shield-chart-container[b-skgq7wvn1m]  .figure-line {
    min-height: 0 !important;
    height: auto !important;
    font-size: clamp(14px, 2.5cqw, 24px) !important;
}

.shield-chart-container[b-skgq7wvn1m]  .figure-lines {
    flex: 1 1 auto !important;
    gap: clamp(1px, 0.3cqw, 3px) !important;
}

.shield-chart-container[b-skgq7wvn1m]  .figure-label {
    font-size: clamp(8px, 1.2cqw, 12px) !important;
    margin-bottom: clamp(1px, 0.3cqw, 2px) !important;
    margin-top: 0 !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.shield-chart-container[b-skgq7wvn1m]  .figure-name {
    font-size: clamp(9px, 1.1cqw, 11px) !important;
    margin-top: clamp(2px, 0.4cqw, 3px) !important;
    margin-bottom: 0 !important;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
}

.house-chart-container[b-skgq7wvn1m]  .figure-container {
    margin: 0;
    width: 100%;
    height: 100%;
}

.house-chart-container[b-skgq7wvn1m] {
    position: relative;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s ease;
}

.house-chart-container .row[b-skgq7wvn1m] {
    margin-bottom: 1rem;
    position: relative;
    display: flex;
}

.house-chart-container .row.row-1[b-skgq7wvn1m] {
    position: relative;
}

.house-chart-container .row.row-2[b-skgq7wvn1m] {
    position: relative;
}

.house-chart-container .col[b-skgq7wvn1m],
.house-chart-container .col-3[b-skgq7wvn1m],
.house-chart-container .col-4[b-skgq7wvn1m],
.house-chart-container .col-6[b-skgq7wvn1m] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    position: relative;
    min-height: 150px;
    contain: layout style;
}

/* Ensure figure containers are properly sized */
.house-chart-container[b-skgq7wvn1m]  .figure-container {
    margin: 0;
    width: 100%;
    height: 100%;
}

/* Section color coding - removed backgrounds for clean grid */
.section-mothers[b-skgq7wvn1m] {
    background-color: transparent;
}

.section-daughters[b-skgq7wvn1m] {
    background-color: transparent;
}

.section-nieces[b-skgq7wvn1m] {
    background-color: transparent;
}

.section-court[b-skgq7wvn1m] {
    background-color: transparent;
}

/* Section label overlays - positioned relative to rows */
.section-label-overlay[b-skgq7wvn1m] {
    position: absolute;
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    z-index: 10;
    border-radius: 4px;
    pointer-events: none;
}

.section-label-overlay.hidden[b-skgq7wvn1m] {
    display: none;
}

/* Position section labels relative to specific rows */
.shield-chart-container .row-1 .section-label-mothers[b-skgq7wvn1m],
.house-chart-container .row-1 .section-label-mothers[b-skgq7wvn1m] {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    z-index: 10;
}

.shield-chart-container .row-1 .section-label-daughters[b-skgq7wvn1m],
.house-chart-container .row-1 .section-label-daughters[b-skgq7wvn1m] {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    z-index: 10;
}

.shield-chart-container .row-2 .section-label-nieces[b-skgq7wvn1m],
.house-chart-container .row-2 .section-label-nieces[b-skgq7wvn1m] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.shield-chart-container .row:nth-child(5) .section-label-court[b-skgq7wvn1m],
.shield-chart-container .row:nth-child(6) .section-label-court[b-skgq7wvn1m],
.house-chart-container .row:nth-child(5) .section-label-court[b-skgq7wvn1m],
.house-chart-container .row:nth-child(6) .section-label-court[b-skgq7wvn1m] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

/* Triplicate overlays - add borders directly to cells using data attributes for reliable targeting */
/* Triplicate 1: Houses 1-2 (row 1) + House 9 (row 2) */
.shield-chart-container.show-triplicates .row-1 .col[data-house="1"][b-skgq7wvn1m],
.shield-chart-container.show-triplicates .row-1 .col[data-house="2"][b-skgq7wvn1m],
.shield-chart-container.show-triplicates .row-2 .col-3[data-house="9"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-1 .col[data-house="1"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-1 .col[data-house="2"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-2 .col-3[data-house="9"][b-skgq7wvn1m] {
    border: 3px solid rgba(255, 0, 0, 0.6) !important;
    background: rgba(255, 0, 0, 0.08) !important;
    border-radius: 8px;
    position: relative;
}

.shield-chart-container.show-triplicates .row-1 .col[data-house="1"][b-skgq7wvn1m]::after,
.shield-chart-container.show-triplicates .row-1 .col[data-house="2"][b-skgq7wvn1m]::after,
.house-chart-container.show-triplicates .row-1 .col[data-house="1"][b-skgq7wvn1m]::after,
.house-chart-container.show-triplicates .row-1 .col[data-house="2"][b-skgq7wvn1m]::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 1rem;
    background: rgba(255, 0, 0, 0.6);
    z-index: 6;
}

/* Triplicate 2: Houses 3-4 (row 1) + House 10 (row 2) */
.shield-chart-container.show-triplicates .row-1 .col[data-house="3"][b-skgq7wvn1m],
.shield-chart-container.show-triplicates .row-1 .col[data-house="4"][b-skgq7wvn1m],
.shield-chart-container.show-triplicates .row-2 .col-3[data-house="10"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-1 .col[data-house="3"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-1 .col[data-house="4"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-2 .col-3[data-house="10"][b-skgq7wvn1m] {
    border: 3px solid rgba(255, 0, 0, 0.6) !important;
    background: rgba(255, 0, 0, 0.08) !important;
    border-radius: 8px;
    position: relative;
}

.shield-chart-container.show-triplicates .row-1 .col[data-house="3"][b-skgq7wvn1m]::after,
.shield-chart-container.show-triplicates .row-1 .col[data-house="4"][b-skgq7wvn1m]::after,
.house-chart-container.show-triplicates .row-1 .col[data-house="3"][b-skgq7wvn1m]::after,
.house-chart-container.show-triplicates .row-1 .col[data-house="4"][b-skgq7wvn1m]::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 1rem;
    background: rgba(255, 0, 0, 0.6);
    z-index: 6;
}

/* Triplicate 3: Houses 5-6 (row 1) + House 11 (row 2) */
.shield-chart-container.show-triplicates .row-1 .col[data-house="5"][b-skgq7wvn1m],
.shield-chart-container.show-triplicates .row-1 .col[data-house="6"][b-skgq7wvn1m],
.shield-chart-container.show-triplicates .row-2 .col-3[data-house="11"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-1 .col[data-house="5"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-1 .col[data-house="6"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-2 .col-3[data-house="11"][b-skgq7wvn1m] {
    border: 3px solid rgba(255, 0, 0, 0.6) !important;
    background: rgba(255, 0, 0, 0.08) !important;
    border-radius: 8px;
    position: relative;
}

.shield-chart-container.show-triplicates .row-1 .col[data-house="5"][b-skgq7wvn1m]::after,
.shield-chart-container.show-triplicates .row-1 .col[data-house="6"][b-skgq7wvn1m]::after,
.house-chart-container.show-triplicates .row-1 .col[data-house="5"][b-skgq7wvn1m]::after,
.house-chart-container.show-triplicates .row-1 .col[data-house="6"][b-skgq7wvn1m]::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 1rem;
    background: rgba(255, 0, 0, 0.6);
    z-index: 6;
}

/* Triplicate 4: Houses 7-8 (row 1) + House 12 (row 2) */
.shield-chart-container.show-triplicates .row-1 .col[data-house="7"][b-skgq7wvn1m],
.shield-chart-container.show-triplicates .row-1 .col[data-house="8"][b-skgq7wvn1m],
.shield-chart-container.show-triplicates .row-2 .col-3[data-house="12"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-1 .col[data-house="7"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-1 .col[data-house="8"][b-skgq7wvn1m],
.house-chart-container.show-triplicates .row-2 .col-3[data-house="12"][b-skgq7wvn1m] {
    border: 3px solid rgba(255, 0, 0, 0.6) !important;
    background: rgba(255, 0, 0, 0.08) !important;
    border-radius: 8px;
    position: relative;
}

.house-chart-container.show-triplicates .row-1 .col[data-house="7"][b-skgq7wvn1m]::after,
.house-chart-container.show-triplicates .row-1 .col[data-house="8"][b-skgq7wvn1m]::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 1rem;
    background: rgba(255, 0, 0, 0.6);
    z-index: 6;
}

/* Hide the overlay divs since we're using direct cell styling */
.triplicate-overlay[b-skgq7wvn1m] {
    display: none !important;
}

/* Traditional 12-House Chart Layout */
.traditional-house-chart-container[b-skgq7wvn1m] {
    position: relative;
    padding: 1.5rem;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 
                0 2px 4px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, transform 0.2s ease;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    overflow: hidden;
}

/* SVG for house chart - single SVG with both boundaries and figures */
.house-chart-svg[b-skgq7wvn1m] {
    width: 100%;
    height: 100%;
    display: block;
}

/* SVG stroke colors for dark mode - override inline stroke attributes */
.house-chart-svg rect[b-skgq7wvn1m],
.house-chart-svg polygon[b-skgq7wvn1m],
.house-chart-svg line[b-skgq7wvn1m] {
    stroke: var(--border-dark) !important;
    transition: stroke 0.3s ease;
}

.house-chart-svg foreignObject[b-skgq7wvn1m] {
    pointer-events: auto;
    overflow: visible;
}

.house-figure-wrapper[b-skgq7wvn1m] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.9);
    box-sizing: border-box;
}

.house-figure-wrapper[b-skgq7wvn1m]  .figure-container {
    width: 100%;
    height: 100%;
    max-width: 100px;
    max-height: 100px;
    min-width: 70px;
    min-height: 70px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.house-figure-wrapper[b-skgq7wvn1m]  .figure-container:hover {
    transform: scale(1.05);
    z-index: 10;
}

/* Centroid anchoring for traditional house chart */
/* Create a zero-size anchor point at the exact SVG coordinate */
.house-anchor[b-skgq7wvn1m] {
    position: relative;
    width: 0;
    height: 0;
    overflow: visible;
    z-index: 10;
}

/* The card itself: Centered on the anchor, and scaled to fit */
.house-card-container[b-skgq7wvn1m] {
    position: absolute;
    top: 0;
    left: 0;
    /* This moves the card's center to the anchor point */
    transform: translate(-50%, -50%) scale(1.5); 
    
    /* Fixed size for the container to ensure centering works consistently */
    width: 200px; 
    height: 180px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.house-card-container[b-skgq7wvn1m]  .figure-container {
    width: 100%;
    height: 100%;
    max-width: 180px;
    max-height: 180px;
    min-width: 110px;
    min-height: 110px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Override figure container styling for traditional house chart - remove padding and background */
.traditional-house-chart-container .house-card-container[b-skgq7wvn1m]  .figure-container {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 0 !important;
}

/* Hide labels in traditional house chart */
.traditional-house-chart-container .house-card-container[b-skgq7wvn1m]  .figure-label {
    display: none !important;
}

.traditional-house-chart-container .house-card-container[b-skgq7wvn1m]  .figure-name {
    display: none !important;
}

/* Reduce gap between figure lines in traditional house chart */
.traditional-house-chart-container .house-card-container[b-skgq7wvn1m]  .figure-lines {
    gap: 0px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.house-card-container[b-skgq7wvn1m]  .figure-container:hover {
    transform: scale(1.05);
    z-index: 10;
}

/* Ensure interactive houses (1-4) have higher z-index than non-interactive houses */
/* This prevents House 12's hover overlay from interfering with House 1's clickability */
/* Target interactive figure containers by checking for interactive class on figure-line elements */
.traditional-house-chart-container .house-card-container:has(::deep .figure-line.interactive)[b-skgq7wvn1m] {
    z-index: 20;
}

.traditional-house-chart-container .house-anchor:has(.house-card-container:has(::deep .figure-line.interactive))[b-skgq7wvn1m] {
    z-index: 20;
}

/* Ensure interactive figure containers have higher z-index on hover */
.traditional-house-chart-container .house-card-container:has(::deep .figure-line.interactive)[b-skgq7wvn1m]  .figure-container:hover {
    z-index: 25;
}

/* Non-interactive houses should have lower base z-index to prevent interference */
/* This ensures House 12 and other non-interactive houses don't block interactive ones */
.traditional-house-chart-container .house-anchor:not(:has(.house-card-container:has(::deep .figure-line.interactive)))[b-skgq7wvn1m] {
    z-index: 5;
}

.traditional-house-chart-container .house-card-container:not(:has(::deep .figure-line.interactive))[b-skgq7wvn1m] {
    z-index: 5;
}

/* Responsive design - stack charts vertically on smaller screens */
@media (max-width: 1200px) {
    .charts-side-by-side[b-skgq7wvn1m] {
        grid-template-columns: 1fr;
    }
    
    .traditional-house-chart-container[b-skgq7wvn1m] {
        aspect-ratio: 1;
        max-width: 100%;
        min-height: 400px;
    }
}

/* Sidebar styling - now below charts */
.sidebar-header[b-skgq7wvn1m] {
    margin-bottom: 1rem;
    padding: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

.sidebar-header button[b-skgq7wvn1m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.chart-sidebar[b-skgq7wvn1m] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

/* Sidebar grid layout - 2 rows, 2 columns */
.sidebar-grid[b-skgq7wvn1m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .sidebar-grid[b-skgq7wvn1m] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

.sidebar-section[b-skgq7wvn1m] {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    background: var(--bg-primary);
    box-shadow: 0 2px 8px var(--shadow);
    transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.sidebar-section:hover[b-skgq7wvn1m] {
    box-shadow: 0 4px 12px var(--shadow-hover);
    transform: translateY(-1px);
}

.sidebar-section h3[b-skgq7wvn1m] {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.6rem;
    color: var(--text-primary);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.perfection-controls[b-skgq7wvn1m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.perfection-dropdowns[b-skgq7wvn1m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.perfection-dropdowns label[b-skgq7wvn1m] {
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: block;
    transition: color 0.3s ease;
}

.perfection-dropdowns .form-select[b-skgq7wvn1m] {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}

.perfection-dropdowns .form-select:focus[b-skgq7wvn1m] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.15);
    outline: none;
}

.perfection-results[b-skgq7wvn1m] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.perfection-results.hidden[b-skgq7wvn1m] {
    display: none;
}

.court-list[b-skgq7wvn1m] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.court-list li[b-skgq7wvn1m] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.court-list li:hover[b-skgq7wvn1m] {
    background-color: #f8f9fa;
}

.court-list li:last-child[b-skgq7wvn1m] {
    border-bottom: none;
}

.triplicities-list[b-skgq7wvn1m] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.triplicities-list li[b-skgq7wvn1m] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.triplicities-list li:last-child[b-skgq7wvn1m] {
    border-bottom: none;
}

.triplicity-item[b-skgq7wvn1m] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.triplicity-header[b-skgq7wvn1m] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.triplicity-number[b-skgq7wvn1m] {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.triplicity-description[b-skgq7wvn1m] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.3;
}

.triplicity-figures[b-skgq7wvn1m] {
    font-family: var(--font-mono, monospace);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.houses-list[b-skgq7wvn1m] {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
    border-radius: 6px;
}

.houses-list li[b-skgq7wvn1m] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.houses-list li:hover[b-skgq7wvn1m] {
    background-color: #f8f9fa;
}

.houses-list li:last-child[b-skgq7wvn1m] {
    border-bottom: none;
}

/* Toggle controls wrapper - isolated from chart updates */
.chart-controls-wrapper[b-skgq7wvn1m] {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 10;
    contain: layout style paint;
    isolation: isolate;
}

/* Toggle controls */
.chart-controls[b-skgq7wvn1m] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    min-height: 48px;
    contain: layout style paint;
    position: relative;
}

/* Toolbar */
.toolbar[b-skgq7wvn1m] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}

.toolbar-button[b-skgq7wvn1m] {
    padding: 0.6rem 1rem;
    border: 2px solid var(--accent-color);
    background: var(--bg-primary);
    color: var(--accent-color);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 4px var(--shadow);
    min-width: 48px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    contain: layout style paint;
    font-size: 1.2rem;
}

.toolbar-button:hover[b-skgq7wvn1m] {
    background: var(--accent-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--shadow-hover);
}

.toolbar-button.active[b-skgq7wvn1m] {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 2px 6px var(--shadow-hover);
}

.chart-visibility-selector[b-skgq7wvn1m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-primary, #fff);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.chart-visibility-selector label[b-skgq7wvn1m] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.chart-visibility-selector .form-select-sm[b-skgq7wvn1m] {
    min-width: 140px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

.chart-visibility-selector select:focus-visible[b-skgq7wvn1m] {
    outline: 3px solid var(--accent-color, #007bff);
    outline-offset: 2px;
}

.toggle-button[b-skgq7wvn1m] {
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--accent-color);
    background: var(--bg-primary);
    color: var(--accent-color);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 4px var(--shadow);
    min-width: 160px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    contain: layout style paint;
    position: relative;
}

.toggle-button-text[b-skgq7wvn1m] {
    display: inline-block;
    white-space: nowrap;
}

.toggle-button:hover[b-skgq7wvn1m] {
    background: var(--accent-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--shadow-hover);
}

.toggle-button.active[b-skgq7wvn1m] {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 2px 6px var(--shadow-hover);
}

.toggle-button.active[b-skgq7wvn1m]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: var(--accent-color, #007bff);
    border-radius: 2px;
}

.toggle-button:focus-visible[b-skgq7wvn1m] {
    outline: 3px solid var(--accent-color, #007bff);
    outline-offset: 2px;
}

/* Perfection Mode Styling */
.perfection-mode-section[b-skgq7wvn1m] {
    margin-bottom: 1rem;
}

.perfection-mode-badge[b-skgq7wvn1m] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.mode-occupation[b-skgq7wvn1m] {
    background-color: #28a745;
    color: white;
}

.mode-conjunction[b-skgq7wvn1m] {
    background-color: #17a2b8;
    color: white;
}

.mode-aspect[b-skgq7wvn1m] {
    background-color: #6f42c1;
    color: white;
}

.mode-translation[b-skgq7wvn1m] {
    background-color: #fd7e14;
    color: white;
}

.mode-mutation[b-skgq7wvn1m] {
    background-color: #20c997;
    color: white;
}

.mode-company[b-skgq7wvn1m] {
    background-color: #e83e8c;
    color: white;
}

.mode-none[b-skgq7wvn1m] {
    background-color: #6c757d;
    color: white;
}

/* Company of Houses Badge */
.company-badge[b-skgq7wvn1m] {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    background-color: #ffc107;
    color: #000;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    cursor: help;
}

.base-mode-indicator[b-skgq7wvn1m] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    margin-left: 0.25rem;
}

/* Scoring Section */
.scoring-section[b-skgq7wvn1m] {
    margin: 1rem 0;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #007bff;
}

.scoring-section h6[b-skgq7wvn1m] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: #495057;
    font-weight: 600;
}

.score-breakdown[b-skgq7wvn1m] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.score-item[b-skgq7wvn1m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: 3px;
}

.favorable-score[b-skgq7wvn1m] {
    background-color: #d4edda;
    color: #155724;
}

.unfavorable-score[b-skgq7wvn1m] {
    background-color: #f8d7da;
    color: #721c24;
}

.net-score[b-skgq7wvn1m] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    font-size: 1.1rem;
    border: 2px solid;
}

.score-strong-positive[b-skgq7wvn1m] {
    background-color: #d4edda;
    color: #155724;
    border-color: #28a745;
}

.score-moderate-positive[b-skgq7wvn1m] {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #17a2b8;
}

.score-neutral[b-skgq7wvn1m] {
    background-color: #e2e3e5;
    color: #383d41;
    border-color: #6c757d;
}

.score-negative[b-skgq7wvn1m] {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #dc3545;
}

.score-label[b-skgq7wvn1m] {
    font-weight: 500;
}

.score-value[b-skgq7wvn1m] {
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

/* Aggregate Scoring Section */
.aggregate-scoring-section[b-skgq7wvn1m] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border: 2px solid #007bff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

.aggregate-scoring-section h6[b-skgq7wvn1m] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1em;
    color: #007bff;
    font-weight: 600;
}

.scoring-note[b-skgq7wvn1m] {
    font-size: 0.85em;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 0.75rem;
}

/* Notes Section */
.notes-section[b-skgq7wvn1m] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.notes-section ul[b-skgq7wvn1m] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}

.company-note[b-skgq7wvn1m] {
    color: #856404;
    font-weight: 500;
    background-color: #fff3cd;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    margin: 0.25rem 0;
    display: inline-block;
    width: 100%;
}

/* Multiple Perfections */
.perfection-item[b-skgq7wvn1m] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.perfection-item:not(:last-child)[b-skgq7wvn1m] {
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 1.5rem;
}

.perfection-item:last-child[b-skgq7wvn1m] {
    margin-bottom: 0;
}

/* Aspect Analysis Section */
.aspect-analysis-section[b-skgq7wvn1m] {
    margin-bottom: 1rem;
}

.aspect-analysis-header[b-skgq7wvn1m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.aspect-analysis-header h3[b-skgq7wvn1m] {
    margin: 0;
}

.expand-button[b-skgq7wvn1m] {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.expand-button:hover[b-skgq7wvn1m] {
    background: #0056b3;
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0, 123, 255, 0.3);
}

.expand-button:active[b-skgq7wvn1m] {
    transform: scale(0.95);
}

.aspect-summary[b-skgq7wvn1m] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.aspect-summary-item[b-skgq7wvn1m] {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    background-color: #f8f9fa;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.aspect-summary-item:hover[b-skgq7wvn1m] {
    background-color: #e9ecef;
}

.aspect-summary-item .label[b-skgq7wvn1m] {
    font-weight: 500;
    color: #495057;
}

.aspect-summary-item .value[b-skgq7wvn1m] {
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.aspect-details[b-skgq7wvn1m] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #dee2e6;
}

.polarity-breakdown[b-skgq7wvn1m],
.aspect-counts[b-skgq7wvn1m],
.aspect-list[b-skgq7wvn1m] {
    margin-bottom: 1.5rem;
}

.polarity-breakdown h5[b-skgq7wvn1m],
.aspect-counts h5[b-skgq7wvn1m],
.aspect-list h5[b-skgq7wvn1m] {
    margin-bottom: 0.75rem;
    font-size: 1em;
    color: #495057;
    font-weight: 600;
}

.polarity-item[b-skgq7wvn1m] {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.25rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

.aspect-counts ul[b-skgq7wvn1m] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aspect-counts li[b-skgq7wvn1m] {
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.25rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

.aspect-items[b-skgq7wvn1m] {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.aspect-item[b-skgq7wvn1m] {
    padding: 0.875rem;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    border-left: 3px solid #007bff;
    transition: all 0.2s ease;
}

.aspect-item:hover[b-skgq7wvn1m] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transform: translateX(2px);
}

.aspect-header[b-skgq7wvn1m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.aspect-houses[b-skgq7wvn1m] {
    font-weight: 600;
    color: #495057;
}

.aspect-type[b-skgq7wvn1m] {
    padding: 0.2rem 0.5rem;
    background-color: #e7f3ff;
    color: #004085;
    border-radius: 0.25rem;
    font-size: 0.85em;
    font-weight: 600;
}

.aspect-weight[b-skgq7wvn1m] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #6c757d;
}

.aspect-figures[b-skgq7wvn1m] {
    font-size: 0.9em;
    color: #6c757d;
    font-style: italic;
}

/* Polarity verdict colors */
.polarity-favorable[b-skgq7wvn1m],
.polarity-positive[b-skgq7wvn1m] {
    color: #28a745;
    font-weight: 600;
}

.polarity-unfavorable[b-skgq7wvn1m],
.polarity-negative[b-skgq7wvn1m] {
    color: #dc3545;
    font-weight: 600;
}

.polarity-neutral[b-skgq7wvn1m] {
    color: #6c757d;
    font-weight: 600;
}

/* Smooth transitions for accordion and collapsible content */
.accordion[b-skgq7wvn1m] {
    --bs-accordion-bg: var(--bg-primary);
    --bs-accordion-color: var(--text-primary);
    --bs-accordion-border-color: var(--border-color);
}

.accordion-item[b-skgq7wvn1m] {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

.accordion-button[b-skgq7wvn1m] {
    transition: all 0.25s ease;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.accordion-button:not(.collapsed)[b-skgq7wvn1m] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: inset 0 -1px 0 var(--border-color);
}

.accordion-button:focus[b-skgq7wvn1m] {
    box-shadow: 0 0 0 0.25rem rgba(74, 158, 255, 0.25);
    border-color: var(--accent-color);
}

.accordion-collapse[b-skgq7wvn1m] {
    transition: height 0.3s ease;
}

.accordion-body[b-skgq7wvn1m] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.accordion-body *[b-skgq7wvn1m] {
    color: var(--text-primary) !important;
}

.accordion-body .text-muted[b-skgq7wvn1m] {
    color: var(--text-secondary) !important;
}

.accordion-body p[b-skgq7wvn1m],
.accordion-body h6[b-skgq7wvn1m],
.accordion-body strong[b-skgq7wvn1m],
.accordion-body ul[b-skgq7wvn1m],
.accordion-body li[b-skgq7wvn1m] {
    color: var(--text-primary) !important;
}

/* Loading state improvements */
.alert[b-skgq7wvn1m] {
    border-radius: 6px;
    transition: all 0.2s ease;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Card improvements */
.card[b-skgq7wvn1m] {
    border-radius: 8px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px var(--shadow);
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.card:hover[b-skgq7wvn1m] {
    box-shadow: 0 4px 8px var(--shadow-hover);
    transform: translateY(-2px);
}

.card-body[b-skgq7wvn1m] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.card-title[b-skgq7wvn1m] {
    color: var(--text-primary) !important;
}

.card-title h3[b-skgq7wvn1m],
.card-title h5[b-skgq7wvn1m] {
    color: var(--text-primary) !important;
}

.score-summary .card[b-skgq7wvn1m],
.score-summary .card-body[b-skgq7wvn1m] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.score-summary .card *[b-skgq7wvn1m],
.score-summary .card-body *[b-skgq7wvn1m] {
    color: var(--text-primary) !important;
}

.score-summary .card .text-success[b-skgq7wvn1m] {
    color: #28a745 !important;
}

.score-summary .card .text-danger[b-skgq7wvn1m] {
    color: #dc3545 !important;
}

.score-summary .card .text-secondary[b-skgq7wvn1m] {
    color: var(--text-secondary) !important;
}

/* Dark mode support for Bootstrap utility classes */
.text-muted[b-skgq7wvn1m] {
    color: var(--text-secondary) !important;
}

/* Ensure card borders work in dark mode */
.card.border-success[b-skgq7wvn1m] {
    border-color: #28a745 !important;
}

.card.border-danger[b-skgq7wvn1m] {
    border-color: #dc3545 !important;
}

.card.border-secondary[b-skgq7wvn1m] {
    border-color: var(--border-color) !important;
}

/* Smooth appearance for perfection analysis */
.perfection-analysis[b-skgq7wvn1m] {
    animation: fadeIn-b-skgq7wvn1m 0.3s ease-in;
    color: var(--text-primary);
}

/* Scoped dark mode styles for perfection analysis section */
.perfection-analysis h3[b-skgq7wvn1m] {
    color: var(--text-primary) !important;
}

.perfection-analysis .card[b-skgq7wvn1m],
.perfection-analysis .card-body[b-skgq7wvn1m] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.perfection-analysis .card *[b-skgq7wvn1m] {
    color: var(--text-primary) !important;
}

.perfection-analysis .card .text-success[b-skgq7wvn1m] {
    color: #28a745 !important;
}

.perfection-analysis .card .text-danger[b-skgq7wvn1m] {
    color: #dc3545 !important;
}

.perfection-analysis .card .text-secondary[b-skgq7wvn1m] {
    color: var(--text-secondary) !important;
}

.perfection-analysis .accordion[b-skgq7wvn1m],
.perfection-analysis .accordion-item[b-skgq7wvn1m],
.perfection-analysis .accordion-button[b-skgq7wvn1m],
.perfection-analysis .accordion-body[b-skgq7wvn1m] {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.perfection-analysis .accordion-button:not(.collapsed)[b-skgq7wvn1m] {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.perfection-analysis .accordion-body *[b-skgq7wvn1m] {
    color: var(--text-primary) !important;
}

.perfection-analysis .accordion-body .text-muted[b-skgq7wvn1m] {
    color: var(--text-secondary) !important;
}

@keyframes fadeIn-b-skgq7wvn1m {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/GeomancyWebUI/Components/Pages/Home.razor.rz.scp.css */
/* Mobile-first landing for Geofancy — uses tokens from wwwroot/app.css */

.landing[b-f4bl8n9970] {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
    box-sizing: border-box;
}

.landing-hero[b-f4bl8n9970] {
    text-align: center;
    padding: 1.5rem 0 2rem;
}

.landing-eyebrow[b-f4bl8n9970] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.2rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
}

.landing-eyebrow-sep[b-f4bl8n9970] {
    color: var(--border-color);
    font-weight: 400;
}

.landing-eyebrow-version[b-f4bl8n9970] {
    color: var(--text-secondary);
    font-feature-settings: "tnum";
    letter-spacing: 0.08em;
    text-transform: none;
}

.landing-title[b-f4bl8n9970] {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 8vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* The hero logo bakes in the "GeoFancy" wordmark, so the H1 next to it is
   visually hidden but still announced to screen readers and indexed by crawlers. */
.landing-title.sr-only[b-f4bl8n9970] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.landing-logo[b-f4bl8n9970] {
    display: block;
    margin: 0 auto 1.25rem;
    width: clamp(10rem, 48vw, 16rem);
    height: auto;
    border-radius: 18%;
    box-shadow: 0 10px 30px var(--shadow), 0 2px 8px var(--shadow);
}

.landing-tagline[b-f4bl8n9970] {
    margin: 0 auto 1.5rem;
    max-width: 36rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.landing-cta[b-f4bl8n9970] {
    appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.65rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: var(--accent-color);
    box-shadow: 0 4px 14px var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.landing-cta:hover[b-f4bl8n9970] {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--shadow-hover);
}

.landing-cta:active[b-f4bl8n9970] {
    transform: translateY(0);
}

.landing-cta-hint[b-f4bl8n9970] {
    margin: 1rem 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.landing-section[b-f4bl8n9970] {
    margin-top: 2.25rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.landing-h2[b-f4bl8n9970] {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.landing-prose p[b-f4bl8n9970] {
    margin: 0 0 1rem;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

.landing-prose p:last-child[b-f4bl8n9970] {
    margin-bottom: 0;
}

.landing-prose strong[b-f4bl8n9970] {
    color: var(--text-primary);
    font-weight: 600;
}

/* Compact trust bullets under “About Geofancy” on the home page */
.landing-trust-points[b-f4bl8n9970] {
    margin: 1.25rem 0 0;
    padding: 0.85rem 1rem 0.85rem 1.35rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.landing-trust-points li[b-f4bl8n9970] {
    margin-bottom: 0.45rem;
}

.landing-trust-points li:last-child[b-f4bl8n9970] {
    margin-bottom: 0;
}

.landing-trust-points strong[b-f4bl8n9970] {
    color: var(--text-primary);
    font-weight: 600;
}

.landing-about-more[b-f4bl8n9970] {
    margin: 1.25rem 0 0;
}

.landing-about-link[b-f4bl8n9970] {
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.landing-about-link:hover[b-f4bl8n9970] {
    text-decoration: underline;
}

.landing-features[b-f4bl8n9970] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.landing-card[b-f4bl8n9970] {
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow);
}

.landing-h3[b-f4bl8n9970] {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.landing-card p[b-f4bl8n9970] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.landing-details[b-f4bl8n9970] {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow);
    overflow: hidden;
}

.landing-summary[b-f4bl8n9970] {
    cursor: pointer;
    padding: 1rem 1.15rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
}

.landing-summary[b-f4bl8n9970]::-webkit-details-marker {
    display: none;
}

.landing-summary[b-f4bl8n9970]::after {
    content: "▾";
    float: right;
    color: var(--accent-color);
    font-size: 0.85rem;
}

.landing-details[open] .landing-summary[b-f4bl8n9970]::after {
    content: "▴";
}

.landing-details-body[b-f4bl8n9970] {
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid var(--border-color);
}

.landing-notes[b-f4bl8n9970] {
    margin: 0.85rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.landing-notes li[b-f4bl8n9970] {
    margin-bottom: 0.45rem;
}

.landing-notes code[b-f4bl8n9970] {
    font-size: 0.82em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

/* ============================================================
 * Latest-release card on the landing page
 *
 * Renders the top entry from RELEASES.md inline so visitors get
 * the version, date, headline, and full highlights without
 * leaving the home page. The "Known limitations" sub-block
 * collapses inside a <details> using the existing .landing-details
 * styles above. The version string is sourced from
 * GeomancyApp.GeofancyVersion (Geomancy.Core).
 * ============================================================ */
.landing-release-card[b-f4bl8n9970] {
    padding: 1.25rem 1.25rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-secondary);
    box-shadow: 0 2px 10px var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.landing-release-header[b-f4bl8n9970] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.landing-release-title[b-f4bl8n9970] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    line-height: 1.25;
}

.landing-release-channel[b-f4bl8n9970] {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: 999px;
    line-height: 1.4;
}

.landing-release-meta[b-f4bl8n9970] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.landing-release-summary[b-f4bl8n9970] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.landing-release-summary strong[b-f4bl8n9970] {
    color: var(--text-primary);
    font-weight: 600;
}

.landing-release-h4[b-f4bl8n9970] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
}

.landing-release-card .landing-notes[b-f4bl8n9970] {
    /* Reset the default top margin from the highlights block since the
       h4 above already provides spacing. */
    margin: -0.25rem 0 0;
}

.landing-release-card .landing-notes li[b-f4bl8n9970] {
    margin-bottom: 0.6rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.landing-release-card .landing-notes li:last-child[b-f4bl8n9970] {
    margin-bottom: 0;
}

.landing-release-card .landing-notes strong[b-f4bl8n9970] {
    color: var(--text-primary);
    font-weight: 600;
}

.landing-release-footer[b-f4bl8n9970] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px dashed var(--border-color);
}

.landing-release-link[b-f4bl8n9970] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.landing-release-link:hover[b-f4bl8n9970],
.landing-release-link:focus-visible[b-f4bl8n9970] {
    color: var(--accent-hover);
    text-decoration: underline;
    outline: none;
}

.landing-release-link-secondary[b-f4bl8n9970] {
    color: var(--text-secondary);
}

.landing-release-link-secondary:hover[b-f4bl8n9970],
.landing-release-link-secondary:focus-visible[b-f4bl8n9970] {
    color: var(--text-primary);
}

@media (min-width: 900px) {
    .landing[b-f4bl8n9970] {
        max-width: 56rem;
        padding-top: 2rem;
    }

    .landing-features[b-f4bl8n9970] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .landing-tagline[b-f4bl8n9970] {
        font-size: 1.12rem;
    }
}
/* _content/GeomancyWebUI/Components/Pages/MobileWorkspace.razor.rz.scp.css */
/*
 * MobileWorkspace - vertical phone/tablet layout for /mobile.
 *
 * Stacked elements inside .mobile-shell:
 *   1. .mobile-chart-drawer  - thin always-visible handle ("Show/Hide chart")
 *                              with the chart body absolutely-positioned
 *                              underneath the handle as an overlay over the
 *                              tabstrip + panel. Toggles via a single bool.
 *   2. .mobile-tabstrip      - horizontally scrollable tab buttons, snaps
 *   3. .mobile-panel         - grows to fill remaining height, scrolls
 *                               internally; hosts either the list view or
 *                               the detail view for the active tab, with a
 *                               sticky "Back to list" header in detail mode.
 *
 * All selectors are namespaced to .mobile-* so the desktop /workspace styles
 * (which enforce min-width: 1380px and side-by-side layouts) are completely
 * untouched.
 */

.mobile-shell[b-5l777dc7en] {
    /* Establishes the positioning context for the chart drawer's
       absolutely-positioned body, so it overlays the tabstrip + panel
       without reflowing them. */
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /*
     * Fill the flex column carved out by MainLayout when .mobile-shell is
     * present (see MainLayout.razor.css :has(.mobile-shell) rules). Avoid a
     * standalone 100dvh calc here so the shell never exceeds its parent —
     * that mismatch is what let the document scroll slightly and pulled tabs
     * under the fixed chart handle.
     */
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.mobile-alert[b-5l777dc7en] {
    margin: 0.4rem 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 8px;
    flex-shrink: 0;
}

/* ============================================================
 * 1) Chart drawer (handle + overlay body)
 * ============================================================ */

/* Drawer wrapper. Reserves a fixed 2.2rem strip in the .mobile-shell flex
   layout that the (separately fixed-positioned) handle occupies visually,
   so the tabstrip + panel below start at the right offset whether the
   chart is expanded or collapsed. */
.mobile-chart-drawer[b-5l777dc7en] {
    position: relative;
    flex: 0 0 2.2rem;
    /* Fixed handle height when collapsed; expanded overrides for two-line handle + hint. */
    --mobile-chart-handle-stack: 2.2rem;
    /*
     * z-index only while expanded: a constant z-index here kept the entire
     * drawer subtree (including the fixed full-screen .mobile-chart-body)
     * stacked above .mobile-tabstrip / .mobile-panel even when the chart
     * was collapsed, which blocked taps/scroll on some mobile browsers.
     */
}

.mobile-chart-drawer.is-expanded[b-5l777dc7en] {
    z-index: 20;
    /* Snug to measured two-line handle (row + hint + vertical padding); keeps sheet flush under bar. */
    --mobile-chart-handle-stack: 2.92rem;
}

/* Collapsed: never steal events from the tab strip or panel below. */
.mobile-chart-drawer.is-collapsed[b-5l777dc7en] {
    pointer-events: none;
}

.mobile-chart-drawer.is-collapsed .mobile-chart-handle[b-5l777dc7en] {
    pointer-events: auto;
}

/* Always-visible handle pinned to the viewport just below the nav. Using
   position: fixed (instead of riding the .mobile-shell flow) guarantees the
   button is reachable in every state - chart expanded or collapsed, URL bar
   visible or hidden, panel scrolled or not. z-index: 30 places it above the
   chart body (z-index: 25) so it sits *on top of* the overlay's top edge,
   visually anchoring the drawer like a sheet handle. */
.mobile-chart-handle[b-5l777dc7en] {
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    height: 2.2rem;
    z-index: 30;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--bg-secondary);
    border: 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.mobile-chart-handle-row[b-5l777dc7en] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mobile-chart-handle-hint[b-5l777dc7en] {
    display: block;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    padding: 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    color: var(--text-secondary);
}

/* In the expanded state lift the handle visually onto the chart sheet so it
   reads as the sheet's own header rather than an unrelated nav strip. */
.mobile-chart-drawer.is-expanded .mobile-chart-handle[b-5l777dc7en] {
    background: var(--bg-primary);
    box-shadow: 0 2px 8px var(--shadow);
    border-bottom-color: var(--accent-color);
    flex-direction: column;
    height: auto;
    min-height: 2.2rem;
    gap: 0.12rem;
    padding: 0.28rem 0.45rem 0.34rem;
}

.mobile-chart-handle:hover[b-5l777dc7en],
.mobile-chart-handle:focus-visible[b-5l777dc7en] {
    background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-secondary));
    outline: none;
}

.mobile-chart-handle .handle-grip[b-5l777dc7en] {
    width: 2.5rem;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    margin-right: 0.4rem;
}

.mobile-chart-handle .handle-chevron[b-5l777dc7en] {
    font-family: monospace;
    font-size: 1rem;
    line-height: 1;
    margin-left: 0.4rem;
    transform: translateY(-1px);
}

/* The chart body is a FULL-VIEWPORT OVERLAY: position: fixed anchors it to
   the viewport (not just the shell) so it can claim every pixel from the
   nav strip to the bottom edge regardless of where in the page the user
   has scrolled. Stays mounted in the DOM when collapsed (so ChartSurface's
   circuit isn't torn down), but is faded + scaled out and non-interactive.
   No internal scrolling: .mobile-chart-stage uses transform: scale() to
   guarantee the chart always fits the available square region, even on
   narrow phones, without compromising figure proportions. */
.mobile-chart-body[b-5l777dc7en] {
    position: fixed;
    top: calc(3.5rem + var(--mobile-chart-handle-stack));
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    /* Extra bottom padding gives the Mother input strip breathing room
       from the drawer's bottom edge instead of sitting flush against it. */
    padding: 0.5rem 0.5rem 0.95rem;
    box-sizing: border-box;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 6px 14px var(--shadow);
    transform-origin: top center;
    transition: transform 0.22s ease, opacity 0.22s ease,
                visibility 0s linear 0.22s;
    z-index: 25;
    overflow: hidden;
}

.mobile-chart-drawer.is-collapsed .mobile-chart-body[b-5l777dc7en] {
    transform: translateY(-12px) scaleY(0.96);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    /* Sit below .mobile-tabstrip / .mobile-panel when drawer is not expanded. */
    z-index: 1;
}

.mobile-chart-drawer.is-expanded .mobile-chart-body[b-5l777dc7en] {
    transform: translateY(0) scaleY(1);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    /* When expanding, drop the visibility delay so it appears immediately. */
    transition: transform 0.22s ease, opacity 0.22s ease,
                visibility 0s linear 0s;
    /* No top gutter under the handle bar — toolbar sits tight for a neat sheet edge. */
    padding-top: 0.12rem;
}

.mobile-chart-toolbar[b-5l777dc7en] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.mobile-pill-btn[b-5l777dc7en] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px var(--shadow);
}

.mobile-pill-btn:hover[b-5l777dc7en],
.mobile-pill-btn:focus-visible[b-5l777dc7en] {
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px var(--shadow-hover);
    outline: none;
}

.mobile-pill-btn:active[b-5l777dc7en] {
    transform: translateY(0);
}

.mobile-chart-type-label[b-5l777dc7en] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Square stage that always fits the available viewport region without
   ever requiring the user to scroll inside the overlay. Strategy:
     1. --chart-fit picks the smaller of (viewport width minus a tiny
        gutter), (vertical room left in the overlay after the toolbar),
        and a 70dvh ceiling so the chart never dominates a tall phone.
     2. The hosted ChartSurface is rendered at a fixed comfortable
        480x480 native size (well above the ~435 "things start to break"
        threshold the user observed), then transform: scale()'d down by
        the ratio --chart-fit/480 so the rendered output fits exactly
        the calculated stage size.
   This preserves figure proportions and glyph sharpness on every phone
   from a 360px-wide budget device up to a tablet, with zero compression
   artifacts and zero internal scrolling. */
.mobile-chart-stage[b-5l777dc7en] {
    /* Vertical budget breakdown (subtracted from 100dvh):
         - 3.5rem  top nav
         - 2.2rem  chart drawer handle
         - 2.4rem  chart toolbar (Switch Chart Type + label)
         - ~9.5rem Mother input strip (label + 4 compact lines + name + padding)
         - ~1.6rem body padding + flex gaps + bottom breathing room
       Total ~19.2rem -> the chart-fit subtracts a single rounded 11rem on top
       of nav + handle to reserve room for the toolbar + strip + bottom gap.
       The 70dvh ceiling still applies on tall phones so the chart never
       dominates the screen even when there is headroom. */
    --chart-fit: min(
        calc(100dvw - 1rem),
        calc(100dvh - 3.5rem - 2.2rem - 11rem),
        70dvh
    );
    width: var(--chart-fit);
    height: var(--chart-fit);
    margin: 0 auto;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
}

/* Handle grows when chart is open (hint line); keep chart scaling honest. */
.mobile-chart-drawer.is-expanded .mobile-chart-stage[b-5l777dc7en] {
    --chart-fit: min(
        calc(100dvw - 1rem),
        calc(100dvh - 3.5rem - var(--mobile-chart-handle-stack) - 11rem),
        70dvh
    );
}

/* ============================================================
 * Mother input strip
 *
 * Four large tap targets, one per Mother, that sit between the
 * chart toolbar and the chart stage inside the mobile drawer.
 * Each cell hosts a child FigureContainer in interactive mode,
 * so we use Blazor's ::deep combinator to scale up its line
 * targets and tighten its padding without affecting the same
 * FigureContainer's appearance inside the chart itself.
 *
 * Layout: a CSS grid with four equal columns. On the very
 * narrowest phones the columns stay equal (auto sized down by
 * the grid) rather than reflowing to two rows, because two
 * 2x2 rows would steal vertical space from the chart.
 * ============================================================ */
.mobile-mother-inputs[b-5l777dc7en] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.mobile-mother-cell[b-5l777dc7en] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding: 0.2rem 0.2rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    box-shadow: 0 2px 6px var(--shadow);
    text-align: center;
}

/* Latin house name (e.g. Vita, Lucrum). Title-case rather than ALL CAPS
   so a longer name like "Benefacta" or "Itineris" stays legible at the
   compact font size. */
.mobile-mother-label[b-5l777dc7en] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.05;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-mother-figure[b-5l777dc7en] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

/* Reach into FigureContainer (a child component, so Blazor's
   per-component scope attribute lives on its own classes; we
   need ::deep to bypass that). Goal: make the four tap rows
   thumb-sized while keeping the cell compact enough that the
   strip never pushes the chart off-screen. */
.mobile-mother-figure[b-5l777dc7en]  .figure-container {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0.18rem;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.mobile-mother-figure[b-5l777dc7en]  .figure-container:hover {
    border: none;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.mobile-mother-figure[b-5l777dc7en]  .figure-lines {
    gap: 2px;
    flex: 1 1 auto;
    justify-content: center;
}

/* 26px tap rows comfortably exceed the 24px adjacent-target floor while
   shaving a few rem of strip height vs. the previous 32px lines. */
.mobile-mother-figure[b-5l777dc7en]  .figure-line {
    font-size: 0.9rem;
    min-height: 26px;
    height: 26px;
    line-height: 1;
}

/* Scale-on-hover transforms fight touch interaction (the figure
   visibly jumps just before regeneration), so suppress them on
   the strip cells where the cell itself is the affordance. */
.mobile-mother-figure[b-5l777dc7en]  .figure-line.interactive:hover,
.mobile-mother-figure[b-5l777dc7en]  .figure-line.interactive:active {
    transform: none;
}

.mobile-mother-figure[b-5l777dc7en]  .figure-name {
    font-size: 0.62rem;
    margin-top: 0.1rem;
    line-height: 1.1;
    word-break: break-word;
    color: var(--text-secondary);
    font-style: normal;
    font-weight: 600;
}

/* Render the hosted ChartSurface at a fixed roomy native size, then
   visually scale it to fit the stage. Layout-wise the inner element
   stays 480x480 (overflowing the stage), which the parent's
   overflow: hidden clips - but visually the scale() ensures it fits
   exactly. ::deep is required because ChartSurface is a child component. */
.mobile-chart-stage[b-5l777dc7en]  > * {
    width: 480px !important;
    height: 480px !important;
    max-width: none !important;
    max-height: none !important;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: scale(calc(var(--chart-fit) / 480px));
}

/* ============================================================
 * 2) Horizontal tab strip + flow hint
 * ============================================================ */

/* Keeps tab row + hint stacked above the chart overlay when collapsed. */
.mobile-tabstrip-band[b-5l777dc7en] {
    flex: 0 0 auto;
    position: relative;
    z-index: 12;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mobile-tabstrip[b-5l777dc7en] {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    /* Hide the scrollbar (kept scrollable via touch / wheel). */
    scrollbar-width: none;
    /* Subtle fade on the right edge suggests more tabs off-screen. */
    mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 min(92%, calc(100% - 2rem)),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 min(92%, calc(100% - 2rem)),
        transparent 100%
    );
}

.mobile-flow-hint[b-5l777dc7en] {
    margin: 0;
    padding: 0.4rem 0.65rem 0.45rem;
    font-size: 0.7rem;
    line-height: 1.42;
    text-align: center;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-primary));
    border-bottom: 1px solid var(--border-color);
    letter-spacing: 0.015em;
    max-width: 100%;
    box-sizing: border-box;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.mobile-tabstrip[b-5l777dc7en]::-webkit-scrollbar {
    display: none;
}

.mobile-tab-btn[b-5l777dc7en] {
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease;
}

.mobile-tab-btn:hover[b-5l777dc7en],
.mobile-tab-btn:focus-visible[b-5l777dc7en] {
    border-color: var(--accent-color);
    outline: none;
}

.mobile-tab-btn.active[b-5l777dc7en] {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 2px 6px var(--shadow-hover);
}

/* ============================================================
 * 3) Panel (list / detail body)
 * ============================================================ */
.mobile-panel[b-5l777dc7en] {
    flex: 1 1 auto;
    position: relative;
    z-index: 12;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
}

/* Sticky "back" header that appears only when the panel is in detail mode
   for one of the three list+detail tabs. Tappable and big enough to thumb. */
.mobile-panel-back[b-5l777dc7en] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-color);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.mobile-panel-back:hover[b-5l777dc7en],
.mobile-panel-back:focus-visible[b-5l777dc7en] {
    background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-secondary));
    outline: none;
}

.mobile-panel-back .back-chevron[b-5l777dc7en] {
    font-size: 1.6rem;
    line-height: 0.8;
    font-weight: 700;
    margin-top: -2px;
}

.mobile-panel-back .back-label[b-5l777dc7en] {
    line-height: 1.2;
}

/* Inner scroll container so the back header stays pinned while the content
   scrolls. The hosted list/detail components grow to 100% width naturally. */
.mobile-panel-body[b-5l777dc7en] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* One-time (dismissible) orientation card; storage key in MobileWorkspace.razor */
.mobile-welcome-callout[b-5l777dc7en] {
    flex-shrink: 0;
    margin: 0 0 0.65rem 0;
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 7%, var(--bg-secondary));
    box-shadow: 0 1px 5px var(--shadow);
}

.mobile-welcome-callout-inner[b-5l777dc7en] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.6rem 0.65rem;
}

.mobile-welcome-callout-text[b-5l777dc7en] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
}

.mobile-welcome-callout-title[b-5l777dc7en] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-color);
}

.mobile-welcome-callout-body[b-5l777dc7en] {
    font-size: 0.78rem;
    line-height: 1.42;
    color: var(--text-primary);
}

.mobile-welcome-callout-dismiss[b-5l777dc7en] {
    flex: 0 0 auto;
    align-self: center;
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.mobile-welcome-callout-dismiss:hover[b-5l777dc7en],
.mobile-welcome-callout-dismiss:focus-visible[b-5l777dc7en] {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    outline: none;
}

/* Make the embedded components fill the panel width on mobile. They were
   designed to live inside a fixed-width column on desktop, so we explicitly
   relax those size constraints when they appear inside the mobile body. */
.mobile-panel-body[b-5l777dc7en]  > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* The PerfectionDetailPanel / WayOfPointsDetailPanel / FigureDetailPanel have
   their own overflow: auto + height: 100% rules which assume they sit inside
   a fixed-height desktop column. Inside the mobile panel we want them to
   grow with their content and let .mobile-panel-body do the scrolling. */
.mobile-panel-body[b-5l777dc7en]  .perf-detail-panel,
.mobile-panel-body[b-5l777dc7en]  .wop-detail-panel,
.mobile-panel-body[b-5l777dc7en]  .figure-detail-panel,
.mobile-panel-body[b-5l777dc7en]  .perfections-list,
.mobile-panel-body[b-5l777dc7en]  .wop-list,
.mobile-panel-body[b-5l777dc7en]  .court-houses-tables {
    height: auto;
    max-height: none;
    overflow: visible;
}

/* Inner scroll regions inside list components (e.g. .perf-lists, .wop-groups)
   should also let the page handle scrolling on mobile - otherwise we'd nest
   two scroll containers and the inner one would steal swipes. */
.mobile-panel-body[b-5l777dc7en]  .perf-lists,
.mobile-panel-body[b-5l777dc7en]  .wop-groups {
    overflow: visible;
    max-height: none;
}

/* ============================================================
 * Triplicates (mobile)
 * ============================================================ */
.mobile-triplicities-list[b-5l777dc7en] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-triplicity-item[b-5l777dc7en] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.mobile-triplicity-header[b-5l777dc7en] {
    display: flex;
    gap: 0.45rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.mobile-triplicity-number[b-5l777dc7en] {
    font-weight: 700;
    color: var(--accent-color);
    font-size: 0.88rem;
}

.mobile-triplicity-description[b-5l777dc7en] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
}

.mobile-triplicity-figures[b-5l777dc7en] {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.mobile-empty[b-5l777dc7en] {
    margin: 1.5rem 0.5rem;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

/* ============================================================
 * Lots & Other (Experimental aspect analysis)
 * ============================================================ */
.mobile-experimental-section[b-5l777dc7en] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mobile-experimental-banner[b-5l777dc7en] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: rgba(255, 193, 7, 0.05);
    flex-wrap: wrap;
}

.mobile-experimental-badge[b-5l777dc7en] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b8860b;
    background: rgba(255, 193, 7, 0.18);
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.mobile-experimental-note[b-5l777dc7en] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.mobile-subsection[b-5l777dc7en] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.mobile-aspect-analysis-header[b-5l777dc7en] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.mobile-aspect-analysis-header h3[b-5l777dc7en] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.mobile-aspect-summary[b-5l777dc7en] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-aspect-summary-item[b-5l777dc7en] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.mobile-aspect-summary-item .label[b-5l777dc7en] {
    color: var(--text-secondary);
}

.mobile-aspect-row[b-5l777dc7en] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 0.3rem 0;
    border-bottom: 1px dashed var(--border-color);
}

.mobile-aspect-row:last-child[b-5l777dc7en] {
    border-bottom: none;
}

/*
 * Share-chart pill on the mobile chart toolbar. Mirrors the desktop
 * .workspace-share-btn treatment: same pill shape as the existing toolbar
 * buttons, but accent-coloured so it reads as the secondary action and
 * inverts on tap as the "Copied!" / "Couldn't copy" confirmation flashes.
 */
.mobile-share-btn[b-5l777dc7en] {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.15s ease,
                box-shadow 0.2s ease;
}

.mobile-share-btn:hover[b-5l777dc7en],
.mobile-share-btn:focus-visible[b-5l777dc7en] {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/*
 * Export-chart card pinned above the legacy aspect analysis on Lots & Other.
 * Uses the same .mobile-subsection framing as the rest of that tab so it
 * lines up with the surrounding cards visually.
 */
.mobile-chart-export-section[b-5l777dc7en] {
    padding: 0.7rem 0.85rem;
}

.mobile-chart-export-header[b-5l777dc7en] {
    margin-bottom: 0.35rem;
}

.mobile-chart-export-header h3[b-5l777dc7en] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mobile-chart-export-help[b-5l777dc7en] {
    margin: 0 0 0.65rem 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
}

.mobile-chart-export-section .mobile-pill-btn[disabled][b-5l777dc7en] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/*
 * Actions below help text: stacked full-width so toast labels never clip.
 */
.mobile-chart-export-actions[b-5l777dc7en] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
}

.mobile-chart-export-actions .mobile-pill-btn[b-5l777dc7en] {
    flex: none;
    width: 100%;
    min-width: 0;
    text-align: center;
    justify-content: center;
}
/* _content/GeomancyWebUI/Components/Pages/Workspace.razor.rz.scp.css */
/*
 * Desktop-only workspace.
 *
 * Reference design (from mockup):
 *   - Total surface: 1380w x 700h
 *   - Left chart pane:  625w x 700h with a 535x535 chart inside
 *   - Right tabs pane:  755w x 700h with tab nav on top, then a
 *                       330w tables column + 37px gap + 390w detail column
 *
 * We enforce min-width / min-height matching those numbers so the layout
 * NEVER collapses below the design - on narrower viewports the workspace
 * shell allows scroll, on wider viewports everything scales up proportionally.
 */
.workspace-shell[b-hn7op89u0u] {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    height: calc(100dvh - 9rem);
    min-height: 700px;
    min-width: 1380px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
}

.workspace-grid[b-hn7op89u0u] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    /* Same 625:755 proportion as the mockup */
    grid-template-columns: minmax(625px, 625fr) minmax(755px, 755fr);
    gap: 0;
    align-items: stretch;
}

/* LEFT: chart pane (625x700 by default, scales up). */
.workspace-chart-pane[b-hn7op89u0u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 625px;
    min-height: 0;
    box-sizing: border-box;
    /* Vertical padding matches the ~80px of breathing room above and below
       the 535x535 chart in the mockup. */
    padding: 1.25rem 2.5rem 4rem;
}

.workspace-chart-toolbar[b-hn7op89u0u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.workspace-pill-btn[b-hn7op89u0u] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px var(--shadow);
}

.workspace-pill-btn:hover[b-hn7op89u0u] {
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px var(--shadow-hover);
}

.workspace-pill-btn:active[b-hn7op89u0u] {
    transform: translateY(0);
}

.workspace-chart-type-label[b-hn7op89u0u] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.workspace-chart-stage[b-hn7op89u0u] {
    flex: 1 1 auto;
    min-height: 535px;
    min-width: 535px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    container-type: size;
}

/*
 * Chart sizing: square that fills the smaller of the stage's width / height.
 * Hard floor at 535px so the chart never compresses past the design size.
 * Overrides the default :only-child 600px cap from chart-surface.css.
 */
.workspace-chart-stage[b-hn7op89u0u]  .charts-side-by-side {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workspace-chart-stage[b-hn7op89u0u]  .charts-side-by-side > .shield-chart-container:only-child,
.workspace-chart-stage[b-hn7op89u0u]  .charts-side-by-side > .traditional-house-chart-container:only-child {
    grid-column: auto;
    margin: 0;
    width: max(535px, min(100cqw, 100cqh));
    height: max(535px, min(100cqw, 100cqh));
    max-width: none;
    min-height: 535px;
}

/* RIGHT: tabs pane (755x700 by default, scales up).
   Tab strip is fixed at top; each tab body manages its own internal scroll
   so the workspace shell never scrolls. */
.workspace-tabs-pane[b-hn7op89u0u] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 755px;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-sizing: border-box;
    /* Some breathing room around the tab content */
    padding: 0.5rem 1rem 1rem;
}

.workspace-tabs-nav[b-hn7op89u0u] {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    overflow-x: auto;
    flex-shrink: 0;
    margin-bottom: 0.75rem;
}

.workspace-tab-btn[b-hn7op89u0u] {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}

.workspace-tab-btn:hover[b-hn7op89u0u] {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.04);
}

.workspace-tab-btn.active[b-hn7op89u0u] {
    color: var(--accent-color);
}

.workspace-tab-btn.active[b-hn7op89u0u]::after {
    content: '';
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -1px;
    height: 2px;
    background: var(--accent-color);
    border-radius: 2px 2px 0 0;
}

.workspace-tab-body[b-hn7op89u0u] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 0;
    /* Inner tab bodies own their own scroll containers so nothing leaks
       to the tab strip. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.workspace-placeholder[b-hn7op89u0u] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    color: var(--text-secondary);
    font-style: italic;
}

/*
 * Court & Houses tab body matches the mockup's right pane internals:
 *   - Tables column (Court + Houses) on the left, ~330w
 *   - 37px gap
 *   - Detail panel on the right, ~390w
 *   - Both columns share the same height (~535)
 */
.court-houses-layout[b-hn7op89u0u] {
    display: grid;
    grid-template-columns: minmax(330px, 330fr) minmax(390px, 390fr);
    column-gap: 37px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 535px;
    min-width: 0;
    height: 100%;
}

.court-houses-tables-col[b-hn7op89u0u] {
    min-width: 330px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.court-houses-detail-col[b-hn7op89u0u] {
    min-width: 390px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*
 * Perfections tab matches the Court & Houses layout: a list column on the
 * left (~330w), 37px gap, then a detail panel column on the right (~390w).
 * Both columns share the available height and own their own scroll.
 */
.perfections-layout[b-hn7op89u0u] {
    display: grid;
    grid-template-columns: minmax(330px, 330fr) minmax(390px, 390fr);
    column-gap: 37px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 535px;
    min-width: 0;
    height: 100%;
}

.perfections-list-col[b-hn7op89u0u] {
    min-width: 330px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.perfections-detail-col[b-hn7op89u0u] {
    min-width: 390px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*
 * Way Of Points tab mirrors the Perfections layout one-for-one: a list
 * column on the left (~330w) with the four element groups, 37px gap, and a
 * rich detail panel on the right (~390w). Element-color tokens are used
 * inside the child components via inline `--wop-element-color` styles, so
 * this layer only needs the same grid + sizing as Perfections.
 */
.way-of-points-layout[b-hn7op89u0u] {
    display: grid;
    grid-template-columns: minmax(330px, 330fr) minmax(390px, 390fr);
    column-gap: 37px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 535px;
    min-width: 0;
    height: 100%;
}

.way-of-points-list-col[b-hn7op89u0u] {
    min-width: 330px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.way-of-points-detail-col[b-hn7op89u0u] {
    min-width: 390px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*
 * Lots & Other (currently houses the legacy Aspect Analysis behind an
 * Experimental banner). Scrolls internally so it doesn't push the tab strip.
 */
.experimental-section[b-hn7op89u0u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.experimental-banner[b-hn7op89u0u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border: 1px dashed rgba(255, 152, 0, 0.55);
    border-radius: 8px;
    background: rgba(255, 152, 0, 0.06);
}

.experimental-badge[b-hn7op89u0u] {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 152, 0, 0.18);
    color: #ff9800;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255, 152, 0, 0.45);
}

.experimental-note[b-hn7op89u0u] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Other simple tab bodies that need their own scroll */
.workspace-tab-body > .triplicities-list[b-hn7op89u0u],
.workspace-tab-body > .workspace-placeholder[b-hn7op89u0u] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.workspace-subsection[b-hn7op89u0u] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    background: var(--bg-primary);
}

.workspace-subsection > h3[b-hn7op89u0u] {
    margin: 0 0 0.75rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.4rem;
    color: var(--text-primary);
}

.aspect-analysis-header[b-hn7op89u0u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.aspect-summary[b-hn7op89u0u] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.aspect-summary-item[b-hn7op89u0u] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.9rem;
}

.aspect-summary-item .label[b-hn7op89u0u] {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.aspect-row[b-hn7op89u0u] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* Triplicates tab */
.triplicities-list[b-hn7op89u0u] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.triplicities-list .triplicity-item[b-hn7op89u0u] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.triplicities-list .triplicity-header[b-hn7op89u0u] {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
}

.triplicities-list .triplicity-number[b-hn7op89u0u] {
    font-weight: 700;
    color: var(--accent-color);
}

.triplicities-list .triplicity-description[b-hn7op89u0u] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.triplicities-list .triplicity-figures[b-hn7op89u0u] {
    color: var(--text-primary);
    font-size: 0.95rem;
}

/*
 * Share-chart button - lives in the chart toolbar next to "Switch Chart Type".
 * Uses the same pill shape as the existing toolbar buttons but adopts the
 * accent colour while flashing the "Link copied!" confirmation so the user
 * gets unmistakable feedback even with the click well behind their cursor.
 */
.workspace-share-btn[b-hn7op89u0u] {
    /* Subtle accent so it's discoverable as the secondary action without
       fighting "Switch Chart Type" for visual weight on first read. */
    border-color: var(--accent-color);
    color: var(--accent-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                transform 0.15s ease, box-shadow 0.2s ease;
}

.workspace-share-btn:hover[b-hn7op89u0u] {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/*
 * Chart export card on the Lots & Other tab. Pinned above the legacy
 * Aspect Analysis so users find it immediately when looking for a way to
 * save / archive a reading.
 */
.chart-export-section[b-hn7op89u0u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chart-export-header[b-hn7op89u0u] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

.chart-export-header > div:first-child[b-hn7op89u0u] {
    width: 100%;
    min-width: 0;
}

.chart-export-header h3[b-hn7op89u0u] {
    margin: 0 0 0.4rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-export-help[b-hn7op89u0u] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.chart-export-actions .workspace-pill-btn[disabled][b-hn7op89u0u] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/*
 * Actions sit below the heading + help text (never beside), full-width,
 * stacked so long toast labels never push off the tab pane.
 */
.chart-export-actions[b-hn7op89u0u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
}

.chart-export-actions .workspace-pill-btn[b-hn7op89u0u] {
    width: 100%;
    min-width: 0;
    text-align: center;
    justify-content: center;
}
/* _content/GeomancyWebUI/Components/Workspace/CourtAndHousesTab.razor.rz.scp.css */
/*
 * Two stacked tables (Court 4 rows + Houses 12 rows) that together fit the
 * available vertical space without scrolling. Row padding scales down using
 * clamp() so everything stays aligned with the chart on the left.
 */
.court-houses-tables[b-i3n58v99ya] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.court-houses-section-title[b-i3n58v99ya] {
    font-size: clamp(0.85rem, 1.4vh, 1.05rem);
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
}

.court-houses-table[b-i3n58v99ya] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    font-size: clamp(0.7rem, 1.1vh, 0.85rem);
    table-layout: fixed;
}

/*
 * We turn each table into a CSS grid so rows can flex/shrink to fit the
 * available height. Both tables use the same 40/60 column split; only the
 * tbody's grid-template-rows differs.
 */
.court-houses-table.court-table[b-i3n58v99ya] {
    flex: 0 0 auto;
    display: grid;
    grid-template-rows: auto auto;
}

.court-houses-table.houses-table[b-i3n58v99ya] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
}

.court-houses-table thead[b-i3n58v99ya],
.court-houses-table tbody[b-i3n58v99ya] {
    display: grid;
    width: 100%;
    min-height: 0;
}

.court-houses-table.court-table tbody[b-i3n58v99ya] {
    grid-template-rows: repeat(4, auto);
}

.court-houses-table.houses-table tbody[b-i3n58v99ya] {
    grid-template-rows: repeat(12, minmax(0, 1fr));
}

/* Court table is 2 columns; Houses table is 3 columns (#, House Name, Occupant). */
.court-houses-table.court-table thead tr[b-i3n58v99ya],
.court-houses-table.court-table tbody tr[b-i3n58v99ya] {
    display: grid;
    grid-template-columns: 40% 60%;
    width: 100%;
    min-height: 0;
}

.court-houses-table.houses-table thead tr[b-i3n58v99ya],
.court-houses-table.houses-table tbody tr[b-i3n58v99ya] {
    display: grid;
    grid-template-columns: 14% 38% 48%;
    width: 100%;
    min-height: 0;
}

.court-houses-table thead[b-i3n58v99ya] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.court-houses-table th[b-i3n58v99ya],
.court-houses-table td[b-i3n58v99ya] {
    padding: clamp(0.1rem, 0.4vh, 0.45rem) 0.5rem;
    text-align: center;
    /* Use right + bottom borders only to avoid doubling between cells */
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.court-houses-table th:last-child[b-i3n58v99ya],
.court-houses-table td:last-child[b-i3n58v99ya] {
    border-right: none;
}

.court-houses-table tbody tr:last-child td[b-i3n58v99ya] {
    border-bottom: none;
}

.court-houses-table tbody tr[b-i3n58v99ya] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.court-houses-table tbody tr:hover[b-i3n58v99ya] {
    background-color: rgba(255, 255, 255, 0.04);
}

.court-houses-table tbody tr.is-selected[b-i3n58v99ya] {
    background-color: rgba(120, 80, 200, 0.18);
    color: var(--accent-color);
}

.court-houses-table tbody tr.is-selected td[b-i3n58v99ya] {
    color: var(--accent-color);
    font-weight: 600;
}

.court-houses-table .number-cell[b-i3n58v99ya] {
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.court-houses-table .position-cell[b-i3n58v99ya] {
    font-weight: 500;
}

.court-houses-table .occupant-cell[b-i3n58v99ya] {
    /* No fixed width here - let the grid columns drive sizing */
}
/* _content/GeomancyWebUI/Components/Workspace/FigureDetailPanel.razor.rz.scp.css */
/*
 * FigureDetailPanel - the rich, scrollable inspector that appears in the
 * Court & Houses tab. The panel itself is the ONLY scroll container in that
 * tab body so the scrollbar sits next to the figure data, not next to the
 * tab strip.
 *
 * Design tokens used:
 *   --bg-primary, --bg-secondary, --border-color, --text-primary,
 *   --text-secondary, --accent-color, --shadow
 *
 * Element accents are scoped here so they look right on both light and dark
 * themes without leaking into other components.
 */
.figure-detail-panel[b-rq76g9efsv] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.1rem 1.25rem 1.5rem;
    box-shadow: 0 4px 16px var(--shadow);
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.figure-detail-panel.is-empty[b-rq76g9efsv] {
    align-items: center;
    justify-content: center;
}

.detail-empty-state[b-rq76g9efsv] {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem 1rem;
}

/* ============================================================
 * Header: slot eyebrow + huge figure name + strength badge
 * ============================================================ */
.detail-header[b-rq76g9efsv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.detail-header-titles[b-rq76g9efsv] {
    min-width: 0;
}

.slot-eyebrow[b-rq76g9efsv] {
    margin: 0 0 0.15rem 0;
    color: var(--accent-color);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.figure-name-display[b-rq76g9efsv] {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.other-names[b-rq76g9efsv] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-style: italic;
}

.detail-header-strength[b-rq76g9efsv] {
    flex-shrink: 0;
    align-self: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.strength-strong[b-rq76g9efsv] {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.4);
}

.strength-weak[b-rq76g9efsv] {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    border-color: rgba(244, 67, 54, 0.4);
}

.strength-neutral[b-rq76g9efsv] {
    background: rgba(158, 158, 158, 0.15);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* ============================================================
 * Chip row: planet, sign, quality, keyword
 * ============================================================ */
.chip-row[b-rq76g9efsv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip[b-rq76g9efsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
}

.chip-glyph[b-rq76g9efsv] {
    font-size: 1rem;
    line-height: 1;
}

.chip-text[b-rq76g9efsv] {
    line-height: 1;
}

.chip-planet[b-rq76g9efsv] {
    background: rgba(255, 193, 7, 0.10);
    border-color: rgba(255, 193, 7, 0.35);
}

.chip-planet .chip-glyph[b-rq76g9efsv] {
    color: #ffc107;
}

.chip-sign[b-rq76g9efsv] {
    background: rgba(120, 80, 200, 0.10);
    border-color: rgba(120, 80, 200, 0.35);
}

.chip-sign .chip-glyph[b-rq76g9efsv] {
    color: #9575cd;
}

.chip-quality[b-rq76g9efsv] {
    background: var(--bg-secondary);
}

.chip-keyword[b-rq76g9efsv] {
    font-style: italic;
    color: var(--text-secondary);
    background: transparent;
    border-style: dashed;
}

/* ============================================================
 * Card: re-usable container for each section in the panel
 * ============================================================ */
.detail-card[b-rq76g9efsv] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.card-title[b-rq76g9efsv] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

/* ============================================================
 * Elements card: 4 alchemical badges + inner / outer pills
 * ============================================================ */
.elements-grid[b-rq76g9efsv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
}

.element-badge[b-rq76g9efsv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.55rem 0.35rem;
    border-radius: 8px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-primary);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-height: 4.5rem;
}

.element-glyph[b-rq76g9efsv] {
    font-size: 1.55rem;
    line-height: 1;
}

.element-label[b-rq76g9efsv] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.element-value[b-rq76g9efsv] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.element-badge.is-dormant[b-rq76g9efsv] {
    opacity: 0.4;
}

.element-badge.is-active[b-rq76g9efsv] {
    box-shadow: 0 2px 8px var(--shadow);
}

.element-badge.fire.is-active[b-rq76g9efsv] {
    background: linear-gradient(180deg, rgba(244, 67, 54, 0.18), rgba(244, 67, 54, 0.05));
    border-color: rgba(244, 67, 54, 0.55);
}
.element-badge.fire .element-glyph[b-rq76g9efsv] { color: #f44336; }

.element-badge.air.is-active[b-rq76g9efsv] {
    background: linear-gradient(180deg, rgba(255, 235, 59, 0.20), rgba(255, 235, 59, 0.05));
    border-color: rgba(255, 235, 59, 0.55);
}
.element-badge.air .element-glyph[b-rq76g9efsv] { color: #fbc02d; }

.element-badge.water.is-active[b-rq76g9efsv] {
    background: linear-gradient(180deg, rgba(33, 150, 243, 0.20), rgba(33, 150, 243, 0.05));
    border-color: rgba(33, 150, 243, 0.55);
}
.element-badge.water .element-glyph[b-rq76g9efsv] { color: #2196f3; }

.element-badge.earth.is-active[b-rq76g9efsv] {
    background: linear-gradient(180deg, rgba(76, 175, 80, 0.18), rgba(76, 175, 80, 0.05));
    border-color: rgba(76, 175, 80, 0.55);
}
.element-badge.earth .element-glyph[b-rq76g9efsv] { color: #66bb6a; }

.inner-outer-row[b-rq76g9efsv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.2rem;
}

.io-pill[b-rq76g9efsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.55rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--text-primary);
}

.io-label[b-rq76g9efsv] {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
}

.io-glyph[b-rq76g9efsv] {
    font-size: 1rem;
    line-height: 1;
}

.io-glyph.fire[b-rq76g9efsv]  { color: #f44336; }
.io-glyph.air[b-rq76g9efsv]   { color: #fbc02d; }
.io-glyph.water[b-rq76g9efsv] { color: #2196f3; }
.io-glyph.earth[b-rq76g9efsv] { color: #66bb6a; }

.io-pill-pattern .io-value[b-rq76g9efsv] {
    font-style: italic;
}

/* ============================================================
 * Prose cards (Divinatory Meaning, Commentary, Notes, etc.)
 * ============================================================ */
.prose-card .prose-text[b-rq76g9efsv] {
    margin: 0;
}

.prose-text[b-rq76g9efsv] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.55;
}

.prose-block[b-rq76g9efsv] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.prose-heading[b-rq76g9efsv] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

/* ============================================================
 * Generic key/value grid used by Figure Data + reference cards
 * ============================================================ */
.kv-grid[b-rq76g9efsv] {
    display: grid;
    grid-template-columns: minmax(8rem, 35%) 1fr;
    gap: 0.4rem 0.75rem;
    margin: 0;
}

.kv-grid dt[b-rq76g9efsv] {
    margin: 0;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.82rem;
    align-self: center;
}

.kv-grid dd[b-rq76g9efsv] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    word-break: break-word;
    line-height: 1.4;
}

.kv-grid-reference dd[b-rq76g9efsv] {
    font-size: 0.88rem;
}

.house-pill[b-rq76g9efsv] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.house-pill-strong[b-rq76g9efsv] {
    background: rgba(76, 175, 80, 0.15);
    color: #66bb6a;
    border-color: rgba(76, 175, 80, 0.4);
}

.house-pill-weak[b-rq76g9efsv] {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    border-color: rgba(244, 67, 54, 0.4);
}

/* ============================================================
 * Reference cards: house / court directory data
 * ============================================================ */
.reference-card[b-rq76g9efsv] {
    border-left: 3px solid var(--accent-color);
}

.reference-card .card-title[b-rq76g9efsv] {
    flex-wrap: wrap;
}

.reference-eyebrow[b-rq76g9efsv] {
    color: var(--accent-color);
}

.reference-title[b-rq76g9efsv] {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================================
 * Bullet lists shared by reference cards
 * ============================================================ */
.bullet-list[b-rq76g9efsv] {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.5;
}

.bullet-list li[b-rq76g9efsv] {
    margin-bottom: 0.2rem;
}

.bullet-list.compact[b-rq76g9efsv] {
    font-size: 0.84rem;
}

.figure-tagline[b-rq76g9efsv] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text-secondary);
}

.pill-row[b-rq76g9efsv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.meaning-pill[b-rq76g9efsv] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(100, 181, 246, 0.12);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.corpus-interpretation .interpretation-para + .interpretation-para[b-rq76g9efsv] {
    margin-top: 0.65rem;
}

/* ============================================================
 * In-slot contextual card: the most-relevant single piece of context.
 * Sits right after the chip row so the eye lands on it before lore.
 * ============================================================ */
.in-slot-card[b-rq76g9efsv] {
    border-left: 4px solid var(--accent-color);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 8%, var(--bg-secondary)) 0%, var(--bg-secondary) 100%);
    box-shadow: 0 2px 10px var(--shadow);
    gap: 0.4rem;
}

.in-slot-eyebrow[b-rq76g9efsv] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-color);
}

.in-slot-title[b-rq76g9efsv] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}

.in-slot-body[b-rq76g9efsv] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ============================================================
 * Favorable / Unfavorable: themed cards (green / red chrome)
 * ============================================================ */
.fav-card[b-rq76g9efsv] {
    border-left: 3px solid rgba(76, 175, 80, 0.7);
    background: linear-gradient(180deg, rgba(76, 175, 80, 0.08), var(--bg-secondary) 60%);
}

.fav-card .card-title[b-rq76g9efsv] {
    color: #66bb6a;
}

.unfav-card[b-rq76g9efsv] {
    border-left: 3px solid rgba(244, 67, 54, 0.7);
    background: linear-gradient(180deg, rgba(244, 67, 54, 0.07), var(--bg-secondary) 60%);
}

.unfav-card .card-title[b-rq76g9efsv] {
    color: #ef5350;
}

/* ============================================================
 * Imagery card: prose lead + bullet-listed traditional images
 * ============================================================ */
.imagery-card .imagery-primary[b-rq76g9efsv] {
    font-style: italic;
    color: var(--text-primary);
}

.imagery-card .imagery-bullets[b-rq76g9efsv] {
    margin-top: 0.1rem;
}

/* ============================================================
 * Person card: Body / Character labeled rows + Anatomy & Colors meta strip
 * ============================================================ */
.person-card[b-rq76g9efsv] {
    gap: 0.7rem;
}

.person-row[b-rq76g9efsv] {
    display: grid;
    grid-template-columns: minmax(4.5rem, 5.5rem) 1fr;
    gap: 0.6rem;
    align-items: start;
}

.person-label[b-rq76g9efsv] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    padding-top: 0.15rem;
}

.person-body[b-rq76g9efsv] {
    margin: 0;
}

.person-meta-row[b-rq76g9efsv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--border-color);
}

.person-meta[b-rq76g9efsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.82rem;
}

.person-meta-label[b-rq76g9efsv] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.person-meta-value[b-rq76g9efsv] {
    color: var(--text-primary);
}

/* ============================================================
 * House Affinity: two big pills with a "vs." separator
 * ============================================================ */
.house-affinity-card .affinity-row[b-rq76g9efsv] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.6rem;
}

.affinity-pill[b-rq76g9efsv] {
    flex: 1 1 9rem;
    min-width: 8rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-primary);
}

.affinity-strong[b-rq76g9efsv] {
    background: linear-gradient(180deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.04));
    border-color: rgba(76, 175, 80, 0.5);
}

.affinity-weak[b-rq76g9efsv] {
    background: linear-gradient(180deg, rgba(244, 67, 54, 0.13), rgba(244, 67, 54, 0.04));
    border-color: rgba(244, 67, 54, 0.5);
}

.affinity-glyph[b-rq76g9efsv] {
    font-size: 1.15rem;
    line-height: 1;
}

.affinity-strong .affinity-glyph[b-rq76g9efsv] {
    color: #66bb6a;
}

.affinity-weak .affinity-glyph[b-rq76g9efsv] {
    color: #ef5350;
}

.affinity-label[b-rq76g9efsv] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.affinity-strong .affinity-label[b-rq76g9efsv] {
    color: #66bb6a;
}

.affinity-weak .affinity-label[b-rq76g9efsv] {
    color: #ef5350;
}

.affinity-value[b-rq76g9efsv] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.affinity-vs[b-rq76g9efsv] {
    align-self: center;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-secondary);
    padding: 0 0.15rem;
}

/* ============================================================
 * Reference section eyebrow: a slim divider/label that introduces the
 * House Reference and Court Reference card sequences.
 * ============================================================ */
.reference-section-eyebrow[b-rq76g9efsv] {
    margin: 0.4rem 0 -0.15rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-color);
}

.reference-title-line[b-rq76g9efsv] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
}

.reference-subtitle[b-rq76g9efsv] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Governs bullets: snap to two columns when the card is wide enough */
.two-col-bullets[b-rq76g9efsv] {
    columns: 2;
    column-gap: 1.25rem;
}

.two-col-bullets li[b-rq76g9efsv] {
    break-inside: avoid;
}

@media (max-width: 540px) {
    .two-col-bullets[b-rq76g9efsv] {
        columns: 1;
    }
}

/* ============================================================
 * Reading Craft card: practitioner tips grouped under one card with
 * subtle dividers between the three subsections.
 * ============================================================ */
.reading-craft-card[b-rq76g9efsv] {
    gap: 0.85rem;
}

.craft-subsection + .craft-subsection[b-rq76g9efsv] {
    padding-top: 0.7rem;
    border-top: 1px dashed var(--border-color);
}

.craft-subheading[b-rq76g9efsv] {
    margin: 0 0 0.4rem 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

/* Red-tinted bullets for misreadings & pitfalls */
.bullet-warning[b-rq76g9efsv] {
    color: var(--text-primary);
}

.bullet-warning li[b-rq76g9efsv]::marker {
    color: #ef5350;
}

/* ============================================================
 * Sources card: muted footer-style chrome to read as citation, dead last
 * ============================================================ */
.sources-card[b-rq76g9efsv],
.sources-footer[b-rq76g9efsv] {
    background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
    border: 1px dashed var(--border-color);
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.sources-heading[b-rq76g9efsv] {
    margin: 0 0 0.45rem 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.sources-list[b-rq76g9efsv] {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
}

.src-author[b-rq76g9efsv] {
    font-weight: 600;
    color: var(--text-primary);
}

.src-work[b-rq76g9efsv] {
    color: var(--text-primary);
}

.src-sec[b-rq76g9efsv],
.src-year[b-rq76g9efsv] {
    color: var(--text-secondary);
}
/* _content/GeomancyWebUI/Components/Workspace/PerfectionDetailPanel.razor.rz.scp.css */
/*
 * PerfectionDetailPanel - the rich, scrollable inspector that appears on
 * the right side of the Perfections tab. Mirrors FigureDetailPanel: card
 * sections, chip rows, kv grids, theme variables. The panel itself is the
 * only scroll container in the right column so the scrollbar sits next to
 * the data, not next to the list pane.
 */
.perf-detail-panel[b-yn1w50hmm9] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.1rem 1.25rem 1.5rem;
    box-shadow: 0 4px 16px var(--shadow);
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.perf-detail-panel.is-empty[b-yn1w50hmm9] {
    align-items: center;
    justify-content: center;
}

.perf-detail-empty[b-yn1w50hmm9] {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem 1rem;
}

/* ============================================================
 * Header
 * ============================================================ */
.perf-detail-header[b-yn1w50hmm9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.header-titles[b-yn1w50hmm9] {
    min-width: 0;
}

.kind-eyebrow[b-yn1w50hmm9] {
    margin: 0 0 0.15rem 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color);
}

.kind-eyebrow.is-perfection[b-yn1w50hmm9] { color: #4caf50; }
.kind-eyebrow.is-denial[b-yn1w50hmm9]     { color: #ff9800; }
.kind-eyebrow.is-positive[b-yn1w50hmm9]   { color: #4caf50; }
.kind-eyebrow.is-negative[b-yn1w50hmm9]   { color: #f44336; }

.kind-title[b-yn1w50hmm9] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.header-score-pill[b-yn1w50hmm9] {
    flex-shrink: 0;
    align-self: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
}

/* ============================================================
 * Chip row
 * ============================================================ */
.chip-row[b-yn1w50hmm9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip[b-yn1w50hmm9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}

.chip-mode[b-yn1w50hmm9] {
    background: rgba(120, 80, 200, 0.10);
    border-color: rgba(120, 80, 200, 0.4);
    color: var(--accent-color);
}

.chip-company[b-yn1w50hmm9] {
    background: rgba(255, 193, 7, 0.10);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffc107;
}

.chip-base[b-yn1w50hmm9] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-style: italic;
}

.chip-aspect[b-yn1w50hmm9] {
    background: rgba(33, 150, 243, 0.10);
    border-color: rgba(33, 150, 243, 0.4);
    color: #2196f3;
}

.chip-translation[b-yn1w50hmm9] {
    background: rgba(255, 152, 0, 0.12);
    border-color: rgba(255, 152, 0, 0.4);
    color: #ff9800;
}

.chip-mtc[b-yn1w50hmm9] {
    background: rgba(76, 175, 80, 0.10);
    border-color: rgba(76, 175, 80, 0.4);
    color: #4caf50;
}

.chip-aux[b-yn1w50hmm9] {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.72rem;
}

/* ============================================================
 * Card scaffolding (shared with FigureDetailPanel feel)
 * ============================================================ */
.detail-card[b-yn1w50hmm9] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.card-title[b-yn1w50hmm9] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

.kv-grid[b-yn1w50hmm9] {
    display: grid;
    grid-template-columns: minmax(8rem, 35%) 1fr;
    gap: 0.4rem 0.75rem;
    margin: 0;
}

.kv-grid dt[b-yn1w50hmm9] {
    margin: 0;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.82rem;
    align-self: center;
}

.kv-grid dd[b-yn1w50hmm9] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    word-break: break-word;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
 * Significators (Querent → Quesited)
 * ============================================================ */
.significators-grid[b-yn1w50hmm9] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.6rem;
    align-items: stretch;
}

.sig-cell[b-yn1w50hmm9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: 0.6rem 0.4rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.sig-eyebrow[b-yn1w50hmm9] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.sig-house[b-yn1w50hmm9] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-color);
}

.sig-figure[b-yn1w50hmm9] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sig-arrow[b-yn1w50hmm9] {
    align-self: center;
    font-size: 1.4rem;
    color: var(--text-secondary);
}

/* ============================================================
 * Indentation grid
 * ============================================================ */
.indent-grid[b-yn1w50hmm9] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.45rem;
}

.indent-cell[b-yn1w50hmm9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-align: center;
}

.indent-label[b-yn1w50hmm9] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    line-height: 1.1;
}

.indent-value[b-yn1w50hmm9] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.indent-cell.indent-total[b-yn1w50hmm9] {
    background: linear-gradient(180deg, rgba(120, 80, 200, 0.12), rgba(120, 80, 200, 0.04));
    border-color: rgba(120, 80, 200, 0.4);
}

.indent-cell.indent-total .indent-value[b-yn1w50hmm9] {
    color: var(--accent-color);
}

@media (max-width: 1500px) {
    .indent-grid[b-yn1w50hmm9] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
 * Score breakdown
 * ============================================================ */
.score-breakdown[b-yn1w50hmm9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.score-breakdown:has(.score-cell-net)[b-yn1w50hmm9] {
    grid-template-columns: 1fr 1fr 1fr;
}

.score-cell[b-yn1w50hmm9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.4rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.score-cell-label[b-yn1w50hmm9] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.score-cell-value[b-yn1w50hmm9] {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.score-cell-net[b-yn1w50hmm9] {
    background: linear-gradient(180deg, rgba(120, 80, 200, 0.12), rgba(120, 80, 200, 0.04));
    border-color: rgba(120, 80, 200, 0.4);
}

/* ============================================================
 * Notes / prose
 * ============================================================ */
.notes-list[b-yn1w50hmm9] {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.5;
}

.notes-list li[b-yn1w50hmm9] {
    margin-bottom: 0.25rem;
}

.prose-text[b-yn1w50hmm9] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ============================================================
 * Score classes (re-used across pills + text)
 * ============================================================ */
.score-positive[b-yn1w50hmm9] {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.45);
}

.score-negative[b-yn1w50hmm9] {
    color: #f44336;
    background: rgba(244, 67, 54, 0.15);
    border-color: rgba(244, 67, 54, 0.45);
}

.score-neutral[b-yn1w50hmm9] {
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.score-positive-text[b-yn1w50hmm9] { color: #4caf50; }
.score-negative-text[b-yn1w50hmm9] { color: #f44336; }
.score-neutral-text[b-yn1w50hmm9]  { color: var(--text-secondary); }

/* ============================================================
 * Glossary tagline (one-liner under the header)
 * ============================================================ */
.glossary-tagline[b-yn1w50hmm9] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: rgba(120, 80, 200, 0.06);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    font-style: italic;
}

/* ============================================================
 * Card title icons (small glyph in front of section heading)
 * ============================================================ */
.card-title[b-yn1w50hmm9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.card-title-icon[b-yn1w50hmm9] {
    font-size: 0.85rem;
    color: var(--accent-color);
    line-height: 1;
}

/* ============================================================
 * Mechanism card - bullet rows with subtle markers
 * ============================================================ */
.mechanism-card[b-yn1w50hmm9] {
    border-left: 3px solid rgba(120, 80, 200, 0.45);
}

.mechanism-list[b-yn1w50hmm9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mechanism-item[b-yn1w50hmm9] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.35rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    line-height: 1.4;
}

.mechanism-bullet[b-yn1w50hmm9] {
    flex-shrink: 0;
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.4;
}

.mechanism-text[b-yn1w50hmm9] {
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.45;
    word-break: break-word;
    min-width: 0;
    flex: 1 1 auto;
}

/*
 * Tokens are emitted via MarkupString so they aren't auto-scoped by Blazor
 * isolation - reach them with ::deep so they pick up styling here.
 */
.mechanism-text[b-yn1w50hmm9]  .token-house {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    margin: 0 0.05rem;
    background: rgba(33, 150, 243, 0.14);
    border: 1px solid rgba(33, 150, 243, 0.4);
    border-radius: 4px;
    color: #2196f3;
    font-weight: 600;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.mechanism-text[b-yn1w50hmm9]  .token-figure {
    color: var(--accent-color);
    font-weight: 600;
}

.mechanism-text[b-yn1w50hmm9]  .token-aux {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.8rem;
}

/* ============================================================
 * Interpretation card - one tip box per sentence
 * ============================================================ */
.interpretation-card[b-yn1w50hmm9] {
    border-left: 3px solid #ffc107;
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.06), transparent 70%);
}

.interpretation-card .card-title-icon[b-yn1w50hmm9] {
    color: #ffc107;
}

.interpretation-tips[b-yn1w50hmm9] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.25rem;
}

.interpretation-tip[b-yn1w50hmm9] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 0.8rem 0.6rem 0.7rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 193, 7, 0.25);
    background: rgba(255, 193, 7, 0.05);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.interpretation-tip:hover[b-yn1w50hmm9] {
    background: rgba(255, 193, 7, 0.09);
    border-color: rgba(255, 193, 7, 0.4);
}

.interpretation-tip.tip-lead[b-yn1w50hmm9] {
    border-color: rgba(255, 193, 7, 0.45);
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.04));
    box-shadow: 0 1px 0 rgba(255, 193, 7, 0.18);
}

.interpretation-tip .tip-bullet[b-yn1w50hmm9] {
    color: #ffc107;
    font-size: 0.95rem;
    line-height: 1.4;
    flex-shrink: 0;
    margin-top: 0.05rem;
    user-select: none;
}

.interpretation-tip .tip-text[b-yn1w50hmm9] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Lead-sentence prefix like "Mutation —" or "Dexter Trine —" inside the
   first tip gets a small uppercase label so the eye lands on the mode name. */
.interpretation-tip .tip-text[b-yn1w50hmm9]  .tip-lead-label {
    font-weight: 700;
    color: #ffc107;
    letter-spacing: 0.02em;
}

.interpretation-tip .tip-text[b-yn1w50hmm9]  .tip-lead-sep {
    color: var(--text-secondary);
    font-weight: 600;
    margin: 0 0.1rem;
}

.interpretation-tip .tip-text[b-yn1w50hmm9]  .token-house {
    background: rgba(120, 80, 200, 0.14);
    color: var(--accent-color);
    border-radius: 4px;
    padding: 0 0.35rem;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.interpretation-tip .tip-text[b-yn1w50hmm9]  .token-figure {
    color: var(--accent-color);
    font-weight: 600;
}

/* ============================================================
 * Direction arrows in chips and the significators arrow
 * ============================================================ */
.chip .chip-arrow[b-yn1w50hmm9] {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 700;
}

.chip-major[b-yn1w50hmm9] {
    background: rgba(120, 80, 200, 0.14);
    border-color: rgba(120, 80, 200, 0.45);
    color: var(--accent-color);
}

.chip-minor[b-yn1w50hmm9] {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.sig-arrow[b-yn1w50hmm9] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
}
/* _content/GeomancyWebUI/Components/Workspace/PerfectionsListTab.razor.rz.scp.css */
/*
 * Left-column list pane for the Perfections tab. Owns the dropdowns,
 * verdict header, count chips, and the four scrollable lists. The lists
 * area is the only inner scroll container so the dropdowns + verdict
 * stay pinned at the top while the user scans through entries.
 */
.perfections-list[b-490zpc0r4t] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

/* ============================================================
 * Dropdowns
 * ============================================================ */
.perf-dropdowns[b-490zpc0r4t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    flex-shrink: 0;
}

.perf-dropdown[b-490zpc0r4t] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.perf-dropdown label[b-490zpc0r4t] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.perf-dropdown select[b-490zpc0r4t] {
    width: 100%;
    min-width: 0;
}

/* ============================================================
 * Empty / error state
 * ============================================================ */
.perf-empty[b-490zpc0r4t] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.perf-error[b-490zpc0r4t] {
    color: #f44336;
    font-style: normal;
    border-color: rgba(244, 67, 54, 0.4);
    background: rgba(244, 67, 54, 0.06);
}

/* ============================================================
 * Verdict header
 * ============================================================ */
.perf-verdict[b-490zpc0r4t] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.perf-verdict-score[b-490zpc0r4t] {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
    text-align: center;
}

.perf-verdict-score .score-sign[b-490zpc0r4t] {
    font-size: 1.3rem;
    font-weight: 700;
}

.perf-verdict-meta[b-490zpc0r4t] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.15;
}

.perf-verdict-label[b-490zpc0r4t] {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.perf-verdict-sub[b-490zpc0r4t] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.perf-verdict-sub .favorable-text[b-490zpc0r4t] { color: #4caf50; font-weight: 600; }
.perf-verdict-sub .unfavorable-text[b-490zpc0r4t] { color: #f44336; font-weight: 600; }
.perf-verdict-sub .separator[b-490zpc0r4t] { margin: 0 0.3rem; opacity: 0.6; }

.perf-verdict.verdict-favorable[b-490zpc0r4t] {
    border-color: rgba(76, 175, 80, 0.5);
    background: linear-gradient(180deg, rgba(76, 175, 80, 0.12), rgba(76, 175, 80, 0.04));
}
.perf-verdict.verdict-favorable .perf-verdict-score[b-490zpc0r4t] { color: #4caf50; }

.perf-verdict.verdict-unfavorable[b-490zpc0r4t] {
    border-color: rgba(244, 67, 54, 0.5);
    background: linear-gradient(180deg, rgba(244, 67, 54, 0.12), rgba(244, 67, 54, 0.04));
}
.perf-verdict.verdict-unfavorable .perf-verdict-score[b-490zpc0r4t] { color: #f44336; }

.perf-verdict.verdict-neutral[b-490zpc0r4t] {
    color: var(--text-secondary);
}

/* ============================================================
 * Count chips
 * ============================================================ */
.perf-counts[b-490zpc0r4t] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    flex-shrink: 0;
}

.count-chip[b-490zpc0r4t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.35rem 0.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    text-align: center;
    line-height: 1;
}

.count-num[b-490zpc0r4t] {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.count-label[b-490zpc0r4t] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.count-perfections[b-490zpc0r4t] { border-color: rgba(76, 175, 80, 0.4); }
.count-perfections .count-num[b-490zpc0r4t] { color: #4caf50; }

.count-denials[b-490zpc0r4t] { border-color: rgba(255, 152, 0, 0.4); }
.count-denials .count-num[b-490zpc0r4t] { color: #ff9800; }

.count-positive[b-490zpc0r4t] { border-color: rgba(76, 175, 80, 0.4); }
.count-positive .count-num[b-490zpc0r4t] { color: #4caf50; }

.count-negative[b-490zpc0r4t] { border-color: rgba(244, 67, 54, 0.4); }
.count-negative .count-num[b-490zpc0r4t] { color: #f44336; }

/* ============================================================
 * Lists
 * ============================================================ */
.perf-lists[b-490zpc0r4t] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.perf-group[b-490zpc0r4t] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.perf-group-title[b-490zpc0r4t] {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.15rem 0 0.25rem;
}

.perf-group-count[b-490zpc0r4t] {
    color: var(--accent-color);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.perf-group-empty[b-490zpc0r4t] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-style: italic;
    padding: 0.15rem 0.25rem;
}

.perf-rows[b-490zpc0r4t] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.perf-row[b-490zpc0r4t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    border: 1px solid transparent;
}

.perf-row:hover[b-490zpc0r4t] {
    background-color: rgba(255, 255, 255, 0.04);
}

.perf-row.is-selected[b-490zpc0r4t] {
    background-color: rgba(120, 80, 200, 0.18);
    border-color: rgba(120, 80, 200, 0.4);
}

.perf-row.is-selected .perf-row-label[b-490zpc0r4t] {
    color: var(--accent-color);
    font-weight: 600;
}

.perf-row-label[b-490zpc0r4t] {
    font-size: 0.82rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.perf-row-score[b-490zpc0r4t] {
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.3;
}

.score-positive[b-490zpc0r4t] {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.35);
}

.score-negative[b-490zpc0r4t] {
    color: #f44336;
    background: rgba(244, 67, 54, 0.12);
    border-color: rgba(244, 67, 54, 0.35);
}

.score-neutral[b-490zpc0r4t] {
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
/* _content/GeomancyWebUI/Components/Workspace/WayOfPointsDetailPanel.razor.rz.scp.css */
/*
 * WayOfPointsDetailPanel - rich, scrollable inspector that appears on the
 * right side of the Way Of Points tab.
 *
 * Visual vocabulary intentionally mirrors PerfectionDetailPanel so the two
 * tabs feel like siblings: the same card layout, glossary tagline, chip
 * row, mechanism card, and `interpretation-tips` stack. Element-color
 * tokens come in via the inline `--wop-element-color` style on the panel
 * root so the CSS file stays element-agnostic.
 */
.wop-detail-panel[b-x51mxgrzw7] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.1rem 1.25rem 1.5rem;
    box-shadow: 0 4px 16px var(--shadow);
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wop-detail-panel.is-empty[b-x51mxgrzw7] {
    align-items: center;
    justify-content: center;
}

.wop-detail-empty[b-x51mxgrzw7] {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem 1rem;
}

/* ============================================================
 * Header
 * ============================================================ */
.wop-detail-header[b-x51mxgrzw7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.header-titles[b-x51mxgrzw7] {
    min-width: 0;
}

.kind-eyebrow[b-x51mxgrzw7] {
    margin: 0 0 0.15rem 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wop-element-color, var(--accent-color));
}

.kind-eyebrow.kind-eyebrow-wol[b-x51mxgrzw7] {
    text-transform: none;
    letter-spacing: 0.03em;
    font-size: 0.76rem;
    line-height: 1.35;
}

.kind-title[b-x51mxgrzw7] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.title-glyph[b-x51mxgrzw7] {
    color: var(--wop-element-color, var(--accent-color));
    font-size: 1.35rem;
    line-height: 1;
}

.kind-subtitle[b-x51mxgrzw7] {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
}

.kind-subtitle.kind-subtitle-wol[b-x51mxgrzw7] {
    font-style: normal;
    color: var(--text-primary);
    line-height: 1.45;
}

.header-score-pill[b-x51mxgrzw7] {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.1;
    white-space: nowrap;
    align-self: center;
}

.header-score-pill.pill-strong[b-x51mxgrzw7]            { color: #fff; background: #28a745; border-color: #28a745; }
.header-score-pill.pill-strong-passive[b-x51mxgrzw7]    { color: #fff; background: #4a8af0; border-color: #4a8af0; }
.header-score-pill.pill-weaker-passive[b-x51mxgrzw7]    { color: #fff; background: #6c757d; border-color: #6c757d; }
.header-score-pill.pill-passive[b-x51mxgrzw7]           { color: #0b1d23; background: #3ec9e0; border-color: #3ec9e0; }
.header-score-pill.pill-established[b-x51mxgrzw7]       { color: #4caf50; background: rgba(76, 175, 80, 0.12); border-color: rgba(76, 175, 80, 0.4); }
.header-score-pill.pill-not-established[b-x51mxgrzw7]   { color: var(--text-secondary); background: rgba(108, 117, 125, 0.12); border-color: rgba(108, 117, 125, 0.4); }

/* ============================================================
 * Glossary tagline + chip row
 * ============================================================ */
.glossary-tagline[b-x51mxgrzw7] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.45;
    padding: 0.45rem 0.7rem;
    border-left: 3px solid var(--wop-element-color, var(--accent-color));
    background: var(--bg-secondary);
    border-radius: 0 6px 6px 0;
}

.chip-row[b-x51mxgrzw7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip[b-x51mxgrzw7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.chip-arrow[b-x51mxgrzw7] {
    font-size: 0.85rem;
    line-height: 1;
}

.chip.chip-element[b-x51mxgrzw7] {
    background: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 14%, transparent);
    border-color: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 50%, transparent);
    color: var(--wop-element-color, var(--accent-color));
}

.chip.chip-established[b-x51mxgrzw7] { color: #4caf50; border-color: rgba(76, 175, 80, 0.4); background: rgba(76, 175, 80, 0.1); }
.chip.chip-not-established[b-x51mxgrzw7] { color: var(--text-secondary); border-color: rgba(108, 117, 125, 0.4); background: rgba(108, 117, 125, 0.1); }

.chip.pill-strong[b-x51mxgrzw7]            { color: #fff; background: #28a745; border-color: #28a745; }
.chip.pill-strong-passive[b-x51mxgrzw7]    { color: #fff; background: #4a8af0; border-color: #4a8af0; }
.chip.pill-weaker-passive[b-x51mxgrzw7]    { color: #fff; background: #6c757d; border-color: #6c757d; }
.chip.pill-passive[b-x51mxgrzw7]           { color: #0b1d23; background: #3ec9e0; border-color: #3ec9e0; }

.chip.chip-row-num[b-x51mxgrzw7] {
    background: rgba(120, 80, 200, 0.12);
    color: var(--accent-color);
    border-color: rgba(120, 80, 200, 0.4);
}

.chip.chip-meta[b-x51mxgrzw7] { color: var(--text-secondary); }

.chip.chip-way-of-light[b-x51mxgrzw7] {
    color: #b8860b;
    border-color: rgba(255, 193, 7, 0.65);
    background: linear-gradient(180deg, rgba(255, 223, 130, 0.35), rgba(255, 193, 7, 0.12));
    font-weight: 700;
}

.header-score-pill.pill-way-of-light[b-x51mxgrzw7] {
    background: linear-gradient(135deg, rgba(255, 223, 130, 0.45), rgba(255, 193, 7, 0.2));
    border: 1px solid rgba(255, 193, 7, 0.75);
    color: #7a5a00;
    font-weight: 700;
}

.way-of-light-stack[b-x51mxgrzw7] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.way-of-light-card[b-x51mxgrzw7] {
    border-color: rgba(255, 193, 7, 0.55);
    background: linear-gradient(180deg, rgba(255, 223, 130, 0.14), var(--bg-secondary));
}

.way-of-light-lead[b-x51mxgrzw7],
.wol-card-body[b-x51mxgrzw7] {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.wol-rule-list[b-x51mxgrzw7] {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-primary);
}

.wol-rule-list-tight li + li[b-x51mxgrzw7] {
    margin-top: 0.35rem;
}

.way-of-light-tail-note[b-x51mxgrzw7] {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-style: italic;
}

.mechanism-graph.is-way-of-light-graph .mech-node[b-x51mxgrzw7] {
    border-color: rgba(255, 193, 7, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.12);
}

.mechanism-graph.is-way-of-light-graph .mech-node.is-end[b-x51mxgrzw7] {
    border-color: rgba(218, 165, 32, 0.95);
    background: color-mix(in srgb, rgba(255, 193, 7, 0.22) 40%, var(--bg-primary));
}

.mechanism-graph.is-way-of-light-graph .mech-arrow[b-x51mxgrzw7] {
    color: #daa520;
}

/* Dark theme: brown-on-gold WoL chips read as muddy; use light gold text + richer amber wash */
[data-theme="dark"] .chip.chip-way-of-light[b-x51mxgrzw7] {
    color: #ffeab6;
    border-color: rgba(255, 214, 102, 0.55);
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.32), rgba(160, 100, 0, 0.22));
}

[data-theme="dark"] .header-score-pill.pill-way-of-light[b-x51mxgrzw7] {
    color: #fff8e6;
    border-color: rgba(255, 214, 102, 0.55);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.42), rgba(120, 75, 0, 0.4));
}

[data-theme="dark"] .way-of-light-card[b-x51mxgrzw7] {
    border-color: rgba(255, 214, 102, 0.42);
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.12), var(--bg-secondary));
}

[data-theme="dark"] .mechanism-graph.is-way-of-light-graph .mech-arrow[b-x51mxgrzw7] {
    color: #ffd54f;
}

/* ============================================================
 * Detail cards
 * ============================================================ */
.detail-card[b-x51mxgrzw7] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.card-title[b-x51mxgrzw7] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.card-title-icon[b-x51mxgrzw7] {
    color: var(--wop-element-color, var(--accent-color));
    font-size: 0.95rem;
    line-height: 1;
}

/* ============================================================
 * Mechanism graph (Judge -> Witness -> Niece -> Endpoint)
 * ============================================================ */
.mechanism-graph[b-x51mxgrzw7] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.4rem;
}

.mech-node[b-x51mxgrzw7] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    min-width: 6rem;
    flex: 0 0 auto;
}

.mech-node.is-start[b-x51mxgrzw7] {
    border-color: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 50%, transparent);
    background: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 10%, var(--bg-primary));
}

.mech-node.is-end[b-x51mxgrzw7] {
    border-color: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 70%, transparent);
    background: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 16%, var(--bg-primary));
}

.mech-node-eyebrow[b-x51mxgrzw7] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    line-height: 1.1;
}

.mech-node-title[b-x51mxgrzw7] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.mech-node-figure[b-x51mxgrzw7] {
    font-size: 0.72rem;
    color: var(--wop-element-color, var(--accent-color));
    font-style: italic;
    line-height: 1.2;
}

.mech-arrow[b-x51mxgrzw7] {
    align-self: center;
    color: var(--wop-element-color, var(--accent-color));
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.1rem;
    opacity: 0.85;
}

.mechanism-tail[b-x51mxgrzw7] {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.mechanism-tail strong[b-x51mxgrzw7] {
    color: var(--wop-element-color, var(--accent-color));
}

/* ============================================================
 * Mechanism list (raw notes)
 * ============================================================ */
.mechanism-list[b-x51mxgrzw7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mechanism-item[b-x51mxgrzw7] {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    line-height: 1.4;
}

.mechanism-bullet[b-x51mxgrzw7] {
    color: var(--wop-element-color, var(--accent-color));
    font-size: 0.95rem;
    line-height: 1.2;
    flex-shrink: 0;
    width: 0.85rem;
    text-align: center;
}

.mechanism-text[b-x51mxgrzw7] {
    font-size: 0.82rem;
    color: var(--text-primary);
}

/* Highlighted tokens injected via MarkupString */
.mechanism-text[b-x51mxgrzw7]  .token-house {
    font-weight: 700;
    color: var(--accent-color);
    background: rgba(120, 80, 200, 0.1);
    border: 1px solid rgba(120, 80, 200, 0.35);
    padding: 0 0.3rem;
    border-radius: 4px;
    font-size: 0.78rem;
}

.mechanism-text[b-x51mxgrzw7]  .token-figure {
    font-weight: 700;
    color: var(--wop-element-color, #f1c40f);
    font-style: italic;
}

/* ============================================================
 * Interpretation tip stack
 * ============================================================ */
.interpretation-card .interpretation-tips[b-x51mxgrzw7] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.25rem;
}

.interpretation-tip[b-x51mxgrzw7] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.6rem 0.8rem 0.6rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.interpretation-tip:hover[b-x51mxgrzw7] {
    border-color: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 35%, var(--border-color));
}

.interpretation-tip.tip-lead[b-x51mxgrzw7] {
    border-color: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 45%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 12%, transparent),
        color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 4%, transparent));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 18%, transparent);
}

.tip-bullet[b-x51mxgrzw7] {
    color: var(--wop-element-color, var(--accent-color));
    font-size: 0.95rem;
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.tip-text[b-x51mxgrzw7] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.tip-text[b-x51mxgrzw7]  .token-house {
    font-weight: 700;
    color: var(--accent-color);
    background: rgba(120, 80, 200, 0.1);
    border: 1px solid rgba(120, 80, 200, 0.35);
    padding: 0 0.3rem;
    border-radius: 4px;
    font-size: 0.78rem;
}

.tip-text[b-x51mxgrzw7]  .token-figure {
    font-weight: 700;
    color: var(--wop-element-color, #f1c40f);
    font-style: italic;
}

.interpretation-footer[b-x51mxgrzw7] {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    border: 1px dashed var(--border-color);
    background: var(--bg-primary);
}

.interpretation-footer strong[b-x51mxgrzw7] {
    color: var(--text-primary);
}

/* Path-type interpretation card variant */
.path-card .path-type-tagline[b-x51mxgrzw7] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.4;
}

.path-card .path-type-mechanism[b-x51mxgrzw7] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.45;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.path-card .path-type-mechanism strong[b-x51mxgrzw7] {
    color: var(--wop-element-color, var(--accent-color));
}

/* ============================================================
 * KV grid (Establishment card)
 * ============================================================ */
.kv-grid[b-x51mxgrzw7] {
    margin: 0;
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.4rem 0.85rem;
}

.kv-grid dt[b-x51mxgrzw7] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    line-height: 1.4;
    padding-top: 0.1rem;
}

.kv-grid dd[b-x51mxgrzw7] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* ============================================================
 * Notes card (collapsible)
 * ============================================================ */
.notes-title[b-x51mxgrzw7] {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.notes-title:hover[b-x51mxgrzw7] {
    color: var(--wop-element-color, var(--accent-color));
}

.notes-count[b-x51mxgrzw7] {
    margin-left: 0.3rem;
    color: var(--text-secondary);
    font-weight: 600;
}
/* _content/GeomancyWebUI/Components/Workspace/WayOfPointsListTab.razor.rz.scp.css */
/*
 * Left-column list pane for the Way Of Points tab.
 *
 * Visual vocabulary intentionally mirrors PerfectionsListTab so the Workspace
 * feels uniform: pinned verdict + count chips at the top, single inner scroll
 * region for the four element groups beneath. Element-color tokens come in via
 * the inline `--wop-element-color` style on each `.wop-group` so the CSS file
 * stays element-agnostic.
 */
.wop-list[b-rx36hay5v0] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

/* ============================================================
 * Empty / error state
 * ============================================================ */
.wop-empty[b-rx36hay5v0] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.wop-error[b-rx36hay5v0] {
    color: #f44336;
    font-style: normal;
    border-color: rgba(244, 67, 54, 0.4);
    background: rgba(244, 67, 54, 0.06);
}

/* ============================================================
 * Verdict header
 * ============================================================ */
.wop-verdict[b-rx36hay5v0] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.wop-verdict-score[b-rx36hay5v0] {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
    text-align: center;
}

.wop-verdict-score .of-four[b-rx36hay5v0] {
    font-size: 1.05rem;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 0.1rem;
}

.wop-verdict-meta[b-rx36hay5v0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.15;
}

.wop-verdict-label[b-rx36hay5v0] {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wop-verdict-sub[b-rx36hay5v0] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.wop-verdict.verdict-favorable[b-rx36hay5v0] {
    border-color: rgba(76, 175, 80, 0.5);
    background: linear-gradient(180deg, rgba(76, 175, 80, 0.12), rgba(76, 175, 80, 0.04));
}
.wop-verdict.verdict-favorable .wop-verdict-score[b-rx36hay5v0] { color: #4caf50; }

.wop-verdict.verdict-unfavorable[b-rx36hay5v0] {
    border-color: rgba(244, 67, 54, 0.5);
    background: linear-gradient(180deg, rgba(244, 67, 54, 0.12), rgba(244, 67, 54, 0.04));
}
.wop-verdict.verdict-unfavorable .wop-verdict-score[b-rx36hay5v0] { color: #f44336; }

.wop-verdict.verdict-mixed[b-rx36hay5v0] {
    border-color: rgba(255, 193, 7, 0.5);
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.04));
}
.wop-verdict.verdict-mixed .wop-verdict-score[b-rx36hay5v0] { color: #ffc107; }

/* Composition-aware verdict (strong vs passive establishments) */
.wop-verdict.verdict-passive-full[b-rx36hay5v0],
.wop-verdict.verdict-passive-partial[b-rx36hay5v0],
.wop-verdict.verdict-passive-single[b-rx36hay5v0] {
    border-color: rgba(30, 136, 229, 0.45);
    background: linear-gradient(180deg, rgba(30, 136, 229, 0.12), rgba(30, 136, 229, 0.04));
}
.wop-verdict.verdict-passive-full .wop-verdict-score[b-rx36hay5v0],
.wop-verdict.verdict-passive-partial .wop-verdict-score[b-rx36hay5v0],
.wop-verdict.verdict-passive-single .wop-verdict-score[b-rx36hay5v0] { color: #1e88e5; }
.wop-verdict.verdict-passive-full .wop-verdict-label[b-rx36hay5v0],
.wop-verdict.verdict-passive-partial .wop-verdict-label[b-rx36hay5v0],
.wop-verdict.verdict-passive-single .wop-verdict-label[b-rx36hay5v0] { color: #1565c0; }

.wop-verdict.verdict-strong-full[b-rx36hay5v0] {
    border-color: rgba(76, 175, 80, 0.5);
    background: linear-gradient(180deg, rgba(76, 175, 80, 0.12), rgba(76, 175, 80, 0.04));
}
.wop-verdict.verdict-strong-full .wop-verdict-score[b-rx36hay5v0] { color: #4caf50; }
.wop-verdict.verdict-strong-full .wop-verdict-label[b-rx36hay5v0] { color: #2e7d32; }

.wop-verdict.verdict-strong-partial[b-rx36hay5v0] {
    border-color: rgba(56, 142, 60, 0.45);
    background: linear-gradient(180deg, rgba(56, 142, 60, 0.1), rgba(56, 142, 60, 0.03));
}
.wop-verdict.verdict-strong-partial .wop-verdict-score[b-rx36hay5v0] { color: #43a047; }
.wop-verdict.verdict-strong-partial .wop-verdict-label[b-rx36hay5v0] { color: #2e7d32; }

.wop-verdict.verdict-strong-single[b-rx36hay5v0] {
    border-color: rgba(102, 142, 102, 0.4);
    background: linear-gradient(180deg, rgba(129, 199, 132, 0.08), rgba(129, 199, 132, 0.02));
}
.wop-verdict.verdict-strong-single .wop-verdict-score[b-rx36hay5v0] { color: #689f6a; }
.wop-verdict.verdict-strong-single .wop-verdict-label[b-rx36hay5v0] { color: #546e54; }

.wop-verdict.verdict-mixed-composition[b-rx36hay5v0] {
    border-color: rgba(120, 120, 120, 0.4);
    background: linear-gradient(180deg, rgba(120, 120, 120, 0.08), rgba(120, 120, 120, 0.02));
}
.wop-verdict.verdict-mixed-composition .wop-verdict-score[b-rx36hay5v0] { color: #78909c; }
.wop-verdict.verdict-mixed-composition .wop-verdict-label[b-rx36hay5v0] { color: #546e7a; }

.wop-verdict.verdict-none .wop-verdict-label[b-rx36hay5v0] { color: #c62828; }

.wop-verdict-sub.openings-none[b-rx36hay5v0] {
    color: #e53935;
    font-weight: 600;
}
.wop-verdict-sub.openings-passive[b-rx36hay5v0] {
    color: #1565c0;
    font-weight: 600;
}
.wop-verdict-sub.openings-strong[b-rx36hay5v0] {
    color: #2e7d32;
    font-weight: 600;
}
.wop-verdict-sub.openings-mixed[b-rx36hay5v0] {
    color: var(--text-secondary);
    font-weight: 600;
}

/* ============================================================
 * Count chips
 * ============================================================ */
.wop-counts[b-rx36hay5v0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    flex-shrink: 0;
}

.wop-counts-two[b-rx36hay5v0] {
    grid-template-columns: repeat(2, 1fr);
}

.wop-count-chip[b-rx36hay5v0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.35rem 0.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    text-align: center;
    line-height: 1;
}

.wop-count-chip .count-num[b-rx36hay5v0] {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wop-count-chip .count-label[b-rx36hay5v0] {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.count-strong[b-rx36hay5v0]          { border-color: rgba(40, 167, 69, 0.45); }
.count-strong .count-num[b-rx36hay5v0] { color: #28a745; }

.count-strong-passive[b-rx36hay5v0]  { border-color: rgba(13, 110, 253, 0.45); }
.count-strong-passive .count-num[b-rx36hay5v0] { color: #4a8af0; }

.count-weaker-passive[b-rx36hay5v0]  { border-color: rgba(108, 117, 125, 0.45); }
.count-weaker-passive .count-num[b-rx36hay5v0] { color: #adb5bd; }

.count-passive[b-rx36hay5v0]         { border-color: rgba(13, 202, 240, 0.45); }
.count-passive .count-num[b-rx36hay5v0] { color: #3ec9e0; }

/* ============================================================
 * Element groups
 * ============================================================ */
.wop-groups[b-rx36hay5v0] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.wop-group[b-rx36hay5v0] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--wop-element-color, var(--accent-color));
    border-radius: 8px;
    background: var(--bg-primary);
    padding: 0.4rem 0.5rem 0.5rem;
}

.wop-group-header[b-rx36hay5v0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.3rem 0.3rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border: 1px solid transparent;
}

.wop-group-header:hover[b-rx36hay5v0] {
    background-color: rgba(255, 255, 255, 0.04);
}

.wop-group-header.is-selected[b-rx36hay5v0] {
    background-color: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 16%, transparent);
    border-color: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 45%, transparent);
}

.wop-group-title-row[b-rx36hay5v0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wop-element-glyph[b-rx36hay5v0] {
    font-size: 1.2rem;
    color: var(--wop-element-color, var(--accent-color));
    line-height: 1;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.wop-element-titles[b-rx36hay5v0] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1 1 auto;
    min-width: 0;
}

.wop-element-name[b-rx36hay5v0] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--wop-element-color, var(--text-primary));
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wop-element-latin[b-rx36hay5v0] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wop-established-pill[b-rx36hay5v0] {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.2;
}

.wop-established-pill.is-established[b-rx36hay5v0] {
    color: #4caf50;
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.4);
}

.wop-established-pill.is-not-established[b-rx36hay5v0] {
    color: var(--text-secondary);
    background: rgba(108, 117, 125, 0.12);
    border-color: rgba(108, 117, 125, 0.4);
}

.wop-group-counts[b-rx36hay5v0] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    padding-left: 2rem;
}

.wop-mini-count[b-rx36hay5v0] {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.wop-group-empty[b-rx36hay5v0] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-style: italic;
    padding: 0.25rem 0.4rem 0.1rem;
    line-height: 1.35;
}

.wop-way-of-light-ribbon[b-rx36hay5v0] {
    margin: 0.15rem 0.35rem 0.35rem;
    padding: 0.38rem 0.55rem;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-primary);
    background: linear-gradient(90deg, rgba(255, 223, 130, 0.28), rgba(255, 193, 7, 0.08));
    border: 1px solid rgba(255, 193, 7, 0.45);
    border-radius: 8px;
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
}

.wop-way-of-light-glyph[b-rx36hay5v0] {
    flex-shrink: 0;
    font-size: 0.95rem;
    line-height: 1.2;
    color: #daa520;
}

.wop-rows[b-rx36hay5v0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.wop-row[b-rx36hay5v0] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    border: 1px solid transparent;
}

.wop-row:hover[b-rx36hay5v0] {
    background-color: rgba(255, 255, 255, 0.04);
}

.wop-row.is-selected[b-rx36hay5v0] {
    background-color: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 16%, transparent);
    border-color: color-mix(in srgb, var(--wop-element-color, var(--accent-color)) 45%, transparent);
}

.wop-row.is-selected .wop-row-label[b-rx36hay5v0] {
    color: var(--wop-element-color, var(--accent-color));
    font-weight: 600;
}

.wop-row.is-way-of-light[b-rx36hay5v0] {
    border-color: rgba(255, 193, 7, 0.45);
    background: linear-gradient(90deg, rgba(255, 223, 130, 0.12), transparent);
}

.wop-row-light-badge[b-rx36hay5v0] {
    flex-shrink: 0;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    color: #7a5a00;
    border: 1px solid rgba(255, 193, 7, 0.65);
    background: rgba(255, 223, 130, 0.35);
    line-height: 1.2;
}

[data-theme="dark"] .wop-way-of-light-ribbon[b-rx36hay5v0] {
    border-color: rgba(255, 214, 102, 0.48);
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.22), rgba(255, 193, 7, 0.06));
}

[data-theme="dark"] .wop-way-of-light-glyph[b-rx36hay5v0] {
    color: #ffd54f;
}

[data-theme="dark"] .wop-row.is-way-of-light[b-rx36hay5v0] {
    border-color: rgba(255, 214, 102, 0.42);
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.14), transparent);
}

[data-theme="dark"] .wop-row-light-badge[b-rx36hay5v0] {
    color: #fff8e6;
    border-color: rgba(255, 214, 102, 0.55);
    background: rgba(255, 193, 7, 0.38);
}

.wop-row-bullet[b-rx36hay5v0] {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--text-secondary);
}

.wop-row-bullet[data-path-type="Strong"][b-rx36hay5v0] { color: #28a745; }
.wop-row-bullet[data-path-type="StrongPassive"][b-rx36hay5v0] { color: #4a8af0; }
.wop-row-bullet[data-path-type="WeakerPassive"][b-rx36hay5v0] { color: #adb5bd; }
.wop-row-bullet[data-path-type="Passive"][b-rx36hay5v0] { color: #3ec9e0; }

.wop-row-label[b-rx36hay5v0] {
    font-size: 0.8rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.wop-row-type[b-rx36hay5v0] {
    font-size: 0.65rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.type-strong[b-rx36hay5v0] {
    color: #fff;
    background: #28a745;
    border-color: #28a745;
}

.type-strong-passive[b-rx36hay5v0] {
    color: #fff;
    background: #4a8af0;
    border-color: #4a8af0;
}

.type-weaker-passive[b-rx36hay5v0] {
    color: #fff;
    background: #6c757d;
    border-color: #6c757d;
}

.type-passive[b-rx36hay5v0] {
    color: #0b1d23;
    background: #3ec9e0;
    border-color: #3ec9e0;
}