/* finlab.css — external on purpose, not by preference.
 *
 * FinLab is served by TQH's own FastAPI process (ADR-018), so it inherits
 * TQH's security headers, and those include:
 *
 *     content-security-policy: default-src 'self'
 *
 * With no 'unsafe-inline', a <style> block is parsed into the DOM and then
 * never applied: the element is there, document.styleSheets is empty, and the
 * page renders in Times New Roman on a transparent background with no error
 * that says why. An external stylesheet from the same origin is allowed.
 *
 * The same rule bans style="" attributes written into markup, which is why
 * series colours are classes (.s1/.s2) rather than inline custom properties.
 * Setting element.style.* from JavaScript is CSSOM and stays allowed, but
 * classes keep the two paths from diverging.
 */
/* --- tipografía: la superfamilia de TQH, servida desde aquí ------------- */
@font-face{font-family:Alegreya;src:url(fonts/Alegreya-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Alegreya;src:url(fonts/Alegreya-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Alegreya;src:url(fonts/Alegreya-700.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Alegreya Sans';src:url(fonts/AlegreyaSans-400.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Alegreya Sans';src:url(fonts/AlegreyaSans-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Alegreya Sans';src:url(fonts/AlegreyaSans-700.woff2)format('woff2');font-weight:700;font-display:swap}

/* --- paleta: la de referencia de la skill, validada sobre ESTE crema ----
   node validate_palette.js "<8 tonos>" --mode light  --surface #FBF7EF -> todo PASA
   node validate_palette.js "<8 tonos>" --mode dark   --surface #17150F -> todo PASA
   En claro, cuatro tonos quedan bajo 3:1 de contraste. Eso obliga a
   etiquetas directas y a una vista de tabla; ambas existen. No es un aviso
   que se pueda descartar.                                                */
:root{
  color-scheme:light;
  --page:#F5EFE3; --surface-1:#FBF7EF; --surface-2:#F0E8D8;
  --text-primary:#1E1A12; --text-secondary:#57503F; --text-muted:#847A63;
  --line:#E0D5BF; --line-strong:#C9BB9E;
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
  --series-4:#eda100; --series-5:#e87ba4; --series-6:#008300;
  --up:#0b6b3a; --down:#a8322f;
  --shadow:0 1px 2px rgba(30,26,18,.05),0 8px 24px -12px rgba(30,26,18,.18);
}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme=light])){
  color-scheme:dark;
  --page:#12100B; --surface-1:#17150F; --surface-2:#201D15;
  --text-primary:#F6F1E6; --text-secondary:#C0B8A6; --text-muted:#948B78;
  --line:#2E2A20; --line-strong:#463F30;
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
  --series-4:#c98500; --series-5:#d55181; --series-6:#008300;
  --up:#4fbb7f; --down:#e66767;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}}
:root[data-theme=dark]{
  color-scheme:dark;
  --page:#12100B; --surface-1:#17150F; --surface-2:#201D15;
  --text-primary:#F6F1E6; --text-secondary:#C0B8A6; --text-muted:#948B78;
  --line:#2E2A20; --line-strong:#463F30;
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
  --series-4:#c98500; --series-5:#d55181; --series-6:#008300;
  --up:#4fbb7f; --down:#e66767;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--text-primary);
  font:400 clamp(17px,1.02rem + .25vw,20px)/1.62 Alegreya,Georgia,serif;
  font-feature-settings:"kern","liga";
}
.col{max-width:70ch;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.wide{max-width:104ch}
.ui{font-family:'Alegreya Sans',system-ui,sans-serif}
.num{font-variant-numeric:tabular-nums lining-nums}

/* --- cabecera ----------------------------------------------------------- */
/* padding-block, never the shorthand: the masthead also carries .col, and a `0` in the horizontal slot of `padding` cancels the page gutter. See tests/test_site_layout.py */
.masthead{padding-block:clamp(3rem,9vw,6rem) clamp(1.5rem,4vw,2.5rem)}
.eyebrow{font-family:'Alegreya Sans',sans-serif;font-weight:500;font-size:.76rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin:0 0 .9rem}
h1{font-size:clamp(2.6rem,1.7rem + 3.6vw,4.4rem);line-height:1.03;font-weight:700;
  letter-spacing:-.022em;margin:0 0 .7rem;text-wrap:balance}
.standfirst{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.5;
  color:var(--text-secondary);margin:0;max-width:56ch;text-wrap:pretty}

h2{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1.15;font-weight:700;
  letter-spacing:-.015em;margin:0 0 .4rem;text-wrap:balance}
.section-note{color:var(--text-secondary);margin:0 0 1.6rem;max-width:60ch;text-wrap:pretty}
section{padding-block:clamp(2.2rem,6vw,3.6rem)}
section+section{border-top:1px solid var(--line)}

/* --- rejilla de hallazgos ----------------------------------------------- */
.findings{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:1.6rem}
.finding{appearance:none;text-align:left;cursor:pointer;
  background:var(--surface-1);border:1px solid var(--line);border-radius:14px;
  padding:1.2rem 1.25rem 1rem;color:inherit;font:inherit;
  box-shadow:var(--shadow);transition:transform .16s ease,border-color .16s ease}
.finding:hover,.finding:focus-visible{transform:translateY(-2px);border-color:var(--line-strong)}
.finding:focus-visible{outline:2px solid var(--series-1);outline-offset:3px}
.finding h3{font-size:1.02rem;line-height:1.28;margin:0 0 .7rem;font-weight:700;
  letter-spacing:-.005em}
.headline{font-family:'Alegreya Sans',sans-serif;font-weight:700;
  font-size:clamp(2rem,1.5rem + 1.6vw,2.7rem);line-height:1;letter-spacing:-.03em;
  margin:0;display:block}
.headline.up{color:var(--up)} .headline.down{color:var(--down)}
.finding p{margin:.55rem 0 0;font-size:.95rem;line-height:1.45;color:var(--text-secondary)}
.spark{display:block;width:100%;height:44px;margin:.85rem 0 .1rem;overflow:visible}
.finding footer{margin-top:.8rem;font-family:'Alegreya Sans',sans-serif;
  font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}

/* --- controles ---------------------------------------------------------- */
.controls{display:grid;gap:.9rem 1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:1.5rem}
label{display:block;font-family:'Alegreya Sans',sans-serif;font-weight:500;
  font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:.35rem}
select,input[type=date]{width:100%;padding:.6rem .7rem;border:1px solid var(--line-strong);
  border-radius:9px;background:var(--surface-1);color:var(--text-primary);
  font:400 .96rem/1.3 'Alegreya Sans',sans-serif}
select:focus-visible,input:focus-visible{outline:2px solid var(--series-1);outline-offset:1px}

/* --- figura ------------------------------------------------------------- */
figure{margin:0}
.plot{position:relative;background:var(--surface-1);border:1px solid var(--line);
  border-radius:14px;padding:1rem .9rem .6rem;box-shadow:var(--shadow)}
.plot svg{display:block;width:100%;height:auto;touch-action:pan-y}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin:0 0 .9rem;padding:0;list-style:none;
  font-family:'Alegreya Sans',sans-serif;font-size:.9rem}
.legend li{display:flex;align-items:baseline;gap:.45rem;color:var(--text-secondary)}
.key{width:.7rem;height:.7rem;border-radius:3px;flex:none;translate:0 .05rem}
.legend b{color:var(--text-primary);font-weight:500}
.tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .1s;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:9px;
  padding:.5rem .6rem;font-family:'Alegreya Sans',sans-serif;font-size:.85rem;
  box-shadow:var(--shadow);min-width:11rem;z-index:2}
.tip.on{opacity:1}
.tip .when{color:var(--text-muted);font-size:.76rem;letter-spacing:.05em;
  text-transform:uppercase;display:block;margin-bottom:.35rem}
.tip .row{display:flex;align-items:baseline;gap:.45rem;justify-content:space-between}
.tip .row span{display:flex;align-items:baseline;gap:.4rem;color:var(--text-secondary)}
.tip .row b{font-weight:500;color:var(--text-primary)}
.tip .row b.raw{color:var(--text-muted);font-weight:400;font-size:.92em}
.tip .row .raw{min-width:1.15rem}

.verdict{font-size:1.12rem;line-height:1.5;margin:1.4rem 0 0;text-wrap:pretty}
.verdict strong{font-family:'Alegreya Sans',sans-serif;font-weight:700;
  letter-spacing:-.01em;font-size:1.16em}
.method{margin:1rem 0 0;font-size:.92rem;line-height:1.55;color:var(--text-muted);
  text-wrap:pretty}
.method b{color:var(--text-secondary);font-weight:500}

/* --- respuesta puntual --------------------------------------------------- */
.answer{font-family:'Alegreya Sans',sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2.4rem,1.8rem + 2.4vw,3.4rem);line-height:1;margin:.2rem 0 .1rem}
.answer .unit{font-size:.34em;font-weight:500;letter-spacing:0;color:var(--text-muted);
  margin-left:.5rem}
.stale{color:var(--series-2)}

/* --- tablas -------------------------------------------------------------- */
details{margin-top:1.1rem}
summary{cursor:pointer;font-family:'Alegreya Sans',sans-serif;font-size:.88rem;
  color:var(--text-secondary);padding:.35rem 0}
summary:focus-visible{outline:2px solid var(--series-1);outline-offset:2px}
.scroll{overflow-x:auto;margin-top:.7rem}
table{border-collapse:collapse;width:100%;font-family:'Alegreya Sans',sans-serif;font-size:.9rem}
th,td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-weight:500;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-muted)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface-2)}

