/* musicatlas, built in the same visual language as artatlas (../artatlas_project/artatlas/style.css):
   same paper, same chips, same segmented controls, same full-height app layout, so the two read
   as siblings. What is specific here: the catalogue table is the spine, and colour is spent on
   composers (a corpus of many) rather than on keys (which get an 8px swatch where they mean
   something). */
:root{
  --bg:#f6f3ee; --bar:#fff; --ink:#241a12; --muted:#6f665c; --faint:#a89e91; --line:#e5e0d6;
  --accent:#6a4a2a; --hot:#3a2317; --sand:#efe6d6; --sand-line:#d8c7a6;
  --ok:#6f9163; --comp:#5f83a0; --maj:#c08a33; --bad:#b0503b; --res:#7f66a0; --one:#d3cbc1;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:var(--bg);display:flex;flex-direction:column;height:100dvh}

#navbar{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;padding:5px 12px;
  background:var(--ink);font-size:12.5px}
#navbar .wordmark{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
#navbar .nav-sep{color:#8a7f72}
#navbar .nav-home{color:#cbbfae;text-decoration:none;white-space:nowrap}
#navbar .build{margin-left:auto;color:#8a7f72;font-size:6.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

#bar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:7px 16px;
  background:var(--bar);border-bottom:1px solid var(--line);z-index:500}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;cursor:pointer}
.brand:hover strong{text-decoration:underline}
.brand strong{display:block;font:600 16px/1.2 var(--serif);letter-spacing:.2px}
.brand small{color:var(--muted);font-size:12px}
.brand .mark{flex:0 0 auto}
#totals{margin-left:auto;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
#totals b{color:var(--ink);font-weight:600}

.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);
  border-radius:999px;background:#fff;cursor:pointer;user-select:none;font-size:13px;color:var(--ink)}
.chip:hover{border-color:var(--sand-line)}
.chip[aria-pressed=true],.chip.on{background:var(--sand);border-color:var(--sand-line);
  color:var(--hot);font-weight:600}
.chip .n{color:var(--faint);font-size:10.5px;font-variant-numeric:tabular-nums}
.chip[aria-pressed=true] .n{color:#9c8a6d}

/* composer selector, artatlas's painter popover, same shape */
.picker{position:relative;display:inline-block}
#comp-btn{cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--hot);
  background:var(--sand);border:1px solid var(--sand-line);border-radius:999px;padding:7px 15px;
  box-shadow:0 1px 3px rgba(0,0,0,.1)}
#comp-btn:hover{background:#e7dcc6;border-color:var(--sand-line)}
/* El panel de compositores NO FLOTA: es la columna izquierda de #main, a la misma altura
   que el catálogo, para poder marcar un compositor y ver a la vez cuánto encoge la tabla.
   Sin sombra ni esquinas redondeadas, porque las dos dicen "estoy por encima" y ya no lo
   está. Víctor, 2026-09-15. */
#comp-pop{display:flex;flex-direction:column;min-height:0;overflow:auto;background:#fff;
  border-right:1px solid var(--line);padding:10px 12px}
#comp-pop[hidden]{display:none}
.pop-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pop-top b{font:600 9.5px/1 system-ui,-apple-system,sans-serif;text-transform:uppercase;
  letter-spacing:.09em;color:var(--faint)}
.pop-x{border:1px solid var(--line);background:var(--bar);color:var(--muted);cursor:pointer;
  width:22px;height:22px;border-radius:50%;font-size:13px;line-height:1;padding:0}
.pop-x:hover{border-color:var(--bad);color:var(--bad)}
.pop-search{width:100%;padding:8px 10px;font:inherit;font-size:14px;border:1px solid var(--line);
  border-radius:6px}
.pop-actions{display:flex;gap:6px;margin:6px 0}
.pop-actions button{flex:1;font:inherit;font-size:12px;padding:3px;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;background:#faf7f1;color:var(--muted)}
.pop-list{list-style:none;margin:0;padding:0;min-height:0;flex:1;overflow-y:auto}
/* La lista ya no necesita su propio tope de altura: el panel es una columna con
   altura propia y scrollea ella. Dos scrolls anidados era lo que hacía falta cuando
   el panel caía flotando sobre la página. */
.pop-list .prow{display:flex;align-items:center}
.pop-list .prow label{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;
  padding:5px 4px;cursor:pointer;font-size:13px}
.pop-list .prow:hover{background:#faf7f1}
.pop-list .prow .only{flex:0 0 auto;margin-right:4px;padding:2px 7px;border:0;border-radius:999px;
  background:none;color:var(--accent);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
  opacity:0;text-transform:uppercase;letter-spacing:.3px}
.pop-list .prow:hover .only,.pop-list .prow:focus-within .only{opacity:.8}
.pop-list .prow .only:hover{opacity:1;text-decoration:underline;background:var(--sand)}
.pop-list .sw{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
/* En una columna de 290 px "Johann Sebastian Bach 1685-750 · 1587" ocupaba tres líneas y
   ninguna se leía. El nombre manda y va entero en su renglón; las fechas y el recuento,
   que son referencia y no identidad, bajan a un segundo renglón pequeño. */
.pop-list .pwho{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pop-list .pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-list .pyr{color:var(--faint);font-size:10.5px;font-variant-numeric:tabular-nums}
.pop-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding:7px 4px 2px;display:flex;align-items:center;gap:6px}
.pop-h .grp-only{margin-left:auto;border:0;background:none;color:var(--muted);font:inherit;
  font-size:10.5px;font-weight:700;text-transform:uppercase;cursor:pointer;opacity:0;
  padding:1px 6px;border-radius:999px}
.pop-h:hover .grp-only{opacity:.8}
.pop-h .grp-only:hover{opacity:1;background:var(--sand);text-decoration:underline}
@media(hover:none){.pop-list .prow .only,.pop-h .grp-only{opacity:.75}}

/* second row: search + views + toggles */
#modes{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;padding:6px 16px;
  background:var(--bar);border-bottom:1px solid var(--line)}
#q{flex:0 1 260px;padding:6px 11px;font:inherit;font-size:13px;border:1px solid var(--line);
  border-radius:6px;background:#fff}
#q:focus{outline:2px solid var(--sand-line);outline-offset:-1px}
#view-tabs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
#view-tabs button{border:0;border-radius:0;font:inherit;font-size:13px;padding:6px 14px;
  cursor:pointer;background:#fff;color:var(--muted)}
#view-tabs button+button{border-left:1px solid var(--line)}
#view-tabs button[aria-pressed=true]{background:var(--hot);color:#fff;font-weight:600}

/* ONE line, scrolled sideways. Wrapping looked harmless and measured 214px, the
   chrome then filled the whole viewport and the table was left with zero height.
   The filter row is a rail, not a paragraph. */
#facets{display:flex;gap:6px 12px;align-items:center;flex-wrap:nowrap;overflow-x:auto;
  padding:6px 16px;background:var(--bar);border-bottom:1px solid var(--line);font-size:13px;
  scrollbar-width:thin}
#facets::-webkit-scrollbar{height:5px}
#facets::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
#facets .fg{flex:0 0 auto}
#facets .chip{white-space:nowrap}
#facets .fg{display:flex;gap:5px;align-items:center;flex-wrap:nowrap}
#facets .fg > span.lbl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
/* the absence, drawn as an absence: present and clickable, but never competing for the
   eye with a value somebody actually recorded. */
#facets .chip[data-v^="\2205"]{color:var(--faint);font-style:italic}
#facets .chip[data-v^="\2205"][aria-pressed=true]{color:var(--hot);font-style:normal}
#facets .fg-over{color:var(--faint);font-size:10.5px;font-style:italic;white-space:nowrap;
  padding-left:2px}
