.eurofed-alignment-graph {
  --alignment-paper: rgba(15, 22, 36, 0.94);
  --alignment-paper-strong: rgba(16, 24, 38, 0.95);
  --alignment-text: #d9d9d9;
  --alignment-muted: #d4deec;
  --alignment-accent: #4681c9;
  --alignment-highlight: #e0a11b;
  --alignment-border: rgba(120, 154, 199, 0.28);
  --alignment-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
  width: min(100%, var(--eurofed-wide-measure, 76rem));
  margin: 2rem auto;
  color: var(--alignment-text);
  font-family: var(--eurofed-ui-sans-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.eurofed-alignment-card {
  overflow: hidden;
  border: 1px solid var(--alignment-border);
  border-radius: 0.85rem;
  background: var(--alignment-paper);
  box-shadow: var(--alignment-shadow);
}

.eurofed-alignment-header,
.eurofed-alignment-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 2vw, 1.35rem);
  border-color: var(--alignment-border);
}

.eurofed-alignment-header {
  border-bottom: 1px solid var(--alignment-border);
}

.eurofed-alignment-footer {
  border-top: 1px solid var(--alignment-border);
  justify-content: flex-end;
  margin-top: 0;
  padding-block: 0.5rem;
}

.eurofed-alignment-kicker {
  display: block;
  margin: 0 0 0.18rem;
  color: var(--alignment-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eurofed-alignment-title {
  margin: 0;
  color: var(--alignment-text);
  font-size: clamp(1.08rem, 2vw, 1.38rem);
  line-height: 1.15;
}

.eurofed-alignment-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  flex: 0 0 auto;
}

.eurofed-alignment-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.52rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--alignment-accent) 56%, var(--alignment-border));
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--alignment-accent) 10%, var(--alignment-paper-strong));
  color: var(--alignment-text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.eurofed-alignment-button:hover,
.eurofed-alignment-button:focus-visible {
  border-color: var(--alignment-accent);
  background: color-mix(in srgb, var(--alignment-accent) 18%, var(--alignment-paper-strong));
}

.eurofed-alignment-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.eurofed-alignment-button svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  stroke: currentColor;
}

.eurofed-alignment-frame {
  position: relative;
  overflow-x: visible;
  padding: clamp(0.65rem, 2vw, 1rem);
  background: color-mix(in srgb, var(--alignment-accent) 4%, var(--alignment-paper));
}

