body {
    background: #f8f9fa;
}

.container {
    max-width: 1450px;
    width: 100%;
    margin: 0 auto;
}

.card {
    border-radius: 10px;
}

.list-group-item {
    border: none;
    border-bottom: 1px solid #ddd;
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.text-sm {
    font-size: 0.85rem !important;
}

.text-xs {
    font-size: 0.7rem !important;
    line-height: 1.4rem;
}

.positive-item {
    background-color: #95e5a8 !important;
}

.negative-item {
    background-color: #fb9fa8 !important;
}

.variant-container {
    background-color: white;
    border: 1px solid white;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}

    .variant-container:hover {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
    }

.blockquote {
    font-size: 1rem;
}

.highlight {
    background-color: #ffec99;
    padding: 0 2px;
    border-radius: 3px;
}

.card {
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
    opacity: 1;
}

    .card.hidden-card {
        opacity: 0;
        transform: scale(0.98);
        max-height: 0;
        margin: 0;
        overflow: hidden;
        margin: 0 !important;
    }

/* Layout constants */
:root {
    --header-h: 64px; /* header height */
    --sidebar-w: 240px; /* sidebar width (match your theme) */
}



/* Content column always offset from the sidebar */
.main-content {
    margin-left: var(--sidebar-w);
    padding: 24px 16px;
    min-height: calc(100vh - var(--header-h));
    background: #f8f9fa; /* matches your bg-light */
}

    /* Make the container stretch nicely */
    .main-content .container {
        max-width: 1200px; /* optional */
    }

/* Mobile/Tablet: collapse sidebar */
@media (max-width: 991.98px) {
    .main-content {
        margin-left: 0; /* use full width when sidebar is hidden */
    }
}

:root {
    --brand: #0b62c5;
    --brand-10: #e9f2fc;
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --stroke: #e5e7eb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --radius: 8px; /* less rounded */
    --shadow: 0 4px 12px rgba(15,23,42,.04);
}

/* tighten page container a touch (optional) */
.main-content .container {
    max-width: 1120px;
}

/* outer result card */
.result-card {
    background: var(--surface);
    border: 1px solid var(--stroke) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

    .result-card::before {
        content: "";
        position: absolute;
        inset: 0 0 0 0;
        border-left: 3px solid var(--brand); /* slimmer accent */
        pointer-events: none;
    }

/* compact header */
.result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--stroke);
    padding: 10px 14px; /* was 14/18 */
}

    .result-head h4 {
        margin: 0;
        font-weight: 600;
        color: var(--ink);
    }

.score-pill {
    background: var(--brand-10);
    color: var(--brand);
    border: 1px solid #d3e6fd;
    border-radius: 999px;
    padding: 3px 8px; /* smaller */
    font-weight: 600;
    font-size: .8rem;
}

/* compact body paddings and paragraphs */
.result-card .card-body {
    padding: 14px 16px;
    color: var(--ink-2);
}

.result-card p {
    margin-bottom: .5rem;
    line-height: 1.35;
}

.result-section {
    margin: .25rem 0 .25rem;
    color: var(--ink);
    font-weight: 600;
}

/* ---- Variations as FLAT ROWS (no boxes) ---- */
.variant-container {
    margin: .25rem 0;
    padding: 10px 0; /* tighter */
    border: 0;
    border-top: 1px solid var(--stroke); /* flat divider */
    border-radius: 0; /* no roundness */
    background: transparent;
}

    .variant-container:first-of-type {
        border-top: 0;
    }

    .variant-container h6 {
        margin: 0 0 .25rem;
        font-weight: 600;
        color: var(--ink);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .variant-container > p {
        margin: 0;
        color: var(--ink-2);
    }

/* small round select */
.btn--outline-primary {
    --btn: var(--brand);
    border: 1px solid var(--btn);
    color: var(--btn);
    background: #fff;
    border-radius: 999px;
    height: 24px;
    width: 24px;
    display: grid;
    place-items: center;
    padding: 0;
}

    .btn--outline-primary:hover {
        background: var(--brand-10);
    }

/* accordion + badges more neutral and tighter */
.accordion-item {
    border-color: var(--stroke) !important;
}

.accordion-button {
    background: #fff !important;
    color: var(--ink) !important;
    padding: .5rem .75rem; /* tighter */
}

.accordion-body {
    padding: .75rem;
}

.badge.bg-secondary-subtle {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid var(--stroke);
    font-weight: 500;
}

/* remove bright blue borders on outer cards */
#ai-models-container .card.border-primary {
    border-color: var(--stroke) !important;
}