a{color:var(--series-1);text-underline-offset:.16em}
.err{color:var(--down)}
footer.site{border-top:1px solid var(--line);margin-top:2rem;
  padding-block:2.2rem 3.5rem;color:var(--text-muted);font-size:.92rem}
footer.site p{margin:0 0 .6rem;max-width:62ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:9;background:var(--surface-1);
  padding:.6rem .9rem;border-radius:8px;border:1px solid var(--line-strong)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* series colours as classes: CSP forbids style="" in markup */
.key.s1,.tip .row .s1{background:var(--series-1)}
.key.s2,.tip .row .s2{background:var(--series-2)}
.key.s3,.tip .row .s3{background:var(--series-3)}
.key.s4,.tip .row .s4{background:var(--series-4)}
.key.s5,.tip .row .s5{background:var(--series-5)}
.key.s6,.tip .row .s6{background:var(--series-6)}
.label-s1{fill:var(--series-1)} .label-s2{fill:var(--series-2)}

/* --- el panel de países -------------------------------------------------
   Tres bloques, tres tonos en orden fijo; nunca se reciclan cuando un filtro
   cambia el número de series. Revalidados sobre estas dos superficies:
     claro  #2a78d6,#eb6834,#1baf7a sobre #FBF7EF -> pasa, con aviso de
            contraste (<3:1) que obligan a etiqueta directa y vista de tabla;
     oscuro #3987e5,#d95926,#199e70 sobre #17150F -> pasa entero.
   De ahí que cada barra lleve su cifra escrita y cada gráfico su <details>
   con la tabla: no son adorno, son el desahogo que el aviso exige.        */
.key.ring{background:transparent;border:2px solid var(--text-primary)}

.button{
  font:500 .95rem/1 'Alegreya Sans',system-ui,sans-serif;
  padding:.62rem 1.1rem;border-radius:8px;cursor:pointer;
  background:var(--surface-2);color:var(--text-primary);
  border:1px solid var(--line-strong);
}
.button:hover{border-color:var(--text-muted)}
.button:focus-visible{outline:2px solid var(--series-1);outline-offset:2px}

select[multiple]{padding:.3rem}

/* Ejes y rejilla recesivos: son referencia, no contenido. */
.axis-line{stroke:var(--line-strong);stroke-width:1}
.grid{stroke:var(--line);stroke-width:1}
.tick{fill:var(--text-muted);font-family:'Alegreya Sans',sans-serif;font-size:12px}
.axis-title{fill:var(--text-secondary);font-family:'Alegreya Sans',sans-serif;
  font-size:13px;font-weight:500}

/* Barras: extremo redondeado de 4px anclado al valor, 2px de hueco entre
   barras contiguas (de ahí la altura de fila menos 4). */
.rank .bar rect{fill:var(--series-1)}
.rank .bar.s2 rect{fill:var(--series-2)}
.rank .bar.s3 rect{fill:var(--series-3)}
.rank .bar .name{fill:var(--text-secondary);font-family:'Alegreya Sans',sans-serif;
  font-size:12px;font-variant-numeric:tabular-nums}
.rank .bar .value{fill:var(--text-primary);font-family:'Alegreya Sans',sans-serif;
  font-size:12px;font-variant-numeric:tabular-nums}
/* España: anillo, no otro color. La identidad nunca es sólo el tono. */
.rank .bar.home rect{stroke:var(--text-primary);stroke-width:2}
.rank .bar.home .name,.rank .bar.home .value{fill:var(--text-primary);font-weight:700}

.scatter .dot circle{fill:var(--series-1);stroke:var(--surface-1);stroke-width:2}
.scatter .dot.s2 circle{fill:var(--series-2)}
.scatter .dot.s3 circle{fill:var(--series-3)}
.scatter .dot.home circle{stroke:var(--text-primary);stroke-width:2.5}
.scatter .dot .name{fill:var(--text-primary);font-family:'Alegreya Sans',sans-serif;
  font-size:13px;font-weight:700}

tr.home td{font-weight:700;color:var(--text-primary)}

/* The hover target: bigger than the mark, invisible. Declared after the
   fills above and with one more class, so it never takes a series colour. */
.rank .bar rect.hit,.scatter .dot circle.hit{fill:transparent;stroke:none}
.rank .bar:hover rect.hit{fill:var(--surface-2)}
/* España's name sits on top of the other dots; a halo in the surface colour
   keeps it legible where it crosses them. */
.scatter .dot .name{paint-order:stroke;stroke:var(--surface-1);stroke-width:4px;
  stroke-linejoin:round}
/* Last value of each line: text colour, never the series hue (several sit
   under 3:1 on this cream). The dot beside the line carries the identity. */
/* --- the front page: eight figures ----------------------------------------
   Four across on a desktop, two on a phone. The figure is the largest thing
   in the tile; the comparison, the shape and the date follow in that order,
   because that is the order the questions come in. */
.kpis{display:grid;gap:.8rem;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface-1);border:1px solid var(--line);border-radius:14px;
  padding:.85rem .95rem .75rem;box-shadow:var(--shadow);min-width:0;
  transition:transform .16s ease,border-color .16s ease}
