/* Shared stylesheet for the statically generated pages of mepoftheweek.com.
   Palette and typography mirror the homepage (web/index.html). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit}
:root{
  color-scheme:light;
  /* shared palette - identical tokens/values to the homepage (web/index.html) */
  --paper-0:#F0EADB; --paper-1:#FBF7EC; --paper-2:#E6DECA;
  --line:#D8CEB6; --line-2:#BCAF93;
  --ink:#171310; --ink-soft:#39332A; --ink-dim:#6A6152;
  --accent:#7D1F30; --accent-deep:#5A1322;
  --gold:#D2A24C; --gold-soft:#E8C97E;
  --blue:#1E3A5F; --blue-12:rgba(30,58,95,.12); --blue-30:rgba(30,58,95,.34); --blue-soft:#85AEDF;
  --slate:#66788F; --ok:#2E7D32; --err:#B23A2E;
  --cream:#F5F1E4; --cream-dim:#DDD5C0;
  --void:#101B2E; --void-2:#16253C; --void-deep:#0E1219; --void-line:#2B3A52; --void-dim:#CBC5B2;
  --serif:'Libre Caslon Display','Libre Caslon Text',Georgia,serif;
  --serif-t:'Libre Caslon Text',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  /* sector "section colours": one hue per sector, used identically everywhere
     (swatch before a name, bar fill). Muted, equal-lightness ring so no sector
     shouts; the catch-all is a warm grey. Keyed by page_html.SECTOR_COLORS. */
  --sec-labour:#8B2F3B; --sec-environment:#3F7D5B; --sec-health:#9A3E6B; --sec-agriculture:#6E7F2F;
  --sec-finance:#2F5E8C; --sec-technology:#3E5FA8; --sec-transport:#5D6B7A; --sec-energy:#B0871F;
  --sec-chemicals:#7A6A3B; --sec-humanrights:#A64A4A; --sec-thinktanks:#4E7A8A; --sec-business:#7A5C2E;
  --sec-publicaffairs:#8A6D9E; --sec-media:#6A4C93; --sec-consumer:#A8552F; --sec-other:#8A8578;
  --wrap:1180px; --r:4px; --gutter:28px;
}
body{background:var(--paper-0);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--accent);color:#fff;padding:10px 14px;border-radius:var(--r);z-index:200;font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.container{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* masthead */
.site-head{position:relative;position:sticky;top:0;z-index:60;background:rgba(240,234,219,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2)}
.masthead{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px var(--gutter)}
.brand{font-family:var(--serif);font-size:clamp(26px,3.4vw,34px);line-height:1;white-space:nowrap;color:var(--ink);text-decoration:none}
.tablist{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tablist::-webkit-scrollbar{height:0}
.tnav{position:relative;white-space:nowrap;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);padding:9px 11px 11px;text-decoration:none;scroll-snap-align:center}
.tnav:hover{color:var(--ink)}
.tnav-on{color:var(--accent-deep)}
.tnav-on::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;background:var(--accent)}
/* --- masthead menu button (phones) ------------------------------------------
   Nine destinations do not fit side by side on a phone. Above the breakpoint
   the button is not rendered at all and the links sit in their normal row; below
   it, the links become a pop-up panel and the button opens it.
   Everything here is gated on .nav-js, which the inline enhancement adds - with
   JS off the button never appears and the compact link grid stays put. */
.navbtn{display:none;align-items:center;gap:9px;background:var(--paper-1);border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:0 13px;min-height:44px;cursor:pointer}
.navbtn:hover{border-color:var(--blue);color:var(--blue)}
.navbtn-bars{position:relative;width:16px;height:2px;background:currentColor;display:block}
.navbtn-bars::before,.navbtn-bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.navbtn-bars::before{top:-5px}
.navbtn-bars::after{top:5px}
.navbtn[aria-expanded="true"] .navbtn-bars{background:transparent}
.navbtn[aria-expanded="true"] .navbtn-bars::before{top:0;transform:rotate(45deg)}
.navbtn[aria-expanded="true"] .navbtn-bars::after{top:0;transform:rotate(-45deg)}

