/* ===========================================================================
   style.css — the site's own styles, on top of the Energy Commons Europe
   design system.

   Every page loads two stylesheets, in this order:
     1. ds/styles.css  the design system: fonts, colours, sizes and a few
                       element defaults. Copied unchanged from the system —
                       do not edit it.
     2. style.css      this file: how this site's pages use the system.

   Everything here uses the system's tokens (the --names defined in
   ds/tokens/). There are no colour codes in this file: change a token there
   and the whole site follows.

   The system's rules, in short (ds README):
     - Black and white only. Greys for rules and secondary text.
     - Square, flat, ruled: no rounded corners, no shadows, no gradients.
       Something "raised" is shown by inverting it (white on black).
     - Rosario 700 for headings, labels and numbers; Poppins for reading.
     - Numbers always use lining figures.

   Organised in the order the pages are built:
     1. Basics: layout, text, links, loading and error messages
     2. Header and footer
     3. Front page: MEP cards, guide, "Sobre os datos" (index.html)
     4. MEP page header (mep.html)
     5. The Asignado / Elixido panel  <- the main feature
     6. Panels and language bars
     7. Activity list and tags
     8. Filter buttons and the search table (galicia.html)
    8b. Votes (votacions.html, the MEP page panel)
    8d. The lobbies page (lobbies.html)
     9. Small screens
   ========================================================================= */


/* --- 1. Basics ---------------------------------------------------------- */

/* The only colours on the site. Change a colour here and it changes
   everywhere.

   Votes: green for "a favor", red for "en contra" — the user's choice. The
   design system has no red and advises against red/green, because the two
   look alike to colour-blind readers. So the tones were chosen to match the
   palette's muted style AND to differ clearly in lightness: the green is dark,
   the red mid-tone. They stay apart even in a simulation of red–green colour
   blindness (1.8:1), and both are dark enough to be read as text on white
   (green 8.1:1, red 5.2:1). The system's own green (--data-biomass) was not
   used: in that simulation it looks the same as any red. The squares and the
   words always come together, so colour is never the only clue.

   Charts use the palette's blue. */
:root {
  --vote-for: oklch(0.42 0.09 145);       /* a favor   — dark green, #295a2c */
  --vote-against: oklch(0.55 0.14 28);    /* en contra — brick red,  #b9473d */
  --vote-abstention: var(--data-neutral); /* abstención — grey */
  --chart-colour: var(--data-grid);       /* bars in the charts — blue */
}

* {
  box-sizing: border-box;
}

/* Browsers give buttons their own font settings instead of inheriting the
   page's, so the design system's lining figures never reach them — "Amosar
   máis (239 restantes)" came out with Rosario's old-style figures. */
button {
  font-variant-numeric: lining-nums;
}

/* The page column: up to 1280px of content, with the system's fluid gutter
   (20px on a phone, growing to 80px on a wide screen) on each side. */
.wrap {
  max-width: calc(var(--page-max) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* The design system removes the browser's default spacing around paragraphs
   and headings, so we add back exactly the spacing we want. */
main p {
  margin: 0 0 var(--space-4);
}

main p:last-child {
  margin-bottom: 0;
}

/* The page title on galicia.html. */
main > h2 {
  font-size: clamp(var(--size-h3), 5vw, var(--size-h2));
  line-height: var(--leading-display);
  margin-bottom: var(--space-6);
}

/* Running text never gets wider than 64 characters a line: longer lines are
   hard to read. */
main > p,
.panel > p {
  max-width: var(--measure-body);
}

.muted {
  color: var(--text-secondary);
}

.small {
  font-size: var(--size-small);
}

/* The system has no italic font files. Rather than let the browser fake a
   slanted Poppins, emphasis is shown with a heavier weight. */
main em {
  font-style: normal;
  font-weight: var(--weight-body-medium);
}

/* The system has no monospace font either. Code-like words (text=Galicia,
   search-language=gl) use Poppins on a recessed grey, so they still stand
   apart from the text around them. */
code {
  font-family: var(--font-body);
  font-size: 0.95em;
  font-weight: var(--weight-body-medium);
  background: var(--surface-sunken);
  padding: 0 var(--space-1);
}

/* Icons from the Energy Commons Europe set, made by iconHTML() in app.js.
   The span is an empty box filled with the text colour (currentColor); the
   SVG file, set as its mask by iconHTML(), cuts that fill to the icon's
   shape. So the icon is black on white and white on black, like the text
   next to it. vertical-align lowers it a little so it sits on the text line
   instead of above it. */
.icon {
  display: inline-block;
  flex: none;              /* inside a flex row, never squeeze the icon */
  vertical-align: -0.15em;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* An icon after text (an arrow after a title or link) comes wrapped in this
   span, with a no-break space before the icon. Browsers may start a new
   line right before an icon box even after a no-break space, so the arrow
   could end up alone on the next line; "nowrap" keeps it with the last
   word. */
.icon-after {
  white-space: nowrap;
}

/* Shown while the JSON files are loading. */
.status {
  padding: var(--space-5);
  color: var(--text-secondary);
}

/* Shown if loading fails. The system keeps errors black and white: a 2px
   black border, the ECE "alert" icon and the message — no red. The icon
   (24px, from iconHTML()) and the message sit side by side. */
.status.error {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--text-primary);
  border: var(--border-strong) solid var(--border-default);
  padding: var(--space-4) var(--space-5);
}

/* Photos are always black and white in this system. */
.card img,
.mep-header img {
  filter: grayscale(1);
  object-fit: cover;
  object-position: center top;   /* keep faces in a square crop */
  /* If a photo can't load, a plain grey square stands in for it — the
     system's own image placeholder. The alt text still reaches screen
     readers, but is not drawn across the grey. */
  background: var(--grey-300);
  color: transparent;
  overflow: hidden;
  position: relative;
}

/* Browsers draw this only when the image is broken (a loaded photo has no
   ::before). It covers the "broken image" icon with the same plain grey. */
.card img::before,
.mep-header img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grey-300);
}


/* --- 2. Header and footer ----------------------------------------------- */