/* tabs also tighter */
.nav-tabs .nav-link {
    padding: .35rem .6rem;
}

    .nav-tabs .nav-link.active {
        border-color: var(--stroke) var(--stroke) #fff;
        color: var(--ink);
        font-weight: 600;
    }

/* “Results for / filter” card spacing */
#ai-models .card.shadow-sm.p-3 {
    padding: 12px !important;
}

#ai-models .mb-3 {
    margin-bottom: .5rem !important;
}

/* keyword chips smaller */
.badge.rounded-pill.text-primary {
    font-size: .8rem;
    padding: .25rem .5rem;
}
/* Minimal, crisp selection toggle */
.model-select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* choose SQUARE …or switch to a circle by setting border-radius:50% */
.select-toggle {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1.6px solid #0b62c5; /* brand */
    border-radius: 4px; /* 50% for a circle */
    background: #fff;
    transition: all .15s ease-in-out;
    vertical-align: middle;
    margin-right: .35rem;
}

    /* hover/focus states */
    .select-toggle:hover {
        background: #eef5ff;
    }

.model-select:focus + .select-toggle {
    outline: 2px solid #b8d6ff;
    outline-offset: 2px;
}

/* checked state */
.model-select:checked + .select-toggle {
    background: #0b62c5;
    border-color: #0b62c5;
}

    /* the tick (CSS-only, no fonts) */
    .model-select:checked + .select-toggle::after {
        content: "";
        width: 9px;
        height: 5px;
        border: 2px solid #fff;
        border-top: none;
        border-left: none;
        transform: translateY(-1px) rotate(45deg);
    }

/* disabled (if you ever need it) */
.model-select:disabled + .select-toggle {
    opacity: .55;
    cursor: not-allowed;
}

/* Slimmer headers on model result cards */
#ai-models-container .card > .card-header {
    padding: .35rem .75rem; /* was ~.75–1rem */
    min-height: 40px;
    line-height: 1.2;
}

    /* Smaller title + remove default margins */
    #ai-models-container .card > .card-header h4 {
        font-size: 1.05rem; /* ~h6/h5 size */
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    /* Make the icon stand out on the blue header */
    #ai-models-container .card > .card-header .bi-cpu {
        color: #FFC34D; /* readable on bg-primary */
        opacity: 1;
    }

    /* Compact the score pill too */
    #ai-models-container .card > .card-header .badge {
        font-size: .75rem;
        padding: .25rem .5rem;
        border-radius: 999px;
    }
/* Scale the CONTENT ONLY (keeps sidebar/menu unchanged) */
.main-content {
    font-size: 0.875rem; /* ≈14px — match the menu scale */
    line-height: 1.5;
}

    /* Headings inside content (relative to the 0.875rem base) */
    .main-content h1, .main-content .h1 {
        font-size: 1.6rem;
    }
    /* ~22px */
    .main-content h2, .main-content .h2 {
        font-size: 1.25rem;
    }
    /* ~18px */
    .main-content h3, .main-content .h3 {
        font-size: 1.05rem;
    }
    /* ~15px */

    /* Normalize common UI elements in content */
    .main-content .btn,
    .main-content .form-control,
    .main-content .nav-tabs .nav-link,
    .main-content .badge,
    .main-content .accordion-button {
        font-size: 0.95em; /* slightly smaller than content base */
    }

    /* Tighter paddings to match the smaller type */
    .main-content .card > .card-header {
        padding: .4rem .75rem;
    }

    .main-content .card .card-body {
        padding: .75rem 1rem;
    }

    .main-content .form-control {
        padding: .4rem .6rem;
    }

    .main-content .btn {
        padding: .45rem .75rem;
        line-height: 1.2;
    }

    .main-content .nav-tabs .nav-link {
        padding: .4rem .75rem;
    }

    /* Optional: smaller badges/pills in “Results for” chips */
    .main-content .badge {
        padding: .35em .55em;
    }

    /* Optional: shrink the Search title a touch */
    .main-content h2.text-center.mb-4 {
        font-size: 1.25rem;
    }
/* tighten the space above the page heading */
.main-content {
    padding-top: 8px;
}
    /* was 24px */
    .main-content > .container {
        margin-top: 0 !important;
    }

    /* slightly reduce heading spacing */
    .main-content h2.text-center.mb-4 {
        margin-top: .25rem;
        margin-bottom: .75rem;
    }
#graph .legend-container span {
    font-size: .9rem;
    color: #334155;
}

#graph .legend-container > div > div {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

#graph .input-group .form-control {
    line-height: 1.2;
}
.legend-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: .9rem;
}

    .legend-pill i {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,.08);
    }
