/* Kit v3 (docs/design/KIT_V3.md). One system for KCO and IDCDC: the page is an application, its instrument edge to edge,
   panels float over it. Black and white grounds, one signal red by meaning (C24). Logical properties only, so every page
   works right to left. Motion only for a change of state (C21), off under reduced motion. Fonts are self-hosted. */
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex"; src: url(vendor/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url(vendor/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url(vendor/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #000; --bg-1: #0a0a0a; --bg-2: #141414; --bg-3: #1d1d1d;
  --ink: #f5f5f5; --ink-2: #a3a3a3; --ink-3: #6b6b6b;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --glass: rgba(14,14,14,.72); --glass-2: rgba(28,28,28,.82);
  --red: #ff3b30; --red-ink: #fff; --red-soft: rgba(255,59,48,.16);
  --r-s: 5px; --r: 5px; --r-l: 5px; --r-dot: 50%;
  --p1: #b9a6ff; --p2: #86d4ff; --p3: #8ff0c8; --p4: #ffb59e; --pastel: linear-gradient(90deg, var(--p1), var(--p2) 38%, var(--p3) 70%, var(--p4));
  --sh: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -12px rgba(0,0,0,.7);
  --f: "Plex", system-ui, -apple-system, "Segoe UI", sans-serif; --m: "PlexMono", ui-monospace, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  /* the panel top under the bar (112px on the phone, under the spine bar) and the end gutter (the rail; with an end panel) */
  --top: 76px; --gut-end: 76px; --gut-end-panel: 460px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --p1: #6f5df2; --p2: #2f9fd8; --p3: #1fae8f; --p4: #e0739a; --bg: #fff; --bg-1: #f6f6f6; --bg-2: #ececec; --bg-3: #e2e2e2;
  --ink: #0a0a0a; --ink-2: #555; --ink-3: #8a8a8a;
  --line: rgba(0,0,0,.08); --line-2: rgba(0,0,0,.14);
  --glass: rgba(255,255,255,.78); --glass-2: rgba(255,255,255,.92);
  --red: #e5271b; --red-soft: rgba(229,39,27,.10);
  --sh: 0 1px 0 rgba(255,255,255,.6) inset, 0 20px 50px -16px rgba(0,0,0,.18);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 400 13px/1.45 var(--f); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--m); }

/* The application frame */
.app { position: fixed; inset: 0; overflow: hidden; }
.stage { position: absolute; inset: 0; }
.glass { background: var(--glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); }

