/*
 * Resultados SIMCE — public experience.
 *
 * Scoped under .simce so it can live next to the marketing stylesheet without competing with it.
 *
 * Three decisions are structural rather than decorative. The categorical hues are a validated set
 * (lightness band, chroma floor, CVD separation and contrast all pass on this surface), and every series
 * also carries a marker shape and a dash pattern, so nothing is identified by colour alone. Focus is always
 * visible, with a ring that survives on both the card and the page surface. And motion is opt-out by
 * default: the whole experience works with animations reduced to nothing.
 */

@font-face {
    font-family: "Simce Arial";
    src: local("Arial");
    size-adjust: 100%;
    ascent-override: 101.1%;
    descent-override: 35.3%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Simce Nunito";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../../assets/font/Nunito-Regular-Latin.woff2") format("woff2");
}

.simce,
[data-simce-font] #header-main,
[data-fsl-preset="simce"] {
    font-family: "Simce Nunito", "Simce Arial", Arial, sans-serif;
}

.simce h1, .simce h2, .simce h3, .simce h4,
.simce input, .simce button, .simce select {
    font-family: inherit;
}

.simce {
    overflow-x: clip;
    --simce-ink: #2f3747;
    --simce-ink-soft: #576279;
    /* Muted text sits on white, on the page background (#f5f6f8) and on #eef0f3: #646b78 keeps AA on all
       three (5.36, 4.96 and 4.70:1); #6b7280 fell to 4.47:1 on the page background. */
    --simce-ink-muted: #646b78;
    --simce-surface: #ffffff;
    --simce-surface-alt: #f6f7f9;
    /* Chart ticks: WCAG AA needs 4.5:1. #6b7280 was 4.83:1 on surface and 4.51:1 on
       surface-alt — a 0.01 coincidence. #4b5563 is 7.56:1 on #ffffff and 7.05:1 on #f6f7f9. */
    --simce-chart-tick: #4b5563;
    --simce-border: #d7dbe3;
    --simce-border-strong: #858fa1;
    --simce-brand: #8754A1;
    --simce-brand-ink: #5d3874;
    --simce-accent: #1CC7A6;
    --simce-focus: #5d3874;
    --simce-space-8: 8px;
    --simce-space-16: 16px;
    --simce-space-24: 24px;
    --simce-space-40: 40px;
    --simce-space-64: 64px;
    --simce-type-13: 13px;
    --simce-type-16: 16px;
    --simce-type-20: 20px;
    --simce-type-28: 28px;
    --simce-type-40: 40px;
    --simce-card-radius: 16px;
    --simce-card-shadow: 0 8px 24px rgba(47, 55, 71, 0.08);

    /* Validated categorical order — assigned by plotted index, never re-assigned by rank.
     * 0–3 are the original set. 4–7 keep the same lightness band and ≥3:1 on both
     * --simce-surface and --simce-surface-alt, so a sixth (and seventh, eighth) line
     * is never the browser default. Shape and dash still distinguish every pair. */
    --simce-series-0: #7a4b96;
    --simce-series-1: #b45309;
    --simce-series-2: #059669;
    --simce-series-3: #1d4ed8;
    --simce-series-4: #be123c;
    --simce-series-5: #0e7490;
    --simce-series-6: #9a3412;
    --simce-series-7: #6d28d9;

    /* Projection is a state, not a fifth entity: muted ink plus a dashed stroke and a hatched band. */
    --simce-projection: #576279;
    --simce-scenario: #0f766e;

    color: var(--simce-ink);
    font-size: var(--simce-type-16);
    font-variant-numeric: tabular-nums;
    line-height: 1.55;
}

.simce *,
.simce *::before,
.simce *::after {
    box-sizing: border-box;
}

.simce a {
    color: var(--simce-brand-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.simce a:hover {
    color: var(--simce-brand);
}

/* One visible focus treatment for every interactive element, including inside dark cards. */
.simce a:focus-visible,
.simce button:focus-visible,
.simce input:focus-visible,
.simce select:focus-visible,
.simce summary:focus-visible,
.simce [tabindex]:focus-visible {
    outline: 3px solid var(--simce-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.simce-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--simce-surface);
    color: var(--simce-brand-ink);
    padding: 0.6rem 1rem;
    z-index: 50;
}

.simce-skip:focus {
    left: 1rem;
    top: 1rem;
}

.simce-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ---- Hero / identity ---- */

/* The absolute public menu needs a dark band and enough top padding. The methodology
 * keeps its existing photo treatment; the hub owns a continuous, image-free brand surface. */
.simce-hero,
.simce-hero-leadin {
    position: relative;
    background-color: #8754A1;
    color: #ffffff;
    border-bottom: 0;
}

section.simce-hero,
.simce-hero.slice-lg,
.simce-hero {
    padding: 13rem 0 2.75rem;
}

@media (min-width: 992px) {
    section.simce-hero.bg-docentes,
    .simce-hero.slice-lg.bg-docentes {
        min-height: min(36rem, calc(100vh - 16rem));
        background-size: auto 876px;
        background-position: 50% -3rem;
    }
}

/* The hub and the methodology page share the brand hero: one continuous gradient, no photo. */
section.simce-hero.simce-hero--hub,
section.simce-hero.simce-hero--brand {
    padding: 12rem 0 var(--simce-space-64);
    background: linear-gradient(115deg, #5d3874, #3f2452);
}

.simce-hero.simce-hero--hub h1 {
    font-size: var(--simce-type-40);
    max-width: 14.4em;
    margin-bottom: var(--simce-space-16);
}

.simce-hero--hub .simce-hero__copy > p {
    font-size: var(--simce-type-20);
    max-width: 31.2em;
    margin-bottom: 0;
}

.simce-hero a:focus-visible,
.simce-hero button:focus-visible,
.simce-hero-leadin a:focus-visible {
    box-shadow: 0 0 0 5px var(--simce-surface);
}

@media (max-width: 991.98px) {
    section.simce-hero.simce-hero--hub,
    section.simce-hero.simce-hero--brand {
        padding: 13rem 0 var(--simce-space-40);
    }
}

@media (max-width: 480px) {
    .simce-hero.simce-hero--hub h1 {
        font-size: var(--simce-type-28);
    }

    .simce-hero--hub .simce-hero__copy > p {
        font-size: var(--simce-type-16);
    }
}

.simce-hero-leadin {
    padding: 13rem 0 0;
}

.simce-hero-leadin + .simce > .simce-hero {
    padding-top: 0.85rem;
}

.simce-hero h1 {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    color: #ffffff;
}

.simce-hero p,
.simce-hero .simce-note {
    margin: 0 0 0.75rem;
    color: #ffffff;
    max-width: 37.2em;
}

/* Notice (503, 410, 422): the brand hero fills the first screen, so a page without results still reads as the
   site the visitor came to and not as an error document. */
section.simce-hero.simce-notice {
    display: flex;
    align-items: center;
    min-height: min(46rem, 100vh);
}

.simce-notice__body {
    max-width: 36rem;
}

.simce-notice__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--simce-space-24);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.simce-hero.simce-notice h1 {
    font-size: var(--simce-type-40);
    margin-bottom: var(--simce-space-16);
}

.simce-hero .simce-notice__message {
    font-size: var(--simce-type-20);
    margin-bottom: var(--simce-space-24);
}

.simce-cta.simce-notice__actions {
    gap: var(--simce-space-16) var(--simce-space-24);
    margin-top: 0;
}

.simce-notice__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--simce-space-64);
}

.simce-notice__art {
    color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 991.98px) {
    .simce-notice__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .simce-notice__art {
        display: none;
    }
}

.simce-hero a.simce-notice__link {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.simce-hero a.simce-notice__link:hover {
    color: #ffffff;
    text-decoration-thickness: 2px;
}

@media (max-width: 480px) {
    .simce-hero.simce-notice h1 {
        font-size: var(--simce-type-28);
    }

    .simce-hero .simce-notice__message {
        font-size: var(--simce-type-16);
    }

    .simce-notice__actions .simce-btn {
        width: 100%;
    }
}

.simce-back {
    display: inline-block;
    margin: 0 0 0.85rem;
    color: #ffffff;
    font-weight: 600;
}

.simce-back:focus-visible {
    outline: 3px solid var(--simce-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.simce-hero a,
.simce-hero-leadin a,
.simce-hero a:hover,
.simce-hero-leadin a:hover {
    color: #ffffff;
}

.simce-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.simce-identity li {
    background: var(--simce-surface-alt);
    border: 1px solid var(--simce-border);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.875rem;
    color: var(--simce-ink-soft);
}

.simce-identity li b {
    color: var(--simce-ink);
    font-weight: 700;
}

.simce-hero .simce-identity li,
.simce-hero-leadin .simce-identity li {
    background: #6b3d82;
    border-color: #d4b3e4;
    color: #ffffff;
}

.simce-hero .simce-identity li b,
.simce-hero-leadin .simce-identity li b {
    color: #ffffff;
}

/* ---- Section navigation ---- */

.simce-sections {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--simce-surface);
    border-bottom: 1px solid var(--simce-border);
    overflow-x: auto;
}

.simce-sections ul {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    white-space: nowrap;
}

.simce-sections a {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--simce-ink-soft);
    font-weight: 600;
    font-size: 0.9rem;
}

.simce-sections a:hover,
.simce-sections a[aria-current="true"] {
    background: var(--simce-surface-alt);
    color: var(--simce-brand-ink);
}

/*
 * Whatever the browser scrolls into view to show it — a section anchor, or a link focused with
 * Shift+Tab climbing the establishments matrix — lands below the sticky navigation, never under it.
 * The sheet script writes the bar's measured height; these values are its one-line height and, on a
 * phone, its wrapped two-line height, for a page without script.
 */
html:has(.simce-sections) {
    --simce-sticky-offset: 3.25rem;
    scroll-padding-top: calc(var(--simce-sticky-offset) + 1rem);
}

@media (max-width: 480px) {
    html:has(.simce-sections) {
        --simce-sticky-offset: 5.75rem;
    }
}

.simce-section {
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--simce-border);
}

.simce-section > h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
    color: var(--simce-ink);
}

.simce-section > p.simce-lead {
    margin: 0 0 1rem;
    color: var(--simce-ink-soft);
    max-width: 40.8em;
}

.simce-section ul:not([class]),
.simce-section ol:not([class]) {
    max-width: 40.8em;
}

.simce-section li {
    max-width: 40.8em;
}

.simce-tiles > li,
.simce-identity > li,
.simce-legend > li,
.simce-sections li{
    max-width: none;
}

/* ---- Hub catalog and features ---- */

.simce-hub-section {
    padding: var(--simce-space-40) 0;
}

.simce-hub-section > h2 {
    font-size: var(--simce-type-28);
    margin-bottom: var(--simce-space-24);
}

.simce-catalog,
.simce-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--simce-space-24);
    margin: 0;
}

.simce-catalog > div {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--simce-space-8);
}

.simce-catalog dt {
    font-size: var(--simce-type-16);
    font-weight: 600;
    color: var(--simce-ink-soft);
}

.simce-catalog dd {
    margin: 0;
    font-size: var(--simce-type-28);
    font-weight: 900;
    line-height: 1.25;
    color: var(--simce-brand-ink);
}

.simce-feature-card {
    padding: var(--simce-space-24);
    background: var(--simce-surface);
    border: 1px solid var(--simce-border);
    border-radius: var(--simce-card-radius);
    box-shadow: var(--simce-card-shadow);
}

.simce-feature-card h3 {
    margin: 0 0 var(--simce-space-8);
    font-size: var(--simce-type-20);
    font-weight: 800;
    color: var(--simce-ink);
}

.simce-feature-card p {
    margin: 0;
    font-size: var(--simce-type-16);
}

.simce-features + .simce-note {
    margin-top: var(--simce-space-24);
    font-size: var(--simce-type-13);
}

@media (max-width: 767.98px) {
    .simce-catalog,
    .simce-features {
        grid-template-columns: minmax(0, 1fr);
    }

    .simce-hub-section {
        padding: var(--simce-space-24) 0;
    }
}

/* ---- Cards, banners, notes ---- */


.simce-banner {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    border: 1px solid var(--simce-border-strong);
    border-left: 4px solid var(--simce-brand);
    background: var(--simce-surface-alt);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin: 0 0 1rem;
    color: var(--simce-ink-soft);
    font-size: 0.925rem;
}

.simce-banner--scenario {
    border-left-color: var(--simce-scenario);
}

.simce-banner b {
    color: var(--simce-ink);
}

.simce-note {
    font-size: 0.85rem;
    color: var(--simce-ink-muted);
    margin: 0.4rem 0 0;
}

/* ---- Summary tiles ---- */

/*
 * The summary card grid is the phone reading. On a desktop width it broke two ways, and both were
 * measured on real sheets: auto-fit collapsed a one-tile year group into a full-width banner that was
 * ~80% empty, while auto-fill kept five fixed 220px tracks and painted a year with one measurement as
 * a heading, a card, and 928px of nothing beside it — the longest block on the page after the charts.
 * The desktop reading is neither: a ledger (rules in the block after the tile rules) where the year is
 * a row key and each measurement is an inline chip, so the group reads as one line of text.
 */
.simce-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    align-items: stretch;
}

/* The featured measurement is one card, not the first of three phantom 352px tracks: a fixed track
 * list reserves tracks nothing ever fills (auto-fill) or stretches the lone tile to the container
 * (auto-fit). One content-sized track keeps the emphasis without inventing neighbours. */
.simce-tiles--lead {
    grid-template-columns: minmax(16rem, 22rem);
}

.simce-tiles--lead > .simce-tile--lead {
    max-width: 22rem;
}

.simce-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--simce-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    background: var(--simce-surface);
}

.simce-tile--lead {
    border-color: var(--simce-border-strong);
    background: var(--simce-surface-alt);
    padding: 1.1rem 1.2rem;
}

.simce-tile__label {
    display: block;
    font-size: 0.8rem;
    text-transform: none;
    color: var(--simce-ink-muted);
    margin-bottom: 0.2rem;
    min-height: 2.4em;
}

.simce-tile--lead .simce-tile__label {
    min-height: 0;
    font-size: 0.95rem;
    color: var(--simce-ink-soft);
}

.simce-tile__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--simce-ink);
    font-variant-numeric: tabular-nums;
    margin-top: auto;
}

.simce-tile--lead .simce-tile__value {
    font-size: 2.35rem;
    margin-top: 0.15rem;
}

.simce-tile__meta {
    display: block;
    font-size: 0.8rem;
    color: var(--simce-ink-soft);
    margin-top: 0.2rem;
}

.simce-tile__delta {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--simce-ink);
    margin-top: 0.35rem;
}

.simce-tile-group__year {
    font-size: 1rem;
    font-weight: 700;
    color: var(--simce-ink);
    margin: 1.1rem 0 0.5rem;
}

/* ---- The Resumen as a ledger (desktop) ---- */

/*
 * Every tile already prints its own year ("puntos · 2016"), so a year group is a row key plus its
 * values, not a section with a grid inside. Two rules carry the reading:
 *
 * 1. The section that holds year groups becomes a two-column grid: year key in a content-sized rail,
 *    measurements in the remaining width. The rail sizes to the longest label, so every chip column
 *    starts on one edge and a one-measurement year is one ~40px ledger line instead of a heading, a
 *    220px card and 928px of white. Unknown children default to the full row, so a new element in the
 *    section can never land in the rail by accident; the pairing rides on the heading + adjacent list,
 *    and falls back to full width if anything ever comes between them.
 * 2. The measurements themselves are chips: label, number and unit read as one line that wraps like
 *    text, instead of stat cards that leave most of five fixed tracks empty.
 *
 * Measured on the three real sheets at 1440: track occupancy was 30-43%, single-tile rows 4/9/9,
 * Resumen 1,064-2,688px tall. The phone keeps the card grid below: one column already reads well.
 */
@media (min-width: 768px) {
    .simce-section:has(> .simce-tile-group__year) {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: 1.25rem;
        align-items: start;
    }

    .simce-section:has(> .simce-tile-group__year) > * {
        grid-column: 1 / -1;
    }

    .simce-section:has(> .simce-tile-group__year) > .simce-tile-group__year {
        grid-column: 1;
        align-self: center;
        margin: 0;
        font-size: 0.9rem;
        color: var(--simce-ink-soft);
    }

    .simce-section:has(> .simce-tile-group__year) > .simce-tile-group__year + .simce-tiles--compact {
        grid-column: 2;
        margin: 0 0 0.7rem;
    }

    .simce-tiles--compact {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem 0.55rem;
        margin: 0 0 0.75rem;
    }

    .simce-tiles--compact .simce-tile {
        flex: 0 1 auto;
        flex-direction: row;
        align-items: baseline;
        column-gap: 0.45rem;
        padding: 0.3rem 0.8rem;
        border-radius: 8px;
    }

    .simce-tiles--compact .simce-tile__label {
        min-height: 0;
    }

    .simce-tiles--compact .simce-tile__value {
        margin-top: 0;
        font-size: 1.05rem;
        line-height: 1.3;
    }

    .simce-tiles--compact .simce-tile__meta {
        margin-top: 0;
    }
}

