/* ==========================================================================
   UNGA Voting Viewer — restyled to the pigeon-effect.com design language.
   White surface (like the homepage showcase), Space Mono throughout — the site
   uses a single typewriter face; frosted header/footer bars mirroring
   templates/base.html in light mode. Selectors and layout behavior
   (positions, z-order, display toggling) stay compatible with the viewer JS —
   only the skin changed.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --card: #ffffff;                        /* tooltip/card surface            */
  --card-glass: rgba(255, 255, 255, 0.92);/* frosted panels                  */
  --frost: rgba(231, 229, 228, 0.8);      /* header/footer (stone-200/80)    */
  --line: rgba(0, 0, 0, 0.07);            /* hairline borders                */
  --line-strong: rgba(0, 0, 0, 0.12);
  --ink-head: #0f172a;                    /* slate-900 — headings, hover     */
  --ink: #1e293b;                         /* slate-800 — body text           */
  --ink-2: #64748b;                       /* slate-500 — secondary           */
  --ink-3: #94a3b8;                       /* slate-400 — muted               */
  --accent: #0f172a;                      /* neutral ink accent — the viewer */
                                          /* chrome carries no color; all    */
                                          /* color in view is data (viridis) */
  --red: #e15761;                         /* selected-country marker         */
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  color: var(--ink);
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* Slim scrollbars for the overflow panels */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 4px; }

/* --------------------------------------------------------------------------
   Header bar — the .nav element (shown by JS once an analysis is running).
   Mirrors the site header in light mode: frosted stone, hairline bottom
   border, centered uppercase letter-spaced links, wordmark on the left.
   -------------------------------------------------------------------------- */
.nav {
  display: flex;                /* JS re-sets this inline when shown */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 58px;
  align-items: center;
  justify-content: center;
  gap: 44px;
  background: var(--frost);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  z-index: 1300;
}

.nav button {
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: all 0.3s ease;
}

/* Same affordance as the site nav (base.html): no underline — the current view
   and the hovered one go bold and a notch larger. */
.nav button:hover,
.nav button.active {
  color: var(--ink-head);
  font-weight: 700;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Exit link — the only site-ward affordance the viewer keeps: back to the
   project page. Fixed top-left, above the header bar (which is hidden until an
   analysis runs), so it is reachable from the landing page too.
   -------------------------------------------------------------------------- */
.viewer-exit {
  position: fixed;
  top: 18px;
  left: 24px;
  z-index: 1400;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* The generic `svg { position: absolute; width: 100% }` rule below (for the map /
   graph canvases) would otherwise pull this arrow out of flow and let the label
   run over it — keep it an in-flow flex item. */
.viewer-exit svg {
  position: static;
  flex: none;
  width: 13px;
  height: 13px;
}

.viewer-exit:hover { color: var(--ink-head); }

/* --------------------------------------------------------------------------
   Sections (behavioral — toggled by showSection)
   -------------------------------------------------------------------------- */
.section {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: transparent;
}

.section.active { display: block; }

svg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0; /* Ensure the SVG is the lowest layer */
}

/* --------------------------------------------------------------------------
   Landing page
   -------------------------------------------------------------------------- */
#landingPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#landingPage h1 {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 300;
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--ink-head);
  margin: 1rem 0 0;
  text-align: center;
}

.landing-slider {
  margin: 44px 0 8px;
  width: 80%;
  max-width: 720px;
  text-align: center;
}

.landing-years {
  margin-top: 36px;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--ink-2);
}

/* noUiSlider — light theme overrides */
#timePeriodSlider {
  height: 4px;
  border: none;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.08);
}
#timePeriodSlider .noUi-connect { background: var(--accent); }
#timePeriodSlider .noUi-handle {
  width: 16px;
  height: 16px;
  right: -8px;
  top: -6px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 5px rgba(15, 23, 42, 0.12);
  cursor: pointer;
}
#timePeriodSlider .noUi-handle::before,
#timePeriodSlider .noUi-handle::after { display: none; }
#timePeriodSlider .noUi-tooltip {
  background: transparent;
  border: none;
  padding: 0;
  bottom: 140%;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 11px;
  color: var(--ink-2);
}

/* Subject chips — styled like the site's method tags */
#subjectButtons { margin: 26px 0 8px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.subject-btn {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  padding: 10px 18px;
  border-radius: 9999px;
  cursor: pointer;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.subject-btn:hover { color: var(--ink-head); border-color: rgba(0, 0, 0, 0.28); }

.subject-btn.active {
  color: var(--ink-head);
  border-color: var(--accent);
  background: rgba(15, 23, 42, 0.06);
}

/* Run button — accent pill like the site CTAs */
#runBtn {
  margin-top: 22px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  padding: 14px 36px;
  border-radius: 9999px;
  cursor: pointer;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: transform 0.3s ease, background 0.3s ease;
}

#runBtn:hover { transform: translateY(-2px); background: #334155; }

/* Loading overlay */
#loadingSpinner {
  display: none; /* JS flips to flex */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loadingSpinner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("buttonSVGs/UN.c164894a31f7.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%;
  opacity: 0.05;
  pointer-events: none;
}

#loadingSpinner p {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 22px;
}