.chip-sep{width:1px;align-self:stretch;margin:2px;background:var(--line);flex:0 0 1px}

/* content area scrolls, the chrome does not */
#content{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff}
#subbar{display:flex;align-items:center;gap:10px;padding:5px 14px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;font-size:13px;color:var(--muted)}
#subtabs{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
#subtabs button{padding:5px 12px;border:0;background:#fff;font:inherit;font-size:13px;
  font-weight:600;color:var(--muted);cursor:pointer}
#subtabs button+button{border-left:1px solid var(--line)}
#subtabs button[aria-pressed=true]{background:var(--hot);color:#fff}
#subbar b{color:var(--ink);font-variant-numeric:tabular-nums}
#subbar .right{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  justify-content:flex-end;max-width:70%}
.chip.mchip{display:inline-flex;align-items:center;gap:4px;background:var(--sand);
  border-color:var(--sand-line);color:var(--hot);font-weight:600;padding-right:4px}
.chip.mchip button{background:transparent;border:0;cursor:pointer;color:var(--muted);
  font-size:14px;padding:0 3px;line-height:1}
.chip.mchip button:hover{color:var(--bad)}
#scroll{flex:1;min-height:0;overflow:auto}
#instrument{padding:8px 16px 0;border-bottom:1px solid var(--line);background:var(--bar)}
#instrument:empty{display:none;border:0;padding:0}

/* Fixed widths, or the Scoring column (free text, sometimes a whole orchestra)
   swells and pushes Duration and Sources off the right edge. The work's title is
   what people read, so it gets the slack. */
table.cat{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed;
}
/* Once the reader has set a width by hand, the table stops being squeezed into the pane
   and is allowed to be as wide as the widths they chose; #stage scrolls sideways for the
   overflow. Without this, pulling one column wider was simply taken out of its
   neighbours, and Scores and Audio were clipped to 17px. */
/* NOT min-width:100%. With table-layout:fixed the surplus over the container is shared
   out among every column, so freezing nine widths and pulling the tenth still moved all
   ten. The exact sum is set in JS instead, and only that. */
/* A FLOOR, and only while the widths are ours. The nine fixed columns come to 936px, so
   between the stacked layout at 640px and about 1180px there was nothing left for the
   title: the Work column collapsed to a few pixels and "Symphony No. 9" printed one
   letter per line. #stage already scrolls sideways, so the table keeps its width and
   scrolls rather than crush the one column carrying the name of the piece.
   NOT once the reader has set widths by hand: `body.colw` gets an exact sum from JS, and
   a floor underneath it would be surplus that table-layout:fixed shares out among all
   ten columns, which is the bug the exact sum exists to prevent. 2026-09-14. */
body:not(.colw) table.cat{min-width:1180px}
/* Con la ficha abierta la tabla NO se recorta: mantiene su ancho y `#scroll` la desplaza.
   Quitar columnas al abrir una obra es quitarle información a quien acaba de pedir más. */
body.colw table.cat{width:auto}
/* La barra horizontal va en #scroll, NO en #stage.
   #stage es tan alto como todas las filas dibujadas, así que su barra horizontal queda al
   final de esa altura, a miles de píxeles del ojo: la tabla se desbordaba y no había con
   qué desplazarla. En #scroll la barra se queda pegada al borde inferior del panel y
   siempre está a mano. Se vio al abrir el selector y la ficha a la vez, con 764 px para
   una tabla de 1 180. 2026-09-15. */
#stage{overflow-x:visible}   /* #scroll ya es overflow:auto en los dos ejes */
table.cat col.k-comp{width:104px} table.cat col.k-cat{width:118px}
table.cat col.k-key{width:104px} table.cat col.k-scoring{width:190px}
table.cat col.k-date{width:132px} table.cat col.k-dur{width:74px}
table.cat col.k-score{width:62px} table.cat col.k-audio{width:74px}
table.cat col.k-rec{width:78px}
table.cat col.k-src{width:70px}
table.cat td{overflow:hidden;text-overflow:ellipsis}
.c-title{overflow-wrap:anywhere}
table.cat thead th{position:sticky;top:0;background:#faf7f1;z-index:2;text-align:left;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;
  padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;
  user-select:none}
