/* Global nuclear stockpiles ([ploughshares_stockpiles]). Moved verbatim from the
   page's Beaver Builder HTML module; everything is scoped under .psf-nuke. */
/* ---------- tokens (scoped) ---------- */
.psf-nuke{
  /* Ploughshares global colors (Beaver Builder > Global Styles):
       Sky #18A8E2 · Twilight #2A3691 · Dusk #E56161 · Dawn #FB8E44 · Sunbeam #F4DF45
     Sky, Dawn, Aurora and Sunbeam are below the 3:1 contrast floor on white, so
     they are used here as fills, tints and decoration only — except on the stat
     band, which copies the grantee cards deliberately. Dawn and Dusk carry
     meaning at stepped values (same hue, darker); the raw values are in comments. */
  --psf-blue:#2b7bb9;        /* their nav/link blue — the bar color */
  --psf-blue-dark:#2A3691;   /* Twilight — big numbers, hover, links */
  --psf-blue-soft:#e8f6fc;   /* Sky at 10% — spare tint */
  --psf-row-on:#E9F3E8;      /* the highlighted row in a bar chart */
  /* Deployed and reserve are two parts of one quantity, so they read as two
     steps of one hue rather than two different colours. The light step clears
     3:1 on white (3.43) and 3:1 against the dark step (3.01), which is what
     keeps the two halves of a bar apart. Using Sky here also made it mean two
     things, since the stat band above now carries it. */
  --psf-deployed:#2A3691;    /* Twilight */
  --psf-reserve:#7A84D8;     /* Twilight, lightened */
  --psf-dawn:#e3782a;        /* Dawn #FB8E44 stepped to 3.0:1 — dots and fills */
  --psf-dawn-ink:#c05800;    /* Dawn stepped to 4.5:1 — small text */
  --psf-dusk:#a82730;        /* Dusk #E56161 deepened to 7.0:1 */
  --psf-sunbeam:#F4DF45;
  /* The three stat tiles follow the grantee cards at /grants/grantees/ — same
     hues, same white type, same mark in the corner — but each one is stepped
     down in lightness until white text clears 4.5:1, the way Dawn and Dusk are
     stepped elsewhere in here. Hue and chroma are held in OKLab, so these read
     as the brand colours darkened rather than as different colours.
         Lavender #C2A1EA  2.19:1  ->  #8868AC  4.55:1
         Sky      #18A8E2  2.71:1  ->  #007DB5  4.55:1
         Aurora   #71C389  2.13:1  ->  #32854F  4.55:1

     Green leads rather than closes: the last tile carries the most alarming
     number on the page — two countries holding 83% of the world's warheads —
     and green reads as reassurance. It sits on the plain count instead, and the
     83% takes the blue, which carries no charge either way. */
  --psf-tile-1:#32854F;      /* Aurora, stepped   — 9 countries */
  --psf-tile-2:#8868AC;      /* Lavender, stepped — 9,745 warheads */
  --psf-tile-3:#007DB5;      /* Sky, stepped      — 83% */
  --psf-neutral:#b9b6ae;

  --psf-surface:#ffffff;
  --psf-plane:#f8f5ef;
  --psf-ink:#1a1a1a;
  --psf-ink-2:#4e4c48;
  --psf-muted:#7d7a73;
  --psf-line:#e3e0d8;
  --psf-rule:#c9c5bb;

  --psf-r:10px;
  --psf-gap:20px;

  color:var(--psf-ink);
  /* Declared, not inherited: the module renders in Poppins wherever it is
     dropped, instead of relying on whatever the surrounding page sets.
     The live site already loads Poppins, so this adds no font request. */
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
  /* the tooltip is position:absolute and its coordinates are measured from
     this element — without this it resolves against whatever ancestor the
     host page happens to have positioned, and lands in the wrong place */
  position:relative;
}
.psf-nuke *,.psf-nuke *::before,.psf-nuke *::after{box-sizing:inherit;}
/* :where() keeps these resets at zero added specificity, so a later
   single-class rule (.psf-sub, .psf-h, .psf-mini-h) actually wins. Written
   as plain element selectors they score 0,1,1 and silently beat every one
   of those classes — margins set there were being dropped. */
.psf-nuke :where(p){margin:0 0 .75em;}
.psf-nuke :where(h2,h3,h4){font-family:inherit;color:var(--psf-ink);margin:0;line-height:1.25;}
.psf-nuke button{font-family:inherit;}