/* page scaffold */
.page{padding:34px var(--gutter) 60px}
.crumbs{font-size:13px;color:var(--ink-dim);margin-bottom:20px;overflow-wrap:anywhere}
.crumbs a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.crumbs a:hover{text-decoration:underline}
.crumb-sep{margin:0 7px;color:var(--line-2)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
h1.title{font-family:var(--serif);font-weight:400;line-height:1.04;font-size:clamp(34px,6vw,56px);text-wrap:balance;overflow-wrap:anywhere}
.standfirst{color:var(--ink-soft);margin-top:10px;font-size:17px}
.standfirst a{color:var(--blue)}
.lede{color:var(--ink-dim);max-width:62ch;margin-top:14px;font-size:17px}
.glance{background:var(--paper-1);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);padding:14px 18px;margin:26px 0 8px;font-size:16.5px;max-width:75ch}
.section{margin-top:38px}
.section h2{font-family:var(--serif-t);font-weight:400;font-size:24px;margin-bottom:14px}
.section h3{font-size:15px;font-weight:600;margin:18px 0 8px}
.prose p{margin:12px 0;max-width:72ch}
.prose a{color:var(--blue)}
.prose ul{list-style:disc;padding-left:22px;max-width:72ch}
.prose li{margin:6px 0}
.note{font-size:13.5px;color:var(--ink-dim);max-width:72ch;margin-top:14px}
.note a{color:var(--blue)}

/* stat grid */
/* Figures are the pull-quotes of an investigation: display serif, one scale,
   a hairline above each column instead of a boxed card. */
.fig{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.fig-xl{font-size:clamp(44px,5.4vw,72px)}
.fig-l{font-size:clamp(30px,3.4vw,44px)}
.fig-m{font-size:clamp(22px,2.4vw,28px)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px 28px;margin:22px 0}
.stat{border-top:1px solid var(--line-2);padding:12px 0 2px}
.stat-v{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;display:inline-block;min-width:0}
.stat-l{font-size:13px;color:var(--ink-dim);margin-top:8px;line-height:1.35}
/* The sub-line qualifies the label above it ("full time equivalent" under
   LOBBYISTS, "self-reported to the register" under DECLARED LOBBYING SPEND), so
   it should read as subordinate by SIZE and not only by the label's caps and
   weight - at an identical 12.5px it was carrying the same visual rank as the
   thing it qualifies. */
.stat-s{font-size:11.5px;color:var(--ink-dim);margin-top:3px}

/* horizontal bar charts - identical idiom/markup to the homepage barChart.
   max-width is a measure cap: a two- or three-bar chart must not stretch the
   full 1124px text column (cf .glance 75ch, .note 72ch). min-width:0 lets the
   label and track columns actually shrink instead of overflowing the grid. */
.chart{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-width:760px}
.bar-row{display:grid;grid-template-columns:172px 1fr 68px;align-items:center;gap:12px;font-size:13.5px}
.bar-row>*{min-width:0}
.bar-row .bl{color:var(--ink-soft);text-align:right;line-height:1.15;overflow-wrap:break-word}
.bar-track{background:var(--paper-2);border-radius:2px;height:24px;overflow:hidden;border:1px solid var(--line)}
.bar-fill{height:100%;background:var(--blue);border-radius:2px 0 0 2px;min-width:2px}
.bar-fill.accent{background:var(--accent)}
.bar-fill.dim{background:var(--line-2)}
/* a genuine zero is an empty track, not the 2px sliver every other bar gets -
   otherwise a gap year is indistinguishable from a one-meeting year */
.bar-row.zero .bar-fill{min-width:0}
.bar-row.zero .bar-val{color:var(--ink-dim)}
.bar-val{font-family:var(--mono);text-align:right;font-size:13px;color:var(--ink)}
/* narrow-label variant: a four-character year does not need a 172px column */
.chart-yr .bar-row{grid-template-columns:46px 1fr 56px}
.chart-yr .bar-row .bl{font-family:var(--mono);font-size:12.5px;color:var(--ink-dim)}
/* widest step first, so the narrower rule always wins where both match */
@media(max-width:760px){.bar-row{grid-template-columns:138px 1fr 60px;gap:10px;font-size:13px}}
@media(max-width:560px){.bar-row{grid-template-columns:110px 1fr 52px;gap:8px;font-size:12px}}
@media(max-width:420px){.bar-row{grid-template-columns:92px 1fr 46px;gap:7px;font-size:11.5px}}

/* monthly activity - same bars, axes and legend as the homepage trend chart */
.trend-summary{font-size:13.5px;color:var(--ink-soft);margin:8px 0 4px}
.scroll-cue{display:none;font-family:var(--mono);font-size:11px;color:var(--blue);margin:8px 0 3px}
.trend-wrap{overflow-x:auto;margin-top:4px;overscroll-behavior-x:contain}
.trend-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.trendsvg{display:block;width:100%;min-width:560px;height:220px}
.trend-leg{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--ink-dim)}
.trend-leg span{display:inline-flex;align-items:center;gap:6px}
.trend-leg i{width:12px;height:12px;border-radius:2px;display:inline-block}