table.cat thead th:hover{color:var(--ink)}
table.cat thead th .dir{color:var(--accent)}
table.cat td{padding:6px 10px;border-bottom:1px solid #f1ece3;vertical-align:baseline}
table.cat tbody tr:hover{background:#faf7f1;cursor:pointer}
table.cat tbody tr.sel{background:var(--sand)}
.c-comp{white-space:nowrap;font-size:12.5px;color:var(--muted)}
.c-cat{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink);font-size:12.5px}
.c-cat .alt{color:var(--faint);font-size:11px}
/* Al tamaño del compositor. Estaba en 15 px contra los 12,5 de las columnas de al lado,
   y con la serifa encima: cantaba demasiado para lo que es, una celda más de la fila.
   Víctor, 2026-09-15. */
.c-title{font-family:var(--serif);font-size:12.5px;line-height:1.35}
.c-title .parts{color:var(--faint);font-family:system-ui,sans-serif;font-size:11px;margin-left:6px}
.c-key{white-space:nowrap;color:var(--ink);font-size:12.5px;overflow:hidden}
.c-scoring{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-num{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px}
.c-src{white-space:nowrap;text-align:right;padding-right:18px}
.c-media{white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}
.c-media a{color:var(--accent);text-decoration:none}
.c-media a:hover{text-decoration:underline}
.c-media b{color:var(--accent)}
/* El ▶ va FUERA del círculo y el círculo abraza solo el número. Antes era un círculo fijo
   de 19 px con "▶12" dentro, y con dos cifras el texto se salía por los lados (Víctor,
   2026-09-16). Ahora el número vive en una píldora con ancho mínimo de círculo, que crece
   lo que haga falta: una cifra sigue siendo un círculo, dos son una píldora. */
.c-media .play{border:0;background:none;color:var(--hot);cursor:pointer;padding:0;margin-right:5px;
  display:inline-flex;align-items:center;gap:3px;font:inherit;line-height:1;vertical-align:-2px}
.c-media .play .pi{font-size:9px}
.c-media .play .pn{display:inline-block;min-width:19px;height:19px;line-height:17px;padding:0 5px;
  box-sizing:border-box;text-align:center;border-radius:999px;background:var(--sand);
  border:1px solid var(--sand-line);font-size:11px;font-variant-numeric:tabular-nums}
.c-media .play:hover .pn{background:var(--hot);border-color:var(--hot);color:#fff}
.dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:-1px;
  border:1px solid rgba(0,0,0,.12)}
.caret{display:inline-block;width:14px;color:var(--faint);cursor:pointer;font-size:10px;user-select:none}
tr.part td{background:#fdfbf7}
tr.part .c-title{padding-left:24px;font-size:12px}
.flagdot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:6px;vertical-align:1px}
.flag-lost{background:var(--faint)} .flag-ver{background:var(--maj)}
#more{display:block;margin:16px auto;padding:7px 18px;border:1px solid var(--line);background:#fff;
  border-radius:8px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink)}

/* la rueda y su ranking, lado a lado; en móvil se apilan */
.fifths-wrap{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:14px 8px 4px}
#fifths{display:block;width:min(430px,88vw);height:auto;flex:0 0 auto}
#fifths .seg{cursor:pointer;stroke:#fbf8f3;stroke-width:1.6;transition:filter .12s}
#fifths .seg:hover{filter:brightness(1.07) saturate(1.1)}
#fifths .seg.on{stroke:var(--ink);stroke-width:2.6}
#fifths text{pointer-events:none;font-variant-numeric:tabular-nums}
#fifths .kl{font:600 12px/1 var(--serif);fill:#2b231b}
#fifths .kl.big{font-size:17px}
#fifths .acc,.krank .acc{font-family:"Apple Symbols","Segoe UI Symbol","Noto Music",system-ui,sans-serif;font-weight:400}
#fifths .acc{font-size:.92em}
.krank .acc{margin-left:1px}
#fifths .cnt{font:500 9.5px/1 system-ui,-apple-system,sans-serif;fill:#2b231b;opacity:.62}
#fifths .hub{fill:#fbf8f3;stroke:var(--line);stroke-width:1}
#fifths .hubn{font:600 21px/1 var(--serif);fill:var(--ink)}
#fifths .hubl{font:9px/1 system-ui,-apple-system,sans-serif;fill:var(--faint);letter-spacing:.04em}
.krank{width:min(340px,88vw);flex:0 0 auto}
.krank h4{margin:0 0 10px;font:600 9.5px/1 system-ui,-apple-system,sans-serif;text-transform:uppercase;
  letter-spacing:.09em;color:var(--faint)}
.krank .krow{display:grid;grid-template-columns:96px 1fr 40px;align-items:center;gap:10px;width:100%;
  border:0;background:none;padding:4px 6px;margin:0 -6px;border-radius:6px;cursor:pointer;font:inherit;text-align:left}
.krank .krow:hover{background:var(--sand)}
.krank .krow.on{background:var(--sand);box-shadow:inset 0 0 0 1px var(--sand-line)}
.krank .kname{font:600 14px/1.2 var(--serif);color:var(--ink);white-space:nowrap}
.krank .kname i{font:italic 400 12px var(--serif);color:var(--muted)}
.krank .kbar{height:9px;border-radius:999px;background:#f1ebe2;overflow:hidden}
.krank .kbar span{display:block;height:100%;border-radius:999px}
.krank .kn{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.krank .kfoot{margin:12px 0 0;font-size:12px;color:var(--muted)}
.krank .kfoot b{color:var(--ink);font-variant-numeric:tabular-nums}
#graph{display:block;margin:0 auto;max-width:720px}
#graph .edge{stroke:var(--faint);fill:none;opacity:.4}
#graph .edge.hot{stroke:var(--accent);opacity:1;stroke-width:1.5}
#graph .node{cursor:pointer} #graph .node text{font-size:10px;fill:var(--ink)}
#graph .hub text{font-size:11.5px;font-weight:700}
.tlbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 0 6px}
#tl-modes{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
#tl-modes button{border:0;font:inherit;font-size:12.5px;padding:4px 12px;cursor:pointer;
  background:#fff;color:var(--muted)}
#tl-modes button+button{border-left:1px solid var(--line)}
#tl-modes button[aria-pressed=true]{background:var(--hot);color:#fff;font-weight:600}
.tlscroll{overflow-x:auto;max-height:46vh;overflow-y:auto}
#timeline .grid{stroke:var(--line2);stroke-width:1;stroke-dasharray:2 4}
#timeline .tick{font-size:10.5px;fill:var(--faint);font-variant-numeric:tabular-nums}
#timeline .tlab{font:13px var(--serif);fill:var(--ink)}
#timeline .life{opacity:.24}
#timeline .axis{stroke:var(--line2);stroke-width:1}
#timeline .tbar{cursor:pointer}
#timeline .tbar:hover rect{opacity:.72}
#timeline .tbar:hover .hit{opacity:1;fill:rgba(0,0,0,.045)}
.hint{text-align:center;font-size:11.5px;color:var(--muted);margin:2px 0 8px}

#rec h2{margin:0 26px 3px 0;font:600 19px/1.25 var(--serif)}
#rec .sub{color:var(--muted);font-size:12px;margin:0 0 14px}
#rec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
#rec dt{color:var(--faint);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
  padding-top:3px;font-weight:700}
#rec dd{margin:0}
/* Paging through the open card. Sits to the left of the close button, because the thing
   you do often should not be the thing you have to aim at. */
#recnav{position:absolute;right:38px;top:9px;display:flex;align-items:center;gap:2px}
#recnav[hidden]{display:none}
#rec .rec-step{border:0;background:none;cursor:pointer;color:var(--muted);font-size:19px;
  line-height:1;padding:0 5px;border-radius:5px}
