/* ==========================================================================
   Foreign Missions - scoped stylesheet for the eleven pages of service 03.

   The tokens are the golden template's, copied verbatim from the UN Insights
   sheet (service 02), because BUILD-MANUAL 3 locks the dark navy theme and the
   three fonts site wide. Do not fork them; if a token changes it changes in
   every section.

   NOTHING HERE INVENTS A COLOUR. An earlier version of this file gave the
   section a gold accent by redefining --sky in this block. That was wrong twice
   over: the shared title bar reads --sky from the page and turned gold with it,
   and text and tables are house style, one colour across every section, not a
   per-section decoration. Type and tables are the same everywhere; the section
   is told apart by its name and its photographs.
   ========================================================================== */
:root{
  --navy:#0E1F33; --navy-deep:#091625; --navy-panel:#132A44; --navy-card:#10233B;
  --sky:#4FB8E7; --sky-soft:#9AD4F0;
  --hr-ink:#7FA3DD; --se-ink:#29ADE4;
  --sim-c1:#2F5D9E; --sim-c2:#00A0E2;
  --text:#E7F0F7; --text-soft:#A9BDCF;
  --line:rgba(79,184,231,.16); --stripe:rgba(255,255,255,.045);
  --radius:14px; --shadow:0 12px 32px rgba(4,12,22,.5);
  --ok:#48C79A; --warn:#E8B84B; --bad:#E2705F;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}}
/* clip, NOT hidden: overflow-x:hidden makes this element a scroll container, which
   silently breaks position:sticky on every descendant, including the page top bar
   and the shared menu bar. Measured on live 2026-08-24: no .topbar on this site had
   ever stuck. See _shared/menubar/bar.css for the full note. */
html,body{overflow-x:clip;max-width:100vw}
body{font-family:'Albert Sans',system-ui,sans-serif;background:var(--navy);color:var(--text);
  min-height:100vh}
a{color:var(--sky);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}

/* ---------------------------------------------------------------- chrome --- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
  padding:11px 20px;background:rgba(9,22,37,.94);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.brand b{font-weight:800}.brand span{color:var(--sky);font-weight:600}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-soft);min-width:0}
.crumbs a{color:var(--text-soft)}
.crumbs a:hover{color:var(--sky)}
.crumbs .sep{opacity:.5}
.crumbs b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signchip{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sky);
  background:rgba(79,184,231,.13);border:1px solid rgba(79,184,231,.35);padding:3px 10px;
  border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.bandchip{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sky-soft);
  background:rgba(79,184,231,.1);border:1px solid var(--line);padding:3px 10px;
  border-radius:6px;white-space:nowrap}
.wrap{max-width:1260px;margin:0 auto;padding:24px 20px 90px}
.cflag{display:inline-flex;width:18px;height:18px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:#28466B;box-shadow:0 0 0 1px rgba(255,255,255,.22);vertical-align:middle}
.cflag img{width:100%;height:100%;object-fit:cover}
.cflag.big{width:34px;height:34px}

h1{font-size:clamp(24px,3.2vw,38px);font-weight:800;margin:6px 0 8px;letter-spacing:-.012em}
h2{font-size:20px;font-weight:800;margin:0 0 4px}
h3{font-size:15px;font-weight:700;margin:0 0 8px}
.outcome{font-family:'Source Serif 4',serif;font-style:italic;font-size:16px;color:var(--text-soft);
  max-width:730px;line-height:1.6}
.outcome mark{background:none;color:var(--sky);font-style:normal;font-weight:600}
/* The line directly under the title. Serif and quiet: it names the idea of the service
   in one breath, and the description below it does the explaining. */
.tagline{font-family:'Source Serif 4',serif;font-style:italic;font-size:17px;color:var(--sky-soft);
  margin:2px 0 10px}
.section-label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);
  font-weight:700;margin:32px 0 12px}
p.lede{color:var(--text-soft);font-size:14.5px;line-height:1.6;max-width:770px}
.head{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;padding-bottom:16px;
  border-bottom:1px solid var(--line)}
.sub-head{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding-bottom:18px;
  border-bottom:1px solid var(--line)}