/* ---- Small multiples ---- */

.simce-grid {
    display: grid;
    /* minmax(0, 1fr), like the two-column rule below: a bare 1fr track sizes to the card's
     * min-content, so a table that deliberately overflows its wrap (the phone rules near the end)
     * would widen the whole card instead of making the wrap scroll. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.simce-level {
    margin: 0 0 1.75rem;
}

.simce-level__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--simce-ink);
    margin: 0 0 0.4rem;
}

.simce-historic {
    margin-top: 0.85rem;
}

.simce-historic > summary {
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--simce-ink);
    margin-bottom: 0.75rem;
}

.simce-chart {
    margin: 0;
    border: 1px solid var(--simce-border);
    border-radius: 10px;
    padding: 0.85rem;
    background: var(--simce-surface);
    height: max-content;
}

.simce-chart figcaption {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.simce-chart-plot {
    position: relative;
}

.simce-chart__svg {
    width: 100%;
    height: auto;
    display: block;
}

.simce-chart-ann {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.simce-ann {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0 0.15em;
    background: var(--simce-surface);
    color: var(--simce-chart-tick);
    font-size: 11px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform: translateY(-50%);
}

.simce-ann--end {
    transform: translate(-100%, -50%);
}

.simce-ann--start {
    transform: translate(0, -50%);
}

.simce-ann--middle {
    transform: translate(-50%, -50%);
}

.simce-ann--label {
    color: var(--simce-ink);
    font-weight: 700;
    /* Opaque fill is the contrast against gridlines. Geometry places this
     * beside the last marker (start-anchored, in the right margin), so the
     * box no longer paints out the disc it annotates or the points before it. */
}

.simce-chart__axis {
    stroke: var(--simce-border);
    stroke-width: 1;
}

.simce-chart__grid {
    stroke: var(--simce-border);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

/* A line is a stroke. Qualifying the element beats a colour class of equal
 * specificity (`.simce-serie-N` / `.simce-ref-N` set fill for markers) no
 * matter who comes last in the file. */
polyline.simce-chart__line,
path.simce-chart__line,
line.simce-chart__line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Reference strokes stay thin when the web plot stretches independently in each axis. */
.simce-chart__line[class*="simce-ref-"] { vector-effect: non-scaling-stroke; }

.simce-chart__marker {
    stroke: var(--simce-surface);
    stroke-width: 2;
}

.simce-chart__gap {
    stroke: var(--simce-border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.simce-chart__gap-text {
    font-size: 9px;
    fill: var(--simce-ink-muted);
}

.simce-chart__projection {
    stroke: var(--simce-projection);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    fill: none;
}

.simce-chart__band {
    fill: url(#simceHatch);
    stroke: var(--simce-projection);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.simce-serie-0 { stroke: var(--simce-series-0); fill: var(--simce-series-0); }
.simce-serie-1 { stroke: var(--simce-series-1); fill: var(--simce-series-1); }
.simce-serie-2 { stroke: var(--simce-series-2); fill: var(--simce-series-2); }
.simce-serie-3 { stroke: var(--simce-series-3); fill: var(--simce-series-3); }
.simce-serie-4 { stroke: var(--simce-series-4); fill: var(--simce-series-4); }
.simce-serie-5 { stroke: var(--simce-series-5); fill: var(--simce-series-5); }
.simce-serie-6 { stroke: var(--simce-series-6); fill: var(--simce-series-6); }
.simce-serie-7 { stroke: var(--simce-series-7); fill: var(--simce-series-7); }

/* Official benchmarks of the same comparable series: same hues, different class so a figure
   that overlays school + nacional is not read as two SIMCE scales mixed on one line. */
.simce-ref-1 { stroke: var(--simce-series-1); fill: var(--simce-series-1); }
.simce-ref-2 { stroke: var(--simce-series-2); fill: var(--simce-series-2); }
.simce-ref-3 { stroke: var(--simce-series-3); fill: var(--simce-series-3); }
.simce-ref-4 { stroke: var(--simce-series-4); fill: var(--simce-series-4); }
.simce-ref-5 { stroke: var(--simce-series-5); fill: var(--simce-series-5); }
.simce-ref-6 { stroke: var(--simce-series-6); fill: var(--simce-series-6); }
.simce-ref-7 { stroke: var(--simce-series-7); fill: var(--simce-series-7); }

.simce-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.825rem;
    color: var(--simce-ink-soft);
}

.simce-legend li {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* Beside the FIRST text line, not centered against the whole row: a row that wraps on a narrow
     * card keeps its swatch anchored to the line it identifies instead of floating between the two. */
    align-items: flex-start;
    gap: 0.35rem;
    max-width: 100%;
}

/* purpose.min.css sets `svg { width: 100% }`. Pin the swatch so it cannot
 * stretch and squeeze the label onto one word per line. The top margin optically centers it
 * against one 20.5px line box (13.2px text at 1.55) while keeping it beside line one. */
.simce-legend svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    max-width: 16px;
    margin-top: 2px;
}

.simce-legend li span {
    min-width: 0;
    /* A row that genuinely cannot fit one line (a phone-width card) breaks as two even lines,
     * which reads as a deliberate legend entry rather than an accidental overflow. */
    text-wrap: balance;
}

.simce-legend__swatch--projection {
    stroke: var(--simce-projection);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    fill: none;
}

/* ---- Equivalent tables ---- */

.simce-table-toggle {
    margin-top: 0.6rem;
    border-top: 1px dashed var(--simce-border);
    padding-top: 0.5rem;
}

.simce-table-toggle > summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--simce-brand-ink);
}

.simce-table-scroll {
    margin: 0.35rem 0 0.2rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--simce-ink-soft);
}

/* The region is a size container so the caption of a table wider than it can be held to its width. */
.simce-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    min-width: 0;
    margin-top: 0.5rem;
    container-type: inline-size;
}

.simce-table-wrap:focus {
    outline: 3px solid var(--simce-focus);
    outline-offset: 2px;
}

.simce-measure {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.simce-measure li {
    margin: 0;
    border-bottom: 1px solid var(--simce-border);
}

.simce-measure a,
.simce-measure span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    min-height: 44px;
    padding: 0.4rem 0;
    overflow-wrap: anywhere;
}

/* Older catalog years. Closed by default; the summary is the keyboard and screen-reader control. */
.simce-year {
    margin: 0 0 0.35rem;
    border-bottom: 1px solid var(--simce-border);
}

.simce-year > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: 44px;
    font-weight: 700;
    color: var(--simce-ink);
}

/* A closed <details> hides its list on screen and in print. Print still has to name every year. */
@media print {
    .simce-year:not([open]) > :not(summary) {
        display: block !important;
    }
}

.simce-table {
    width: 100%;
    border-collapse: collapse;
    caption-side: top;
    font-size: 0.85rem;
}

/* A caption is as wide as its table. Held to the region's visible width and pinned to its left edge,
 * it reads whole before and during a horizontal scroll instead of running out of view. */
.simce-table caption {
    caption-side: top;
    text-align: left;
    font-size: 0.85rem;
    color: var(--simce-ink-soft);
    padding-top: 0;
    padding-bottom: 0.35rem;
    position: sticky;
    left: 0;
    max-width: 100cqi;
}

.simce-table th,
.simce-table td {
    border-bottom: 1px solid var(--simce-border);
    padding: 0.4rem 0.55rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.simce-table th:first-child,
.simce-table td:first-child,
.simce-table td.simce-table__text,
.simce-table th.simce-table__text {
    text-align: left;
    white-space: normal;
}

.simce-table thead th {
    color: var(--simce-ink-soft);
    font-weight: 700;
    border-bottom: 2px solid var(--simce-border-strong);
}

.simce-table tbody tr:nth-child(even) {
    background: var(--simce-surface-alt);
}

/* Keep cell contrast determinable when a wide table is clipped by its scrolling region. Every
 * table sits on the surface colour, so painting it on the cells changes nothing on screen. */
.simce-table thead th,
.simce-table tbody th,
.simce-table tbody td {
    background: var(--simce-surface);
}

.simce-table tbody tr:nth-child(even) th,
.simce-table tbody tr:nth-child(even) td {
    background: var(--simce-surface-alt);
}

.simce-table td.simce-missing {
    color: var(--simce-ink-muted);
    font-style: normal;
}

.simce-members-more {
    margin: 0.75rem 0 0;
}

/* ---- Forecast / scenario ---- */

.simce-forecast {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.simce-forecast__row {
    border: 1px solid var(--simce-border);
    border-radius: 10px;
    padding: 1rem;
    background: var(--simce-surface);
}

.simce-forecast__series {
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.simce-forecast__pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.simce-forecast__block {
    border-left: 4px solid var(--simce-projection);
    padding-left: 0.75rem;
}

.simce-forecast__block--scenario {
    border-left-color: var(--simce-scenario);
}

.simce-forecast__kicker {
    display: block;
    font-size: 0.8rem;
    color: var(--simce-ink-muted);
    margin-bottom: 0.1rem;
}

.simce-forecast__value {
    font-size: 1.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--simce-ink);
}

.simce-forecast__sentence {
    margin: 0.2rem 0 0;
    color: var(--simce-ink-soft);
    font-size: 0.9rem;
}

.simce-badge {
    display: inline-block;
    border: 1px solid var(--simce-border-strong);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--simce-ink-soft);
    background: var(--simce-surface-alt);
}

.simce-badge--policy {
    border-color: var(--simce-scenario);
    color: #0b5a54;
}

.simce-badge--projected {
    border-style: dashed;
}

/* ---- CTA ---- */
.simce-meeting-band {
    display: grid; gap: 24px; padding: 24px;
    border: 1px solid var(--simce-line); border-radius: 12px; background: var(--simce-surface-alt);
}
.simce-meeting-band .simce-note { color: var(--simce-ink-soft); }
.simce-meeting-band .simce-lead { max-width: none; margin: 0; }
.simce-meeting-band .simce-cta { margin: 0; }
@media (min-width: 992px) {
    .simce-meeting-band { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; }
    .simce-meeting-band > * { grid-column: 1; }
    .simce-meeting-band > .simce-cta { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}


.simce-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.75rem;
}

.simce-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--simce-space-8);
    min-height: 44px;
    padding: 10px var(--simce-space-24);
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: var(--simce-type-16);
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    background: var(--simce-brand-ink);
    color: #ffffff;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.simce a.simce-btn,
.simce a.simce-btn:hover {
    text-decoration: none;
    color: #ffffff;
}

.simce-btn:hover {
    background: #3f2452;
    color: #ffffff;
}

.simce-btn--secondary {
    background: var(--simce-surface);
    color: var(--simce-brand-ink);
    border-color: var(--simce-brand-ink);
}

.simce-btn--secondary:hover {
    background: var(--simce-surface-alt);
    color: var(--simce-brand-ink);
}

.simce-btn--text {
    background: transparent;
    color: var(--simce-brand-ink);
    border-color: transparent;
}

.simce-btn--text:hover {
    background: var(--simce-surface-alt);
    color: var(--simce-brand-ink);
}

.simce a.simce-btn--secondary,
.simce a.simce-btn--secondary:hover,
.simce a.simce-btn--text,
.simce a.simce-btn--text:hover {
    color: var(--simce-brand-ink);
}

.simce-btn[disabled],
.simce-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.simce-btn[aria-busy="true"] {
    cursor: progress;
}

.simce-btn:is([disabled], [aria-disabled="true"], [aria-busy="true"]):hover {
    background: var(--simce-brand-ink);
    color: #ffffff;
}

.simce-btn--secondary:is([disabled], [aria-disabled="true"], [aria-busy="true"]):hover {
    background: var(--simce-surface);
    color: var(--simce-brand-ink);
}

.simce-btn--text:is([disabled], [aria-disabled="true"], [aria-busy="true"]):hover {
    background: transparent;
    color: var(--simce-brand-ink);
}

/* FilterControls retains its native select and behavior, with SIMCE's AA palette. */
.simce .fw-selwrap {
    --ink: var(--simce-ink);
    --slate: var(--simce-ink-soft);
    --line: var(--simce-border-strong);
    --tq: var(--simce-brand-ink);
    --tq-700: var(--simce-brand-ink);
    --tq-800: var(--simce-brand-ink);
    --slate-2: var(--simce-ink-soft);
    --slate-3: var(--simce-ink-soft);
}

.simce .fw-selwrap select {
    min-height: 44px;
    transition: border-color 180ms ease, color 180ms ease;
}

.simce .fw-selwrap.is-active select {
    box-shadow: 0 0 0 3px rgba(93, 56, 116, 0.12);
}

.simce .fw-selwrap select:focus-visible {
    outline: 3px solid var(--simce-focus);
    outline-offset: 2px;
}

/* Summary composition uses existing children; comparison keeps its own root and handlers. */
.simce-section--summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.simce-section--summary > * { grid-column: 1 / -1; min-width: 0; }

.simce-section--summary > .simce-actions { margin-top: 0; }

@media (min-width: 992px) {
    .simce-section--summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }


}

/* ---- Share and PDF, under the summary ---- */

.simce-actions {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--simce-border);
    border-radius: 10px;
    background: var(--simce-surface);
    max-width: 40.8em;
}

.simce-actions:focus {
    outline: none;
}

/* Arrival from the section bar is shown, since the block takes focus without a visible control. */
.simce-actions:target,
.simce-actions:focus-visible {
    outline: 3px solid var(--simce-brand-ink);
    outline-offset: 2px;
}

.simce-actions__title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
    color: var(--simce-ink);
}

.simce-actions .simce-cta {
    margin-top: 0.5rem;
}

.simce-actions > :last-child {
    margin-bottom: 0;
}

/* The live region stays in the tree while silent; it only takes room once it speaks. */
.simce-actions .simce-status:empty {
    min-height: 0;
    margin-top: 0;
}

/* ---- Meeting questions ---- */

.simce-questions__title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 1rem 0 0.5rem;
    color: var(--simce-ink);
}

.simce-questions {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
}

.simce-questions > li {
    margin-bottom: 0.5rem;
}

@media print {
    .simce-actions {
        display: none;
    }
}

/* ---- Search ---- */

.simce-search {
    margin: 1.25rem 0;
}

.simce-search__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 32.5rem;
    margin-top: 0.75rem;
}

.simce-search__field {
    flex: 1 1 16rem;
    min-width: 0;
}

.simce-search label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

/* Both scopes' label and help share one grid cell: the inactive copy is invisible (and out of the
   accessible name) but keeps its room, so the card is as tall as its longer copy in either scope. */
.simce-search .simce-scope-copy {
    display: grid;
}

.simce-scope-copy > [data-simce-scope-copy] {
    grid-area: 1 / 1;
}

.simce-scope-copy > [data-simce-inactive] {
    visibility: hidden;
}

.simce-input {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--simce-border-strong);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--simce-ink);
    background: var(--simce-surface);
}

.simce-scope {
    display: inline-flex;
    border: 1px solid var(--simce-border-strong);
    border-radius: 999px;
}

.simce-scope button {
    min-height: 44px;
    padding: 0.4rem 1rem;
    border: 0;
    background: var(--simce-surface);
    color: var(--simce-ink-soft);
    font-weight: 700;
    cursor: pointer;
}

.simce-scope button[aria-pressed="true"] {
    background: var(--simce-brand-ink);
    color: #ffffff;
}

/*
 * The suggestions are a popup of the input, not part of the page: positioned over whatever follows the
 * control row, with their own scroll, so a search never makes the hero or the page taller. The height
 * is fitted to the visible viewport by the module; the CSS cap is the fallback before it measures.
 */
.simce-search__control {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 1 0 100%;
    min-width: 0;
}

.simce-search__control .simce-btn {
    flex: none;
    padding-inline: 1.15rem;
}