.kpi:hover,.kpi:focus-visible{transform:translateY(-2px);border-color:var(--line-strong)}
.kpi:focus-visible{outline:2px solid var(--series-1);outline-offset:3px}
.kpi-label{font-family:'Alegreya Sans',sans-serif;font-weight:700;font-size:.95rem;
  color:var(--text-primary)}
.kpi-value{font-family:'Alegreya Sans',sans-serif;font-weight:700;
  font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);line-height:1.05;letter-spacing:-.02em;
  margin-top:.3rem;color:var(--text-primary)}
.kpi-delta{font-family:'Alegreya Sans',sans-serif;font-size:.84rem;
  color:var(--text-secondary);margin-top:.2rem}
.kpi .spark{height:34px;margin:.55rem 0 .35rem}
.kpi-sub{font-size:.82rem;line-height:1.3;color:var(--text-secondary)}
.kpi-foot{font-family:'Alegreya Sans',sans-serif;font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-muted);margin-top:.35rem}
@media (max-width:640px){
  .kpis{gap:.5rem}
  .kpi{padding:.65rem .7rem .6rem}
  .kpi-value{font-size:1.45rem}
  .kpi-sub{display:none}
}

/* --- the catalogue ---------------------------------------------------------
   Search on its own row and as wide as the page on a phone; filters beside
   it where they fit. The table scrolls inside its own box so the page under
   it is still a page, with the header pinned while it does. */
