/*
 * Styling for CMS-authored page bodies.
 *
 * Loaded only on pages rendered from the CMS, never on the hand-built site
 * pages, so nothing here can change how semai.ai already looks. Everything is
 * namespaced under .main-section for the same reason.
 *
 * The bar charts are plain divs: the generator writes the value into an inline
 * width, and the rest is presentation. That keeps a chart readable to crawlers
 * and to AI answer engines, which is the whole point of publishing data on an
 * AEO platform's own site — a PNG of a chart says nothing to them.
 */

/* ---- data bar charts ---------------------------------------------------- */

.main-section .semai-chart {
    width: 100%;
}

.main-section .semai-chart .chart-row {
    gap: 0;
}

.main-section .semai-chart .chart-label {
    flex: 0 0 34%;
    max-width: 34%;
    line-height: 1.35;
    word-break: break-word;
}

.main-section .semai-chart .chart-track {
    display: block;
    background-color: #eef1f8;
    overflow: hidden;
    min-width: 0;
}

.main-section .semai-chart .chart-bar {
    background: linear-gradient(90deg, #6c63ff 0%, #4e8cff 100%);
    transition: width .6s ease;
    min-width: 2px;
}

.main-section .semai-chart .chart-value {
    flex: 0 0 4.5rem;
    text-align: right;
    white-space: nowrap;
}

/* A second series in the same chart, so two engines can be compared. */
.main-section .semai-chart .chart-bar.is-alt {
    background: linear-gradient(90deg, #00c2ff 0%, #4e8cff 100%);
}

.main-section .semai-chart .chart-bar.is-muted {
    background: #9aa6c4;
}

@media (max-width: 575.98px) {
    .main-section .semai-chart .chart-row {
        flex-wrap: wrap;
    }
    .main-section .semai-chart .chart-label {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: .25rem;
    }
    .main-section .semai-chart .chart-track {
        margin-left: 0 !important;
    }
}

/* ---- data tables -------------------------------------------------------- */

.main-section .table-responsive > table {
    margin-bottom: 0;
}

.main-section table.table th {
    background-color: #f6f8fc;
    color: #1b2559;
    font-weight: 600;
    white-space: nowrap;
}

.main-section table.table td,
.main-section table.table th {
    vertical-align: middle;
}

/* Figures read better right-aligned; the generator marks them up as <td class="num">. */
.main-section table.table td.num,
.main-section table.table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- imported document images ------------------------------------------- */

.main-section img {
    max-width: 100%;
    height: auto;
}

.main-section figure {
    margin: 1.75rem 0;
}

.main-section figure img {
    border-radius: .5rem;
    box-shadow: 0 2px 14px rgba(27, 37, 89, .08);
}

.main-section figure figcaption {
    margin-top: .6rem;
    font-size: .8125rem;
    color: #5a6682;
}