.simce-results {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    max-height: min(23rem, 60vh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0.25rem 0;
    border: 1px solid var(--simce-border-strong);
    border-radius: 10px;
    background: var(--simce-surface);
    color: var(--simce-ink);
    box-shadow: 0 16px 36px rgba(31, 36, 46, 0.22);
    transition: opacity 180ms ease-out;
}

/* The list on screen answers an older term or scope while the new answer is on its way. */
.simce-results[aria-busy="true"] {
    background: var(--simce-surface-alt);
}

/* Its rows are not ways in while it is old (the module removes their href): nothing invites a click. */
.simce-results[aria-busy="true"] .simce-result,
.simce-results[aria-busy="true"] .simce-result__link {
    cursor: default;
}

.simce-results[aria-busy="true"] a.simce-result__link:hover .simce-result__action {
    background: var(--simce-brand-ink);
}

.simce-results__options,
.simce-results__links {
    display: contents;
}

.simce-results__options {
    list-style: none;
    margin: 0;
    padding: 0;
}

.simce-result {
    grid-column: 1;
    grid-row: var(--simce-result-row);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1rem;
    min-width: 0;
    min-height: 44px;
    max-width: none;
    margin: 0;
    padding: 0.6rem 0.5rem 0.6rem 0.8rem;
    border-left: 4px solid transparent;
    border-bottom: 1px solid var(--simce-border);
    text-align: left;
    cursor: pointer;
}

.simce-result__name {
    font-weight: 700;
    color: var(--simce-ink);
    overflow-wrap: anywhere;
}

.simce-result__meta {
    font-size: 0.82rem;
    /* ink-soft, not ink-muted: muted is 4.51:1 on the highlighted row, too thin for text this small. */
    color: var(--simce-ink-soft);
    overflow-wrap: anywhere;
}

.simce a.simce-result__link,
.simce a.simce-result__link:hover {
    grid-column: 2;
    grid-row: var(--simce-result-row);
    display: flex;
    align-items: center;
    padding: 0.5rem 0.8rem 0.5rem 0.25rem;
    border-bottom: 1px solid var(--simce-border);
    text-decoration: none;
}

.simce-result[aria-selected="true"],
.simce a.simce-result__link[data-selected="true"] {
    background: var(--simce-surface-alt);
}

.simce-result[aria-selected="true"] {
    border-left-color: var(--simce-brand);
}

.simce .simce-result__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--simce-brand-ink);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.simce a.simce-result__link:hover .simce-result__action,
.simce a.simce-result__link:focus-visible .simce-result__action,
.simce a.simce-result__link[data-selected="true"] .simce-result__action {
    background: var(--simce-brand);
}

/* The focus ring of the link sits inside the popup, which clips anything drawn outside its box. */
.simce a.simce-result__link:focus-visible {
    outline-offset: -3px;
}

/* Keyboard help is audible while the list is open. Warnings and errors stay visible. */
.simce-search[data-simce-open] .simce-status:not([data-state]) {
    height: 1.4em;
    overflow: hidden;
    clip-path: inset(50%);
}

/* A narrow popup stacks each suggestion: its name and place, then its one action, as one block. */
@media (max-width: 36rem) {
    .simce-results {
        grid-template-columns: minmax(0, 1fr);
    }

    .simce-result {
        grid-row: calc(var(--simce-result-row) * 2 - 1);
        padding-bottom: 0.25rem;
        border-bottom: 0;
    }

    .simce a.simce-result__link,
    .simce a.simce-result__link:hover {
        grid-column: 1;
        grid-row: calc(var(--simce-result-row) * 2);
        padding: 0.2rem 0.8rem 0.6rem calc(0.8rem + 4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .simce-results {
        transition: none;
    }
}

@media (forced-colors: active) {
    .simce-results {
        border: 1px solid CanvasText;
    }

    .simce-result[aria-selected="true"] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

/*
 * A `?grupo=` address saved from the group builder the hub used to carry: a card in the hero copy column,
 * the same surface as the search card, with the continuation (or the reason there is none) inside it.
 */
.simce-hero .simce-legacy-group {
    margin: 1.25rem 0 0;
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--simce-accent);
    border-radius: 12px;
    background: var(--simce-surface);
    color: var(--simce-ink);
}

.simce-hero .simce-legacy-group h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--simce-ink);
}

.simce-hero .simce-legacy-group p {
    margin: 0;
    font-size: 0.925rem;
    color: var(--simce-ink-soft);
}

.simce-hero .simce-legacy-group .simce-status {
    margin-top: 0.5rem;
    min-height: 0;
}

.simce-hero .simce-legacy-group .simce-status:empty {
    display: none;
}

.simce-hero .simce-legacy-group .simce-status[data-state="error"] {
    color: #9a3412;
}

.simce-hero .simce-legacy-group .simce-status[data-state="warn"] {
    color: #92400e;
}

.simce-legacy-group__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.simce-legacy-group__actions:empty {
    display: none;
}

.simce-hero .simce-legacy-group a.simce-btn {
    max-width: 100%;
    padding-inline: 1.25rem;
    white-space: normal;
    text-align: left;
    color: #ffffff;
}

@media (forced-colors: active) {
    .simce-hero .simce-legacy-group {
        border: 1px solid CanvasText;
    }
}


/* ---- Status region ---- */

.simce-status {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--simce-ink-soft);
    min-height: 1.4em;
}

.simce-status[data-state="error"] {
    color: #9a3412;
    font-weight: 600;
}

.simce-status[data-state="warn"] {
    color: #92400e;
    font-weight: 600;
}

/* ---- Meeting modal ---- */

/*
 * `hidden` must win inside this scope. An author rule like `.simce-btn { display: inline-flex }` outranks
 * the user agent's `[hidden] { display: none }` no matter how specific the UA rule is, so the modal's
 * fallback link rendered as a visible, actionable control while still being `hidden` to assistive tech —
 * an element that looks clickable and is not.
 */
.simce [hidden] {
    display: none !important;
}

.simce-modal[hidden] {
    display: none;
}

.simce-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(31, 36, 46, 0.6);
}

.simce-modal__dialog {
    background: var(--simce-surface);
    border-radius: 12px;
    width: min(760px, 100%);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.simce-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.5rem;
    border-bottom: 1px solid var(--simce-border);
}

.simce-modal__body {
    padding: 1rem;
    overflow-y: auto;
}

.simce-modal__frame {
    width: 100%;
    height: 62vh;
    min-height: 460px;
    border: 0;
}

.simce-fieldset {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
}

.simce-fieldset legend {
    font-weight: 700;
    font-size: 1rem;
    padding: 0;
    margin-bottom: 0.4rem;
}

.simce-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.2rem;
    min-height: 44px;
}

.simce-radio input {
    margin-top: 0.3rem;
    width: 20px;
    height: 20px;
    accent-color: var(--simce-brand);
}

/* ---- Responsive ---- */

/*
 * Two columns at every desktop width. A legend row is part of the figure, and real rows are long: a
 * series label runs to ~80 characters ("8.º básico · Historia, Geografía y Ciencias Sociales ·
 * escala 2000-2019 (círculo)") and a split-commune benchmark to ~77. At three columns the card
 * offers ~321px of text, which wrapped 40 of 118 rows on a real sheet at 1440; at two columns the
 * same rows hold one line. A row that still cannot fit (phone width) wraps on purpose — see the
 * legend rules below.
 */
@media (min-width: 768px) {
    /* At a width where the table fits, the hint stays available to assistive tech only. */
    .simce-table-scroll {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .simce-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .simce-forecast__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .simce-forecast {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A phone cannot fit an 80-character legend row on one ~300px line, so the honest shape there is a
 * stacked list: one entry per row, every swatch on one column edge, wrapped entries balanced. That
 * is the deliberate treatment; packing short entries inline next to overflowing ones is the broken
 * one this replaces.
 *
 * Typography: the key sets its own annotation scale here, one step above the 11px the figure's own
 * tick text paints at and below the body text it used to inherit. At the body's 0.825rem/1.55 a
 * five-series key measured 210px against a 183px plot — the key taller than the chart it annotates.
 * 0.75rem/1.3 keeps every entry the same honest two lines while the key reads as a caption of the
 * figure, not a second block of prose under it. */
@media (max-width: 767.98px) {
    .simce-legend {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .simce-legend svg {
        flex: 0 0 12px;
        width: 12px;
        height: 12px;
        max-width: 12px;
    }
}

/* Between the tablet and the wide column the sheet breathes with /simce, whose band holds a 960px
 * Bootstrap container with 30px of gutters: a 930px text column. The 1180px column left only 16px of
 * margin at 1100/1024/992 against 100/62/46px on the landing, so the title, the lead, the chips, the
 * sub-navigation and the summary all touched the edge. The step ends where the landing's own container
 * steps (1200), so both widen together. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .simce-container {
        max-width: 58.125rem;
    }
}

@media (min-width: 1600px) {
    .simce-container {
        max-width: 1320px;
    }
}

/* A small screen gets the table first: a 360px chart is a summary, the table is the data. */
@media (max-width: 991.98px) {
    section.simce-hero,
    .simce-hero.slice-lg,
    .simce-hero,
    .simce-hero-leadin {
        padding-top: 15rem;
    }

    .simce-hero-leadin + .simce > .simce-hero {
        padding-top: 0.75rem;
    }
}

@media (max-width: 480px) {
    .simce-tile__value {
        font-size: 1.5rem;
    }

    .simce-sections {
        overflow-x: visible;
    }

    .simce-sections ul {
        flex-wrap: wrap;
        white-space: normal;
    }

    .simce-table th,
    .simce-table td {
        padding: 0.35rem 0.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .simce *,
    .simce *::before,
    .simce *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .simce-chart__line,
    .simce-chart__marker,
    .simce-chart__projection {
        forced-color-adjust: none;
    }

    .simce-ann--tick,
    .simce-ann--label {
        color: CanvasText;
        background: Canvas;
        forced-color-adjust: none;
    }

    .simce-btn {
        border: 1px solid ButtonText;
    }
}


/* =====================================================================
   R59 — Hub en tiempo real (feature-simce-hub-realtime-ux)
   The live reading: cards that show each member's headline numbers the
   moment it is added and turn into a comparison as the group grows.
   Append-only block; every rule above predates this work.
   ===================================================================== */

/* The reading grid: one column on a phone, as many cards as fit above it. */
.simce-reading {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.9rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

/* A network card keeps the dashed brand border chips used: same identity cue, more room. */


/* The entrance animation is opt-in per card (--in is set only on the member just added), so
   a payload arriving never replays it and a removal never animates the survivors. */


/* 44px target, same as the Agregar control it mirrors. */


/* Reserves the height of a loaded card's body so a pending card never grows under it. */


/* Tighter tiles than the sheet's: a card is one member, not the whole page. */
.simce-reading .simce-tiles--card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.35rem 0 0.2rem;
}

.simce-reading .simce-tiles--card .simce-tile {
    padding: 0.5rem 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.simce-reading .simce-tiles--card .simce-tile__value {
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
}

.simce-reading .simce-tiles--card .simce-tile__label {
    font-size: 0.72rem;
    margin-bottom: 0.1rem;
}

.simce-reading .simce-tiles--card .simce-tile__meta {
    font-size: 0.72rem;
    margin-top: 0.1rem;
}

/* The count reads as text between the buttons, not a control. */


.simce [data-simce-group-cta] {
    margin-top: 0.9rem;
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

@media (max-width: 480px) {
    .simce-reading {
        grid-template-columns: 1fr;
    }

    .simce-reading .simce-tiles--card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


}


/* =====================================================================
   R67 — El enlace compartido como control y el modal de reunión en
   dos pasos (feature-simce-hub-realtime-ux)
   Append-only block; every rule above predates this work.
   ===================================================================== */

/* ---- Share result ---- */

/* The link a share produces lives in a field, never in a paragraph of prose. */
.simce-share {
    margin-top: 0.75rem;
    max-width: 40rem;
}

.simce-share__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.simce-share__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* One line that scrolls: a URL of almost two hundred characters must never wrap
   back into the wall of text this control replaces. */
.simce-share__input {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--simce-border-strong);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--simce-ink);
    background: var(--simce-surface);
    white-space: nowrap;
    overflow-x: auto;
    text-overflow: ellipsis;
}

.simce-share__input:focus {
    outline: 2px solid var(--simce-brand);
    outline-offset: 1px;
}

/* Tighter than a simce-btn so the field keeps the room on a phone. */
.simce-share__copy {
    flex: none;
    padding: 0.55rem 1.25rem;
}

/* Mail is its own action, not a tail glued to the link. */
.simce-share__mail {
    display: inline-block;
    margin-top: 0.45rem;
    font-size: 0.9rem;
}

/* ---- Meeting modal: the done step collapses ---- */

/* The answered role question becomes one line: the answer plus the way back. */
.simce-role-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--simce-ink);
}

.simce-role-summary__change {
    min-height: 44px;
    border: 0;
    padding: 0 0.15rem;
    background: none;
    color: var(--simce-brand-ink);
    cursor: pointer;
    font-size: 0.88rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.simce-role-summary__change:hover {
    color: var(--simce-ink);
}

.simce-role-summary__change:focus-visible {
    outline: 2px solid var(--simce-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (forced-colors: active) {
    .simce-role-summary__change {
        border: 1px solid ButtonText;
    }
}


/* ---- Hub search: title, field and scope form one continuous reading ---- */

.simce-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--simce-space-24);
}

.simce-hero .simce-search--hero {
    position: relative;
    container: simce-hub-search / inline-size;
    margin: 0;
    padding: var(--simce-space-24);
    background: var(--simce-surface);
    border-radius: var(--simce-card-radius);
    box-shadow: var(--simce-card-shadow);
    color: var(--simce-ink);
}

.simce-search--hero .simce-search__row {
    max-width: none;
    margin: 0;
}

.simce-search--hero .simce-search__entry {
    display: flex;
    align-items: center;
    gap: var(--simce-space-8);
    padding-left: var(--simce-space-8);
    border: 1px solid var(--simce-border-strong);
    border-radius: 12px;
    background: var(--simce-surface);
}

.simce-search--hero .simce-scope {
    flex: none;
    border: 0;
    gap: 4px;
}

.simce-search--hero .simce-scope button {
    border-radius: 999px;
    padding-inline: var(--simce-space-16);
    font-size: var(--simce-type-16);
    transition: box-shadow 180ms ease;
}

.simce-search--hero .simce-input {
    flex: 1 1 0;
    min-width: 0;
    min-height: 64px;
    border: 0;
    border-radius: 12px;
}

.simce-search--hero .simce-search__control > .simce-btn {
    min-height: 64px;
}

.simce-hero .simce-search--hero .simce-note {
    margin: 0;
    color: var(--simce-ink-soft);
    font-size: var(--simce-type-13);
}

.simce-hero .simce-search--hero a { color: var(--simce-brand-ink); text-decoration: underline; }
.simce-hero .simce-search--hero a:hover,
.simce-hero .simce-search--hero a:focus { color: #49335e; }
/* Reserve the longest status; the bounded region also contains unexpected longer errors. */
.simce-hero .simce-search--hero .simce-status {
    block-size: 3lh;
    min-block-size: 3lh;
    overflow: auto;
    margin: 0;
    color: var(--simce-ink-soft);
    font-size: var(--simce-type-13);
}

.simce-hero .simce-search--hero .simce-status:empty {
    padding: 0;
    box-shadow: none;
}

.simce-hero .simce-search--hero .simce-status[data-state="error"] {
    color: #9a3412;
}

.simce-hero .simce-search--hero .simce-status[data-state="warn"] {
    color: #92400e;
}

.simce-hero .simce-search--hero h2 {
    font-size: var(--simce-type-20);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 var(--simce-space-16);
    color: var(--simce-ink);
}

.simce .simce-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767.98px) {
    .simce-hero .simce-search--hero {
        padding: var(--simce-space-16);
    }

    .simce-hero .simce-search--hero .simce-status {
        block-size: 5lh;
        min-block-size: 5lh;
        padding-inline: var(--simce-space-16);
    }

    .simce-search--hero .simce-search__entry {
        flex-wrap: wrap;
        gap: 0;
        padding: 0;
    }

    .simce-search--hero .simce-scope {
        flex-basis: 100%;
        padding: 4px;
    }

    /* The scope row has its own line here and is revealed by the module. When the page will run it
       (`data-simce-js`, set in <head> before the first paint), its room is reserved so the field does
       not drop when it appears; without JavaScript no empty row is left. */
    [data-simce-js] .simce-search--hero .simce-scope[hidden] {
        display: flex !important;
        visibility: hidden;
    }

    .simce-search--hero .simce-scope button {
        padding-inline: 12px;
        font-size: var(--simce-type-13);
    }

    .simce-search--hero .simce-input,
    .simce-search--hero .simce-search__control > .simce-btn {
        min-height: 56px;
    }

    .simce-search--hero .simce-search__control > .simce-btn {
        padding-inline: 12px;
    }
}

/* Reflow depends on the field's actual room, including browser/text zoom. */
@container simce-hub-search (max-width: 260px) {
    .simce-search--hero .simce-search__control {
        flex-direction: column;
        align-items: stretch;
    }

    .simce-search--hero .simce-search__field {
        flex: none;
        width: 100%;
    }

    .simce-search--hero .simce-scope {
        flex-wrap: wrap;
    }
}

@media (forced-colors: active) {
    .simce-hero .simce-search--hero {
        border: 1px solid CanvasText;
    }
}


/* =====================================================================
   R83 — The phone chart keeps its proportion, and the tile and the
   meeting dialog carry their own hierarchy (feature-resultados-simce)
   The legend stops outgrowing the plot it annotates (annotation-scale
   rules inside the phone media block above), the publication state of a
   tile stops being the lightest line on the card, and the meeting
   dialog title sets its own leading instead of inheriting the page h2
   rhythm. Append-only block; every rule above predates this work.
   ===================================================================== */

/* The publication state qualifies the headline number: it says the score can still change. It
   shares the weight and ink of the delta sentence below it, so state + delta read as one band of
   "what this number means", clearly stronger than the "puntos · 2024" line above them. 600, not
   800: 800 is the score itself, and the qualification must not compete with the number. */
.simce-tile__state {
    font-weight: 600;
    color: var(--simce-ink);
}

/* The dialog title sets its own leading. With the size inline and the line-height inherited from
   the page h2, a 18.4px word sat in a 46px line box and the 375px head broke into three airy
   lines next to the Cerrar button. Weight 800 matches the sheet's own h2 grammar; one step down
   where the head is narrowest keeps the flagship promise in two deliberate lines. */
.simce-modal__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    text-wrap: balance;
}

@media (max-width: 480px) {
    .simce-modal__title {
        font-size: 1.05rem;
    }
}


/* =====================================================================
   R89 — The audit table gets the width of the row it is read in, and the
   phone stops breaking words (feature-resultados-simce)
   The equivalent table of a chart runs 7–13 columns. On a desktop card it
   lived in 537px: a 1,683px table dragged 1,146px, the fourth header was cut
   mid-word, and the Estado column collapsed to its longest word (89px),
   wrapping its sentence across six lines into 140px rows. On the phone the
   4rem floor with hyphens:auto and overflow-wrap:anywhere broke every word
   mid-syllable ("Prome-dio", "Signifi-cancia") into 181px rows.
   Append-only block; every rule above predates this work.
   ===================================================================== */

/* ---- Desktop: the state that needs width is the state that gets it ---- */

/*
 * Opening the data table claims the whole grid row, exactly as the print document already answers
 * this table ("Two 48% cards cannot hold the 8-10 column audit table"). Collapsed, the card stays a
 * compact half-width small multiple; open, the audit table reads at the container's full width and
 * the drag shrinks from over a thousand pixels to none on a 9-column sheet.
 */
@media (min-width: 768px) {
    .simce-grid > .simce-chart:has(.simce-table-toggle[open]) {
        grid-column: 1 / -1;
    }

}

/*
 * Audit-table headers and body cells wrap in whole words at every width. A nowrap header made the
 * width of the whole table ("Promedio de la región de Arica y Parinacota" is 300px on one line) and
 * squeezed the only wrappable column to its longest word; wrapping headers, the columns size to the
 * numbers under them and Estado takes the space its sentence needs. break-word, never anywhere:
 * a word is broken only when it alone cannot fit its column, which the column floors below prevent.
 */
.simce-table-toggle .simce-table thead th {
    white-space: normal;
    text-wrap: balance;
}

.simce-table-toggle .simce-table td {
    white-space: normal;
    overflow-wrap: break-word;
}

/* Estado's own floor at desktop: without it the auto layout hands the surplus to the header-heavy
 * columns and the publication-state sentence wraps four lines into the tallest rows on the sheet.
 * 15rem holds its longest sentence ("La fuente oficial no informa el estado de esta publicación.")
 * to two lines while the collapsed card keeps its overflow, so the scroll hatch stays alive. */
@media (min-width: 768px) {
    .simce-table-toggle .simce-table td:last-child {
        min-width: 15rem;
    }
}

/* ---- Phone: whole words, columns sized to the words they hold ---- */

/*
 * Below 768 a table either declares its columns or sizes them by the words they hold. A table with a
 * <colgroup> (a history table, the establishments matrix) lays out fixed at its designed widths and
 * overflows its scrolling region on purpose. Every other table keeps the automatic layout, whose
 * narrowest column is its longest word, so when the words do not fit the table overflows its region
 * instead of splitting them. Equal shares of a 100% fixed layout would squeeze a six-column table to
 * ~52px columns that split their words while the region never scrolls. break-word keeps the safety
 * (a word that alone cannot fit its column still breaks rather than overflowing); hyphens stay off
 * because the painted hyphenation was not Spanish ("Prome-dio", "Ari-ca" are not syllable breaks).
 */
@media (max-width: 767.98px) {
    .simce-table:has(> colgroup) {
        table-layout: fixed;
    }

    .simce-table th,
    .simce-table td {
        white-space: normal;
        overflow-wrap: break-word;
        hyphens: manual;
    }

    /*
     * History table floors, whatever the number of reference columns. Each fits its longest real
     * word — "Porcentaje", "socioeconómico", "significativa", "Estudiantes" — and Estado keeps enough room
     * for its sentence to wrap in two or three deliberate lines.
     */
    .simce-table-toggle .simce-col--year         { width: 4rem; }
    .simce-table-toggle .simce-col--score        { width: 5.5rem; }
    .simce-table-toggle .simce-col--ref          { width: 7.75rem; }
    .simce-table-toggle .simce-col--change       { width: 5rem; }
    .simce-table-toggle .simce-col--significance { width: 7rem; }
    .simce-table-toggle .simce-col--students     { width: 6rem; }
    .simce-table-toggle .simce-col--state        { width: 12rem; }

    /* The distribution sizes by its content, but at its narrowest the series label and the base
     * sentence stack into rows taller than the screen. A floor hands them the width instead. */
    .simce-distribution-table {
        min-width: 36rem;
    }
}

/* ---- The explained absence of a reference value ---- */

/*
 * A suppressed reference prints as a dash with its year kept in the row; the register phrase of the
 * read model's reason code is named under the table (column, year, phrase), so the dash is an
 * answered absence instead of a hole the reader attributes to our data being patchy.
 */
.simce-table-toggle ul.simce-note {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
}


/* =====================================================================
   R96 — the reading fills its width, and a blocked verification keeps
   its way forward. Append-only block; every rule above predates this
   work and stands untouched.
   ===================================================================== */

/*
 * The reading grid used to fix four tracks of ~276px: with two schools the row
 * occupied half of 1148px and each card's tiles shrank to 117px, where a label
 * wrapped to three lines. auto-fit collapses the tracks nobody occupies, so the
 * cards present share the full width; the 420px floor keeps a phone to one
 * column (min(100%, …) never overflows its container).
 */
.simce-reading {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

/* A lone card (or the odd one out on a three-card row) never stretches wall to
   wall: it keeps the width two cards share on a full row. */


/* The retry offered when the verification behind an action never loaded: the
   reason in the register of the notes, the action again right under it. */
.simce-verif {
    margin: 0.6rem 0 0;
}

.simce-verif__hint {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--simce-ink-soft);
}

.simce-verif[hidden] {
    display: none;
}

/* ---- HUX3 — school reading: latest by level, history subordinate, references optional ---- */

.simce-level-summary {
    margin: 0 0 1.25rem;
}

.simce-level-summary__title {
    margin: 0.4rem 0 0.45rem;
    font-size: 1.05rem;
}

.simce-older {
    margin: 0.35rem 0 0.2rem;
}

.simce-older > summary,
.simce-historic > summary,
.simce-table-toggle > summary {
    min-height: 2rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.simce-older > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--simce-ink-soft);
}

.simce-tile__fact {
    display: block;
    margin-top: 0.28rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--simce-ink-soft);
    max-width: 37.2em;
}

.simce-standing--inactive {
    border-left: 3px solid var(--simce-ink-soft);
    padding-left: 0.7rem;
}

.simce-modes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 0 0 1rem;
}