.eurofed-alignment-frame svg {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.eurofed-alignment-note {
  width: min(48rem, calc(100% - clamp(2rem, 6vw, 4rem)));
  margin: 0 auto 0.65rem;
  max-width: 48rem;
  padding: 0;
  color: var(--alignment-muted);
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.32;
  text-align: left;
}

body.section-eurofederalism .post-content .eurofed-alignment-note,
body.section-eurofederalism .page-content .eurofed-alignment-note {
  margin: 0 auto 0.65rem;
}

body.section-eurofederalism .post-content .eurofed-alignment-footer,
body.section-eurofederalism .page-content .eurofed-alignment-footer {
  margin-top: 0;
}

.eurofed-alignment-hidden {
  display: none !important;
}

.vertical-plot-frame {
  fill: color-mix(in srgb, var(--alignment-accent) 5%, var(--alignment-paper-strong));
  stroke: var(--alignment-border);
  stroke-width: 1;
}

.vertical-year-line {
  stroke: color-mix(in srgb, var(--alignment-text) 9%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.vertical-decade-line {
  stroke: color-mix(in srgb, var(--alignment-text) 18%, transparent);
}

.vertical-timeline-overlay {
  pointer-events: none;
}

.vertical-decade-marker {
  opacity: 1;
}

.vertical-decade-chip,
.vertical-milestone-chip {
  fill: color-mix(in srgb, var(--alignment-paper-strong) 86%, var(--alignment-accent));
  stroke: color-mix(in srgb, var(--alignment-accent) 44%, var(--alignment-border));
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.vertical-decade-year,
.vertical-milestone-year {
  fill: var(--alignment-accent);
  font-size: 9.4px;
  font-weight: 950;
}

.vertical-milestone-line {
  stroke: color-mix(in srgb, var(--alignment-accent) 44%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2.5 7;
  vector-effect: non-scaling-stroke;
}

.vertical-milestone-label {
  fill: var(--alignment-text);
  stroke: none;
}

.vertical-milestone-event {
  fill: var(--alignment-text);
  font-size: 7.6px;
  font-weight: 780;
}

.vertical-segment {
  stroke: color-mix(in srgb, var(--alignment-paper-strong) 78%, transparent);
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
}

.vertical-segment[data-context="true"] {
  opacity: 0.5;
}

.vertical-segment-hatch {
  opacity: 0.75;
}

.vertical-bloc-symbol,
.vertical-flag-layer,
.vertical-timeline-overlay {
  pointer-events: none;
}

.vertical-bloc-symbol {
  opacity: 0.88;
}

.vertical-bloc-symbol-image {
  filter: drop-shadow(0 1px 1px rgba(5, 10, 20, 0.24));
}

.vertical-bloc-symbol--soviet {
  mix-blend-mode: screen;
}

.vertical-bloc-symbol--eu {
  opacity: 0.9;
}

.vertical-bloc-symbol--axis {
  opacity: 0.86;
}

.vertical-bloc-symbol-underlay {
  opacity: 0.22;
  mix-blend-mode: normal;
}

.vertical-bloc-symbol-underlay .vertical-bloc-symbol-image,
.vertical-bloc-symbol-underlay .vertical-bloc-star {
  filter: none;
}

.vertical-bloc-symbol-clipped {
  opacity: 0.96;
}

.vertical-bloc-star {
  fill: #ffcc00;
  stroke: rgba(5, 13, 26, 0.42);
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 0 rgba(5, 13, 26, 0.2));
}

.vertical-flag-marker {
  pointer-events: none;
}

.vertical-flag-backplate {
  fill: var(--flag-field, rgba(6, 12, 24, 0.72));
  stroke: color-mix(in srgb, var(--alignment-paper-strong) 86%, #ffffff);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.24));
}

.vertical-flag-image {
  filter: saturate(1.04) contrast(1.02);
}

.vertical-flag-code {
  display: none;
  fill: #fffaf0;
  font-size: 6.5px;
  font-weight: 950;
  paint-order: stroke;
  stroke: rgba(6, 12, 24, 0.9);
  stroke-width: 1.5px;
}

.vertical-flag-marker[data-missing-flag="true"] .vertical-flag-image {
  display: none;
}

.vertical-flag-marker[data-missing-flag="true"] .vertical-flag-code {
  display: block;
}

.vertical-flag-pulse {
  fill: none;
  stroke: color-mix(in srgb, var(--alignment-highlight) 70%, var(--alignment-accent));
  stroke-width: 1.3;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

.vertical-flag-marker[data-pulse="true"] .vertical-flag-pulse {
  animation: verticalFlagPulse 1.15s ease-out infinite;
}

@keyframes verticalFlagPulse {
  0% {
    opacity: 0.95;
    transform: scale(0.86);
  }

  100% {
    opacity: 0;
    transform: scale(1.85);
  }
}

.vertical-lineage-connectors,
.vertical-lineage-connector {
  pointer-events: none;
}

.vertical-lineage-connector {
  fill: var(--connector-fill, none);
  stroke: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
  opacity: 0.92;
}



@media (max-width: 720px) {
  .eurofed-alignment-header,
  .eurofed-alignment-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .eurofed-alignment-actions {
    justify-content: flex-start;
  }

  .eurofed-alignment-frame svg {
    min-width: 0;
  }
}





.eurofed-alignment-title {
  margin: 0;
  color: var(--alignment-text);
  font-size: clamp(1.08rem, 2vw, 1.38rem);
  line-height: 1.05;
}

body.section-eurofederalism .post-content .eurofed-alignment-title,
body.section-eurofederalism .page-content .eurofed-alignment-title {
  color: var(--alignment-text);
}

body.section-eurofederalism .post-content .eurofed-alignment-kicker,
body.section-eurofederalism .page-content .eurofed-alignment-kicker {
  color: var(--alignment-muted);
}