/* Logo top-left, then the site name, then the navigation. On a phone the
   three wrap onto separate lines. */
.site-header {
  border-bottom: var(--border-hair) solid var(--border-subtle);
  padding-block: var(--space-4);
  margin-bottom: var(--space-7);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

.site-logo {
  flex: none;
  display: block;
  line-height: 0;   /* no gap under the image */
}

.site-logo img {
  display: block;
  width: 196px;     /* the width the system's NavBar uses for this logo */
  height: auto;
}

.site-header h1 {
  font-size: var(--size-lead);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-left: auto;   /* pushes the navigation to the right */
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-decoration: none;
}

/* Hovering, or being on that page, underlines the link (2px). */
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: var(--border-strong);
  text-underline-offset: 0.35em;
}

.site-footer {
  margin-top: var(--space-9);
  padding-block: var(--space-5) var(--space-7);
  border-top: var(--border-hair) solid var(--border-subtle);
  font-size: var(--size-small);
  color: var(--text-secondary);
}


/* --- 3. Front page (index.html): cards, guide, "Sobre os datos" ---------- */
/* Rebuilds the system's Card: square, a 1px black rule, photo on top,
   content anchored low. The whole card is a link, so it turns black on hover,
   as the system's linked cards do. */

/* auto-fit: as many equal columns as fit, then wrap. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grid-gap);
}

.card {
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background: var(--surface-page);
  border: var(--border-hair) solid var(--border-default);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.card:hover {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

/* The photo fills the top of the card as a square. */
.card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* Everything under the photo gets the card's inner spacing. */
.card h2,
.card-facts,
.card-figures,
.card-votes {
  margin-inline: var(--space-5);
}

.card h2 {
  font-size: var(--size-h4);
  margin-top: var(--space-5);
}

/* "Verts/ALE · BNG · Cuntis": one line of small grey text. Each fact is a
   <span> that never breaks inside, so "A Coruña" stays on one line; a long
   line wraps between facts instead. */
.card .card-facts {
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--size-small);
  line-height: var(--leading-tight-body);
  color: var(--text-secondary);
}

.card-facts span {
  white-space: nowrap;
}

/* The three figures: a small two-column list, the number (large Rosario,
   like the system's KeyFigure) on the left and what it counts on the right.
   The numbers share one column, so they line up under each other. Each
   label is centred on its number's height, so a label that wraps onto two
   lines ("intervencións e / preguntas") sits beside the number, not below
   it. margin-top: auto pushes the figures to the bottom of the card, so they
   line up across all four cards. */
.card-figures {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--space-4);
  border-top: var(--border-hair) solid var(--border-subtle);
}

.card-figures dt {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-h3);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  /* Both values, always: "tabular-nums" on its own would switch Rosario
     back to its old-style figures. */
  font-variant-numeric: lining-nums tabular-nums;
  /* Trims the empty space above and below the digits, so the box is exactly
     as tall as the digits and the label is centred on what you see.
     Browsers without text-box ignore it and centre on the full line box. */
  text-box: trim-both cap alphabetic;
}

.card-figures dd {
  margin: 0;
  font-size: var(--size-small);
  line-height: var(--leading-tight-body);
}

/* "Votou en 573 de 680 votacións finais": a small grey line under the
   figures, with the card's inner spacing at the bottom. */
.card .card-votes {
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--size-small);
  line-height: var(--leading-tight-body);
  color: var(--text-secondary);
  font-variant-numeric: lining-nums tabular-nums;
}

/* With no votes line, the figures need the bottom spacing themselves. */
.card-figures:last-child {
  margin-bottom: var(--space-5);
}

/* On hover the card turns black: the grey text and rules get the system's
   inverse greys. */
.card:hover .card-facts,
.card:hover .card-votes {
  color: var(--text-inverse-secondary);
}

.card:hover .card-figures {
  border-top-color: var(--grey-700);
}

/* The note for "reunións*", right under the cards. */
.card-grid + .home-note {
  margin-top: var(--space-4);
}

/* The opening on the front page: the lead (.page-intro, shared with the
   votes page) and then the criterion, in body size and grey. */
main > .page-intro:first-child {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.home-criterion {
  margin-bottom: var(--space-7);
}

/* The guide to the other pages: three framed blocks in a row, each one a
   link that turns black on hover, like the cards. Stacked on a phone. */
.home-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-top: var(--space-7);
}

.home-guide-block {
  display: block;
  padding: var(--space-5);
  border: var(--border-hair) solid var(--border-default);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

/* The pictogram (pin, ballot, people) on its own line above the title. */
.home-guide-block > .icon {
  display: block;
  margin-bottom: var(--space-4);
}

.home-guide-block h2 {
  font-size: var(--size-h4);
}

.home-guide-block p {
  margin: var(--space-2) 0 0;
  font-size: var(--size-small);
  line-height: var(--leading-tight-body);
  color: var(--text-secondary);
  font-variant-numeric: lining-nums tabular-nums;
}

.home-guide-block strong {
  color: var(--text-primary);
}

.home-guide-block:hover {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.home-guide-block:hover p {
  color: var(--text-inverse-secondary);
}

.home-guide-block:hover strong {
  color: var(--text-inverse);
}

/* "Sobre os datos": the small print in one framed, always-visible block. */
.home-about {
  margin-top: var(--space-7);
  margin-bottom: 0;
}

.home-about p {
  margin: 0;
  max-width: var(--measure-body);
  font-size: var(--size-small);
  color: var(--text-secondary);
  font-variant-numeric: lining-nums tabular-nums;
}

.home-about p + p {
  margin-top: var(--space-2);
}


/* --- 4. MEP page header (mep.html) -------------------------------------- */

.mep-header {
  display: flex;
  gap: var(--space-6);
  align-items: flex-end;   /* the system anchors content low */
  border: var(--border-hair) solid var(--border-default);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
}

.mep-header img {
  flex: none;
  width: 160px;
  height: 160px;
}

.mep-header h2 {
  font-size: clamp(var(--size-h3), 5vw, var(--size-h2));
  line-height: var(--leading-display);
  margin-bottom: var(--space-4);
}

/* The "label: value" rows: the label in a fixed-width grey column, the value
   beside it. A long value wraps inside its own column instead of running
   under the label. 11em fits the longest label, "Lugar de nacemento". */
.facts div {
  display: grid;
  grid-template-columns: 11em 1fr;
  column-gap: var(--space-2);
  padding: 2px 0;
}

.facts span {
  color: var(--text-secondary);
}

/* The summary row under the MEP header: five linked figures in a strip
   joined to the bottom of the header box, divided by the same 1px black
   lines. Deliberately not "key figures" (the system allows three of those
   per view): the numbers are a modest 24px, so the name stays the loudest
   thing in view.

   The lines: the header's bottom border is the strip's top line, the strip
   draws the left one, and each cell draws its own right and bottom ones.
   Cells grow to fill their row, so when they wrap onto a second row (on a
   phone) there is never an empty, unframed gap. */
.mep-summary {
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--space-7)) 0 var(--space-7);
  border-left: var(--border-hair) solid var(--border-default);
}