.spinner {
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 3px solid var(--accent);
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* "New Analysis" (reload into the landing page) is a third nav item and inherits the
   `.nav button` skin. landingPage.js flips its display to `block` when the nav is
   revealed — an ID rule here would out-specify the nav's hover/active colors, so it
   deliberately carries no styling of its own. */

/* --------------------------------------------------------------------------
   Tooltips — white cards, black text (hover layer)
   -------------------------------------------------------------------------- */
.tooltipWorldMap {
  position: absolute;
  z-index: 2000;
  padding: 12px 14px;
  background-color: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  pointer-events: none;
  visibility: visible;
  color: var(--ink-head);
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 300;
  font-size: 13px;
}

.tooltipNetworkGraph {
  position: absolute;
  pointer-events: none;
  visibility: hidden; /* Start hidden, revealed on hover */
  z-index: 2000;
  padding: 10px 12px;
  background-color: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  color: var(--ink-head);
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 300;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   World map — legend, selected-country info, side tables
   -------------------------------------------------------------------------- */
.legend {
  width: 100px;
  height: 420px;
  position: absolute;
  top: 200px;
  left: auto;     /* defeat the generic `svg { left: 0 }` rule … */
  right: 28px;    /* … so the legend really sits on the RIGHT    */
  z-index: 1000;
  background-color: transparent;
  pointer-events: none;
}

.legend rect {
  width: 35px;
  height: 300px;
  rx: 8px;
  ry: 8px;
  fill: url(#gradient);
  stroke: rgba(0, 0, 0, 0.15);
  stroke-width: 1px;
}

.legend .axis text {
  fill: #475569;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 10px;
}

.legend .axis line { stroke: rgba(0, 0, 0, 0.3); }

.legend .domain { display: none; }

.selected-country-info {
  position: absolute;
  top: 74px;
  left: 24px;
  background: transparent;
  padding: 5px;
  display: flex;
  align-items: center;
  z-index: 1100;
}

.selected-country-info .info-value {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 300;
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  color: var(--ink-head);
}

.country-flag {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  object-fit: cover;
  margin-right: 16px;
  margin-left: 8px;
}

.flag-name-container {
  display: flex;
  align-items: center;
}

/* Shared card look for the two floating tables */
.ally-enemy-table,
.formal-alliance-table {
  position: absolute;
  top: 230px;   /* in the same left rail as the buttons that open them */
  left: 24px;
  background: var(--card-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 14px 16px;
  width: auto;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  z-index: 1200;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 11px;
  color: #334155;
  display: none;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.ally-enemy-table h2,
.formal-alliance-table h2 {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 2px 0 12px;
}

.ally-enemy-table table,
.formal-alliance-table table {
  width: 100%;
  border-collapse: collapse;
}

.ally-enemy-table th, .ally-enemy-table td,
.formal-alliance-table th, .formal-alliance-table td {
  padding: 4px;
  text-align: left;
  white-space: nowrap;
}

.ally-enemy-table th,
.formal-alliance-table th {
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 8px;
}

.ally-enemy-table .ellipsis-row { text-align: center; }

.ally-enemy-table.collapsed { display: none; }

.ally-enemy-table .coincidence-number,
.formal-alliance-table .internal-coincidence { text-align: right; color: var(--ink-head); }

/* "-" collapse buttons inside the tables */
.ally-enemy-table .toggle-table-button,
.formal-alliance-table .toggle-table-button {
  margin-top: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.ally-enemy-table .toggle-table-button:hover,
.formal-alliance-table .toggle-table-button:hover { color: var(--ink-head); border-color: rgba(0, 0, 0, 0.3); }

.table-wrapper { position: relative; overflow: hidden; }

/* --------------------------------------------------------------------------
   Left-rail panel openers (Allies & Adversaries / Formal Alliances).
   Card-like squircles matching the site's chips; each carries a `data-tip`
   that flies out to the right on hover so the panel announces itself before
   it is opened. `display` is left alone — worldMap.js sets it to block/none
   when a panel is toggled.
   -------------------------------------------------------------------------- */
.map-tool-btn {
  position: absolute;
  left: 24px;
  width: 52px;
  height: 52px;
  padding: 12px;
  background: var(--frost);   /* same stone as the header bar */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  z-index: 1100;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Clear of the selected-country flag/name block (top: 74px) above them */
#expandAlliesAndAdverseriesButton { top: 230px; }
.toggle-formal-alliance-button { top: 294px; }

.map-tool-btn:hover {
  border-color: var(--line-strong);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

/* Black line-art icons work as-is on the light surface */
.map-tool-btn .button-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.map-tool-btn:hover .button-icon { opacity: 0.9; }

/* Hover label: dark chip to the right of the button */
.map-tool-btn::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  width: max-content;
  max-width: 260px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--ink-head);
  color: #ffffff;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 300;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.map-tool-btn:hover::after,
.map-tool-btn:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.alliance-button {
  background: none;
  border: none;
  color: #334155;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease;
}

.alliance-button:hover { color: var(--accent); }

.country:hover { fill: #d97706; }

/* --------------------------------------------------------------------------
   Network graph view — parameter panel
   -------------------------------------------------------------------------- */
.parameterControls {
  position: absolute;
  bottom: 24px;   /* the viewer footer is gone — sit near the bottom edge */
  left: 24px;
}

.parameterBox {
  background: var(--card-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

#edgeWeightSlider {
  width: 180px;
  accent-color: var(--accent);
}

#edgeWeightValue {
  margin-left: 2px;
  font-size: 11px;
  color: var(--ink-head);
}