/* $GROKISTAN: a live nation run by ten Grok Bots, seen over its 3D world.
   Midnight glass panels over the city, one warm gold accent (the nation's coin), coral only for what is
   live or breaking. Inter for reading, Space Grotesk for headings and numbers, a serif for quotes and print. */
:root {
  --bg: #070b14;
  --ink: rgba(11, 16, 28, 0.8); /* glass panels over the world */
  --ink-solid: #0b101c;
  --ink-2: #121a2b;
  --ink-3: #1a2338;
  --line: rgba(148, 163, 184, 0.14);
  --line-2: rgba(148, 163, 184, 0.28);
  --text: #edf1f9;
  --text-2: #c4ccdb;
  --muted: #8d99ae;
  --faint: #5f6b82;
  --gold: #f5b942;
  --gold-ink: #1d1404;
  --gold-soft: rgba(245, 185, 66, 0.14);
  --signal: #ff5c5c; /* live, breaking, alerts */
  --good: #34d399;
  --bad: #f87171;
  --info: #60a5fa;
  --violet: #a78bfa;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --cond: var(--display);
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 10px 30px rgba(2, 6, 16, 0.45);
  --dock: 440px;
  --rail: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.55 var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select { font: inherit; color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: var(--gold); color: var(--gold-ink); }
.kicker { font: 600 12px/1.2 var(--sans); letter-spacing: 0.02em; color: var(--gold); margin: 0; }
.small { font-size: 13px; color: var(--muted); }
.empty { color: var(--faint); padding: 18px 0; list-style: none; margin: 0; }
.num { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.up { color: var(--good); }
.down { color: var(--bad); }
.glass { background: var(--ink); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }

/* ---------- the world ---------- */
.world { position: fixed; inset: 0; }
.world-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; opacity: 0; transition: opacity 0.9s ease; }
body.world-on .world-canvas { opacity: 1; }
/* While the 3D world downloads: a slim bar in the middle of the open view. */
.loading { position: fixed; z-index: 45; left: calc((100vw - var(--dock) - 12px) / 2); top: 52%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; color: var(--text-2); font: 500 14px var(--sans); text-align: center; pointer-events: none; }
.loading[hidden] { display: none; }
.loading i { display: block; width: 220px; height: 4px; border-radius: 4px; background: rgba(148, 163, 184, 0.18); overflow: hidden; }
.loading b { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--gold); transition: width 0.3s ease; }
body.panel-off .loading { left: 50%; }
.cold:not([hidden]) ~ .loading { left: auto; right: 6vw; top: auto; bottom: 6vh; transform: none; }
.world-canvas:active { cursor: grabbing; }
.world-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 7, 14, 0.5) 0, rgba(4, 7, 14, 0) 160px), linear-gradient(0deg, rgba(4, 7, 14, 0.55) 0, rgba(4, 7, 14, 0) 190px); }