/* ---------- host-theme guard ----------
   The Beaver Builder theme styles every <button> inside .fl-builder-content —
   and, via a trailing "*", every descendant of one — at specificity (0,3,1):
   white text, uppercase, 14px/600, centred, a 2px border and a 50px radius.
   Nothing this module can write with single classes outranks that, so the
   declarations below that the theme would otherwise win are marked important.
   Scoped entirely inside .psf-nuke; no element outside the module is touched.
   If the module ever stops rendering buttons, this can all come back out. */
.psf-nuke button,
.psf-nuke button *{
  text-transform:none !important;   /* nothing inside a button is uppercase */
  text-align:left !important;       /* the theme centres them */
}
/* Marking the module's own declarations important only covers properties it
   actually declares. These elements took their colour by inheritance, and
   these buttons never set a radius — the theme fills precisely those gaps, so
   they have to be stated outright. Listed together rather than scattered, so
   there is one place to look when the theme changes. */
.psf-nuke .psf-bar,
.psf-nuke .psf-tab,
.psf-nuke .psf-cmp-row,
.psf-nuke .psf-rail-dot,
.psf-nuke .psf-tl-pt,
.psf-nuke .psf-tl-row,
.psf-nuke .psf-bar-cty,
.psf-nuke .psf-cmp-cty{color:inherit !important;}

.psf-nuke .psf-tab,
.psf-nuke .psf-tl-pt{border-radius:0 !important;}

/* ---------- layout ---------- */
.psf-sec{margin:0 0 34px;}
.psf-sec:last-child{margin-bottom:0;}
.psf-h{font-size:1.06rem;font-weight:700;letter-spacing:.01em;margin:0 0 4px;}
.psf-sub{font-size:.92rem;color:var(--psf-muted);margin:0 0 16px;max-width:64ch;}

.psf-card{
  background:var(--psf-surface);
  border:1px solid var(--psf-line);
  border-radius:var(--psf-r);
  padding:22px;
}

/* ---------- lede ---------- */
/* Type enlarged 2026-11 at the client's request (was 1.14rem and .8rem); the
   lede stays the larger, heavier line, so the hierarchy holds. The block was
   capped at 64ch (about 640px); it now runs the full content width so the
   source line sits on one line on desktop (about 950px of text). The lede is
   capped at 960px, which sets its ~1,650px of text in two lines from 1024px
   up while stopping short of the edge, and balance evens the two lines so no
   word is left alone on the last one. */
.psf-lede{margin:0 0 26px;}
.psf-lede-h{
  font-size:1.5rem;font-weight:600;line-height:1.4;text-wrap:balance;
  max-width:960px;
  color:var(--psf-ink);margin:0 0 12px;
}
.psf-lede-src{font-size:1rem;line-height:1.5;color:var(--psf-muted);margin:0;}
.psf-lede-src a{color:var(--psf-blue-dark);text-decoration:underline;}

/* ---------- stat band ----------
   Modelled on the full-bleed colour bands the site already uses for its CTA
   and footer sections: one field, white type, the beacon set into a corner.
   A darkened Aurora with white type. #429E5E was the value asked for; it
   carries white at only 3.34:1, enough for the 54px figure but short of AA
   for the label, so this sits 7.4 dE darker on the same hue at 4.51:1.
   Revert by swapping the one token below.
   The label is pure white rather than a softer tint because anything below
   white drops under 4.5 on this field. Darkening also settled the one
   reservation about Aurora: raw #71C389 sat dE 11.5 from the grey used for
   "all seven other countries" and collapsed to 4.8 under deuteranopia; this
   value is 19.4 and 23.0. */
/* three separate square cards, the way the grantee cards at
   /grants/grantees/ are built — not one continuous band */
.psf-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--psf-gap);
  margin:0 0 30px;
}
.psf-stat{
  position:relative;
  overflow:hidden;           /* each card clips its own mark */
  border-radius:0 !important;   /* square corners; stated outright so a host
                                   theme's own card radius cannot creep in */
  display:flow-root;
  padding:30px 28px;
}
/* 3:2 as a FLOOR, not a fixed height. A real aspect-ratio locks the box, so a
   card whose label runs to three lines clips its last line instead of growing —
   which is what happened to "…held by the US and Russia" at some widths. This
   zero-width float reserves the height instead, and anything taller pushes the
   card down with it. The grantee cards are square; 3:2 keeps this band from
   standing taller than the chart underneath it. */