.simce-modes__link {
    font-weight: 700;
    color: var(--simce-brand-ink);
}

.simce-modes__refs {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    cursor: pointer;
}

.simce-modes__refs input {
    width: 1.75rem;
    height: 1.75rem;
    accent-color: var(--simce-brand-ink);
}

.simce-readouts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.simce-point {
    position: static;
    min-height: 2rem;
    margin: 0;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--simce-border-strong);
    border-radius: 999px;
    background: var(--simce-surface-alt);
    color: var(--simce-ink);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.simce-point:focus-visible {
    outline: 2px solid var(--simce-focus);
    outline-offset: 2px;
}

.simce-point__tip {
    position: static;
}

.simce:has(#simce-show-refs:not(:checked)) .simce-chart__end-label[data-simce-kind="benchmark"],
.simce:has(#simce-show-refs:not(:checked)) .simce-chart__web-marker[data-simce-kind="benchmark"],
.simce:has(#simce-show-refs:not(:checked)) .simce-chart__connectors line[data-simce-kind="benchmark"],
.simce:has(#simce-show-refs:not(:checked)) .simce-ref-col,
.simce:has(#simce-show-refs:not(:checked)) .simce-chart__line[class*="simce-ref-"],
.simce:has(#simce-show-refs:not(:checked)) .simce-chart__marker[data-simce-kind="benchmark"],
.simce:has(#simce-show-refs:not(:checked)) .simce-legend [data-simce-kind="benchmark"] {
    display: none;
}

@media (max-width: 575.98px) {
    .simce-tile__fact {
        font-size: 0.8rem;
    }

    .simce-modes {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ---- HUX4 — the establishments matrix on a phone ---- */

/*
 * The school and its result are the first two columns, so a 375px screen reads both before any
 * scroll; the year follows, and the series, commune and RBD scroll in from the right. The school stays
 * pinned while they do, so a detail is never read without its row. The widths hold the longest real
 * words ("Administracion", "Independencia") whole, and together they overflow the region on purpose:
 * its scroll hint is true.
 */
@media (max-width: 767.98px) {
    .simce-members-table .simce-col--name   { width: 10.5rem; }
    .simce-members-table .simce-col--score  { width: 6rem; }
    .simce-members-table .simce-col--year   { width: 4rem; }
    .simce-members-table .simce-col--series { width: 12rem; }
    .simce-members-table .simce-col--town   { width: 7.5rem; }
    .simce-members-table .simce-col--rbd    { width: 4.5rem; }

    .simce-members-table thead th:first-child,
    .simce-members-table tbody th {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: inset -1px 0 0 var(--simce-border-strong);
    }
}

/* ---- HSC2 — comparing a live sheet with other schools or networks, in place ---- */


/* A disclosure, not a primary action: it opens the search and the cards below, on this page. */


/* The live regions under the cards stay in the tree while silent and only take room once they speak.
   The search's own region keeps its line, so opening the suggestions never grows the page. */


/* The retry that does not depend on any card, under the region that says what failed. */


/* The suggestion's one action is a button here (adding stays on the page); it reads as the hub's link. */
.simce button.simce-result__link {
    grid-column: 2;
    grid-row: var(--simce-result-row);
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0.5rem 0.8rem 0.5rem 0.25rem;
    border: 0;
    border-bottom: 1px solid var(--simce-border);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.simce button.simce-result__link[data-selected="true"] {
    background: var(--simce-surface-alt);
}

.simce button.simce-result__link:hover .simce-result__action,
.simce button.simce-result__link:focus-visible .simce-result__action,
.simce button.simce-result__link[data-selected="true"] .simce-result__action {
    background: var(--simce-brand);
}

.simce button.simce-result__link:focus-visible {
    outline: 3px solid var(--simce-brand-ink);
    outline-offset: -3px;
}

/* Already in the comparison, or answering an older term: visibly not a way in. */
.simce button.simce-result__link[aria-disabled="true"] {
    cursor: default;
}

.simce button.simce-result__link[aria-disabled="true"] .simce-result__action,
.simce button.simce-result__link[aria-disabled="true"]:hover .simce-result__action {
    background: var(--simce-surface-alt);
    color: var(--simce-ink-soft);
    box-shadow: inset 0 0 0 1px var(--simce-border-strong);
}

@media (max-width: 36rem) {
    .simce button.simce-result__link {
        grid-column: 1;
        grid-row: calc(var(--simce-result-row) * 2);
        padding: 0.2rem 0.8rem 0.6rem calc(0.8rem + 4px);
    }
}


/* At 320px two tiles per card broke every label into three lines; one per row keeps each readable. */


@media (forced-colors: active) {

    .simce button.simce-result__link[aria-disabled="true"] .simce-result__action {
        border: 1px solid ButtonText;
    }


}


/* =====================================================================
   HB1 — Focused reading (feature-resultados-simce, ux-benchmark-blueprint)
   One measurement at a time: a compact sheet header, the context bar, the
   result beside its history, then the rest on demand. Report surfaces are
   white on a light neutral page; purple is the brand accent, teal only
   marks focus of attention. Append-only: the rules above keep serving the
   hub, the methodology and the printable report.
   ===================================================================== */

.simce {
    --simce-page: #f5f6f8;
    --simce-line: #e3e6ec;
    --simce-level-1: #d9c8e6;
    --simce-level-2: #9a6cb8;
    --simce-level-3: #4f2d66;
    --simce-down: #9a3412;
    --simce-up: #0f7b66;
}

/* ---- Compact sheet header: brand, way back, identity ---- */

body.simce-page {
    background: var(--simce-page, #f5f6f8);
}

.simce-topbar {
    background: #5d3874;
}

.simce-topbar__row {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
}

.simce-topbar__brand {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0;
}

.simce-topbar__brand img {
    display: block;
    width: 112px;
    height: auto;
}

.simce-topbar__brand:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Everything under the topbar reads on the report surface, not on a purple band. */
body.simce-page .simce-hero-leadin,
body.simce-page .simce-hero {
    background: var(--simce-surface);
    background-image: none;
    color: var(--simce-ink);
    min-height: 0;
}

body.simce-page .simce-hero-leadin {
    padding: 0.85rem 0 0;
}

body.simce-page section.simce-hero,
body.simce-page .simce-hero,
body.simce-page .simce-hero-leadin + .simce > .simce-hero {
    padding: 0.35rem 0 1rem;
}

body.simce-page .simce-back {
    margin: 0;
    color: var(--simce-brand-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

body.simce-page .simce-back::before {
    content: "←";
    display: inline-block;
    margin-right: 0.35rem;
    text-decoration: none;
}

body.simce-page .simce-hero a,
body.simce-page .simce-hero-leadin a,
body.simce-page .simce-hero a:hover,
body.simce-page .simce-hero-leadin a:hover {
    color: var(--simce-brand-ink);
}

body.simce-page .simce-hero h1 {
    color: var(--simce-ink);
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 0.25rem;
    text-wrap: balance;
}

body.simce-page .simce-hero p,
body.simce-page .simce-hero .simce-note {
    color: var(--simce-ink-soft);
}

.simce-hero__identity {
    font-size: 0.9375rem;
    margin: 0 0 0.35rem !important;
}

.simce-hero__more > summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.simce-hero__more[open] > summary::after {
    transform: translateY(1px) rotate(-135deg);
}

.simce-hero__more > summary::-webkit-details-marker {
    display: none;
}

.simce-hero__more > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    cursor: pointer;
    color: var(--simce-brand-ink);
    font-size: 0.875rem;
    font-weight: 600;
}

body.simce-page .simce-hero .simce-identity {
    margin: 0.35rem 0 0;
    gap: 0.35rem 1.25rem;
}

/* Inside the disclosure the facts are a plain line list, not a row of chips. */
body.simce-page .simce-hero .simce-identity li {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--simce-ink-soft);
    font-size: 0.875rem;
}

body.simce-page .simce-hero .simce-identity li b {
    color: var(--simce-ink);
}

/* The section bar: one line that scrolls on its own at any width. */
body.simce-page .simce-sections {
    overflow: visible;
}

body.simce-page .simce-sections > .simce-container {
    overflow-x: auto;
    scrollbar-width: thin;
    padding-inline: 1.5rem;
}

body.simce-page .simce-sections::before,
body.simce-page .simce-sections::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.25rem;
    display: grid;
    place-items: center;
    background: var(--simce-surface);
    color: var(--simce-brand-ink);
    pointer-events: none;
    font-weight: 800;
}
body.simce-page .simce-sections[data-simce-scroll-start="false"]::before { content: "‹"; left: 0; }
body.simce-page .simce-sections[data-simce-scroll-end="false"]::after { content: "›"; right: 0; }

.simce .simce-context[data-simce-context-sticky] {
    position: fixed;
    top: var(--simce-nav-offset, 3.25rem);
    left: var(--simce-context-left);
    width: var(--simce-context-width);
    z-index: 9;
    background: var(--simce-surface);
    box-shadow: 0 8px 12px rgba(47, 55, 71, 0.08);
    outline: 8px solid var(--simce-surface);
}
.simce-context__compact,
.simce-context [data-simce-sticky-done] { display: none; }
.simce-context[data-simce-context-sticky] .simce-context__compact {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    grid-area: compact;
}
.simce-context__compact [data-simce-sticky-summary] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    color: var(--simce-ink);
}
.simce-context__compact .simce-btn { flex: none; padding-inline: 0.65rem; }
.simce-context[data-simce-context-sticky]:not([data-simce-context-expanded]) { display: block; }
.simce-context[data-simce-context-sticky][data-simce-context-expanded] {
    grid-template-areas: "compact compact" "level year" "subject subject" "variant variant" "done done";
}
.simce-context[data-simce-context-sticky]:not([data-simce-context-expanded]) > .simce-context__field { display: none; }
.simce-context[data-simce-context-sticky][data-simce-context-expanded] [data-simce-sticky-done] {
    display: inline-flex;
    grid-area: done;
    justify-self: start;
}
.simce-context-placeholder[hidden] { display: none; }

.simce:has(.simce-sections) { overflow-x: visible; }
.simce .simce-section,
.simce .simce-actions,
.simce [data-simce-deep],
.simce :is(a, button, input, select, summary) {
    scroll-margin-top: calc(var(--simce-sticky-offset, 3.25rem) + 1rem);
}

body.simce-page .simce-sections ul {
    flex-wrap: nowrap;
    white-space: nowrap;
    padding: 0.35rem 0;
}

body.simce-page .simce-sections a {
    font-size: 0.875rem;
    padding: 0.65rem 0.75rem;
    min-height: 44px;
}

html:has(body.simce-page .simce-sections) {
    --simce-sticky-offset: 2.75rem;
}

body.simce-page main.simce-container {
    padding-bottom: 2rem;
}

/* The page's sections read as report blocks on the neutral page. */
/* The marketing stylesheet paints every <section> white; on a sheet the page is the neutral surface. */
body.simce-page .simce section {
    background: transparent;
}

body.simce-page .simce-section {
    border-bottom: 0;
    padding: 40px 0 0;
}
body.simce-page .simce-section + .simce-meeting-band {
    margin-top: 64px; padding: 24px; background: var(--simce-surface-alt);
}
@media (max-width: 991.98px) {
    body.simce-page .simce-section { padding-top: 24px; }
    body.simce-page .simce-section + .simce-meeting-band { margin-top: 40px; padding: 24px; }
}

/* With the focused reading, the "Resultado" heading stays for structure; the card is the visible title. */
body.simce-page .simce-section:has(> .simce-focus) > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- The context bar ---- */

.simce-focus {
    --simce-card-pad: 1.25rem;
}

.simce-focus__bar {
    margin: 0 0 0.75rem;
}

.simce-focus__summary {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.simce-context {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "level year" "subject subject" "variant variant";
    gap: 0.5rem 0.75rem;
}

.simce-context__field:nth-child(1) { grid-area: level; }
.simce-context__field:nth-child(2) { grid-area: subject; }
.simce-context__field:nth-child(3) { grid-area: year; }
.simce-context__field:nth-child(4) { grid-area: variant; }

.simce-context__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.simce-context__field label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--simce-ink-soft);
}

.simce-context select {
    width: 100%;
    min-height: 44px;
    padding: 0.45rem 2rem 0.45rem 0.75rem;
    border: 1px solid var(--simce-border-strong);
    border-radius: 8px;
    /* A flat fill, so contrast is measurable; the chevron is the field's own mark below. */
    background: var(--simce-surface);
    color: var(--simce-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.simce-context select:hover {
    border-color: var(--simce-brand);
}

.simce-context__field {
    position: relative;
}

.simce-context .fw-selwrap {
    display: block;
    width: 100%;
}

.simce-context .fw-select-ico {
    width: 18px;
    height: 18px;
    color: var(--simce-ink-soft);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.simce-context select:disabled {
    opacity: 1;
    color: var(--simce-ink);
    cursor: default;
}

@media (min-width: 768px) {
    .simce-context {
        grid-template-columns: minmax(9rem, 12rem) minmax(14rem, 22rem) minmax(7rem, 9rem) minmax(10rem, 16rem);
        grid-template-areas: "level subject year variant";
        justify-content: start;
    }
}

/* ---- Result beside its history ---- */

.simce-focus__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.simce-focus__panels { min-width: 0; }
.simce-focus__panels > .simce-panel:not([hidden]) { height: 100%; }

@media (min-width: 992px) {
    .simce-focus__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

.simce-result-card,
.simce-panel {
    background: var(--simce-surface);
    border: 1px solid var(--simce-line);
    border-radius: 12px;
    padding: var(--simce-card-pad);
    box-shadow: 0 1px 2px rgba(47, 55, 71, 0.05);
    min-width: 0;
}

.simce-result-card > * {
    margin: 0;
}

.simce-result__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--simce-ink-soft);
}

.simce-result__score {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.15rem !important;
    line-height: 1;
}

.simce-result__score strong {
    font-size: 3.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--simce-ink);
    font-variant-numeric: tabular-nums;
}

.simce-result__score span {
    font-size: 1rem;
    color: var(--simce-ink-soft);
}

.simce-result__state {
    margin-top: 0.5rem !important;
    font-size: 0.875rem;
    color: var(--simce-ink-soft);
}

.simce-result__change {
    margin-top: 0.6rem !important;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--simce-ink);
}

.simce-result__change::before {
    display: inline-block;
    width: 1.1em;
    font-size: 0.85em;
    color: var(--simce-ink-muted);
}

.simce-result__change[data-direction="down"]::before { content: "▼"; }
.simce-result__change[data-direction="up"]::before { content: "▲"; }
.simce-result__change[data-direction="flat"]::before { content: "■"; color: var(--simce-ink-muted); }

.simce-result__change[data-direction="down"][data-tone="down"]::before { color: var(--simce-down); }
.simce-result__change[data-direction="up"][data-tone="up"]::before { color: var(--simce-up); }

.simce-result__significance {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--simce-ink-soft);
}

.simce-result__significance[data-tone="down"] { color: var(--simce-down); }
.simce-result__significance[data-tone="up"] { color: var(--simce-up); }

.simce-result__note,
.simce-result__weighting,
.simce-result__n,
.simce-result__coverage {
    margin-top: 0.35rem !important;
    font-size: 0.875rem;
    color: var(--simce-ink-soft);
}

.simce-result__coverage {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--simce-ink);
}

.simce-result__missing {
    margin-top: 0.5rem !important;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    background: var(--simce-surface-alt);
    color: var(--simce-ink);
}

/* Sub-blocks of the card share one rhythm: a quiet heading, rows of label and value. */
.simce-result__refs,
.simce-standards,
.simce-dispersion {
    margin-top: 1rem !important;
    padding-top: 0.85rem;
    border-top: 1px solid var(--simce-line);
}

.simce-result-card h3,
.simce-panel__title,
.simce-deep__section h3,
[data-simce-deep-context] h4 {
    margin: 0 0 0.45rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--simce-ink);
}

.simce-result__refs ul,
.simce-standards ul,
.simce-dispersion ul,
[data-simce-deep-context] ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
}

.simce-result__refs li,
.simce-standards li,
.simce-dispersion li,
[data-simce-deep-context] li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    max-width: none;
    padding: 0.2rem 0;
    font-size: 0.9375rem;
    color: var(--simce-ink-soft);
}

.simce-result__refs li strong,
.simce-standards li strong,
.simce-dispersion li strong,
[data-simce-deep-context] li strong {
    flex: 0 0 auto;
    color: var(--simce-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.simce-result-card .simce-note {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
}

/* The levels: one stacked bar from three published values, and the values themselves as text. */
.simce-standards__bar {
    display: flex;
    gap: 2px;
    height: 0.875rem;
    margin: 0.2rem 0 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--simce-surface-alt);
}

.simce-standards__bar > span {
    flex: 0 0 var(--w, 0%);
    min-width: 0;
    background: var(--simce-level-1);
}

.simce-standards [data-code="ELEMENTAL"] { --simce-level: var(--simce-level-2); }
.simce-standards [data-code="ADECUADO"] { --simce-level: var(--simce-level-3); }
.simce-standards [data-code="INSUFICIENTE"] { --simce-level: var(--simce-level-1); }
.simce-standards__bar > span[data-code] { background: var(--simce-level); }

.simce-standards li > span::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.45rem;
    border-radius: 2px;
    background: var(--simce-level, var(--simce-border-strong));
    vertical-align: -0.05rem;
}

/* The spread: the middle half of establishments as a band on the full range, the median as a tick. */
.simce-dispersion__range {
    position: relative;
    height: 0.875rem;
    margin: 0.2rem 0 0.5rem;
    border-radius: 999px;
    background: var(--simce-surface-alt);
    box-shadow: inset 0 0 0 1px var(--simce-line);
}

.simce-dispersion__box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--from, 0%);
    width: calc(var(--to, 0%) - var(--from, 0%));
    border-radius: 999px;
    background: var(--simce-level-2);
}

