:root {
  /* Grises del desglose por mercado en la vista publica. Propios de la isla: el tema oscuro de la landing
     remapea --oe-surface pero no la escala numerica, y los tonos oscuros desaparecerian sobre la tarjeta. */
  --sri-mute-1: #64748b; --sri-mute-2: #94a3b8; --sri-mute-3: #475569; --sri-mute-4: #cbd5e1;
  --sri-mute-5: #334155; --sri-mute-6: #7d8ba0; --sri-mute-7: #1e293b; --sri-mute-8: #b6c0cd;
}
:root[data-theme="dark"] {
  --sri-mute-1: #94a3b8; --sri-mute-2: #cbd5e1; --sri-mute-3: #64748b; --sri-mute-4: #e2e8f0;
  --sri-mute-5: #475569; --sri-mute-6: #a8b3c4; --sri-mute-7: #f1f5f9; --sri-mute-8: #58657a;
}
/*
  Storage Revenue Index: estilos de la publicación, portados de la web estática que
  entregó Javi (OptimizeEnergy/brand-redesign, rama `storage-index`).

  Qué cambia respecto al original y por qué:
  - Todo cuelga de `.sri`. El original traía reset propio (`*`, `html`, `body`) que
    pisaba el preflight de Tailwind y el cromo del sitio.
  - Los tokens sin prefijo (`--gray-700`, `--text`, `--chart-1`) pasan a los de la
    marca (`--oe-*`, src/styles/tokens.css). Los valores eran idénticos: solo
    cambia el nombre, así que la publicación ya no lleva su propia copia de tokens.
  - El hero y el cromo (cabecera, pie) los pone la landing; aquí no están.
  - El tema oscuro se ataba a `prefers-color-scheme`, que este sitio no usa: pasa a
    `[data-theme="dark"]`, el conmutador real de la landing.

  Los datos (`data/`) sí se regeneran a diario; este fichero y `app.js` son código
  estable y se mantienen aquí, no se resincronizan desde el repo del motor.
*/

/* Lo que aportaban `html`/`body` en el original; el resto lo cubre el preflight de Tailwind. */
.sri { line-height: 1.6; color: var(--oe-text); }
.sri [hidden] { display: none !important; }
.sri :focus-visible { outline: 2px solid var(--oe-brand); outline-offset: 2px; }
.sri h1, .sri h2, .sri h3 { color: var(--oe-text); text-wrap: balance; }
.sri button, .sri input, .sri select { font: inherit; color: inherit; }

/* «Estás aquí»: la sección que se está viendo, marcada al hacer scroll (app.js pone el aria-current,
   así que el subrayado verde es a la vez la señal visual y la que lee un lector de pantalla). El menú
   de secciones va por encima de la isla, no dentro, así que se acota a esta publicación por :has.
   Con text-decoration y no con un ::after: el filete de un pseudoelemento se estira a todo el ancho
   si el enlace no es un elemento de bloque, y así sigue al texto sea cual sea el display. */
html:has(.sri) nav a[aria-current="true"] { color: var(--oe-text); text-decoration: underline; text-decoration-color: var(--oe-brand); text-decoration-thickness: 2px; text-underline-offset: .35rem; }