.catalog-controls{display:grid;gap:.7rem 1rem;margin-bottom:.6rem;
  grid-template-columns:minmax(14rem,2fr) repeat(4,minmax(8rem,1fr))}
.catalog-search input{width:100%;padding:.6rem .7rem;border:1px solid var(--line-strong);
  border-radius:9px;background:var(--surface-1);color:var(--text-primary);font-size:1rem}
.catalog-search input::placeholder{color:var(--text-muted)}
@media (max-width:900px){
  .catalog-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-search{grid-column:1/-1}
}
.cat-count{font-size:.85rem;color:var(--text-muted);margin:0 0 .5rem}
.cat-scroll{max-height:30rem;overflow:auto;overscroll-behavior:contain;
  background:var(--surface-1);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow)}
table.catalog{font-size:.9rem}
table.catalog th{position:sticky;top:0;z-index:1;background:var(--surface-1)}
table.catalog td{vertical-align:middle;padding-block:.5rem}
.cat-sort{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit}
.cat-sort::after{content:' ↕';opacity:.45}
th[aria-sort=ascending] .cat-sort::after{content:' ↑';opacity:1}
th[aria-sort=descending] .cat-sort::after{content:' ↓';opacity:1}
.cat-sort:focus-visible{outline:2px solid var(--series-1);outline-offset:2px}
.cat-row{cursor:pointer}
td.cat-name{white-space:normal;min-width:14rem;max-width:30rem}
.cat-open{all:unset;cursor:pointer;color:var(--text-primary);font-weight:500;
  line-height:1.3;display:block}