.psf-stat::before{content:"";display:block;float:left;width:0;padding-top:59%;}
.psf-stat::after{content:"";display:block;clear:both;}
/* each tile carries its own field, so no dividing rule is needed between them */
.psf-stat:nth-child(1){background:var(--psf-tile-1);}
.psf-stat:nth-child(2){background:var(--psf-tile-2);}
.psf-stat:nth-child(3){background:var(--psf-tile-3);}
.psf-stat-v{
  font-size:3.4rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
  color:#ffffff;
  display:block;
  position:relative;z-index:1;   /* above the mark behind it */
}
.psf-stat-l{
  /* 1.5rem is the size asked for, and it is what desktop gets. Held flat it
     turned the cards portrait on narrower screens — at 780px the labels ran to
     five lines and the cards stood taller than they were wide — so it eases
     down below roughly 1140px rather than stepping at a breakpoint. */
  font-size:clamp(1.05rem, 2.1vw, 1.5rem);
  /* "inventories/arsenals" is longer than a narrow card at this size: without
     this it ran past the edge and the card clipped it. break-word only splits a
     word that genuinely will not fit, so where it does fit — phones, mainly —
     the line breaks stay where they were. */
  overflow-wrap:break-word;
  font-weight:400;      /* weight, not colour, separates it from the figure */
  color:#ffffff;
  opacity:.92;
  margin-top:13px;
  display:block;
  position:relative;z-index:1;
  line-height:1.4;
  max-width:24ch;
}
/* Box 2's optional note: smaller than the label, full white for contrast at
   this size, above the beacon like the figure and label. */
.psf-stat-n{
  display:block;position:relative;z-index:1;
  margin-top:12px;max-width:30ch;
  font-size:.95rem;line-height:1.45;font-weight:400;color:#ffffff;
}
/* The note fills the space the beacon's rays normally clear, so on that card
   the mark is smaller and pushed into the corner, off the text. */
.psf-stat-n ~ .psf-beacon{height:56%;right:-14%;bottom:-22%;}
/* their beacon mark, set into the corner of the band */
/* One mark per card, placed the way the grantee cards place theirs: their
   ::before draws this same SVG at the card's full size, offset 100px right and
   150px down inside a 373px card, at 40% — so most of it is clipped and only
   the upper-left of the burst shows through the bottom-right corner. Those
   offsets as percentages are 26.8% and 40.2%. */
.psf-beacon{
  position:absolute;
  /* sized off the card's height and hung past the bottom-right corner, so the
     burst's centre stays near that corner and its rays clear the text above */
  right:-10%;bottom:-34%;
  height:92%;width:auto;
  fill:#ffffff;
  opacity:.4;
  pointer-events:none;
  z-index:0;
}
/* ---------- color legend above the tabs ---------- */
/* boxed and shrink-to-fit, so it reads as a key rather than another
   row of tabs — the tab dots sit well clear of it */
.psf-legend{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 22px;
  width:fit-content;max-width:100%;
  margin:0 0 26px;
  padding:13px 18px;
  background:#f1fafd;               /* Sky at 6% */
  border:1px solid #d1eef9;         /* Sky at 20% */
  border-radius:var(--psf-r);
}
.psf-legend-l{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--psf-muted);font-weight:700;
  width:100%;           /* the caption always sits on its own line */
  margin-bottom:-2px;
}
.psf-legend-i{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.9rem;color:var(--psf-ink-2);font-weight:500;
}
.psf-legend-d{
  width:11px;height:11px;border-radius:50%;flex:0 0 auto;
}
.psf-legend-i span{color:var(--psf-muted);font-weight:400;}
.psf-legend-note{
  width:100%;margin:0;padding-top:11px;
  border-top:1px solid #d1eef9;
  font-size:.86rem;line-height:1.55;color:var(--psf-ink-2);
}