/* Hide native checkbox (we already load Bootstrap’s .visually-hidden elsewhere) */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Clickable variation row */
.variant-container {
    border-top: 1px solid var(--stroke);
    background: transparent;
}

.var-row {
    gap: 10px;
    padding: 6px 0;
}

    .var-row:focus {
        outline: 2px solid #b8d6ff;
        outline-offset: 2px;
        border-radius: 6px;
    }

/* The round selection chip */
.select-chip {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #3b82f6;
    background: #fff;
    transition: all .15s ease-in-out;
    flex: 0 0 22px;
}

    .select-chip i {
        opacity: 0;
        font-size: 14px;
        transition: opacity .12s;
    }

/* Selected state (checkbox + label sibling) */
.model-select:checked + .select-chip {
    background: #3b82f6;
    border-color: #3b82f6;
}

    .model-select:checked + .select-chip i {
        opacity: 1;
        color: #fff;
    }

/* Title & selected row highlighting */
.var-title {
    font-weight: 600;
    color: #0f172a;
}

.variant-container.is-selected {
    background: #f1f8ff;
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
}

/* Card header slightly compact + score at right */
#ai-models-container .card > .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Score pill */
.score-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    font-weight: 600;
    color: #0f172a
}

.score-pct {
    min-width: 2.5ch;
    text-align: right
}

.score-bar {
    width: 84px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden
}

.score-fill {
    display: block;
    height: 100%;
    background: var(--score,#0ea5e9)
}
/* optional: tighten header */
#ai-models-container .card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}
/* Accessible “hidden” checkbox */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

/* Variation row as a big clickable label */
.var-select {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    padding: .25rem 0;
    user-select: none
}

    .var-select:focus-within {
        outline: 2px solid #b8d6ff;
        outline-offset: 2px;
        border-radius: 6px
    }

.var-title {
    font-weight: 600;
    color: #0f172a
}

/* The control: rounded square with a proper check */
.var-control {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.8px solid #3b82f6;
    background: #fff;
    display: grid;
    place-items: center;
    transition: all .15s ease-in-out;
    flex: 0 0 22px
}

    .var-control i {
        font-size: 16px;
        opacity: 0;
        transition: opacity .12s
    }

/* Checked state */
.model-select:checked + .var-control {
    background: #3b82f6;
    border-color: #3b82f6
}

    .model-select:checked + .var-control i {
        opacity: 1;
        color: #fff
    }

/* Selected row highlight */
.variant-container {
    border-top: 1px solid #e5e7eb;
    background: transparent;
    border-radius: 6px
}

    .variant-container.is-selected {
        background: #f1f8ff;
        border-left: 3px solid #3b82f6
    }

.model-select:checked ~ .var-title {
    color: #0b62c5
}

/* Score pill */
.score-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    font-weight: 600;
    color: #0f172a
}

.score-pct {
    min-width: 2.5ch;
    text-align: right
}

.score-bar {
    width: 84px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden
}

.score-fill {
    display: block;
    height: 100%;
    background: var(--score,#0ea5e9)
}

#ai-models-container .card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}
/* Accessible hidden input */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

/* Clickable variation row */
.var-select {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    padding: .25rem 0;
    user-select: none
}

    .var-select:focus-within {
        outline: 2px solid #b8d6ff;
        outline-offset: 2px;
        border-radius: 6px
    }

.var-title {
    font-weight: 600;
    color: #0f172a
}

/* Control */
.var-control {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.8px solid #3b82f6;
    background: #fff;
    display: grid;
    place-items: center;
    transition: all .15s ease-in-out;
    flex: 0 0 22px
}

    .var-control i {
        font-size: 16px;
        opacity: 0;
        transition: opacity .12s
    }

/* Checked state */
.model-select:checked + .var-control {
    background: #3b82f6;
    border-color: #3b82f6
}

    .model-select:checked + .var-control i {
        opacity: 1;
        color: #fff
    }

/* Row highlight when selected */
.variant-container {
    border-top: 1px solid #e5e7eb;
    background: transparent;
    border-radius: 6px
}

    .variant-container.is-selected {
        background: #f1f8ff;
        border-left: 3px solid #3b82f6
    }

.model-select:checked ~ .var-title {
    color: #0b62c5
}
/* Make the features/qualities table match page scale */
.main-content .table {
    font-size: 0.875rem;
}

    .main-content .table th,
    .main-content .table td {
        padding: .45rem .6rem;
    }

.main-content .vertical-text {
    font-size: .80rem;
}
/* --- Make Mappings tables match the page typography --- */

/* 1) Inherit page font + size everywhere inside the tables */
.main-content .table,
.main-content .table * {
    font-family: inherit !important;
    font-size: inherit;
    line-height: 1.5;
}

    /* 2) Undo Bootstrap fs-6 inside tables (your HTML uses fs-6 on cells) */
    .main-content .table .fs-6 {
        font-size: inherit !important; /* keeps .875rem from .main-content */
    }

    /* 3) Reasonable, compact paddings to match the page scale */
    .main-content .table th,
    .main-content .table td {
        padding: .45rem .6rem; /* already close to your page spacing */
        vertical-align: middle;
    }

    /* 4) Vertical headers: keep same font, only rotate */
    .main-content .table .vertical-text {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
        font-size: inherit; /* was smaller; now consistent */
        letter-spacing: .01em;
    }

    /* 5) Keep the “tiny” helpers only when you explicitly add them */
    .main-content .table .text-sm {
        font-size: .85rem !important;
    }
    /* optional use */
    .main-content .table .text-xs {
        font-size: .75rem !important;
    }
/* optional use */

/* Base model section */
.model-section {
    margin-bottom: 2rem;
}

.model-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 60px;
    background: #fff;
    z-index: 1; /* optional sticky */
}