.mep-summary a {
  flex: 1 1 9.5em;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-right: var(--border-hair) solid var(--border-default);
  border-bottom: var(--border-hair) solid var(--border-default);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.mep-summary strong {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-h4);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: lining-nums tabular-nums;
}

.mep-summary-label {
  font-size: var(--size-small);
  line-height: var(--leading-tight-body);
  color: var(--text-secondary);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Hover: the cell turns black, like the "Amosar máis" button, so it is clear
   it can be pressed. Keyboard focus keeps the system's own outline. */
.mep-summary a:hover {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.mep-summary a:hover .mep-summary-label {
  color: var(--text-inverse);
}

/* The photo credit under the facts: caption size, grey. */
.photo-credit {
  margin-top: var(--space-4);
  font-size: var(--size-caption);
  color: var(--text-secondary);
}


/* --- 5. The "Comisións e intergrupos" panel ---------------------------- */
/* The point of the whole site, so it is the loudest thing on the page. The
   heading and the explanation sit in a black band (in this system,
   "raised" means inverted), framed by a 2px black rule; the two columns sit
   on white underneath.

   --contrast-pad is the inner spacing. The white area below uses the same
   value as a negative margin to reach the edges of the frame. */

.contrast {
  --contrast-pad: var(--space-6);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border: var(--border-strong) solid var(--border-default);
  padding: var(--space-8) var(--contrast-pad) 0;
  margin-bottom: var(--space-8);
}

/* Large, and sitting low in the band, as the system's headlines do. This
   section is always open: it has no "Amosar" / "Ocultar" button. */
.contrast > h2 {
  font-size: clamp(var(--size-h3), 6vw, var(--size-h2));
  line-height: var(--leading-display);
  margin-bottom: var(--space-4);
}

.contrast-intro {
  max-width: var(--measure-body);
  margin: 0 0 var(--space-6);
  font-size: var(--size-lead);
  line-height: var(--leading-tight-body);
}

.contrast-intro strong {
  font-weight: var(--weight-body-strong);
}

/* The white area holding the two columns, edge to edge inside the frame. */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-inline: calc(-1 * var(--contrast-pad));
  padding: var(--contrast-pad);
  background: var(--surface-page);
  color: var(--text-primary);
}

.column {
  padding: var(--space-5);
}

/* Left: handed out by the political group — a recessed grey panel.
   Right: joined by choice — framed by a black rule. The two differ by
   surface, not by colour. */
.column.assigned {
  background: var(--surface-sunken);
}

.column.chosen {
  border: var(--border-hair) solid var(--border-default);
}

.column h3 {
  font-size: var(--size-h3);
  margin-bottom: var(--space-2);
}

.column .how {
  margin: 0 0 var(--space-4);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

/* "4 comisións · 3 delegacións": the counts under each column title, in the
   label face so the figures read as figures. */
.column-count {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variant-numeric: lining-nums tabular-nums;
}

/* "Comisións" and "Delegacións" inside the left column: small labels, so
   they don't compete with the column title. */
.body-subhead {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
}

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

/* One committee, delegation or intergroup per row, divided by hairlines. */
.column li {
  padding-block: var(--space-3);
  border-top: var(--border-hair) solid var(--border-subtle);
}

/* One entry on one line: name, code, badge and date side by side. On a
   narrow screen the line simply wraps, like a sentence. */
.body-line {
  line-height: var(--leading-tight-body);
}

.body-name {
  font-weight: var(--weight-body-medium);
  line-height: var(--leading-tight-body);
}

/* "desde xullo de 2026": only on seats that started well after the term. */
.body-since {
  font-size: var(--size-small);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* "Tamén: …": the other MEPs of this site in the same body. */
.body-shared {
  margin-top: var(--space-1);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

/* Committee codes (DEVE, PECH) are acronyms, set like labels. */
.body-code {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-label);
  color: var(--text-secondary);
}

/* Role badges, built like the system's Tag. The roles are NOT equivalent,
   and the difference shows without colour:
     chair, vice-chair  white on black (inverted: the strongest)
     full member        a 1px black rule (mep.html no longer shows this one:
                        plain membership is the default and gets no badge)
     substitute         grey text, a light grey rule (the weakest)
   The badge sits on the entry's line, so it is aligned to the text around
   it rather than pushed down onto its own line. */
.role {
  display: inline-flex;
  align-items: center;
  height: 22px;
  vertical-align: 1px;
  padding: 0 var(--space-2);
  border: var(--border-hair) solid transparent;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-label);
  line-height: 1;
  white-space: nowrap;
}

.role-chair,
.role-chair-vice {
  background: var(--surface-inverse);
  border-color: var(--border-default);
  color: var(--text-inverse);
}

.role-member {
  border-color: var(--border-default);
  color: var(--text-primary);
}

.role-substitute {
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}


/* --- 6. Panels and language bars ---------------------------------------- */

/* A plain outline card: square, 1px black rule. */
.panel {
  border: var(--border-hair) solid var(--border-default);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
}

/* Section titles: in a plain section (always visible, e.g. "Que se conta
   aquí") the heading is the first thing inside; in one you can open and close
   it sits inside the <summary> bar. */
.panel > h2,
.panel > h3,
.panel > summary h2,
.panel > summary h3 {
  font-size: var(--size-h4);
}

.panel > h2,
.panel > h3,
.panel[open] > summary {
  margin-bottom: var(--space-3);
}

/* Closed sections read as a list of bars, so they sit closer together and
   are slimmer than open ones. */
.panel:not([open]) {
  padding-block: var(--space-4);
  margin-bottom: var(--space-4);
}

/* --- Sections you can open and close ---
   Only the method sections ("Como se conta") are <details> elements; every
   data section is an always-visible <section>. The browser opens and closes
   them by itself (also from the keyboard), no JavaScript needed. They start
   closed. The <summary> is the bar you click: the title on the left, and a
   button-like "Amosar" / "Ocultar" on the right. */
details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;           /* hide the browser's own triangle... */
}

details > summary::-webkit-details-marker {
  display: none;              /* ...in every browser */
}

details > summary h2,
details > summary h3 {
  margin: 0;
}

/* The button. currentColor makes it black on white panels and white in the
   black "Asignado fronte a elixido" band. */
details > summary::after {
  content: "Amosar";
  flex: none;
  display: inline-flex;
  align-items: center;
  height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border: var(--border-hair) solid currentColor;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-small);
}