.simce-dispersion__median {
    position: absolute;
    top: -0.2rem;
    bottom: -0.2rem;
    left: var(--mid, 50%);
    width: 3px;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--simce-level-3);
}

/* Compact result metadata keeps the explanation beside the publication state. */
.simce-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.simce-result__meta > .simce-result__n { margin: 0; }
.simce-preliminary { font-size: 13px; color: var(--simce-ink); }
.simce-preliminary > summary { min-height: 44px; display: flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--simce-surface-alt); border: 1px solid var(--simce-line); cursor: pointer; }
.simce-preliminary p { margin: 8px 0; max-width: 19.2em; }
.simce-focus__metadata { display: flex; flex-wrap: wrap; align-items: start; gap: 16px 24px; margin-top: 24px; }
.simce-focus__metadata > p { flex: 1 1 22rem; margin: 0; }
.simce-focus__metadata .simce-measures { margin: 0; }
.simce #simce-seccion-metodologia .simce-identity li { color: var(--simce-ink-soft); }

/* ---- History panel ---- */

.simce-panel__title {
    margin-bottom: 0.25rem;
}

.simce-panel .simce-chart,
.simce-deep__panel .simce-chart {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
}

.simce-panel .simce-chart figcaption,
.simce-deep__panel .simce-chart figcaption {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--simce-ink-soft);
}

.simce-panel .simce-note {
    font-size: 0.8125rem;
    margin: 0.2rem 0 0.35rem;
}

/* Plot and percent annotations share one box, with a separate gutter for direct labels. */
.simce-chart-frame { position: relative; }
.simce-chart__end-labels { display: grid; gap: 8px; margin-top: 16px; }
.simce-chart__end-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; line-height: 16px; color: var(--simce-ink);
    font-variant-numeric: tabular-nums;
}
.simce-chart__end-label svg { width: 10px; height: 10px; flex: 0 0 10px; }
.simce-chart__connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.simce-chart__connectors line { stroke: var(--simce-ink-soft); stroke-width: 1; }
.simce-chart__web-markers { position: absolute; inset: 0; pointer-events: none; }
.simce-chart__web-marker { width: 16px; height: 16px; position: absolute; transform: translate(-50%, -50%); overflow: visible; }
.simce-chart__web-marker path { fill: inherit; stroke: inherit; }
.simce-chart[data-simce-chart-presentation="web"] .simce-chart__marker { visibility: hidden; }
.simce-chart__web-marker[data-simce-active] { filter: drop-shadow(0 0 2px var(--simce-ink)); }
.simce-chart__targets { position: absolute; inset: 0; pointer-events: none; }
.simce-chart__targets .simce-point.simce-point--plot {
    position: absolute; width: 44px; height: 44px; min-height: 44px;
    padding: 0; transform: translate(-50%, -50%); border: 0;
    background: transparent; pointer-events: auto; z-index: 2;
}
.simce-point--plot .simce-point__tip {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    min-width: max-content; max-width: 220px; padding: 8px 12px; border-radius: 8px;
    background: var(--simce-ink); color: #fff; font-size: 13px; line-height: 1.5;
    visibility: hidden; pointer-events: none;
}
/* Terminal tips open toward the plot, including before JS and while still hidden. */
.simce-point--plot[data-simce-tip-edge="start"] .simce-point__tip { left: 0; transform: none; }
.simce-point--plot[data-simce-tip-edge="end"] .simce-point__tip { left: auto; right: 0; transform: none; }
.simce-point--plot:hover .simce-point__tip,
.simce-point--plot:focus .simce-point__tip,
.simce-point--plot[aria-pressed="true"] .simce-point__tip { visibility: visible; }
.simce-point--plot[data-simce-tip-dismissed] .simce-point__tip { visibility: hidden; }
.simce-chart__equivalent > summary,
.simce-chart-help > summary,
.simce-preserved-data > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--simce-brand-ink); font-size: 13px; }
.simce-chart__equivalent .simce-point { min-height: 44px; }
.simce-chart__equivalent .simce-point[aria-pressed="true"] { background: var(--simce-brand-ink); color: #fff; border-color: var(--simce-brand-ink); }
.simce-chart__equivalent[hidden], .simce-chart__targets[hidden] { display: none; }
@media (min-width: 992px) {
    .simce-chart-frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 27%); gap: 16px; align-items: start; }
    /* The recent plot shares the card's available height; the full-history figure keeps its ratio. */
    .simce-focus__panels > .simce-panel:not([hidden]) { display: flex; flex-direction: column; }
    .simce-panel > .simce-chart:not(.simce-chart--single)[data-simce-chart-presentation="web"] {
        display: flex; flex-direction: column; flex: 1; min-height: 0; margin-bottom: 0;
    }
    .simce-panel > .simce-chart:not(.simce-chart--single)[data-simce-chart-presentation="web"] > .simce-chart-frame {
        flex: 1; min-height: 280px; max-height: 560px;
    }
    .simce-panel > .simce-chart:not(.simce-chart--single)[data-simce-chart-presentation="web"] .simce-chart-plot {
        height: 100%; min-height: 280px;
    }
    .simce-panel > .simce-chart:not(.simce-chart--single)[data-simce-chart-presentation="web"] .simce-chart__svg {
        position: absolute; inset: 0; height: 100%;
    }
    .simce-chart__end-labels { position: relative; margin-top: 0; align-content: center; }
    .simce-chart-frame[data-simce-label-layout="direct"] .simce-chart__end-label { position: absolute; left: 0; right: 0; }
}

/* The selected year stands out on the line and among the readouts. */
.simce-chart__marker[data-simce-active] {
    stroke: var(--simce-ink);
    stroke-width: 2.5;
}

.simce-point[data-simce-active] {
    border-color: var(--simce-brand-ink);
    color: var(--simce-brand-ink);
    font-weight: 700;
}

.simce-panel .simce-point,
.simce-deep__panel .simce-point {
    border-color: var(--simce-line);
    background: var(--simce-surface);
    font-size: 0.8125rem;
}

/* Secondary disclosures inside the panel and under the grid: one quiet row each. */
.simce-panel .simce-table-toggle,
.simce-deep__panel .simce-table-toggle {
    margin-top: 0.6rem;
    border-top: 1px solid var(--simce-line);
    padding-top: 0.35rem;
}

.simce-panel .simce-table-toggle > summary,
.simce-deep__panel .simce-table-toggle > summary,
.simce-deep > summary,
.simce-measures > summary {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--simce-brand-ink);
}

.simce-deep,
.simce-measures {
    margin-top: 0.75rem;
    padding: 0.15rem var(--simce-card-pad);
    background: var(--simce-surface);
    border: 1px solid var(--simce-line);
    border-radius: 12px;
}

.simce-deep[open],
.simce-measures[open] {
    padding-bottom: 0.85rem;
}

[data-simce-deep-context] > div + div {
    margin-top: 0.85rem;
}

/* One value column for the IDPS and performance lists, the width of the charts above them. */
.simce-deep [data-simce-deep-context] ul {
    max-width: 40rem;
}

/* ---- Socio-economic group, in the result card beside the territorial references ---- */

.simce-result__gse {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--simce-line);
}