.flagpair{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.flagpair .cflag{width:48px;height:48px}
.flagpair .cflag:first-child{box-shadow:0 0 0 2px var(--sim-c1)}
.flagpair .cflag:last-child{box-shadow:0 0 0 2px var(--sim-c2)}
.signrow{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--sky);letter-spacing:.12em}
.signrow .sign{background:rgba(79,184,231,.13);border:1px solid rgba(79,184,231,.35);
  padding:2px 8px;border-radius:6px;margin-left:8px}

/* ----------------------------------------------------------------- tiles --- */
/* Two rows of five on a wide screen, the same component as the root menu and the
   Library. Every tile here is a live link: the ten doors all have a page. */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:20px}
@media(min-width:900px){.tgrid{grid-template-columns:repeat(5,1fr);gap:16px}}
.tile{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);display:block;min-width:0;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:rgba(79,184,231,.55);
  box-shadow:0 14px 30px rgba(4,12,22,.55);outline:none;text-decoration:none}
.tile picture{display:block;width:100%;height:100%}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,22,37,.05),rgba(9,22,37,.44) 50%,rgba(9,22,37,.95))}
/* The menu title standard: _shared/MENU-TITLE-STANDARD.md. Bare number to the left of a
   two line title, one word per line, a hairline between them, and nothing else on the
   photograph. The content badge that used to sit top right is gone. */
.tile .lab{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;
  display:flex;align-items:center;gap:9px}
.tile .n{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;
  color:var(--sky-soft);line-height:1;flex:0 0 auto;font-variant-numeric:tabular-nums;
  min-width:2ch;text-align:right}
.tile .vr{flex:0 0 auto;width:1px;align-self:stretch;background:var(--sky-soft);opacity:.5}
/* colour set explicitly: a tile is an <a>, and a{color:var(--sky)} would otherwise tint the
   title blue. The standard says the title is white. */
.tile .cn{font-size:clamp(12.5px,1.4vw,17px);font-weight:800;line-height:1.15;min-width:0;
  color:var(--text);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.tile .cn w{display:block}
.amp{color:rgba(255,255,255,.42);font-weight:700}
.tile.here{border-color:rgba(79,184,231,.5)}

/* --------------------------------------------------------------- surfaces -- */
.panel{background:var(--navy-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 17px 15px;margin-top:13px}
.panel.pad0{padding:0;overflow:hidden}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:880px){.grid3{grid-template-columns:1fr}}
.note{font-size:12.5px;color:var(--text-soft);line-height:1.55;background:var(--navy-panel);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px}
.note.warn{border-color:rgba(232,184,75,.5);color:#F3D89A}
.note b{color:var(--text)}
.stat{background:var(--navy-panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat b{display:block;font-family:'IBM Plex Mono',monospace;font-size:23px;color:var(--sky);
  line-height:1.1}
.stat span{display:block;font-size:12.5px;color:var(--text-soft);margin-top:4px;line-height:1.45}

/* ---------------------------------------------------------------- tables --- */
.tw{overflow-x:auto;max-width:100%}
table.tb{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
table.tb th{text-align:left;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sky);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap}
table.tb td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.055);vertical-align:top}
table.tb tr:nth-child(even) td{background:var(--stripe)}
table.tb td.num,table.tb th.num{text-align:right;font-family:'IBM Plex Mono',monospace}
table.tb td.nw{white-space:nowrap}
.badge2{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding:2px 7px;
  border-radius:5px;background:rgba(79,184,231,.14);border:1px solid var(--line);color:var(--sky-soft)}

/* ------------------------------------------------------------- door pages -- */
.pillrow{display:flex;gap:6px;flex-wrap:wrap}
.pill{font-size:12px;padding:5px 11px;border-radius:99px;border:1px solid var(--line);
  background:var(--navy-deep);color:var(--text-soft);transition:.15s}
.pill:hover{background:rgba(79,184,231,.14);border-color:rgba(79,184,231,.5);color:#fff;
  text-decoration:none}
/* The door photograph on its own page. Modest by instruction: it sits beside the title
   at the top of the page rather than running the full width as a banner. */
.hero{width:132px;height:132px;flex:0 0 auto;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:520px){.hero{width:96px;height:96px}}
/* What this will do: capability lines, not a feature list with checkmarks. */
ul.willdo{list-style:none;margin:0}
ul.willdo li{position:relative;padding:0 0 0 18px;margin-bottom:9px;font-size:14px;
  line-height:1.6;color:var(--text-soft)}
ul.willdo li:last-child{margin-bottom:0}
ul.willdo li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--sky);opacity:.8}
ul.willdo li b{color:var(--text);font-weight:700}
/* The single honest status line. A chip, not a button: there is nothing to click yet. */
.status{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:13px;
  font-family:'IBM Plex Mono',monospace;color:var(--warn);
  background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.45);
  border-radius:10px;padding:9px 14px;line-height:1.5}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:0 0 auto}