.cat-open:hover{color:var(--series-1);text-decoration:underline;text-underline-offset:.16em}
.cat-open:focus-visible{outline:2px solid var(--series-1);outline-offset:2px}
.cat-meta{display:block;font-size:.76rem;color:var(--text-muted);margin-top:.1rem}
.spark-mini{display:block;width:96px;height:26px;overflow:visible}
.spark-mini path,.spark path{fill:none;stroke:var(--series-1);stroke-width:1.5;
  stroke-linejoin:round;stroke-linecap:round}
td.cat-last{font-weight:600;color:var(--text-primary)}
.cat-when{display:block;font-size:.74rem;font-weight:400;color:var(--text-muted)}
td.cat-source,td.cat-cover{color:var(--text-secondary)}
.cat-empty{color:var(--text-muted);white-space:normal;padding:1rem}
@media (max-width:640px){
  .cat-source,.cat-cover{display:none}
  td.cat-name{min-width:0}
  .spark-mini{width:64px}
  .cat-scroll{max-height:26rem}
}

/* --- the series' page ------------------------------------------------------
   The four things looked for first, in one strip; then chart and table side
   by side where there is room, stacked where there is not. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:.6rem 1rem;margin:.4rem 0 1rem;padding:0}
.facts div{background:var(--surface-1);border:1px solid var(--line);
  border-radius:10px;padding:.55rem .75rem}
.facts dt{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 .15rem}
.facts dd{margin:0;font-size:1.02rem;font-weight:600;color:var(--text-primary);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.facts-note{display:block;font-size:.78rem;font-weight:400;color:var(--text-muted)}
@media (max-width:640px){
  .facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
  .facts div{padding:.4rem .5rem;border-radius:8px}
  .facts dt{font-size:.6rem;letter-spacing:.06em}
  .facts dd{font-size:.92rem}
  .facts-note{font-size:.7rem}
}
.ficha{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .ficha{grid-template-columns:minmax(0,1fr) minmax(20rem,24rem);align-items:start}
  .ficha-scroll{max-height:23rem}
  /* Beside a tall chart (a 38-country ranking) the table takes the chart's
     whole height instead of stopping a third of the way down. */
  .ficha.stretch{align-items:stretch}
  .ficha.stretch .ficha-data{display:flex;flex-direction:column}
  .ficha.stretch .ficha-scroll{flex:1 1 0;max-height:none;min-height:12rem}
}
.ficha-data{background:var(--surface-1);border:1px solid var(--line);
  border-radius:14px;padding:.7rem .7rem .4rem;box-shadow:var(--shadow);min-width:0}