.simce-result__gse ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.simce-result__gse li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 0;
    font-size: 0.9375rem;
    color: var(--simce-ink-soft);
}

.simce-result__gse li strong {
    flex: 0 0 auto;
    color: var(--simce-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The figure and its verdict stay in the value column: beside the label when both fit, on the next line
   otherwise (a narrow phone), never squeezing the label into broken words. */
.simce-result__gse li.simce-gse-compare {
    flex-wrap: wrap;
}

.simce-result__gse li.simce-gse-compare > span:first-child {
    flex: 1 1 12rem;
}

.simce-result__gse li.simce-gse-compare > strong {
    margin-left: auto;
}

.simce-gse-compare__verdict {
    flex-basis: 100%;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
}

.simce-gse-compare__verdict[data-code="significantly_below"] { color: var(--simce-down); }
.simce-gse-compare__verdict[data-code="significantly_above"] { color: var(--simce-up); }

.simce-measures__level {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--simce-ink);
}

.simce-measures ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
}

.simce-measures li {
    max-width: none;
    font-size: 0.875rem;
}

.simce-measures [aria-current="true"] {
    font-weight: 700;
    text-decoration: none;
    color: var(--simce-ink);
}

.simce-linklike {
    padding: 0;
    border: 0;
    background: none;
    color: var(--simce-brand-ink);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.simce-focus__links {
    margin: 0.85rem 0 0;
    font-size: 0.875rem;
}

.simce-focus__qualifier,
body.simce-page .simce-data-age {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--simce-ink-soft);
    max-width: 48em;
}

/* ---- What each level means, beside the percentages ---- */

.simce-levels-help {
    margin-top: 0.35rem;
}

.simce-levels-help > summary,
.simce-idps-definition > summary,
.simce-idps-section .simce-chart-data > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--simce-brand-ink);
}

.simce-levels-help > summary::-webkit-details-marker,
.simce-idps-definition > summary::-webkit-details-marker,
.simce-idps-section .simce-chart-data > summary::-webkit-details-marker,
.simce-deep > summary::-webkit-details-marker {
    display: none;
}

/* One chevron grammar for the disclosures of the reading: down when closed, up when open. */
.simce-levels-help > summary::after,
.simce-idps-definition > summary::after,
.simce-idps-section .simce-chart-data > summary::after,
.simce-deep > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 120ms ease-out;
}

.simce-levels-help[open] > summary::after,
.simce-idps-definition[open] > summary::after,
.simce-idps-section .simce-chart-data[open] > summary::after,
.simce-deep[open] > summary::after {
    transform: translateY(2px) rotate(-135deg);
}

.simce-levels-help__list {
    margin: 0 0 0.25rem;
}

.simce-levels-help__list > div {
    padding: 0.4rem 0;
    border-top: 1px solid var(--simce-line);
}

.simce-levels-help__list > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.simce-levels-help__list dt {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--simce-ink);
}

.simce-levels-help__list dt::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.45rem;
    border-radius: 2px;
    background: var(--simce-level, var(--simce-border-strong));
    vertical-align: -0.05rem;
}

.simce-levels-help__list dd {
    margin: 0.1rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--simce-ink-soft);
}

/* ---- Profundizar: everything beyond the first reading, closed until asked for ---- */

.simce-deep > summary {
    gap: 0.6rem;
    min-height: 44px;
    font-weight: 700;
}

.simce-deep > summary::after {
    margin-left: auto;
}

.simce-deep__section {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--simce-line);
}

.simce-deep__section > .simce-note:first-of-type {
    margin-top: 0;
}

.simce-deep__links {
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--simce-line);
    font-size: 0.875rem;
}

/* Levels by year: one bar per year, drawn only from a complete published distribution. */
.simce-levels-history {
    display: grid;
    gap: 0.3rem;
    max-width: 40rem;
    margin: 0.2rem 0 0.5rem;
    padding: 0;
    list-style: none;
}

.simce-levels-history > li {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    max-width: none;
    margin: 0;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--simce-ink-soft);
}

.simce-levels-history > li[data-simce-active] {
    background: var(--simce-surface-alt);
}

.simce-levels-history > li[data-simce-active] .simce-levels-history__year {
    font-weight: 700;
    color: var(--simce-ink);
}

.simce-levels-history .simce-standards__bar {
    margin: 0;
}

.simce-levels-history__partial {
    font-size: 0.8125rem;
    color: var(--simce-ink-muted);
}

.simce-levels-history [data-code="INSUFICIENTE"],
[data-simce-standards-history] thead th:nth-child(2) { --simce-level: var(--simce-level-1); }
.simce-levels-history [data-code="ELEMENTAL"],
[data-simce-standards-history] thead th:nth-child(3) { --simce-level: var(--simce-level-2); }
.simce-levels-history [data-code="ADECUADO"],
[data-simce-standards-history] thead th:nth-child(4) { --simce-level: var(--simce-level-3); }

/* The table below the bars is also their legend: each level column carries its colour. */
[data-simce-standards-history] thead th:nth-child(n/**/+2)::before {
    content: "";
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    margin-right: 0.35rem;
    border-radius: 2px;
    background: var(--simce-level);
    vertical-align: -0.05rem;
}

@media (max-width: 575.98px) {
    .simce-levels-history > li {
        grid-template-columns: 5.75rem minmax(0, 1fr);
        gap: 0.5rem;
    }
}

@media print {
    .simce-deep:not([open]) > :not(summary),
    .simce-levels-help:not([open]) > :not(summary) {
        display: block !important;
    }
}

/* ---- Comparison: the change of each school, on request ---- */


/* A switch reads as on: stronger border, tinted surface and a check before its label. */

[data-simce-members-details][aria-pressed="true"] {
    border-color: var(--simce-brand-ink);
    background: var(--simce-surface-alt);
}


[data-simce-members-details][aria-pressed="true"]::before {
    content: "";
    width: 0.35rem;
    height: 0.7rem;
    margin-right: 0.15rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.simce-tile__change {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--simce-ink);
}

.simce-tile__change--absent {
    font-weight: 400;
    color: var(--simce-ink-soft);
}

/* ---- Aligned network matrix: exact context once, optional school details ---- */
.simce [data-simce-members-aligned] > .simce-members-table col:nth-child(3),
.simce [data-simce-members-aligned] > .simce-members-table col:nth-child(4),
.simce [data-simce-members-aligned] > .simce-members-table tr > :nth-child(3),
.simce [data-simce-members-aligned] > .simce-members-table tr > :nth-child(4),
.simce-members-table[data-simce-members-aligned] col:nth-child(3),
.simce-members-table[data-simce-members-aligned] col:nth-child(4),
.simce-members-table[data-simce-members-aligned] tr > :nth-child(3),
.simce-members-table[data-simce-members-aligned] tr > :nth-child(4) { display: none; }
.simce-members-table[data-simce-members-enhanced]:not([data-simce-members-details-open]) col:nth-child(n/**/+5),
.simce-members-table[data-simce-members-enhanced]:not([data-simce-members-details-open]) tr > :nth-child(n/**/+5) { display: none; }
.simce-members-table[data-simce-members-aligned] .simce-col--name,
.simce-members-table[data-simce-members-aligned] .simce-col--score { width: auto; }
.simce-members-table[data-simce-members-aligned] tr > :nth-child(2) { width: 12rem; }
.simce-members-window { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1rem 0 0; }
.simce-members-window[hidden], .simce-members-scale[hidden] { display: none; }
.simce-members-window .simce-note { margin: 0; }
.simce-members-scale { margin: 0.75rem 0 0; font-variant-numeric: tabular-nums; }
.simce-member-bar { display: block; position: relative; height: 6px; margin-top: 0.4rem; border-radius: 3px; background: var(--simce-border); }
.simce-member-bar > span { display: block; width: var(--simce-member-position); height: 100%; background: var(--simce-brand); border-radius: inherit; }
.simce-member-bar--single > span { position: absolute; left: 50%; width: 6px; transform: translateX(-50%); }


.simce-members-details {
    margin: 0.5rem 0 0;
}


@media (max-width: 575.98px) {
    .simce-members-table[data-simce-members-compact] {
        table-layout: auto;
    }

    .simce-members-table[data-simce-members-compact] col:nth-child(n/**/+3),
    .simce-members-table[data-simce-members-compact] tr > :nth-child(n/**/+3) {
        display: none;
    }

    .simce-members-table[data-simce-members-compact] .simce-col--name,
    .simce-members-table[data-simce-members-compact] .simce-col--score {
        width: auto;
    }

    .simce-members-table[data-simce-members-compact] tr > :nth-child(2) {
        width: 7.5rem;
        text-align: right;
        white-space: nowrap;
    }

    .simce-members-table[data-simce-members-compact] thead th:first-child,
    .simce-members-table[data-simce-members-compact] tbody th {
        position: static;
        box-shadow: none;
    }

    /* A compact table fits its region: the swipe hint would describe a table that is not there. */
    #simce-scroll-members:has(~ .simce-table-wrap > [data-simce-members-compact]) {
        display: none;
    }
}

@media (forced-colors: active) {
    .simce-levels-history .simce-standards__bar > span,
    [data-simce-standards-history] thead th:nth-child(n/**/+2)::before,
    .simce-levels-help__list dt::before {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
    }


    [data-simce-members-details][aria-pressed="true"] {
        border: 2px solid Highlight;
    }
}

/* ---- Actions after the value, and the comparison ---- */

body.simce-page .simce-actions{
    max-width: none;
}

body.simce-page .simce-actions {
    margin-top: 0;
    padding: 1rem var(--simce-card-pad, 1.25rem);
    border-color: var(--simce-line);
    border-radius: 12px;
}

body.simce-page .simce-actions .simce-btn {
    padding: 0.55rem 1.25rem;
    font-size: 0.9375rem;
}


/* ---- Network table: the search inside the loaded rows ---- */

.simce-member-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin: 0 0 0.6rem;
}

.simce-member-filter label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.simce-member-filter__input {
    flex: 1 1 14rem;
    max-width: 22rem;
    min-height: 44px;
}

.simce-member-filter__note {
    flex: 1 0 100%;
    margin: 0;
    font-size: 0.8125rem;
}

.simce-member-filter__note:empty {
    display: none;
}

.simce-members-retry {
    margin-top: 0.5rem;
}

.simce-members-table[aria-busy="true"] {
    opacity: 0.6;
}

/* ---- Phone ---- */

@media (max-width: 575.98px) {
    .simce-focus {
        --simce-card-pad: 1rem;
    }

    .simce-result__score strong {
        font-size: 2.75rem;
    }

    body.simce-page .simce-hero-leadin {
        padding-top: 0.6rem;
    }
}

@media print {
    .simce-topbar,
    .simce-context {
        display: none;
    }

    .simce-result-card,
    .simce-panel {
        box-shadow: none;
    }
}

@media (forced-colors: active) {
    .simce-standards__bar > span {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
    }

    .simce-standards li > span::before {
        forced-color-adjust: none;
    }
}

/* =====================================================================
   Comparison beside its controls: mirrored selectors, the sheet's own
   network, the comparison's link, loading shapes and change arrows.
   ===================================================================== */


/* Match the rounded ends of the network members control. */


.simce-members-scale,
.simce-members-window .simce-note,
.simce-member-filter__note { color: var(--simce-ink-soft); }
/* Reserved space keeps revealing the common scale to opacity alone. The member bar supplies its
   geometry; comparison uses a point rather than a fill, and a track with sufficient contrast. */


/* Share the header and location rows, so a badge, a wrapped name or a status below the
   result cannot offset the bars of neighbouring cards. Other readings keep their layout. */


@keyframes simce-compare-scale-in { from { opacity: 0; } to { opacity: 1; } }


.simce-hero__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.simce-hero__heading h1 { flex: 1; }
/* On a phone the section bar's «Comparar» and the comparison card already open the same panel; a third
   opener between the title and the school's identity line only splits them. */
@media (max-width: 575.98px) {
    .simce-hero__heading [data-simce-compare-open] { display: none !important; }
}


/* A long network name wraps: a softer corner keeps a two-line button from reading as a lozenge. */


/* Loading placeholders stay outside listbox options and data-table rows. */
.simce-results:has(.simce-search-skeleton:not([hidden])) { opacity: 1; }

.simce-search-skeleton {
    grid-column: 1 / -1;
    width: 100%;
    padding: 0.25rem 0.75rem;
}

.simce-loading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--simce-border);
}

.simce-loading-row > span {
    display: block;
    width: 60%;
    height: 0.875rem;
    border-radius: 4px;
    background: var(--simce-border);
    animation: simce-skeleton 1.2s ease-in-out infinite alternate;
}

.simce-loading-row > span:last-child { width: 22%; }
.simce-members-loading { padding: 0 0.75rem; }
.simce-search-skeleton[hidden], .simce-members-loading[hidden] { display: none; }

.simce [data-simce-search-loading] {
    height: 1.4em;
    overflow: hidden;
    clip-path: inset(50%);
}

.simce-enter { animation: simce-enter 180ms ease; }
@keyframes simce-enter { from { opacity: 0; } to { opacity: 1; } }

.simce .simce-btn { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }

/* A card waiting for its figures keeps the shape of one, so nothing jumps when they arrive. */