/* tables */
.tbl-scroll{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-1)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.tbl th{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.tbl a:hover{text-decoration:underline}
.tbl .num{text-align:right;font-family:var(--mono);white-space:nowrap}

/* link grids (hubs, directories, browse) */
.linkcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 22px;margin:14px 0}
.linkcols a{display:block;color:var(--blue);text-decoration:none;font-size:14.5px;padding:4px 0;border-bottom:1px solid transparent}
.linkcols a:hover{text-decoration:underline}
.linkcols .cnt{color:var(--ink-dim);font-family:var(--mono);font-size:12.5px}

/* Cards for related entities. Explicit column counts, never auto-fill: with
   auto-fill the column count - and therefore which names wrap to two lines -
   changes with the viewport, so the same set of boxes looks different at every
   width. grid-auto-rows:1fr makes every card as tall as the tallest; implicit
   auto rows are sized independently, which is why one long group name used to
   inflate only its own row and leave the grid visibly ragged. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:12px;margin:14px 0}
/* a count that would leave one card alone on the last row: span it, so it reads
   as a deliberate wide card rather than an orphan beside two empty cells */
.card{background:var(--paper-1);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0;display:flex;flex-direction:column}
.card a{color:var(--blue);text-decoration:none;font-weight:600;overflow-wrap:break-word}
.card a:hover{text-decoration:underline}
/* margin-top:auto puts every sub-line on the same baseline inside the now
   equal-height cards, so a one-line and a two-line title still look alike */
.card .sub{font-size:13px;color:var(--ink-dim);margin-top:auto;padding-top:6px}
.card .sub .n{font-family:var(--mono);color:var(--ink-soft)}
/* keyed cards: an entity-coloured rule plus a mono key label, so a directory of
   nine political groups is not nine interchangeable boxes */
.card-key{border-left:3px solid var(--k,var(--line-2))}
.card-key .kk{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--k,var(--blue));margin-bottom:5px}
@media(max-width:840px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards>.card:last-child{grid-column:auto}
  .cards>.card:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:560px){ .cards{grid-template-columns:1fr} }

/* provenance */
.prov{background:var(--paper-1);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin:36px 0 0;font-size:13.5px;color:var(--ink-soft);max-width:none}
.prov a{color:var(--blue)}

/* footer */
.site-foot{border-top:1px solid var(--line-2);margin-top:56px;background:var(--paper-1)}
.foot-inner{max-width:var(--wrap);margin:0 auto;padding:26px var(--gutter) 34px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:12px}
.foot-links a{color:var(--blue);font-size:13.5px;text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot-meta{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-dim)}