details[open] > summary::after {
  content: "Ocultar";
}

/* Hovering the bar underlines the button's word, like other links here. */
details > summary:hover::after {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* One row per language: name, bar, count. */
.bars {
  margin-top: var(--space-4);
}

.bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 60px;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

/* A coloured bar on a light grey track; square ends. Charts are the one
   place the design system allows colour, from its data palette. */
.bar-track {
  background: var(--grey-200);
}

.bar-fill {
  background: var(--chart-colour);
  height: 20px;
}

/* The count, in Rosario figures, lined up on the right. */
.bar-row > div:last-child {
  text-align: right;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variant-numeric: lining-nums tabular-nums;
}


/* --- 7. Activity list and tags ------------------------------------------ */

.activity {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.activity li {
  padding-block: var(--space-4);
  border-top: var(--border-hair) solid var(--border-subtle);
}

.activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: var(--size-small);
  color: var(--text-secondary);
}

.activity li > a {
  font-weight: var(--weight-body-medium);
  line-height: var(--leading-tight-body);
}

/* Tags, rebuilt from the system's Tag: square, Rosario 700, 13px.
   The plain .tag (language, MEP name) has a light grey rule; the variants
   below change only the rule and the fill — never the colour of the ink. */
.tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: var(--border-hair) solid var(--border-subtle);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-label);
  line-height: 1;
  white-space: nowrap;
}

/* Speech: a 1px black rule. */
.tag-speech {
  border-color: var(--border-default);
}

/* Question: a recessed grey fill, no rule. */
.tag-question {
  background: var(--surface-sunken);
  border-color: transparent;
}

/* Galicia: inverted, white on black — the flag this site is about. */
.tag-galicia {
  background: var(--surface-inverse);
  border-color: var(--border-default);
  color: var(--text-inverse);
}

/* Under each row on galicia.html (and on mep.html with the Galicia filter):
   the text around the match in grey, the matched words in bold. While
   searching, a small ruled "Busca" tag (.tag-term) comes first. (This is
   div.evidence; the search-results table further down is table.evidence.) */
div.evidence {
  margin-top: var(--space-3);
}

.tag-term {
  height: 22px;
  padding: 0 6px;
  border-color: var(--border-default);
  font-size: var(--size-caption);
}

/* mep.html: one line under each activity title saying what it is about.
   Small and grey (.small .muted), like other secondary text. */
.activity-excerpt {
  max-width: var(--measure-body);
  margin: var(--space-1) 0 0;
  line-height: var(--leading-tight-body);
  overflow-wrap: anywhere;
}

.evidence-snippet {
  display: block;
  max-width: var(--measure-body);
  margin-top: var(--space-2);
  font-size: var(--size-small);
  line-height: var(--leading-tight-body);
  color: var(--text-secondary);
  /* Long words or URLs in the text must not push the page wider. */
  overflow-wrap: anywhere;
}

/* While searching: the searched words inside the snippet, in black and a
   heavier weight rather than a coloured highlight. */
.evidence-snippet strong {
  color: var(--text-primary);
  font-weight: var(--weight-body-strong);
}

/* "Amosar máis": a secondary button — 1px black rule, fills black on hover,
   dark grey while pressed. */
.show-more {
  display: block;
  width: 100%;
  height: var(--control-height-md);
  margin-top: var(--space-5);
  border: var(--border-hair) solid var(--border-default);
  border-radius: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-body);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.show-more:hover {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.show-more:active {
  background: var(--grey-800);
  color: var(--text-inverse);
}


/* --- 8. Filter buttons and the search table (galicia.html) -------------- */

.filters {
  margin-bottom: var(--space-5);
}

.filter-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-label);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Like a Tag you can press: a 1px black rule; the selected one is inverted.
   Hover only underlines, so it never looks like the selected state. */
.filter-btn {
  height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border: var(--border-hair) solid var(--border-default);
  border-radius: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-small);
  cursor: pointer;
}

.filter-btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.filter-btn.active {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.filter-btn:active {
  background: var(--grey-800);
  color: var(--text-inverse);
}

/* "Buscar" is a <label> (so clicking it puts the cursor in the box). Labels
   sit inline by default; this makes it a line of its own like the others. */
label.filter-label {
  display: block;
}

/* The search box. The design system has no text field, so this one is built
   from its parts: a 1px black rule like the filter buttons, square corners,
   Poppins, and the system's own focus outline (from ds/, nothing added). */
.search-box {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 32rem;
  height: var(--control-height-md);
  padding: 0 var(--space-3);
  border: var(--border-hair) solid var(--border-default);
  border-radius: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  /* Form fields don't take the page's font unless told to. */
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-variant-numeric: lining-nums tabular-nums;
}

/* The little "x" that clears the box. Chrome and Safari draw it in their own
   blue; this redraws it as the ECE "x" icon, in black. The browser draws
   this button itself, so iconHTML() can't add a span here: the mask points
   straight at the icon file instead ("mask" cuts the black square to the
   icon's shape, as in the .icon rule). The address is read from where
   style.css sits, the site's main folder. */
.search-box::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--text-primary);
  -webkit-mask: url("ds/assets/icons/x.svg") center / contain no-repeat;
          mask: url("ds/assets/icons/x.svg") center / contain no-repeat;
  cursor: pointer;
}