@keyframes simce-skeleton {
    from { opacity: 1; }
    to { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {

    .simce-loading-row > span,
    .simce-enter {
        animation: none;
    }
    .simce .simce-btn { transition: none; }
}

/* «Ver cambios» on a card reads like the change on the result card: an arrow before the figure. */
.simce-tile__change[data-direction]::before {
    display: inline-block;
    width: 1.1em;
    font-size: 0.85em;
}

.simce-tile__change[data-direction="down"]::before { content: "▼"; color: var(--simce-down); }
.simce-tile__change[data-direction="up"]::before { content: "▲"; color: var(--simce-up); }
.simce-tile__change[data-direction="flat"]::before { content: "■"; color: var(--simce-ink-muted); }

/* ---- Network table: whole network or only schools with a result ---- */

.simce-members-scope {
    margin: 0.5rem 0 0.75rem;
    max-width: 100%;
}
.simce-members-scope > button:first-child { border-radius: 999px 0 0 999px; }
.simce-members-scope > button:last-child { border-radius: 0 999px 999px 0; }

/* Rows of the previous measurement while the new ones load: present for the height, not for use. */
.simce-members-table tr[inert] {
    opacity: 0.45;
}

@media print {
    .simce-members-scope{
        display: none;
    }
}

/* TF-S: school peers, calendar absence and personal/social development. */
.simce-chart__no-measurement { fill: #eef0f3; }
.simce-chart__no-measurement-label { font-family: inherit; fill: var(--simce-chart-tick); font-size: 11px; }
/* Web text uses the same unscaled overlay as the ticks: the stretched SVG would condense it. */
.simce-chart[data-simce-chart-presentation="web"] .simce-chart__no-measurement-label { display: none; }
/* Narrow calendar bands use the same vertical label as the comparison and IDPS plots.
   It stays readable before JS binds; a measured wide band can keep the horizontal treatment. */
.simce-ann--no-measurement {
    background: #eef0f3;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center;
    margin-top: 0;
}
.simce-ann--no-measurement[data-simce-gap-bottom]:not([data-simce-gap-wide]) { top: auto !important; bottom: calc(7.5% + 40px); }
.simce-ann--no-measurement[data-simce-gap-wide] { transform: translateX(-50%); margin-top: 0; }
.simce-peer-summary { font-weight: 600; font-size: 1.1rem; margin: 12px 0; }
.simce-peer-scale { display: flex; gap: 8px; align-items: center; margin: 20px 0 30px; font-size: .8rem; }
.simce-peer-scale__line { height: 2px; position: relative; background: #b8bec8; flex: 1; }
.simce-peer-scale__mark { position: absolute; width: 10px; height: 10px; margin: -4px -5px; background: #7a4b96; border-radius: 50%; }
.simce-peer-scale__mark--square { background: #b45309; border-radius: 0; }
.simce-peer-scale__mark--triangle { background: #646b78; border-radius: 0; clip-path: polygon(50% 0,100% 100%,0 100%); }
[data-simce-peer-reading] h4 { font-size: .95rem; margin: 18px 0 8px; }
.simce-result__refs li.simce-peer-reference { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: 0; }
.simce-peer-reference > .simce-note { grid-column: 1 / -1; }
.simce-peer-count a { display: inline-flex; min-height: 44px; align-items: center; }
.simce-peers, .simce-idps-section { margin: 28px 0; padding: 24px; border: 1px solid #dce0e7; border-radius: 16px; background: #fff; scroll-margin-top: var(--simce-sticky-offset, 100px); }
.simce-peers-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.simce-peers h2, .simce-idps-section h2 { font-size: 1.4rem; }
.simce-peers .simce-peer-select { width: 1%; white-space: nowrap; padding-left: 4px; padding-right: 4px; text-align: center; }
.simce-peers small { display: block; font-weight: 400; color: #555e6b; }
.simce-peer-check { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin: 0; }
.simce-peer-check input { width: 24px; height: 24px; accent-color: #7a4b96; }
.simce-idps-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 20px 0; }
.simce-idps-card { min-width: 0; padding: 16px; background: #faf9fc; border: 1px solid #e6e2ed; border-radius: 12px; }
.simce-idps-card h3 { font-size: .95rem; min-height: 3.5em; margin: 0 0 8px; }
.simce-idps-value strong { font-size: 2.5rem; line-height: 1.15; }
.simce-idps-value { margin: 0 0 8px; }
.simce-idps-card .simce-result__change { font-size: .875rem; margin: 8px 0; }
.simce-idps-peer { font-size: .8rem; margin: 8px 0; }
.simce-idps-peer .simce-note { display: block; }
.simce-idps-mini { position: relative; container: simce-idps-chart / inline-size; }
.simce-idps-mini svg { width: 100%; height: auto; display: block; }
/* HTML keeps the axes readable while the SVG geometry fits each card. */
.simce-idps-axis { position: absolute; left: calc(var(--idps-x) * 100% / var(--idps-view-width)); top: calc(var(--idps-y) * 100% / var(--idps-view-height)); color: #555e6b; font-size: 13px; line-height: 1.2; }
.simce-idps-axis--secondary { display: none; }
@container simce-idps-chart (min-width: 300px) { .simce-idps-axis--secondary { display: block; } }
.simce-idps-axis--y { margin-left: -6px; transform: translate(-100%, -50%); }
.simce-idps-axis--x { margin-top: 4px; transform: translateX(-50%); }
.simce-idps-axis--gap { margin-top: 4px; max-width: calc(var(--idps-band-width) * 100% / var(--idps-view-width)); transform: translateX(-50%); text-align: center; }
.simce-idps-selected { stroke-width: 3; }
.simce-idps-definition, .simce-idps-section .simce-chart-data { padding: 12px 0; }
.simce-idps-definition dd { margin: 4px 0 14px; }
@media (max-width: 991px) { .simce-idps-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 639px) {
    .simce-peers, .simce-idps-section { padding: 16px; }
    .simce-idps-cards { grid-template-columns: minmax(0,1fr); }
    .simce-idps-card { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; padding: 14px; }
    .simce-idps-card h3 { min-height: 0; margin: 0; }
    .simce-idps-value { grid-column: 2; grid-row: 1 / 3; max-width: 85px; font-size: .75rem; }
    .simce-idps-value strong { display: block; font-size: 2rem; }
    .simce-idps-card .simce-result__change { grid-column: 1; }
    .simce-idps-peer, .simce-idps-mini { grid-column: 1 / -1; }
    .simce-peers-students { display: none; }
    .simce-peers th, .simce-peers td { white-space: normal; }
    .simce-peers .simce-table { min-width: 0; width: 100%; }
}
/* End TF-S. */

.simce-focus[data-simce-scope="colegio"] .simce-ref-2 { stroke: #667085; }
.simce-focus[data-simce-scope="colegio"] .simce-ref-2:not(.simce-chart__line) { fill: #667085; }

.simce-peers-skeleton__row { height: 48px; margin: 8px 0; border-radius: 8px; background: #eef0f3; }

/* TF-C: live comparison page and navigation tray. Identity follows the entity, never its score. */
.simce-sections > .simce-container { display: flex; align-items: center; gap: 12px; }
.simce-sections > .simce-container > ul { min-width: 0; flex: 1; }
.simce-section-compare { flex: 0 0 auto; font-size: 13px; padding: 10px 14px; white-space: nowrap; }
.simce-comparison-heading { padding-top: 28px; padding-bottom: 24px; }
.simce-comparison-heading h1 { margin: 12px 0 20px; font-size: clamp(26px, 3vw, 36px); }
.simce-comparison-context { display: flex; align-items: center; gap: 16px; padding: 16px 0; position: sticky; top: 0; z-index: 30; background: var(--simce-surface); }
.simce-comparison-context label { display: block; margin: 0 0 6px; color: var(--simce-ink-soft); font-size: 14px; }
.simce-comparison-context select { width: 170px; border-radius: 8px; color: var(--simce-ink); font-size: 16px; }
.simce-comparison-scroll { overflow-x: auto; border: 1px solid var(--simce-border); border-radius: 14px; background: #fff; }
.simce-comparison-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; margin: 0; table-layout: fixed; }
.simce-comparison-table th, .simce-comparison-table td { padding: 18px; vertical-align: top; border-bottom: 1px solid var(--simce-border); border-right: 1px solid var(--simce-border); width: 232px; max-width: 232px; font-size: 15px; font-weight: 600; }
.simce-comparison-table .simce-comparison-label { width: 210px; min-width: 210px; max-width: 210px; position: sticky; left: 0; z-index: 2; background: #f7f8fa; font-weight: 700; }
.simce-comparison-table .simce-comparison-add { width: 112px; min-width: 112px; max-width: 112px; background: #fafbfc; padding: 12px; }
.simce-comparison-add .simce-btn { padding: 8px 4px; width: 88px; font-size: 13px; white-space: normal; }
.simce-comparison-name { font-size: 18px; line-height: 1.3; display: block; color: var(--simce-ink); font-weight: 800; margin-top: 8px; }
.simce-comparison-column .simce-note { margin-top: 8px; line-height: 1.45; }
.simce-comparison-tools { display: flex; gap: 6px; }
.simce-comparison-tool { min-width: 36px; min-height: 36px; border: 1px solid var(--simce-border); border-radius: 7px; background: #fff; color: var(--simce-ink); cursor: pointer; padding: 4px 8px; }
.simce-comparison-tool[aria-disabled="true"] { color: var(--simce-ink-muted); opacity: .65; }
.simce-comparison-drag { cursor: grab; }
.simce-comparison-group th { width: auto; max-width: none; background: #f8f7fa; font-size: 17px; font-weight: 800; padding: 12px 18px; }
.simce-comparison-group .simce-note { display: inline; margin-left: 16px; font-weight: 400; }
.simce-comparison-score { display: inline-block; font-size: 36px; line-height: 1.1; font-weight: 800; }
.simce-comparison-table td .simce-note { display: block; font-size: 13px; margin: 6px 0; }
.simce-comparison-best { background: #e8f5f1; box-shadow: inset 0 3px #0f7b66; }
.simce-comparison-mark { display: block; font-size: 12px; color: #0f7b66; margin-top: 12px; }
.simce-comparison-marker { font-size: 18px; line-height: 1; display: inline-block; margin-right: 6px; }
.simce-comparison-scale { display: block; position: relative; height: 3px; background: #d9dfe6; margin: 20px 8px; }
.simce-comparison-scale .simce-comparison-marker { position: absolute; top: -8px; transform: translateX(-50%); margin: 0; }
.simce-comparison-levels { display: flex; height: 12px; border-radius: 4px; overflow: hidden; margin: 4px 0 12px; }
.simce-comparison-search { margin: 24px 0; padding: 24px; border-radius: 14px; background: #fff; border: 1px solid var(--simce-border); }
.simce-comparison-search h2 { font-size: 20px; margin: 0 0 16px; }
.simce-comparison-search [data-compare-close] { float: right; }
.simce-comparison-search .simce-search__control { margin-top: 16px; }
.simce-comparison-search .simce-results { left: 0; width: 100%; z-index: 60; }
.simce-comparison-legend { margin: 24px 0 40px; font-size: 13px; line-height: 1.65; }
.simce-comparison-legend details { margin: 16px 0; }
.simce-comparison-average { border-top: 1px solid var(--simce-border); margin-top: 24px; padding: 20px 0; }
.simce-comparison-average .simce-btn:disabled { opacity: .6; }
.simce-has-tray { padding-bottom: 110px; }
.simce-comparison-tray { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #d3dae2; z-index: 80; box-shadow: 0 -4px 20px #182b4020; display: flex; align-items: center; gap: 16px; padding: 16px 24px; font-size: 13px; }
.simce-comparison-tray__chips { display: flex; flex: 1; gap: 8px; flex-wrap: wrap; }
.simce-comparison-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 220px; }
.simce-comparison-chip > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simce-comparison-graph { background: #fff; border: 1px solid var(--simce-border); border-radius: 14px; padding: 20px; margin: 20px 0; }
.simce-comparison-graph figcaption { font-weight: 800; font-size: 18px; margin-bottom: 12px; }
.simce-comparison-graph svg { width: 100%; display: block; max-height: 480px; }
.simce-comparison-graph svg text { fill: #455468; font-family: inherit; font-size: 13px; }
.simce-comparison-graph svg .simce-comparison-history-end { font-size: 12px; }
.simce-comparison-graph-legend { display: flex; list-style: none; flex-wrap: wrap; gap: 12px 20px; padding: 0; font-size: 13px; }
.simce-comparison-svg-point:focus { outline: 2px solid #182b40; }
@media (max-width: 760px) {
    .simce-section-compare { font-size: 11px; padding: 9px 10px; max-width: 150px; white-space: normal; }
    .simce-comparison-heading { padding-top: 18px; padding-bottom: 8px; }
    .simce-comparison-context { gap: 8px; flex-wrap: wrap; padding: 12px 0; }
    .simce-comparison-context label { font-size: 12px; }
    .simce-comparison-context select { width: 110px; font-size: 13px; }
    .simce-comparison-context .simce-scope { margin-left: auto; }
    .simce-comparison-table { --compare-mobile-col: calc((100vw - 2px) / 2); width: calc(var(--compare-count) * var(--compare-mobile-col) + 112px); min-width: 100%; }
    .simce-comparison-table thead, .simce-comparison-table tbody { display: block; }
    .simce-comparison-table tr { display: flex; flex-wrap: wrap; }
    .simce-comparison-table th, .simce-comparison-table td { width: var(--compare-mobile-col); min-width: var(--compare-mobile-col); max-width: var(--compare-mobile-col); padding: 12px 10px; flex: 0 0 var(--compare-mobile-col); font-size: 14px; }
    .simce-comparison-table .simce-comparison-label { flex: 0 0 100%; max-width: none; width: 100%; padding: 8px 10px; position: relative; }
    .simce-comparison-table .simce-comparison-label::first-line { line-height: 1.6; }
    .simce-comparison-table .simce-comparison-group th { flex: 0 0 100%; max-width: none; padding: 10px; }
    .simce-comparison-group .simce-note { margin-left: 0; display: block; }
    .simce-comparison-table .simce-comparison-add { flex: 0 0 112px; min-width: 112px; max-width: 112px; }
    .simce-comparison-name { font-size: 16px; line-height: 1.3; }
    .simce-comparison-score { font-size: 32px; }
    .simce-comparison-tools { gap: 2px; }
    .simce-comparison-tool { min-width: 44px; min-height: 44px; padding: 8px; }
    .simce-comparison-drag { display: none; }
    .simce-comparison-table td .simce-note { font-size: 13px; }
    .simce-comparison-search[aria-modal="true"] { position: fixed; inset: auto 0 0; z-index: 100; max-height: 90vh; overflow-y: auto; margin: 0; border-radius: 18px 18px 0 0; padding: 20px; box-shadow: 0 -25vh 0 75vh #182b4070; }
    .simce-comparison-tray { padding: 12px 16px; gap: 8px; justify-content: space-between; }
    .simce-comparison-tray > strong { max-width: 110px; font-size: 11px; }
    .simce-comparison-tray > .simce-btn { font-size: 12px; padding: 12px; }
    .simce-comparison-tray__chips { display: none; }
    .simce-comparison-graph { padding: 12px; }
    .simce-comparison-graph--history svg { min-width: 540px; }
    .simce-comparison-graph { overflow-x: auto; }
}
@media print {
    .simce-comparison-context, .simce-comparison-tray, .simce-comparison-search, .simce-comparison-add, .simce-comparison-tools, .simce-comparison-heading .simce-cta, .simce-comparison-average { display: none !important; }
    .simce-comparison-scroll { overflow: visible; border: 0; }
    .simce-comparison-table { width: 100%; table-layout: fixed; }
    .simce-comparison-table th, .simce-comparison-table td { min-width: 0; width: auto; padding: 8px; font-size: 10px; }
    .simce-comparison-table .simce-comparison-label { position: static; width: 16%; min-width: 0; }
    .simce-comparison-table thead { display: table-header-group; }
}
@media (max-width: 760px) {
    .simce-comparison-row-label { position: sticky; left: 10px; display: block; width: calc(100vw - 60px); }
    .simce-comparison-scroll { scroll-snap-type: x proximity; }
    .simce-comparison-column { scroll-snap-align: start; }
}

.simce-comparison-sticky-head { position: fixed; z-index: 29; overflow: hidden; background: #fff; border: 1px solid var(--simce-border); box-shadow: 0 4px 12px #182b4015; }
.simce-comparison-sticky-head__inner { display: flex; }
.simce-comparison-sticky-head__cell { flex-shrink: 0; padding: 12px 18px; font-size: 13px; border-right: 1px solid var(--simce-border); }
.simce-comparison-graph { position: relative; }
.simce-comparison-point-tip { position: absolute; left: 12px; bottom: 8px; max-width: calc(100% - 24px); padding: 8px 12px; background: #182b40; color: #fff; border-radius: 6px; font-size: 12px; pointer-events: none; }
@media (max-width: 760px) { .simce-comparison-sticky-head__cell { padding: 10px; font-size: 11px; } }
@media print { .simce-comparison-sticky-head, .simce-comparison-point-tip { display: none !important; } }

.simce-comparison-idps-bar { display: block; height: 6px; margin-top: 10px; border-radius: 3px; background: linear-gradient(to right, #a9b1bc var(--idps-score), #eef0f3 var(--idps-score)); }
@media (min-width: 761px) {
    .simce-comparison-heading { display: grid; grid-template-columns: 1fr auto; align-items: center; }
    .simce-comparison-heading > a { grid-column: 1 / -1; }
    .simce-comparison-heading .simce-cta { margin: 0; }
}
@media (max-width: 760px) {
    .simce-comparison-context { display: grid; grid-template-columns: 1fr 1fr; }
    .simce-comparison-context label { display: block; }
    .simce-comparison-context select { display: block; width: 100%; margin-top: 0; }
    .simce-comparison-context .simce-scope { grid-column: 1 / -1; width: 100%; display: flex; }
    .simce-comparison-context .simce-scope button { flex: 1; }
}
/* Navigation's light hover background must not override the comparison button's white text. */
.simce .simce-sections a.simce-section-compare,
.simce .simce-sections a.simce-section-compare:hover {
    background: var(--simce-brand-ink);
    color: #fff;
}
@media print {
    .simce-comparison-table { width: 100%; min-width: 0; }
    .simce-comparison-table thead { display: table-header-group; }
    .simce-comparison-table tbody { display: table-row-group; }
    .simce-comparison-table tr { display: table-row; }
    .simce-comparison-table th, .simce-comparison-table td { display: table-cell; flex: none; min-width: 0; max-width: none; width: auto; }
    .simce-comparison-table .simce-comparison-label { max-width: none; }
    .simce-comparison-row-label { position: static; width: auto; }
}

/* TF-C design calibration: shared filters, compact labels and touch controls. */
.simce-comparison-heading { padding-top: 10px; padding-bottom: 12px; }
.simce-comparison-heading h1 { font-size: clamp(24px, 3vw, 32px); margin: 10px 0 4px; }
.simce-comparison-page .simce-status:empty { min-height: 0; margin: 0; padding: 0; }
.simce-comparison-context { margin-bottom: 20px; }
.simce-comparison-context > .simce-scope { margin-left: auto; overflow: hidden; flex-shrink: 0; }
.simce-comparison-context .simce-scope button { border-radius: 0; padding: 10px 22px; }
.simce-comparison-context .simce-scope button:first-child { border-radius: 999px 0 0 999px; }
.simce-comparison-context .simce-scope button:last-child { border-radius: 0 999px 999px 0; }
.simce-comparison-context .fw-select-ico { fill: none; stroke: currentColor; stroke-width: 2; }
.simce-comparison-context [data-compare-year] { width: 116px; }
.simce-comparison-identity { display: flex; align-items: center; gap: 6px; color: var(--simce-ink-soft); }
.simce-comparison-identity .simce-note { margin: 0; font-size: 13px; font-weight: 700; }
.simce-comparison-name { text-decoration: none; }
.simce-comparison-name:hover { text-decoration: underline; }
.simce-comparison-meta { font-size: 14px; font-weight: 400; margin: 8px 0 14px; }
.simce .simce-comparison-icon { display: inline-flex; align-items: center; justify-content: center; padding: 7px; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; }
.simce-comparison-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.simce-comparison-drag svg { stroke-width: 4; }
.simce-comparison-tools button:last-child { margin-left: auto; }
.simce-comparison-tool:hover { background: #f3eef6; border-color: var(--simce-brand-ink); color: var(--simce-brand-ink); }
.simce-comparison-tool:focus-visible, .simce-comparison-add-button:focus-visible { outline: 3px solid var(--simce-focus); outline-offset: 2px; }
.simce .simce-comparison-add-button { display: inline-flex; flex-direction: column; gap: 8px; padding: 10px 0; width: 88px; border: 0; background: transparent; box-shadow: none; color: var(--simce-brand-ink); font-size: 14px; }
.simce-comparison-add-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--simce-brand-ink); color: #fff; font-size: 26px; font-weight: 400; }
.simce-comparison-add-button:hover .simce-comparison-add-icon { background: #452758; }
.simce-comparison-table td.simce-comparison-add { background: #fcfcfd; }
.simce-comparison-group .simce-comparison-preliminary { display: inline-block; padding: 3px 10px; margin-left: 12px; border: 1px solid var(--simce-border); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--simce-ink-soft); background: #f5f7fa; }
.simce-comparison-unit { margin-left: 6px; font-size: 13px; color: var(--simce-ink-soft); font-weight: 500; }
.simce-comparison-change { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.simce-comparison-verdict { display: block; font-size: 14px; font-weight: 600; }
.simce-comparison-change--up { color: #087560; }
.simce-comparison-change--down { color: #ad361a; }
.simce-comparison-change--flat { color: var(--simce-ink-soft); }
.simce-comparison-territory { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; margin: 0; font-size: 13px; color: var(--simce-ink-soft); font-weight: 400; }
.simce-comparison-territory strong { color: var(--simce-ink); }
.simce-comparison-point-value { font-weight: 700; }
.simce-comparison-graph svg text { font-size: 13px; }
.simce-comparison-chip { padding: 5px 6px 5px 10px; border: 1px solid var(--simce-border); border-radius: 999px; font-weight: 600; }
@media (max-width: 760px) {
    body.simce-page .simce-sections > .simce-container { gap: 6px; }
    .simce-sections > .simce-container > ul { flex: 0 0 auto; }
    body.simce-page .simce-sections a.simce-section-compare { flex-shrink: 0; white-space: nowrap; max-width: none; margin-right: 12px; }
    .simce-comparison-page > main.simce-container { padding-inline: 0; }
    .simce-comparison-heading { padding: 10px 16px 14px; }
    .simce-comparison-heading .simce-cta { margin: 10px 0 0; gap: 8px; }
    .simce-comparison-heading .simce-cta button { min-height: 36px; padding: 6px 12px; font-size: 12px; }
    .simce-comparison-context { padding: 10px 16px; margin-bottom: 16px; }
    .simce-comparison-context label { font-size: 14px; margin-bottom: 6px; }
    .simce-comparison-context select { font-size: 16px; }
    .simce-comparison-context [data-compare-year] { width: 100%; }
    .simce-comparison-context > .simce-scope { margin: 0; }
    .simce-comparison-scroll { border-radius: 0; }
    .simce-comparison-table thead .simce-comparison-label { display: none; }
    .simce-comparison-column { padding: 16px 12px !important; }
    .simce-comparison-meta { font-size: 13px; }
    .simce-comparison-identity { gap: 4px; }
    .simce-comparison-identity .simce-note { font-size: 12px; }
    .simce .simce-comparison-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 11px; }
    .simce .simce-comparison-drag { display: none; }
    .simce-comparison-tools { gap: 0; }
    .simce-comparison-group th { font-size: 16px; }
    .simce-comparison-group .simce-comparison-preliminary { display: table; margin: 6px 0 0; }
    .simce-comparison-row-label { width: calc(100vw - 22px); }
    .simce-comparison-pager { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #fff; border-top: 1px solid var(--simce-border); font-size: 13px; font-weight: 600; }
    .simce-comparison-dots { display: flex; gap: 6px; }
    .simce-comparison-dots span { width: 8px; height: 8px; border-radius: 999px; background: #d3dae2; }
    .simce-comparison-dots .is-active { width: 20px; background: var(--simce-brand-ink); }
    .simce-comparison-search, .simce-comparison-legend, .simce-comparison-graph-legend { margin-inline: 16px; }
    .simce-comparison-graph { margin-inline: 12px; }
}
@media print {
    .simce-comparison-pager { display: none; }
    .simce .simce-comparison-drag, .simce-comparison-tools { display: none; }
    .simce-comparison-table thead .simce-comparison-label { display: table-cell; }
}

.simce .simce-comparison-heading h1 { color: var(--simce-ink); }
.simce .simce-comparison-name { color: var(--simce-ink); text-decoration: none; }
.simce .simce-comparison-name:hover { color: var(--simce-brand-ink); text-decoration: underline; }
.simce-comparison-field { display: block; min-width: 0; }
.simce-comparison-context { padding-block: 10px; }
.simce-comparison-graph-toolbar { display: flex; align-items: center; justify-content: space-between; }
.simce-comparison-graph-toolbar .simce-comparison-graph-legend { font-size: 14px; font-weight: 600; }
.simce .simce-comparison-graph-toolbar .simce-comparison-add-button { flex-direction: row; width: auto; padding: 0; }
.simce-comparison-graph-toolbar .simce-comparison-add-icon { width: 32px; height: 32px; font-size: 22px; }
.simce-comparison-subjects { overflow: hidden; }
.simce-comparison-subjects > button { border-radius: 0; }
@media (min-width: 761px) {
    .simce-comparison-graph--scores { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 12px; }
    .simce-comparison-graph--scores figcaption { font-size: 16px; }
}
@media (max-width: 760px) {
    .simce-comparison-context { grid-template-areas: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .simce-comparison-context .simce-scope { grid-column: 1 / -1; width: 100%; }
    .simce-comparison-context .simce-scope button { min-width: 0; flex: 1; }
    .simce-comparison-mobile-actions .simce-cta { padding: 0 16px 20px; }
    .simce-comparison-graph-toolbar { gap: 8px; padding-right: 16px; }
    .simce-comparison-graph-toolbar .simce-comparison-graph-legend { font-size: 13px; }
}
@media print { .simce-comparison-mobile-actions { display: none; } }

.simce-comparison-heading { background: #fff; max-width: none; margin: 0; padding-inline: max(16px, calc((100% - 1148px) / 2)); }
.simce-comparison-context::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); background: #fff; z-index: -1; border-bottom: 1px solid var(--simce-border); }
.simce-comparison-context .simce-scope button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.simce-comparison-context .simce-scope svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
    .simce-comparison-heading { padding-block: 6px 12px; }
    .simce-comparison-heading h1 { max-width: 290px; line-height: 1.15; margin: 8px 0 4px; }
    .simce-comparison-context { row-gap: 8px; padding-block: 10px; }
    .simce-comparison-context label { line-height: 1.3; }
    .simce-comparison-context select { min-height: 44px; padding-block: 9px; line-height: 1.3; }
    .simce-comparison-table td .simce-comparison-mark { font-size: 12px; }
}
@media (max-width: 340px) { .simce-comparison-identity .simce-note { font-size: 11px; } }

.simce-comparison-table .simce-comparison-label { background: #fff; }
.simce-comparison-table td .simce-comparison-level-row { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 760px) { .simce-comparison-table .simce-comparison-label { background: #f8f9fb; } }

.simce-comparison-group-year { margin-left: 10px; font-size: 14px; font-weight: 500; color: var(--simce-ink-soft); }
.simce-comparison-graph-card { padding: 24px 28px; margin: 0 0 20px; border: 1px solid var(--simce-border); border-radius: 16px; background: #fff; }
.simce-comparison-graph-card h2 { font-size: 20px; margin: 8px 0 16px; }
.simce-comparison-graph-card > .simce-note { font-size: 14px; }
.simce-comparison-graph-card .simce-comparison-graph { padding: 8px 0; margin: 0; border: 0; border-radius: 0; border-top: 1px solid var(--simce-border); }
.simce-comparison-graph-card .simce-comparison-graph--history { padding-top: 24px; }
.simce-comparison-graph--history figcaption { display: inline-block; }
.simce-comparison-graph--history .simce-comparison-subjects { float: right; margin-bottom: 16px; font-size: 13px; }
.simce-comparison-graph--history > svg { clear: both; }
.simce-comparison-tray { padding-inline: max(16px, calc((100% - 1148px) / 2)); }
.simce-comparison-tray__count { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--simce-ink-soft); }
.simce .simce-sections a.simce-section-compare[aria-pressed="true"] { background: #e8f5f1; border-color: #9bd6c8; color: #065e4d; }
.simce-section-compare[aria-pressed="true"]::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: #087560; color: #fff; }
@media (max-width: 760px) {
    .simce-comparison-graph-card { padding: 16px 12px; margin-inline: 12px; }
    .simce-comparison-graph-card .simce-comparison-graph-legend { margin-inline: 0; }
    .simce-comparison-graph-card .simce-comparison-graph--history { padding-top: 16px; }
    .simce-comparison-graph--history .simce-comparison-subjects { float: none; display: flex; max-width: 100%; }
    .simce-comparison-subjects > button { font-size: 12px; padding-inline: 10px; }
}
/* Interpolating between the purple and green states crosses a low-contrast midpoint. */
.simce .simce-sections a.simce-section-compare { transition: border-color 180ms ease; }
.simce .simce-comparison-graph-card > h2 { color: var(--simce-ink); }
.simce-comparison-heading > a { line-height: 1.3; }
.simce-comparison-context { align-items: end; }
@media (min-width: 761px) {
    .simce-comparison-heading > a { font-size: 14px; }
    .simce-comparison-context label { line-height: 1.3; }
}
@media (max-width: 760px) { .simce-comparison-heading { padding-bottom: 8px; } }

.simce-comparison-mark svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; flex-shrink: 0; }

/* The first comparison frame and hydrated cells share explicit slots. Long exceptional
   values remain readable by scrolling their slot rather than moving adjacent rows. */
.simce-comparison-table [data-compare-row] { --compare-slot: 72px; }
.simce-comparison-table [data-compare-row="score"] { --compare-slot: 116px; }
.simce-comparison-table [data-compare-row="change"] { --compare-slot: 112px; }
.simce-comparison-table [data-compare-row="students"] { --compare-slot: 48px; }
.simce-comparison-table [data-compare-row="levels"] { --compare-slot: 112px; }
.simce-comparison-table [data-compare-row="territory"] { --compare-slot: 132px; }
.simce-comparison-table [data-compare-row="idps"] { --compare-slot: 48px; }
.simce-comparison-slot { height: var(--compare-slot); overflow: auto; scrollbar-width: thin; }
.simce-comparison-skeleton { color: var(--simce-ink-muted); background: linear-gradient(#eef0f3, #eef0f3) left 28px / 75% 8px no-repeat; font-size: 13px; font-weight: 400; }
.simce-comparison-column .simce-comparison-name { height: 70px; overflow: auto; }
.simce-comparison-meta { height: 64px; overflow: auto; }
.simce-comparison-column .simce-comparison-tools { min-height: 44px; }
.simce-comparison-identity { height: 22px; }
.simce-comparison-group th { height: 62px; }
.simce-comparison-group .simce-comparison-row-label { min-height: 36px; }
.simce-comparison-pager { display: none; }
.simce-comparison-graph-toolbar { height: calc(var(--compare-count) * 24px + 16px); }
.simce-comparison-graph-legend { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.simce-comparison-graph-legend li { height: 24px; white-space: nowrap; overflow: auto; }
.simce-comparison-graph--scores { height: 170px; }
.simce-comparison-graph--scores svg { height: 140px; }
.simce-comparison-graph--history { min-height: 560px; }
.simce-comparison-graph--history > svg { height: 440px; }
@media (max-width: 760px) {
    .simce-comparison-heading .simce-cta { display: none; }
    .simce-comparison-mobile-actions { min-height: 64px; }
    .simce-comparison-mobile-actions .simce-cta { display: flex; }
    .simce-comparison-pager { display: flex; }
    .simce-comparison-table [data-compare-row="change"] { --compare-slot: 170px; }
    .simce-comparison-table [data-compare-row="gse"] { --compare-slot: 98px; }
    .simce-comparison-table [data-compare-row="territory"] { --compare-slot: 180px; }
    .simce-comparison-table [data-compare-row] > .simce-comparison-label { height: 58px; }
    .simce-comparison-group th { height: 90px; }
    .simce-comparison-group .simce-comparison-row-label { min-height: 68px; }
    .simce-comparison-graph--scores { height: 210px; }
    .simce-comparison-graph--scores svg text { font-size: 14.25px; }
    .simce-comparison-graph--history { min-height: 640px; }
}
@media print {
    .simce-comparison-slot, .simce-comparison-column .simce-comparison-name, .simce-comparison-meta { height: auto; overflow: visible; }
    .simce-comparison-table [data-compare-row] > .simce-comparison-label, .simce-comparison-group th { height: auto; }
    .simce-comparison-graph-legend li { height: auto; white-space: normal; overflow: visible; }
    .simce-comparison-graph-toolbar { height: auto; }
}

/* Keep all table headers aligned with the approved comparison, independently
   of browser defaults and the shared theme. */
.simce-comparison-table th { text-align: left; }
.simce-comparison-graph-card > button { min-height: 32px; }
.simce-comparison-graph-card + button { height: 32px; }
@media (max-width: 760px) {
    .simce-comparison-search[data-compare-auto-search] { display: none; }
    .simce-comparison-mobile-actions .simce-cta { margin: 0; height: 64px; }
}
.simce-comparison-graph-card + button { display: block; }
.simce-comparison-page .simce-skip { max-width: calc(100vw - 32px); }
/* Absolutely positioned table annotations belong to the scroller, not the page. */
.simce-comparison-scroll { position: relative; }
/* With scripts disabled, take readers straight to the working sheet links. */
html[data-simce-comparison]:not([data-simce-js]) [data-compare-content],
html[data-simce-comparison]:not([data-simce-js]) [data-compare-context],
html[data-simce-comparison]:not([data-simce-js]) [data-compare-search-panel],
html[data-simce-comparison]:not([data-simce-js]) [data-compare-legend],
html[data-simce-comparison]:not([data-simce-js]) .simce-cta,
html[data-simce-comparison]:not([data-simce-js]) [data-compare-mobile-actions] { display: none; }

.simce-comparison-school-info { display: contents; }
@media (max-width: 760px) {
    .simce-comparison-school-info { display: flex; flex-direction: column; gap: 8px; height: 132px; margin: 8px 0 12px; }
    .simce-comparison-column .simce-comparison-name { height: auto; max-height: 66px; margin: 0; }
    .simce-comparison-column .simce-comparison-meta { height: auto; max-height: 66px; margin: 0; }
}
@media print {
    .simce-comparison-school-info { display: contents; height: auto; }
    .simce-comparison-column .simce-comparison-name, .simce-comparison-meta { max-height: none; }
}

/* Reserve the progressive scope control before its script loads at every width. */
[data-simce-js] .simce-search--hero .simce-scope[hidden] { display: inline-flex !important; visibility: hidden; }
.simce-comparison-search .simce-search { display: block; }
.simce-comparison-search .simce-scope { padding: 4px; gap: 4px; }
.simce-comparison-search .simce-scope button { border-radius: 999px; }
.simce-comparison-search .simce-search__control { display: block; }
.simce-comparison-search .simce-search__control label { display: grid; margin-bottom: 8px; }
.simce-comparison-scroll-help { display: block; }
@media (max-width: 760px) {
    .simce-comparison-empty, .simce-comparison-noscript { padding-inline: 16px; }
}

.simce-search--hero form + p { margin-top: 8px; }
@media (max-width: 760px) {
    [data-compare-content] > p,
    [data-compare-content] > button,
    [data-compare-content] > input,
    [data-compare-status],
    [data-compare-notice] { margin-inline: 16px; }
}
@media (min-width: 360px) and (max-width: 767.98px) {
    .simce-hero .simce-search--hero .simce-status { block-size: 4lh; min-block-size: 4lh; }
}
@media (min-width: 1200px) {
    .simce-hero .simce-search--hero .simce-status { block-size: 2lh; min-block-size: 2lh; }
}