/* ---------- tab strip ---------- */
.psf-tabwrap{position:relative;margin:0 0 26px;}
.psf-tabwrap::after{
  content:"";position:absolute;right:0;top:0;bottom:9px;width:40px;
  background:linear-gradient(to right,rgba(255,255,255,0),var(--psf-surface));
  pointer-events:none;opacity:0;transition:opacity .15s;
}
.psf-tabwrap.psf-scrollable::after{opacity:1;}
.psf-tabs{
  display:flex;gap:2px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--psf-line);
  padding-bottom:0;
}
.psf-tabs::-webkit-scrollbar{height:4px;}
.psf-tabs::-webkit-scrollbar-thumb{background:var(--psf-line);border-radius:4px;}
.psf-tab{
  appearance:none;background:transparent !important;border:0 !important;
  border-bottom:3px solid transparent !important;
  padding:11px 16px 10px;
  cursor:pointer;white-space:nowrap;flex:0 0 auto;
  text-align:left !important;
  transition:border-color .14s,background .14s;
  scroll-snap-align:start;
}
.psf-tab:hover{background:var(--psf-plane) !important;}
.psf-tab:focus-visible{outline:2px solid var(--psf-blue);outline-offset:-2px;}
.psf-tab-n{
  display:block;font-size:.88rem !important;font-weight:600 !important;color:var(--psf-ink-2) !important;
  line-height:1.25;
}
.psf-tab-v{
  display:block;font-size:.76rem !important;color:var(--psf-muted) !important;
  font-variant-numeric:tabular-nums;margin-top:2px;
}
.psf-tab[aria-selected="true"]{border-bottom-color:var(--psf-acc,var(--psf-blue)) !important;}
.psf-tab[aria-selected="true"] .psf-tab-n{color:var(--psf-ink) !important;font-weight:700 !important;}
/* Twilight is also the legend's "NPT nuclear-weapon state" colour, so a fixed
   blue figure here told North Korea's tab the opposite of what its dot said.
   The ink variants are the contrast-safe tones of the same three hues. */
.psf-tab[aria-selected="true"] .psf-tab-v{color:var(--psf-acc-ink,var(--psf-blue-dark)) !important;font-weight:600 !important;}
.psf-tab-dot{
  display:inline-block;width:7px;height:7px;border-radius:50% !important;
  margin-right:6px;vertical-align:1px;
}

/* hint that the tab strip scrolls. Gated on the .psf-scrollable class rather
   than a width breakpoint, so it appears whenever the tabs actually overflow
   and stays away when they all fit — including a large phone in landscape.
   aria-hidden: "swipe" is wrong for keyboard and screen-reader users, who
   get the tablist's own arrow-key navigation instead. */
/* scoped with .psf-nuke so it outranks the .psf-nuke p reset (0,1,1);
   a bare .psf-tabhint (0,1,0) loses to it and the margins never apply */
.psf-nuke .psf-tabhint{
  display:none;
  margin:-14px 0 30px;   /* ~12px below the strip it describes, 30px above the panel */
  font-size:.68rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--psf-ink-2);
}
.psf-nuke .psf-tabwrap.psf-scrollable + .psf-tabhint{display:block;}
/* Drawn, not typed. The rightwards-arrow character is absent from Poppins, so
   every platform substituted its own fallback font for that one glyph —
   different size, different baseline; Android was furthest off. An inline SVG
   renders identically everywhere and scales with the text through em units. */
.psf-arrow{
  width:.95em;height:.95em;
  display:inline-block;
  vertical-align:-.14em;
  margin-left:7px;
  animation:psf-nudge 1.9s ease-in-out infinite;
}
@keyframes psf-nudge{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(4px);}
}
@media (prefers-reduced-motion:reduce){
  .psf-arrow{animation:none;}
}

/* ---------- panel ---------- */
.psf-panel{
  background:var(--psf-surface);
  border:1px solid var(--psf-line);
  border-top:3px solid var(--psf-blue);
  border-radius:0 0 var(--psf-r) var(--psf-r);
  padding:26px 28px 28px;
}
.psf-panel:focus{outline:none;}
.psf-panel-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px;padding-bottom:20px;border-bottom:1px solid var(--psf-line);
}
.psf-hero-l{
  display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--psf-muted);font-weight:600;margin-bottom:4px;
}
.psf-hero-v{
  display:block;font-size:2.9rem;font-weight:700;line-height:1;
  letter-spacing:-.025em;color:var(--psf-acc-ink,var(--psf-blue-dark));
}
.psf-hero-v small{font-size:1.4rem;font-weight:600;color:var(--psf-muted);letter-spacing:0;}
.psf-hero-sub{
  display:block;font-size:.84rem;color:var(--psf-ink-2);margin-top:7px;
}
.psf-panel-badges{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:4px;}
/* A bordered pill beside a heading reads as a button people can press, and
   this one does nothing. Shaped like the fact labels instead — a quiet caption
   over its value — with the legend's own dot carrying the colour. */