.search-box::placeholder {
  color: var(--text-secondary);
  opacity: 1; /* Firefox fades placeholders by default */
}

/* The line under the box saying what is searched. */
.search-note {
  max-width: var(--measure-body);
  margin: var(--space-2) 0 var(--space-4);
}

/* The box around the search table. On a narrow phone the five columns do not
   fit, so the table scrolls sideways inside this box instead of making the
   whole page wider. */
#searches {
  overflow-x: auto;
  margin-top: var(--space-4);
}

/* Tables: the API searches on galicia.html (table.evidence) and the votes
   comparison on votacions.html (table.data-table) look the same. */
table.evidence,
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-small);
  font-variant-numeric: lining-nums tabular-nums;
}

table.evidence th,
table.evidence td,
table.data-table th,
table.data-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-hair) solid var(--border-subtle);
}

table.evidence th,
table.data-table th {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-label);
  color: var(--text-secondary);
  border-bottom-color: var(--border-default);
}

/* The zeros are the point of the table: bold black with a 2px underline,
   so they stand out without colour. */
td.zero {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: var(--border-strong);
  text-underline-offset: 0.2em;
}


/* --- 8b. Votes (votacions.html and the MEP page panel) ------------------ */

/* The list of caveats on votacions.html. */
.caveats {
  max-width: var(--measure-body);
  margin: var(--space-4) 0 0;
  padding-left: 1.2em;
}

.caveats li {
  margin-bottom: var(--space-2);
}

/* The comparison table scrolls sideways on a phone instead of widening the
   page (nine columns don't fit in 375px). */
.table-scroll {
  overflow-x: auto;
  margin-top: var(--space-4);
}

/* Names on one line in the comparison table; on a narrow screen the table
   scrolls sideways inside its box instead. */
table.data-table td:first-child {
  white-space: nowrap;
}

/* One row of the list of votes against the group. */
.vote-title {
  margin: 0 0 var(--space-2);
  font-weight: var(--weight-body-medium);
  line-height: var(--leading-tight-body);
}

/* One vote on that text. A text can have several, so they are spaced well
   apart from each other. */
.vote-line {
  margin-top: var(--space-5);
  font-size: var(--size-small);
  line-height: var(--leading-body);
}

/* The facts of one vote as a small two-column list: the label on the left
   ("Votou", "O seu grupo", "Delegación"), the answer on the right, each on its
   own line with space between, instead of one crowded sentence. */
.vote-facts {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 0;
}

.vote-facts dt {
  color: var(--text-secondary);
}

.vote-facts dd {
  margin: 0;
}

/* A position with its colour square: "■ en contra". The word itself is
   coloured too, so a reader can pick out for and against at a glance.
   white-space: nowrap keeps the square on the same line as its word. */
.vote-position {
  white-space: nowrap;
  font-weight: var(--weight-body-strong);
}

.vote-position-for {
  color: var(--vote-for);
}

.vote-position-against {
  color: var(--vote-against);
}

/* Not voting isn't a position: grey, no square. */
.vote-position-did_not_vote {
  color: var(--text-secondary);
  font-weight: var(--weight-body);
}

/* The colour square itself. Square, like everything in the system, with a
   thin black edge so the paler colours still stand out against white. */
.swatch {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.3em;
  border: var(--border-hair) solid var(--border-default);
  vertical-align: -0.05em;
}

.swatch-for {
  background: var(--vote-for);
}

.swatch-against {
  background: var(--vote-against);
}

.swatch-abstention {
  background: var(--vote-abstention);
}

/* "Ver a votación en HowTheyVote.eu": on its own line with some space above,
   so it doesn't run into the vote's figures, and in the label style used for
   other small actions. */
.vote-line > a {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-label);
}

/* The kind of vote, e.g. "Proposta de rexeitamento": set as a label. */
.vote-type {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-label);
  color: var(--text-secondary);
}

/* The two warning flags, small enough to sit inside a sentence:
   "en solitario" has a black rule, "grupo dividido" is recessed grey. */
.tag-lone,
.tag-divided {
  height: 22px;
  padding: 0 6px;
  margin-left: var(--space-1);
  font-size: var(--size-caption);
  vertical-align: middle;
}

.tag-lone {
  border-color: var(--border-default);
}

.tag-divided {
  background: var(--surface-sunken);
  border-color: transparent;
}

/* Whose break it was (votacions.html cards). The three
   types differ by surface, not colour: an individual break (the MEP's own
   choice) is inverted, the strongest; a delegation's break has a black rule;
   the only member of a party is recessed grey. */
.tag-break-delegation,
.tag-break-individual,
.tag-break-sole_member {
  height: 22px;
  padding: 0 6px;
  margin-left: var(--space-1);
  font-size: var(--size-caption);
  vertical-align: middle;
}

.tag-break-delegation {
  border-color: var(--border-default);
}

.tag-break-individual {
  background: var(--surface-inverse);
  border-color: var(--border-default);
  color: var(--text-inverse);
}

.tag-break-sole_member {
  background: var(--surface-sunken);
  border-color: transparent;
}

/* The two credit lines in the footer. */
.site-footer p + p {
  margin-top: var(--space-1);
}

/* The footer's first line: the ECE monogram (32px) and "Un proxecto de
   Energy Commons Europe.", side by side, with some space before the data
   credits under it. */
.site-footer .site-signoff {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.site-signoff img {
  flex: none;
}


/* --- 8b2. The votes page (votacions.html) ----------------------------------- */

/* The sentence under the title, a little larger than body text. */
.page-intro {
  max-width: var(--measure-body);
  margin: var(--space-3) 0 var(--space-6);
  font-size: var(--size-lead);
  line-height: var(--leading-tight-body);
}

/* The three key figures (the design system allows three in view): a large
   Rosario number over a short label, divided by 1px rules like the MEP
   page's summary strip. Stacked on a phone. */
.key-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-hair) solid var(--border-default);
  margin-bottom: var(--space-5);
}