@media(max-width:760px){
  /* the nine destinations become a pop-up panel; see .navbtn above */
  .nav-js .masthead{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .nav-js .navbtn{display:inline-flex}
  .nav-js .tablist{display:none;position:absolute;left:0;right:0;top:100%;z-index:70;
    flex-direction:column;gap:0;background:var(--paper-1);border-top:1px solid var(--line-2);
    border-bottom:1px solid var(--line-2);box-shadow:0 10px 26px rgba(14,18,25,.16);
    padding:6px var(--gutter) 10px;margin:0;overflow:visible;max-height:calc(100vh - 64px);overflow-y:auto}
  .nav-js .tablist[data-open]{display:flex}
  .nav-js .tnav{min-height:48px;justify-content:flex-start;text-align:left;font-size:13px;
    letter-spacing:.06em;padding:6px 2px;border-bottom:1px solid var(--line)}
  .nav-js .tablist a:last-child{border-bottom:0}
  .nav-js .tnav-on{color:var(--accent-deep)}
  .nav-js .tnav-on::after{left:auto;right:auto;top:10px;bottom:10px;width:3px;height:auto;
    margin-left:-10px}
  :root{--gutter:22px}
  .masthead{flex-direction:column;align-items:stretch;gap:6px;padding:8px var(--gutter)}
  /* Every destination stays visible: two compact, tap-sized rows replace the
     clipped horizontal strip that hid the later sections on phones. */
  .tablist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 4px;
    width:100%;margin:0;padding:0;overflow:visible;scroll-snap-type:none;
    -webkit-mask-image:none;mask-image:none}
  .tnav{min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;
    padding:6px 2px;font-size:10.5px;line-height:1.15;letter-spacing:.025em;
    white-space:normal;text-align:center;overflow-wrap:anywhere}
  .tnav-on::after{left:6px;right:6px;bottom:2px}
  .trend-wrap{margin-right:calc(-1*var(--gutter));padding-right:var(--gutter)}
  .trend-wrap--mep{overflow-x:hidden;margin-right:0;padding-right:0}
  .trend-wrap--mep .trendsvg{width:100%;min-width:0;height:auto;max-height:220px}
  .scroll-cue{display:block}
  .trend-wrap--mep + .trend-leg{margin-top:8px}
}
@media(max-width:420px){
  :root{--gutter:20px}
  .tnav{font-size:10px;letter-spacing:.015em}
  .dir-filter{flex-basis:100%;width:100%}
}

/* profile header (MEP pages): portrait + party badge, ported from the dashboard */
.prof-head{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-top:4px}
.prof-pic{flex:0 0 132px;width:132px;height:164px;object-fit:cover;border-radius:4px;background:var(--paper-2)}
.prof-main{flex:1;min-width:260px}
.party-badge{display:inline-block;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:2px;vertical-align:middle}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
/* the sector swatch: a small printed dot before a sector name */
.sw{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--c,var(--sec-other));vertical-align:.02em;margin-right:.38em;flex:none}
/* motion: bars grow to their width once when they enter view; figures count
   up once. Both are opt-in via html.motion (set by motion.js, never under
   prefers-reduced-motion), so no-JS and reduced-motion get the final state. */
html.motion .bar-fill,html.motion .cmp-fill,html.motion .stack i{transform-origin:left center;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
html.motion .bar-fill:not(.in),html.motion .cmp-fill:not(.in),html.motion .stack i:not(.in){transform:scaleX(0)}
@media(prefers-reduced-motion:reduce){html.motion .bar-fill,html.motion .cmp-fill,html.motion .stack i{transition:none;transform:none}}
@media print{html.motion .bar-fill,html.motion .cmp-fill,html.motion .stack i{transition:none;transform:none}}
.tag2{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:3px 8px;border:1px solid var(--line-2);border-radius:2px;color:var(--ink-soft);text-decoration:none}
.tag2:hover{border-color:var(--blue);color:var(--blue)}
/* mid-term arrival: a status, not a committee code, so it is tinted and its
   text is not truncated to an acronym */
.tag-new{font-family:var(--sans);letter-spacing:.02em;color:var(--accent-deep);border-color:rgba(125,31,48,.34);background:rgba(125,31,48,.08)}
/* The black box. Inverted rather than tinted: it is the strongest claim the
   site makes about an individual and should not read as one more committee
   code. Dark fill, not the accent red - red would say "wrongdoing", and an
   absent declaration is not a finding of one. */
/* the sectors an organisation ALSO belongs to, after the headline one */
.also{color:var(--ink-dim);font-size:.92em}
.also a{color:var(--ink-dim);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.also a:hover{color:var(--blue)}
.tag-bb{font-family:var(--sans);letter-spacing:.02em;color:var(--paper-1);background:var(--ink);border-color:var(--ink)}
.tag-bb:hover{color:var(--paper-1);background:var(--ink-soft);border-color:var(--ink-soft)}
/* The sloppy. Outlined in gold rather than filled: it describes how a record
   was filled in, which is a lesser claim than having no record at all, and the
   two must not read as the same severity when a member carries both. */
.tag-sl{font-family:var(--sans);letter-spacing:.02em;color:var(--ink);border-color:var(--gold);background:rgba(210,162,76,.16)}
.tag-sl:hover{color:var(--ink);border-color:var(--gold);background:rgba(210,162,76,.3)}
/* Black-box roster: names, not metrics, so it is a plain wrapping list rather
   than the metric-bearing .dir-list grid. */
/* Separators live on the rows, not in the grid gap. The gap technique paints
   the container and lets it show through as a rule, which also paints the
   EMPTY trailing cells - 43 names in a four-column grid left a tan block in the
   corner. Borders on each cell leave the remainder of the last row blank. */
.bb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;margin-top:14px}
.bb-row{display:flex;flex-direction:column;gap:2px;padding:11px 13px;background:var(--paper-1);text-decoration:none;min-width:0;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.bb-row:hover{background:var(--paper-2)}
.bb-nm{font-weight:600;color:var(--ink);font-size:14.5px;overflow-wrap:anywhere}
.bb-meta{font-family:var(--mono);font-size:11px;color:var(--ink-dim);letter-spacing:.02em}

/* /data/ is reference material, not an article: let its text use the full
   page width, and give it a jump bar so the edit log is one click away. */
.datapage .prose p,.datapage .prose ul,.datapage .note,.datapage .glance{max-width:none}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 6px}
.jump a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);border:1px solid var(--blue-30);border-radius:2px;padding:7px 11px;text-decoration:none;white-space:nowrap}
.jump a:hover{border-color:var(--blue);background:var(--blue-12)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Two related charts read side by side - ported from the homepage organisation
   profile. h3 rather than the homepage's h4 so heading order stays h1>h2>h3. */
.prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media(max-width:720px){ .prof-grid{grid-template-columns:1fr} }
.prof-card{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-1);padding:16px 18px;min-width:0}
.prof-card h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 4px}
.prof-card .sub{color:var(--ink-dim);font-size:12.5px;margin-bottom:12px}
.prof-card .chart{margin-top:0;max-width:none}