.psf-status{display:block;text-align:right;}
.psf-status-k{
  display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--psf-muted);font-weight:600;
}
.psf-status-v{
  display:inline-flex;align-items:center;gap:7px;margin-top:5px;
  font-size:.92rem;font-weight:600;color:var(--psf-ink);
}
.psf-status-v i{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}

/* facts */
.psf-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:18px 24px;margin:20px 0 0;
}
.psf-fact dt{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--psf-muted);font-weight:600;
  /* "Recent and upcoming changes" runs to two lines where the others take one;
     reserving both keeps every value on the same line across the row */
  min-height:2.4em;
}
.psf-fact dd{margin:4px 0 0;font-size:1.08rem;font-weight:600;color:var(--psf-ink);line-height:1.35;}
.psf-fact dd small{display:block;font-weight:400;font-size:.78rem;color:var(--psf-muted);margin-top:3px;}

/* mini section inside the panel */
.psf-mini{margin-top:26px;padding-top:22px;border-top:1px solid var(--psf-line);}
/* the lead block opens the panel, so it takes a rule underneath instead of above */
.psf-mini-lead{margin-top:0;padding-top:0;border-top:0;
  margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--psf-line);}
.psf-mini-h{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--psf-muted);font-weight:600;
  margin:0 0 20px;   /* the highlighted row below carries a filled background,
                        so the heading needs real clearance, not a hairline */
}

/* Heading levels changed 2026-11-05 (h3 -> h2, h4 -> h3) for a correct
   outline. The look they had came from the host theme's h3 and h4 rules,
   which beat the single-class rules above; these pin those measured values
   so the new tags render exactly as the old ones did. */
.psf-nuke .psf-h{
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:18px;font-weight:500;letter-spacing:.01em;line-height:1.25;
  text-transform:none;color:var(--psf-ink);
}
.psf-nuke .psf-mini-h{
  font-family:Arial,Helvetica,Verdana,sans-serif;
  font-size:18px;font-weight:700;letter-spacing:.06em;line-height:1.2;
  text-transform:uppercase;color:var(--psf-blue-dark);
}

/* compare bars */
.psf-cmp{display:flex;flex-direction:column;gap:1px;}
.psf-cmp-row{
  display:grid;grid-template-columns:178px 1fr;align-items:center;gap:12px;
  width:100%;text-align:left !important;background:transparent !important;border:0 !important;
  padding:5px 8px 5px 6px;border-radius:6px !important;cursor:pointer;transition:background .12s;
}
.psf-cmp-row:hover{background:var(--psf-plane) !important;}
.psf-cmp-row:focus-visible{outline:2px solid var(--psf-blue);outline-offset:-2px;}
.psf-cmp-row[data-on="1"]{background:var(--psf-row-on) !important;}
.psf-cmp-n{display:flex;align-items:center;gap:9px;min-width:0;
  font-size:.95rem !important;font-weight:600 !important;color:var(--psf-ink) !important;}