.key-figure {
  padding: var(--space-5);
}

.key-figure + .key-figure {
  border-left: var(--border-hair) solid var(--border-default);
}

.key-figure strong {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-h2);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: lining-nums tabular-nums;
}

.key-figure span {
  display: block;
  font-size: var(--size-small);
  line-height: var(--leading-tight-body);
  color: var(--text-secondary);
  font-variant-numeric: lining-nums tabular-nums;
}

/* The links to the sections: one line of label-style links. */
.jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-small);
}

.page-note {
  margin-bottom: var(--space-7);
}

/* "En que temas coinciden os catro": one row per theme, each a link to the
   breaks section. Name | bar | percentage, with the counts underneath. */
.theme-rows {
  margin-top: var(--space-4);
}

.theme-row {
  display: grid;
  grid-template-columns: minmax(8em, 16em) 1fr minmax(12em, 18em);
  gap: var(--space-1) var(--space-4);
  align-items: center;
  padding-block: var(--space-3);
  border-top: var(--border-hair) solid var(--border-subtle);
  color: var(--text-primary);
  text-decoration: none;
  font-variant-numeric: lining-nums tabular-nums;
}

.theme-row-name {
  font-weight: var(--weight-body-medium);
}

/* The name underlines on hover, like other links, so the row reads as one. */
.theme-row:hover .theme-row-name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.theme-row-bar .bar-track,
.theme-row-bar .bar-fill {
  display: block;
}

.theme-row-figure {
  font-size: var(--size-small);
}

.theme-row-figure strong {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-body);
}

.theme-row-counts {
  grid-column: 1 / -1;
}

/* The group table: the percentage with a small bar in the same cell. */
.rate-cell {
  white-space: nowrap;
}

.rate-cell .rate-value {
  display: inline-block;
  min-width: 3.6em;
}

.rate-cell .bar-track {
  display: inline-block;
  width: 6em;
  vertical-align: middle;
}

.rate-cell .bar-fill {
  height: 12px;
}

.group-table td:first-child {
  white-space: nowrap;
}

.table-note {
  max-width: var(--measure-body);
  margin-top: var(--space-3);
}

/* The 4×4 grid: the percentage, with how many votes were compared under it. */
.pairs-table td,
.pairs-table th {
  text-align: center;
}

.pairs-table th[scope="row"] {
  text-align: left;
}

.pairs-table td strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
}

.pair-count {
  display: block;
  font-size: var(--size-caption);
  color: var(--text-secondary);
}

.pair-self {
  color: var(--text-secondary);
}

/* "Cando votan contra o seu grupo": the sentence before the first part, and
   the line with the button before the second. */
.breaks-intro {
  max-width: var(--measure-body);
  margin: var(--space-5) 0 0;
  font-weight: var(--weight-body-medium);
}

.breaks-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-hair) solid var(--border-default);
}

.breaks-more p {
  margin: 0;
  max-width: var(--measure-body);
}

/* One card per vote: a small table, one row per MEP who broke. */
/* "fixed" with set column widths, so the columns line up from one card to
   the next instead of each table sizing itself to its own content. */
.break-table {
  width: 100%;
  table-layout: fixed;
  margin: var(--space-2) 0 var(--space-3);
  border-collapse: collapse;
  font-size: var(--size-small);
  font-variant-numeric: lining-nums tabular-nums;
}

.break-table th,
.break-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border-hair) solid var(--border-subtle);
}

.break-table thead th {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-label);
  color: var(--text-secondary);
  border-bottom-color: var(--border-default);
}

.break-table thead th:nth-child(1) { width: 26%; }
.break-table thead th:nth-child(2) { width: 14%; }
.break-table thead th:nth-child(3) { width: 32%; }
.break-table thead th:nth-child(4) { width: 28%; }

.break-table tbody th {
  font-weight: var(--weight-body-medium);
}

.break-link {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-label);
}

/* "Todas as votacións": one compact row per vote. The text on the left, the
   four squares on the right in fixed columns under the four surnames. */
.square-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}

.square-text {
  line-height: var(--leading-tight-body);
}

.square-date {
  margin-right: var(--space-2);
  font-size: var(--size-small);
  color: var(--text-secondary);
  font-variant-numeric: lining-nums tabular-nums;
}

.square-cells {
  display: grid;
  grid-template-columns: repeat(4, 4.75em);
  justify-items: center;
}

.square-header {
  margin-top: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hair) solid var(--border-default);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-label);
}

/* The list sits right under its column headers. */
.square-header + #all-votes .activity {
  margin-top: 0;
}

.square-header + #all-votes .activity li:first-child {
  border-top: 0;
}

/* One vote square: its colour and a letter, so it never depends on colour
   alone (F a favor, C en contra, A abstención, – non votou). */
.vote-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: var(--border-hair) solid var(--border-default);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-small);
  line-height: 1;
}

.vote-square-for {
  background: var(--vote-for);
  color: var(--text-inverse);
}

.vote-square-against {
  background: var(--vote-against);
  color: var(--text-inverse);
}

/* The grey is light, so its letter is black (white would be too faint). */
.vote-square-abstention {
  background: var(--vote-abstention);
  color: var(--text-primary);
}

.vote-square-did_not_vote,
.vote-square-none {
  background: var(--surface-page);
  color: var(--text-primary);
}

/* The one-line key above the list. */
.vote-square-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-2) 0 var(--space-3);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.vote-square-legend .vote-square {
  width: 22px;
  height: 22px;
  font-size: var(--size-caption);
}


/* --- 8c. Meetings with interest representatives (lobbies.html, mep.html) - */

/* Text for screen readers only: hidden on screen, still read aloud. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The headings inside the dashboard, with room above each block. */
.dash-heading {
  margin: var(--space-7) 0 var(--space-3);
  font-size: var(--size-lead);
}