/* Share bars: the label sits ABOVE a full-width track, so a long category name
   never squeezes the bar - the fixed label column of .bar-row is exactly what
   breaks on organisation pages. The axis is a fixed 0-100% share of a stated
   total, never rescaled to the largest row, so bars are comparable across
   pages and a full bar means "all of them", not "the biggest of them". */
.cmp{display:flex;flex-direction:column;gap:11px}
.cmp-row .cl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px;font-size:12.5px;color:var(--ink-soft)}
.cmp-row .cl span{min-width:0;overflow-wrap:break-word}
.cmp-row .cl b{font-family:var(--mono);font-weight:600;color:var(--ink);white-space:nowrap}
.cmp-row .cl b .pc{margin-left:7px;color:var(--ink-dim);font-weight:400}
.cmp-track{position:relative;height:20px;background:var(--paper-2);border:1px solid var(--line);border-radius:2px;overflow:hidden}
/* halfway hairline: makes the fixed 0-100% axis readable without an axis row */
.cmp-track::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-2);opacity:.55}
.cmp-fill{height:100%;background:var(--line-2);border-radius:2px 0 0 2px;min-width:2px}
.cmp-fill.you{background:var(--blue)}

/* 100% stacked category bar (companies / business groups / NGO / diplomats /
   other) - ported from the homepage; no reveal transition on static pages */