#rec .rec-step:hover:not(:disabled){background:var(--sand);color:var(--hot)}
#rec .rec-step:disabled{opacity:.25;cursor:default}
#reccount{color:var(--faint);font-size:10.5px;font-variant-numeric:tabular-nums;
  min-width:52px;text-align:center}
#rec .close{position:absolute;right:12px;top:9px;border:0;background:none;font-size:21px;
  cursor:pointer;color:var(--faint);line-height:1}
#rec .links{margin-top:16px;padding-top:11px;border-top:1px solid var(--line);font-size:12px;
  display:flex;gap:12px;flex-wrap:wrap}
#rec .links a{color:var(--accent)}
/* lo que se ha agrupado: presente, plegado, y nunca compitiendo con el valor */
#rec details.merged{margin-top:3px;font-size:11.5px}
#rec details.merged summary{color:var(--faint);cursor:pointer;list-style:none}
#rec details.merged summary::-webkit-details-marker{display:none}
#rec details.merged summary::before{content:"▸ ";font-size:9px}
#rec details.merged[open] summary::before{content:"▾ "}
#rec details.merged summary:hover{color:var(--accent);text-decoration:underline}
#rec details.merged ul{margin:4px 0 0;padding-left:14px;color:var(--muted)}
#rec details.merged li{margin-bottom:2px}
#rec .mfrom{font-style:italic}
#rec .mto{color:var(--ink)}
#rec .mwhy{display:block;color:var(--faint);font-size:10.5px}
/* ficha de compositor */
#rec .chips{margin:10px 0 6px;display:flex;flex-wrap:wrap;gap:5px}
#rec .ch{background:var(--sand);border:1px solid var(--sand-line);border-radius:999px;
  padding:3px 9px;font-size:11.5px;color:var(--hot)}
#rec .goworks{font:inherit;font-size:12.5px;padding:5px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--accent)}
#rec .goworks:hover{background:var(--sand);border-color:var(--sand-line)}
#rec .portrait{margin:6px 0;font-size:12px}
#rec .portrait a{color:var(--accent)}
#rec ul.rel{list-style:none;margin:4px 0 0;padding:0;font-size:12.5px}
#rec ul.rel li{padding:3px 0;border-bottom:1px solid var(--line)}
#rec ul.rel.bad li{color:var(--bad)}
#rec ul.rel.steps b{display:inline-block;min-width:16px;color:var(--accent)}
#rec .plink{border:0;background:none;padding:0;font:inherit;color:var(--accent);cursor:pointer}
#rec .plink:hover{text-decoration:underline}
#rec .kids{margin-top:14px}
#rec .kids h4{font-size:9.5px;color:var(--faint);margin:0 0 4px;letter-spacing:.09em;text-transform:uppercase}
#rec .kids button{display:block;width:100%;text-align:left;border:0;background:none;padding:2px 0;
  cursor:pointer;color:var(--ink);font:13px var(--serif)}
#rec .kids button:hover{text-decoration:underline}

.cc{display:inline-block;width:5px;height:5px;border-radius:50%;margin-left:5px;vertical-align:1px;
  cursor:help;background:var(--one)}
.cc.unanimous{background:var(--ok)} .cc.complementary{background:var(--comp)}
.cc.majority{background:var(--maj)} .cc.conflict{background:var(--bad)}
.cc.resolved{background:var(--res)} .cc.single{background:var(--one)}
.cc.derived{background:var(--accent);opacity:.55}
.ccrow{display:inline-flex;gap:3px;align-items:center}
#tip{position:fixed;z-index:2600;max-width:340px;background:var(--ink);color:#efe9df;font-size:11.5px;
  line-height:1.45;padding:9px 11px;border-radius:7px;pointer-events:none;opacity:0;
  transition:opacity .1s;box-shadow:0 8px 22px rgba(0,0,0,.22)}
#tip.on{opacity:1}
#tip b{color:#d9b45a;font-weight:600}
#tip .why{color:#c3bab0;font-style:italic;display:block;margin-top:5px}
footer{padding:5px 16px;border-top:1px solid var(--line);background:var(--bar);
  font-size:11.5px;color:var(--muted)}
footer a{color:var(--muted)}
@media(max-width:820px){
  .c-scoring,.c-key,.c-comp{display:none}
  #totals{display:none} #q{flex:1 1 100%}
}

/* ---------------- the record card ----------------
   Five things you scan (what it is, who plays it, key, when, how long) as chips at
   the top; everything you might want to check as a table below, each fact with its
   concordance dot. */
/* The composer line shares the top of the card with the controls, and it used to clear
   only the close button's 26px. The pager sits beside it, so the gutter is now as wide as
   both: a work with three composers would otherwise run under the arrows. */
#rec .whose{margin:0 26px 2px 0;font-size:12.5px;color:var(--muted)}
body.rec-paged #rec .whose{margin-right:122px}
#rec .whose .yrs{color:var(--faint);font-variant-numeric:tabular-nums}
#rec h2{margin:0 26px 6px 0;font:600 20px/1.22 var(--serif)}
#rec .catline{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;
  margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#rec .catline .sep{color:var(--faint)}
#rec .keyfacts{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 14px}
#rec .kf{font-size:12px;padding:3px 9px;border-radius:999px;background:#f4efe6;
  color:var(--hot);border:1px solid #e7dcc9;white-space:nowrap}
#rec .kf.k-form{background:var(--hot);color:#fff;border-color:var(--hot);font-weight:600}
#rec .kf.k-forces{background:#ece4d5}
#rec .kf.k-warn{background:#f6e3de;border-color:#e6c6bd;color:#8d3d2b}
#rec .inpart{margin:0 0 10px;font-size:12.5px;color:var(--muted)}
#rec .inpart button{border:0;background:none;padding:0;cursor:pointer;color:var(--accent);
  font:13px var(--serif);text-decoration:underline}
#rec .vers{margin:0 0 12px;font-size:12.5px;color:var(--maj)}
#rec h4.sec{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:16px 0 6px;padding-top:10px;border-top:1px solid var(--line)}
#rec .kids button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:4px 0;cursor:pointer;border-bottom:1px solid var(--line2)}
#rec .kids button:hover{background:#faf7f1}
#rec .kids .kt{display:block;font:13.5px var(--serif);color:var(--ink)}
#rec .kids .km{display:block;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}

/* ---------------- mobile ----------------
   Under 640px the table stops being a table: every row becomes a card, because six
   columns on a phone means either a horizontal scroll nobody finds or text ground
   to two characters wide. The record panel becomes a sheet that slides up from the
   bottom, which is where a thumb is. */
