:root {
  --ink: #18362d;
  --ink-soft: #4a6b58;
  --accent: #0c5237;
  --accent-mid: #1a6b4a;
  --accent-soft: #eef6ef;
  --accent-strong: #2f7d4f;
  --surface: #eef2ec;
  --surface-raised: #f7faf6;
  --line: #d9ddd3;
  --blue: #1f78b4;
  --amber: #8a6512;
  --rust: #9a3412;
  --shadow: 0 1px 2px rgba(24, 54, 45, .10), 0 6px 18px rgba(24, 54, 45, .10);
  --sans: -apple-system, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

html, body { margin: 0; background: var(--surface); color: var(--ink); font: 13px/1.45 var(--sans); }
#graph-wrap {
  position: relative; height: 100vh; overflow: hidden; background: var(--surface);
  cursor: grab; touch-action: none;
  /* Panning is a direct manipulation, so a text selection started by the drag
     must not leave a blue smear across the diagram. */
  user-select: none; -webkit-user-select: none;
}
#graph-wrap.dragging, body.panning #graph-wrap { cursor: grabbing; }
#graph { display: block; }
.panel { position: absolute; z-index: 10; background: var(--surface-raised);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
#head { top: 14px; left: 14px; max-width: 330px; padding: 13px 15px 12px; }
#head h1 { margin: 0; font: 600 19px/1.2 var(--serif); letter-spacing: -.01em; }
#head .sub { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-soft); }
#right-col { position: absolute; top: 14px; right: 14px; width: 350px; z-index: 10;
  display: flex; flex-direction: column; gap: 12px;
  /* Bound the column so a tall detail panel scrolls inside itself instead of
     running off the bottom of the viewport. */
  max-height: calc(100vh - 28px); }
#right-col .panel { position: static; width: auto; }
#honesty { padding: 12px 14px; }
#honesty h2, #detail h2, #legend h2 { margin: 0 0 8px; font: 700 10px/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-mid); }
#honesty p { margin: 0 0 7px; font-size: 11.5px; color: var(--ink-soft); }
#honesty p:last-child { margin-bottom: 0; }
#filters { padding: 12px 14px; }
#filters .seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button { padding: 5px 9px; font: 600 11px/1 var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--track-hue, var(--line));
  border-radius: 4px; cursor: pointer; }
.seg button:hover { background: var(--accent-soft); }
.seg button[aria-pressed="true"] { background: var(--accent-soft);
  border-color: var(--track-hue, var(--accent-strong));
  color: var(--accent); box-shadow: inset 0 0 0 1px var(--track-hue, var(--accent-strong)); }
#detail { padding: 12px 14px; flex: 1 1 auto; min-height: 0; overflow: auto; }
#detail:empty { display: none; }
#detail .formline { font: 600 12px var(--sans); margin: 0 0 2px; }
#detail .agency { font: 700 9px var(--sans); letter-spacing: .09em; text-transform: uppercase; margin: 0 0 8px; }
#detail .gate { font-size: 11.5px; color: var(--ink-soft); margin: 0 0 10px; }
#detail table { width: 100%; border-collapse: collapse; font-size: 11px; }
#detail th { text-align: left; font: 700 9px var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); padding: 3px 4px; border-bottom: 1px solid var(--line); }
#detail td { padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
#detail td.cat { font-weight: 600; }
#detail td.na { color: #9aa79f; }
#detail tr.dormant td:not(.cat) { color: #9aa79f; }
#detail .bnote { margin: 7px 0 0; font-size: 10.5px; color: var(--ink-soft); }
#legend { left: 14px; bottom: 14px; padding: 10px 12px; }
#legend .row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; }
#legend .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
footer { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 10;
  max-width: 560px; font-size: 10.5px; line-height: 1.4; color: var(--ink-soft); text-align: center;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: 6px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow); padding: 10px 14px; }

@media (max-width: 1100px) {
  footer { bottom: 80px; }
}

/* --- graph primitives --- */
.node rect.box { fill: var(--surface-raised); stroke: var(--line); stroke-width: 1; rx: 6; }
.node.gated rect.box { stroke-dasharray: 4 3; stroke: var(--accent-strong); }
.node text.label { font: 15px var(--serif); fill: var(--ink); }
.node text.chip { font: 700 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.node.sel rect.box { stroke: var(--accent-strong); stroke-width: 2; }
.node { cursor: pointer; }
.node:focus { outline: none; }
.node:focus rect.box { stroke: var(--accent-strong); stroke-width: 2.5; }
.node.dim { opacity: .28; }
path.edge { stroke: var(--line); stroke-width: 1.5; fill: none; }
path.edge.conditional { stroke-dasharray: 3 3; }
path.edge.dim { opacity: .2; }
.arrowhead { fill: var(--line); }
text.edge-label { font: 600 10px var(--sans); fill: var(--ink-soft); text-transform: none;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
text.edge-label.dim { opacity: .2; }
text.measure-label { font: 15px var(--serif); visibility: hidden; }
text.measure-chip { font: 700 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; visibility: hidden; }
#err { display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 100; padding: 12px 16px;
  background: #9a3412; color: #fff; font-weight: 600; }
#err.show { display: block; }

/* ---------- per-country grid on the two visa-bulletin nodes ---------- */

#detail .chead {
  margin: 14px 0 6px;
  font: 700 10px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-mid);
}
#detail .chead .casof {
  float: right;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink-soft);
}

#detail table.ctable { width: 100%; margin-top: 2px; font-size: 9px; table-layout: fixed; }
#detail table.ctable th { padding: 3px 2px; font-size: 8px; vertical-align: bottom; overflow-wrap: anywhere; }
#detail table.ctable td { padding: 4px 2px; line-height: 1.3; overflow-wrap: anywhere; }
/* The first column names the category and must stay readable; the rest hold a
   short verdict that is allowed to wrap onto two lines. */
#detail table.ctable td:first-child,
#detail table.ctable th:first-child { width: 21%; }