.stack{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.stack-row .sl{font-size:12.5px;font-weight:600;margin-bottom:5px;display:flex;justify-content:space-between;gap:10px}
.stack-row .sl .cov{color:var(--ink-dim);font-weight:400;font-family:var(--mono);font-size:11px}
.stack-bar{display:flex;height:28px;border-radius:3px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.stack-bar i{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;min-width:0;overflow:hidden;white-space:nowrap}
.seg-comp{background:var(--accent-deep)}.seg-grp{background:var(--accent)}.seg-ngo{background:var(--blue)}
.seg-dip{background:var(--slate)}.seg-oth{background:var(--void-dim)}
.stack-bar i.seg-oth{color:var(--ink)}
.stack-legend{display:flex;gap:15px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--ink-dim)}
.stack-legend span{display:inline-flex;align-items:center;gap:6px}
.stack-legend i{width:11px;height:11px;border-radius:2px;display:inline-block}

/* ---- roll-call votes -------------------------------------------------- */
/* The same .stack-bar segment machinery as .seg-*, so a vote breakdown and a
   counterpart mix are one component with two vocabularies. Colours are defined
   once in page_html.VOTE_POSITIONS and mirrored here; for/against are a
   diverging cool/warm pair with the neutral slate between them, never a
   green/red pair. "No vote recorded" is an EMPTY seat rather than a fourth
   fill - every candidate tint either collided with another swatch or fell
   under 3:1 against the page. */
.v-for{background:var(--blue)}
.v-agn{background:var(--accent)}
.v-abs{background:var(--slate)}
.v-nov{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.stack-bar i.v-nov{color:var(--ink-soft)}
/* month x group heat grid. Reuses .trend-wrap for the phone gutter bleed and
   horizontal scroll; height is auto because, unlike .trendsvg, this one grows
   with the number of rows rather than being fixed at 220px. */
.matrixsvg{display:block;width:100%;min-width:620px;height:auto}
/* one dot per member, in political-group order. Scales whole rather than
   scrolling: a horizontally clipped half-circle is worse than a small one. */
.hemi{margin:6px 0 0}
.hemisvg{display:block;width:100%;max-width:620px;height:auto;margin:0 auto}
/* a chart's figures as text, for anyone the graphic does not serve */
.tbl-alt{margin-top:12px}
.tbl-alt>summary{font-size:13px;color:var(--blue);cursor:pointer;max-width:72ch}
.tbl-alt>summary:hover{color:var(--ink)}

/* One vote as a labelled split bar, stacked into a scannable column. Reuses the
   .stack machinery; only the date prefix and the lead headline are new, because
   any CSS added here rewrites ~4,000 pages. */
.vdate{font-family:var(--mono);font-size:11px;color:var(--ink-dim);margin-right:7px}
.lead-hed{font-family:var(--serif-t);font-size:26px;line-height:1.2;margin:2px 0 14px}
@media(max-width:560px){ .lead-hed{font-size:21px} }
/* Complete named roll calls and the hub's year directory stay collapsed until
   requested, so a 700-member source record remains quick and readable on a
   phone. The DOM is still plain text and links: find-in-page and assistive
   technology do not depend on script. */
.vote-members,.vote-directory{border-top:1px solid var(--line);padding:9px 0}
.vote-members:last-child,.vote-directory:last-child{border-bottom:1px solid var(--line)}
.vote-members>summary,.vote-directory>summary{cursor:pointer;font-weight:700;color:var(--ink);min-height:32px}
.vote-members ul,.vote-links{list-style:none;margin:10px 0 4px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.vote-members li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);min-width:0}
.vote-members li>a{min-width:0;overflow-wrap:anywhere}
.vote-members li>span{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--ink-dim)}
.vote-links li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.vote-links time{font-family:var(--mono);font-size:11px;color:var(--ink-dim)}
.vote-links a{overflow-wrap:anywhere}

/* category chips */
.chip{font-size:11px;font-weight:600;padding:2px 7px;border-radius:2px;background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line);white-space:nowrap}
.chip.biz{color:var(--accent-deep);border-color:rgba(125,31,48,.34);background:rgba(125,31,48,.1)}
.chip.ngo{color:var(--blue);border-color:var(--blue-30);background:var(--blue-12)}
.chip.dip{color:var(--blue);border-color:rgba(102,120,143,.34);background:rgba(102,120,143,.1)}
.chiplinks{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px}
.chiplinks a{font-size:12px;color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-30)}
.chiplinks a:hover{color:var(--ink)}

/* dark caveat panel */
.void-card{background:var(--void);color:var(--void-dim);border-radius:var(--r);padding:20px 22px;margin-top:16px;font-size:14px}
.void-card b{color:#fff}
.void-card a{color:var(--gold-soft)}

/* Directory search/filter/sort on /meps/ and /orgs/. The controls only work
   with JS, so they stay hidden until the enhancement script sets .js on <html>
   - the table underneath is complete and usable without them. */
.dir-controls{display:none;gap:10px;flex-wrap:wrap;margin:2px 0 16px}
.js .dir-controls{display:flex}
.dir-search{flex:1;min-width:220px;padding:10px 13px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper-1);font-size:14px}
.dir-filter{padding:10px 13px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper-1);font-size:13px;color:var(--ink)}
/* The MEP directory as a grid of compact cards - many across and down, each a
   party-coloured tag beside a name. Ported from the dashboard directory; the
   whole card is the link, so there is no small text target to hit. */