/* The drop-down filters (procedure, organisation) look like the search box,
   with room below like a row of filter buttons. */
.filter-select {
  margin-bottom: var(--space-4);
  cursor: pointer;
}

/* Bars whose labels are long (organisation names, "Sen procedemento
   concreto"): a wider label column that wraps. */
.bars-wide .bar-row {
  grid-template-columns: minmax(8em, 18em) 1fr 3em;
}

.bars-wide .bar-row > div:first-child {
  overflow-wrap: anywhere;
  line-height: var(--leading-tight-body);
}

/* The monthly timeline: one column per month, bars growing up from a black
   baseline. The count sits above each bar; the year labels below. */
.timeline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 160px;
  margin: var(--space-6) 0 var(--space-7);
  border-bottom: var(--border-hair) solid var(--border-default);
}

.timeline-col {
  position: relative;
  flex: 1 1 0;
  /* Without this, a column can't be narrower than its count ("51"), and on
     a phone the 27 columns push the page wider than the screen. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.timeline-bar {
  background: var(--chart-colour);
}

.timeline-count {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-caption);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
  line-height: 1.4;
  overflow: hidden;
}

/* "xul 2024" under the first month and every January, starting at its
   column and allowed to run past it. */
.timeline-label {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: var(--space-1);
  font-size: var(--size-caption);
  white-space: nowrap;
  border-left: var(--border-hair) solid var(--border-default);
  padding-left: 3px;
}

/* "Por separado": one timeline per MEP, each under its name. */
.timeline-block + .timeline-block {
  margin-top: var(--space-5);
}

.timeline-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variant-numeric: lining-nums tabular-nums;
}

/* A meeting's facts: "Organización" is longer than the vote labels. */
.meeting-facts {
  grid-template-columns: 8.5em 1fr;
  font-size: var(--size-small);
}

.meeting-register {
  margin-top: var(--space-2);
  overflow-wrap: anywhere;
}


/* --- 8d. The lobbies page (lobbies.html) ----------------------------------- */

/* The note on what is mandatory, right under the key figures: small text
   behind a 2px black rule, so it reads as a note on the figures above. */
.lobby-disclaimer {
  max-width: var(--measure-body);
  margin: 0 0 var(--space-5);
  padding-left: var(--space-3);
  border-left: var(--border-strong) solid var(--border-default);
  font-size: var(--size-small);
  line-height: var(--leading-tight-body);
}

/* The filter bar that every section follows: framed like a section, so it
   is clear it applies to the whole page. galicia.html uses the same bar
   (.page-filter-bar), with one row only, so nothing sits below it. */
.lobby-filter-bar,
.page-filter-bar {
  margin: var(--space-5) 0 var(--space-7);
  padding: var(--space-5);
  border: var(--border-hair) solid var(--border-default);
}

.lobby-filter-bar .filter-row:last-of-type {
  margin-bottom: var(--space-3);
}

.page-filter-bar .filter-row:last-of-type {
  margin-bottom: 0;
}

#top-split {
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

/* "Institución pública": a small tag on a recessed grey, after the name. */
.tag-public {
  height: 22px;
  padding: 0 6px;
  border-color: transparent;
  background: var(--surface-sunken);
  font-size: var(--size-caption);
  vertical-align: 1px;
}

/* A heading straight under the section title needs less room above. */
.dash-heading-first {
  margin-top: var(--space-4);
}

/* Each MEP's most frequent contacts: one framed column each, side by side
   while they fit (four on a wide screen, one on a phone; one wide column
   when the filter bar shows a single MEP). */
.contact-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--grid-gap);
}

.contact-column {
  padding: var(--space-4);
  border: var(--border-hair) solid var(--border-default);
}

.contact-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight-body);
}

.contact-column p.contact-total {
  margin: 0 0 var(--space-3);
  font-variant-numeric: lining-nums tabular-nums;
}

/* The contacts: the name on the left, the number of meetings on the right,
   divided by light rules. */
.contact-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  font-size: var(--size-small);
  line-height: var(--leading-tight-body);
}

.contact-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-top: var(--border-hair) solid var(--border-subtle);
  overflow-wrap: anywhere;
}

.contact-list strong {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variant-numeric: lining-nums tabular-nums;
}

/* The files: the number of meetings, then the code (a link) and the
   Spanish name. */
.activity li.procedure-row {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  font-size: var(--size-small);
  line-height: var(--leading-tight-body);
  overflow-wrap: anywhere;
}

.procedure-row strong {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-body);
  font-variant-numeric: lining-nums tabular-nums;
}

/* "En que papel": one bar per MEP on a light track, all on the same scale,
   split into one segment per capacity. Roles in which publishing is
   mandatory are tones of the chart blue (darkest: relatoría), mixed from two
   of the system's tokens; plain membership (voluntary) is grey. The counts
   are also written under each bar, so colour is never the only clue. */
.role-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 var(--space-5);
}

.role-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
}

.role-row + .role-row {
  margin-top: var(--space-5);
}

.role-name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variant-numeric: lining-nums tabular-nums;
}

.role-track {
  background: var(--grey-100);
}

.role-bar {
  display: flex;
  height: 24px;
}

/* A 1px white line between segments, so neighbours stay apart. */
.role-seg + .role-seg {
  border-left: var(--border-hair) solid var(--surface-page);
}

.role-seg-0 { background: var(--chart-colour); }
.role-seg-1 { background: color-mix(in oklch, var(--chart-colour) 75%, var(--data-grid-tint)); }
.role-seg-2 { background: color-mix(in oklch, var(--chart-colour) 55%, var(--data-grid-tint)); }
.role-seg-3 { background: color-mix(in oklch, var(--chart-colour) 38%, var(--data-grid-tint)); }
.role-seg-4 { background: color-mix(in oklch, var(--chart-colour) 22%, var(--data-grid-tint)); }
.role-seg-member { background: var(--grey-300); }
.role-seg-other { background: var(--grey-500); }

.role-row p.role-text {
  margin: var(--space-2) 0 0;
  font-variant-numeric: lining-nums tabular-nums;
}