.sri .container { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }
.sri .eyebrow { font-family: 'DM Sans', system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-brand-strong); }
.sri .eyebrow.context { color: var(--oe-text-faint); }
.sri .seg { display: inline-flex; gap: .375rem; flex-wrap: wrap; }
.sri .seg button { font-family: 'DM Sans', system-ui, sans-serif; font-size: .875rem; font-weight: 500; padding: .5rem .875rem; border-radius: var(--oe-radius-md); border: 1px solid var(--oe-border); background: transparent; color: var(--oe-text); cursor: pointer; transition: border-color .15s, background .15s; }
.sri .seg button:hover { border-color: var(--oe-brand); }
.sri .seg button[aria-pressed="true"] { background: var(--oe-brand); border-color: var(--oe-brand); color: #fff; }
.sri .seg button[aria-pressed="true"]:hover { background: var(--oe-brand-strong); border-color: var(--oe-brand-strong); }
.sri .seg.small button { padding: .3rem .625rem; font-size: .8125rem; }

/* Conmutador de vista: una pista y, dentro, la opción elegida como pastilla. Solo lo lleva el
   cambio de vista (market to market / diferencias con el diario), que es el único control que no
   filtra lo que se ve sino que cambia cómo se valora lo mismo; por eso se distingue del resto.
   El borde es lo que dibuja la pista, sin relleno propio: un relleno tendría que ser el color de
   sección o el del alterno, y esos son justo los dos fondos sobre los que se pinta. */
.sri .seg.switch { gap: 2px; border: 1px solid var(--oe-border); border-radius: 9999px; padding: 3px; }
.sri .seg.switch button { padding: .375rem .875rem; border-radius: 9999px; border: 0; color: var(--oe-text-soft); transition: background .18s, color .18s; }
.sri .seg.switch button:hover { color: var(--oe-text); }
/* Gris y no verde: el verde de marca se reserva para elegir CONTENIDO (flota, tecnología, periodo).
   Este no elige contenido, cambia cómo se valora lo mismo, y con el gris se distingue de un vistazo
   cuál de los dos tipos de control se está tocando. */
.sri .seg.switch button[aria-pressed="true"] { background: var(--oe-surface-600); color: #fff; }
.sri .seg.switch button[aria-pressed="true"]:hover { background: var(--oe-surface-700); color: #fff; }
@media (prefers-reduced-motion: reduce) { .sri .seg.switch button { transition: none; } }
.sri .highlight { background: var(--oe-brand); color: var(--oe-surface-900); }
.sri .highlight .inner { padding-top: 3rem; padding-bottom: 3rem; display: grid; gap: 1.5rem; }
/* una cifra por flota, cada una con su contexto debajo */
.sri .highlight .figs { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) {
.sri .highlight .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
}
.sri .highlight .eyebrow { color: var(--oe-surface-900); }
.sri .highlight .big { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: .95; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sri .highlight .big small { font-size: .3em; font-weight: 600; margin-left: .35rem; letter-spacing: 0; }
.sri .highlight .label { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 1.25rem; margin-bottom: .375rem; }
.sri .highlight .ctx { font-size: 1rem; max-width: 34rem; margin-top: .75rem; }
.sri .section { padding-top: 5rem; padding-bottom: 5rem; }
.sri .section.alt { background: var(--oe-surface); }
.sri .section .head { display: grid; gap: .75rem; max-width: 46rem; }
.sri .section .head.wide { max-width: none; }
.sri .section .head.wide h2 { max-width: 60rem; }
.sri .section h2 { font-size: 1.875rem; line-height: 1.2; font-weight: 700; }
@media (min-width: 768px) {
.sri .section h2 { font-size: 2.25rem; }
}
.sri .section .intro { font-size: 1.125rem; color: var(--oe-text-soft); }
.sri .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.sri .stack > * { min-width: 0; }
.sri .callout { border-top: 3px solid var(--oe-brand); padding-top: .875rem; max-width: 52rem; color: var(--oe-text); font-size: .9375rem; }
.sri .card { background: var(--oe-surface); border: 1px solid var(--oe-border); border-radius: var(--oe-radius-lg); box-shadow: var(--oe-shadow-card); transition: box-shadow .2s; }
.sri .card:hover { box-shadow: var(--oe-shadow-card-hover); }
.sri .card.pad { padding: 1.5rem; }
.sri .card .card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; padding: 1.25rem 1.5rem 0; }
.sri .card .card-title { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: var(--oe-text); }
.sri .card .card-meta { font-family: 'DM Sans', system-ui, sans-serif; font-size: .8125rem; color: var(--oe-text-faint); }
.sri .card .card-body { padding: 1rem 1.5rem 1.5rem; }
/* Chapa de candado en la cabecera: el grafico se ve, el dato concreto esta en Energy Tracker */
.sri .lock-badge { display: inline-flex; align-items: center; gap: .375rem; text-decoration: none; font-family: 'DM Sans', system-ui, sans-serif; font-size: .8125rem; font-weight: 600; color: var(--oe-brand-strong); border: 1px solid var(--oe-border); border-radius: 9999px; padding: .25rem .625rem; background: var(--oe-surface); transition: box-shadow .18s, transform .18s; }
.sri .lock-badge:hover, .sri .lock-badge:focus-visible { box-shadow: var(--oe-shadow-card); transform: translateY(-1px); }
.sri .lock-badge svg { width: 1rem; height: 1rem; flex: none; }
.sri .lock-badge svg .body { fill: currentColor; }
.sri .lock-badge svg .shackle { transition: transform .2s ease; transform-origin: 8px 10px; }
.sri .lock-badge:hover svg .shackle, .sri .lock-badge:focus-visible svg .shackle { transform: translateY(-2px) rotate(-20deg); }
@media (prefers-reduced-motion: reduce) {
.sri .lock-badge, .sri .lock-badge svg .shackle { transition: none; }
}
/* valor tapado: monoespaciado para que el codigo no baile de ancho */
.sri .hidden-val, .sri .legend.values .hidden-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--oe-text-faint); letter-spacing: .05em; }
.sri .kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sri .kpi { padding: 1.25rem 1.5rem; display: grid; gap: .375rem; align-content: start; }
.sri .kpi .v { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 2rem; line-height: 1.1; color: var(--oe-text); font-variant-numeric: tabular-nums; }
.sri .kpi .v small { font-size: .875rem; font-weight: 500; color: var(--oe-text-soft); margin-left: .25rem; }
.sri .kpi .k { font-family: 'DM Sans', system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-text-soft); }
.sri .kpi .d { font-size: .8125rem; color: var(--oe-text-soft); }
.sri .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
/* El conmutador de vista se va al borde derecho; los selectores de contenido se quedan a la
   izquierda, donde estaban. Son cosas distintas y no tienen por qué compartir esquina. */