/* 360px, not 340: the cards now carry the black-box and sloppy labels under the
   name, and at the old width a two-label member wrapped the metrics column. */
.dir-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:14px 0}
.dir-row{background:var(--paper-1);padding:11px 14px;display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.dir-row:hover{background:var(--paper-2)}
.dir-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* min-width so the six short labels (EPP, S&D, PfE, ECR, ESN, Renew - 591 of
   the 719 members) share a tag width and their names start on one line.
   Greens/EFA, The Left and Non-attached are wider than that and stay so:
   padding a 3-letter tag out to 99px to match them would eat a third of the
   card. */
.ptag{flex:0 0 auto;align-self:center;min-width:52px;color:#fff;font-size:10px;font-weight:700;letter-spacing:.03em;line-height:1;padding:5px 7px;border-radius:3px;text-transform:uppercase;text-align:center;white-space:nowrap}
/* flex:1 1 auto is the fix, not decoration: with no flex property this
   defaulted to 0 1 auto - shrinkable - while .dir-metrics was 0 0 auto and
   refused to, so in a narrow card the metrics won and the MEMBER'S NAME
   collapsed to zero width. The desktop directory rendered as a wall of
   anonymous numbers. The name now takes the leftover space and ellipsises,
   which is what min-width:0 was always there to allow. */
.dir-row .dmeta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.dir-row .dn{font-weight:600;font-size:13.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--blue)}
.dir-row:hover .dn{text-decoration:underline}
.dir-row .dsub{font-size:11.5px;color:var(--ink-dim);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The two labels, on the card. Same visual grammar as the chips on the profile
   pages so a reader meets one idea, not two: black box solid dark because it is
   the stronger claim, sloppy outlined in gold because it describes how a record
   was filled in rather than the absence of one. */
.dir-row .dflags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.dflag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.25;padding:2px 5px;border-radius:2px;white-space:nowrap}
.dflag-bb{background:var(--ink);color:var(--paper-1)}
.dflag-sl{background:rgba(210,162,76,.2);color:var(--ink-soft);border:1px solid var(--gold)}
.dir-metrics{display:flex;align-items:stretch;gap:10px;margin-left:auto;flex:0 0 auto}
.dir-row .dm{font-size:14px;color:var(--ink);font-family:var(--mono);text-align:right;line-height:1;white-space:nowrap}
.dir-row .dm strong{display:block;font-weight:500}
.dir-row .dm small{display:block;color:var(--ink-dim);font-size:9px;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
/* Both captions sit on one line, so the metric column sizes to its content and
   the name keeps the rest. The wrapping and fixed-width workaround that used to
   live here existed only to survive an 18-character caption; shortening that to
   "linked" removed the problem rather than managing it. */
.dir-row .dm{min-width:0}
.dir-row .dm+.dm{margin-left:0;padding-left:10px;border-left:1px solid var(--line)}
.dir-more{margin-top:12px;color:var(--ink-dim);font-size:12.5px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.linkbtn{background:none;border:0;color:var(--blue);font-weight:600;cursor:pointer;font:inherit;font-size:12.5px;padding:0;border-bottom:1px solid var(--blue-30)}
.linkbtn:hover{color:var(--ink)}

@media(max-width:560px){
  .dir-controls{align-items:stretch}
  .dir-search{min-width:0;width:100%;flex-basis:100%}
  .dir-filter{flex:1 1 calc(50% - 5px);min-width:0}
  .dir-search,.dir-filter,.linkbtn{font-size:16px;min-height:44px}
  .dir-list{grid-template-columns:1fr}
  .dir-row{min-height:58px;padding:12px}
  .dir-row .dn{font-size:14px}
  .dir-row .dsub{font-size:12px}
  .dir-row .dm{font-size:15px}
  .dir-metrics{gap:8px}
  .dir-row .dm+.dm{padding-left:8px}
  /* At phone width the outer-arc group labels collide; the legend below the
     chart carries the key instead. The dots stay legible as a density field,
     which is the honest reading at this size anyway. */
  .hemisvg [data-grp]{display:none}
  .vote-members ul,.vote-links{grid-template-columns:1fr}
  .vote-links li{grid-template-columns:96px minmax(0,1fr)}
}