.model-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
}

    .model-title .bi {
        opacity: .6;
    }

/* Variation list — no boxes, just rows */
.variation-list {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
}

.variation-item {
    padding: .6rem .75rem .25rem;
    border-bottom: 1px dashed #e5e7eb;
}

    .variation-item:last-child {
        border-bottom: 0;
    }

    .variation-item.is-selected {
        background: #f0f9ff;
    }
/* you already toggle this class */
.var-select {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.var-title {
    font-weight: 600;
}

/* Score pill stays, but lighter */
.score-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

.score-bar {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.score-fill {
    display: block;
    height: 100%;
    width: var(--pct,0%);
    background: var(--score,#16a34a);
}

/* Accordion flush style to remove extra boxes */
.accordion-flush .accordion-item {
    border: 0;
    background: transparent;
}

.accordion-flush .accordion-button {
    padding: .25rem .5rem;
    background: transparent;
}

.accordion-flush .accordion-body {
    padding: .5rem .5rem .75rem;
    background: #fafafa;
    border-radius: .5rem;
}

/* Small utilities */
.meta-inline a {
    margin-right: .75rem;
    font-size: .9rem;
}

.small-muted {
    color: #6b7280;
    font-size: .9rem;
}
/* White band around the whole results area */
.models-band {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    padding: 16px 18px;
}

/* Base model section separation (elegant line) */
.model-section + .model-section {
    border-top: 1px solid #e5e7eb;
    margin-top: 18px;
    padding-top: 18px;
}

/* Header stays flat; no big card chrome */
.model-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: transparent;
    border-bottom: 1px dashed #e5e7eb;
    background-color: #A9CCE3;
    border-radius: 7px;
}
 
.model-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size:large;
    font-weight: 900;
}

    .model-title .bi {
        opacity: .6;
    }

/* Variation rows (no boxes), with hover/highlight */
.variation-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.variation-item {
    padding: 10px 8px 6px;
    border-radius: 8px; /* rounded on hover */
    transition: background .12s ease, box-shadow .12s ease;
}

    .variation-item:hover {
        background: #f8fafc; /* subtle hover */
        box-shadow: inset 0 0 0 1px #e5e7eb;
    }

    .variation-item.is-selected {
        background: #eef6ff;
        box-shadow: inset 0 0 0 2px #cfe5ff;
    }

.var-select {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.var-title {
    font-weight: 600;
}

/* Keep score pill minimal */
.score-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

.score-bar {
    position: relative;
    width: 120px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.score-fill {
    height: 100%;
    width: var(--pct,0%);
    background: var(--score,#16a34a);
    display: block;
}

/* Flush accordion (package details) so it blends with the band */
.accordion-flush .accordion-item {
    border: 0;
    background: transparent;
}

.accordion-flush .accordion-button {
    padding: .25rem .25rem;
    background: transparent;
}

.accordion-flush .accordion-body {
    padding: .5rem .5rem .75rem;
    background: #fafafa;
    border-radius: 8px;
}

.small-muted {
    color: #6b7280;
    font-size: .92rem;
}
/* safety net: make sure Bootstrap modals/backdrop use the viewport */
.modal,
.modal-backdrop {
    position: fixed !important;
}
/* tweak Bootstrap 5 modal margins uniformly */
.modal {
    --bs-modal-margin: 1.25rem;
}