.sri .toolbar .seg.switch { margin-left: auto; }
/* Corta la fila donde se ponga. Ocupa el ancho entero y nada de alto; el medio hueco negativo
   deja la separación entre filas igual que si hubieran saltado solas (si no, se cuentan dos). */
.sri .toolbar .row-break { flex-basis: 100%; height: 0; margin-block: -.375rem; }
.sri .field { display: inline-flex; align-items: center; gap: .5rem; font-family: 'DM Sans', system-ui, sans-serif; font-size: .875rem; color: var(--oe-text-soft); }
.sri .control { border: 1px solid var(--oe-border); border-radius: var(--oe-radius-md); background: var(--oe-surface); padding: .45rem .7rem; color: var(--oe-text); }
.sri .control:focus { border-color: var(--oe-brand); outline: none; }
.sri input[type=range] { accent-color: var(--oe-brand); width: 7rem; }
.sri .value { font-family: 'DM Sans', system-ui, sans-serif; font-size: .875rem; color: var(--oe-text); font-variant-numeric: tabular-nums; }
.sri .scrub { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.sri .scrub .lbl { font-family: 'DM Sans', system-ui, sans-serif; font-size: .8125rem; color: var(--oe-text-soft); }
.sri .scrub .val { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 1.375rem; line-height: 1; color: var(--oe-brand-strong); font-variant-numeric: tabular-nums; }
.sri .scrub .val small { font-size: .75rem; font-weight: 500; color: var(--oe-text-soft); margin-left: .25rem; }
.sri .legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.sri .legend.values :is(button, .legend-item) { flex-direction: column; align-items: flex-start; gap: .125rem; }
.sri .legend.values :is(button, .legend-item) .legend-row { display: inline-flex; align-items: center; gap: .5rem; }
.sri .legend.values :is(button, .legend-item) .val { font-variant-numeric: tabular-nums; color: var(--oe-text); font-size: .8125rem; padding-left: 1.125rem; }
.sri .legend.values :is(button, .legend-item) .val small { font-size: .625rem; font-weight: 400; color: var(--oe-text-faint); margin-left: .25rem; }
.sri .legend.values button[aria-pressed="false"] .val { color: var(--oe-text-faint); }
/* Mismo problema que abajo y misma razon, en la leyenda de variables de la operacion horaria: al
   barrer el grafico los valores cambian de numero de cifras y, en una fila flexible, las entradas se
   movian de sitio bajo el cursor. Aqui basta con fijar el ancho de cada entrada. */
.sri .legend.values:not(.markets) :is(button, .legend-item) { min-width: 7rem; }
/* Leyendas de mercados: rejilla de columnas fijas. Con flex-wrap, el ancho de cada mercado depende de su valor
   («-186,7» ocupa mas que «0,4») y la leyenda saltaba de una fila a dos al cambiar los datos seleccionados. */
.sri .legend.values.markets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem 1.25rem; }
@media (max-width: 767px) {
.sri .legend.values.markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sri .legend :is(button, .legend-item) { display: inline-flex; align-items: center; gap: .5rem; border: 0; background: none; padding: .125rem 0; font-family: 'DM Sans', system-ui, sans-serif; font-size: .8125rem; color: var(--oe-text); }
.sri .legend button { cursor: pointer; }
.sri .legend button[aria-pressed="false"] { color: var(--oe-text-faint); text-decoration: line-through; }
.sri .legend button[aria-pressed="false"] .dot { opacity: .25; }
.sri .dot { width: .625rem; height: .625rem; border-radius: 9999px; display: inline-block; flex: none; }
.sri .dot.line { width: .875rem; height: .1875rem; border-radius: 2px; }
.sri .weeks { display: grid; gap: .625rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.sri .week { text-align: left; background: var(--oe-surface); border: 1px solid var(--oe-border); border-radius: var(--oe-radius-md); box-shadow: var(--oe-shadow-card); padding: .625rem .75rem; cursor: pointer; display: grid; gap: .125rem; transition: box-shadow .15s, border-color .15s; }
.sri .week:hover { box-shadow: var(--oe-shadow-card-hover); }
.sri .week[aria-pressed="true"] { border-color: var(--oe-brand); background: var(--oe-brand-50); }
.sri .week .d { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: .875rem; color: var(--oe-text); }
.sri .week .m { font-size: .75rem; line-height: 1.35; color: var(--oe-text-soft); }
  :root[data-theme="dark"] .sri .week[aria-pressed="true"] { background: var(--oe-surface-900); }
.sri .tiles { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
.sri .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.sri .tile .v { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--oe-text); font-variant-numeric: tabular-nums; }
.sri .tile .v small { font-size: .8125rem; font-weight: 500; color: var(--oe-text-soft); }
.sri .tile .k { font-family: 'DM Sans', system-ui, sans-serif; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-text-soft); }
.sri .chart { position: relative; width: 100%; }
.sri .chart svg { display: block; width: 100%; height: auto; }
.sri .chart .ax { fill: var(--oe-text-faint); font-family: 'DM Sans', system-ui, sans-serif; font-size: 11px; }
.sri .chart .ax.t { fill: var(--oe-text); font-size: 15px; font-weight: 600; }
.sri .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sri .scroll-x > .chart { min-width: 56rem; }
.sri .scroll-x > .chart.narrow { min-width: 40rem; }
.sri .tip { position: absolute; z-index: 5; pointer-events: none; min-width: 13rem; background: var(--oe-surface); border: 1px solid var(--oe-border); border-radius: var(--oe-radius-md); box-shadow: var(--oe-shadow-card-hover); padding: .625rem .75rem; font-size: .8125rem; }
.sri .tip .t { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; color: var(--oe-text); margin-bottom: .25rem; }
.sri .tip .r { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; color: var(--oe-text); }
.sri .tip .r span:first-child { display: inline-flex; align-items: center; gap: .375rem; color: var(--oe-text-soft); }
.sri .tip .r.total { border-top: 1px solid var(--oe-border); margin-top: .25rem; padding-top: .25rem; font-weight: 600; }

/* Ayuda del conmutador de vista. El atributo title del navegador pintaba un recuadro gris del
   sistema, ajeno a la página; esto es el mismo texto con la tipografía y el color de la casa.
   Sale al pasar el ratón y también al enfocar con teclado, que el title sí hacía.
   Anclada por la derecha y no centrada en el botón: el conmutador vive pegado al borde derecho de
   la barra, así que una caja centrada se saldría de la pantalla en cuanto se estreche. */
.sri .seg .tipwrap { position: relative; display: inline-flex; }
.sri .tip-ayuda { position: absolute; top: calc(100% + .5rem); right: 0; transform: translateY(-.25rem);
  z-index: 20; width: max-content; max-width: min(17rem, 80vw); padding: .5rem .625rem; border-radius: var(--oe-radius-md);
  background: var(--oe-surface-900); color: var(--oe-surface-50); font-size: .75rem; line-height: 1.4; font-weight: 400;
  text-align: left; white-space: normal; box-shadow: 0 8px 24px -8px #0f172a59;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .13s, transform .13s, visibility .13s; }
/* La flecha sale del propio fondo girado 45°, así nunca se despega del color de la caja. */
.sri .tip-ayuda::before { content: ""; position: absolute; bottom: 100%; right: 1.25rem; margin-bottom: -4px;
  width: 10px; height: 10px; background: var(--oe-surface-900); transform: rotate(45deg); border-radius: 1px; }
.sri .seg .tipwrap:hover .tip-ayuda, .sri .seg .tipwrap:focus-within .tip-ayuda {
  opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .sri .tip-ayuda { transition: none; } }
.sri .two-col { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
.sri .two-col { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; }
}
.sri .two-col .aside { display: grid; gap: 1.5rem; }
/* el titulo dentro de la columna: asi el aside arranca a su altura y no cuelga por debajo de la tarjeta */
.sri .two-col .col-stack { display: grid; gap: 1.25rem; align-content: start; }
.sri .two-col .col-stack .subhead { margin-top: 0; }
.sri .stats-row { display: grid; gap: 1.5rem 2rem; align-items: center; grid-template-columns: minmax(0, 1fr) auto; }
.sri .stats-row .cols { display: grid; gap: 1.25rem; }
.sri .aside .stat.big .v { font-size: 3.25rem; color: var(--oe-brand-strong); }
@media (max-width: 480px) {
.sri .stats-row { grid-template-columns: minmax(0, 1fr); }
  .sri .aside .stat.big .v { font-size: 2.5rem; }
}
.sri .aside .stat .v { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 2rem; line-height: 1.1; color: var(--oe-text); }
.sri .aside .stat .v small { font-size: .875rem; color: var(--oe-text-soft); font-weight: 500; margin-left: .25rem; }
.sri .aside .stat .k { font-family: 'DM Sans', system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-text-soft); }
.sri .table-wrap { overflow-x: auto; }
.sri table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sri table.data th { font-family: 'DM Sans', system-ui, sans-serif; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-text-soft); text-align: right; padding: 0 .75rem .625rem; border-bottom: 1px solid var(--oe-border); white-space: nowrap; }
.sri table.data td { padding: .5rem .75rem; text-align: right; border-bottom: 1px solid var(--oe-border); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sri table.data th:first-child, .sri table.data td:first-child { text-align: left; }
.sri table.data td.pos { color: var(--oe-success-strong); }
.sri table.data td.neg { color: var(--oe-danger); }
.sri table.data tr.total td { font-weight: 600; border-bottom: 0; }
.sri .notes { font-size: .8125rem; font-style: italic; color: var(--oe-text-faint); max-width: 60rem; }
.sri .dark { background: var(--oe-surface-950); color: #fff; }
.sri .dark .inner { padding-top: 5rem; padding-bottom: 5rem; }
.sri .dark h2 { color: #fff; font-size: 1.875rem; font-weight: 700; margin-top: .75rem; }
.sri .dark .intro { color: var(--oe-surface-300); font-size: 1.125rem; margin-top: .75rem; max-width: 46rem; }
.sri .dark .eyebrow { color: var(--oe-brand-400); }
.sri .rows { margin-top: 2.5rem; display: grid; }
.sri .row { display: grid; gap: .5rem 2rem; padding: 1.75rem 0; border-top: 1px solid var(--oe-surface-800); }
@media (min-width: 900px) {
.sri .row { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.2fr); }
}
.sri .row .n { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; color: var(--oe-brand-400); }
.sri .row h3 { font-size: 1.125rem; font-weight: 600; color: #fff; }
.sri .row p { margin-top: .375rem; color: var(--oe-surface-300); }
.sri .row ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .375rem; color: var(--oe-surface-300); font-size: .9375rem; }
.sri .row li strong { color: #fff; font-weight: 600; }
.sri .fleet-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sri table.data td .code { color: var(--oe-text-soft); font-size: .8125rem; }
.sri .capbar { position: relative; height: .75rem; border-radius: 4px; background: var(--oe-surface-100); overflow: hidden; }
.sri .capbar i { position: absolute; top: 0; bottom: 0; display: block; }
.sri .capbar i.real { width: 2px; }
  :root[data-theme="dark"] .sri .capbar { background: var(--oe-surface-800); }
.sri .subhead { display: grid; gap: .5rem; margin-top: 2rem; max-width: 46rem; }
.sri .subhead.wide { max-width: none; }
.sri .subhead h3 { font-size: 1.5rem; line-height: 1.25; font-weight: 700; }
.sri .worked { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
.sri .worked { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sri .worked .v { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: 1.375rem; line-height: 1.2; color: var(--oe-text); font-variant-numeric: tabular-nums; }
.sri .worked .k { font-family: 'DM Sans', system-ui, sans-serif; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-text-faint); margin-top: .25rem; }
.sri .worked .f { font-size: .8125rem; color: var(--oe-text-soft); margin-top: .125rem; }
.sri .worked .result .v { color: var(--oe-brand-strong); }
.sri .worked .contrast { border-left: 2px solid var(--oe-chart-2); padding-left: .875rem; }
.sri .worked .contrast .v { color: var(--oe-chart-2); }
.sri .worked .grp { grid-column: 1 / -1; font-family: 'DM Sans', system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-brand-strong); border-top: 1px solid var(--oe-border); padding-top: .875rem; }
.sri .worked .grp:first-child { border-top: 0; padding-top: 0; }
.sri .steps { margin: 0; padding-left: 1.25rem; display: grid; gap: .625rem; color: var(--oe-text); font-size: .9375rem; }
.sri .steps li::marker { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; color: var(--oe-brand-strong); }
.sri .legend.static span { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--oe-text-soft); }
.sri details.checks summary { cursor: pointer; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; color: var(--oe-text); }
.sri details.checks summary::marker { color: var(--oe-brand); }
.sri details.checks ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .875rem; }
.sri details.checks li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .125rem .75rem; }
.sri details.checks li .st { font-family: 'DM Sans', system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--oe-success-strong); padding-top: .125rem; }
.sri details.checks li .st.fail { color: var(--oe-danger); }
.sri details.checks li .n { color: var(--oe-text); font-weight: 500; }
.sri details.checks li .d { grid-column: 2; font-size: .8125rem; color: var(--oe-text-soft); }
.sri .loading { padding: 3rem 0; text-align: center; font-size: .875rem; color: var(--oe-text-faint); }