.psf-cmp-cty{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.psf-cmp-row[data-on="1"] .psf-cmp-n{font-weight:700 !important;}
/* the value hugs the end of its bar; the reserved right gutter keeps it
   inside the card even when the longest bar runs the full width */
.psf-cmp-t{display:flex;align-items:center;gap:10px;min-width:0;padding-right:58px;}
.psf-cmp-f{height:17px;}
/* the bars never recolour: the row background already carries hover and
   selection, and darkening the reserve step pulled it toward the
   deployed navy, muddying the one distinction the bar has to make */
.psf-cmp-v{
  font-size:.92rem !important;font-weight:600 !important;color:var(--psf-ink) !important;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.psf-cmp-row[data-on="1"] .psf-cmp-v{font-weight:700 !important;}

/* mini timeline rail */
.psf-rail{position:relative;height:68px;margin-top:10px;}
.psf-rail-line{position:absolute;left:0;right:0;top:32px;height:1px;background:var(--psf-rule);}
.psf-rail-tick{position:absolute;top:40px;transform:translateX(-50%);font-size:.7rem;color:var(--psf-muted);font-variant-numeric:tabular-nums;}
/* each dot is a button: a second way to move between countries */
.psf-rail-dot{
  /* the theme presses buttons with `button:active,button:focus{position:relative}` —
     one element more specific than this class, so a click would drop the dot out
     of the absolute layer and 8px down the page. Stated outright. */
  position:absolute !important;top:32px !important;transform:translate(-50%,-50%);
  width:9px;height:9px;padding:0;border:0 !important;border-radius:50% !important;
  background:var(--psf-dot,#c9c5bb) !important;cursor:pointer;   /* --psf-dot is set
     inline on the selected dot; a plain inline background would lose to the
     !important above, a custom property resolves inside it */
  box-shadow:0 0 0 2px var(--psf-surface);
  transition:transform .12s,background .12s;
}
.psf-rail-dot::after{            /* a 24px touch target around a 9px dot */
  content:"";position:absolute;left:50%;top:50%;
  width:24px;height:24px;transform:translate(-50%,-50%);
}
.psf-rail-dot:hover{transform:translate(-50%,-50%) scale(1.45);}
.psf-rail-dot:focus-visible{outline:2px solid var(--psf-blue);outline-offset:3px;}
.psf-rail-dot[data-on="1"]{width:15px;height:15px;cursor:default;}
.psf-rail-dot[data-on="1"]:hover{transform:translate(-50%,-50%);}
.psf-rail-lab{
  position:absolute;top:0;transform:translateX(-50%);
  font-size:.76rem;font-weight:700;line-height:1;color:var(--psf-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* narrative */
.psf-body p{font-size:1.02rem;color:var(--psf-ink-2);line-height:1.65;margin:0 0 .8em;}
.psf-body ul{margin:0;padding-left:1.1em;}
.psf-body li{font-size:.98rem;color:var(--psf-ink-2);line-height:1.55;margin-bottom:8px;}
/* The theme bullets these lists with its own sunflower SVG (`ul li{list-style-image}`).
   A list marker sits on the text baseline, so nothing in CSS can move it on its own;
   the module's list text is smaller than the rest of the site, which leaves the mark
   riding about a pixel high. Lifting the text the same pixel settles the two. */
.psf-body li > .psf-li{position:relative;top:-1px;}
.psf-body a{color:var(--psf-blue-dark);}
/* the "(opens in a new tab)" hint WordPress's link dialog adds to a grantee link */
.psf-body .sr-only,.psf-body .screen-reader-text{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* ---------- table ----------
   Always visible now, so it is styled as a real section rather than a
   disclosure. Colour here repeats encodings the charts already established —
   the deployed / reserve swatches, the treaty-status dots — rather than
   introducing new ones. */
.psf-tablewrap{overflow-x:auto;margin-top:16px;}
.psf-table{border-collapse:collapse;width:100%;min-width:820px;font-size:.86rem;}
/* The description sits above the scrolling box as .psf-tablenote, so it stays
   put when the table is swiped sideways on a phone. The <caption> stays in the
   markup for screen readers, which announce it as the table's name. */
.psf-table caption{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.psf-tablenote{max-width:82ch;text-wrap:balance;}

/* Shown only when the table really is wider than its box — the same test the
   tab strip uses, rather than a width breakpoint, so it is right in a narrow
   Beaver Builder column too. Sits above the table: by the time you reach the
   bottom of ten rows it is too late to be told you can scroll.
   aria-hidden, because "swipe" is not the instruction a screen reader user
   needs — the table is read cell by cell regardless of where it is scrolled. */
.psf-tblhint{
  display:none;
  margin:0 0 10px;
  font-size:.68rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--psf-ink-2);
}
.psf-tblhint.psf-on{display:block;}
.psf-table th,.psf-table td{
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--psf-line);
  vertical-align:middle;
}
.psf-table th:first-child,.psf-table td:first-child{padding-left:12px;}
.psf-table thead th{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--psf-ink-2);font-weight:700;white-space:nowrap;
  background:var(--psf-plane);
  border-bottom:1px solid var(--psf-rule);
}
/* "Recent and upcoming changes" is far longer than the heading it replaced;
   left on one line it pushed the whole table into a sideways scroll on desktop.
   Only this heading wraps — the rest stay on one line, as a column of numbers
   reads better with its label unbroken. */
.psf-table thead th:last-child{white-space:normal;min-width:150px;}
.psf-table thead th:first-child{border-radius:var(--psf-r) 0 0 0;}
.psf-table thead th:last-child{border-radius:0 var(--psf-r) 0 0;}
.psf-table tbody tr:nth-child(even){background:#fbfaf8;}
.psf-table tbody tr:hover{background:var(--psf-plane);}
.psf-table td.psf-num{font-variant-numeric:tabular-nums;font-weight:600;}
.psf-tbl-cty{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--psf-ink);white-space:nowrap;}
.psf-tbl-status{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.psf-tbl-status i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:block;}
.psf-tbl-sw{
  display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:6px;vertical-align:0;
}
.psf-table tfoot td{
  font-weight:700;color:var(--psf-ink);
  background:var(--psf-row-on);
  border-bottom:0;border-top:1px solid var(--psf-rule);
}
.psf-table tfoot td:first-child{border-radius:0 0 0 var(--psf-r);}
.psf-table tfoot td:last-child{border-radius:0 0 var(--psf-r) 0;}
.psf-tbl-total{display:flex;align-items:center;gap:9px;}
.psf-globe{width:17px;height:17px;flex:0 0 auto;color:var(--psf-aurora-band);display:block;}
/* ---------- tooltip ---------- */
.psf-tip{
  position:absolute;z-index:40;pointer-events:none;opacity:0;
  transform:translate(-50%,-100%);
  background:#1a1a1a;color:#fff;border-radius:7px;
  padding:9px 12px;font-size:.78rem;line-height:1.45;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  max-width:260px;transition:opacity .1s;
}
.psf-tip b{display:block;font-size:.85rem;margin-bottom:3px;}
.psf-tip span{color:#c9c6bf;}
.psf-tip.psf-on{opacity:1;}

/* ---------- footnotes ---------- */
.psf-notes{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--psf-line);
  font-size:.78rem;color:var(--psf-muted);line-height:1.6;
}
.psf-notes p{margin:0 0 8px;}
.psf-notes a{color:var(--psf-blue-dark);}

.psf-sr{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- sunflowers growing out of the footer rule ---------- */
.psf-garden{
  position:relative;
  height:104px;
  margin:44px 0 0;
  pointer-events:none;
}
.psf-garden + .psf-notes{margin-top:0;}

.psf-sf-wrap{
  position:absolute;bottom:0;left:var(--x);
  width:calc(var(--w) * var(--scale, 1));
  transform:translateX(-50%) rotate(var(--lean));
  transform-origin:50% 100%;
}
.psf-sf{display:block;width:100%;height:auto;overflow:visible;}

/* every part starts closed */
.psf-sf-stem{
  stroke-dasharray:130;stroke-dashoffset:130;
  transition:stroke-dashoffset .95s ease-out var(--d);
}
.psf-sf-leaf{
  transform:scale(0);
  transition:transform .5s cubic-bezier(.34,1.4,.64,1);
}
.psf-sf-leaf-l{transform-origin:99px 178px;transition-delay:calc(var(--d) + .42s);}
.psf-sf-leaf-r{transform-origin:100px 152px;transition-delay:calc(var(--d) + .58s);}
.psf-sf-petal{
  transform:rotate(var(--a)) scale(0);
  transform-origin:100px 84px;
  transition:transform .55s cubic-bezier(.34,1.32,.62,1);
}
.psf-sf-head{
  transform:scale(0);transform-origin:100px 84px;
  transition:transform .45s cubic-bezier(.34,1.5,.64,1) calc(var(--d) + 1.32s);
}
.psf-sf-seeds{opacity:0;transition:opacity .6s ease-out calc(var(--d) + 1.6s);}

/* ...and opens when the row scrolls into view */
.psf-garden.psf-open .psf-sf-stem{stroke-dashoffset:0;}
.psf-garden.psf-open .psf-sf-leaf{transform:scale(1);}
.psf-garden.psf-open .psf-sf-petal{transform:rotate(var(--a)) scale(1);}
.psf-garden.psf-open .psf-sf-ring-back .psf-sf-petal{transition-delay:calc(var(--d) + .82s + var(--i) * .03s);}
.psf-garden.psf-open .psf-sf-ring-front .psf-sf-petal{transition-delay:calc(var(--d) + 1s + var(--i) * .03s);}
.psf-garden.psf-open .psf-sf-head{transform:scale(1);}
.psf-garden.psf-open .psf-sf-seeds{opacity:1;}

/* once open, each one tracks the sun at its own pace */
.psf-garden.psf-open .psf-sf{
  transform-origin:50% 100%;
  animation:psf-turnsole var(--sway) ease-in-out calc(var(--d) + 2.4s) infinite;
}
@keyframes psf-turnsole{
  0%,100%{transform:rotate(calc(var(--amp) * -1));}
  50%{transform:rotate(var(--amp));}
}

@media (max-width:760px){
  .psf-garden{height:78px;margin-top:34px;--scale:.72;}
}
@media (max-width:460px){
  .psf-garden{height:54px;--scale:.48;}
}
/* motion-safe fallback: the row is simply there, fully open and still */
@media (prefers-reduced-motion:reduce){
  .psf-sf-stem{stroke-dashoffset:0;}
  .psf-sf-leaf,.psf-sf-head{transform:scale(1);}
  .psf-sf-petal{transform:rotate(var(--a)) scale(1);}
  .psf-sf-seeds{opacity:1;}
  .psf-garden.psf-open .psf-sf{animation:none;}
}


/* ---------- stacked bar segments (deployed / reserve) ---------- */
.psf-stack{
  display:flex;gap:2px;flex:0 0 auto;min-width:3px;
  border-radius:0 4px 4px 0 !important;overflow:hidden;
  transition:width .55s cubic-bezier(.22,1,.36,1);
}
/* flex-grow carries the proportion, so the 2px gaps come out of the
   available width instead of pushing the last segment past the end */
.psf-seg{height:100%;transition:background .12s;}
.psf-seg-dep{background:var(--psf-deployed);}
.psf-seg-res{background:var(--psf-reserve);}
.psf-seg-un{background:var(--psf-neutral);}

.psf-segkey{
  display:flex;flex-wrap:wrap;gap:6px 20px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--psf-line);
}
.psf-segkey-i{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--psf-ink-2);}
.psf-segkey-i i{width:11px;height:11px;border-radius:3px;flex:0 0 auto;display:block;}
.psf-segkey-i span{color:var(--psf-muted);}

/* ---------- flags ---------- */
.psf-flag{
  width:22px;height:16.5px;     /* 4:3, matching the source artwork */
  flex:0 0 auto;
  display:block;
  border:1px solid #b9b6ae !important;
  border-radius:0 !important;
}

/* ---------- responsive ---------- */

@media (max-width:760px){
  .psf-nuke{font-size:15px;}
  /* narrower value gutter on phones — the stacked bars need the width */
  .psf-cmp-t{padding-right:48px;}
  /* two tiles per row on phones, so the tabs aren't pushed off-screen */
  /* the band stays one field on phones; the three stats stack inside it,
     divided by a rule instead of sitting side by side */
  .psf-stats{grid-template-columns:1fr;gap:12px;}
  /* no ratio floor on a phone — a full-width 3:2 card would be half the screen */
  .psf-stat::before,.psf-stat::after{content:none;}
  .psf-stat{
    display:grid;grid-template-columns:94px 1fr;   /* fixed figure column so the
                three labels start on the same line as each other; 94 rather than
                104 leaves "inventories/arsenals" room to stay on one line */
    column-gap:14px;align-items:center;
    padding:18px 20px;
  }
  .psf-stat-v{font-size:2.15rem;}
  .psf-stat-l{margin-top:0;font-size:.88rem;max-width:none;}
  .psf-stat-n{grid-column:2;margin-top:6px;font-size:.8rem;max-width:none;}
  .psf-lede-h{font-size:1.3rem;}
  .psf-lede-src{font-size:.95rem;}
  /* tucked further into the corner so it never crosses a label */
  /* On a narrow band the label runs nearly the full width, so the mark is
     smaller and sits right in the corner — centre ~10px in from each edge
     instead of ~40px, which keeps its rays off the text. */
  /* The card is a wide strip here rather than a square: the label already runs
     to the right edge, so there is no corner left for the mark to sit in. It
     would cross the text at any size worth drawing, so it goes. The cards still
     carry the colour; the mark comes back as soon as they are square again. */
  .psf-beacon{display:none;}
  .psf-fact dt{min-height:0;}   /* the facts stack on phones — nothing to align to */
  /* the head stacks here, so the status reads from the left like everything
     above it rather than hanging off the right edge */
  .psf-status{text-align:left;}
  .psf-panel{padding:20px 16px 22px;}
  .psf-hero-v{font-size:2.3rem;}
  .psf-stat-v{font-size:1.75rem;}
  .psf-cmp-row{grid-template-columns:150px 1fr;gap:9px;}
  .psf-cmp-n{font-size:.86rem !important;}
  .psf-tab{padding:10px 13px 9px;}
}
@media (max-width:460px){
  .psf-cmp-row{grid-template-columns:1fr;gap:3px;padding:7px 6px;}
  .psf-cmp-cty{white-space:normal;}
}
@media (prefers-reduced-motion:reduce){
  .psf-nuke *{transition:none!important;}
}