@media(max-width:640px){
  #bar{padding:6px 12px;gap:8px}
  .brand strong{font-size:15px} .brand small{display:none}
  #comp-btn{font-size:13px;padding:5px 12px}
  #modes{padding:6px 12px;gap:6px}
  #view-tabs button{padding:6px 10px;font-size:12px}
  #t-parts,#t-doubt{font-size:12px;padding:3px 8px}
  #facets{padding:6px 12px}
  #subbar{padding:5px 12px}
  #subbar .right{max-width:100%;margin-left:0;width:100%}

  table.cat{table-layout:auto;display:block;min-width:0}
  table.cat thead{display:none}
  table.cat tbody,table.cat tr,table.cat td{display:block;width:auto}
  table.cat tr{padding:9px 12px 10px;border-bottom:1px solid var(--line);position:relative}
  table.cat td{padding:0;border:0;overflow:visible;white-space:normal}
  table.cat col{width:auto!important}
  .c-comp,.c-key,.c-scoring{display:block!important}
  .c-cat{font-size:11.5px;color:var(--muted);margin-bottom:1px}
  .c-cat .alt{display:inline;margin-left:5px}
  .c-title{font-size:15.5px;line-height:1.28;margin-bottom:3px}
  .c-comp{font-size:11.5px;color:var(--muted);display:inline-block!important;margin-right:8px}
  .c-key{font-size:11.5px;display:inline-block!important;margin-right:8px;color:var(--muted)}
  .c-scoring{font-size:11.5px;display:inline-block!important;margin-right:8px}
  .c-num{text-align:left;display:inline-block!important;font-size:11.5px;
    color:var(--muted);margin-right:8px}
  .c-media{display:inline-block!important;margin-right:8px}
  .c-src{position:absolute;top:10px;right:12px;text-align:right;padding:0}
  tr.part .c-title{padding-left:16px}
  .caret{width:18px;font-size:12px}

  #rec{top:auto;left:0;right:0;bottom:0;width:100%;max-height:88vh;border-left:0;
    border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.16)}
    #rec .close{font-size:26px;right:14px;top:8px}
  .tlscroll{max-height:52vh}
  #tip{max-width:calc(100vw - 20px)}
  footer{font-size:10.5px;padding:5px 12px}
}

/* audio that plays here versus audio that lives elsewhere: never the same mark */
.c-media .offsite{color:var(--muted)}
#rec .offnote{margin:0 0 6px;font-size:12.5px;color:var(--ink)}
#rec .offwhy{margin:0 0 8px;font-size:11px;color:var(--faint);line-height:1.45}
#rec .offrec{margin:2px 0;font-size:12px;color:var(--muted)}
#rec .offrec span{color:var(--faint)}
#rec .offlic{font-size:11px;color:var(--faint);margin:6px 0 0}
#rec .offlink{color:var(--accent);font-size:12.5px}
#rec .rec .ours{color:var(--maj);font-size:11px}
#graph .glab{font-size:9.5px;fill:var(--faint);letter-spacing:.09em;text-transform:uppercase;
  font-weight:700}
#graph .node text{font-size:10.5px}
#graph{max-width:none}
#rec .premiere{margin:0 0 10px;font-size:12.5px;color:var(--ink2)}
#rec .premiere b{color:var(--ink)}
#rec .premiere a{color:var(--faint);text-decoration:none}

/* one player, whatever the source */
#rec .pl{margin:0 0 8px}
#rec .pl-top{display:flex;align-items:center;gap:8px}
#rec .pl-play{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--sand-line);
  background:var(--sand);color:var(--hot);font-size:11px;cursor:pointer;padding:0;line-height:1}
#rec .pl-play:hover{background:var(--hot);color:#fff}
#rec .pl.on .pl-play{background:var(--hot);color:#fff}
#rec .pl-bar{flex:1 1 auto;height:5px;background:var(--line);border-radius:3px;cursor:pointer;
  overflow:hidden}
#rec .pl-fill{height:100%;width:0;background:var(--accent);border-radius:3px}
#rec .pl-time{flex:0 0 auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
  min-width:74px;text-align:right}
#rec .pl-meta{margin:3px 0 0 34px;font-size:11.5px;color:var(--muted);line-height:1.4}
#rec .pl-label{color:var(--ink2)}
#rec .pl-meta a{color:var(--faint)}
#rec .pl-meta .ours{color:var(--maj);font-size:11px}
#rec .pl-group{margin:0 0 12px;padding-left:8px;border-left:2px solid var(--line)}
#rec .pl-gtop{margin:0 0 6px;font-size:12.5px;color:var(--ink)}
#rec .pl-gtop span{display:block;font-size:11px;color:var(--faint)}
#rec .pl-gtop a{color:var(--accent)}
#rec .pl-nofile{margin:0 0 8px;font-size:12.5px}
#rec .pl-nofile span{font-size:11px;color:var(--faint)}
#rec .pl-midi{margin:8px 0 0;font-size:11px;color:var(--faint);line-height:1.45}
#rec .pl-midi a{color:var(--muted)}

/* ---------------- the record panel ----------------
   It was a layer floating over the table: fine on a phone, wrong on a desktop,
   where there is room to put the two side by side and nothing has to be covered.
   batalla_de_flores solved this already, so this follows it: a two-column grid
   with a draggable divider whose width is remembered, each column scrolling on its
   own, and a close button that is discreet on a desktop (it covers nothing) and a
   big red circle on a phone (it covers everything). */
#main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
body.rec-open #main{grid-template-columns:minmax(0,1fr) 6px minmax(0,var(--rec-w,440px))}
/* Con el selector abierto entra una columna por delante. Las tres pueden convivir en un
   monitor de PC, que es justo lo que pidió: dos paneles y la tabla, side by side. */
body.comp-open #main{grid-template-columns:minmax(0,290px) minmax(0,1fr)}
body.comp-open.rec-open #main{
  grid-template-columns:minmax(0,290px) minmax(0,1fr) 6px minmax(0,var(--rec-w,440px))}
#scroll{min-height:0;overflow:auto}
#divider{display:none;cursor:col-resize;background:transparent;transition:background .12s}
body.rec-open #divider{display:block}
#divider:hover,#divider.dragging{background:var(--line)}
#divider::after{content:"";display:block;width:2px;height:28px;margin:0 auto;
  position:relative;top:calc(50% - 14px);border-radius:2px;background:var(--line)}
#divider:hover::after,#divider.dragging::after{background:var(--accent)}
body.resizing{cursor:col-resize;user-select:none}

#rec{display:none;min-height:0;overflow:auto;background:#fff;
  border-left:1px solid var(--line);padding:18px 20px;position:relative}