/* Command bar */
.bar { position: absolute; inset-block-start: 12px; inset-inline: 12px; height: 52px; display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; align-items: center; gap: 12px; padding-inline: 10px; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand__t { min-width: 0; }
.mark { flex: none; min-width: 32px; width: auto; padding-inline: 4px; height: 32px; border-radius: var(--r); background: var(--ink); color: var(--bg); display: grid; place-items: center; font: 700 11px/1 var(--f); letter-spacing: .02em; }
.brand b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand span { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.cmd { height: 36px; display: flex; align-items: center; gap: 10px; padding-inline: 12px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-3); text-align: start; }
.cmd:hover { border-color: var(--line-2); color: var(--ink-2); }
.cmd svg { flex: none; }
.cmd > span:not(.kbd) { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kbd { font: 500 11px/1 var(--m); padding: 4px 6px; border-radius: var(--r); border: 1px solid var(--line-2); color: var(--ink-2); }
.tools { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.btn { color: inherit; height: 34px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 12px; border-radius: var(--r); border: 1px solid var(--line); background: transparent; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.btn:hover { background: var(--bg-2); border-color: var(--line-2); }
.btn--icon { width: 34px; padding: 0; justify-content: center; }
.btn--red { background: var(--red); border-color: var(--red); color: var(--red-ink); }
.btn--red:hover { background: color-mix(in srgb, var(--red) 88%, #000); border-color: transparent; }
.btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Rail of platforms */
.rail { position: absolute; inset-inline-start: 12px; inset-block-start: 76px; width: 52px; padding: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 15; }
.rail a { position: relative; height: 40px; border-radius: var(--r); display: grid; place-items: center; color: var(--ink-2); }
.rail a:hover { background: var(--bg-2); color: var(--ink); }
.rail a[aria-current] { background: var(--ink); color: var(--bg); }
.rail a .tip { position: absolute; inset-inline-start: calc(100% + 10px); white-space: nowrap; padding: 6px 10px; border-radius: var(--r); background: var(--glass-2); border: 1px solid var(--line); font-size: 12px; color: var(--ink); opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity .12s, transform .12s; }
.rail a:hover .tip { opacity: 1; transform: none; }

/* Panels */
.panel { position: absolute; z-index: 10; display: flex; flex-direction: column; min-height: 0; }
.panel__hd { padding: 16px 16px 12px; border-block-end: 1px solid var(--line); }
.panel__bd { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.eyebrow { font: 500 11px/1 var(--f); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.title { font: 600 20px/1.2 var(--f); letter-spacing: -.01em; margin: 6px 0 0; }

/* Big numbers */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; margin-block-start: 14px; }
.stat { background: var(--bg-1); padding: 12px; min-width: 0; }
.stat b { display: block; font: 600 30px/1 var(--f); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-block-start: 6px; color: var(--ink-3); font-size: 12px; }
.stat--live b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-inline-start: 6px; vertical-align: super; }

/* Segmented control */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.seg button { height: 28px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink-2); font-weight: 500; font-size: 12.5px; }
.seg button[aria-pressed="true"] { background: var(--bg-3); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.4); background-image: var(--pastel); background-size: calc(100% - 20px) 1.5px; background-position: 50% calc(100% - 3px); background-repeat: no-repeat; }
:root[data-theme="light"] .seg button[aria-pressed="true"] { background-color: #fff; }

/* Lists */
.group { padding: 10px 8px 4px; }
.group__h { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; }
.group__h .eyebrow b { color: var(--ink); font-weight: 600; margin-inline-start: 6px; }
.row { width: 100%; display: grid; grid-template-columns: 20px minmax(0,1fr) auto 64px; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: var(--r); background: transparent; text-align: start; }
.row:hover { background: var(--bg-2); }
.row[aria-selected="true"] { background: var(--red-soft); }
.row[aria-selected="true"] .row__n { color: var(--ink); }
.row__d { width: 8px; height: 8px; border-radius: var(--r); }
.row__n { font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row__c { color: var(--ink-3); font-size: 12px; }
.meter { height: 2px; border-radius: 1px; background: var(--line-2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--pastel); background-size: var(--meter-w, 64px) 100%; border-radius: inherit; }
.row[aria-selected="true"] .meter i { background: var(--red); }

.t0 { background: var(--ink); } .t1 { background: var(--ink-2); } .t2 { background: var(--ink-3); }

/* Inspector */
.insp { inset-block-start: 76px; inset-inline-end: 12px; width: 372px; max-height: calc(100% - 196px); transform-origin: top right; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.insp[hidden] { display: flex; opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; }
.insp .x { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 9px; border-radius: var(--r); border: 1px solid var(--line-2); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.chip--red { border-color: transparent; background: var(--red-soft); color: var(--red); }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fig { margin: 14px 16px 0; padding: 14px; border-radius: var(--r); background: var(--bg-1); border: 1px solid var(--line); }
.fig b { display: block; font: 600 26px/1.1 var(--f); letter-spacing: -.02em; }
.fig small { display: block; margin-block-start: 6px; color: var(--ink-3); }
.fig .src { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid var(--line); color: var(--ink-2); font-size: 12px; }
.line1 { margin: 14px 16px 0; color: var(--ink-2); }
.cities { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px 0; }
.cities button { height: 28px; padding-inline: 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-1); font-size: 12.5px; }
.cities button:hover { border-color: var(--red); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; }
.acts .btn { justify-content: center; }

/* Time strip */
.time { position: absolute; inset-inline: 76px 12px; inset-block-end: 12px; height: 108px; z-index: 12; display: grid; grid-template-columns: 196px minmax(0,1fr) 220px; align-items: stretch; }
.time__l { min-width: 0; min-height: 0; padding: 12px 16px; gap: 6px; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.time__now { font: 600 15px/1.2 var(--f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time__now small { display: block; color: var(--ink-3); font: 400 12px/1.3 var(--f); margin-block-start: 3px; }
.time__ax { position: relative; margin-inline: 18px; }
.time__ax canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.time__r { min-width: 0; min-height: 0; overflow: hidden; padding: 12px 14px; border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.next b { display: block; font: 600 15px/1.2 var(--f); }
.next small { display: block; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.days { font: 600 28px/1 var(--f); letter-spacing: -.03em; }
.days span { font: 500 12px/1 var(--f); color: var(--ink-3); letter-spacing: 0; margin-inline-start: 4px; }

/* Layers: a toolbar over the map, between the panels */
.layers { position: absolute; inset-block-start: var(--top); inset-inline-start: 468px; max-width: calc(100% - 468px - 396px); z-index: 11; padding: 4px; display: flex; gap: 2px; border-radius: var(--r); }
.layers { overflow-x: auto; scrollbar-width: none; }
.layers button { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding-inline: 10px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.layers button:hover { color: var(--ink); background: var(--bg-2); }
.layers button[aria-pressed="true"] { color: var(--ink); background: var(--bg-2); }
.layers button i { width: 8px; height: 8px; border-radius: var(--r); background: var(--ink-3); }
.layers button[aria-pressed="true"] i { background: var(--ink); }
.layers button em { font-style: normal; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.attr { position: absolute; z-index: 9; inset-block-end: 116px; inset-inline-end: 16px; color: var(--ink-3); font-size: 10.5px; max-width: 420px; text-align: end; }
.attr summary { cursor: pointer; list-style: none; }
.attr summary::-webkit-details-marker { display: none; }
.attr[open] p { margin: 6px 0 0; padding: 10px 12px; border-radius: var(--r); background: var(--glass-2); border: 1px solid var(--line); color: var(--ink-2); text-align: start; line-height: 1.45; }

/* Map hover card */
.tipcard { position: absolute; z-index: 30; pointer-events: none; padding: 8px 10px; border-radius: var(--r); font-size: 12.5px; white-space: nowrap; transform: translate(12px, 12px); }
.tipcard b { font-weight: 600; }
.tipcard small { color: var(--ink-3); margin-inline-start: 6px; }

/* Command palette */
.pal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; padding-block-start: 12vh; background: rgba(0,0,0,.45); }
.pal[hidden] { display: none; }
.pal__box { width: min(640px, calc(100% - 24px)); overflow: hidden; }
.pal__in { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; border-block-end: 1px solid var(--line); }
.pal__in input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; }
.pal__list { max-height: 52vh; overflow: auto; padding: 6px; }
.pal__list button { width: 100%; display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border: 0; border-radius: var(--r); background: transparent; text-align: start; }
.pal__list button[aria-selected="true"], .pal__list button:hover { background: var(--bg-2); }
.pal__list small { color: var(--ink-3); }
.pal__k { padding: 10px 12px 4px; }

/* The spine (spine.js): the Place and Lens place trail, kept on every page (owner, 5 Nov). The mark, then Home,
   country, ADM1 unit and city with their flags on one line; the current place marked in red; each level a picker.
   The areas button with the red pulse holds the platforms. */
.spine { position: absolute; z-index: 16; inset-block: 0; inset-inline-start: 0; width: 72px; padding: 16px 0 20px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.spine > * { pointer-events: auto; }
.bar.bar--spine { inset-inline-start: 84px; }
.bar.bar--spine .brand { display: none; }
.bar.bar--spine { grid-template-columns: minmax(0, 560px) 1fr; }
.has-rail-end .insp { inset-inline-end: var(--gut-end); }
.has-rail-end .layers { max-width: calc(100% - 468px - var(--gut-end-panel)); }
.has-rail-end .app:has(#insp[hidden]) .layers { max-width: calc(100% - 468px - var(--gut-end)); }
.rail.rail--end { position: fixed; inset-inline-start: auto; inset-inline-end: 12px; inset-block-start: var(--top); background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.rail.rail--end { gap: 3px; padding-block: 0; }
.rail.rail--end a { height: clamp(26px, calc((100vh - var(--top) - 136px) / 17 - 3px), 40px); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.rail.rail--end a svg { max-height: 70%; }
.has-rail-end .time { inset-inline-end: var(--gut-end); }
.rail.rail--end a:hover { background: var(--bg-2); }
.rail.rail--end a[aria-current] { background: var(--ink); }
.rail.rail--end a .tip { inset-inline-start: auto; inset-inline-end: calc(100% + 10px); }
.sp-pick__f input:focus { outline: 1px solid var(--ink-3); outline-offset: 0; border-color: var(--line-2); }
.sp-mark { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-block-end: 26px; text-decoration: none; }
.sp-mark .pf-mark { width: 28px; height: 28px; display: block; margin-block-end: 4px; }
.pf-mark--kilim .m0, .pf-mark--girih .m0 { fill: var(--bg); } .pf-mark--kilim .m1, .pf-mark--girih .m1 { fill: var(--red); } .pf-mark--kilim .m2, .pf-mark--girih .m2 { fill: var(--ink-2); }
.fl { display: inline-block; flex: none; width: 24px; height: 16px; object-fit: fill; border-radius: 0; outline: 1px solid var(--line-2); outline-offset: 0; vertical-align: -3px; image-rendering: auto; }
.fl.fl--lg { width: 36px; height: 24px; }
.fl.fl--sm, .fl--sm { width: 18px; height: 12px; border-radius: 0; vertical-align: -2px; }
.sp-mark b { font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.sp-mark small { font: 400 8.5px/1 var(--m); color: var(--ink-3); letter-spacing: .02em; padding: 2px 3px; border-radius: var(--r); background: color-mix(in srgb, var(--bg) 78%, transparent); }
.sp-mark--long small { font-size: 7px; letter-spacing: -.01em; white-space: nowrap; } /* a host longer than 13 characters (iranians.global) stays inside the 72 px spine */
.sp-nodes { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.sp-nodes::before { content: ""; position: absolute; inset-block: 13px; inset-inline-start: 50%; width: 1px; background: var(--line-2); transform: translateX(-.5px); }
.sp-fill { position: absolute; inset-block-start: 13px; inset-inline-start: 50%; width: 1.5px; background: linear-gradient(180deg, var(--p1), var(--p2) 40%, var(--p3) 75%, var(--p4)); transform: translateX(-.5px); transition: block-size .4s var(--ease); }
.sp-node { position: relative; appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 60px; color: var(--ink-3); }
.sp-node i { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-2); box-sizing: border-box; transition: transform .18s var(--ease); }
.sp-node .sp-fl { width: 30px; height: 20px; object-fit: fill; border-radius: 0; outline: 1px solid var(--line-2); display: block; }
.sp-node.has-fl i { width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.sp-node.has-fl.is-on .sp-fl { outline: 2px solid var(--red); outline-offset: 2px; }
.sp-node.has-fl.is-past .sp-fl { outline-color: var(--ink-3); }
.sp-node.has-fl.is-on::after { inset-block-start: -5px; inset-inline-end: 8px; }
.sp-node b { position: relative; z-index: 1; font: 500 9px/1.2 var(--m); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); max-width: 64px; text-align: center; overflow-wrap: anywhere; padding: 2px 4px; border-radius: var(--r); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sp-node:hover i { transform: scale(1.12); }
.sp-node.is-past i { border-color: var(--ink); color: var(--ink); }
.sp-node.is-past b { color: var(--ink-2); }
.sp-node.is-on i { border-color: var(--red); color: var(--ink); box-shadow: 0 0 0 3px var(--red-soft); }
.sp-node.is-on b { color: var(--ink); }
.sp-node.is-on::after { content: ""; position: absolute; z-index: 2; inset-block-start: -2px; inset-inline-end: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: sp-pulse 2.6s cubic-bezier(.2,0,0,1) infinite; }
.sp-node.is-open i { border-style: dashed; }
.sp-node:focus-visible i, .sp-areas:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-areas { position: relative; margin-block-start: auto; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); color: var(--ink); cursor: pointer; }
.sp-areas::before { content: ""; position: absolute; inset-block-start: -4px; inset-inline-end: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: sp-pulse 2.6s cubic-bezier(.2,0,0,1) infinite; }
@keyframes sp-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 45%, transparent); } 55% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--red) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.sp-pick { position: fixed; z-index: 40; width: 300px; max-height: min(440px, calc(100vh - 24px)); display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; }
.sp-pick[hidden] { display: none; }
.sp-pick__hd { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; }
.sp-pick__hd em { font: 500 11px/1 var(--m); font-style: normal; color: var(--ink-3); }
.sp-pick__f { display: block; padding: 0 10px 8px; }
.sp-pick__f input { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-1); color: var(--ink); font: inherit; font-size: 13px; }
.sp-pick__list { overflow: auto; padding: 0 6px 8px; }
.sp-pick__g { padding: 10px 8px 4px; }
.sp-pick__list button, .sp-pick__list a { width: 100%; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 34px; padding: 6px 8px; border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: start; cursor: pointer; text-decoration: none; }
.sp-pick__list button[hidden] { display: none; }
.sp-pick__list button span, .sp-pick__list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-pick__list button small { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.sp-pick__list button:hover, .sp-pick__list a:hover, .sp-pick__list [aria-selected="true"], .sp-pick__list [aria-current] { background: var(--bg-2); }
.sp-pick__list [aria-selected="true"] span { font-weight: 600; }
.sp-pick__list .sp-fl { width: 22px; height: 15px; object-fit: fill; border-radius: 0; outline: 1px solid var(--line-2); }
.sp-nofl { font: 500 8.5px/1 var(--m); color: var(--ink-3); text-align: center; }
.sp-pick__list--areas a { grid-template-columns: 22px 1fr; color: var(--ink-2); }
.sp-pick__list--areas a svg { width: 18px; height: 18px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phone: the instrument stays full screen, the panel becomes a sheet */
@media (max-width: 760px) {
  .bar { grid-template-columns: auto minmax(0,1fr) auto; height: 48px; inset-inline: 8px; inset-block-start: 8px; padding-inline: 8px; gap: 8px; }
  .cmd .kbd { display: none; }
  .brand b, .brand span, .tools .hide-s { display: none; }
  .rail { display: none; }
  .spine { inset-block: 62px auto; inset-inline: 8px; width: auto; height: 44px; padding: 0 6px; flex-direction: row; gap: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
  .bar.bar--spine { inset-inline-start: 8px; }
  .bar.bar--spine { grid-template-columns: auto minmax(0,1fr) auto; }
  .has-rail-end .insp { inset-inline-end: 8px; }
  .bar.bar--spine .brand { display: flex; }
  .sp-mark { display: none; }
  .sp-nodes { flex-direction: row; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .sp-nodes::before, .sp-fill { display: none; }
  .sp-node { flex-direction: row; gap: 6px; min-width: 0; padding: 4px 6px; }
  .sp-node i { width: 24px; height: 24px; }
  .sp-node b { max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; }
  .sp-node.is-on::after { inset-block-start: 2px; inset-inline-end: auto; inset-inline-start: 22px; }
  .sp-areas { margin: 0; width: 32px; height: 32px; flex: none; }
  :root { --top: 112px; --gut-end: 8px; --gut-end-panel: 8px; }
  .has-spine .layers { inset-block-start: var(--top); }
  .sheet { inset-inline: 8px !important; inset-block: auto 8px !important; width: auto !important; max-height: 52vh !important; }
  .time { display: none; }
  .layers, .has-rail-end .layers, .has-rail-end .app:has(#insp[hidden]) .layers { inset-inline: 8px; max-width: none; overflow-x: auto; scrollbar-width: none; }
  .layers { inset-block-start: 64px; }
  .layers::-webkit-scrollbar { display: none; }
  .attr { display: none; }
  .insp { inset-inline: 8px; width: auto; inset-block-start: auto; inset-block-end: 8px; max-height: 60vh; z-index: 13; }
  .stat b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.title--fl { display: flex; align-items: center; gap: 12px; }
.row .fl { width: 21px; height: 14px; }

/* Pastel touches (owner, 5 Nov): the 3D engine's pastel stroke only as hairlines and small accents, never as fills */
.panel.glass::before, .time.glass::before { content: ""; position: absolute; inset-inline: 18px; inset-block-start: 0; height: 1px; background: var(--pastel); opacity: .7; pointer-events: none; border-radius: var(--r); }
.layers button[aria-pressed="true"] i { background: var(--pastel); }
.pal__box::before { content: ""; display: block; height: 1px; background: var(--pastel); }

/* Shared pieces (consolidation, 5 Nov). The reader's context line (rule 13: "For Germany ..."), the suggestion button
   (a suggestion never applies without a click), the flag in palette results, figure lines that stay in Latin digits in
   right to left, and the pastel stops for SVG (<stop class="pst1">) and canvas (SPINE.pastel(ctx, x0, y0, x1, y1)). */
.ctx1 { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12px; min-width: 0; }
.ctx1[hidden] { display: none; }
.ctx1 > span { flex: 1; min-width: 0; }
.ctx1 .btn { height: 26px; font-size: 12px; padding-inline: 8px; }
.ctx1 .fl, .sugg .fl, .pal__list .fl, .tipcard .fl { width: 18px; height: 12px; vertical-align: -2px; }
.tipcard .fl { margin-inline-end: 6px; }
.sugg { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px dashed var(--line-2); border-radius: var(--r); background: transparent; color: var(--ink-2); font-size: 12px; text-align: start; cursor: pointer; }
.sugg:hover { color: var(--ink); border-color: var(--ink-3); }
[dir="rtl"] .ltr-fig, [dir="rtl"] .stat small, [dir="rtl"] .fig small, [dir="rtl"] .fig .src span { unicode-bidi: plaintext; }
.pst1 { stop-color: var(--p1); } .pst2 { stop-color: var(--p2); } .pst3 { stop-color: var(--p3); } .pst4 { stop-color: var(--p4); }
/* Without WebGL2 (map.js): the countries as a plain outline drawing and one quiet line; the panels keep working */
.v3-nomap { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); color: var(--ink-3); }
.v3-nomap svg { width: min(92%, 1400px); height: auto; fill: var(--bg-2); stroke: var(--line-2); stroke-width: .15; }
.v3-nomap p { position: absolute; inset-block-end: 132px; inset-inline: 0; margin: 0; text-align: center; font-size: 12px; }

/* Hex intelligence (map.js, hexintel.js; docs/design/HEX_INTELLIGENCE.md): the "Cells" segment inside the page's own
   layer toolbar (#layers) with the view's resolution tag, and the cell passport: a "Cell" tab of the page's inspector
   (#insp) when it has one, else a small floating card (a bottom sheet on phones). Ink and greys only; red is the
   selected cell on the map; the pastel only as the top hairline and the active segment. */
.v3-hxseg { display: inline-flex; align-items: center; gap: 2px; flex: none; margin-inline-start: 4px; padding-inline-start: 6px; border-inline-start: 1px solid var(--line-2); }
.v3-hxseg__k { padding-inline: 4px 2px; color: var(--ink-3); font: 500 10.5px/1 var(--f); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.v3-hxseg__res { padding-inline: 4px 6px; color: var(--ink-2); font: 500 11px/1 var(--m); font-style: normal; white-space: nowrap; cursor: help; }
.v3-hxseg__lg { padding-inline: 6px 8px; color: var(--ink-3); font: 500 11px/1 var(--m); font-style: normal; white-space: nowrap; cursor: help; }
.v3-hxst { display: inline-flex; align-items: center; gap: 4px; padding-inline-end: 8px; color: var(--ink-3); font: 500 10.5px/1 var(--f); white-space: nowrap; cursor: help; }
.v3-hxst i { display: inline-block; width: 10px; height: 10px; margin-inline-start: 4px; border: 1px solid var(--line-2); border-radius: var(--r); }
.v3-hxst__v { background: var(--ink-2); }
.v3-hxst__z { background: var(--bg-3); }
.v3-hxst__w { border-style: dotted !important; border-color: var(--ink-3) !important; }
.v3-pass { position: fixed; z-index: 45; width: 344px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink); }
.v3-pass[hidden] { display: none; }
.v3-pass::before { content: ""; position: absolute; inset-inline: 18px; inset-block-start: 0; height: 1px; background: var(--pastel); opacity: .7; pointer-events: none; }
.v3-pass__hd { position: relative; padding: 14px 52px 12px 16px; border-block-end: 1px solid var(--line); }
[dir="rtl"] .v3-pass__hd { padding: 14px 16px 12px 52px; }
.v3-pass__t { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font: 600 17px/1.25 var(--f); letter-spacing: -.01em; }
.v3-pass__t .fl { flex: none; width: 21px; height: 14px; }
.v3-pass__id { font: 500 11px/1 var(--m); color: var(--ink-3); }
.v3-pass__x { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; width: 30px; height: 30px; }
.v3-pass__bd { overflow-y: auto; padding: 4px 16px 14px; scrollbar-width: thin; }
.v3-pass__sec { padding-block: 10px 4px; border-block-end: 1px solid var(--line); }
.v3-pass__sec:last-of-type { border-block-end: 0; }
.v3-pass__sec h3 { margin: 0 0 6px; }
.v3-pass__r { display: grid; grid-template-columns: 112px 1fr; gap: 2px 10px; padding-block: 5px; }
.v3-pass__k { color: var(--ink-3); }
.v3-pass__v { min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.v3-pass__v b { color: var(--ink); font-weight: 600; }
.v3-pass__v small { color: var(--ink-3); }
.v3-pass__v .fl { width: 18px; height: 12px; vertical-align: -2px; margin-inline-end: 6px; }
.v3-pass__u { color: var(--ink-2) !important; font-weight: 500 !important; }
.v3-pass__s { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-3); font-size: 11px; line-height: 1.35; }
.v3-pass__lb { display: inline-flex; align-items: center; height: 18px; padding-inline: 6px; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink-2); font-size: 10.5px; white-space: nowrap; }
.v3-pass__n { margin: 2px 0 6px; color: var(--ink-3); font-size: 11.5px; line-height: 1.4; }
.v3-pass__f { margin: 10px 0 0; color: var(--ink-3); font-size: 10.5px; line-height: 1.4; }
.v3-pass__sim { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; }
.v3-pass__sim button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: transparent; color: var(--ink); font-size: 12px; text-align: start; cursor: pointer; }
.v3-pass__sim button:hover { border-color: var(--line-2); background: var(--bg-2); }
.v3-pass__sim button span { flex: 1; min-width: 0; }
.v3-pass__sim small { display: block; color: var(--ink-3); font-size: 11px; }
.v3-pass__sim em { font-style: normal; color: var(--ink-2); font-size: 11.5px; }
.v3-pass__sim .fl { flex: none; width: 18px; height: 12px; }
.v3-pass--sheet { inset-inline: 8px; inset-block-end: 8px; inset-block-start: auto; width: auto; max-height: 58vh; }
.v3-ptabs { flex: none; align-self: flex-start; width: 176px; margin: 12px 16px 0; }
.v3-ptabs button:disabled { color: var(--ink-3); cursor: default; }
.v3-pslot { display: none; position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; font-size: 12.5px; color: var(--ink); }
.v3-insp--cell > .v3-pslot { display: block; }
.v3-insp--cell > :not(.v3-ptabs):not(.v3-pslot) { display: none !important; }
.v3-pslot .v3-pass__hd { padding-block-start: 10px; }
.v3-pslot .v3-pass__bd { overflow: visible; }

/* The ground of a register page (credits.js, news.js ground()): full-bleed hairlines and one mark per record along
   the foot, under the floating panels. Ink only; red marks the selection. */
.gd { width: 100%; height: 100%; display: block; background: radial-gradient(120% 80% at 50% 30%, var(--bg-1), var(--bg) 70%); }
.gd .gd-h { stroke: var(--line); stroke-width: 1; }
.gd .gd-b { stroke: var(--line-2); stroke-width: 1; }
.gd .gd-m { fill: var(--ink-2); cursor: pointer; rx: 1px; }
.gd .gd-m--event, .gd .gd-m--software { fill: transparent; stroke: var(--ink-2); stroke-width: 1.2; }
.gd .gd-m--fonts, .gd .gd-m--assets { fill: var(--ink-3); }
.gd .gd-m.is-dim { opacity: .22; }
.gd .gd-m:hover { fill: var(--ink); stroke: var(--ink); }
.gd .gd-m.is-on { fill: var(--red); stroke: var(--red); opacity: 1; }
.gd .gd-l { font: 500 10.5px/1 var(--f); letter-spacing: .04em; text-transform: uppercase; fill: var(--ink-3); }
.gd .gd-n { font: 500 10.5px/1 var(--m); fill: var(--ink-2); }
@media (min-width: 761px) {
  .has-ground .cf, .has-ground .cins { inset-block-end: 150px; }
  .has-ground .cv { inset-block-end: 150px; }
  .has-ground .cv__body { border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--sh); }
}
/* Home's network panel (was inline in home.html) */
.hm-net { inset-block: 76px 132px; inset-inline-start: 76px; width: 380px; }
.hm-seg { margin-block-start: 14px; }
/* Right to left: Latin values, figures and counts keep their own order inside the mirrored layout */
[dir="rtl"] .fig b, [dir="rtl"] .fig small, [dir="rtl"] .fig .src span, [dir="rtl"] .line1, [dir="rtl"] .chip, [dir="rtl"] .time__now, [dir="rtl"] .time__now small, [dir="rtl"] .next b, [dir="rtl"] .next small { unicode-bidi: plaintext; }
[dir="rtl"] .fig b, [dir="rtl"] .fig small, [dir="rtl"] .line1, [dir="rtl"] .time__now, [dir="rtl"] .next b, [dir="rtl"] .next small { text-align: right; }

/* About this page (scripts/v3-seo.mjs, docs/site/SEO_V3.md): the page's summary, sourced facts and links to every
   page, in the HTML for every reader. Closed, it is the info button in the header bar; open, a panel under the bar. */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.about-pg > summary { list-style: none; cursor: pointer; }
.about-pg > summary::-webkit-details-marker { display: none; }
.about-pg[open] > summary { background: var(--bg-2); border-color: var(--line-2); }
.about-pg__bd { position: absolute; z-index: 25; inset-block-start: calc(100% + 8px); inset-inline-end: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 96px); overflow: auto; scrollbar-width: thin; padding: 16px 18px; background: var(--bg-1); color: var(--ink-2); font-size: 12.5px; line-height: 1.5; text-align: start; }
.about-pg__bd h2 { margin: 0 0 8px; font: 600 18px/1.25 var(--f); letter-spacing: -.01em; color: var(--ink); }
.about-pg__bd h3 { margin: 16px 0 6px; font: 500 11px/1.2 var(--f); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.about-pg__bd p { margin: 0 0 8px; }
.about-pg__bd b { color: var(--ink); font-weight: 600; }
.about-pg__bd ul { margin: 0; padding: 0; list-style: none; }
.about-pg__bd li { padding-block: 3px; border-block-end: 1px solid var(--line); }
.about-pg__bd small { color: var(--ink-3); font-size: 11px; }
.about-pg__bd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.about-pg__bd a[aria-current="page"] { color: var(--red); }
.about-pg__nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 12px; }
@media (min-width: 761px) { .about-pg__bd { inset-inline-end: 60px; } } /* clear of the platform rail */
@media (max-width: 760px) { .about-pg__bd { inset-inline-start: 0; width: auto; } }