/* The band. Every offset is logical: the document is RTL and a physical property would
   put the coalition on the wrong end of every bar. */

.bloc-band{
  border-bottom:1px solid var(--line);
  padding-bottom:18px;
  margin-bottom:22px;
}
.bloc-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap; margin-bottom:12px;
}
.bloc-rows{ margin-top:4px }
/* Density is the point of this band: it exists to be taken in at a glance, and screenshot.
   The row used to be 78-95px tall around a 34px graph, so more than half of it was text and
   padding and the gap between two graphs was wider than a graph. Three things fixed that,
   in order of how much they bought: the new-right clause moved inside the bar (see
   blocs.js), the padding halved, and the meta set one notch smaller. The label column is
   340px so the two rows that name what was divided out still wrap to two lines and no
   more. A visible border between rows keeps consecutive bars reading as distinct objects
   now that they sit close together. */
.bloc-row{
  display:grid; grid-template-columns:340px 1fr; gap:14px;
  align-items:center; padding:6px 0; border-bottom:1px solid var(--line-faint);
}
.bloc-name{ font-weight:500; color:var(--steel-900); font-size:12.5px; line-height:1.25 }
.bloc-meta{ color:var(--muted); font-size:10.5px; margin-top:2px; line-height:1.4 }
.bloc-star{ color:var(--rose-text); font-weight:700 }

.bloc-track{
  position:relative; display:flex; height:34px; overflow:hidden;
  background:var(--ground); border-radius:2px;
}
.bloc-seg{
  display:flex; align-items:center; overflow:hidden; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.bloc-seg b{ font-size:15px; font-weight:700; margin-inline-end:6px }
.bloc-seg i{ font-style:normal; font-size:11px; opacity:.92 }
/* The new-right addendum, inside the coalition segment. Quieter than the label beside it:
   it is a second reading of the same bar, not part of the figure the bar states. */
.seg-plus{ text-decoration:none; font-size:10px; opacity:.62; margin-inline-start:8px }
.seg-co{ background:var(--steel-700); color:#fff; padding-inline-start:9px }
/* Hatched, not merely a lighter fill: this segment is our reading, and it has to look
   different in kind from the two that are arithmetic. */
.seg-nw{
  background:repeating-linear-gradient(45deg,
    var(--mark) 0 3px, var(--line-soft) 3px 6px);
}
.seg-rest{
  background:#7FA9B4; color:#12333B;
  justify-content:flex-end; padding-inline-end:9px;
}
.seg-rest b{ margin-inline-end:0; margin-inline-start:6px }

.bloc-majority{
  position:absolute; top:0; bottom:0; width:0;
  border-inline-start:2px dashed var(--ink); opacity:.55;
}

.bloc-refusal{
  background:var(--rose-tint); border:1px solid var(--rose);
  border-radius:3px; padding:7px 11px;
  color:var(--rose-text); font-size:11px; line-height:1.5;
}
/* Two columns, not one narrow block. A 92ch measure under a full-width graph leaves the
   notes hugging one edge with a ragged gutter beside them, which reads as an unfinished
   column rather than as a deliberate measure. Columns fill the width AND keep the line
   near 80ch, which is the whole point of the constraint. This is the same answer
   archive.css and institutes.css already give to the same problem; the band simply did
   not inherit it. One column below 900px, where two would be too narrow to be worth it. */
.bloc-notes{ margin-top:12px; columns:2; column-gap:40px }
.bloc-notes p{
  color:var(--muted); font-size:11px; line-height:1.6; margin:0 0 9px;
  break-inside:avoid;
}
@media (max-width:900px){
  .bloc-notes{ columns:1; max-width:80ch }
}
.bloc-more{ margin:10px 0 0 }
.bloc-more a{ color:var(--teal-text); font-size:12.5px }
.bloc-arrow{ margin-inline-start:6px }

@media (max-width:720px){
  .bloc-row{ grid-template-columns:1fr; gap:6px }
  .bloc-seg i{ display:none }          /* the numbers survive; the labels are in the legend */
}