.ficha-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.ficha-count{font-size:.8rem;color:var(--text-muted);margin-right:auto}
a.button{text-decoration:none;display:inline-block}
.link-field{flex:1 1 100%;font-size:.8rem;padding:.35rem .5rem;border:1px solid var(--line-strong);
  border-radius:7px;background:var(--surface-2);color:var(--text-primary)}
.ficha-note{font-size:.8rem;color:var(--text-muted);margin:0 0 .4rem}
.ficha-scroll{max-height:20rem;overflow:auto;overscroll-behavior:contain}
.ficha-scroll table{font-size:.86rem}
.ficha-scroll th{position:sticky;top:0;background:var(--surface-1);z-index:1;
  white-space:normal;vertical-align:bottom;line-height:1.25}
.ficha-scroll th,.ficha-scroll td{padding:.4rem .45rem}
.ficha-scroll th .key{display:inline-block;margin-right:.3rem}
.ficha-scroll th.series-head{text-transform:none;letter-spacing:0;font-size:.78rem;
  min-width:7rem;color:var(--text-secondary)}
td.muted{color:var(--text-secondary)}
.end-label{fill:var(--text-primary);font-family:'Alegreya Sans',sans-serif;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.tick{font-variant-numeric:tabular-nums}
.plot .tip{max-width:min(20rem,90%)}
.plot .tip .row span{white-space:normal}

/* --- navegación, filtros y constructor ----------------------------------
   La página tiene ocho secciones; sin un índice es un scroll a ciegas.
   Pegajoso arriba en pantallas altas, y en móvil se desliza en horizontal
   en vez de romper el ancho.                                             */
.toc{
  position:sticky;top:0;z-index:5;display:flex;gap:.15rem;overflow-x:auto;
  background:color-mix(in srgb,var(--page) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding:.5rem clamp(1rem,4vw,2rem);scrollbar-width:thin;
}
.toc a{
  flex:none;color:var(--text-secondary);text-decoration:none;
  font-size:.86rem;padding:.35rem .7rem;border-radius:7px;white-space:nowrap;
}
.toc a:hover{background:var(--surface-2);color:var(--text-primary)}
.toc a:focus-visible{outline:2px solid var(--series-1);outline-offset:-2px}

/* Un desplegable con 88 opciones es un scroll, no una elección. */
.filter{
  width:100%;margin-bottom:.35rem;font-size:.86rem;padding:.4rem .6rem;
  border:1px solid var(--line);border-radius:7px;
  background:var(--surface-1);color:var(--text-primary);
}
.filter::placeholder{color:var(--text-muted)}

/* Casillas, no un <select multiple>: éste parece una lista y sólo se comporta
   como tal si sabes que hay que pulsar ctrl, así que la mayoría de la gente
   selecciona una sola cosa sin querer. */
.bloc-filter{
  border:1px solid var(--line);border-radius:9px;padding:.5rem .8rem .7rem;
  margin:0;display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:center;
}
.bloc-filter legend{
  font-family:'Alegreya Sans',sans-serif;font-size:.72rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);
  padding:0 .3rem;
}
.bloc-filter label{
  display:flex;align-items:center;gap:.35rem;
  font-family:'Alegreya Sans',sans-serif;font-size:.92rem;cursor:pointer;
}

.basket-row{
  display:grid;grid-template-columns:1fr 5.5rem auto auto;
  gap:.5rem;align-items:center;margin-bottom:.5rem;
}
.basket-row .weight{
  padding:.55rem .6rem;border:1px solid var(--line);border-radius:7px;
  background:var(--surface-1);color:var(--text-primary);
  font-family:'Alegreya Sans',sans-serif;
}
.basket-row .pct{color:var(--text-muted)}
.basket-row .button{padding:.5rem .7rem;line-height:1}
.button:disabled{opacity:.45;cursor:not-allowed}

.shared{list-style:none;padding:0;margin:0}
.shared li{
  padding:.6rem 0;border-bottom:1px solid var(--line);
  font-family:'Alegreya Sans',sans-serif;font-size:.95rem;
}
.shared li:last-child{border-bottom:0}
.muted{color:var(--text-muted)}

/* `hidden` es un atributo, pero `display:grid` en .controls gana por
   especificidad y deja el bloque a la vista. Esto le devuelve el sentido:
   se vio en una captura del constructor con los dos modos superpuestos. */
[hidden]{display:none !important}

/* --- timeline section ---------------------------------------------------
 * The controls sit above the chart and wrap on a phone. `.line-field` exists
 * so the search box ui.js inserts stacks over its select instead of landing
 * between the select and the weight box. */
.lines{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.line-row{display:flex;align-items:flex-end;gap:.55rem;flex-wrap:wrap}
.line-row>.key{flex:0 0 auto;margin-bottom:.75rem}
.line-field{flex:1 1 16rem;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.line-field select{width:100%}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
  margin:.2rem 0 1.1rem}
.toolbar .inline{font-size:.85rem;color:var(--text-muted)}
.button.small{padding:.34rem .7rem;font-size:.85rem}

.chipset{display:flex;align-items:center;gap:.45rem}
.chipset-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted)}
.chips{display:flex;gap:.25rem}
.chip{padding:.3rem .62rem;font-size:.83rem;border-radius:7px;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:inherit;
  font-family:'Alegreya Sans',sans-serif}