footer{margin-top:48px;font-size:12px;color:var(--text-soft);border-top:1px solid var(--line);
  padding-top:15px;line-height:1.65}

/* ==========================================================================
   Page components for the ten door pages, added 2026-08-24 when the pages
   stopped being placeholders and started rendering real data from data/*.json.
   Nothing here is page specific: every door draws from this set.
   ========================================================================== */

/* the three state country switcher every data page carries */
.ctoggle{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--navy-deep)}
.ctoggle button{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:none;
  background:none;color:var(--text-soft);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:.14s}
.ctoggle button+button{border-left:1px solid var(--line)}
.ctoggle button:hover{background:rgba(79,184,231,.1);color:var(--text)}
.ctoggle button[aria-pressed="true"]{background:rgba(79,184,231,.2);color:#fff}
.ctoggle .cflag{width:16px;height:16px}

/* a row of headline figures */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  margin-top:14px}
.fig{background:var(--navy-panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px}
.fig b{display:block;font-family:'IBM Plex Mono',monospace;font-size:22px;color:var(--sky);
  line-height:1.1}
.fig span{display:block;font-size:12px;color:var(--text-soft);margin-top:4px;line-height:1.45}
.fig small{display:block;font-size:11px;color:var(--text-soft);opacity:.75;margin-top:3px}

/* tabs, used by Common Ground and Report Studio */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap;margin-top:6px}
.tabs button{padding:9px 14px;font:inherit;font-size:13px;font-weight:600;
  color:var(--text-soft);background:none;border:none;border-bottom:2px solid transparent;
  cursor:pointer}