/* One meeting in the list: the top line, the subject, the organisations,
   and the file when there is one. */
/* The top line is plain running text (not a row of separate boxes), so it
   wraps like a sentence; the capacity badge sits at its end. */
.meeting-row .meeting-meta {
  display: block;
  font-variant-numeric: lining-nums tabular-nums;
}

.meeting-meta .role {
  margin-left: var(--space-1);
}

.meeting-row .vote-title {
  margin-bottom: var(--space-1);
}

.meeting-row p.meeting-orgs,
.meeting-row p.meeting-file {
  margin: 0;
  line-height: var(--leading-tight-body);
  overflow-wrap: anywhere;
}

.meeting-row p.meeting-file {
  margin-top: var(--space-1);
  color: var(--text-secondary);
}

.meeting-sep {
  color: var(--text-secondary);
}


/* --- 8e. The Galicia page (galicia.html) ----------------------------------- */

/* Section 1: one row per MEP, built like the votes page's theme rows
   (.theme-row) but as a button, since pressing it chooses that MEP. A
   button brings its own frame, fill and font; these put the row's back. */
.share-row {
  width: 100%;
  padding-inline: 0;
  border: 0;
  border-top: var(--border-hair) solid var(--border-subtle);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--size-body);
  text-align: left;
  cursor: pointer;
}

.share-row:hover .theme-row-name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Section 2: one bar per word, also a button (it filters the list). Same
   grid as the other bars (.bar-row, .bars-wide); spans instead of divs,
   because a button may only hold text-level elements. */
.word-row {
  width: 100%;
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--size-body);
  text-align: left;
  cursor: pointer;
}

.word-row .bar-track,
.word-row .bar-fill {
  display: block;
}

.word-row:hover .word-row-name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The count, in Rosario figures, lined up on the right (as in .bar-row). */
.word-row-count {
  text-align: right;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variant-numeric: lining-nums tabular-nums;
}

/* The chosen MEP (section 1) and the chosen word (section 2): the name in
   bold with a 2px underline, the way the menu marks the current page. */
.share-row[aria-pressed="true"] .theme-row-name,
.word-row[aria-pressed="true"] .word-row-name {
  font-weight: var(--weight-body-strong);
  text-decoration: underline;
  text-decoration-thickness: var(--border-strong);
  text-underline-offset: 0.2em;
}

/* "tradución automática ao castelán": a small plain tag after the excerpt,
   the size of the "Busca" tag. */
.tag-translation {
  height: 22px;
  margin-left: var(--space-1);
  padding: 0 6px;
  font-size: var(--size-caption);
  vertical-align: 1px;
}

/* Section 4: the transcript sentence with the note, then the link. */
.activity p.note-sentence {
  margin: var(--space-2) 0;
}

/* Section 4: "Ana Miranda Paz: 63 discursos rexistrados en portugués". */
.plain-list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: lining-nums tabular-nums;
}

.plain-list li + li {
  margin-top: var(--space-1);
}


/* --- 9. Small screens --------------------------------------------------- */

@media (max-width: 700px) {
  /* When the header wraps onto several lines, the navigation lines up on the
     left with the logo and the title instead of floating to the right. */
  .site-nav {
    margin-left: 0;
  }

  .panel,
  .mep-header {
    padding: var(--space-5);
  }

  /* Photo above the name instead of beside it. */
  .mep-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .mep-header img {
    width: 120px;
    height: 120px;
  }

  /* On the MEP page the label goes above its value, so long values such as
     the political group's full name get the whole width. */
  .mep-header .facts div {
    grid-template-columns: 1fr;
    padding: var(--space-1) 0;
  }

  /* The two columns stack, and the frame's inner spacing shrinks. */
  .contrast {
    --contrast-pad: var(--space-4);
    padding-top: var(--space-7);
  }

  .columns {
    grid-template-columns: 1fr;
  }

  .column {
    padding: var(--space-4);
  }

  .bar-row {
    grid-template-columns: 96px 1fr 44px;
  }

  .bars-wide .bar-row {
    grid-template-columns: 9em 1fr 2.5em;
  }

  /* The front page guide: one block under another. */
  .home-guide {
    grid-template-columns: 1fr;
  }

  /* votacions.html on a phone. The three key figures stack. */
  .key-figures {
    grid-template-columns: 1fr;
  }

  .key-figure + .key-figure {
    border-left: 0;
    border-top: var(--border-hair) solid var(--border-default);
  }

  .key-figure {
    padding: var(--space-4);
  }

  .key-figure strong {
    font-size: var(--size-h3);
  }

  /* Theme rows: the name on its own line, then the bar and the figure. */
  .theme-row {
    grid-template-columns: 1fr;
  }

  /* The cards' small table becomes one block per MEP, each value under its
     label, so nothing has to scroll sideways. */
  .break-table thead {
    display: none;
  }

  .break-table,
  .break-table tbody,
  .break-table tr,
  .break-table th,
  .break-table td {
    display: block;
  }

  .break-table tr {
    padding-block: var(--space-2);
    border-bottom: var(--border-hair) solid var(--border-subtle);
  }

  .break-table th,
  .break-table td {
    padding: 0;
    border-bottom: 0;
  }

  .break-table td {
    display: grid;
    grid-template-columns: 7.5em 1fr;
    gap: var(--space-3);
    margin-top: var(--space-1);
  }

  .break-table td::before {
    content: attr(data-label);
    color: var(--text-secondary);
  }

  /* Vote rows: the text across the full width, the four squares under it,
     in four equal columns lined up with the surnames above. */
  .square-row {
    grid-template-columns: 1fr;
  }

  .square-cells {
    grid-template-columns: repeat(4, 1fr);
  }

  .square-header > span:first-child {
    display: none;
  }

  /* Monthly columns are too narrow for their counts on a phone; the count
     is still in each column's hidden text and tooltip. */
  .timeline-count {
    visibility: hidden;
  }

  .timeline {
    gap: 1px;
  }

  /* The meeting facts: label above value, so long names get the width. */
  .meeting-facts {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .meeting-facts dd + dt {
    margin-top: var(--space-2);
  }
}