/* Plenum seating map (/plenum). Loaded only on the plenum page (see the `head`
   block in plenum.html); not part of the global style.css.
   Relative url()s resolve from this css/ dir, so ../img/ points at static/img. */
.plenum__map {
  position: relative;
  margin: 18px auto 0;
  max-width: 1040px;     /* render the hall large so the name labels read */
  aspect-ratio: 1.2;     /* fallback; plenum.js sets the exact ratio */
}
.plenum-popover {
  position: absolute; z-index: 20;
  transform: translate(-50%, calc(-100% - 8px));
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.1s ease;
}
.plenum-popover.is-visible { opacity: 1; visibility: visible; }
.mk-popover__card {
  min-width: 150px; max-width: 220px;
  padding: 8px 11px; text-align: right;
  background: var(--card-bg, #fff);
  border: 1px solid var(--line, #e0dccd);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}
.mk-popover__name { font-weight: 700; font-size: var(--fs-md); }
.mk-popover__faction { margin: 2px 0 6px; }
.mk-popover__roles { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.mk-popover__stats { margin: 0; display: grid; gap: 2px; }
.mk-popover__stats > div { display: flex; justify-content: space-between; gap: 12px; }
.mk-popover__stats dt { color: var(--ink-soft, #777); font-size: var(--fs-sm); }
.mk-popover__stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Seats are absolutely positioned (left/top set by plenum.js via CSSOM). Hidden
   until laid out so a no-JS load doesn't pile them at the origin. */
.plenum__map .seat-box { display: none; }
.plenum__map.is-ready .seat-box { display: flex; }
.seat-box {
  position: absolute;
  width: var(--seat-w, 2%);
  height: var(--seat-h, 3%);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
/* The seat-icon shape lives on ::before (so it can be coloured/masked without
   clipping the .seat-box__label text). plenum.js sets --seat-color per seat. */
.seat-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--seat-color, var(--line, #d8d2c4));
  -webkit-mask: url(../img/seat-cinema-svgrepo-com.svg) center / contain no-repeat;
          mask: url(../img/seat-cinema-svgrepo-com.svg) center / contain no-repeat;
}
a.seat-box { cursor: pointer; text-decoration: none; outline: none; }
a.seat-box:hover::before, a.seat-box:focus-visible::before {
  /* drop-shadow follows the masked seat shape (box-shadow would be clipped). */
  filter: drop-shadow(0 0 1px var(--ink, #111)) drop-shadow(0 0 1px var(--ink, #111));
}
a.seat-box:hover, a.seat-box:focus-visible { z-index: 5; }
.seat-box--empty::before {
  background-color: var(--line, #d8d2c4);
  opacity: 0.5;
}
/* Government-role annotation. Seats are tiny (10 source units, ~2% of the map),
   so this is a ring around the seat rather than an icon inside it — layered via
   box-shadow (not ::before, which is already the masked seat shape) so it isn't
   clipped. The Norwegian-Law subset (resigned their MK seat, Amendment 49) gets
   an extra dot badge on top of the ring. */
.seat-box--gov {
  box-shadow: 0 0 0 1.5px var(--primary, #0e6b6b);
  border-radius: 3px;
}
.seat-box--norwegian::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stop, #c0392b);
  border: 1px solid var(--card-bg, #fff);
}
/* MK name label: real HTML text, so it stays crisp and a fixed, readable size
   regardless of how large the hall is drawn. Overflows the small seat box. */
.seat-box__label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--ink, #1b1b1b);
  pointer-events: none;
}
a.seat-box:hover .seat-box__label,
a.seat-box:focus-visible .seat-box__label { font-weight: 700; }

.plenum__note { text-align: center; margin-top: 12px; }
.plenum__credit { text-align: center; margin-top: 6px; }

.plenum__legend {
  list-style: none; margin: 14px auto 0; padding: 0;
  max-width: 720px;
  display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
}
.plenum__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.plenum__swatch { flex: 0 0 auto; vertical-align: middle; }
.plenum__legend-item .muted { font-variant-numeric: tabular-nums; }
.plenum__legend--gov { margin-top: 6px; }

/* Legend markers mirroring .seat-box--gov / .seat-box--norwegian above. */
.gov-icon { flex: 0 0 auto; width: 14px; height: 14px; position: relative; }
.gov-icon--gov {
  border-radius: 3px;
  box-shadow: 0 0 0 1.5px var(--primary, #0e6b6b);
}
.gov-icon--norwegian::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--stop, #c0392b);
}

.plenum__list { max-width: 720px; margin: 16px auto 0; }
.plenum__list > summary {
  cursor: pointer; list-style: none; padding: 8px 0;
  font-weight: 600; font-size: var(--fs-sm); color: var(--primary);
}
.plenum__list > summary::-webkit-details-marker { display: none; }
.plenum__list > summary::before { content: "▾ "; }
.plenum__list[open] > summary::before { content: "▴ "; }
.plenum__list-faction { margin: 10px 0; }
.plenum__list-title { font-size: var(--fs-md); margin: 0 0 4px; }
.plenum__list-members {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 2px 14px;
}