.chip[aria-pressed=true]{background:var(--series-1);border-color:var(--series-1);
  color:var(--surface-1);font-weight:600}
.chip:hover{border-color:var(--series-1)}

.builder{border:1px solid var(--line-strong);border-radius:14px;
  padding:1.1rem 1.1rem .8rem;margin-bottom:1.2rem;background:var(--surface-2,transparent)}
.builder h3{margin:0 0 .5rem;font-size:1.05rem}
.builder .basket-row{display:flex;align-items:flex-end;gap:.5rem;
  flex-wrap:wrap;margin-bottom:.6rem}
.builder .weight{width:5rem;text-align:right}

/* A folded catalogue is still a catalogue: the summary has to look like
   something you can open, not like a heading that happens to have a marker. */
details.fold{border-top:1px solid var(--line);padding:.6rem 0}
details.fold>summary{cursor:pointer;font-family:'Alegreya Sans',sans-serif;
  font-weight:600;padding:.4rem 0;color:var(--text-secondary)}
details.fold>summary:hover{color:var(--text-primary)}
details.fold[open]>summary{color:var(--text-primary);margin-bottom:.4rem}
/* A chip is 29 px tall, which is fine under a mouse and small under a thumb.
   Measured at 375 px before this rule existed. Only coarse pointers pay the
   extra height, so the desktop toolbar stays compact. */
@media (pointer:coarse){
  .chip,.button.small{min-height:40px;padding-inline:.85rem}
  .line-row .button.small{min-height:40px}
}
/* --- combobox -----------------------------------------------------------
 * The search is INSIDE the dropdown. One field: click it, type, the list
 * below filters in place, and nothing is chosen until you choose it. The
 * native <select> is still there, hidden, holding the value — so every
 * caller keeps reading .value and listening for change. */
.combo{position:relative;display:block;width:100%}
.combo select[hidden]{display:none}
.combo-field{width:100%;padding:.55rem 2rem .55rem .7rem;
  border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-1);
  color:var(--text-primary);font:inherit;font-family:'Alegreya Sans',sans-serif;
  font-size:.94rem;text-overflow:ellipsis}
.combo-field::placeholder{color:var(--text-muted)}
.combo.is-open .combo-field{border-color:var(--series-1);
  border-bottom-left-radius:0;border-bottom-right-radius:0}
.combo-caret{position:absolute;top:0;right:0;height:100%;width:2rem;
  border:0;background:none;color:var(--text-muted);cursor:pointer;
  font-size:.8rem;line-height:1;padding:0}
.combo.is-open .combo-caret{color:var(--series-1);transform:rotate(180deg)}

.combo-list{position:absolute;z-index:40;top:100%;left:0;right:0;
  max-height:19rem;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:.25rem 0;list-style:none;
  background:var(--surface-1);border:1px solid var(--series-1);border-top:0;
  border-radius:0 0 8px 8px;box-shadow:0 10px 28px -14px rgba(0,0,0,.5)}
