/* Conflict zones article: route map widget and the "who decides" figure.
 * Shares tokens with home.css / article.css. */
.widget.cz { grid-template-columns: 1fr; }
.cz-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-buttons button { font: 600 15px var(--body); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.cz-buttons button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cz-buttons button:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.cz-map { display: block; width: 100%; height: auto; border-radius: 12px; }
.cz-sea { fill: color-mix(in srgb, var(--blue) 9%, var(--card)); }
.cz-grat { fill: none; stroke: color-mix(in srgb, var(--blue) 22%, var(--card)); stroke-width: 0.6; }
.cz-land { fill: color-mix(in srgb, var(--ink) 12%, var(--paper-2)); stroke: color-mix(in srgb, var(--ink) 30%, var(--paper-2)); stroke-width: 0.5; }
.cz-z.ru { fill: color-mix(in srgb, var(--magenta) 26%, transparent); stroke: var(--magenta); stroke-width: 0.8; }
.cz-z.ua { fill: color-mix(in srgb, var(--magenta) 45%, transparent); stroke: var(--magenta); stroke-width: 0.8; }
.cz-z.me { fill: color-mix(in srgb, #c77d0a 40%, transparent); stroke: #c77d0a; stroke-width: 0.8; }
.cz-r { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0.7; }
.cz-r.on { stroke: var(--ink); stroke-width: 3; stroke-dasharray: none; opacity: 1; }
.cz-r[data-r="direct"].on { stroke-dasharray: 8 6; }
.cz-city { fill: var(--magenta); stroke: var(--paper); stroke-width: 2; }
.cz-lbl { font: 600 14px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.cz-plane path { fill: var(--magenta); stroke: var(--paper); stroke-width: 1; }
.prose .cz-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 600 13px/1.4 var(--mono); }
.prose .cz-legend li { margin: 0; font-size: 13px; }
.cz-legend li::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 8px; vertical-align: -2px; }
.cz-legend .ru::before { background: color-mix(in srgb, var(--magenta) 26%, transparent); border: 1px solid var(--magenta); }
.cz-legend .ua::before { background: color-mix(in srgb, var(--magenta) 45%, transparent); border: 1px solid var(--magenta); }
.cz-legend .me::before { background: color-mix(in srgb, #c77d0a 40%, transparent); border: 1px solid #c77d0a; }
.cz-out { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cz-foot { font-size: 13px; }
/* "Who decides" chain */
.cz-box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.cz-box.hl { stroke: var(--magenta); stroke-width: 2.4; }
.cz-arrow { stroke: var(--ink-soft); stroke-width: 2; fill: none; }
.cz-ah { fill: var(--ink-soft); }
@media (max-width: 600px) {
  .w-out.cz-out { grid-template-columns: 1fr; }
  .w-out.cz-out div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .w-out.cz-out dd { font-size: 17px; white-space: nowrap; }
  .cz-buttons button { font-size: 14px; padding: 8px 12px; }
}
.prose .fig.cz-fig svg, .cz-fig svg { max-width: 420px; margin: 0 auto; }