/* Nuclear Arsenals: tool styles on top of shared/css/tsm.css tokens. */
/* Two series colours of its own, so North Korea does not share France's magenta and South Africa does not share Pakistan's brown. */
:root { --na-prk: #b0261e; --na-zaf: #7f8a93; }
@media (prefers-color-scheme: dark) { :root { --na-prk: #f25e52; --na-zaf: #a3adb5; } }
.na-chartcard { padding: 12px 14px 10px; }
.na-charthead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.na-charthead h2 { margin: 0; font-size: 20px; }
.na-charthead .fine { max-width: 60ch; }
.na-chart { position: relative; margin-top: 6px; }
.na-chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.na-chart .grid line { stroke: var(--rule); stroke-width: 1; }
.na-chart .area { stroke: var(--panel); stroke-width: 1; }
.na-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.na-chart .world { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.na-chart .cursor { stroke: var(--ink); stroke-width: 1; }
.na-chart .cursor-lab { font: 600 12px var(--mono); fill: var(--ink); }
.na-chart .ms-line { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 3; }
.na-chart .ms { cursor: pointer; outline: none; }
.na-chart .ms rect { fill: var(--panel); stroke: var(--brand-ink); stroke-width: 1.5; }
.na-chart .ms text { font: 600 10.5px var(--mono); fill: var(--brand-ink); }
.na-chart .ms.on rect { fill: var(--brand-ink); }
.na-chart .ms.on text { fill: var(--panel); }
.na-chart .ms:focus-visible rect { stroke: var(--focus); stroke-width: 3; }
.na-chart .dlab { font: 500 11px var(--body); fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.na-scrub { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; margin-top: 6px; }
.na-scrub input[type=range] { width: 100%; accent-color: var(--brand-ink); }
.na-scrub .btn { min-width: 64px; }
.na-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.na-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.na-mskey { margin: 4px 0 0; }
.sw-dash { width: 18px; height: 0; border-top: 2px dashed var(--ink); display: inline-block; }

/* Panel */
.na-year { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; margin: 0; }
.na-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.na-kpi { border: 1px solid var(--rule); border-radius: 4px; padding: 8px 10px; }
.na-kpi b { display: block; font: 600 20px var(--mono); font-variant-numeric: tabular-nums; }
.na-kpi span { font-size: 11.5px; color: var(--muted); }
.na-clist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.na-clist li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 3px 4px; border-radius: 3px; }
.na-clist li:hover { background: var(--chip); }
.na-clist input { margin: 0; width: 16px; height: 16px; accent-color: var(--brand-ink); }
.na-clist label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; min-width: 0; }
.na-clist .v { font: 12px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.na-clist .bar { grid-column: 2 / 4; height: 3px; background: var(--chip); border-radius: 2px; overflow: hidden; margin-top: -2px; }
.na-clist .bar i { display: block; height: 100%; }
.na-clist li.off label { color: var(--faint); }
.na-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.na-quick .btn { font-size: 12px; padding: 4px 9px; }
.na-ms-card { border-left: 3px solid var(--brand-ink); padding: 2px 0 2px 10px; }
.na-ms-card h3 { margin: 0 0 2px; font-size: 16px; }
.na-ms-card p { margin: 0 0 4px; font-size: 13px; }
.na-ms-card .d { font: 11.5px var(--mono); color: var(--muted); }

/* Then vs now and country page */
.na-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.na-card { border: 1px solid var(--rule); border-radius: 4px; padding: 10px 12px; background: var(--panel); }
.na-card h3 { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.na-card .row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.na-card .row b { font: 600 14px var(--mono); font-variant-numeric: tabular-nums; }
.na-card .chg { font: 12px var(--mono); margin-top: 4px; color: var(--muted); }
.na-sub { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.na-sub h2 { margin: 0; font-size: 20px; }
.na-sub select { font: inherit; padding: 5px 8px; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); color: var(--ink); }
.na-country { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin-top: 10px; }
@media (max-width: 760px) { .na-country { grid-template-columns: minmax(0, 1fr); } }
.na-country h3 { margin: 0 0 4px; font-size: 22px; }
.na-spark svg { display: block; width: 100%; height: auto; }
.na-spark .sp-area { opacity: .25; }
.na-spark .sp-line { fill: none; stroke-width: 2; }
.na-spark text { font: 10.5px var(--mono); fill: var(--muted); }
.na-statbar { display: flex; height: 22px; border-radius: 3px; overflow: hidden; gap: 2px; background: var(--panel); }
.na-statbar i { display: block; height: 100%; min-width: 2px; }
.na-statleg { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 8px; font-size: 12.5px; margin-top: 8px; align-items: center; }
.na-statleg .n { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.st-ds { background: var(--brand-ink); }
.st-dn { background: var(--accent); }
.st-rs { background: var(--c7); }
.st-rt { background: repeating-linear-gradient(135deg, var(--faint) 0 3px, transparent 3px 6px); border: 1px solid var(--faint); }
.na-country .facts { margin: 8px 0 0; }
.na-cpick { margin-top: 10px; }
.na-cpick button { display: flex; align-items: center; gap: 6px; }

/* Walkthrough */
.na-tour { position: fixed; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 4px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); z-index: 30; }
.na-tour[hidden] { display: none; }
.na-tour .th { display: flex; justify-content: space-between; align-items: center; font: 600 11.5px var(--mono); color: var(--muted); }
.na-tour .x { border: 0; background: transparent; font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; }
.na-tour h3 { margin: 6px 0 4px; font-size: 18px; }
.na-tour p { margin: 0 0 10px; font-size: 13.5px; }
.na-tour .tn { display: flex; justify-content: space-between; gap: 8px; }
.na-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.below h3 { font-family: var(--display); font-size: 17px; margin: 14px 0 4px; }
.below .src li { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .na-year { font-size: 36px; }
  .na-tour { right: 8px; left: 8px; bottom: 8px; width: auto; }
}
.na-more { max-width: 1400px; margin: 16px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1020px) { .na-more { grid-template-columns: minmax(0, 1fr); } }
.na-more .na-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* Desktop: the side panel is never taller than the main column (or the window) and scrolls inside itself, so it no
   longer runs below the chart and leaves an empty band beside it; it stays in view while a long main column scrolls.
   Same rule in nuclear-arsenals, nuclear-tests, declaratory-policy and proliferation-paths. */
@media (min-width: 1021px) {
  .layout > .panel { position: sticky; top: 12px; height: 0; min-height: min(100%, calc(100vh - 24px)); overflow-y: auto; overscroll-behavior: contain; }
}