/* Voting Atlas - Shifts: Positionswechsel (Seite /shifts, Kasten auf der Startseite, Verlaufsseite) */

/* ---------- Kasten "Recent shifts" auf der Startseite ---------- */
.shiftsbox {
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 18px 22px 8px; margin: 0 0 16px;
}
.shiftsbox[hidden] { display: none; }
.shiftsbox .boxhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shiftsbox h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0; }
.shiftsbox .links { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; }
.shiftsbox .links a { color: var(--un-deep); text-decoration: none; }
.shiftsbox .links a:hover { text-decoration: underline; }
.shiftsbox .sub { margin: 2px 0 6px; font-size: 12.5px; color: var(--muted); }


/* ---------- eine Abstimmung mit ihren Wechseln ---------- */
.shiftgroup { padding: 12px 0; border-top: 1px solid var(--line); }
.shiftgroup:first-of-type { border-top: 0; }
.shiftsbox .shiftgroup:first-of-type { border-top: 1px solid var(--line); }
.shiftgroup .meta { margin: 0 0 3px; font-size: 12.5px; color: var(--muted); }
.shiftgroup .meta .symbol { text-decoration: none; }
.shiftgroup h3 { margin: 0 0 6px; font-family: var(--font-body); font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.shiftgroup h3 a { color: var(--ink); text-decoration: none; }
.shiftgroup h3 a:hover { color: var(--un-deep); }
.shift { display: flex; gap: 10px; align-items: baseline; margin: 4px 0; font-size: 14px; line-height: 1.5; }
.shift .dir { flex: none; width: 150px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.shift .dir i {
  font-style: normal; display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-size: 11.5px;
}
.shift .dir i.t-yes  { background: var(--yes-bg);  color: var(--yes-ink); }
.shift .dir i.t-no   { background: var(--no-bg);   color: var(--no-ink); }
.shift .dir i.t-abst { background: var(--abst-bg); color: var(--abst-ink); }
.shift .who a { color: var(--ink); text-decoration: none; font-weight: 600; }
.shift .who a:hover { color: var(--un-deep); text-decoration: underline; }
.shift.weak .who a { font-weight: 400; color: var(--muted); }
.shiftgroup .foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 8px 0 0; font-size: 12.5px; color: var(--faint);
}
.shiftgroup .foot > span a { color: var(--muted); }
/* Verlauf: deutlich als Knopf, damit man ihn nicht uebersieht */
.historybtn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font: 800 13px/1 var(--font-body); color: var(--un-deep); text-decoration: none;
  background: var(--un-soft); border: 1.5px solid var(--un-soft); border-radius: var(--r-pill);
  padding: 8px 14px; transition: background .15s, border-color .15s, transform .15s;
}
.historybtn:hover { background: var(--surface); border-color: var(--un); transform: translateY(-1px); }
.historybtn span { transition: transform .15s; }
.historybtn:hover span { transform: translateX(2px); }

/* ---------- Seite /shifts ---------- */
.shifts-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.controls .lede { color: var(--muted); margin: 0; line-height: 1.6; }
.contested { margin: 0; padding-left: 22px; }
.contested li { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.contested li:first-child { border-top: 0; }
.contested a { color: var(--ink); text-decoration: none; font-weight: 600; }
.contested a:hover { color: var(--un-deep); }
.contested .n { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.contested .n small { color: var(--faint); font-weight: 600; }

/* ---------- Verlaufsseite ---------- */
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin: 0 0 6px; }
.series-title { line-height: 1.35; margin-bottom: 6px; }
.toggle { display: inline-flex; gap: 4px; }
.toggle button {
  font: 700 12.5px/1 var(--font-body); padding: 7px 11px; border-radius: var(--r-pill); cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--muted);
}
.toggle button[aria-pressed="true"] { background: var(--un-soft); border-color: var(--un-soft); color: var(--un-deep); }
#series-changes { margin-top: 8px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }

.serieschart { position: relative; margin-bottom: 4px; }
.serieschart svg { display: block; max-width: 100%; height: auto; }
.serieschart .grid { stroke: var(--line); }
.serieschart .ylab { fill: var(--faint); font-size: 11px; text-anchor: end; font-family: var(--font-body); }
.serieschart .xlab { fill: var(--faint); font-size: 11px; text-anchor: middle; font-family: var(--font-body); }
.serieschart rect.s-yes  { fill: var(--yes-bg); }
.serieschart rect.s-no   { fill: var(--no-bg); }
.serieschart rect.s-abst { fill: var(--abst-bg); }
.serieschart .hit { fill: transparent; cursor: pointer; }
.serieschart g.bar.on rect:not(.hit) { filter: brightness(.9); }
.charttip {
  position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 2;
  background: var(--surface); color: var(--ink); border-radius: 10px; box-shadow: var(--shadow-hover);
  padding: 7px 11px; font-size: 13px; white-space: nowrap;
}
.charttip small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }

.serieslist .vrow { align-items: center; }
.serieslist .year { flex: none; width: 46px; font-weight: 800; font-size: 14px; color: var(--muted); }
.serieslist .minibar { flex: none; width: 120px; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .shiftsbox { padding: 16px 16px 6px; }
  .shift { flex-direction: column; gap: 2px; }
  .shift .dir { width: auto; }
  .shiftgroup .foot { flex-direction: column; align-items: stretch; }
  .historybtn { justify-content: center; }
  .serieslist .vrow { flex-direction: row; }
  .serieslist .minibar { width: 70px; }
}