/* Leader name plates and speech, drawn over the 3D scene. */
.lbl { position: absolute; left: 0; top: 0; display: none; pointer-events: none; text-align: left; max-width: 280px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.lbl b { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--sans); background: rgba(11, 16, 28, 0.88); padding: 6px 9px 6px 8px; border-radius: 999px 0 0 999px; border: 1px solid var(--line); border-right: 0; }
.lbl b::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.lbl span { display: inline-block; font: 500 11.5px/1 var(--sans); color: var(--muted); background: rgba(11, 16, 28, 0.7); padding: 6px 10px 6px 4px; border-radius: 0 999px 999px 0; border: 1px solid var(--line); border-left: 0; }
.lbl q { display: block; quotes: none; margin-top: 5px; background: rgba(250, 248, 243, 0.97); color: #141821; font: italic 500 14px/1.38 var(--serif); padding: 8px 12px 9px; border-radius: 10px 10px 10px 2px; max-width: 280px; }
.lbl.speaking b { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.lbl.speaking b::before { background: var(--gold-ink); box-shadow: none; }
/* Region and town names over the land, like a printed map. */
.place { position: absolute; left: 0; top: 0; display: none; pointer-events: none; text-align: center; white-space: nowrap; }
.place b { display: block; }
.place span { display: block; font: 500 11px/1.5 var(--sans); color: rgba(237, 241, 249, 0.8); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.place.region b { font: 600 24px/1.1 var(--display); color: #f4f1ea; letter-spacing: 0.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9); }
.place.town b { font: 600 13px/1 var(--sans); background: rgba(11, 16, 28, 0.86); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); display: inline-block; }
.place.town.capital b { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.star { font: 600 13px var(--sans); border: 1px solid var(--line-2); padding: 7px 12px; border-radius: 999px; }
.star:hover { border-color: var(--gold); }
.star.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.ldr .fol { color: var(--gold); font-size: 13px; margin-left: 6px; }
.sortbar { display: flex; gap: 8px; align-items: center; padding: 14px 0 4px; font: 500 13px var(--sans); color: var(--muted); }
.sortbar select { background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; font: 500 13px var(--sans); }
.web { width: 100%; height: auto; display: block; margin-top: 8px; }
.region-row { padding: 12px 14px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; transition: border-color 0.15s, background 0.15s; }
.region-row:hover { border-color: var(--line-2); background: var(--ink-3); }
.region-row b { font: 600 17px/1.2 var(--display); }
.region-row em { font: 600 15px var(--display); font-style: normal; font-variant-numeric: tabular-nums; }
.region-row small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.backrow { display: grid; grid-template-columns: 1fr 70px auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.backrow .bbar { height: 6px; background: var(--ink-3); border-radius: 99px; position: relative; grid-column: 1 / -1; margin-top: -2px; overflow: hidden; }
.backrow .bbar i { position: absolute; inset: 0 auto 0 0; background: var(--c); border-radius: 99px; }
.backrow b { font: 600 15px var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.backrow .btns { display: flex; gap: 4px; }
.backrow .btns button { border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; font: 600 12px var(--sans); }
.backrow .btns button:hover { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.board { counter-reset: r; list-style: none; padding: 0; margin: 0; }
.board li { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.board li::before { counter-increment: r; content: counter(r); font: 600 13px var(--display); color: var(--gold); }
.board li b { font: 600 14px var(--display); font-variant-numeric: tabular-nums; }

/* ---------- masthead ---------- */
.mast { position: fixed; left: 16px; top: 14px; display: flex; align-items: center; gap: 12px; z-index: 5; max-width: calc(100vw - var(--dock) - 300px); padding: 8px 14px 8px 8px; background: var(--ink); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.bug { width: 40px; height: 40px; flex: none; border-radius: 10px; background: linear-gradient(140deg, #ffd166, var(--gold) 45%, #d9822b); color: var(--gold-ink); display: grid; place-items: center; font: 700 15px/1 var(--display); letter-spacing: 0.02em; }
.mast-text { min-width: 0; }
.wordmark { font: 700 19px/1.1 var(--display); letter-spacing: 0.01em; }
.nation { font: 500 13px/1.3 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.nation .sep { color: var(--faint); margin: 0 6px; }
.clock { display: flex; align-items: center; gap: 10px; padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--line); font: 600 14px/1.2 var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 0; }
.clock #timeLabel { color: var(--muted); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--signal); font: 700 11px/1 var(--sans); letter-spacing: 0.08em; background: rgba(255, 92, 92, 0.12); padding: 5px 8px; border-radius: 999px; }
.live[hidden] { display: none; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: pulse 1.4s infinite; }
.live.down { color: var(--muted); background: rgba(148, 163, 184, 0.12); }
.live.down i { background: var(--faint); animation: none; }
.paused { background: var(--gold); color: var(--gold-ink); padding: 4px 8px; border-radius: 999px; font: 700 11px/1 var(--sans); letter-spacing: 0.04em; }
@keyframes pulse { 50% { opacity: 0.25; } }

/* ---------- the nation at a glance (top left, under the masthead) ---------- */
.resbar { position: fixed; top: 84px; left: 16px; display: flex; gap: 0; max-width: calc(100vw - var(--dock) - 40px); overflow: hidden; z-index: 5; background: var(--ink); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.res { display: grid; grid-template-columns: 26px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 14px 8px 10px; border-right: 1px solid var(--line); min-width: 96px; cursor: help; transition: background 0.15s; }
.res:last-child { border-right: 0; }
.res:hover { background: rgba(255, 255, 255, 0.04); }
.res svg { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--gold); opacity: 0.9; }
.res span { font: 500 11.5px/1.2 var(--sans); color: var(--muted); white-space: nowrap; }
.res b { font: 600 17px/1.2 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.res small { font: 700 10px var(--sans); margin-left: 4px; vertical-align: 2px; }

.tools { position: fixed; top: 14px; right: calc(var(--dock) + 16px); display: flex; gap: 8px; z-index: 6; transition: right 0.3s ease; }
.tool { height: 42px; min-width: 42px; display: grid; place-items: center; background: var(--ink); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); transition: border-color 0.15s, background 0.15s; }
.tool:hover { border-color: var(--line-2); background: rgba(26, 35, 56, 0.9); }
.tool svg { width: 19px; height: 19px; }
.tool.wide { padding: 0 14px; display: flex; gap: 8px; align-items: center; font: 600 13px/1 var(--sans); }
.tool.wide i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.tool.wide i.on { background: var(--good); box-shadow: 0 0 10px var(--good); }
.tool.help { font: 700 17px/1 var(--display); }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: 50px; width: 250px; background: var(--ink-solid); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.menu[hidden] { display: none; }
.menu .kicker { margin-top: 4px; }
.menu button { text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font: 500 14px var(--sans); }
.menu button:hover { border-color: var(--line-2); }
.menu button.on { border-color: var(--gold); background: var(--gold-soft); }
body.panel-off .tools { right: 16px; }
body.panel-off .resbar { max-width: calc(100vw - 40px); }
body.panel-off .dock { transform: translateX(calc(100% + 20px)); }
body.panel-off .mast { max-width: calc(100vw - 40px); }
body.panel-off .minimap { right: 16px; }
body.panel-off .roster { max-width: calc(100vw - 240px); }

/* ---------- dock: section tabs, sub-tabs and the pane ---------- */
.dock { position: fixed; top: 12px; right: 12px; bottom: 46px; width: calc(var(--dock) - 12px); display: flex; flex-direction: column; z-index: 7; background: rgba(9, 13, 24, 0.9); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; transition: transform 0.3s ease; }
.rail { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 8px 8px 0; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 10px; color: var(--muted); font: 600 12px/1 var(--sans); border-radius: 10px 10px 0 0; transition: color 0.15s, background 0.15s; white-space: nowrap; }
.rail button svg { width: 20px; height: 20px; }
.rail button:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.rail button.on { color: var(--text); }
.rail button.on::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }
.rail button.on svg { color: var(--gold); }
.rail sup { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 18px; height: 18px; border-radius: 99px; background: var(--signal); color: #fff; font: 700 10.5px/18px var(--sans); text-align: center; padding: 0 5px; }
.pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pane-head { padding: 16px 20px 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pane-head h2 { margin: 0; font: 700 24px/1.1 var(--display); letter-spacing: -0.01em; }
.pane-head span { font: 500 13px var(--sans); color: var(--muted); }
.subtabs { display: flex; gap: 6px; padding: 6px 20px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs[hidden] { display: none; }
.subtabs button { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); font: 500 13px/1 var(--sans); white-space: nowrap; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.subtabs button:hover { border-color: var(--line-2); color: var(--text); }
.subtabs button.on { background: var(--text); color: #0b101c; border-color: var(--text); font-weight: 600; }
.subtabs sup { margin-left: 5px; color: var(--signal); font-weight: 700; font-size: 11px; vertical-align: 1px; }
.subtabs button.on sup { color: #c42f2f; }
.pane-body { flex: 1; overflow-y: auto; padding: 0 20px 28px; scrollbar-width: thin; scrollbar-color: #2a3550 transparent; }
.pane-body h3 { font: 600 13px/1.2 var(--sans); color: var(--muted); margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; }
.pane-body h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* filters */
.filters { display: flex; gap: 6px; position: sticky; top: 0; z-index: 2; background: linear-gradient(rgba(9, 13, 24, 0.98) 80%, rgba(9, 13, 24, 0)); padding: 12px 20px 12px; margin: 0 -20px 2px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { font: 500 13px/1 var(--sans); color: var(--text-2); padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
.filters button:hover { border-color: var(--line-2); color: var(--text); }
.filters button.on { background: var(--gold-soft); color: var(--gold); border-color: rgba(245, 185, 66, 0.5); font-weight: 600; }

/* the feed */
.feed { list-style: none; margin: 0; padding: 0; }
.fi { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 52px 1fr; gap: 0 12px; animation: fiIn 0.35s ease; }
@keyframes fiIn { from { opacity: 0; transform: translateY(-4px); } }
.fi time { font: 500 12px/1.35 var(--display); color: var(--faint); font-variant-numeric: tabular-nums; white-space: pre-line; }
.fi .cat { display: inline-block; font: 600 11.5px/1 var(--sans); color: var(--muted); background: rgba(148, 163, 184, 0.12); padding: 4px 8px; border-radius: 999px; margin-right: 4px; }
.fi .cat.g-politics { color: var(--gold); background: var(--gold-soft); }
.fi .cat.g-economy { color: var(--good); background: rgba(52, 211, 153, 0.12); }
.fi .cat.g-street { color: var(--info); background: rgba(96, 165, 250, 0.13); }
.fi .cat.g-speech { color: var(--violet); background: rgba(167, 139, 250, 0.14); }
.fi .cat.hot { color: #fff; background: var(--signal); }
.fi p { margin: 6px 0 0; font-size: 14.5px; color: var(--text-2); }
.fi.big p { font: 600 16px/1.42 var(--sans); color: var(--text); }
.fi.say blockquote { margin: 6px 0 0; font: italic 500 16.5px/1.45 var(--serif); color: var(--text); border-left: 3px solid var(--c); padding-left: 12px; }
.fi.voice blockquote { margin: 6px 0 0; font: italic 500 15px/1.45 var(--serif); color: var(--text-2); }
.fi.voice cite { display: block; font: 500 12.5px var(--sans); color: var(--muted); margin-top: 4px; font-style: normal; }
.who { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px/1.6 var(--sans); color: var(--text); }
.who::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); }
button.who:hover { color: var(--gold); }
.ref { font: 600 11.5px/1 var(--display); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; margin-left: 6px; }
.ref:hover { color: var(--text); border-color: var(--gold); }

/* leader dossiers */
.ldr { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 16px; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.ldr:hover { border-color: var(--line-2); transform: translateY(-1px); }
.mono { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)); display: grid; place-items: center; position: relative; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.mono b { font: 700 22px/1 var(--display); color: rgba(0, 0, 0, 0.72); }
.mono em { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--ink-solid); border: 1px solid var(--line-2); font: 600 10px/16px var(--display); font-style: normal; color: var(--text-2); text-align: center; padding: 0 4px; }
.mono.off { filter: grayscale(1) brightness(0.6); }
.ldr-name { font: 600 18px/1.2 var(--display); }
.ldr-role { font: 500 13px/1.4 var(--sans); color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tag { font: 600 11.5px/1 var(--sans); padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); }
.tag.office { background: var(--gold-soft); color: var(--gold); border-color: rgba(245, 185, 66, 0.45); }
.tag.alert { background: var(--signal); border-color: var(--signal); color: #fff; }
.tag.fac { border-color: var(--c); color: var(--text); }
.apbar { display: flex; height: 7px; margin-top: 12px; background: var(--ink-3); border-radius: 99px; overflow: hidden; }
.apbar i { display: block; height: 100%; }
.apbar .yes { background: var(--good); }
.apbar .no { background: var(--bad); }
.aplabel { display: flex; justify-content: space-between; gap: 8px; font: 500 12.5px var(--sans); color: var(--muted); margin-top: 6px; }
.aplabel b { color: var(--text); font-family: var(--display); font-weight: 600; }
.thought { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); font: italic 400 14px/1.5 var(--serif); color: var(--text-2); }
.thought::before { content: 'Thinking'; display: block; font: 600 11.5px/1.6 var(--sans); font-style: normal; color: var(--faint); }
.seen { font: 500 12px var(--sans); color: var(--faint); margin-top: 8px; }

/* bars, stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.stat { padding: 11px 12px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); }
.stat span { display: block; font: 500 12px/1.3 var(--sans); color: var(--muted); }
.stat b { font: 600 21px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.stat small { display: block; font: 500 12px var(--sans); color: var(--faint); }
.hbar { display: grid; grid-template-columns: 128px 1fr 52px; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.hbar > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.hbar i { height: 8px; background: var(--ink-3); border-radius: 99px; position: relative; overflow: hidden; }
.hbar i em { position: absolute; inset: 0 auto 0 0; background: var(--c, var(--gold)); border-radius: 99px; }
.hbar b { text-align: right; font: 600 14px var(--display); font-variant-numeric: tabular-nums; }
.split { display: flex; height: 24px; margin: 8px 0 2px; font: 600 11.5px/24px var(--sans); overflow: hidden; border-radius: 99px; }
.split i { display: block; font-style: normal; padding-left: 8px; white-space: nowrap; overflow: hidden; color: rgba(0, 0, 0, 0.78); }
.chart { width: 100%; height: 120px; display: block; margin-top: 4px; }
.lg { display: inline-block; width: 12px; height: 3px; border-radius: 3px; background: var(--c); vertical-align: middle; margin: 0 4px 0 8px; }

/* council */
.prop { padding: 16px; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); cursor: pointer; transition: border-color 0.15s; }
.prop:hover { border-color: var(--line-2); }
.prop .row1 { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.prop .kind { font: 600 12px var(--sans); color: var(--gold); background: var(--gold-soft); padding: 4px 9px; border-radius: 999px; }
.prop .kind.amendment { color: var(--violet); background: rgba(167, 139, 250, 0.14); }
.prop .clock2 { font: 500 12.5px var(--sans); color: var(--muted); }
.prop h4 { margin: 10px 0 4px; font: 600 18px/1.3 var(--display); }
.prop .by { font-size: 13px; color: var(--muted); }
.fx { margin: 10px 0; padding: 9px 12px; background: rgba(255, 255, 255, 0.035); border-radius: 10px; font-size: 13.5px; color: var(--text-2); }
.votes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.vd { width: 30px; height: 30px; display: grid; place-items: center; font: 700 12px/1 var(--display); border: 1px solid var(--line-2); border-radius: 50%; color: var(--muted); position: relative; box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--c) 70%, transparent); }
.vd.yes { background: var(--good); color: #052016; border-color: var(--good); }
.vd.no { background: var(--bad); color: #2b0707; border-color: var(--bad); }
.vd.abstain { background: #5d6779; color: #0b101c; border-color: #5d6779; }
.tally { font: 500 12.5px var(--sans); color: var(--muted); margin-top: 8px; }
.cpoll { margin-top: 8px; font: 500 12.5px var(--sans); color: var(--muted); }
.cpoll .split { height: 18px; line-height: 18px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.list li small { display: block; color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.list li:hover b { color: var(--gold); }
.dim { opacity: 0.55; }
.st { font: 600 11.5px var(--sans); margin-right: 8px; color: var(--muted); padding: 3px 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.12); }
.st.enacted, .st.in_force, .st.decided { color: var(--good); background: rgba(52, 211, 153, 0.12); }
.st.failed, .st.vetoed, .st.revoked, .st.struck_down, .st.dismissed, .st.abolished { color: var(--bad); background: rgba(248, 113, 113, 0.12); }
.st.voting, .st.open, .st.awaiting_signature { color: var(--gold); background: var(--gold-soft); }

/* law: the constitution as a printed charter */
.charter { margin-top: 18px; padding: 20px 20px 8px; background: #f3eee3; color: #1b1914; border-radius: var(--r); }
.charter .kicker { color: #9a5b12; }
.charter h4 { margin: 6px 0 8px; font: 700 26px/1.1 var(--serif); }
.charter .pre { font: italic 500 15px/1.5 var(--serif); color: #3c372e; margin: 0 0 8px; }
.art { border-top: 1px solid #d6cdbb; padding: 10px 0; }
.art b { font: 600 13px var(--sans); }
.art p { margin: 3px 0 0; font: 400 15px/1.55 var(--serif); }
.art small { color: #6d6556; font-size: 12px; }
.rules { display: grid; grid-template-columns: auto 1fr; margin: 0; border-top: 1px solid var(--line); }
.rules dt, .rules dd { padding: 9px 0; border-bottom: 1px solid var(--line); margin: 0; font-size: 14px; }
.rules dt { color: var(--muted); padding-right: 16px; font: 500 13px/1.8 var(--sans); }

/* press: the nation's paper */
.paper { margin-top: 16px; background: #f4efe4; color: #1b1914; padding: 18px 18px 6px; border-radius: var(--r); }
.masthead2 { text-align: center; font: 700 28px/1 var(--serif); border-bottom: 3px double #1b1914; padding-bottom: 8px; margin-bottom: 6px; }
.masthead2 + .kicker { text-align: center; color: #6b6253; margin-bottom: 10px; }
.news { padding: 10px 0 12px; border-bottom: 1px solid #d6cdbb; cursor: pointer; }
.news .kicker { color: #9a5b12; }
.news h4 { margin: 4px 0; font: 700 19px/1.22 var(--serif); }
.news.lead h4 { font-size: 26px; }
.news p { margin: 4px 0; font: 400 14.5px/1.55 var(--serif); color: #2c2822; }
.news .by { font: italic 13px var(--serif); color: #5f574a; }
.censored { background: #1b1914; color: #f4efe4; padding: 4px 9px; font: 700 12px var(--sans); display: inline-block; border-radius: 6px; }

/* people */
.voice { padding: 12px 0; border-bottom: 1px solid var(--line); }
.voice blockquote { margin: 0; font: italic 500 16px/1.45 var(--serif); }
.voice cite { display: block; margin-top: 5px; font: 500 12.5px var(--sans); color: var(--muted); font-style: normal; }
.search { width: 100%; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin: 8px 0 4px; outline: none; }
.search:focus { border-color: var(--gold); }
.cit { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.cit:hover b { color: var(--gold); }
.cit span { color: var(--muted); font-size: 13px; }
.cit em { font: 600 13px var(--display); font-style: normal; font-variant-numeric: tabular-nums; }

/* elections and court */
.block { padding: 16px; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); }
.block h4 { margin: 0 0 4px; font: 600 18px/1.3 var(--display); }
.cand { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.cand p { grid-column: 1 / -1; margin: 0; font: italic 14px/1.5 var(--serif); color: var(--text-2); }
.cand b { font: 600 18px var(--display); }
.q { font: italic 15px/1.5 var(--serif); color: var(--text-2); margin: 6px 0; }
.ruling { margin-top: 8px; padding: 9px 12px; border-left: 3px solid var(--violet); border-radius: 0 10px 10px 0; background: rgba(167, 139, 250, 0.07); font-size: 14px; }

/* vote: the audience takes part */
.explain { margin: 16px 0 6px; padding: 14px 16px; border: 1px solid rgba(245, 185, 66, 0.35); border-radius: var(--r); background: var(--gold-soft); font-size: 14px; color: var(--text-2); }
.explain b { color: var(--text); }
.refc { padding: 16px; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); }
.refc h4 { margin: 8px 0 12px; font: 600 18px/1.3 var(--display); }
.opt { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 10px; margin-bottom: 7px; text-align: left; overflow: hidden; background: var(--ink-3); transition: border-color 0.15s; }
.opt i { position: absolute; inset: 0 auto 0 0; background: rgba(245, 185, 66, 0.12); transition: width 0.5s ease; }
.opt span, .opt b { position: relative; }
.opt b { font: 600 13px var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.opt:hover:not(:disabled) { border-color: var(--gold); }
.opt.mine { border-color: var(--gold); }
.opt.mine i { background: rgba(245, 185, 66, 0.28); }
.opt.win span { font-weight: 600; }
.opt:disabled { cursor: default; }

/* wire: private messages that leaked */
.wire { padding: 12px 0; border-bottom: 1px dashed var(--line-2); }
.wire p { margin: 6px 0 0; font: 400 15px/1.5 var(--serif); color: var(--text-2); }
.lock { font: 600 12px var(--sans); color: var(--gold); }

/* ---------- the ten leaders (bottom left) ---------- */
.roster { position: fixed; left: 16px; bottom: 56px; display: flex; gap: 6px; z-index: 5; max-width: calc(100vw - var(--dock) - 240px); overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.roster::-webkit-scrollbar { display: none; }
.rost { width: 124px; flex: none; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center; padding: 8px 10px 8px 8px; background: var(--ink); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--r); text-align: left; position: relative; transition: transform 0.15s, border-color 0.15s; }
.rost:hover { border-color: var(--line-2); transform: translateY(-3px); }
.rost .mono { grid-row: 1 / 4; width: 34px; height: 34px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.rost .mono b { font-size: 15px; }
.rost .mono em { display: none; }
.rost .rn { display: block; font: 600 13px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rost .rr { display: block; font: 500 11px/1.25 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rost .ra { display: flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--display); color: var(--text-2); font-variant-numeric: tabular-nums; margin-top: 4px; }
.rost .ra i { flex: 1; height: 4px; border-radius: 99px; background: var(--ink-3); overflow: hidden; position: relative; }
.rost .ra i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--a, 0%); background: var(--good); border-radius: 99px; }
.rost .dot { position: absolute; top: 6px; left: 32px; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); border: 2px solid var(--ink-solid); }
.rost .dot.on { background: var(--good); }
.rost.head { border-color: rgba(245, 185, 66, 0.55); }
.rost.head .rn::after { content: ' ♛'; color: var(--gold); }

.minimap { position: fixed; right: calc(var(--dock) + 16px); bottom: 56px; width: 180px; height: 180px; z-index: 5; border: 1px solid var(--line-2); border-radius: var(--r); background: #0c1a22; cursor: crosshair; transition: right 0.3s ease; box-shadow: var(--shadow); }

/* ---------- breaking news and the ticker ---------- */
.lower { position: fixed; left: 16px; bottom: 136px; z-index: 6; display: grid; grid-template-columns: auto 1fr; max-width: min(720px, calc(100vw - var(--dock) - 60px)); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); animation: lowerIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lower[hidden] { display: none; }
.lower-tag { grid-row: 1 / 3; background: var(--signal); color: #fff; font: 700 13px/1.1 var(--sans); padding: 12px 14px; display: grid; place-items: center; text-align: center; max-width: 120px; }
.lower-text { background: rgba(250, 248, 243, 0.97); color: #121722; font: 600 17px/1.35 var(--sans); padding: 11px 16px 10px; }
.lower-time { background: var(--ink-solid); color: var(--muted); font: 500 12px/1 var(--sans); padding: 7px 16px; }
@keyframes lowerIn { from { transform: translateY(12px); opacity: 0; } }
.ticker { position: fixed; left: 0; right: 0; bottom: 0; height: 36px; z-index: 8; display: flex; background: rgba(6, 9, 17, 0.94); border-top: 1px solid var(--line); }
.ticker-tag { display: flex; align-items: center; gap: 7px; background: var(--gold); color: var(--gold-ink); font: 700 12.5px/36px var(--sans); padding: 0 14px; flex: none; }
.ticker-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-ink); animation: pulse 1.4s infinite; }
.tickwrap { flex: 1; overflow: hidden; }
.track { display: inline-flex; gap: 24px; white-space: nowrap; padding-left: 24px; animation: tick var(--dur, 120s) linear infinite; font: 500 14px/36px var(--sans); color: var(--text-2); }
.track .sep { color: var(--gold); }
.tickwrap:hover .track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

.tip { position: fixed; z-index: 60; pointer-events: none; max-width: 280px; background: var(--ink-solid); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 11px; font: 500 13px/1.45 var(--sans); color: var(--text); }
.tip b { display: block; font: 600 13px var(--display); color: var(--gold); margin-bottom: 2px; }
.toast { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 70; background: var(--text); color: #0b101c; padding: 10px 18px; border-radius: 999px; font: 600 14px var(--sans); box-shadow: var(--shadow); }

/* ---------- welcome ---------- */
.cold { position: fixed; inset: 0; z-index: 40; background: linear-gradient(100deg, rgba(5, 8, 16, 0.96) 0, rgba(5, 8, 16, 0.82) 50%, rgba(5, 8, 16, 0.35) 100%); display: flex; align-items: center; padding: 5vw 6vw; overflow-y: auto; }
.cold[hidden] { display: none; }
.cold-inner { max-width: 680px; }
.cold .kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--signal); font-weight: 700; }
.cold .kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); animation: pulse 1.4s infinite; }
.cold h1 { font: 700 clamp(36px, 5vw, 60px)/1.04 var(--display); margin: 14px 0 10px; letter-spacing: -0.02em; }
.cold h1 em { font-style: normal; color: var(--gold); }
.cold .dek { font: 400 clamp(18px, 2vw, 22px)/1.45 var(--sans); color: var(--text-2); margin: 0; }
.cold .rule { display: none; }
.cold p { color: var(--text-2); font-size: 16px; line-height: 1.6; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0 8px; }
.how div { padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(18, 26, 43, 0.75); }
.how b { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--display); color: var(--text); }
.how b i { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font: 700 12px/1 var(--display); font-style: normal; }
.how span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cold-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.cold button#heroGo { background: var(--gold); color: var(--gold-ink); font: 700 16px var(--sans); padding: 14px 26px; border-radius: 999px; box-shadow: 0 8px 24px rgba(245, 185, 66, 0.25); transition: transform 0.15s, box-shadow 0.15s; }
.cold button#heroGo:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(245, 185, 66, 0.35); }
.cold .link { color: var(--text-2); font: 500 15px var(--sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
.cold .link:hover { color: var(--text); text-decoration-color: var(--gold); }

/* ---------- dossier sheets ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(3, 6, 12, 0.55); backdrop-filter: blur(4px); display: flex; justify-content: flex-end; }
.modal[hidden] { display: none; }
.sheet { position: relative; width: min(720px, 100%); height: 100%; overflow-y: auto; background: var(--ink-solid); border-left: 1px solid var(--line-2); padding: 28px 32px 48px; animation: sheetIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sheetIn { from { transform: translateX(40px); opacity: 0; } }
.x { position: sticky; top: 0; float: right; font: 600 13px var(--sans); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; background: var(--ink-2); z-index: 2; }
.x:hover { border-color: var(--gold); }
.sheet h1 { font: 700 36px/1.1 var(--display); margin: 8px 0 8px; letter-spacing: -0.01em; }
.sheet h2 { font: 600 13px/1.2 var(--sans); color: var(--muted); margin: 28px 0 12px; display: flex; gap: 10px; align-items: center; }
.sheet h2::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sheet .dek { font: italic 500 17px/1.45 var(--serif); color: var(--text-2); margin: 0; }
.sheet p { line-height: 1.6; }
.sheet .body p { font: 400 17px/1.65 var(--serif); color: #e3e7ef; }
.profile-head { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.profile-head .mono { width: 96px; height: 96px; }
.profile-head .mono b { font-size: 40px; }
.thoughts { list-style: none; padding: 0; margin: 0; }
.thoughts li { padding: 11px 14px; border-left: 3px solid var(--c); border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, 0.03); margin-bottom: 8px; font: italic 15px/1.5 var(--serif); color: var(--text-2); }
.thoughts time { display: block; font: 500 12px var(--sans); font-style: normal; color: var(--faint); }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line-2); }
.timeline li { padding: 6px 0 6px 16px; position: relative; font-size: 14.5px; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink-solid); }
.timeline time { font: 500 12px var(--display); color: var(--muted); margin-right: 8px; }
.compass { width: 160px; height: 160px; }
.loading { color: var(--muted); padding: 30px 0; font: 500 14px var(--sans); }

/* the "what am I looking at?" guide */
.guide h1 { margin-bottom: 4px; }
.guide .lead { color: var(--text-2); font-size: 16px; margin: 0 0 6px; }
.guide dl { display: grid; grid-template-columns: 34px 1fr; gap: 12px 12px; margin: 0; }
.guide dt { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); }
.guide dt svg { width: 19px; height: 19px; }
.guide dd { margin: 0; font-size: 14.5px; color: var(--text-2); }
.guide dd b { color: var(--text); font-family: var(--display); font-weight: 600; }
.keys { display: flex; flex-wrap: wrap; gap: 8px; }
.keys span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; color: var(--text-2); }
.keys kbd { font: 600 12px var(--display); padding: 1px 6px; border-radius: 5px; background: var(--ink-3); border: 1px solid var(--line-2); color: var(--text); }
body.stream .dock, body.stream .tools, body.stream .cold, body.stream .minimap { display: none !important; }

/* ---------- smaller screens ---------- */
@media (max-width: 1280px) {
  :root { --dock: 410px; }
  /* the tool buttons stack down the right edge so they never run into the masthead */
  .mast, .resbar { max-width: calc(100vw - var(--dock) - 92px); }
  .tools { flex-direction: column; }
  .tool.wide { width: 42px; padding: 0; flex-direction: column; justify-content: center; gap: 4px; font-size: 11px; }
  .tool.wide .pill-text { display: none; }
  .menu { top: 0; right: 50px; }
  .res { min-width: 84px; padding: 7px 12px 7px 9px; }
  .res:nth-child(n + 6) { display: none; }
  .rost { width: 112px; }
}
@media (max-width: 1180px) {
  .res:nth-child(n + 5) { display: none; }
}
@media (max-width: 1020px) {
  .res:nth-child(n + 5) { display: none; }
  .minimap { display: none; }
  .roster { max-width: calc(100vw - var(--dock) - 32px); }
  .how { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --dock: 100vw; }
  html, body { overflow: hidden; }
  .mast { left: 8px; top: 8px; right: 8px; max-width: none; padding: 6px 10px 6px 6px; gap: 10px; }
  .bug { width: 32px; height: 32px; font-size: 13px; }
  .wordmark { font-size: 15px; }
  .nation { font-size: 12px; }
  .clock { padding-left: 10px; gap: 6px; font-size: 13px; }
  .clock #timeLabel { display: none; }
  .resbar { top: 62px; left: 8px; right: 8px; max-width: none; overflow-x: auto; scrollbar-width: none; }
  .res { min-width: 0; flex: 1; padding: 6px 8px; grid-template-columns: 1fr; }
  .res svg { display: none; }
  .res:nth-child(n + 4) { display: none; }
  .res b { font-size: 15px; }
  .tools { top: auto; bottom: calc(48vh + 44px); right: 8px; }
  .tool.wide { display: none; }
  .menu { top: auto; bottom: 0; right: 50px; }
  .dock { top: auto; left: 0; right: 0; width: 100%; height: 48vh; bottom: 36px; border-radius: 16px 16px 0 0; border-bottom: 0; }
  .rail { padding: 6px 4px 0; gap: 0; }
  .rail button { font-size: 11.5px; padding: 8px 2px 10px; }
  .pane-head { padding: 10px 16px 4px; }
  .pane-head h2 { font-size: 19px; }
  .subtabs { padding: 4px 16px 8px; }
  .pane-body { padding: 0 16px 20px; }
  .filters { margin: 0 -16px 2px; padding: 10px 16px; }
  .roster { left: 8px; bottom: calc(48vh + 44px); max-width: calc(100vw - 70px); }
  .rost { width: 54px; grid-template-columns: 1fr; padding: 6px; justify-items: center; }
  .rost .mono { grid-row: auto; }
  .rost .rr, .rost .ra { display: none; }
  .rost .rn { font-size: 11px; max-width: 46px; text-align: center; }
  .rost .dot { left: auto; right: 6px; }
  .lower { left: 8px; right: 8px; bottom: calc(48vh + 120px); max-width: none; }
  .lower-text { font-size: 14.5px; }
  body.panel-off .dock { transform: translateY(100%); }
  body.panel-off .roster { bottom: 46px; }
  body.panel-off .tools { bottom: 46px; }
  .sheet { padding: 20px 18px 40px; }
  .sheet h1 { font-size: 28px; }
  .cold { background: rgba(5, 8, 16, 0.92); padding: 24px 20px; align-items: flex-start; }
  .loading { left: 50%; top: 26%; }
}