/* sons.cat — a reference work, not a product page.
   System fonts only, dense tables, 1px borders. No webfonts, no shadows,
   no rounded corners, no gradients: those are what make new sites look alike. */

body {
  margin: 0;
  padding: 0 1em;
  background: #fff;
  color: #202122;
  font: 13.5px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

main, #capcalera, footer { max-width: 960px; margin: 0 auto; }

a { color: #0645ad; }
a:visited { color: #0b0080; }
a:hover { color: #3366cc; }

/* Header ------------------------------------------------------------------ */

#capcalera {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  flex-wrap: wrap;
  padding: .6em 0;
  border-bottom: 1px solid #a2a9b1;
}
#logo { font-size: 1.5em; font-weight: bold; text-decoration: none; color: #202122; }
#logo span { color: #72777d; font-weight: normal; }
#capcalera nav a { margin-right: .9em; }
#cerca-rapida { margin-left: auto; }
#usuari { display: flex; align-items: baseline; gap: .5em; }
#usuari .nivell { color: #72777d; font-size: .85em; }

/* Headings ---------------------------------------------------------------- */

h1 { font-size: 1.7em; font-weight: normal; margin: .7em 0 .2em; }
h2 {
  font-size: 1.15em; font-weight: bold; margin: 1.4em 0 .3em;
  border-bottom: 1px solid #a2a9b1; padding-bottom: .15em;
}
.subtitol { margin: 0 0 1em; color: #54595d; }
.introduccio { max-width: 40em; }
.xifres, .filtres { color: #54595d; margin: .4em 0; }
.filtres a { margin-right: .7em; }
.filtres a.actiu { font-weight: bold; color: #202122; }
.menut { font-size: .9em; color: #54595d; }
.error { border: 1px solid #d33; background: #fee; padding: .5em .7em; }
.avis { border: 1px solid #c90; background: #fffbe6; padding: .5em .8em; margin: 1em 0; }
.avis p { margin: .3em 0; }
.filtres .etiqueta { color: #72777d; margin-right: .3em; }
h3 { font-size: 1em; font-weight: bold; margin: 1.1em 0 .2em; color: #54595d; }

/* Tables ------------------------------------------------------------------ */

table.llistat { border-collapse: collapse; width: 100%; margin: .4em 0 1em; }
table.llistat th, table.llistat td {
  border: 1px solid #a2a9b1; padding: 3px 7px; text-align: left; vertical-align: top;
}
table.llistat th { background: #eaecf0; font-weight: bold; }
/* The affordance only appears once sort.js has attached, so a browser without
   JavaScript is not invited to click something that does nothing. */
table.ordenable-activa th { cursor: pointer; user-select: none; }
table.ordenable-activa th:hover { background: #dfe3e8; }
table.ordenable-activa th[aria-sort="ascending"]::after { content: " ▲"; color: #72777d; }
table.ordenable-activa th[aria-sort="descending"]::after { content: " ▼"; color: #72777d; }
table.ordenable-activa th:focus-visible { outline: 1px solid #0645ad; }
table.llistat tr:nth-child(even) td { background: #f8f9fa; }
table.llistat td.any, table.llistat td.durada,
table.llistat td.nota, table.llistat td.posicio { white-space: nowrap; }
table.llistat th.any, table.llistat th.nota,
table.llistat th.durada, table.llistat th.posicio { width: 1%; white-space: nowrap; }
table.llistat td.artistes, table.llistat td.credits { color: #54595d; }
td.credits .rol { color: #72777d; font-size: .9em; }
td.credits .rol:not(:empty)::before { content: " ("; }
td.credits .rol:not(:empty)::after { content: ")"; }
td.buit { color: #72777d; font-style: italic; }

/* Ratings: the one accent colour in the whole stylesheet. */
.valoracio { color: #8a6d1f; font-weight: bold; }
.recompte, .sense-valoracio { color: #72777d; }

/* Infobox — the Wikipedia fact panel, beside the content, not above it. ---- */

.infobox {
  float: right; width: 21em; margin: 1.2em 0 1em 1.5em;
  border: 1px solid #a2a9b1; background: #f8f9fa; padding: .5em;
}
.infobox h2 { margin: 0 0 .4em; font-size: 1.05em; border: 0; text-align: center; }
.infobox table { border-collapse: collapse; width: 100%; }
.infobox th, .infobox td {
  padding: 3px 5px; text-align: left; vertical-align: top; font-size: .95em;
  border-bottom: 1px solid #eaecf0;
}
.infobox th { width: 35%; color: #54595d; font-weight: normal; }
.perfil { max-width: 40em; white-space: pre-line; }

/* Everything that is not the infobox. flow-root makes this a block formatting
   context, so it forms a real second column beside the float instead of
   sliding underneath it and leaving a gap. flow-root rather than
   overflow:hidden because the latter silently clips anything too wide. */
.cos { display: flow-root; }

/* A table wider than its column scrolls on its own rather than being cut off
   or pushing the page sideways. */
.taula { overflow-x: auto; }

ul.enllacos { margin: 0; padding-left: 1.1em; }

/* Admin console ------------------------------------------------------------ */

/* Controls that belong inside a table cell or on one line with their label,
   rather than the stacked layout .formulari gives everything else. */
form.en-linia { display: inline-flex; align-items: center; gap: .3em; margin: 0; }
form.en-linia select, form.en-linia input { width: auto; }
form.contrasenya { display: flex; align-items: center; gap: .4em; margin: .25em 0; }
form.contrasenya label { min-width: 9em; font-weight: bold; }
form.contrasenya input { width: 14em; }

/* Forms ------------------------------------------------------------------- */

input, select, textarea, button {
  font: inherit; padding: 2px 4px; border: 1px solid #a2a9b1; background: #fff;
}
button { background: #f8f9fa; cursor: pointer; }
button:hover { background: #eaecf0; }
.formulari label { display: block; font-weight: bold; margin-bottom: .15em; }
.formulari input[type=text], .formulari input[type=password],
.formulari input[type=number], .formulari textarea, .formulari select { width: 100%; }
.formulari.estret { max-width: 22em; }
.cerca-gran input { width: 26em; }
.valorar { border: 1px solid #a2a9b1; background: #f8f9fa; padding: .5em .7em; margin: 1em 0; }
.valorar form { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.valorar form + form { margin-top: .4em; }
.valorar .etiqueta { color: #54595d; }

/* Hearts, RYM-style, with no JavaScript. The buttons sit reversed in the DOM
   (5 first) so that `.cor:hover ~ .cor` reaches every heart to its LEFT on
   screen — CSS has no previous-sibling selector, so the markup is flipped and
   row-reverse puts it back visually. */
.cors-grup { display: inline-flex; flex-direction: row-reverse; }
button.cor {
  border: 0; background: none; padding: 0 .05em; cursor: pointer;
  font-size: 1.5em; line-height: 1; color: #ccc;
}
button.cor.ple { color: #b3242c; }
.cors-grup:hover button.cor { color: #ccc; }
.cors-grup button.cor:hover,
.cors-grup button.cor:hover ~ button.cor { color: #b3242c; }
button.cor:focus-visible { outline: 1px solid #0645ad; }

/* Link icons in the infobox. */
td.icones { display: flex; gap: .45em; align-items: center; flex-wrap: wrap; }
a.icona { color: #54595d; display: inline-flex; }
a.icona:hover { color: #0645ad; }
a.icona svg { display: block; }

/* Collapsible sections: <summary> carries the heading, so it must not look
   like a list item. */
details > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: .35em;
}
details > summary::-webkit-details-marker { display: none; }
/* The heading keeps flex:1 so its bottom border still spans the column. */
details > summary > h2, details > summary > h3 { flex: 1; }
details > summary::before { content: "▾"; color: #72777d; font-size: .75em; }
details:not([open]) > summary::before { content: "▸"; }
details > summary:hover > h2, details > summary:hover > h3 { color: #0645ad; }
.compte { color: #72777d; font-weight: normal; font-size: .8em; }

/* The listened toggle shows state rather than an instruction, so it goes grey
   and pressed-looking once the record has been heard. */
button.escolta.activa {
  background: #eaecf0; color: #54595d; border-color: #c8ccd1;
}

/* A button that should read as a link (logout, delete). */
button.enllac {
  border: 0; background: none; padding: 0; color: #0645ad;
  text-decoration: underline; cursor: pointer;
}
#usuari form, .accions form { display: inline; }
.accions { font-size: .6em; font-weight: normal; margin-left: .5em; }
.accions a, .accions button.enllac { margin-left: .4em; }

/* Footer ------------------------------------------------------------------ */

footer {
  clear: both; margin-top: 2.5em; padding: .8em 0 1.5em;
  border-top: 1px solid #a2a9b1; color: #54595d; font-size: .9em;
}

/* Narrow screens: the infobox stops floating and simply comes first. */
@media (max-width: 700px) {
  .infobox { float: none; width: auto; margin: 1em 0; }
  .cos { overflow: visible; }
  #cerca-rapida { margin-left: 0; }
  table.llistat { font-size: .95em; }
}