body.rec-open #rec{display:block}
#rec .close{position:absolute;right:12px;top:10px;z-index:2;padding:0;cursor:pointer;
  border:1px solid var(--line);background:var(--bar);color:var(--muted);
  width:26px;height:26px;border-radius:50%;font-size:14px;line-height:1}
#rec .close:hover{border-color:var(--bad);color:var(--bad)}
#rec .close:active{transform:scale(.94)}

@media(max-width:900px){
  /* Debajo de ~900 px las tres columnas dejan a la tabla sin nada que enseñar, así que
     el selector pasa a ocupar el ancho entero y la tabla se va abajo. Sigue sin flotar:
     empuja, no tapa. */
  body.comp-open #main,
  body.comp-open.rec-open #main{grid-template-columns:minmax(0,1fr)}
  body.comp-open #scroll,body.comp-open #divider,body.comp-open #rec{display:none}
  #comp-pop{border-right:0;border-bottom:1px solid var(--line);max-height:70vh}
}
@media(max-width:640px){
  /* on a phone it IS a layer over everything, so the cross goes back to the big
     circle everyone recognises */
  body.rec-open #main{grid-template-columns:minmax(0,1fr)}
  #divider{display:none!important}
  #rec{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:88vh;width:100%;
    border-left:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,.18);z-index:2000}
  body.rec-open #rec{display:block}
  #rec .close{width:42px;height:42px;border:0;background:var(--bad);color:#fff;
    font-size:20px;box-shadow:0 2px 10px rgba(176,80,59,.35);right:14px;top:10px}
  #rec h2{padding-right:46px}
}

/* With the record open the table has ~830px, and the fixed column widths alone add
   up to more than that, so the one flexible column, the WORK, collapsed to nothing:
   the table lost the only thing anybody reads it for. Two columns stand down while
   the panel is open, and they are the two the panel itself is showing anyway. */
body.rec-open table.cat col.k-comp{width:92px}
/* what stays: who wrote it, its number, its name, whether it can be heard, and how
   well the sources agree. Key, scoring, date and duration are all in the panel
   itself, two inches to the right. */

/* A work with more than one composer prints them all in one cell; the ampersand is
   quieter than the names so the eye still reads two names, not three words. */
.amp{opacity:.45;padding:0 .25em;font-size:.9em}

/* Two admissions of ignorance, drawn quietly rather than as warnings: neither is an
   error, both are the catalogue declining to pretend. */