.tabs button[aria-selected="true"]{color:#fff;border-bottom-color:var(--sky)}
.tabpane[hidden]{display:none}

/* the contestability chips. One colour per procedure, so the eye learns them. */
.chip{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.04em;padding:2px 7px;border-radius:5px;white-space:nowrap;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text-soft)}
.chip.CONTESTED{color:#F3B7AC;border-color:rgba(226,112,95,.5);background:rgba(226,112,95,.13)}
.chip.GROUP_SLATE{color:#9AD4F0;border-color:rgba(79,184,231,.5);background:rgba(79,184,231,.13)}
.chip.ROTATION{color:#A9E5CE;border-color:rgba(72,199,154,.5);background:rgba(72,199,154,.13)}
.chip.UNDERSUBSCRIBED{color:#F3D89A;border-color:rgba(232,184,75,.5);background:rgba(232,184,75,.13)}
.chip.APPOINTED{color:#C9B8E8;border-color:rgba(150,120,210,.5);background:rgba(150,120,210,.13)}
.chip.UNCLASSIFIED,.chip.UNKNOWN{color:var(--text-soft)}
.legend{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.legend div{font-size:12px;color:var(--text-soft);line-height:1.5}
.legend .chip{margin-right:7px}

/* the "arriving" shell: a designed panel that is honest about having no data yet */
.soon{border:1px dashed rgba(79,184,231,.35);border-radius:12px;padding:16px 16px 14px;
  background:rgba(79,184,231,.04);margin-top:12px}
.soon h3{font-size:14px;margin:0 0 6px}
.soon p{font-size:12.5px;color:var(--text-soft);line-height:1.6;max-width:70ch}
.soon .tag{display:inline-block;margin-top:9px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;color:var(--warn);border:1px solid rgba(232,184,75,.45);
  background:rgba(232,184,75,.1);padding:2px 8px;border-radius:5px}

/* a search / filter box over embedded data */
.filter{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px}
.filter input[type=search],.filter select{background:var(--navy-deep);color:var(--text);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit;font-size:13px}
.filter input[type=search]{flex:1 1 220px;min-width:0}
.filter input:focus,.filter select:focus{outline:none;border-color:rgba(79,184,231,.55)}
.filter .count{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-soft)}

/* the institutional tree */
.tree{margin-top:12px;font-size:13.5px}
.tree ul{list-style:none;margin:0;padding-left:17px}
.tree>ul{padding-left:0}
.tree li{margin:1px 0}
.tree .node{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;
  cursor:pointer;transition:background .13s}
.tree .node:hover{background:rgba(79,184,231,.1)}
.tree .node.on{background:rgba(79,184,231,.16)}
.tree .tw{width:14px;flex:0 0 auto;color:var(--sky);font-family:'IBM Plex Mono',monospace;
  font-size:11px;text-align:center}
.tree .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree .ac{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sky-soft);
  flex:0 0 auto}
.tree .dot{width:13px;height:13px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.tree .dot img{width:100%;height:100%;object-fit:cover;display:block}
.tree li.shut>ul{display:none}
.card{background:var(--navy-card);border:1px solid rgba(79,184,231,.35);border-radius:12px;
  padding:14px 15px;margin-top:12px}
.card h3{font-size:15px;margin:0 0 3px}
.card .sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sky-soft);
  margin-bottom:9px}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12.5px;margin:0}
.card dt{color:var(--text-soft)}
.card dd{margin:0;color:var(--text)}

/* inline SVG charts */
.chart{margin-top:12px;background:var(--navy-card);border:1px solid var(--line);
  border-radius:12px;padding:14px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .ttl{font-size:13px;font-weight:700;margin-bottom:2px}
.chart .cap{font-size:11.5px;color:var(--text-soft);line-height:1.5;margin-top:9px}
.ckey{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;
  color:var(--text-soft)}
.ckey i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:5px;
  vertical-align:2px}

/* a bar inside a table cell, for shares and scores */
.bar{position:relative;height:15px;border-radius:4px;background:rgba(255,255,255,.06);
  overflow:hidden;min-width:52px}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;
  background:linear-gradient(90deg,#2F5D9E,#4FB8E7)}
.bar.b i{background:linear-gradient(90deg,#0E6E96,#29ADE4)}

/* the print styled report pages of Report Studio */
.report{background:#fff;color:#12212f;border-radius:12px;padding:30px 32px;margin-top:14px;
  font-size:14px;line-height:1.62}
.report h2,.report h3,.report h4{color:#0E1F33}
.report h2{font-size:22px;margin:0 0 4px}
.report .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#5a6b7d;
  margin-bottom:16px}
.report h3{font-size:15px;margin:20px 0 6px;padding-bottom:4px;
  border-bottom:1px solid #d5dee6}
.report p{margin:0 0 9px;max-width:74ch}
.report ul{margin:0 0 9px 19px}
.report li{margin-bottom:3px}
.report table{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 12px}
.report th{text-align:left;border-bottom:1px solid #adbccb;padding:5px 7px;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#41566b}
.report td{border-bottom:1px solid #e6ecf1;padding:5px 7px;vertical-align:top}
.report .foot{margin-top:18px;font-size:11px;color:#5a6b7d;border-top:1px solid #d5dee6;
  padding-top:9px}

/* watchlist rows on My UN */
.wl{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--navy-panel);margin-top:7px;font-size:13px}
.wl .x{margin-left:auto;flex:0 0 auto;border:none;background:none;color:var(--text-soft);
  cursor:pointer;font-size:15px;line-height:1;padding:2px 5px;border-radius:6px}
.wl .x:hover{color:#E2705F;background:rgba(226,112,95,.12)}
.empty{font-size:12.5px;color:var(--text-soft);padding:11px 0}
.loading{font-size:12.5px;color:var(--text-soft);padding:14px 0}
.err{font-size:12.5px;color:#F2B3A8;border:1px solid rgba(226,112,95,.5);
  background:rgba(226,112,95,.1);border-radius:10px;padding:11px 13px;margin-top:12px}

/* ==========================================================================
   Expandable table rows, and the page breadcrumb. Added 2026-08-24.

   A reusable section component: Country File uses it now, Election Watch and
   Key People inherit it later. The rule that shapes it is that a table must
   never be wider than the screen, at any width down to 360px, so a table keeps
   two columns and everything else moves into the expansion under the row.
   ========================================================================== */

/* the breadcrumb, now page content rather than chrome, since the bar carries
   nothing but the wordmark */
.pcrumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-soft);
  flex-wrap:wrap;margin-bottom:4px}
.pcrumbs a{color:var(--text-soft)}
.pcrumbs a:hover{color:var(--sky)}
.pcrumbs .sep{opacity:.45}
.pcrumbs b{color:var(--text);font-weight:600}

/* ------------------------------------------------------------ the table --- */
/* Two columns, fixed layout, and every cell allowed to wrap: that is what keeps
   a long body name from pushing the table past the viewport. No overflow-x
   anywhere, by design, so there is nothing to scroll sideways. */
table.xt{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px}
table.xt th{text-align:left;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--sky);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--line)}
table.xt th.k2{width:96px}
table.xt th.chev{width:30px}
table.xt td{padding:0;border-bottom:1px solid rgba(255,255,255,.055);vertical-align:top}
table.xt tr.xr>td{padding:9px 10px}
table.xt tr:nth-child(4n+3)>td{background:var(--stripe)}
table.xt .cell{overflow-wrap:anywhere;word-break:break-word;line-height:1.35}
/* The narrow column wraps like the wide one. `exec. com. memb.` is longer than a
   96px cell and nowrap forced it to sit on one clipped line; letting it use the cell
   vertically as well as horizontally is what the Body and Name columns already do. */
table.xt .k2{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--sky-soft);
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.3}
table.xt .ac{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sky-soft);
  margin-left:5px;white-space:nowrap}

tr.xr{cursor:pointer;transition:background .13s}
tr.xr:hover>td{background:rgba(79,184,231,.09)}
tr.xr:focus-visible{outline:2px solid rgba(79,184,231,.6);outline-offset:-2px}
tr.xr[aria-expanded="true"]>td{background:rgba(79,184,231,.13)}
tr.xr .chev{color:var(--sky);font-size:10px;text-align:center;transition:transform .18s;
  display:inline-block}
tr.xr[aria-expanded="true"] .chev{transform:rotate(90deg)}

/* the expansion: part of the flow, a quiet inset, never an overlay */
tr.xp>td{padding:0;background:rgba(9,22,37,.5)}
tr.xp[hidden]{display:none}
.xpanel{padding:14px 14px 13px;border-left:2px solid rgba(79,184,231,.45);
  margin:0 10px 10px 10px;background:var(--navy-panel);border-radius:0 10px 10px 0}
.xpanel h4{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--sky);
  font-weight:700;margin:0 0 7px}
.xpanel h4+*{margin-top:0}
.xsec+.xsec{margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}
.xfacts{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12.5px;margin:0}
.xfacts dt{color:var(--text-soft)}
.xfacts dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.xlines{font-size:12.5px;line-height:1.65;color:var(--text-soft)}
.xlines div+div{margin-top:5px}
.xlines b{color:var(--text);font-weight:600}
.xlines a{color:var(--sky)}

/* the co-member flag strip. Wraps to more lines rather than widening anything. */
.fstrip{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fstrip .cflag{width:22px;height:22px}
.fstrip .cflag.me{box-shadow:0 0 0 2px var(--sky),0 0 0 3px rgba(9,22,37,.9)}
.fstrip .cflag.other{box-shadow:0 0 0 2px rgba(255,255,255,.45)}
.fstrip .more{font-size:12px;color:var(--text-soft);margin-left:3px}

/* the acronym glossary at the foot of the page, and the links into it */
a.acro{color:var(--sky-soft);border-bottom:1px dotted rgba(154,212,240,.55);
  text-decoration:none;cursor:help}
a.acro:hover{color:#fff;border-bottom-color:#fff}
.glossary{margin-top:12px}
.glossary dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px;
  margin:0}
.glossary dt{font-family:'IBM Plex Mono',monospace;color:var(--sky-soft);white-space:nowrap}
.glossary dd{margin:0;color:var(--text-soft);overflow-wrap:anywhere}
.glossary dt:target,.glossary dt:target+dd{background:rgba(79,184,231,.18);
  border-radius:5px;color:var(--text)}
/* the sticky bar would otherwise cover the row a #hash jump lands on */
.glossary dt{scroll-margin-top:74px}

/* a heading with its qualifier, "Seats held now * as a member state" */
.qual{color:var(--text-soft);font-weight:400}
table.xt .yr{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--text-soft);margin-left:7px;white-space:nowrap}

/* ==========================================================================
   The succession timeline, inside a national row expansion. Added 2026-08-24.

   Time runs left to right: the earliest of the four postings shown sits at the
   far left, the current year at the far right. Each dot is the holder's country
   as a circle flag; the selected country carries the light blue ring. Labels
   alternate above and below the line so they never collide, so a dot has either
   its country name above and its year below, or the other way round.

   The line reuses the bar gradient from the Library cuisine chapter (10-4),
   #2F5D9E to #4FB8E7, brightest at the right hand end, which is where "now" is.
   ========================================================================== */
.tline{position:relative;margin:26px 4px 10px 4px;padding:0;min-height:96px}
.tline .rail{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;
  border-radius:99px;background:linear-gradient(90deg,#2F5D9E,#4FB8E7)}
.tline .rail::after{content:"";position:absolute;right:-1px;top:-3px;width:10px;height:10px;
  border-radius:50%;background:#4FB8E7;box-shadow:0 0 0 3px rgba(79,184,231,.25)}
.tline .pt{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;
  flex-direction:column;align-items:center}
.tline .pt .cflag{width:26px;height:26px;box-shadow:0 0 0 2px #0B1B2E,
  0 0 0 3px rgba(255,255,255,.28)}
.tline .pt.me .cflag{box-shadow:0 0 0 2px #0B1B2E,0 0 0 4px var(--sky)}
.tline .lab{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:11px;line-height:1.25;text-align:center}
.tline .lab.up{bottom:calc(50% + 20px)}
.tline .lab.dn{top:calc(50% + 20px)}
.tline .nm{color:var(--text);font-weight:600}
.tline .yr{font-family:'IBM Plex Mono',monospace;color:var(--sky-soft)}
/* One label, two forms. The short one is used only where the rail is narrow, and
   only on the dots between the two ends, so the axis always states its century. */
.tline .yshort{display:none}
@media (max-width:640px){
  .tline .yfull{display:none}
  .tline .yshort{display:inline}
}
.tline .cap{margin-top:6px;font-size:11.5px;color:var(--text-soft);line-height:1.5}
/* on a narrow screen the flags shrink rather than the line overflowing */
@media(max-width:520px){
  .tline{min-height:104px}
  .tline .pt .cflag{width:21px;height:21px}
  .tline .lab{font-size:10px}
}

/* The page title on a page that has dropped its preamble. Identical on both such pages, so
   the two read as views of one workspace. Sits tight above the content: the hairline is what
   separates it, not white space. */
.ptitle{font-size:clamp(21px,2.4vw,29px);font-weight:800;letter-spacing:-.012em;
  margin:2px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* THE PAIR, AS TWO CIRCLE FLAGS. Lit means a seat on that body, dim means none, and the
   column can be read straight down without reading a word. Dim is greyed and faded rather
   than removed, because a missing flag would read as missing data instead of no seat. */
.pairflags{display:inline-flex;gap:5px;align-items:center}
.cflag.pf{width:20px;height:20px}
.cflag.pf.on{box-shadow:0 0 0 2px var(--sky),0 0 0 3px rgba(9,22,37,.9)}
.cflag.pf.off{opacity:.28;filter:grayscale(1)}
.xlines .cflag.pf{width:17px;height:17px;vertical-align:-3px;margin-right:2px}
.xlines .fstrip{margin:6px 0 2px}

/* ==========================================================================
   Foreign Missions additions. Everything above this line is the golden
   template, shared with service 02. Everything below exists because this
   section does things the research section does not: it opens a person, it
   sorts and exports tables, and it draws its own charts.
   ========================================================================== */

/* ------------------------------------------------------ person popover ---- */
/* One component, two presentations. Above 700px it is a popover anchored to the
   name that opened it; at or below, it is a bottom sheet, because a popover
   pinned to a tap target on a phone lands under the thumb. */
.pp{position:absolute;z-index:80;width:344px;max-width:calc(100vw - 20px);
  background:var(--navy-panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px}
.pp.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
  border-radius:16px 16px 0 0;max-height:80vh;overflow:auto}
.pp-head{display:flex;gap:10px;align-items:flex-start}
.pp-head b{font-size:15px;line-height:1.25;display:block}
.pp-sub{color:var(--text-soft);font-size:12.5px;margin-top:2px}
.pp-x{margin-left:auto;background:none;border:0;color:var(--text-soft);font-size:22px;
  line-height:1;cursor:pointer;padding:0 2px;min-width:44px;min-height:44px}
.pp-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:12px 0 0;font-size:13px}
.pp-dl dt{color:var(--text-soft);white-space:nowrap}
.pp-lab{margin:12px 0 5px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-soft)}
.pp-foot{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--text-soft)}
.pn{border-bottom:1px dotted rgba(79,184,231,.5);cursor:pointer}
.pn:hover{text-decoration:none;border-bottom-style:solid}

/* --------------------------------------------------------- as of, sources - */
.asof{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sky-soft);
  background:rgba(79,184,231,.13);border:1px solid var(--line);padding:3px 9px;border-radius:6px;
  white-space:nowrap}
.srcbtn{margin-left:8px;font-size:12px}
.srcbox{margin-top:8px;padding:9px 11px;background:var(--navy-card);border:1px solid var(--line);
  border-radius:9px;font-size:12.5px;line-height:1.7}
.lnk{background:none;border:0;color:var(--sky);cursor:pointer;font:inherit;font-size:12.5px;
  padding:4px 2px;min-height:32px}
.lnk:hover{text-decoration:underline}

/* --------------------------------------------------------- tables, extra -- */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable::after{content:"";opacity:.35;margin-left:5px}
th.sortable.asc::after{content:"\2191";opacity:1}
th.sortable.desc::after{content:"\2193";opacity:1}
tr.moremrow td{text-align:center;color:var(--sky);cursor:pointer;font-size:12.5px;
  padding:10px;background:rgba(79,184,231,.05)}
tr.moremrow td:hover{background:rgba(79,184,231,.1)}
.expc{display:flex;gap:4px;align-items:center;margin-left:auto}
.tb.sm td{padding:5px 8px;font-size:12.5px}

/* --------------------------------------------------------- empty states --- */
.emptybox{padding:26px 18px;text-align:center;border:1px dashed var(--line);
  border-radius:var(--radius);background:rgba(255,255,255,.015)}
.emptymsg{color:var(--text-soft);font-size:13.5px;margin-bottom:10px}

/* -------------------------------------------------------------- charts ---- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .cl{fill:var(--text-soft);font-size:11px;font-family:'Albert Sans',sans-serif}
.chart .cv{fill:var(--text);font-size:11.5px;font-family:'IBM Plex Mono',monospace}
.chart .cvbig{fill:var(--text);font-size:26px;font-weight:700;font-family:'Albert Sans',sans-serif}
.chart .cg{stroke:var(--line);stroke-width:1}
.chartcard{background:var(--navy-panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px}
.chartcard h3{font-size:14px;margin-bottom:2px}
.takeaway{margin-top:9px;font-size:12.5px;color:var(--text-soft);line-height:1.6}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px;font-size:12px;color:var(--text-soft)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}

/* ---------------------------------------------------------- form bits ----- */
.ctrlrow{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{background:transparent;border:0;color:var(--text-soft);padding:8px 13px;
  cursor:pointer;font:inherit;font-size:12.5px;min-height:40px}
.seg button.on{background:rgba(79,184,231,.13);color:var(--sky-soft);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:99px;padding:6px 12px;font-size:12.5px;color:var(--text-soft);cursor:pointer;
  background:transparent;min-height:36px}
.chip.on{background:rgba(79,184,231,.13);color:var(--sky-soft);border-color:rgba(79,184,231,.45)}
.chip .x{opacity:.7;font-size:15px;line-height:1}
select,input[type=text],input[type=search],input[type=date],input[type=time],textarea{
  background:var(--navy-card);border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:9px 11px;font:inherit;font-size:13px;min-height:40px}
textarea{min-height:88px;line-height:1.6}
input[type=search]{width:100%}
label.sw{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-soft);
  cursor:pointer;min-height:36px}
.btn{background:var(--sky);color:#20180a;border:0;border-radius:9px;padding:10px 16px;
  font:inherit;font-weight:600;font-size:13px;cursor:pointer;min-height:44px}
.btn.sm{padding:7px 12px;min-height:36px;font-size:12.5px}
.btn.ghost{background:transparent;color:var(--sky);border:1px solid var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ------------------------------------------------------------- layout ----- */
.two-panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px}
@media (max-width:900px){.two-panel{grid-template-columns:1fr}}
.dashgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.feedcard{background:var(--navy-panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 15px;margin-bottom:10px}
.mono{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-soft)}
.badge2.arr{color:var(--ok);border-color:rgba(72,199,154,.45)}
.badge2.dep{color:var(--bad);border-color:rgba(226,112,95,.45)}
.badge2.pro{color:var(--warn);border-color:rgba(232,184,75,.45)}
.steps{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.steps span{font-size:11px;padding:3px 9px;border-radius:99px;border:1px solid var(--line);
  color:var(--text-soft)}
.steps span.done{background:rgba(79,184,231,.13);color:var(--sky-soft);border-color:rgba(79,184,231,.45)}
@media (max-width:700px){
  .tw{overflow-x:auto}
  .tb td:first-child,.tb th:first-child{position:sticky;left:0;background:var(--navy-panel);z-index:1}
}

/* ==========================================================================
   MOBILE FIRST, ADDED 2026-08-28.

   The rule, stated once: no table anywhere in this section may be wider than
   the screen, at any width down to 360px. Tables are table.xt, two columns,
   with everything else under the row. See UI.xtable in ui.js.

   What was here before: table.tb at min-width:520px inside .tw{overflow-x:auto},
   which on a phone is a five column table you read by dragging it sideways.
   .tb and .tw are kept only for the two hidden export tables, which are never
   displayed; they are no longer allowed a minimum width.
   ========================================================================== */
table.tb{min-width:0}
.tw{overflow-x:visible}

/* nothing in the page body may push the page wider than the viewport */
.wrap table, .wrap pre, .wrap img, .wrap svg{max-width:100%}

/* a sortable header in a fixed-layout table wraps like any other cell; nowrap
   would let a long header push the column past its share of the screen */
table.xt th.sortable{white-space:normal}
table.xt th{vertical-align:bottom}

/* the show-more row, inside the section table */
table.xt tr.moremrow td{text-align:center;color:var(--sky);cursor:pointer;font-size:12.5px;
  padding:11px 10px;border-bottom:none}
table.xt tr.moremrow td:hover{background:rgba(79,184,231,.1)}

/* On a phone the narrow column gives up a little more width, and the panel sits
   closer to the edge, so the wide column keeps as much room as it can. */
@media (max-width:520px){
  table.xt{font-size:12.5px}
  table.xt th.k2{width:78px}
  table.xt th{font-size:9.5px;letter-spacing:.08em;padding:8px 7px}
  table.xt tr.xr>td{padding:8px 7px}
  table.xt th.chev{width:22px}
  .xpanel{margin:0 6px 8px 6px;padding:12px 11px 11px}
  .xfacts{grid-template-columns:1fr;gap:2px 0}
  .xfacts dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
}