.combo-group{padding:.45rem .7rem .2rem;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-muted);
  font-family:'Alegreya Sans',sans-serif}
.combo-option{padding:.42rem .7rem;cursor:pointer;font-size:.93rem;
  line-height:1.3;overflow-wrap:anywhere}
.combo-option.is-current{font-weight:600}
.combo-option.is-current::after{content:' ✓';color:var(--series-1)}
.combo-option.is-active{background:var(--series-1);color:var(--surface-1)}
.combo-option.is-active::after{color:var(--surface-1)}
.combo-empty{padding:.6rem .7rem;color:var(--text-muted);font-size:.9rem}

@media (pointer:coarse){
  .combo-field{padding-block:.7rem}
  .combo-option{padding-block:.62rem}
}
/* --- what the chart IS --------------------------------------------------
 * It had no name anywhere a reader would look: the legend was clipped by
 * the plot width and the tooltip sat over it. With the builder open above,
 * describing a metric not yet drawn, there was nothing on screen tying the
 * two together. */
.chart-title{font-size:1.06rem;line-height:1.3;margin:0 0 .15rem;
  font-weight:700;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.chart-when{font-family:'Alegreya Sans',sans-serif;font-size:.82rem;
  color:var(--text-muted);margin:0 0 .7rem}
.chart-raw{font-size:.78rem;color:var(--text-muted);margin:-.4rem 0 .6rem;
  overflow-wrap:anywhere}
.preview-flag{font-family:'Alegreya Sans',sans-serif;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.2rem .45rem;
  border-radius:3px;background:var(--series-1);color:var(--surface-1);
  font-weight:700;flex:0 0 auto}
#tiempo-out.is-preview .plot{outline:2px dashed var(--series-1);
  outline-offset:8px;border-radius:4px}

/* --- worked examples ----------------------------------------------------
 * Reuses .finding, the card the front page already uses: same shape, same
 * affordance, so a reader who has clicked one knows what these do. */
.featured{margin:0 0 1.6rem}
.featured-head{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-muted);font-family:'Alegreya Sans',sans-serif;
  margin:0 0 .35rem}
.featured .findings{margin-top:.9rem}
.card-note{font-size:.8rem;line-height:1.4;color:var(--text-muted);
  margin-top:.55rem;font-style:italic}

/* Twelve cards stacked on a phone push the chart — which is the point of
   the section — a screenful and a half down. A snap strip keeps them
   browsable and the chart in view. Only below the grid's breakpoint: with
   room for columns, stacking is not the problem. */
@media (max-width:640px){
  .featured .findings{display:flex;gap:.7rem;overflow-x:auto;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    padding-bottom:.5rem;margin-inline:-1rem;padding-inline:1rem;
    scrollbar-width:thin}
  .featured .findings>.finding{flex:0 0 78%;scroll-snap-align:start}
  .featured .findings::after{content:'';flex:0 0 .25rem}
}

/* Which chart a shared metric opens in. Two worlds in one list needs the
   label, or every second click lands somewhere the reader did not expect. */
.shared-where{font-family:'Alegreya Sans',sans-serif;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;margin-left:.5rem;
  padding:.14rem .42rem;border-radius:3px;white-space:nowrap}
.shared-where.is-time{background:var(--accent-soft,rgba(0,0,0,.06));
  color:var(--series-1)}
.shared-where.is-panel{background:rgba(127,127,127,.14);
  color:var(--text-muted)}

/* "Nada coincide" is a dead end when the thing is on the site, just in the
   other half of it. Styled as an action, not as another option: it leaves
   this dropdown rather than choosing inside it. */
.combo-hint{padding:.55rem .7rem;margin-top:.2rem;cursor:pointer;
  font-size:.86rem;line-height:1.35;color:var(--series-1);
  border-top:1px solid var(--line);font-family:'Alegreya Sans',sans-serif}
.combo-hint:hover{background:var(--series-1);color:var(--surface-1)}