.nothing{margin:14px 0;padding:10px 12px;border-left:3px solid var(--rule,#d8d2c8);
  background:var(--soft,#faf8f4);color:var(--dim,#6b6459);font-size:12.5px;line-height:1.5}
.shared{margin:6px 0 0;color:var(--dim,#6b6459);font-size:12px;line-height:1.5}
.plusn{opacity:.55;font-size:.85em;margin-left:.25em}
.multi{white-space:nowrap}
.joined{margin:6px 0 0;color:var(--dim,#6b6459);font-size:12px;line-height:1.5}
.frompage{margin-left:.5em;font-size:11px;opacity:.5;font-style:italic}

/* A column edge you can pull. Invisible until the pointer is near it, because a table
   of 15 000 rows does not need nine vertical lines competing with the data. */
table.cat th{position:relative}
.grip{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;
  z-index:3;user-select:none}

.grip::after{content:"";position:absolute;top:22%;bottom:22%;left:4px;width:1px;
  background:var(--rule,#d8d2c8);opacity:0;transition:opacity .12s}
table.cat th:hover .grip::after{opacity:1}
.grip:hover::after{opacity:1;background:var(--accent,#8a6d3b);width:2px;left:3.5px}
body.resizing{cursor:col-resize;user-select:none}
body.resizing .grip::after{opacity:1;background:var(--accent,#8a6d3b)}
.c-rec{font-variant-numeric:tabular-nums;text-align:right;padding-right:14px}
/* lo que no está colgado de esta obra sino de su cuaderno o de sus piezas: presente,
   pero nunca con el peso de lo propio. */
.reach{color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums;cursor:help}
.reach:hover{color:var(--accent)}
.c-rec .unknown{opacity:.3}
/* a count that came from the work's best movement rather than from the work: it is
   a floor, not a measurement, and it should not read like one. */
.c-rec .derived{opacity:.62;border-bottom:1px dotted currentColor}

/* The other names a work goes by, each with the source that uses it. Quiet: this is
   context, not a correction, and none of these spellings is the wrong one. */
.alsoc{margin:8px 0 0;font-size:12px;line-height:1.7;color:var(--dim,#6b6459)}
.alsoc .lab{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  opacity:.65;margin-bottom:2px}
.alsoc .alt{display:inline-block;margin:0 10px 2px 0}
.alsoc .who{margin-left:5px;font-size:10px;opacity:.55;font-variant:small-caps}

/* The map. Height is fixed rather than fluid: Leaflet needs a real box before it can
   work out its tiles, and a lens that grows with its content would resize under the
   reader every time they filter. */
#map{height:440px;border:1px solid var(--rule,#d8d2c8);border-radius:4px;
  background:var(--soft,#faf8f4)}
#map .leaflet-container{font:inherit}
.leaflet-tooltip .tdim{opacity:.6;font-size:11px}
@media (max-width:760px){ #map{height:320px} }
.mapkey{display:inline-block;margin-left:10px;opacity:.75}
.mapkey .k-solid,.mapkey .k-dash{display:inline-block;width:11px;height:11px;
  border-radius:50%;vertical-align:-1px;margin:0 4px 0 8px;border:1.5px solid #6a4a2a}
.mapkey .k-solid{background:rgba(106,74,42,.55)}
.mapkey .k-dash{background:rgba(106,74,42,.12);border-style:dashed}

/* ---------- el juego ---------- */
/* EN EL JUEGO SOLO ESTÁ EL JUEGO.
   Los filtros no filtran nada aquí (la pregunta sale de su propio fondo, con cuota por
   compositor) y la tabla debajo compite por la atención con la única cosa que hay que
   hacer, que es escuchar. En el mapa la tabla sí sirve, porque pinchar un pin la filtra;
   aquí no sirve para nada. */
body.lens-game #subbar,body.lens-game #facets,
body.lens-game #scroll,body.lens-game #divider,
body.lens-acq #scroll,body.lens-acq #divider,body.lens-acq #subbar{display:none}
body.lens-acq:not(.rec-open) #main{display:none}
body.lens-acq #instrument{flex:1;min-height:0;overflow-y:auto}
/* `#main` guarda la tabla Y la ficha. Esconderlo entero mataría el "ver su ficha" del
   juego, así que se colapsa solo mientras no hay ficha abierta; con ella abierta vuelve,
   y dentro solo queda el panel. Sin esto seguía ocupando 285 px vacíos y el juego se
   quedaba en 294 px con 636 px de contenido: el veredicto y el botón de siguiente caían
   fuera de la vista. */
body.lens-game:not(.rec-open) #main{display:none}
body.lens-game #instrument{flex:1;min-height:0;overflow-y:auto}
#game{padding:18px 20px;max-width:760px;margin:0 auto}
#game .g-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
#game .g-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
#game .gbtn{border:0;background:#fff;font:inherit;font-size:12.5px;padding:5px 12px;
  cursor:pointer;color:var(--muted)}
#game .g-seg .gbtn+.gbtn{border-left:1px solid var(--line)}
#game .gbtn.on{background:var(--hot);color:#fff;font-weight:600}
#game .gbtn:hover:not(.on){background:var(--sand)}
#game #g-reset{border:1px solid var(--line);border-radius:999px}
#game .g-score{margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
#game .g-score b{color:var(--ink)}
#game .g-prompt{font:600 21px/1.2 var(--serif);margin:0 0 10px}
#game .g-play{font:inherit;font-size:15px;padding:10px 22px;border-radius:999px;cursor:pointer;
  background:var(--sand);border:1px solid var(--sand-line);color:var(--hot);font-weight:600}
#game .g-play:hover{background:#e7dcc6}
#game .g-opts{display:grid;gap:8px;margin:16px 0}
#game .gopt{font:inherit;font-size:14.5px;text-align:left;padding:11px 15px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:9px;color:var(--ink)}
#game .gopt:hover:not(:disabled){border-color:var(--sand-line);background:#faf7f1}
#game .gopt.ok{background:#eef5ea;border-color:var(--ok);color:#3f5c35;font-weight:600}
#game .gopt.no{background:#f7ecea;border-color:var(--bad);color:#8a3d2c}
#game .gopt:disabled{cursor:default}
#game .g-after{border-top:1px solid var(--line);padding-top:12px}
#game .g-verdict{font:600 16px/1.2 var(--serif);margin:0 0 4px}
#game .g-verdict.ok{color:#4a7a3a} #game .g-verdict.no{color:var(--bad)}
#game .g-what{margin:0 0 10px;font-size:13.5px;color:var(--muted)}
#game .g-next{border:1px solid var(--sand-line);background:var(--sand);color:var(--hot);
  border-radius:999px;font-weight:600}
#game .g-note{margin-top:22px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--faint);line-height:1.5}
#game .g-load{color:var(--muted);font-size:13px}
#game .why{display:block;color:var(--faint);font-size:11px;margin-top:3px}

/* ---------- grafo de quién trató a quién ---------- */
.acqwrap{padding:12px 16px}
.acqsvg{width:100%;height:auto;display:block;max-width:1000px;margin:0 auto}
.acqsvg text{font:10.5px system-ui,-apple-system,sans-serif;fill:var(--muted)}
.acqsvg text.tick{font-size:9px;fill:var(--faint)}
.acqsvg .acq{fill:none;stroke:var(--accent);stroke-opacity:.28;stroke-width:1.2}
.acqsvg .acq.s1{stroke:var(--ok);stroke-opacity:.75;stroke-width:2}
.acqsvg .acq.s2{stroke-opacity:.5;stroke-width:1.6}
.acqsvg .acq:hover{stroke-opacity:1;stroke-width:2.6;stroke:var(--hot)}
.acqsvg .anode{cursor:pointer}
.acqsvg .anode:hover text{fill:var(--hot);font-weight:600}
.acqsvg .anode:hover circle{r:7}
#game .gnum{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;
  border-radius:4px;background:var(--line);color:var(--muted);font-size:10.5px;margin-right:9px;
  font-variant-numeric:tabular-nums}
#game .gopt.ok .gnum{background:var(--ok);color:#fff}
#game .gopt.no .gnum{background:var(--bad);color:#fff}

/* la puerta de entrada al juego: avisa de que va a sonar y espera */
#game .g-gate{max-width:560px;margin:6vh auto 0;text-align:center}
#game .g-gate h2{font:600 26px/1.15 var(--serif);margin:0 0 14px}
#game .g-gate-warn{font-size:17px;font-weight:600;color:var(--hot);margin:0 0 12px}
#game .g-gate p{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.55}
#game .g-gate .why{display:block;font-size:12.5px;color:var(--faint);margin-bottom:20px}
#game .g-gate .g-play{font-size:16px;padding:12px 26px}

/* ---------- "What is this?" ----------
   No es un modal que tapa: es una hoja que se abre encima del contenido y se cierra con la
   × o eligiendo una de las cosas que propone. Nada de bloquear la página para leer. */
#whatis{font:inherit;font-size:13px;padding:6px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--sand-line);background:var(--sand);color:var(--hot);font-weight:600;
  white-space:nowrap}
#whatis:hover{background:#e7dcc6}
#about{background:var(--bar);border-bottom:1px solid var(--line);overflow-y:auto;
  max-height:min(70vh,560px)}
#about .ab{max-width:720px;margin:0 auto;padding:22px 20px 26px;position:relative}
#about h2{font:600 24px/1.2 var(--serif);margin:0 0 10px}
#about h4{font:600 13px/1.3 system-ui,-apple-system,sans-serif;margin:16px 0 3px;
  color:var(--hot)}
#about p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}
#about .ab-lead{font-size:15px;color:var(--ink);margin-bottom:4px}
#about b{color:var(--ink);font-variant-numeric:tabular-nums}
#about .ab-foot{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--faint)}
#about .ab-go{border:0;background:none;padding:0 0 0 4px;font:inherit;font-size:13px;
  color:var(--accent);cursor:pointer;text-decoration:underline}
#about .ab-go:hover{color:var(--hot)}
#about .ab-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:22px;
  line-height:1;color:var(--faint);cursor:pointer;padding:2px 6px;border-radius:6px}
#about .ab-x:hover{background:var(--sand);color:var(--hot)}

/* los nombres de los ejes, siempre visibles; los valores, solo del eje abierto */
#facets .axes{display:inline-flex;gap:2px;flex:0 0 auto;padding:1px;border-radius:999px;
  background:#f3efe7;border:1px solid var(--line)}
#facets .axis{border:0;background:none;font:inherit;font-size:11.5px;padding:4px 10px;
  border-radius:999px;cursor:pointer;color:var(--muted);white-space:nowrap;
  text-transform:uppercase;letter-spacing:.04em;font-weight:600}
#facets .axis:hover:not(.open){background:#fff;color:var(--ink)}
#facets .axis.open{background:var(--hot);color:#fff}
#facets .axis.has .n{display:inline-block;margin-left:5px;min-width:14px;padding:0 3px;
  border-radius:999px;background:var(--sand-line);color:var(--hot);font-size:9.5px;
  font-weight:700}
#facets .axis.open.has .n{background:rgba(255,255,255,.28);color:#fff}

/* LA REATRIBUCIÓN SE DICE, NO SE ESCONDE.
   170 obras tienen una página de IMSLP que redirige a la de otro compositor: el
   Magnificat BWV Anh.21 "de Bach" a Melchior Hoffmann, los cuartetos op. 3 "de Haydn" a
   Roman Hoffstetter. Hasta hoy no se veía por ningún lado. No es un error ni una alarma:
   es un desacuerdo entre fuentes, que es de lo que va este atlas, así que se dibuja como
   un dato y no como un warning rojo. 2026-09-16. */
.reattr{margin:10px 0 0;padding:9px 11px;border-left:3px solid var(--maj,#b08a3c);
  background:var(--soft,#faf8f4);font-size:12.5px;line-height:1.5;color:var(--muted)}
.reattr b{color:var(--ink)}
.reattr a{color:var(--accent)}
.reattr .why{display:block;margin-top:4px;color:var(--faint);font-size:11px;font-style:italic}


/* ================= MÓVIL, REHECHO (2026-09-17) =================
   Evaluado a 375 px antes de tocar nada. Lo que había:
   1. las filas se salían por la derecha y se comían el audio y las grabaciones. Era una
      regresión mía de la v0.53: el suelo de 1 180 px de la tabla (`body:not(.colw)`) ganaba
      en especificidad al `min-width:0` del móvil, y al pasar la barra horizontal a #scroll
      cada tarjeta medía 1 180 px;
   2. la cabecera se comía 290 de 812 px antes de la primera obra;
   3. las pestañas de vista no cabían: "Who knew whom" y "Play" no se veían y "By key" se
      partía en dos líneas;
   4. el pie ocupaba dos líneas fijas para decir "hover a dot" en una pantalla sin ratón;
   5. la ficha de compositores eran números sueltos sin decir de qué;
   6. el grafo de quién conoció a quién, encogido a 375 px, era ilegible.
   Todo en un solo bloque al final, para que gane por orden y se lea junto. */
@media(max-width:640px){
  /* --- 1. las tarjetas caben --- */
  body table.cat, body:not(.colw) table.cat, body.colw table.cat{min-width:0!important;width:100%!important}
  #scroll{overflow-x:hidden}
  table.cat tr{padding:11px 44px 12px 16px}
  .c-comp{margin-right:6px}
  .c-cat{display:inline-block!important;font-size:11.5px;margin:0}
  .c-cat .alt{display:none}
  .c-title{font-size:16px;line-height:1.28;margin:3px 0 5px}
  table.cat td.c-key,table.cat td.c-scoring,table.cat td.c-num,table.cat td.c-media,table.cat td.c-rec{
    display:inline-flex!important;align-items:center;margin:0 10px 3px 0;font-size:12px;white-space:nowrap}
  table.cat td:empty{display:none!important}
  /* una fecha en prosa ("1829-30 (08-07 to 12-16); revised 1832...") se corta, no empuja */
  table.cat td.c-num{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  table.cat td.c-rec::after{content:"recordings";margin-left:4px;font-size:10.5px;color:var(--faint)}
  .c-src{top:13px;right:14px}

  /* --- 2 y 3. cabecera compacta: marca y compositores en una línea, búsqueda con su "?",
     pestañas que se deslizan --- */
  #navbar{padding-left:14px;padding-right:14px}
  #bar{flex-wrap:nowrap;padding:8px 14px;gap:10px}
  .brand{flex:1 1 auto;min-width:0}
  .brand>span{min-width:0}
  .brand strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
  #comp-btn{flex:0 0 auto;white-space:nowrap;font-size:12.5px;padding:6px 11px}
  #comp-btn .opt{display:none}
  .brand .mark{width:26px;height:26px}
  .brand strong{font-size:15.5px}
  #modes{flex-wrap:wrap;padding:4px 14px 8px;gap:8px}
  #q{order:1;flex:1 1 0;min-width:0;font-size:16px;padding:8px 12px}  /* 16 px: iOS no hace zoom */
  #whatis{order:2;flex:0 0 auto;width:38px;height:38px;padding:0;font-size:0;border-radius:50%}
  #whatis::after{content:"?";font-size:17px;font-weight:700}
  #view-tabs{order:3;flex:1 1 100%;display:flex;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  #view-tabs::-webkit-scrollbar{display:none}
  #view-tabs button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;padding:8px 14px;font-size:13px}
  .chip-sep{display:none}
  #t-parts{order:4} #t-doubt{order:5}
  #t-parts,#t-doubt{font-size:12px;padding:4px 10px;white-space:nowrap}
  #facets{padding:6px 14px}
  #subbar{flex-wrap:wrap;gap:6px 10px;padding:8px 14px}
  #count{font-size:12.5px}

  /* --- 4. el pie, una línea --- */
  footer{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;padding:6px 14px}
  footer .foot-hover{display:none}

  /* --- 5. compositores: cada número dice qué es --- */
  table.cat td[data-l]::after{content:attr(data-l);margin-left:4px;font-size:10.5px;color:var(--faint)}
  table.cat td.c-lived{color:var(--muted)}

  /* --- 6. el grafo de conocidos se desliza en vez de encogerse --- */
  body.lens-acq #instrument{overflow-x:auto}
  .acqsvg{min-width:900px}
  #instrument{padding:8px 14px 0}

  /* la ficha: asa arriba, que es lo que dice "esto se desliza" */
  #rec{padding-top:26px}
  #rec::before{content:"";position:absolute;top:9px;left:50%;width:38px;height:4px;margin-left:-19px;
    border-radius:999px;background:var(--line)}
  #rec .whose .yrs{white-space:nowrap}

  /* línea de tiempo: los modos en una fila que se desliza, como las pestañas */
  /* (la nota de "7 244 obras sin fecha no se ven" se queda: es un dato, no decoración) */
  #tl-modes{max-width:100%;overflow-x:auto;scrollbar-width:none}
  #tl-modes::-webkit-scrollbar{display:none}
  #tl-modes button,.tlbar .chip{white-space:nowrap;flex:0 0 auto}
  .tlbar .hint{flex:1 1 100%;text-align:left;font-size:11px}
  #timeline .tlab{font-size:12px}

  table.cat td.c-num a{color:var(--accent)}
}