/*! Open Historia — the landing page's game interface © 2026 Nicholas Krol, AGPL-3.0-or-later (see LICENSE). */
/* The game's own HUD over the story's map. Every value here is the game's:
   src/styles.css's --oh-hud-* tokens and the inline styles of main.jsx,
   settings.jsx, libraryBar.jsx, time.jsx, chat.jsx/hudDock.js, other.jsx,
   advisor.jsx, countryPanel.jsx/stats.jsx and the War Room (warRoom.jsx,
   warRoomTheme.js, warRoomRail.jsx), moved from `position: fixed` on the
   window to `position: absolute` on the story's stage, and down by the
   height of the site's own header. */

.gx, .chapter {
  --oh-hud-bg: rgba(18, 18, 20, 0.52);
  --oh-hud-bg-strong: rgba(17, 17, 19, 0.66);
  --oh-hud-bg-soft: rgba(34, 34, 38, 0.46);
  --oh-hud-border: rgba(236, 236, 238, 0.17);
  --oh-hud-border-strong: rgba(240, 240, 242, 0.29);
  --oh-hud-shadow: 0 20px 56px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --oh-hud-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --oh-hud-blur: blur(14px) saturate(1.18);
  --gx-top: 3.25rem;          /* the site's header */
  --gx-drawer: 320px;         /* --oh-advisor-width */
  --steel-plate: #2c2f34;
  --steel-seam: #0a0b0d;
  --bone: #ece7da;
  --bone-soft: rgba(236, 231, 218, 0.64);
  --bone-faint: rgba(236, 231, 218, 0.42);
  --brass: #c9a54c;
  --amber: #e9b949;
  --red: #b3212a;
  --red-bright: #d2353d;
  --red-dark: #641318;
  --olive: #373e26;
  --olive-line: #606a3f;
  --stencil: "Bahnschrift Condensed", "Bahnschrift", "DIN Condensed", "DIN Alternate", "Oswald", "Arial Narrow", sans-serif;
}

/* ---- the map and what is drawn over it ---- */
.stage-map { position: absolute; inset: 0; }
.stage-map .maplibregl-ctrl-bottom-right { bottom: 0.5rem; right: calc(var(--gx-drawer) + 5rem); }
.stage-canvas { pointer-events: none; z-index: 1; }

/* ---- the HUD's layer ---- */
.gx { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: sans-serif; color: white; }
.gx * { box-sizing: border-box; }
.gx > * { pointer-events: auto; }
.gx [hidden] { display: none !important; }
.gx button { font-family: inherit; }
.chronicle:not(.live) .gx { visibility: hidden; }
/* baseStyle (main.jsx, settings.jsx, other.jsx) */
.gx-base { position: absolute; background-color: var(--oh-hud-bg); backdrop-filter: var(--oh-hud-blur); -webkit-backdrop-filter: var(--oh-hud-blur); display: flex; align-items: center; justify-content: center; color: white; font-family: sans-serif; border-radius: 14px; border: 1px solid var(--oh-hud-border); box-shadow: var(--oh-hud-shadow-soft); }
.gx-surface { background: rgba(34, 34, 37, 0.53); border: 1px solid var(--oh-hud-border); box-shadow: var(--oh-hud-shadow-soft); backdrop-filter: var(--oh-hud-blur); -webkit-backdrop-filter: var(--oh-hud-blur); }

/* settings.jsx SettingsButton */
.gx-menu-btn { top: calc(var(--gx-top) + 0.5rem); left: 0.5rem; width: 2.85rem; height: 2.85rem; cursor: pointer; font-size: 1.2rem; font-weight: 800; border-radius: 12px; background: rgba(35, 35, 39, 0.53); z-index: 9; }
.gx-menu { position: absolute; top: calc(var(--gx-top) + 3.8rem); left: 0.5rem; display: grid; min-width: 14rem; padding: 0.4rem; border-radius: 14px; background-color: var(--oh-hud-bg-strong); backdrop-filter: var(--oh-hud-blur); border: 1px solid var(--oh-hud-border); box-shadow: var(--oh-hud-shadow); z-index: 9; }
.gx-menu a { padding: 0.6rem 0.75rem; border-radius: 10px; color: rgba(246, 246, 248, 0.92); text-decoration: none; font-size: 0.82rem; font-weight: 600; }
.gx-menu a:hover { background: rgba(255, 255, 255, 0.08); }

/* libraryBar.jsx LibraryTopBar */
.gx-topbar { position: absolute; top: calc(var(--gx-top) + 0.5rem); left: 3.8rem; display: flex; align-items: center; gap: 0.45rem; z-index: 6; }
.gx-pill { align-items: center; border-radius: 12px; color: rgba(255, 255, 255, 0.72); display: flex; gap: 0.55rem; height: 2.85rem; max-width: min(34rem, max(0rem, calc(100vw - 44rem))); overflow: hidden; padding: 0 0.75rem; }
.gx-pill img { border-radius: 7px; flex-shrink: 0; height: 1.85rem; width: 1.85rem; }
.gx-pill-text { min-width: 0; line-height: 1.15; }
.gx-pill-text b { display: block; color: rgba(255, 255, 255, 0.94); font-size: 0.72rem; font-weight: 850; }
.gx-pill-text small { display: block; color: rgba(226, 226, 229, 0.42); font-size: 0.6rem; margin-top: 0.12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-exit { align-items: center; border-radius: 12px; color: rgba(246, 246, 248, 0.92); cursor: pointer; display: inline-flex; font-size: 0.68rem; font-weight: 600; gap: 0.4rem; justify-content: center; height: 2.85rem; min-height: 2.85rem; padding: 0 0.85rem; text-decoration: none; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }

/* time.jsx DateWidget: rides beside the right drawer */
.gx-date { top: calc(var(--gx-top) + 0.5rem); right: 0.5rem; height: 3.5rem; width: auto; min-width: min(18rem, calc(100vw - 0.9rem)); max-width: min(28rem, calc(100vw - 8rem)); gap: 0.25rem; padding: 0 0.5rem; background-color: var(--oh-hud-bg-strong); z-index: 9; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.gx.drawer-open .gx-date, .gx.drawer-open .gx-flag-btn, .gx.drawer-open .gx-advisor-btn { right: calc(var(--gx-drawer) + 0.5rem); }
.gx-arrow { align-items: center; background: none; border: none; border-radius: 6px; color: rgba(255, 255, 255, 0.7); cursor: pointer; display: flex; flex-shrink: 0; font-size: 1.5rem; font-weight: 900; height: 2rem; justify-content: center; line-height: 1; transition: all 0.15s ease; width: 2rem; padding: 0; }
.gx-arrow:hover { color: white; }
.gx-arrow.on { color: #bfdbfe; }
.gx-date-mid { align-items: baseline; display: flex; flex: 1; gap: 0.5rem; justify-content: center; max-width: 100%; min-width: 0; }
.gx-date-country { color: rgba(147, 197, 253, 0.88); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.gx-date-day { color: rgba(255, 255, 255, 0.94); flex-shrink: 0; font-size: 0.95rem; letter-spacing: 0.02em; white-space: nowrap; }

/* time.jsx PanelChrome: the Events panel, and the dock's windows in the same frame */
.gx-panel { position: absolute; left: 0.5rem; bottom: 4.9rem; width: min(26.25rem, calc(100% - 1rem)); height: min(calc(100% - var(--gx-top) - 9rem), 30rem); min-height: 10rem; display: flex; flex-direction: column; background-color: rgba(17, 17, 19, 0.86); border: 1px solid var(--oh-hud-border); border-radius: 18px; box-shadow: var(--oh-hud-shadow); color: white; overflow: hidden; z-index: 8; }
.gx-panel-head { border-bottom: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; padding: 1rem 1.25rem 0.75rem; display: flex; align-items: center; justify-content: space-between; }
.gx-panel-title { color: rgba(255, 255, 255, 0.96); font-size: 1rem; font-weight: 700; }
.gx-panel-sub { color: rgba(255, 255, 255, 0.45); font-size: 0.75rem; line-height: 1.45; margin-top: 0.12rem; }
.gx-x { background: none; border: none; border-radius: 6px; color: rgba(255, 255, 255, 0.5); cursor: pointer; display: flex; font-size: 1.1rem; line-height: 1; padding: 0.15rem 0.3rem; transition: all 0.15s ease; }
.gx-x:hover { background: rgba(255, 255, 255, 0.08); color: white; }
.gx-panel-body { display: flex; flex: 1; flex-direction: column; gap: 0.85rem; min-height: 0; overflow-y: auto; padding: 0.95rem 1.25rem 1.25rem; scrollbar-width: none; }
/* Cards keep their height and the list scrolls, rather than squeezing them into slivers. */
.gx-panel-body > * { flex-shrink: 0; }
.gx-ghost { align-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; color: rgba(255, 255, 255, 0.84); cursor: pointer; display: inline-flex; font-size: 0.74rem; font-weight: 600; gap: 0.42rem; justify-content: center; padding: 0.5rem 0.78rem; transition: all 0.15s ease; min-height: 2.5rem; width: 100%; }
.gx-empty-box { align-items: center; background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 16px; color: rgba(229, 229, 232, 0.48); display: flex; font-size: 0.78rem; font-style: italic; justify-content: center; line-height: 1.55; min-height: 9.5rem; padding: 1.1rem; text-align: center; }

/* time.jsx EventCard */
.gx-card { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); overflow: hidden; }
.gx-card-head { align-items: center; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.85rem 1rem 0.7rem; }
.gx-card-body { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.95rem 1rem 1rem; }
.gx-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.gx-card-title { color: rgba(255, 255, 255, 0.94); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.gx-card-text { color: rgba(228, 228, 231, 0.82); font-size: 0.77rem; line-height: 1.58; }
.gx-card-text p { margin: 0 0 0.45rem; }
.gx-card-text p:last-child { margin-bottom: 0; }
.gx-card-text strong { color: rgba(255, 255, 255, 0.96); }
.gx-metric { align-items: center; background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 999px; color: rgba(232, 232, 234, 0.84); display: inline-flex; font-size: 0.69rem; font-weight: 600; gap: 0.32rem; letter-spacing: 0.02em; padding: 0.28rem 0.6rem; }
.gx-metric svg { width: 14px; height: 14px; }
.gx-tag { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; color: rgba(230, 230, 233, 0.74); display: inline-flex; font-size: 0.68rem; font-weight: 600; padding: 0.24rem 0.55rem; }
.gx-link { align-items: center; background: rgba(96, 165, 250, 0.07); border: 1px solid rgba(96, 165, 250, 0.2); border-radius: 999px; color: rgba(219, 234, 254, 0.86); display: inline-flex; font-size: 0.68rem; font-weight: 600; gap: 0.3rem; padding: 0.24rem 0.55rem; }
.gx-link i { font-style: normal; opacity: 0.7; }

/* chat.jsx Toolbar, hudDock.js */
.gx-dock { left: 0.5rem; bottom: 0.5rem; height: 4rem; width: 12.8rem; gap: 0.75rem; padding: 0 0.1rem; z-index: 9; }
.gx-launch { position: relative; align-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); color: white; cursor: pointer; display: flex; font-size: 1.2rem; height: 3.3rem; justify-content: center; outline: none; transition: all 0.12s ease; width: 3.3rem; padding: 0; }
.gx-launch:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); }
.gx-launch.on { background: rgba(59, 130, 246, 0.16); border: 1px solid rgba(96, 165, 250, 0.34); }
.gx-badge { position: absolute; top: -0.55rem; right: -0.8rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.2rem; border-radius: 999px; background: #dc2626; border: 1px solid rgba(255, 255, 255, 0.35); color: white; font-size: 0.62rem; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }
.gx-search { left: 13.8rem; bottom: 0.85rem; width: 2.4rem; height: 2.4rem; border-radius: 10px; cursor: pointer; z-index: 9; padding: 0; transition: width 0.2s ease, left 0.3s ease; }
.gx.at-war .gx-search { left: 18.3rem; }
.gx-search.open { width: 17rem; justify-content: flex-start; padding: 0 0.7rem; gap: 0.5rem; cursor: text; }
.gx-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: white; font: 0.82rem sans-serif; }

/* other.jsx flag badge, main.jsx AdvisorButton */
.gx-flag-btn { right: 0.5rem; bottom: 7.25rem; width: 4rem; height: 4rem; padding: 0.48rem; background: rgba(35, 35, 39, 0.53); overflow: hidden; cursor: pointer; z-index: 7; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease; }
.gx-flag-btn.on { background: rgba(75, 143, 251, 0.17); }
.gx-flag-btn .gx-tricolour { width: 100%; height: 100%; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.gx-advisor-btn { right: 0.5rem; bottom: 3rem; width: 4rem; height: 4rem; font-size: 1.5rem; background: rgba(35, 35, 39, 0.53); cursor: pointer; z-index: 7; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease; }
.gx-advisor-btn.on { background: rgba(255, 255, 255, 0.085); }
.gx-tricolour { display: flex; }
.gx-tricolour i { flex: 1; }
.gx-tricolour i:nth-child(1) { background: #0055a4; }
.gx-tricolour i:nth-child(2) { background: #ffffff; }
.gx-tricolour i:nth-child(3) { background: #ef4135; }

/* main.jsx WarRoomButton */
.gx-war-btn { left: 13.8rem; bottom: 0.5rem; width: 4rem; height: 4rem; border-radius: 50%; cursor: pointer; backdrop-filter: none; background-color: #a8181e; background-size: cover; border: 1px solid rgba(0, 0, 0, 0.6); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55); transition: left 0.3s ease, bottom 0.3s ease, box-shadow 0.15s ease; z-index: 7; padding: 0; }
.gx.war-open .gx-war-btn { left: 1.1rem; bottom: 1.1rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 3px 12px rgba(0, 0, 0, 0.55); z-index: 12; }

/* advisor.jsx AdvisorPanel and countryPanel.jsx: the right drawers */
.gx-drawer { position: absolute; top: var(--gx-top); bottom: 0; right: 0; width: var(--gx-drawer); transform: translateX(100%); border-left: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(24, 24, 27, 0.95); box-shadow: none; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; color: white; font-family: sans-serif; overflow: hidden; z-index: 7; }
.gx-drawer.open { transform: translateX(0); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4); }
.gx-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; display: flex; align-items: center; justify-content: center; }
.gx-grip::after { content: ""; width: 3px; height: 42px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.22); }
.gx-drawer-head { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; gap: 0.5rem; padding: 0.78rem 0.75rem; }
.gx-drawer-head .ic { font-size: 1rem; }
.gx-drawer-head b { font-size: 0.9rem; font-weight: 800; }
.gx-drawer-head small { display: block; color: rgba(255, 255, 255, 0.38); font-size: 0.6rem; margin-top: 0.1rem; }
.gx-drawer-head .sp { flex: 1; }
.gx-hbtn { background: none; border: none; color: rgba(255, 255, 255, 0.4); cursor: pointer; font-size: 1.35rem; line-height: 1; padding: 0; display: flex; align-items: center; }
.gx-hbtn.close { color: rgba(255, 255, 255, 0.55); padding: 0 0 0 0.5rem; }

.gx-msgs { padding: 0.75rem; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; scrollbar-width: none; }
.gx-msgs .gx-none { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); margin-top: 0; }
.gx-msg { display: flex; flex-direction: column; align-items: flex-start; }
.gx-msg.user { align-items: flex-end; }
.gx-msg-label { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); margin-bottom: 0.25rem; }
.gx-bubble { max-width: 90%; padding: 0.6rem 0.85rem; border-radius: 12px 12px 12px 2px; background-color: rgba(255, 255, 255, 0.08); font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.gx-msg.user .gx-bubble { border-radius: 12px 12px 2px 12px; background-color: #3b82f6; }
.gx-msg-time { font-size: 0.65rem; color: rgba(255, 255, 255, 0.3); margin-top: 0.25rem; }
.gx-thinking { opacity: 0.6; }
.gx-composer { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: 0.5rem; }
.gx-composer textarea { flex: 1; min-width: 0; background-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; color: white; font-size: 0.875rem; padding: 0.6rem 0.75rem; resize: none; outline: none; font-family: sans-serif; line-height: 1.5; overflow-y: auto; scrollbar-width: none; transition: border-color 0.2s; }
.gx-composer textarea:focus { border-color: rgba(59, 130, 246, 0.6); }
.gx-send { background-color: #3b82f6; border: none; border-radius: 10px; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 1rem; transition: background-color 0.2s; }
.gx-send:hover { background-color: #2563eb; }

/* stats.jsx */
.gx-stats { flex: 1; overflow-y: auto; padding: 0.9rem 1rem 1.25rem; scrollbar-width: none; }
.gx-nation { display: flex; gap: 0.7rem; align-items: flex-start; }
.gx-nation-flag { align-items: center; background-color: rgba(59, 130, 246, 0.16); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; display: flex; flex-shrink: 0; height: 2.6rem; overflow: hidden; width: 2.6rem; }
.gx-nation-flag .gx-tricolour { width: 100%; height: 100%; }
.gx-nation-name { align-items: center; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.gx-nation-name b { flex: 1 1 9rem; font-size: 1.02rem; font-weight: 800; line-height: 1.15; min-width: 0; }
.gx-yours { background-color: rgba(245, 158, 11, 0.18); border: 1px solid rgba(245, 158, 11, 0.5); border-radius: 999px; color: #fbbf24; flex-shrink: 0; font-size: 0.62rem; font-weight: 700; padding: 0.14rem 0.5rem; }
.gx-nation .l1 { color: rgba(255, 255, 255, 0.7); font-size: 0.76rem; margin-top: 0.15rem; }
.gx-nation .l2 { color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; margin-top: 0.1rem; }
.gx-nation .l3 { color: #fbbf24; font-size: 0.72rem; margin-top: 0.1rem; }
.gx-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.28rem; }
.gx-chip-tier { background: rgba(59, 130, 246, 0.16); border: 1px solid rgba(96, 165, 250, 0.38); border-radius: 999px; color: #bfdbfe; font-size: 0.61rem; font-weight: 700; padding: 0.1rem 0.38rem; }
.gx-chip-tag { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: rgba(255, 255, 255, 0.76); font-size: 0.61rem; padding: 0.1rem 0.38rem; }
.gx-subtabs { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.gx-subtab { min-width: 0; flex-direction: column; gap: 0.1rem; text-align: center; align-items: center; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px; color: rgba(255, 255, 255, 0.58); cursor: pointer; display: flex; flex: 1; font-size: 0.72rem; font-weight: 800; justify-content: center; min-height: 2.45rem; padding: 0.45rem 0.55rem; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.gx-subtab.on { background-color: rgba(0, 0, 0, 0.42); border-color: rgba(255, 255, 255, 0.28); color: #f4f4f5; }
.gx-section { color: rgba(255, 255, 255, 0.45); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; margin: 1.1rem 0 0.6rem; text-transform: uppercase; }
.gx-cardbox { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 0.6rem 0.7rem; }
.gx-row { align-items: center; display: flex; justify-content: space-between; margin-bottom: 0.45rem; }
.gx-row .cap { color: rgba(255, 255, 255, 0.55); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.gx-row .val { font-size: 0.85rem; font-weight: 800; }
.gx-row .lab { color: rgba(255, 255, 255, 0.8); font-size: 0.76rem; }
.gx-row .pct { font-size: 0.78rem; font-weight: 800; }
.gx-bar { background-color: rgba(255, 255, 255, 0.1); border-radius: 999px; height: 6px; overflow: hidden; }
.gx-bar i { display: block; border-radius: 999px; height: 100%; transition: width 0.4s; }
.gx-indices { display: flex; flex-direction: column; gap: 0.55rem; }
.gx-indices .gx-row { margin-bottom: 0.4rem; }
.gx-econ { display: grid; gap: 0.55rem; grid-template-columns: 1fr 1fr; }
.gx-econ .k, .gx-pop .k { color: rgba(255, 255, 255, 0.45); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 0.3rem; text-transform: uppercase; }
.gx-econ .v { font-size: 1.05rem; font-weight: 800; }
.gx-econ .s { color: rgba(255, 255, 255, 0.4); font-size: 0.68rem; margin-top: 0.15rem; }
.gx-pop .v { color: #e7e7e9; font-size: 1.15rem; font-weight: 800; }
.gx-currency { color: rgba(255, 255, 255, 0.35); font-size: 0.66rem; margin-top: 0.45rem; }
.gx-gdp { margin-top: 0.9rem; }
.gx-gdp .t { color: rgba(255, 255, 255, 0.7); font-size: 0.74rem; margin-bottom: 0.5rem; }
.gx-gdp .stack { border-radius: 999px; display: flex; height: 10px; overflow: hidden; }
.gx-gdp .legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin-top: 0.45rem; }
.gx-gdp .legend span { color: rgba(255, 255, 255, 0.6); font-size: 0.68rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.gx-gdp .legend i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.gx-dipl { display: grid; gap: 0.45rem; grid-template-columns: repeat(3, 1fr); }
.gx-dipl .gx-cardbox { padding: 0.55rem 0.6rem; }
.gx-dipl .k { color: rgba(255, 255, 255, 0.4); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.gx-dipl .v { font-size: 1rem; font-weight: 900; margin-top: 0.2rem; }
.gx-rels { margin-top: 0.6rem; padding: 0; overflow: hidden; }
.gx-rels-head { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.76rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.gx-rels-head small { color: rgba(255, 255, 255, 0.4); font-size: 0.62rem; font-weight: 600; }
.gx-rel { padding: 0.55rem 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.gx-rel:last-child { border-bottom: 0; }
.gx-rel-top { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.35rem; }
.gx-rel-top span { flex: 1; font-size: 0.76rem; color: rgba(255, 255, 255, 0.85); }
.gx-rel-top b { font-size: 0.9rem; font-weight: 900; }
.gx-status { border-radius: 999px; display: inline-flex; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1; padding: 0.18rem 0.38rem; text-transform: uppercase; white-space: nowrap; }
.gx-meter { position: relative; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.gx-meter::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.22); }
.gx-meter i { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: left 0.4s, width 0.4s; }
.gx-note { color: rgba(255, 255, 255, 0.4); font-size: 0.68rem; margin-top: 0.7rem; }
.gx-rank { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.78rem; }
.gx-rank:last-child { border-bottom: 0; }
.gx-rank em { font-style: normal; width: 1.4rem; color: rgba(255, 255, 255, 0.45); font-weight: 800; }
.gx-rank span { flex: 1; }
.gx-rank b { font-weight: 800; }
.gx-rank.me { background: rgba(59, 130, 246, 0.12); }
.gx-seats { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 0.4rem 0 0.45rem; }

/* chat.jsx: the Diplomacy panel */
.dp { position: absolute; left: 1rem; bottom: 4.75rem; width: min(58rem, calc(100% - 1.5rem - var(--gx-drawer))); height: min(50rem, calc(100% - var(--gx-top) - 8rem)); min-height: 18rem; background-color: rgba(24, 24, 27, 0.95); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); z-index: 8; overflow: hidden; font-family: sans-serif; color: white; display: flex; flex-direction: column; }
.dp-head { padding: 0.7rem 0.85rem 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.dp-title { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.dp-icon { width: 1.65rem; height: 1.65rem; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.22); background: #232327; color: #e7e7ea; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dp-title b { display: block; font-size: 0.98rem; font-weight: 800; line-height: 1.1; }
.dp-title small { display: block; margin-top: 0.13rem; font-size: 0.56rem; color: rgba(255, 255, 255, 0.32); }
.dp-x { background: none; border: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0.15rem 0.3rem; border-radius: 6px; }
.dp-x:hover { color: white; background: rgba(255, 255, 255, 0.08); }
.dp-tabs { display: flex; gap: 0.35rem; padding: 0 0.85rem 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; margin-top: -0.1rem; }
.dp-tab { flex: 0 0 auto; white-space: nowrap; display: flex; align-items: center; gap: 0.38rem; padding: 0.34rem 0.68rem; border-radius: 8px; font-size: 0.72rem; font-weight: 750; cursor: pointer; font-family: sans-serif; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); color: rgba(255, 255, 255, 0.48); }
.dp-tab.on { border-color: rgba(255, 255, 255, 0.22); background: #0e0e10; color: white; }
.dp-tab .ic { display: inline-flex; opacity: 0.8; }
.dp-count { min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(96, 165, 250, 0.16); color: #93c5fd; font-size: 0.57rem; font-weight: 800; }
.dp-tab.on .dp-count { background: rgba(255, 255, 255, 0.14); color: #fff; }
.dp-list { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.dp-list > * { flex-shrink: 0; }
.dp-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.25); font-size: 0.82rem; font-style: italic; text-align: center; padding: 2rem; line-height: 1.5; }
.dp-group { color: rgba(255, 255, 255, 0.4); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; margin: 0.7rem 0 0.15rem; padding: 0 0.15rem; text-transform: uppercase; }
.dp-group:first-child { margin-top: 0; }
.dp-row { position: relative; width: 100%; padding: 0.76rem 3rem 0.76rem 0.9rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); display: flex; align-items: center; gap: 0.78rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; font-family: sans-serif; text-align: left; color: white; }
.dp-row:hover { border-color: rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.065); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.dp-row.unread { border-color: rgba(96, 165, 250, 0.15); background: rgba(59, 130, 246, 0.035); }
.dp-dot { width: 0.52rem; flex-shrink: 0; display: flex; justify-content: center; }
.dp-dot i { width: 0.46rem; height: 0.46rem; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.08); }
.dp-flag { width: 1.42rem; height: 0.96rem; flex-shrink: 0; border-radius: 2px; overflow: hidden; flex-direction: column; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
.dp-rowtext { flex: 1; min-width: 0; display: block; }
.dp-rowtop { display: flex; align-items: baseline; gap: 0.48rem; min-width: 0; }
.dp-rowtop b { flex: 1; min-width: 0; font-size: 0.84rem; font-weight: 650; color: rgba(255, 255, 255, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-row.unread .dp-rowtop b { font-weight: 740; color: #fff; }
.dp-rowtop em { flex-shrink: 0; font-style: normal; font-size: 0.59rem; color: rgba(255, 255, 255, 0.25); text-transform: uppercase; letter-spacing: 0.045em; }
.dp-preview { display: block; margin-top: 0.17rem; font-size: 0.74rem; color: rgba(255, 255, 255, 0.38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-row.unread .dp-preview { color: rgba(255, 255, 255, 0.59); }
.dp-chev { position: absolute; top: 50%; right: 0.9rem; transform: translateY(-50%); color: rgba(255, 255, 255, 0.2); font-size: 1rem; line-height: 1; }
.dp-foot { padding: 0.75rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; }
.dp-new { width: 100%; padding: 0.7rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; font-weight: 500; cursor: pointer; font-family: sans-serif; }
.dp-new:hover { background: rgba(255, 255, 255, 0.12); }
.dp-convhead { display: flex; align-items: center; gap: 0.72rem; padding: 0.72rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(15, 15, 18, 0.26); flex-shrink: 0; }
.dp-back { background: none; border: none; cursor: pointer; color: rgba(255, 255, 255, 0.58); display: flex; padding: 0.26rem; border-radius: 7px; }
.dp-convhead .dp-flag { width: 1.5rem; height: 1rem; }
.dp-convtitle { flex: 1; min-width: 0; }
.dp-convtitle b { display: block; font-weight: 750; font-size: 0.93rem; color: rgba(255, 255, 255, 0.95); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-convtitle small { display: block; margin-top: 0.12rem; color: rgba(255, 255, 255, 0.34); font-size: 0.62rem; }
.dp-convhead .dp-x { color: rgba(255, 255, 255, 0.4); font-size: 1rem; padding: 0.28rem 0.34rem; border-radius: 7px; }
.dp-msgs { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.dp-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; }
.dp-msg.me { align-self: flex-end; align-items: flex-end; }
.dp-speaker { font-size: 0.68rem; color: rgba(255, 255, 255, 0.45); margin: 0 0 0.25rem 0.1rem; font-weight: 600; }
.dp-bubble { padding: 0.62rem 0.82rem; border-radius: 13px 13px 13px 3px; background-color: rgba(35, 35, 39, 0.96); font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; border: 1px solid rgba(255, 255, 255, 0.08); border-left: 2px solid var(--accent, #60a5fa); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.dp-msg.me .dp-bubble { border-radius: 13px 13px 3px 13px; background-color: rgba(59, 130, 246, 0.92); border: 1px solid rgba(147, 197, 253, 0.2); }
.dp-compose { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; }
.dp-compose textarea { flex: 1; min-width: 0; background-color: rgba(9, 9, 12, 0.58); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; color: white; font-size: 0.875rem; padding: 0.62rem 0.78rem; resize: none; outline: none; font-family: sans-serif; line-height: 1.5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); }
.dp-compose textarea:focus { border-color: rgba(59, 130, 246, 0.6); }
.dp-compose button { background-color: #3b82f6; border: none; border-radius: 10px; min-width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 1rem; color: white; }

/* the dock's windows: the same frame as the Events panel */
.gx-action { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 0.7rem 0.85rem; }
.gx-action p { margin: 0 0 0.35rem; font-size: 0.8rem; line-height: 1.5; color: rgba(228, 228, 231, 0.9); }
.gx-action small { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fbbf24; }
.gx-action small.ok { color: #34d399; }
.gx-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #60a5fa; animation: gx-blink 1s steps(1) infinite; }
@keyframes gx-blink { 50% { opacity: 0; } }
.gx-thread { display: grid; gap: 0.6rem; }
.gx-thread-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; }
.gx-thread-head .gx-tricolour { width: 1.5rem; height: 1rem; border-radius: 3px; overflow: hidden; flex-direction: column; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.gx-project .gx-bar { margin-top: 0.45rem; }

/* ---- the War Room: warRoomTheme.js ---- */
.wr-plate { background-color: var(--steel-plate); background-repeat: repeat; background-size: 256px 256px; }
.wr-rivet { position: absolute; width: 0.62rem; height: 0.62rem; border-radius: 50%; background-color: #7b828b; background-size: cover; pointer-events: none; }
.wr-stencil { color: var(--brass); font-family: var(--stencil); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.wr-key { align-items: center; background: #3d4249; border-top: 1px solid #5f666f; border-left: 1px solid #4a5058; border-right: 1px solid #0a0b0d; border-bottom: 1px solid #0a0b0d; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); color: var(--bone); cursor: pointer; display: inline-flex; font-family: var(--stencil); font-size: 0.8rem; font-weight: 700; gap: 0.3rem; letter-spacing: 0.07em; line-height: 1.1; padding: 0.42rem 0.62rem; text-transform: uppercase; }
.wr-key.on { background: var(--red); border-top-color: var(--red-bright); border-left-color: var(--red-bright); }
.wr-tray { background: rgba(0, 0, 0, 0.34); border-top: 1px solid rgba(0, 0, 0, 0.66); border-left: 1px solid rgba(0, 0, 0, 0.66); border-right: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; }
.wr-tray.lit { border-right-color: var(--brass); border-bottom-color: var(--brass); }
.wr-link { background: none; border: none; color: var(--amber); cursor: pointer; font-family: var(--stencil); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.1rem 0; text-transform: uppercase; }
.wr-soft { color: var(--bone-soft); font-size: 0.72rem; line-height: 1.4; }
/* the frame around the map */
.wr-frame-top { position: absolute; top: var(--gx-top); left: 0; right: var(--gx-drawer); height: 2.2rem; border-bottom: 2px solid #0a0b0d; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); z-index: 10; display: flex; align-items: center; gap: 0.8rem; padding: 0 1.5rem; }
.wr-frame-top .name { color: var(--bone); font-size: 1rem; letter-spacing: 0.2em; }
.wr-frame-top .sides { color: var(--bone-soft); font-size: 0.74rem; }
.wr-frame-top .sp { flex: 1; }
.wr-frame-top .date { font-size: 0.8rem; }
.wr-frame-left { position: absolute; top: calc(var(--gx-top) + 2.2rem); bottom: 0; left: 0; width: 0.55rem; border-right: 2px solid #0a0b0d; z-index: 10; }
.wr-frame-bottom { position: absolute; bottom: 0; left: 0; right: var(--gx-drawer); height: 0.55rem; border-top: 2px solid #0a0b0d; z-index: 10; }
/* the drawer */
.wr-drawer { position: absolute; top: var(--gx-top); bottom: 0; right: 0; width: var(--gx-drawer); border-left: 3px solid #0a0b0d; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1), -6px 0 26px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; color: var(--bone); font-family: sans-serif; overflow: hidden; z-index: 11; }
.wr-head { align-items: center; background: rgba(0, 0, 0, 0.4); border-bottom: 2px solid #0a0b0d; border-top: 4px solid var(--red); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); display: flex; gap: 0.55rem; padding: 0.62rem 1.25rem 0.62rem 1.3rem; position: relative; }
.wr-head .wr-rivet { width: 0.5rem; height: 0.5rem; }
.wr-head .title { color: var(--bone); font-size: 1.25rem; letter-spacing: 0.24em; line-height: 1; }
.wr-head .sp { flex: 1; }
.wr-tabs { background: rgba(0, 0, 0, 0.26); border-bottom: 1px solid #0a0b0d; display: flex; gap: 0.3rem; overflow-x: auto; padding: 0.45rem 0.7rem; }
.wr-tabs .wr-key { display: block; flex: 0 0 auto; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-info { border-bottom: 1px solid #0a0b0d; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); padding: 0.5rem 0.8rem; }
.wr-scroll { border-bottom: 2px solid #0a0b0d; flex: 0 1 auto; max-height: 44%; overflow-y: auto; padding: 0.7rem 0.8rem 0.8rem; scrollbar-width: none; }
.wr-heading { display: flex; gap: 0.55rem; align-items: center; margin-top: 0.6rem; }
.wr-heading:first-child { margin-top: 0; }
.wr-heading i { background: rgba(201, 165, 76, 0.3); flex: 1; height: 1px; }
.wr-general { display: flex; gap: 0.55rem; margin-top: 0.3rem; padding: 0.34rem 0.5rem; align-items: flex-start; }
.wr-num { align-items: center; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--brass); border-radius: 2px; color: var(--brass); display: inline-flex; flex-shrink: 0; font-family: var(--stencil); font-size: 0.86rem; font-weight: 700; height: 1.5rem; width: 1.5rem; justify-content: center; }
.wr-general .who { flex: 1; min-width: 0; }
.wr-general .who b { display: block; font-size: 0.84rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-general .army { color: var(--bone-faint); font-size: 0.68rem; }
.wr-general .orders { color: var(--amber); font-size: 0.72rem; }
.wr-plan { display: flex; gap: 0.55rem; margin-top: 0.3rem; padding: 0.4rem 0.5rem; }
.wr-plan .dash { height: 0.22rem; width: 0.95rem; margin-top: 0.45rem; flex-shrink: 0; }
.wr-plan .what { flex: 1; min-width: 0; }
.wr-plan .what b { display: block; font-size: 0.8rem; font-weight: 700; }
.wr-plan .links { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.wr-talk { background: rgba(0, 0, 0, 0.3); display: flex; flex: 1 1 0; flex-direction: column; min-height: 9rem; }
.wr-lines { flex: 1; min-height: 0; overflow-y: auto; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; scrollbar-width: none; }
.wr-line { display: flex; flex-direction: column; align-items: flex-start; }
.wr-line.own { align-items: flex-end; }
.wr-line .name { font-size: 0.7rem; margin: 0 0 0.15rem 0.1rem; }
.wr-line .name em { font-style: normal; color: var(--bone-faint); }
.wr-bubble { background: var(--olive); border-top: 1px solid var(--olive-line); border-left: 1px solid var(--olive-line); border-right: 1px solid #0a0b0d; border-bottom: 1px solid #0a0b0d; border-radius: 3px; color: var(--bone); font-size: 0.84rem; line-height: 1.45; max-width: 92%; overflow-wrap: anywhere; padding: 0.5rem 0.7rem; white-space: pre-wrap; }
.wr-line.own .wr-bubble { background: var(--red-dark); border-top-color: var(--red-bright); border-left-color: var(--red); }
.wr-form { align-items: flex-end; border-top: 2px solid #0a0b0d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); display: flex; gap: 0.45rem; padding: 0.55rem 0.7rem; }
.wr-form textarea { background-color: rgba(0, 0, 0, 0.5); border-top: 1px solid rgba(0, 0, 0, 0.66); border-left: 1px solid rgba(0, 0, 0, 0.66); border-right: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; color: var(--bone); flex: 1; font-family: inherit; font-size: 0.85rem; outline: none; padding: 0.5rem 0.65rem; resize: none; }
.wr-form .wr-key { height: 2.6rem; width: 2.6rem; padding: 0; justify-content: center; }
/* warRoomRail.jsx */
.wr-rail { position: absolute; left: 0; top: calc(var(--gx-top) + 2.9rem); max-height: calc(100% - var(--gx-top) - 8.5rem); padding: 0.5rem 0.3rem 0.4rem; border-top: 2px solid #0a0b0d; border-right: 2px solid #0a0b0d; border-bottom: 2px solid #0a0b0d; border-radius: 0 5px 5px 0; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.1), 5px 0 18px rgba(0, 0, 0, 0.5); color: var(--bone); display: flex; flex-direction: column; align-items: center; gap: 0.28rem; overflow-y: auto; scrollbar-width: none; z-index: 11; width: 3.75rem; }
.wr-rail .wr-rivet { width: 0.34rem; height: 0.34rem; top: 0.25rem; }
.wr-rail .lbl { font-size: 0.58rem; letter-spacing: 0.14em; }
.wr-count { height: 1.45rem; width: 3.05rem; display: flex; align-items: center; justify-content: center; background: var(--brass); color: #1c1608; font-family: var(--stencil); font-weight: 700; border-radius: 2px; }
.wr-rule { width: calc(100% - 0.4rem); height: 1px; background: #0a0b0d; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); margin: 0.12rem 0.2rem; }
.wr-railkey { align-items: center; background: #3d4249; border-top: 1px solid #5f666f; border-left: 1px solid #4a5058; border-right: 1px solid #0a0b0d; border-bottom: 1px solid #0a0b0d; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); color: var(--bone); cursor: pointer; display: flex; flex: 0 0 auto; flex-direction: column; font-family: var(--stencil); font-size: 0.56rem; font-weight: 700; gap: 0.16rem; height: 3.05rem; justify-content: center; letter-spacing: 0.05em; line-height: 1; padding: 0.2rem 0.05rem; text-transform: uppercase; width: 3.05rem; }
.wr-railkey.on { background: var(--red); border-top-color: var(--red-bright); border-left-color: var(--red-bright); }
.wr-railkey svg { width: 19px; height: 19px; }
/* while the War Room is open the normal HUD steps aside */
.gx.war-open .gx-hud { display: none !important; }

/* ---- the chapters, as the game's event cards (time.jsx EventCard) ---- */
.chapter { font-family: sans-serif; color: white; background-color: rgba(17, 17, 19, 0.86); border: 1px solid var(--oh-hud-border); border-radius: 18px; box-shadow: var(--oh-hud-shadow); padding: 0; max-width: 26.25rem; overflow: hidden; }
.step[data-tone] .chapter { border-color: var(--oh-hud-border); }
.chapter::before, .chapter .dossier, .chapter .num, .chapter .stamp, .chapter .fn { display: none; }
.chapter > .gx-card-head { border-radius: 0; }
.chapter > .ev-body { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.95rem 1rem 1rem; }
.chapter h2 { margin: 0; color: rgba(255, 255, 255, 0.94); font: 800 0.82rem/1.35 sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.chapter p { margin: 0; color: rgba(228, 228, 231, 0.82); font-size: 0.77rem; line-height: 1.58; font-family: sans-serif; }
.chapter strong { color: rgba(255, 255, 255, 0.96); font-weight: 700; }
.chapter .drop::first-letter, .step[data-tone] .chapter .drop::first-letter { float: none; font: inherit; color: inherit; margin: 0; padding: 0; border: 0; }
.chapter .beta { font: 700 0.62rem/1 sans-serif; padding: 0.14rem 0.5rem; border-radius: 999px; background-color: rgba(245, 158, 11, 0.18); border: 1px solid rgba(245, 158, 11, 0.5); color: #fbbf24; letter-spacing: 0.04em; }
.chapter .cta-row { margin-top: 0.35rem; }

@media (max-width: 1200px) {
  .gx-pill { display: none; }
}
/* actions.jsx / social.jsx: the dock's own windows, opaque, from the dock's top */
.gx-panel.dock-panel { bottom: 4.75rem; border-radius: 16px; background-color: rgba(24, 24, 27, 0.95); border-color: rgba(255, 255, 255, 0.1); }

/* ---- the country name in the date widget: a button on a phone (time.jsx) ---- */
button.gx-date-country { background: none; border: 0; padding: 0; font-family: inherit; cursor: default; }

/* ---- advisor charts (advisor.jsx AdvisorChart) ---- */
.gx-bubble.has-chart { width: 90%; }
.gx-chart { margin-top: 0.75rem; width: 100%; white-space: normal; }
.gx-chart-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.85rem; margin-bottom: 0.5rem; }
.gx-chart-legend span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); }
.gx-chart-legend i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.gx-chart-box { position: relative; width: 100%; height: 175px; }
.gx-chart-box svg { display: block; }
.gx-chart-tip { position: absolute; pointer-events: none; background: rgba(17, 17, 19, 0.95); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 10px; font-size: 12px; white-space: nowrap; z-index: 2; }
.gx-chart-tip b { display: block; color: rgba(255, 255, 255, 0.85); margin-bottom: 4px; }
.gx-chart-tip span { display: flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.6); }
.gx-chart-tip i { width: 10px; height: 10px; border: 1px solid rgba(255, 255, 255, 0.5); }

/* ---- the Economy tab's way into Advanced statistics (stats.jsx) ---- */
.gx-advanced { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; width: 100%; margin-top: 0.9rem; padding: 0.72rem 0.8rem; text-align: left; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 11px; color: #e7e7ea; cursor: pointer; font-family: sans-serif; }
.gx-advanced:hover { background: rgba(255, 255, 255, 0.08); }
.gx-advanced .ic { width: 2rem; height: 2rem; flex-shrink: 0; display: grid; place-items: center; background: rgba(59, 130, 246, 0.18); border: 1px solid rgba(147, 197, 253, 0.2); border-radius: 8px; font-size: 1rem; }
.gx-advanced .tx { flex: 1; min-width: 0; }
.gx-advanced b { display: block; font-size: 0.76rem; font-weight: 850; }
.gx-advanced small { display: block; font-size: 0.62rem; color: rgba(255, 255, 255, 0.42); margin-top: 0.1rem; }
.gx-advanced .ch { font-size: 1rem; color: rgba(147, 197, 253, 0.75); }

/* ---- Advanced statistics (AdvancedStatsModal) ---- */
.as-back { position: absolute; inset: var(--gx-top) 0 0 0; background: rgba(6, 6, 7, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: clamp(0.8rem, 2vw, 1.6rem); z-index: 40; }
.as-sheet { background: rgba(20, 20, 22, 0.995); border: 1px solid var(--oh-hud-border); border-radius: 18px; box-shadow: var(--oh-hud-shadow); display: flex; flex-direction: column; width: min(96%, 1380px); height: min(880px, 100%); min-height: min(580px, 100%); overflow: hidden; color: white; font-family: sans-serif; }
.as-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; }
.as-flag { width: 2.25rem; height: 2.25rem; border-radius: 9px; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(255, 255, 255, 0.1); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.as-flag .gx-tricolour { width: 1.5rem; height: 1rem; border-radius: 2px; }
.as-title { flex: 1; min-width: 0; }
.as-title div { display: flex; align-items: baseline; gap: 0.5rem; }
.as-title b { color: #f8fafc; font-size: 1rem; font-weight: 900; }
.as-title span { font-size: 0.76rem; font-weight: 700; color: rgba(255, 255, 255, 0.48); }
.as-title small { display: block; font-size: 0.64rem; color: rgba(255, 255, 255, 0.32); margin-top: 0.1rem; }
.as-x { width: 2.25rem; height: 2.25rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px; color: rgba(255, 255, 255, 0.62); font-size: 1.2rem; cursor: pointer; }
.as-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(285px, 330px); }
.as-main { padding: 1rem 1rem 0.9rem; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.as-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.as-top b { font-size: 0.82rem; font-weight: 850; color: rgba(255, 255, 255, 0.9); }
.as-top small { display: block; font-size: 0.64rem; color: rgba(255, 255, 255, 0.34); margin-top: 0.15rem; }
.as-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; align-items: center; }
.as-legend span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.63rem; color: rgba(255, 255, 255, 0.58); }
.as-legend i { width: 7px; height: 7px; border-radius: 50%; }
.as-frame { position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 0.35rem; flex: 1; min-height: 390px; display: flex; align-items: center; }
.as-svg { width: 100%; height: auto; min-height: 340px; max-height: 58vh; display: block; }
.as-empty { width: 100%; text-align: center; font-size: 0.82rem; color: rgba(255, 255, 255, 0.38); min-height: 330px; display: grid; place-items: center; }
.as-tip { position: absolute; top: 1.1rem; width: 180px; background: rgba(16, 16, 18, 0.96); border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 10px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35); padding: 0.55rem 0.65rem; pointer-events: none; }
.as-tip .d { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62); margin-bottom: 0.3rem; }
.as-tip .r { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }
.as-tip .r span { display: flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; color: rgba(255, 255, 255, 0.62); }
.as-tip .r i { width: 7px; height: 7px; border-radius: 50%; }
.as-tip .r b { font-size: 0.7rem; font-weight: 850; }
.as-tiles { display: grid; gap: 0.55rem; margin-top: 0.7rem; }
.as-tile { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 9px; padding: 0.55rem 0.65rem; }
.as-tile small { display: block; font-size: 0.55rem; font-weight: 800; text-transform: uppercase; color: rgba(255, 255, 255, 0.36); }
.as-tile b { display: block; font-size: 0.92rem; font-weight: 900; margin-top: 0.15rem; }
.as-tile span { display: block; font-size: 0.58rem; margin-top: 0.1rem; }
.as-side { background: rgba(9, 9, 10, 0.24); border-left: 1px solid rgba(255, 255, 255, 0.07); padding: 0.9rem 0.85rem 1rem; overflow-y: auto; scrollbar-width: none; }
.as-label { font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); }
.as-label.row { display: flex; justify-content: space-between; margin-top: 1rem; }
.as-label.row span { color: rgba(147, 197, 253, 0.8); font-weight: 800; letter-spacing: 0; text-transform: none; }
.as-ranges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.as-range { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; color: rgba(255, 255, 255, 0.5); font-size: 0.68rem; font-weight: 800; padding: 0.42rem 0.62rem; cursor: pointer; }
.as-range.on { background: rgba(0, 0, 0, 0.42); border-color: rgba(255, 255, 255, 0.28); color: #f4f4f5; }
.as-hint { font-size: 0.58rem; color: rgba(255, 255, 255, 0.28); margin-top: 0.3rem; line-height: 1.4; }
.as-group { border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 0.75rem; padding-top: 0.65rem; }
.as-gtitle { font-size: 0.68rem; font-weight: 850; color: rgba(255, 255, 255, 0.62); margin-bottom: 0.3rem; }
.as-metric { display: flex; align-items: center; gap: 0.45rem; width: 100%; padding: 0.38rem 0.45rem; border-radius: 7px; text-align: left; font-size: 0.66rem; border: 1px solid transparent; cursor: pointer; font-family: sans-serif; }
.as-box { width: 14px; height: 14px; border-radius: 4px; border: 1px solid; display: grid; place-items: center; font-size: 0.55rem; font-weight: 1000; color: #121214; flex-shrink: 0; }
.as-note { background: rgba(59, 130, 246, 0.07); border: 1px solid rgba(96, 165, 250, 0.14); border-radius: 9px; padding: 0.6rem 0.65rem; margin-top: 0.85rem; }
.as-note b { display: block; color: #bfdbfe; font-size: 0.63rem; font-weight: 850; }
.as-note span { display: block; font-size: 0.58rem; color: rgba(255, 255, 255, 0.38); margin-top: 0.2rem; line-height: 1.4; }

/* ---- Intelligence (chat.jsx SpyView) ---- */
.sp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sp-nav { display: flex; gap: 0.35rem; align-items: center; padding: 0.65rem 1rem 0.55rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }
.sp-tab { padding: 0.35rem 0.75rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: rgba(255, 255, 255, 0.46); font-size: 0.72rem; font-weight: 750; cursor: pointer; }
.sp-tab.on { border-bottom-color: rgba(231, 231, 234, 0.72); color: white; }
.sp-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.65rem; }
.sp-panel { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.025); }
.sp-panel.pad { padding: 0.7rem 0.8rem; }
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
.sp-stats.four { gap: 0.45rem; margin-top: 0.75rem; }
.sp-stat { padding: 0.7rem 0.8rem; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09); }
.sp-stat.green { background: rgba(34, 197, 94, 0.09); border-color: rgba(34, 197, 94, 0.25); }
.sp-stat.amber { background: rgba(245, 158, 11, 0.09); border-color: rgba(245, 158, 11, 0.25); }
.sp-stat .k { font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); font-weight: 750; }
.sp-stat .v { margin-top: 0.22rem; font-size: 0.9rem; font-weight: 800; color: rgba(255, 255, 255, 0.86); }
.sp-stat.green .v { color: #86efac; }
.sp-stat.amber .v { color: #fde68a; }
.sp-stat .h { margin-top: 0.2rem; font-size: 0.6rem; color: rgba(255, 255, 255, 0.34); line-height: 1.35; }
.sp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.sp-title { font-size: 0.75rem; font-weight: 750; margin-bottom: 0.45rem; }
.sp-line { font-size: 0.65rem; line-height: 1.45; color: rgba(255, 255, 255, 0.52); }
.sp-none { font-size: 0.65rem; color: rgba(255, 255, 255, 0.34); line-height: 1.45; }
.sp-recent, .sp-report { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left; padding: 0.42rem 0.5rem; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); color: white; cursor: pointer; margin-top: 0.38rem; font-family: sans-serif; }
.sp-report { padding: 0.6rem 0.7rem; border-radius: 10px; margin-top: 0; border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); }
.sp-recent .t, .sp-report .t { display: flex; align-items: baseline; gap: 0.5rem; }
.sp-recent b { flex: 1; font-size: 0.65rem; }
.sp-report b { flex: 1; font-size: 0.7rem; }
.sp-recent em, .sp-report em { font-style: normal; font-size: 0.55rem; color: rgba(255, 255, 255, 0.3); }
.sp-recent .s { font-size: 0.59rem; color: rgba(255, 255, 255, 0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-report .s { font-size: 0.62rem; color: rgba(255, 255, 255, 0.47); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-docbody { display: block; margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.64rem; line-height: 1.55; color: rgba(255, 255, 255, 0.62); white-space: pre-wrap; }
.sp-sub { font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.37); font-weight: 800; margin-top: 0.2rem; }
.sp-input { width: 100%; box-sizing: border-box; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.25); color: white; font-size: 0.76rem; font-family: sans-serif; }
.sp-input option { background: #18181b; }
.sp-countries { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(16rem, 0.95fr) minmax(0, 1.9fr); gap: 0.65rem; padding: 0.65rem; }
.sp-list { padding: 0.55rem; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; scrollbar-width: none; min-height: 0; }
.sp-list .sp-input { margin-bottom: 0.2rem; }
.sp-crow { display: flex; align-items: center; gap: 0.45rem; padding: 0.48rem 0.55rem; border-radius: 7px; border: 1px solid transparent; background: transparent; color: white; font-size: 0.68rem; text-align: left; cursor: pointer; flex-shrink: 0; }
.sp-crow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-crow.on { border-color: var(--oh-grey-border-strong); background: var(--oh-grey-selected); }
.sp-crow i { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: #4ade80; }
.sp-dossier { padding: 0.8rem; overflow-y: auto; scrollbar-width: none; min-height: 0; }
.sp-chead { display: flex; align-items: center; gap: 0.65rem; }
.sp-chead b { display: block; font-weight: 800; font-size: 0.95rem; }
.sp-chead small { display: block; font-size: 0.61rem; color: rgba(255, 255, 255, 0.38); margin-top: 0.1rem; }
.sp-flagbox { width: 2.6rem; height: 1.75rem; border-radius: 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); display: grid; place-items: center; flex-shrink: 0; font-size: 0.9rem; }
.sp-box { padding: 0.65rem 0.7rem; margin-top: 0.6rem; }
.sp-box .sp-sub { margin: 0 0 0.35rem; }
.sp-text { font-size: 0.68rem; line-height: 1.5; color: rgba(255, 255, 255, 0.67); }
.sp-text strong { color: rgba(255, 255, 255, 0.78); }
.sp-meta { font-size: 0.61rem; color: rgba(255, 255, 255, 0.42); margin: 0.2rem 0 0.25rem; }
.sp-seat { display: flex; align-items: center; gap: 0.45rem; padding: 0.38rem 0.45rem; border-radius: 7px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.05); margin-top: 0.3rem; }
.sp-seat span { flex: 1; font-size: 0.62rem; color: rgba(255, 255, 255, 0.68); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-seat em { font-style: normal; font-size: 0.53rem; text-transform: capitalize; color: rgba(231, 231, 234, 0.68); }
.sp-seat i { font-style: normal; font-size: 0.49rem; color: #fde68a; }
.sp-strip { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.7rem; background: rgba(255, 255, 255, 0.035); border-color: var(--oh-grey-border); }
.sp-strip b { display: block; font-size: 0.72rem; font-weight: 750; }
.sp-strip small { display: block; font-size: 0.58rem; color: rgba(255, 255, 255, 0.35); margin-top: 0.1rem; }
.sp-strip > span { font-size: 0.7rem; font-weight: 800; }
.sp-agent, .sp-case { padding: 0.55rem 0.7rem; }
.sp-agent-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sp-agent-top b { display: block; font-size: 0.76rem; font-weight: 750; }
.sp-case .sp-agent-top b { font-size: 0.77rem; }
.sp-agent-top small { display: block; font-size: 0.59rem; color: rgba(255, 255, 255, 0.4); margin-top: 0.1rem; }
.sp-agent-top > span { display: flex; gap: 0.35rem; flex-shrink: 0; }
.sp-btn { padding: 0.35rem 0.6rem; border-radius: 8px; font-size: 0.72rem; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.8); cursor: pointer; white-space: nowrap; font-family: sans-serif; }
.sp-btn.on { border-color: rgba(255, 255, 255, 0.23); background: rgba(255, 255, 255, 0.08); color: #f4f4f5; }
.sp-btn.dim { opacity: 0.45; }
.sp-orders { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 0.42rem; }
.sp-collect { display: flex; align-items: center; gap: 0.45rem; font-size: 0.62rem; color: rgba(255, 255, 255, 0.5); }
.sp-collect .sp-input { width: auto; }
.sp-assets { font-size: 0.6rem; color: rgba(255, 255, 255, 0.45); }
.sp-pending { padding: 0.42rem 0.5rem; border-radius: 7px; background: rgba(245, 158, 11, 0.07); border: 1px solid rgba(245, 158, 11, 0.22); font-size: 0.62rem; color: rgba(255, 255, 255, 0.7); display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.sp-pending b { color: #fde68a; }
.sp-pending small { color: rgba(255, 255, 255, 0.4); }
.sp-give { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sp-give select.sp-input { width: auto; }
.sp-give input.sp-input { flex: 1 1 10rem; width: auto; }
.sp-odds { font-size: 0.58rem; color: rgba(255, 255, 255, 0.38); }
.sp-odds b { color: rgba(255, 255, 255, 0.62); }
.sp-lost { font-style: italic; font-size: 0.61rem; color: rgba(255, 255, 255, 0.34); }
.sp-op { padding: 0.5rem 0.65rem; }
.sp-op-top { display: flex; align-items: baseline; gap: 0.5rem; }
.sp-op-top b { flex: 1; font-size: 0.66rem; }
.sp-op-top em { font-style: normal; font-size: 0.55rem; color: rgba(255, 255, 255, 0.3); }
.sp-op-i { font-size: 0.6rem; color: rgba(255, 255, 255, 0.45); margin-top: 0.1rem; }
.sp-op-o { font-size: 0.6rem; margin-top: 0.15rem; }
.sp-traffic { display: flex; align-items: center; gap: 0.55rem; padding: 0.58rem 0.7rem; color: white; text-align: left; cursor: pointer; font-family: sans-serif; }
.sp-traffic .ic { font-size: 0.9rem; }
.sp-traffic b { display: block; font-size: 0.69rem; }
.sp-traffic small { display: block; font-size: 0.59rem; color: rgba(255, 255, 255, 0.4); margin-top: 0.1rem; }
.sp-deploy { width: 100%; padding: 0.65rem; border-radius: 8px; border: 1px solid var(--oh-grey-border-strong); background: var(--oh-grey-raised); color: var(--oh-grey-text); font-size: 0.72rem; font-weight: 750; cursor: pointer; flex-shrink: 0; font-family: sans-serif; }
.sp-deploy:disabled { opacity: 0.5; cursor: default; }
.sp-icept { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sp-icept-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.sp-icept-head b { display: block; font-size: 0.9rem; font-weight: 700; }
.sp-icept-head small { display: block; font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.1rem; }
.sp-clarity { padding: 0.6rem 1rem 0.2rem; }
.sp-clarity .row { display: flex; justify-content: space-between; font-size: 0.68rem; color: rgba(255, 255, 255, 0.5); }
.sp-clarity .row b { color: #e4e4e7; }
.sp-clarity .bar { height: 0.3rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); margin-top: 0.35rem; overflow: hidden; }
.sp-clarity .bar i { display: block; height: 100%; background: rgba(231, 231, 234, 0.7); border-radius: 999px; }
.sp-icept-msgs { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.sp-imsg { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; }
.sp-imsg.them { align-self: flex-end; align-items: flex-end; }
.sp-imsg > span { font-size: 0.65rem; color: rgba(255, 255, 255, 0.45); margin-bottom: 0.2rem; }
.sp-ibubble { padding: 0.55rem 0.75rem; border-radius: 12px; font-size: 0.82rem; line-height: 1.45; font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.01em; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.09); }
.sp-imsg.them .sp-ibubble { background: rgba(255, 255, 255, 0.07); }
.sp-inote { font-style: italic; font-size: 0.66rem; color: rgba(255, 255, 255, 0.35); text-align: center; padding: 0.6rem 1rem 0.9rem; }
.sp-picker { position: absolute; inset: 0; background: rgba(24, 24, 27, 0.98); border-radius: 16px; z-index: 5; display: flex; flex-direction: column; padding: 1.1rem 1.2rem; gap: 0.75rem; }
.sp-pick-head b { display: block; font-size: 1.05rem; font-weight: 700; }
.sp-pick-head small { display: block; font-size: 0.78rem; color: rgba(255, 255, 255, 0.4); margin-top: 0.15rem; }
.sp-pick-sel { padding: 0.65rem 0.9rem; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.sp-pick-sel small { display: block; font-size: 0.65rem; color: rgba(255, 255, 255, 0.4); }
.sp-pick-sel b { font-size: 0.85rem; }
.sp-pick-grid { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 5.5rem; gap: 0.5rem; align-content: start; }
.sp-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: white; font-size: 0.72rem; cursor: pointer; }
.sp-tile .sp-flagbox { width: 2.3rem; height: 1.6rem; }
.sp-tile.on { border-color: rgba(59, 130, 246, 0.6); background: rgba(59, 130, 246, 0.18); }
.sp-tile i { position: absolute; top: 0.35rem; right: 0.35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #3b82f6; font-style: normal; font-size: 0.65rem; display: grid; place-items: center; }
.sp-pick-foot { display: flex; gap: 0.5rem; }
.sp-pick-foot button { flex: 1; padding: 0.65rem; border-radius: 10px; font-size: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: white; cursor: pointer; }
.sp-pick-foot .go { flex: 2; background: #3b82f6; border-color: #3b82f6; font-weight: 700; }
.sp-pick-foot .go:disabled { background: rgba(59, 130, 246, 0.4); border-color: transparent; cursor: default; }

/* ---- Institutions (InstitutionsWorkspace.jsx) ---- */
.in { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.in-panel { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.035); }
.in-pill { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.58); border-radius: 999px; padding: 0.16rem 0.46rem; font-size: 0.65rem; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.in-pill.live { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.28); color: #fde68a; }
.in-pill.good { background: rgba(34, 197, 94, 0.11); border-color: rgba(34, 197, 94, 0.24); color: #86efac; }
.in-pill.bad { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.22); color: #fca5a5; }
.in-emblem { border-radius: 11px; display: grid; place-items: center; background: var(--oh-grey-raised); border: 1px solid var(--oh-grey-border); font-size: 0.64rem; font-weight: 850; color: var(--oh-grey-text); flex-shrink: 0; }
.in-bar { padding: 0.55rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; flex-wrap: wrap; }
.in-toggle { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 0.28rem 0.55rem; font-size: 0.62rem; background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.55); cursor: pointer; }
.in-toggle.on { background: var(--oh-grey-selected); color: var(--oh-grey-text); }
.in-found { margin-left: auto; border: 1px solid var(--oh-grey-border-strong); border-radius: 8px; background: var(--oh-grey-raised); color: var(--oh-grey-text); padding: 0.32rem 0.58rem; font-size: 0.64rem; font-weight: 780; cursor: pointer; }
.in-cards { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0.75rem 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-content: start; gap: 0.55rem; }
.in-card { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.03); width: 100%; display: flex; gap: 0.7rem; align-items: center; text-align: left; padding: 0.7rem; color: white; cursor: pointer; font-family: sans-serif; }
.in-card:hover { border-color: var(--oh-grey-border-strong); }
.in-cardtext { flex: 1; min-width: 0; }
.in-name { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.in-name b { font-size: 0.8rem; line-height: 1.25; }
.in-name em { margin-left: auto; font-style: normal; font-size: 0.57rem; color: rgba(255, 255, 255, 0.3); }
.in-sub { display: block; font-size: 0.62rem; color: rgba(255, 255, 255, 0.45); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-chev { color: rgba(255, 255, 255, 0.28); }
.in-empty { grid-column: 1 / -1; text-align: center; font-size: 0.78rem; color: rgba(255, 255, 255, 0.3); padding: 2rem; }
.in-form { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: 0.85rem; }
.in-kicker { font-size: 0.64rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.09em; color: var(--oh-grey-muted); }
.in-form h4, .in-h { margin: 0; font-size: 1rem; font-weight: 820; }
.in-h { font-size: 0.78rem; font-weight: 780; margin-top: 0.15rem; }
.in-form p { margin: 0; font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); }
.in-grid { padding: 0.9rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.in-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.66rem; color: rgba(255, 255, 255, 0.58); font-weight: 650; }
.in-grid label.wide { grid-column: 1 / -1; }
.in-field { width: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: rgba(0, 0, 0, 0.2); color: white; padding: 0.48rem 0.56rem; font-size: 0.68rem; font-family: inherit; resize: vertical; }
.in-field option { background: #18181b; }
.in-formfoot { display: flex; justify-content: flex-end; gap: 0.5rem; }
.in-formfoot button, .in-bizfoot button, .in-btns button { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.035); color: rgba(255, 255, 255, 0.78); border-radius: 8px; padding: 0.42rem 0.64rem; font-size: 0.66rem; cursor: pointer; font-family: sans-serif; }
.in-formfoot .go, .in-bizfoot .go, .in-btns .go { background: var(--oh-grey-raised); border-color: var(--oh-grey-border-strong); color: var(--oh-grey-text); font-weight: 780; }
.in-btns .amber { border-color: rgba(245, 158, 11, 0.24); background: rgba(245, 158, 11, 0.075); color: #fde68a; }
.in-head { padding: 0.9rem 1rem 0.78rem; border-bottom: 1px solid rgba(255, 255, 255, 0.055); display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
.in-back { background: none; border: 0; font-size: 1.08rem; color: rgba(255, 255, 255, 0.55); cursor: pointer; padding: 0 0.2rem; }
.in-headtext { flex: 1; min-width: 0; }
.in-headtext .in-name b { font-size: 1.04rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-headtext .in-sub { font-size: 0.65rem; }
.in-purpose { font-size: 0.7rem; color: rgba(255, 255, 255, 0.62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44rem; margin-top: 0.2rem; }
.in-facts { padding: 0.65rem 1rem 0.7rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; flex-shrink: 0; }
.in-facts > div { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 0.62rem 0.72rem; background: rgba(20, 20, 24, 0.72); min-width: 0; }
.in-facts small { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.065em; color: rgba(255, 255, 255, 0.4); }
.in-facts b { display: block; margin-top: 0.18rem; font-size: 0.76rem; font-weight: 740; color: rgba(255, 255, 255, 0.88); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-tabs { display: flex; flex-wrap: wrap; gap: 0.08rem; padding: 0 0.78rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }
.in-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; color: rgba(255, 255, 255, 0.52); padding: 0.58rem 0.68rem 0.62rem; font-size: 0.68rem; font-weight: 730; cursor: pointer; white-space: nowrap; }
.in-tab.on { border-bottom-color: rgba(231, 231, 234, 0.72); color: var(--oh-grey-text); }
.in-action { display: flex; align-items: center; justify-content: space-between; margin: 0.55rem 1rem 0; padding: 0.58rem 0.7rem; border: 1px solid rgba(245, 158, 11, 0.28); border-radius: 10px; background: rgba(245, 158, 11, 0.08); color: #fde68a; font-size: 0.62rem; font-weight: 700; cursor: pointer; text-align: left; flex-shrink: 0; }
.in-action small { display: block; font-size: 0.59rem; font-weight: 850; color: rgba(253, 230, 138, 0.7); text-transform: uppercase; }
.in-action em { font-style: normal; }
.in-content { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0.8rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.in-content > * { flex-shrink: 0; }
.in-content.council { padding: 0.55rem 1rem 0.8rem; overflow: hidden; }
.in-content.council > * { flex-shrink: 1; }
.in-over { max-width: 56rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.in-business { padding: 1rem; background: rgba(255, 255, 255, 0.025); border-color: rgba(255, 255, 255, 0.075); }
.in-business.has { border-color: var(--oh-grey-border-strong); }
.in-bizrow { display: flex; gap: 0.75rem; }
.in-bizic { width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--oh-grey-raised); display: grid; place-items: center; font-size: 1rem; color: rgba(231, 231, 234, 0.72); flex-shrink: 0; }
.in-bizrow b { display: block; font-size: 0.88rem; font-weight: 780; margin-top: 0.15rem; }
.in-bizrow p { margin: 0.25rem 0 0.4rem; font-size: 0.67rem; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }
.in-bizfoot { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.8rem; padding-top: 0.72rem; border-top: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; }
.in-bizfoot a, .in-acthead a { margin-left: auto; font-size: 0.62rem; color: rgba(231, 231, 234, 0.72); cursor: pointer; }
.in-activity { padding: 0.9rem 1rem; }
.in-acthead { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.in-acthead b { font-size: 0.78rem; }
.in-acthead small { font-size: 0.64rem; color: rgba(255, 255, 255, 0.32); }
.in-act { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center; padding: 0.48rem 0; border-top: 1px solid rgba(255, 255, 255, 0.055); }
.in-acthead + .in-act { border-top: 0; }
.in-act i { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.in-act b { display: block; font-size: 0.68rem; font-weight: 710; color: rgba(255, 255, 255, 0.82); }
.in-act small { display: block; font-size: 0.64rem; color: rgba(255, 255, 255, 0.4); }
.in-act em { font-style: normal; font-size: 0.61rem; color: rgba(255, 255, 255, 0.28); }
.in-none { font-size: 0.67rem; color: rgba(255, 255, 255, 0.3); }
.in-none.center { text-align: center; padding: 2rem 0.5rem; }
.in-table { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.45rem; }
.in-table > b { font-size: 0.76rem; font-weight: 780; }
.in-table > small { font-size: 0.62rem; color: rgba(255, 255, 255, 0.42); }
.in-btns { display: flex; gap: 0.45rem; }
.in-proposal, .in-decision, .in-charter, .in-doc { padding: 0.72rem; border-color: var(--oh-grey-border); background: rgba(255, 255, 255, 0.026); }
.in-proposal.live { border-color: rgba(245, 158, 11, 0.32); background: rgba(250, 207, 133, 0.048); }
.in-proposal .in-name b, .in-decision .in-name b { font-size: 0.74rem; }
.in-summary { font-size: 0.65rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.3rem; line-height: 1.45; }
.in-meta { font-size: 0.61rem; color: rgba(255, 255, 255, 0.32); margin: 0.3rem 0; }
.in-votes { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.in-votes button { border: 1px solid var(--oh-grey-border); border-radius: 8px; background: rgba(255, 255, 255, 0.055); padding: 0.3rem 0.5rem; font-size: 0.64rem; font-weight: 700; color: white; cursor: pointer; }
.in-votes button:hover { background: rgba(255, 255, 255, 0.1); }
.in-tally { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.in-tally span { min-width: 4.2rem; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 9px; background: rgba(255, 255, 255, 0.035); padding: 0.48rem 0.58rem; }
.in-tally b { display: block; font-size: 0.78rem; font-weight: 820; }
.in-tally small { display: block; font-size: 0.58rem; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); }
.in-charter .in-name { margin: 0.25rem 0; }
.in-charter .in-name b { font-size: 0.86rem; font-weight: 780; }
.in-fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin: 0.5rem 0; }
.in-fieldgrid small { display: block; font-size: 0.61rem; text-transform: uppercase; color: rgba(255, 255, 255, 0.34); }
.in-fieldgrid span { display: block; font-size: 0.66rem; color: rgba(255, 255, 255, 0.62); margin-top: 0.1rem; }
.in-rule { display: flex; align-items: center; gap: 0.45rem; padding: 0.58rem 0.65rem; margin-top: 0.4rem; }
.in-rule b { font-size: 0.62rem; font-weight: 760; flex: 1; }
.in-rule small { font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); }
.in-member { display: flex; align-items: center; gap: 0.5rem; padding: 0.62rem 0.72rem; }
.in-member b { flex: 1; font-size: 0.69rem; }
.in-member small { font-size: 0.6rem; color: rgba(255, 255, 255, 0.35); }
.in-docbody { font-size: 0.65rem; color: rgba(255, 255, 255, 0.6); white-space: pre-wrap; margin-top: 0.4rem; line-height: 1.5; }
.in-council { flex: 1; min-height: 0; display: flex; flex-direction: column; background: rgba(7, 7, 10, 0.22); border-color: var(--oh-grey-border); overflow: hidden; }
.wr-sides { display: none; }
.wr-fold { display: none; }

/* ---- the Actions panel (actions.jsx): Actions and Projects in the diplomacy panel's tab strip ---- */
.ac { width: 26.25rem; max-width: calc(100% - 1rem); height: min(calc(100% - var(--gx-top) - 9rem), max(calc(100% - var(--gx-top) - 16rem), 30rem)); }
.ac-head { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.07); display: flex; gap: 0.5rem; justify-content: space-between; padding: 0.8rem 1rem 0.65rem; flex-shrink: 0; }
.ac-tabs { display: flex; gap: 0.35rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ac-tab { font-size: 0.8rem; padding: 0.36rem 0.74rem; }
.ac-tab .dp-count { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.ac-tab.on .dp-count { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ac-board { display: flex; flex: 1; flex-direction: column; gap: 0.85rem; min-height: 0; overflow-y: auto; padding: 0.95rem 1.25rem 1.25rem; scrollbar-width: none; }
.ac-board > * { flex-shrink: 0; }
.ac-board-sub { color: rgba(255, 255, 255, 0.45); font-size: 0.75rem; line-height: 1.45; margin: 0; }
.ac-find { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; color: white; font-family: sans-serif; font-size: 0.8rem; outline: none; padding: 0.5rem 0.75rem; width: 100%; }
.ac-find:focus { border-color: rgba(255, 255, 255, 0.25); }
.ac-find::placeholder { color: rgba(255, 255, 255, 0.4); }
.ac-body { display: flex; flex-direction: column; gap: 0.875rem; padding: 0.875rem 1.25rem; flex: 1; min-height: 0; overflow: hidden; }
.ac-body > * { flex-shrink: 0; }
.ac-setgoal { background: none; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 10px; color: #e4e4e7; cursor: pointer; font-family: sans-serif; font-size: 0.78rem; padding: 0.5rem 0.9rem; text-align: left; width: 100%; }
.ac-goal { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.55rem 0.75rem; }
.ac-goal.editing { border-color: rgba(255, 255, 255, 0.18); gap: 0.45rem; padding: 0.6rem 0.75rem; }
.ac-goal-row { align-items: center; display: flex; justify-content: space-between; }
.ac-goal-label { color: rgba(255, 255, 255, 0.9); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ac-goal-edit { background: none; border: none; color: rgba(255, 255, 255, 0.28); cursor: pointer; font-family: sans-serif; font-size: 0.74rem; padding: 0; }
.ac-goal-edit:hover { color: rgba(255, 255, 255, 0.6); }
.ac-goal-text { color: rgba(255, 255, 255, 0.82); display: -webkit-box; font-size: 0.8rem; line-height: 1.45; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.ac-goal textarea { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; color: white; font-family: sans-serif; font-size: 0.8rem; line-height: 1.45; outline: none; padding: 0.5rem 0.65rem; resize: vertical; width: 100%; }
.ac-goal-btns { align-items: center; display: flex; gap: 0.4rem; justify-content: flex-end; }
.ac-gbtn { background: none; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; color: rgba(255, 255, 255, 0.9); cursor: pointer; font-family: sans-serif; font-size: 0.74rem; font-weight: 600; padding: 0.3rem 0.7rem; }
.ac-gbtn.primary { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }
.ac-gbtn.primary.off { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.4); cursor: not-allowed; }
.ac-pair { display: flex; gap: 0.5rem; }
.ac-brain, .ac-suggest { flex: 1 1 0; min-width: 0; border-radius: 10px; cursor: pointer; font-family: sans-serif; transition: background 0.15s, border-color 0.15s; }
.ac-brain { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); color: #e4e4e7; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.55rem 1rem; }
.ac-brain:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }
.ac-suggest { align-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.82); display: flex; font-size: 0.8rem; gap: 0.5rem; justify-content: center; padding: 0.52rem 1rem; }
.ac-suggest:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); }
.ac-spin { animation: ac-spin 0.7s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ac-sec { display: flex; flex-direction: column; min-height: 0; }
.ac-body > .ac-sec.open { flex: 1; overflow: hidden; flex-shrink: 1; }
.ac-section { align-items: center; background: none; border: none; color: rgba(255, 255, 255, 0.9); cursor: pointer; display: flex; flex-shrink: 0; gap: 0.5rem; padding: 0.3rem 0; text-align: left; width: 100%; font-family: sans-serif; }
.ac-section .tri { color: rgba(255, 255, 255, 0.5); display: inline-block; font-size: 0.7rem; transition: transform 0.15s; }
.ac-section .tri.on { transform: rotate(90deg); }
.ac-section .ti { flex: 1; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ac-section span:last-child { color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; }
.ac-title { color: rgba(255, 255, 255, 0.9); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; margin: 0 0 0.5rem; text-transform: uppercase; }
.ac-list { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.ac-list.wide { gap: 0.5rem; }
.ac-list > * { flex-shrink: 0; }
.ac-none { color: rgba(255, 255, 255, 0.35); font-size: 0.8rem; font-style: italic; margin: 0; }
.ac-item { align-items: center; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; color: rgba(255, 255, 255, 0.85); display: flex; gap: 0.5rem; justify-content: space-between; line-height: 1.75; padding: 0.55rem 0.85rem; transition: background 0.15s; }
.ac-item:hover { background-color: rgba(255, 255, 255, 0.08); }
.ac-item-text { flex: 1; min-width: 0; }
.ac-item .t { color: rgba(255, 255, 255, 0.95); font-size: 0.78rem; font-weight: 700; margin-bottom: 0.15rem; }
.ac-item .l { color: rgba(255, 255, 255, 0.82); font-size: 0.82rem; white-space: pre-wrap; word-break: break-word; }
.ac-item .k { color: rgba(255, 255, 255, 0.38); font-size: 0.68rem; letter-spacing: 0.06em; margin-top: 0.25rem; text-transform: uppercase; }
.ac-del { align-items: center; background: none; border: none; border-radius: 6px; color: rgba(239, 68, 68, 0.8); cursor: pointer; display: flex; flex-shrink: 0; font-size: 1rem; line-height: 1; opacity: 0; padding: 0.18rem 0.3rem; pointer-events: none; transition: opacity 0.15s, color 0.15s, background 0.15s; }
.ac-item:hover .ac-del { opacity: 1; pointer-events: auto; background: rgba(239, 68, 68, 0.1); color: rgba(239, 68, 68, 0.95); }
@media (hover: none) { .ac-del { opacity: 1; pointer-events: auto; } }
.ac-topic { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.7rem 0.8rem; }
.ac-topic .t { color: rgba(255, 255, 255, 0.94); font-size: 0.8rem; font-weight: 700; }
.ac-topic .d { color: rgba(255, 255, 255, 0.55); font-size: 0.76rem; line-height: 1.5; margin-top: 0.2rem; }
.ac-topic-acts { display: flex; flex-direction: column; gap: 0.4rem; }
.ac-sugg { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; color: rgba(255, 255, 255, 0.9); cursor: pointer; font-family: sans-serif; padding: 0.55rem 0.7rem; text-align: left; }
.ac-sugg.queued { background: rgba(34, 197, 94, 0.12); border-color: rgba(74, 222, 128, 0.35); cursor: default; }
.ac-sugg .t { font-size: 0.76rem; font-weight: 700; color: inherit; }
.ac-sugg .x { color: rgba(255, 255, 255, 0.62); font-size: 0.74rem; line-height: 1.45; margin-top: 0.18rem; }
.ac-compose { align-items: center; background-color: rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; gap: 0.5rem; padding: 0.75rem 1rem; flex-shrink: 0; }
.ac-box { align-items: stretch; display: flex; flex: 1; position: relative; }
.ac-composer { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; color: white; font-family: sans-serif; font-size: 0.82rem; outline: none; padding: 0.7rem 2.8rem 0.7rem 0.85rem; resize: vertical; transition: border-color 0.2s; min-height: 3rem; line-height: 1.45; overflow-y: auto; width: 100%; }
.ac-composer:focus { border-color: rgba(255, 255, 255, 0.25); }
.ac-composer::placeholder { color: rgba(255, 255, 255, 0.4); }
.ac-improve { align-items: center; background: none; border: none; border-radius: 8px; color: rgba(255, 255, 255, 0.45); cursor: default; display: flex; height: 1.8rem; justify-content: center; padding: 0; position: absolute; right: 0.45rem; top: 0.55rem; width: 1.8rem; }
.ac-improve.on { color: #e4e4e7; cursor: pointer; }
.ac-send { align-items: center; background: rgba(59, 130, 246, 0.3); border: none; border-radius: 10px; color: white; cursor: not-allowed; display: flex; flex-shrink: 0; height: 2.2rem; justify-content: center; transition: background 0.15s; width: 2.2rem; }
.ac-send.on { background: #3b82f6; cursor: pointer; }
.ac-send.on:hover { background: #2563eb; }
@media (max-width: 700px) {
  .ac { width: calc(100% - 1rem); max-width: none; }
  /* scrollAsOne: on a phone the whole body scrolls. */
  .ac-body { overflow-y: auto; scrollbar-width: none; }
  .ac-body > .ac-sec.open { flex: 0 0 auto; overflow: visible; }
  .ac-list { flex: 0 0 auto; overflow: visible; }
}
@media (pointer: coarse) {
  .ac-composer { padding: 0.7rem 3rem 0.7rem 0.85rem; }
  .ac-improve { right: 0.125rem; top: 0.125rem; min-width: 44px; min-height: 44px; }
  .ac-send, .ac-del { min-width: 44px; min-height: 44px; }
  .ac-brain, .ac-suggest, .ac-section, .ac-setgoal, .ac-gbtn { min-height: 44px; }
}

/* ---- Rostra, the world's social network (social.jsx): the game's grey, and the accent for what is the
   player's and what can be pressed. A phone that rises from the dock, with a phone's proportions, as
   tall as the room above the dock allows; on a phone, the app alone (below). ---- */
.rs-dock { display: inline-flex; position: relative; }
.rs-dock .rs-badge { background: #2bc1f3; color: #06171d; font-weight: 800; }
.gx-panel.dock-panel.rs { aspect-ratio: 9 / 19; background-color: #17171a; border: 0; border-radius: 2.6rem; box-shadow: 0 0 0 1px #3a3a40, 0 0 0 3px #0e0e10, 0 24px 60px rgba(0, 0, 0, 0.55); box-sizing: border-box; color: #f4f4f5; height: min(46rem, calc(100% - var(--gx-top) - 9rem)); max-width: calc(100% - 1rem); min-height: 24rem; min-width: 17.5rem; overflow: visible; padding: 0.5rem; width: auto; }
.rs-screen { background: #0b0b0d; border-radius: 2.1rem; display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.rs-side { background: #2c2c31; position: absolute; width: 3px; }
.rs-side.one { border-radius: 2px 0 0 2px; height: 1.8rem; left: -3px; top: 6.2rem; }
.rs-side.two { border-radius: 2px 0 0 2px; height: 3rem; left: -3px; top: 9rem; }
.rs-side.three { border-radius: 0 2px 2px 0; height: 4.4rem; right: -3px; top: 9.6rem; }
.rs-status { align-items: center; display: grid; flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; grid-template-columns: 1fr auto 1fr; height: 2.5rem; padding: 0.3rem 1.35rem 0; }
.rs-status > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-island { background: #000; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); display: block; height: 1.45rem; width: 5.2rem; }
.rs-marks { align-items: center; display: flex; gap: 0.28rem; justify-content: flex-end; }
.rs-head { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-shrink: 0; gap: 0.6rem; padding: 0.25rem 0.95rem 0.6rem; }
.rs-head > svg { flex-shrink: 0; }
.rs-name { min-width: 0; }
.rs-name b { display: block; font-size: 1.05rem; font-weight: 900; letter-spacing: 0.04em; line-height: 1.05; }
.rs-name small { color: rgba(244, 244, 245, 0.38); display: block; font-size: 0.62rem; margin-top: 0.1rem; }
.rs-day { color: rgba(244, 244, 245, 0.38); display: none; font-size: 0.68rem; margin-left: auto; white-space: nowrap; }
.rs-x { align-items: center; background: rgba(255, 255, 255, 0.06); border: none; border-radius: 999px; color: rgba(244, 244, 245, 0.62); cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 2rem; justify-content: center; margin-left: auto; padding: 0; width: 2rem; }
.rs-x:hover { color: white; background: rgba(255, 255, 255, 0.1); }
.rs-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
/* The tab bar along the foot of the screen, as such apps have it. */
.rs-bar { border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-shrink: 0; padding: 0.3rem 0.35rem 0.05rem; }
.rs-tab { align-items: center; background: none; border: none; color: rgba(244, 244, 245, 0.38); cursor: pointer; display: flex; flex: 1 1 0; flex-direction: column; font-family: sans-serif; font-size: 0.6rem; font-weight: 650; gap: 0.18rem; min-width: 0; padding: 0.3rem 0.1rem; }
.rs-tab.on { color: #f4f4f5; font-weight: 800; }
.rs-ticon { display: inline-flex; position: relative; }
.rs-tlabel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-tcount { align-items: center; background: #2bc1f3; border: 1.5px solid #0b0b0d; border-radius: 999px; box-sizing: border-box; color: #06171d; display: inline-flex; font-size: 0.55rem; font-weight: 800; height: 1.05rem; justify-content: center; min-width: 1.05rem; padding: 0 0.2rem; position: absolute; right: -0.6rem; top: -0.4rem; }
.rs-home { display: flex; flex: 0 0 auto; justify-content: center; padding: 0.3rem 0 0.45rem; }
.rs-home i { background: rgba(244, 244, 245, 0.85); border-radius: 999px; display: block; height: 0.26rem; width: 6.6rem; }
.rs-compose, .rs-post { border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; gap: 0.65rem; padding: 0.8rem 1rem; }
.rs-compose { padding: 0.85rem 1rem; }
.rs-main { flex: 1; min-width: 0; }
.rs-av { position: relative; flex-shrink: 0; width: 2.4rem; height: 2.4rem; }
.rs-av > span:first-child { align-items: center; background: #2a2a2f; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: rgba(244, 244, 245, 0.62); display: flex; font-size: 0.82rem; font-weight: 800; height: 100%; justify-content: center; letter-spacing: 0.02em; width: 100%; box-sizing: border-box; }
.rs-av.mine > span:first-child { background: rgba(43, 193, 243, 0.14); border-color: rgba(43, 193, 243, 0.45); color: #2bc1f3; }
.rs-av .rs-flag { position: absolute; right: -0.2rem; bottom: -0.12rem; width: 1.25rem; height: 0.86rem; border: 1.5px solid #18181b; border-radius: 3px; overflow: hidden; }
.rs-av .rs-flag.across { flex-direction: column; }
.rs-av.small { width: 1.3rem; height: 1.3rem; }
.rs-av.small > span:first-child { font-size: 0.44rem; }
.rs-av.small .rs-flag { width: 0.68rem; height: 0.47rem; border-width: 1px; border-radius: 2px; }
.rs-top { align-items: baseline; display: flex; gap: 0.4rem; min-width: 0; }
.rs-top b { font-size: 0.84rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-top small, .rs-qtop small { color: rgba(244, 244, 245, 0.38); flex-shrink: 0; font-size: 0.7rem; margin-left: auto; }
.rs-you { background: rgba(43, 193, 243, 0.14); border: 1px solid rgba(43, 193, 243, 0.45); border-radius: 999px; color: #2bc1f3; flex-shrink: 0; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.05rem 0.4rem; text-transform: uppercase; }
.rs-meta { color: rgba(244, 244, 245, 0.38); font-size: 0.7rem; margin-top: 0.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-text { font-size: 0.84rem; line-height: 1.5; margin-top: 0.35rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.rs-quoted { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; margin-top: 0.55rem; padding: 0.55rem 0.7rem; }
.rs-quoted.gone { border-color: rgba(255, 255, 255, 0.08); color: rgba(244, 244, 245, 0.38); font-size: 0.74rem; font-style: italic; }
.rs-qtop { align-items: center; display: flex; gap: 0.45rem; min-width: 0; }
.rs-qtop b { font-size: 0.76rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-qrole { color: rgba(244, 244, 245, 0.38); font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-qtop small { font-size: 0.68rem; }
.rs-qtext { color: rgba(244, 244, 245, 0.62); display: -webkit-box; font-size: 0.78rem; line-height: 1.45; margin-top: 0.3rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; white-space: pre-wrap; }
.rs-acts { align-items: center; display: flex; gap: 1.1rem; margin-top: 0.55rem; }
.rs-act, .rs-count { align-items: center; background: none; border: none; color: rgba(244, 244, 245, 0.38); display: inline-flex; font-family: inherit; font-size: 0.72rem; gap: 0.3rem; padding: 0; }
.rs-act { cursor: pointer; }
.rs-act:hover { color: #2bc1f3; }
.rs-wait { color: rgba(244, 244, 245, 0.38); font-size: 0.7rem; font-style: italic; }
.rs-as { color: rgba(244, 244, 245, 0.38); font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-as b { color: rgba(244, 244, 245, 0.62); font-weight: 700; }
.rs-input { background: transparent; border: none; box-sizing: border-box; color: #f4f4f5; font-family: sans-serif; font-size: 0.9rem; line-height: 1.45; margin-top: 0.3rem; outline: none; padding: 0; resize: none; width: 100%; }
.rs-input::placeholder { color: rgba(244, 244, 245, 0.38); }
.rs-quoting { position: relative; }
.rs-unquote { align-items: center; background: #18181b; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: rgba(244, 244, 245, 0.62); cursor: pointer; display: flex; height: 1.4rem; justify-content: center; padding: 0; position: absolute; right: -0.35rem; top: 0.2rem; width: 1.4rem; }
.rs-note { color: #2bc1f3; font-size: 0.72rem; margin-top: 0.45rem; }
.rs-cfoot { align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.5rem; padding-top: 0.5rem; }
.rs-len { color: rgba(244, 244, 245, 0.38); font-size: 0.7rem; }
.rs-len.over { color: #f87171; }
.rs-send { background: rgba(43, 193, 243, 0.25); border: none; border-radius: 999px; color: #06171d; cursor: default; font-family: sans-serif; font-size: 0.78rem; font-weight: 800; padding: 0.4rem 1.05rem; }
.rs-send.on { background: #2bc1f3; cursor: pointer; }
.rs-empty { color: rgba(244, 244, 245, 0.38); font-size: 0.78rem; font-style: italic; line-height: 1.5; margin: 0; padding: 1.2rem 1.1rem; }
.rs-post.fresh { animation: rs-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rs-post.fresh { animation: none; } }
/* On a phone the frame is already in the reader's hand: the app alone, risen from the dock as wide as the screen. */
@media (max-width: 700px) {
  .gx-panel.dock-panel.rs { aspect-ratio: auto; background-color: rgba(11, 11, 13, 0.97); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: var(--oh-hud-shadow); height: min(calc(100% - var(--gx-top) - 9rem), max(calc(100% - var(--gx-top) - 16rem), 30rem)); max-width: none; min-height: 10rem; min-width: 0; overflow: hidden; padding: 0; width: calc(100% - 1rem); }
  .rs-screen { background: transparent; border-radius: 0; }
  .rs-side, .rs-status, .rs-home { display: none; }
  .rs-head { padding: 0.6rem 0.9rem 0.55rem; }
  .rs-day { display: inline; }
  .rs-x { margin-left: 0; }
  .rs-bar { padding: 0.3rem 0.35rem 0.35rem; }
  .rs-tcount { border-color: #18181b; }
}
@media (pointer: coarse) {
  .rs-x, .rs-unquote, .rs-act, .rs-tab { min-width: 44px; min-height: 44px; justify-content: center; }
  .rs-unquote { min-width: 0; min-height: 0; }
  .rs-send { min-height: 44px; }
}

/* ---- the Advisor dossier (advisorDossier.css, AdvisorRecipients.jsx, AdvisorMic.jsx) ---- */
.gx-adv { background-color: #111d2a; }
.gx-adv-head { display: flex; align-items: center; gap: 0.55rem; min-height: 2.9rem; padding: 0.58rem 0.85rem; background: #0c1622; border-bottom: 1px solid rgba(139, 190, 219, 0.19); flex: 0 0 auto; }
.gx-adv-head .mark { color: #85cbe6; font-size: 1.04rem; line-height: 1; }
.gx-adv-head .title { color: #edf5fb; font-size: 0.76rem; font-weight: 850; letter-spacing: 0.095em; text-transform: uppercase; }
.gx-adv-head .sp { flex: 1; }
.gx-adv-hbtn { background: none; border: none; color: rgba(255, 255, 255, 0.4); font-size: 1.35rem; line-height: 1; padding: 0; display: flex; align-items: center; cursor: pointer; }
.gx-adv-hbtn.close { color: rgba(255, 255, 255, 0.55); padding: 0 0 0 0.5rem; }
.gx-adv-hbtn:hover { color: #eaf4fc; }
.gx-adv-recipients { background: #152434; border-bottom: 1px solid rgba(139, 190, 219, 0.19); padding: 0.62rem 0.8rem 0.7rem; flex: 0 0 auto; }
.gx-adv-rtop { display: flex; align-items: center; gap: 0.45rem; }
.gx-adv-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex: 1 1 auto; min-width: 0; min-height: 2.35rem; padding: 0.42rem 0.65rem; background: #20374a; border: 1px solid rgba(141, 194, 222, 0.27); border-radius: 6px; color: #f3f8fc; font-size: 0.8rem; font-weight: 800; text-align: left; cursor: pointer; }
.gx-adv-trigger:hover, .gx-adv-trigger[aria-expanded="true"] { border-color: rgba(133, 203, 230, 0.63); background: #29485e; }
.gx-adv-trigger .chev { color: #85cbe6; }
.gx-adv-contact { background: transparent; border: 1px solid rgba(141, 194, 222, 0.2); border-radius: 5px; color: #b2c7d6; font-size: 0.66rem; font-weight: 700; min-height: 2.15rem; padding: 0.35rem 0.48rem; white-space: nowrap; cursor: pointer; }
.gx-adv-contact:hover { background: rgba(106, 159, 191, 0.11); border-color: rgba(141, 194, 222, 0.53); color: #f1f8fc; }
.gx-adv-list { margin-top: 0.6rem; padding: 0.15rem 0.08rem; }
.gx-adv-row { display: block; width: 100%; text-align: left; background: rgba(69, 137, 176, 0.17); border: 0; border-left: 2px solid #85cbe6; color: #fff; font-size: 0.75rem; min-height: 2.6rem; padding: 0.45rem 0.44rem; cursor: pointer; }
.gx-adv-row b { font-weight: 750; }
.gx-adv-row small { display: block; color: #8fa6b8; font-size: 0.64rem; margin-top: 0.1rem; }
.gx-adv .gx-msgs { gap: 1.25rem; padding: 0.95rem 0.88rem 1.2rem; scrollbar-width: thin; scrollbar-color: #304d63 transparent; }
.gx-adv .gx-msg-label { color: #85cbe6; font-size: 0.67rem; font-weight: 850; letter-spacing: 0.025em; margin-bottom: 0.35rem; }
.gx-adv-body { box-sizing: border-box; width: 100%; max-width: 100%; border-left: 2px solid #3b6681; padding: 0.05rem 0.45rem 0.12rem 0.8rem; color: #e1eaf2; font-size: 0.855rem; line-height: 1.63; overflow-wrap: anywhere; white-space: pre-wrap; }
.gx-adv-body.user { align-self: flex-end; width: auto; max-width: 89%; background: #27475e; border: 1px solid rgba(133, 203, 230, 0.28); border-radius: 7px 7px 3px 7px; color: #f1f8fc; padding: 0.65rem 0.78rem; }
.gx-adv .gx-msg-time { color: #7993a8; font-size: 0.62rem; margin-top: 0.32rem; }
.gx-msg.thinking { gap: 0.25rem; }
.gx-adv-thinklabel { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); }
.gx-adv-thinking { background: rgba(80, 128, 155, 0.1); border-left: 2px solid #538bad; color: #b0c7d8; font-size: 0.82rem; padding: 0.45rem 0.7rem; }
.gx-adv-thinking span { opacity: 0.6; }
.gx-adv-composer { position: relative; display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.72rem 0.82rem; background: #101a26; border-top: 1px solid rgba(139, 190, 219, 0.19); flex: 0 0 auto; }
.gx-adv-field { display: flex; align-items: flex-end; flex: 1 1 auto; min-width: 0; background: #192b3b; border: 1px solid rgba(133, 183, 210, 0.3); border-radius: 6px; transition: background-color 0.15s, border-color 0.15s; }
.gx-adv-field:focus-within { background: #1c3246; border-color: #82c8e5; box-shadow: 0 0 0 1px rgba(130, 200, 229, 0.2); }
.gx-adv-field textarea { flex: 1 1 auto; min-width: 0; min-height: 2.6rem; padding: 0.57rem 0.72rem; background: transparent; border: 0; outline: none; resize: none; color: #f0f6fa; font-family: inherit; font-size: 0.85rem; line-height: 1.5; overflow-y: auto; }
.gx-adv-mic { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 2rem; margin: 0.3rem 0.3rem 0.3rem 0; padding: 0; background: transparent; border: 0; border-radius: 999px; color: #8fa3b3; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.gx-adv-mic:hover { background: rgba(255, 255, 255, 0.07); color: #f0f6fa; }
.gx-adv-send { display: flex; align-items: center; justify-content: center; flex: 0 0 2.6rem; height: 2.6rem; padding: 0; background: #326e93; border: 1px solid #4c94b9; border-radius: 6px; color: #fff; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.gx-adv-send:hover { background: #4285a9; border-color: #86cce8; }
.gx-adv-send:disabled { background: #243b4d; border-color: #314c60; color: #91a5b5; opacity: 0.7; cursor: not-allowed; }

/* ---- the Country dossier (countryDossier.css, stats.jsx, PoliticalOverview.jsx) ---- */
.gx-dos { color: white; }
.gx-dos * { box-sizing: border-box; }
.gx-dos-toolbar { display: flex; align-items: center; gap: 0.55rem; padding: 0.65rem 0.8rem; min-height: 48px; position: relative; z-index: 2; background: rgba(10, 16, 25, 0.74); border-bottom: 1px solid rgba(156, 188, 211, 0.13); flex: 0 0 auto; }
.gx-dos-toolbar .mark { color: #8ecbe8; font-size: 1.1rem; line-height: 1; }
.gx-dos-toolbar .title { color: #d7e5f0; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.gx-dos-toolbar .sp { flex: 1; }
.gx-dos-close { background: none; border: none; color: rgba(255, 255, 255, 0.55); font-size: 1.35rem; line-height: 1; padding: 0 0 0 0.5rem; display: flex; align-items: center; cursor: pointer; }
.gx-dos-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1rem 1.25rem; background: #141c27; scrollbar-width: thin; scrollbar-color: rgba(148, 187, 209, 0.3) transparent; }
.gx-dos-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 -1rem; padding: 1.25rem 1.02rem 1.2rem; background: #1b3248; border-bottom: 1px solid rgba(128, 180, 213, 0.25); display: flex; align-items: flex-start; gap: 0.86rem; }
.gx-dos-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.25; background: rgba(159, 208, 232, 0.16); clip-path: polygon(78% 0, 100% 0, 100% 100%, 95% 100%); }
.gx-dos-hero::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 42%; background: #78bedc; pointer-events: none; }
.gx-dos-flag { width: 4.65rem; height: 3.1rem; border-radius: 5px; border: 1px solid rgba(214, 235, 247, 0.2); background: rgba(1, 9, 18, 0.35); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); overflow: hidden; flex-shrink: 0; display: flex; }
.gx-dos-flag .gx-tricolour { width: 100%; height: 100%; }
.gx-dos-id { flex: 1; min-width: 0; }
.gx-dos-namerow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.gx-dos-name { flex: 1 1 10rem; min-width: 0; font-size: 1.3rem; font-weight: 850; line-height: 1.16; color: #eef3f7; letter-spacing: -0.025em; }
.gx-dos-yours { background: rgba(245, 158, 11, 0.18); border: 1px solid rgba(245, 158, 11, 0.5); border-radius: 999px; color: #fbbf24; font-size: 0.62rem; font-weight: 700; padding: 0.14rem 0.5rem; flex-shrink: 0; }
.gx-dos-place { color: rgba(255, 255, 255, 0.7); font-size: 0.76rem; margin-top: 0.15rem; }
.gx-dos-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.28rem; }
.gx-dos-chips span { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: rgba(255, 255, 255, 0.76); font-size: 0.61rem; padding: 0.1rem 0.38rem; }
.gx-dos-chips .tier { background: rgba(59, 130, 246, 0.16); border-color: rgba(96, 165, 250, 0.38); color: #bfdbfe; font-weight: 700; }
.gx-dos-refresh { font-size: 1rem; color: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
.gx-dos-tabs { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 -1rem; padding: 0 0.65rem; background: rgba(14, 20, 30, 0.97); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(143, 183, 210, 0.17); }
.gx-dos-tabs button { display: flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0.55rem 0.3rem; min-height: 2.8rem; font-size: 0.68rem; font-family: sans-serif; color: rgba(194, 211, 224, 0.58); font-weight: 680; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.gx-dos-tabs button.on { color: #eaf7fd; font-weight: 850; border-bottom-color: #86c9e7; }
.gx-dos-tabs button:hover { background: rgba(115, 165, 198, 0.1); color: #e7f3fa; }
.gx-dos-content { padding-bottom: 1rem; font-variant-numeric: tabular-nums; }
.gx-dos-content[data-view="diplomacy"] { padding-top: 0.9rem; }
.gx-dos-content[data-view="ranking"] { padding-top: 0.45rem; }
.gx-dos-hint { color: rgba(255, 255, 255, 0.35); font-size: 0.7rem; margin: 1rem 0; }
.gx-dos-label { color: #aac8dc; font-size: 0.65rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.gx-dos-title { color: #adcadc; font-size: 0.67rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; margin: 1.3rem 0 0.6rem; border-bottom: 1px solid rgba(146, 186, 210, 0.15); padding-bottom: 0.48rem; }
.gx-dos-title.econ { margin: 1.9rem 0 0.9rem; }
.gx-dos-card { background-color: rgba(18, 32, 47, 0.44); border: 1px solid rgba(151, 190, 214, 0.11); border-radius: 8px; padding: 0.6rem 0.7rem; }
.gx-dos-card.stab { margin-top: 1rem; }
.gx-dos-card .gx-row, .gx-dos-intel .gx-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem; }
.gx-dos-card .cap { color: rgba(255, 255, 255, 0.55); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.gx-dos-card .val { font-size: 0.85rem; font-weight: 800; }
.gx-dos-intel { margin-top: 0.6rem; border-bottom: 1px solid rgba(156, 188, 211, 0.13); padding: 0.58rem 0.48rem 0.85rem; }
.gx-dos-intel .gx-row { margin-bottom: 0.58rem; gap: 0.5rem; }
.gx-dos-intel .cap { color: #91a3b4; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.gx-dos-intel .val { color: #eef3f7; font-size: 0.95rem; font-weight: 850; }
.gx-dos-indices { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.gx-dos-index { border-bottom: 1px solid rgba(156, 188, 211, 0.13); padding: 0.6rem 0.48rem; min-width: 0; }
.gx-dos-index:hover, .gx-dos-econ .cell:hover { background: rgba(95, 160, 192, 0.075); }
.gx-dos-index .lab { color: rgba(255, 255, 255, 0.72); font-size: 0.7rem; min-height: 1.9em; }
.gx-dos-index .num { font-size: 1.12rem; font-weight: 800; margin: 0.25rem 0 0.5rem; letter-spacing: -0.01em; }
.gx-dos-index .num span { color: rgba(255, 255, 255, 0.4); font-size: 0.62rem; font-weight: 600; letter-spacing: 0; }
.gx-dos-card .k, .gx-dos-econ .k { color: rgba(255, 255, 255, 0.45); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.3rem; }
.gx-dos-card .pop { color: #e7e7e9; font-size: 1.15rem; font-weight: 800; }
.gx-dos-econ { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.gx-dos-econ .cell { border-bottom: 1px solid rgba(156, 188, 211, 0.13); padding: 0.64rem 0.48rem; }
.gx-dos-econ .v { font-size: 1.05rem; font-weight: 800; }
.gx-dos-econ .s { color: rgba(255, 255, 255, 0.4); font-size: 0.68rem; margin-top: 0.15rem; }
.gx-dos-currency { color: rgba(255, 255, 255, 0.35); font-size: 0.66rem; margin-top: 0.45rem; }
.gx-dos-card.gdp { margin-top: 0.9rem; }
.gx-dos-card.gdp .t { color: rgba(255, 255, 255, 0.7); font-size: 0.74rem; margin-bottom: 0.5rem; }
.gx-dos-card.gdp .stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; }
.gx-dos-card.gdp .legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-top: 0.5rem; }
.gx-dos-card.gdp .legend span { display: flex; align-items: center; gap: 0.3rem; color: rgba(255, 255, 255, 0.6); font-size: 0.68rem; }
.gx-dos-card.gdp .legend i { width: 7px; height: 7px; border-radius: 2px; }
.gx-dos-card.mil .gx-row { margin-bottom: 0.2rem; }
.gx-dos-card .mval { font-size: 1.05rem; font-weight: 800; }
.gx-dos-card.mil .rows { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.45rem; }
.gx-dos-card .mrow { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 3.2rem; gap: 0.5rem; align-items: center; font-size: 0.72rem; color: rgba(255, 255, 255, 0.85); }
.gx-dos-card .mbar { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.gx-dos-card .mbar i { display: block; height: 100%; border-radius: 999px; }
.gx-dos-card .mbar b { position: absolute; left: 50%; top: -2px; width: 1px; height: 10px; background: rgba(255, 255, 255, 0.55); }
.gx-dos-card .mrow em { font-style: normal; font-weight: 800; text-align: right; }
.gx-dos-card .foot { color: rgba(255, 255, 255, 0.38); font-size: 0.62rem; line-height: 1.4; margin-top: 0.55rem; }
.gx-advanced.tracking { margin-top: 0.55rem; background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.08); color: #e7e7e9; gap: 0.7rem; }
.gx-advanced.tracking .ic { background: rgba(234, 179, 8, 0.12); border-color: rgba(250, 204, 21, 0.22); color: #fbbf24; font-size: 0.98rem; }
.gx-advanced.tracking small { color: rgba(255, 255, 255, 0.46); }
.gx-advanced.tracking small.names { color: rgba(255, 255, 255, 0.34); font-size: 0.6rem; }
.gx-advanced.tracking .ch { color: rgba(255, 255, 255, 0.5); font-size: 0.95rem; }
/* Diplomacy */
.gx-dos-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #1b2b3b; border-top: 1px solid rgba(145, 195, 220, 0.28); border-bottom: 1px solid rgba(156, 188, 211, 0.13); }
.gx-dos-summary > div { min-width: 0; padding: 0.67rem 0.64rem 0.7rem; border-right: 1px solid rgba(156, 188, 211, 0.13); }
.gx-dos-summary > div:last-child { border-right: 0; }
.gx-dos-summary small { display: block; color: #a2b6c6; font-size: 0.59rem; font-weight: 750; letter-spacing: 0.055em; line-height: 1.4; min-height: 2em; text-transform: uppercase; }
.gx-dos-summary b { display: block; font-size: 1.45rem; font-weight: 850; line-height: 1.18; margin-top: 0.28rem; }
.gx-dos-ledger { margin-top: 1.05rem; }
.gx-dos-ledger + .gx-dos-ledger { margin-top: 0.95rem; }
.gx-dos-ledger .lhead { display: flex; justify-content: space-between; align-items: baseline; gap: 0.55rem; padding: 0.5rem 0 0.45rem; border-bottom: 1px solid rgba(144, 181, 207, 0.28); color: #d2e0ec; font-size: 0.75rem; font-weight: 800; }
.gx-dos-ledger .lhead small { color: #8196a8; font-size: 0.6rem; font-weight: 600; }
.gx-dos-reltools { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 0.65rem 0.8rem; }
.gx-dos-reltools input { flex: 1; min-width: 0; min-height: 2rem; padding: 0.35rem 0.55rem; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 7px; color: #f4f4f5; font-size: 0.68rem; font-family: sans-serif; outline: none; }
.gx-dos-reltools input:focus { border-color: rgba(135, 201, 233, 0.5); background-color: #1e2a39; }
.gx-dos-reltools select { background: #242429; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 7px; color: #e4e4e7; font-size: 0.66rem; min-height: 2rem; max-width: 8.2rem; padding: 0.3rem; flex-shrink: 0; color-scheme: dark; }
.gx-dos-rel { border-bottom: 1px solid rgba(156, 188, 211, 0.095); }
.gx-dos-rel > button { display: flex; align-items: center; gap: 0.45rem; min-height: 2.35rem; padding: 0.42rem 0.65rem; width: 100%; background: none; border: 0; text-align: left; color: white; cursor: pointer; font-family: sans-serif; }
.gx-dos-rel > button:hover { background: rgba(103, 170, 210, 0.085); }
.gx-dos-rel > button.open { background: rgba(255, 255, 255, 0.035); }
.gx-dos-rel .rname { flex: 1; min-width: 0; color: rgba(255, 255, 255, 0.9); font-size: 0.73rem; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-dos-rel .sig { display: flex; flex-direction: column; align-items: flex-end; gap: 0.12rem; flex: 0 0 2.6rem; }
.gx-dos-rel .sig b { font-size: 0.81rem; font-weight: 850; }
.gx-dos-rel .meter { position: relative; display: block; width: 42px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.gx-dos-rel .meter .tick { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.22); }
.gx-dos-rel .meter .fill { position: absolute; top: 0; height: 100%; }
.gx-dos-rel .chev { color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; flex-shrink: 0; transition: transform 0.15s; }
.gx-dos-rel > button.open .chev { transform: rotate(180deg); }
.gx-dos-rel .rdetail { margin: 0 0 0.4rem 0.7rem; border-left: 2px solid rgba(138, 205, 230, 0.55); background: rgba(0, 0, 0, 0.14); padding: 0.55rem 0.7rem 0.65rem; }
.gx-dos-rel .rdetail p { margin: 0; color: rgba(255, 255, 255, 0.6); font-size: 0.66rem; line-height: 1.5; }
.gx-dos-rel .ilink { display: inline-block; color: #93c5fd; font-size: 0.68rem; font-weight: 750; margin-top: 0.5rem; }
.gx-badge-s { display: inline-flex; border: 1px solid; border-radius: 999px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1; padding: 0.18rem 0.38rem; text-transform: uppercase; white-space: nowrap; }
.gx-dos-agree { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.55rem; padding: 0.66rem 0.25rem 0.66rem 0.68rem; border-bottom: 1px solid rgba(156, 188, 211, 0.13); }
.gx-dos-agree::before { content: ""; position: absolute; top: 0.77rem; bottom: 0.77rem; left: 0.05rem; width: 2px; background: rgba(129, 170, 191, 0.42); }
.gx-dos-agree .t { color: rgba(255, 255, 255, 0.86); font-size: 0.72rem; font-weight: 750; }
.gx-dos-agree .s { color: rgba(255, 255, 255, 0.38); font-size: 0.61rem; margin-top: 0.14rem; }
.gx-dos-empty { border-top: 1px solid rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.45); font-size: 0.68rem; padding: 0.65rem; }
.gx-dos-empty.plain { border: 0; color: rgba(255, 255, 255, 0.4); padding: 0.7rem 0.15rem; }
/* Politics */
.gx-dos-politics { margin-top: 0.85rem; padding-top: 0.05rem; }
.gx-dos-gov { position: relative; overflow: hidden; border-radius: 12px; padding: 0.94rem 0.92rem; background: #1d3348; border: 1px solid rgba(129, 187, 217, 0.2); border-left: 3px solid #86bdde; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }
.gx-dos-gov::after { content: ""; position: absolute; right: -34px; top: -72px; width: 170px; height: 170px; border-radius: 50%; background: rgba(136, 193, 222, 0.07); pointer-events: none; }
.gx-dos-gov .form { color: rgba(255, 255, 255, 0.78); font-size: 0.73rem; font-weight: 760; line-height: 1.35; margin-top: 0.34rem; }
.gx-dos-gov .offices { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; margin-top: 0.68rem; }
.gx-dos-gov .offices small { display: block; color: rgba(255, 255, 255, 0.34); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.gx-dos-gov .offices b { display: block; color: rgba(255, 255, 255, 0.78); font-size: 0.72rem; font-weight: 760; line-height: 1.35; margin-top: 0.18rem; }
.gx-dos-gov .offices b.hos { color: #fbbf24; font-weight: 780; }
.gx-dos-gov .line, .gx-dos-gov .leg { border-top: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.48); font-size: 0.63rem; line-height: 1.45; margin-top: 0.65rem; padding-top: 0.55rem; }
.gx-dos-gov .line span, .gx-dos-gov .leg span { color: rgba(255, 255, 255, 0.34); }
.gx-dos-gov .leg { display: flex; flex-direction: column; gap: 0.2rem; color: rgba(255, 255, 255, 0.72); margin-top: 0.55rem; padding-top: 0.5rem; }
.gx-dos-gov .seats { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin-top: 0.5rem; }
.gx-dos-strip { border-top: 1px solid rgba(156, 188, 211, 0.13); padding: 0.8rem 0.1rem; margin-top: 0.65rem; }
.gx-dos-link { background: none; border: none; padding: 0; color: #93c5fd; font-size: 0.72rem; font-weight: 700; cursor: pointer; font-family: sans-serif; }
.gx-dos-strip .bullets { display: flex; flex-direction: column; gap: 0.34rem; margin-top: 0.48rem; color: rgba(255, 255, 255, 0.65); font-size: 0.67rem; line-height: 1.4; }
.gx-dos-landscape { margin-top: 1.05rem; padding-top: 0.25rem; }
.gx-dos-landscape .head { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; }
.gx-dos-landscape .head small { display: block; color: rgba(255, 255, 255, 0.34); font-size: 0.59rem; margin-top: 0.15rem; }
.gx-dos-landscape .mapped { color: rgba(255, 255, 255, 0.36); font-size: 0.59rem; font-weight: 750; text-align: right; }
.gx-dos-landscape .overview { display: grid; grid-template-columns: minmax(130px, 1.05fr) minmax(0, 1fr); align-items: center; gap: 0.5rem; padding: 0.4rem 0 0.7rem; border-bottom: 1px solid rgba(156, 188, 211, 0.13); }
.gx-dos-landscape .donut svg { display: block; width: 100%; max-width: 185px; height: auto; overflow: visible; margin: 0 auto; }
.gx-dos-landscape .legend { display: flex; flex-direction: column; gap: 0.32rem; font-size: 0.69rem; }
.gx-dos-landscape .legend div { display: flex; align-items: center; gap: 0.43rem; }
.gx-dos-landscape .legend i { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.gx-dos-landscape .legend span { flex: 1; color: rgba(229, 240, 247, 0.83); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-dos-landscape .legend b { color: #b6d1e0; font-weight: 800; }
.gx-dos-landscape .parties { margin-top: 0.4rem; }
.gx-dos-landscape .party { border-left: 3px solid; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 0.55rem 0.65rem; }
.gx-dos-landscape .party:hover { background: rgba(122, 180, 214, 0.07); }
.gx-dos-landscape .party .top { display: flex; justify-content: space-between; gap: 0.6rem; align-items: flex-start; }
.gx-dos-landscape .pname { color: rgba(255, 255, 255, 0.9); font-size: 0.74rem; font-weight: 800; }
.gx-dos-landscape .pname span { color: rgba(255, 255, 255, 0.45); font-weight: 700; }
.gx-dos-landscape .native { color: rgba(255, 255, 255, 0.5); font-size: 0.65rem; font-style: italic; margin-top: 0.1rem; }
.gx-dos-landscape .role { border: 1px solid; border-radius: 999px; font-size: 0.56rem; font-weight: 800; padding: 0.1rem 0.38rem; white-space: nowrap; flex-shrink: 0; }
.gx-dos-landscape .ideo { font-size: 0.64rem; margin-top: 0.25rem; color: rgba(255, 255, 255, 0.62); }
.gx-dos-landscape .ideo span { font-weight: 800; }
.gx-dos-landscape .meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; color: rgba(255, 255, 255, 0.5); font-size: 0.62rem; margin-top: 0.2rem; }
.gx-dos-landscape .meta b { color: rgba(255, 255, 255, 0.8); font-weight: 400; }
.gx-dos-landscape .oth { color: rgba(255, 255, 255, 0.48); font-size: 0.65rem; font-weight: 800; }
.gx-dos-inst { margin: 1.4rem 0 0.35rem; padding: 0 0.1rem 0 0.2rem; }
.gx-dos-inst .ihead { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.15rem 0 0.78rem; border-bottom: 1px solid rgba(156, 188, 211, 0.24); }
.gx-dos-inst .ihead small { display: block; color: rgba(255, 255, 255, 0.39); font-size: 0.61rem; margin-top: 0.2rem; }
.gx-dos-inst .count { color: #9bcfe7; font-size: 0.86rem; font-weight: 850; padding: 0 0.18rem 0 0.65rem; border-left: 1px solid rgba(156, 188, 211, 0.2); }
.gx-dos-inst .ilist { margin: 0.18rem 0 0 0.28rem; border-left: 1px solid rgba(137, 184, 210, 0.22); }
.gx-dos-inst .irow { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr) minmax(0, 6.5rem); align-items: start; gap: 0.43rem; margin-left: -0.33rem; padding: 0.78rem 0.12rem 0.76rem 0; border-bottom: 1px solid rgba(156, 188, 211, 0.12); }
.gx-dos-inst .dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 0.38rem; background: #80cda6; box-shadow: 0 0 0 3px #141c27; }
.gx-dos-inst .iname { color: #e1ebf3; font-size: 0.74rem; font-weight: 825; line-height: 1.37; }
.gx-dos-inst .imeta { color: #8396a8; font-size: 0.61rem; line-height: 1.45; margin-top: 0.2rem; }
.gx-dos-inst .istatus { color: #83d5aa; font-size: 0.59rem; font-weight: 800; letter-spacing: 0.025em; text-transform: uppercase; text-align: right; }
/* Ranking */
.gx-dos-rank { padding-top: 0.6rem; }
.gx-dos-rank .picker { padding-bottom: 0.95rem; }
.gx-dos-rank label { display: block; color: #a7c5d8; font-size: 0.65rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
.gx-dos-rank select { display: block; width: 100%; background: #213245; border: 1px solid rgba(147, 194, 221, 0.28); border-radius: 7px; color: #edf5fb; font-size: 0.9rem; font-weight: 800; padding: 0.54rem 0.65rem; min-height: 2.65rem; color-scheme: dark; font-family: sans-serif; }
.gx-dos-rank select:hover { border-color: rgba(147, 207, 236, 0.65); }
.gx-dos-rank option, .gx-dos-reltools option { background: #1f1f23; color: #f4f4f5; }
.gx-dos-rank .context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #1c2e40; border-top: 1px solid rgba(143, 187, 212, 0.29); border-bottom: 1px solid rgba(143, 187, 212, 0.15); }
.gx-dos-rank .context > div { padding: 0.75rem 0.7rem 0.8rem; }
.gx-dos-rank .context > div + div { border-left: 1px solid rgba(143, 187, 212, 0.16); }
.gx-dos-rank .context b { display: block; color: #f0f6fa; font-size: 1.65rem; font-weight: 850; letter-spacing: -0.045em; line-height: 1.14; }
.gx-dos-rank .context b.accent { color: #8fd3f1; }
.gx-dos-rank .context b span { color: #8b9eaf; font-size: 0.89rem; font-weight: 650; letter-spacing: 0; }
.gx-dos-rank .context small { display: block; color: #9bb1c2; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 0.3rem; }
.gx-dos-rank .colhead, .gx-dos-rank .rrow { display: grid; grid-template-columns: 2.2rem 1.75rem minmax(0, 1fr) auto; gap: 0.42rem; align-items: center; }
.gx-dos-rank .colhead { padding: 1rem 0.38rem 0.46rem; color: #8fa5b7; font-size: 0.61rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.gx-dos-rank .list { border-top: 1px solid rgba(143, 187, 212, 0.23); }
.gx-dos-rank .rrow { width: 100%; min-height: 3.28rem; padding: 0.56rem 0.38rem; background: transparent; border: 0; border-bottom: 1px solid rgba(145, 179, 202, 0.14); color: #eef3f7; text-align: left; cursor: pointer; transition: background-color 0.15s; font-family: sans-serif; }
.gx-dos-rank .rrow:hover { background: rgba(119, 174, 208, 0.1); }
.gx-dos-rank .rk { color: #94a8b9; font-size: 0.81rem; font-weight: 850; letter-spacing: 0.02em; }
.gx-dos-rank .rk.gold { color: #e6c67b; }
.gx-dos-rank .rk.silver { color: #c3d4e1; }
.gx-dos-rank .rk.bronze { color: #d0a58d; }
.gx-dos-rank .rflag { width: 1.75rem; height: 1.3rem; display: flex; align-items: center; justify-content: center; }
.gx-dos-rank .rflag svg { display: block; width: 100%; height: 100%; }
.gx-dos-rank .rname { color: #e5edf5; font-size: 0.76rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.gx-dos-rank .rval { color: #d5e8f3; font-size: 0.78rem; font-weight: 850; text-align: right; white-space: nowrap; padding-left: 0.2rem; }
.gx-dos-rank .rrow.mine { background: rgba(46, 107, 145, 0.17); border-left: 3px solid #8acde6; padding-left: calc(0.38rem - 3px); }
.gx-dos-rank .rrow.open { background: #244055; box-shadow: inset 0 0 0 1px rgba(132, 204, 238, 0.48); }
.gx-dos-rank .rrow.open .rname, .gx-dos-rank .rrow.open .rval { color: #fff; }
@media (max-width: 375px) {
  .gx-dos-rank .colhead, .gx-dos-rank .rrow { grid-template-columns: 1.65rem 1.35rem 1fr auto; gap: 0.28rem; }
  .gx-dos-rank .rrow { padding: 0.55rem 0.23rem; }
  .gx-dos-hero { padding: 1rem 0.74rem; }
  .gx-dos-tabs { padding: 0 0.15rem; }
  .gx-dos-tabs button { font-size: 0.59rem; padding: 0.48rem 0.16rem; }
  .gx-dos-landscape .overview { grid-template-columns: 1fr; }
}
@media (max-width: 450px) {
  .gx-adv-recipients { padding: 0.5rem 0.65rem; }
  .gx-adv .gx-msgs { padding: 0.8rem 0.7rem 1rem; }
  .gx-adv-composer { padding: 0.6rem 0.7rem; }
  .gx-adv-body.user { max-width: 94%; }
  .gx-adv-mic { width: 2.3rem; height: 2.3rem; flex-basis: 2.3rem; }
}

/* ---- Rostra since 2026-11-03: the pen, polls, Search, Refresh (social.jsx, rostraSearch.jsx, rostraRefresh.jsx) ---- */
.rs-head .rs-x { margin-left: 0; }
.rs-pen { align-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid transparent; border-radius: 999px; color: rgba(244, 244, 245, 0.62); cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 2rem; justify-content: center; margin-left: auto; padding: 0; width: 2rem; }
.rs-pen.on { background: rgba(43, 193, 243, 0.14); border-color: rgba(43, 193, 243, 0.45); color: #2bc1f3; }
.rs-posted { border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #2bc1f3; font-size: 0.74rem; padding: 0.6rem 1rem; flex-shrink: 0; }
.rs-meta { display: flex; align-items: center; gap: 0.35rem; }
.rs-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-pollchip { background: rgba(43, 193, 243, 0.14); border: 1px solid rgba(43, 193, 243, 0.45); border-radius: 5px; color: #2bc1f3; font-size: 0.6rem; font-weight: 800; padding: 0 0.3rem; flex-shrink: 0; }
.rs-poll { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; margin-top: 0.6rem; padding: 0.6rem 0.65rem 0.55rem; }
.rs-pchoices { display: grid; gap: 0.38rem; }
.rs-pchoice { position: relative; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.rs-pchoice.open { background: none; border: 1px solid rgba(43, 193, 243, 0.45); color: #f4f4f5; font-size: 0.8rem; font-weight: 650; padding: 0.4rem 0.6rem; }
.rs-pchoice i { position: absolute; left: 0; top: 0; bottom: 0; }
.rs-pchoice span { position: relative; display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.42rem 0.6rem; }
.rs-pchoice span b { font-size: 0.8rem; font-weight: 600; }
.rs-pchoice span.win b { font-weight: 800; }
.rs-pchoice span em { font-style: normal; font-size: 0.78rem; font-weight: 800; color: rgba(244, 244, 245, 0.62); }
.rs-pchoice span.win em { color: #2bc1f3; }
.rs-pfoot { display: flex; justify-content: space-between; font-size: 0.68rem; color: rgba(244, 244, 245, 0.38); margin-top: 0.45rem; }
.rs-consensus { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; color: rgba(244, 244, 245, 0.62); font-size: 0.74rem; line-height: 1.45; margin-top: 0.5rem; padding: 0.45rem 0.55rem; }
.rs-consensus strong { color: #f4f4f5; }
.rs-pedit { display: grid; gap: 0.35rem; margin-top: 0.4rem; }
.rs-prow { display: flex; gap: 0.35rem; }
.rs-pin { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(43, 193, 243, 0.45); border-radius: 8px; font-size: 0.8rem; padding: 0.38rem 0.55rem; color: #f4f4f5; font-family: sans-serif; outline: none; }
.rs-prm { background: none; border: none; color: rgba(244, 244, 245, 0.38); padding: 0.2rem; cursor: pointer; display: inline-flex; align-items: center; }
.rs-pmore { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.rs-pmore span { font-size: 0.66rem; color: rgba(244, 244, 245, 0.38); }
.rs-addc { background: none; border: none; color: #2bc1f3; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0; cursor: pointer; font-family: sans-serif; }
.rs-cfoot .rs-polltog { display: inline-flex; align-items: center; gap: 0.3rem; border: none; border-radius: 999px; padding: 0.3rem 0.55rem; font-size: 0.72rem; font-weight: 700; background: none; color: rgba(244, 244, 245, 0.62); margin-right: auto; cursor: pointer; font-family: sans-serif; }
.rs-cfoot .rs-polltog.on { background: rgba(43, 193, 243, 0.14); color: #2bc1f3; }
.rs-refresh { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.6rem 1.1rem; }
.rs-refresh b { font-size: 0.9rem; font-weight: 750; color: #f4f4f5; }
.rs-refresh span { font-size: 0.76rem; color: rgba(244, 244, 245, 0.56); line-height: 1.45; margin-top: 0.35rem; }
.rs-refresh small { font-size: 0.66rem; color: rgba(244, 244, 245, 0.34); margin-top: 0.5rem; }
.rs-rbtn { display: inline-flex; align-items: center; gap: 0.4rem; background: #f4f4f5; color: #0b0b0d; border: none; border-radius: 999px; font-size: 0.78rem; font-weight: 800; padding: 0.42rem 1.05rem; margin-top: 0.65rem; cursor: pointer; font-family: sans-serif; }
.rs-rbtn:disabled { opacity: 0.5; cursor: default; }
.rs-sbox { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 0.65rem 0.85rem; }
.rs-sfield { display: flex; align-items: center; gap: 0.45rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 0.38rem 0.75rem; color: rgba(244, 244, 245, 0.56); }
.rs-sfield input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #f4f4f5; font-size: 0.84rem; font-family: sans-serif; }
.rs-sfield input::placeholder { color: rgba(244, 244, 245, 0.34); }
.rs-sfield input::-webkit-search-cancel-button { display: none; }
.rs-sclear { background: none; border: none; color: rgba(244, 244, 245, 0.56); padding: 0; display: inline-flex; cursor: pointer; }
.rs-sclear svg { width: 14px; height: 14px; }
.rs-hit { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.6rem 1rem; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #f4f4f5; text-align: left; cursor: pointer; font-family: sans-serif; }
.rs-hit:hover { background: rgba(255, 255, 255, 0.05); }
.rs-hit .ic { color: rgba(244, 244, 245, 0.56); display: inline-flex; }
.rs-hit b { display: block; font-size: 0.84rem; font-weight: 700; }
.rs-hit small { display: block; font-size: 0.7rem; color: rgba(244, 244, 245, 0.34); }
.rs-none { font-size: 0.78rem; padding: 0.9rem 1rem; color: rgba(244, 244, 245, 0.56); }
.rs-place { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem 0.45rem; }
.rs-place > div { flex: 1; min-width: 0; }
.rs-place b { display: block; font-size: 0.98rem; font-weight: 850; }
.rs-place small { display: block; font-size: 0.68rem; color: rgba(244, 244, 245, 0.56); }
.rs-home-pill { background: rgba(255, 255, 255, 0.06); border: none; border-radius: 999px; font-size: 0.68rem; font-weight: 700; padding: 0.32rem 0.7rem; color: rgba(244, 244, 245, 0.56); cursor: pointer; font-family: sans-serif; }
.rs-ricon { width: 2rem; height: 2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: none; color: #f4f4f5; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.rs-ptabs { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rs-ptabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; font-size: 0.8rem; font-weight: 750; padding: 0.55rem 0.5rem 0.45rem; color: rgba(244, 244, 245, 0.56); cursor: pointer; font-family: sans-serif; }
.rs-ptabs button.on { border-bottom-color: #f4f4f5; color: #f4f4f5; }
.rs-label { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244, 244, 245, 0.56); }
.rs-label.pad { padding: 0.65rem 1rem 0.35rem; }
.rs-trend { padding: 0.6rem 1rem 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rs-trend .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.rs-trend .chips span { background: rgba(255, 255, 255, 0.07); border-radius: 999px; color: #f4f4f5; font-size: 0.74rem; font-weight: 650; padding: 0.22rem 0.6rem; }
.rs-tuning { font-size: 0.74rem; color: rgba(244, 244, 245, 0.56); padding: 0.2rem 1rem; }
.rs-skel { display: flex; gap: 0.65rem; padding: 0.8rem 1rem; }
.rs-skel i { display: block; background: rgba(255, 255, 255, 0.1); border-radius: 999px; height: 0.65rem; margin-bottom: 0.45rem; animation: rs-pulse 1.4s ease-in-out infinite; }
.rs-skel .av { width: 2.4rem; height: 2.4rem; flex-shrink: 0; }
.rs-skel > div { flex: 1; }
@keyframes rs-pulse { 50% { opacity: 0.5; } }
.rs-person .rs-pav { width: 2.4rem; height: 2.4rem; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; color: white; font-size: 0.8rem; font-weight: 700; }
.rs-person .rs-top em { font-style: normal; font-size: 0.78rem; color: rgba(244, 244, 245, 0.56); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-about { font-size: 0.7rem; color: rgba(244, 244, 245, 0.34); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-person .rs-text { font-size: 0.86rem; margin-top: 0.25rem; }
.rs-pacts { display: flex; gap: 1.1rem; margin-top: 0.5rem; color: rgba(244, 244, 245, 0.34); font-size: 0.72rem; }
.rs-pacts > * { min-width: 2.8rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.rs-pacts svg { width: 17px; height: 17px; stroke-width: 1.7; }
.rs-like { background: none; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.rs-like.on { color: #f43f5e; }
.rs-like.on svg { fill: currentColor; }
.rs-written { font-size: 0.66rem; color: rgba(244, 244, 245, 0.34); text-align: center; padding: 0.85rem 1.2rem 1.1rem; }
@media (max-width: 700px) { .rs-pen { margin-left: 0; } }

/* ---- a phone (useIsMobile, max-width 700px): the game's phone layout ---- */
@media (max-width: 700px) {
  .gx { --gx-drawer: 100%; }
  .gx-menu-btn { width: 3.2rem; height: 3.2rem; font-size: 1.3rem; }
  .gx-menu { width: calc(100% - 1rem); }
  .gx-pill { display: none; }
  .gx-topbar { left: 0.5rem; top: calc(var(--gx-top) + 4rem); }
  .gx-exit { width: 3.2rem; height: 3.2rem; padding: 0; font-size: 0; }
  .gx-exit::before { content: "⌂"; font-size: 1rem; }
  .gx-date { right: 0.5rem; height: 3.2rem; width: min(24rem, calc(100% - 4.5rem)); min-width: 0; max-width: none; border-radius: 12px; }
  .gx.drawer-open .gx-date, .gx.drawer-open .gx-advisor-btn { right: 0.5rem; }
  .gx-date-mid { flex-direction: column; align-items: center; gap: 0.1rem; }
  .gx-date-country { font-size: 0.68rem; }
  button.gx-date-country { cursor: pointer; }
  .gx.drawer-open .gx-date-country { color: #bfdbfe; }
  .gx-date-day { font-size: 0.82rem; }
  .gx-flag-btn { display: none; }
  .gx-advisor-btn { bottom: 3.6rem; width: 3.2rem; height: 3.2rem; border-radius: 12px; font-size: 1.25rem; }
  .gx-search { left: 13.8rem; bottom: 0.9rem; width: 3.2rem; height: 3.2rem; border-radius: 12px; }
  .gx.at-war .gx-search { left: 13.8rem; }
  .gx-search.open { left: 0.5rem; bottom: 5rem; width: calc(100% - 1rem); height: 3rem; }
  .gx-war-btn { left: 0.5rem; bottom: 4.85rem; width: 3rem; height: 3rem; }
  /* Bottom panels: Events (time.jsx PanelChrome) against the screen; Actions, Rostra and Diplomacy from the dock. */
  .gx-panel { left: 0.5rem; bottom: 4.9rem; width: calc(100% - 1rem); height: min(calc(100% - var(--gx-top) - 9rem), max(calc(100% - var(--gx-top) - 33rem), 30rem)); min-height: 10rem; }
  .gx-panel.dock-panel { bottom: 4.75rem; height: min(calc(100% - var(--gx-top) - 9rem), max(calc(100% - var(--gx-top) - 16rem), 30rem)); border-radius: 16px; background-color: rgba(24, 24, 27, 0.95); }
  .dp { left: 1rem; bottom: 4.75rem; width: calc(100% - 1.5rem); height: min(50rem, calc(100% - var(--gx-top) - 10.25rem)); min-height: 10rem; }
  .dp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  /* The advisor, the country panel and the War Room: full-screen sheets over everything. */
  .gx-drawer { left: 0; width: 100%; border-left: 0; z-index: 30; }
  .gx-drawer .gx-grip { display: none; }
  .gx-drawer-head { padding: 0.78rem 0.75rem; }
  /* War Room: no frame, the HUD hidden, a Map / Generals fold. */
  .gx.war-open > .gx-hud { display: none !important; }
  .wr-frame-top, .wr-frame-left, .wr-frame-bottom { display: none; }
  .wr-drawer { left: 0; width: 100%; border-left: 0; z-index: 30; }
  .wr-fold { display: inline-flex; }
  .wr-sides { display: block; font-size: 0.66rem; letter-spacing: 0.08em; color: var(--bone-soft); margin-top: 0.3rem; }
  .gx.war-folded .wr-drawer { top: auto; max-height: 55%; }
  .gx.war-folded .wr-scroll, .gx.war-folded .wr-info { display: none; }
  .wr-rail { display: none; }
  .gx.war-folded .wr-rail { display: flex; top: calc(var(--gx-top) + 0.6rem); max-height: calc(45% - var(--gx-top) - 1.5rem); z-index: 29; }
  .gx.war-open .gx-war-btn { z-index: 31; }
  /* Intelligence, Institutions and Advanced statistics on a phone. */
  .sp-stats, .sp-stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-two { grid-template-columns: 1fr; }
  .sp-tab { padding: 0.35rem 0.5rem; }
  .sp-countries { grid-template-columns: 1fr; grid-template-rows: minmax(0, 14rem) minmax(0, 1fr); }
  .sp-agent-top { flex-wrap: wrap; }
  .in-purpose { display: none; }
  .in-facts > div { padding: 0.34rem 0.45rem; }
  .in-facts small { font-size: 0.52rem; }
  .in-facts b { font-size: 0.68rem; }
  .in-grid { grid-template-columns: 1fr; }
  .in-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .as-back { padding: 0; }
  .as-sheet { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
  .as-body { display: block; overflow-y: auto; scrollbar-width: none; }
  .as-main { overflow: visible; }
  .as-frame { min-height: 0; }
  .as-svg { min-height: 0; }
  .as-side { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .chapter { max-width: none; }
}
/* .oh-tap / .oh-tap-row: 44px touch targets on a touch screen only. */
@media (pointer: coarse) {
  .gx-arrow, .gx-x, .dp-x, .dp-back, .gx-hbtn { min-width: 44px; min-height: 44px; }
  .dp-tab, .sp-tab, .in-tab, .gx-subtab { min-height: 44px; }
}

/* A lighter device (story.js quality tier 1+): no blur of the moving map behind the interface, which is
   worked out again for every frame the map draws; the surfaces are a little more opaque instead. */
.oh-lite .gx-base, .oh-lite .gx-surface, .oh-lite .gx-menu, .oh-lite .as-back { backdrop-filter: none; -webkit-backdrop-filter: none; }
.oh-lite .gx-base, .oh-lite .gx-surface { background-color: rgba(22, 22, 25, 0.82); }
.oh-lite .gx-war-btn { background-color: #a8181e; }

/* ---- 2026-11-05: the HUD brought up to the game's 2.5 (time.jsx, projects.jsx, chat.jsx, search.jsx, MapModeSelector.jsx, warRoomRail.jsx) ---- */
/* time.jsx DateWidget: a fixed width; a long name ellipsises rather than growing the widget. */
.gx-date { width: min(18rem, calc(100vw - 0.9rem)); min-width: 0; }
.gx-arrow#gxSkipBtn.on { color: #e4e4e7; }
/* time.jsx PanelChrome: glass, as tall as the screen allows. */
.gx-panel:not(.dock-panel) { background-color: var(--oh-hud-bg-strong); backdrop-filter: var(--oh-hud-blur); -webkit-backdrop-filter: var(--oh-hud-blur); height: min(calc(100% - var(--gx-top) - 9rem), max(calc(100% - var(--gx-top) - 33rem), 30rem)); }
.oh-lite .gx-panel:not(.dock-panel) { background-color: rgba(17, 17, 19, 0.9); backdrop-filter: none; -webkit-backdrop-filter: none; }
.gx-turns { display: inline-flex; align-items: center; gap: 0.2rem; }
.gx-turns button { background: none; border: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; padding: 0.1rem 0.35rem; cursor: pointer; }
.gx-turns button:disabled { color: rgba(255, 255, 255, 0.2); cursor: default; }
.gx-echips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.gx-echips button { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; color: white; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; font-family: sans-serif; }
.gx-echips button.on { background: rgba(0, 0, 0, 0.42); border-color: rgba(255, 255, 255, 0.28); }
.gx-ecol { display: flex; flex-direction: column; gap: 0.75rem; }
.gx-cardwrap { border-radius: 16px; }
.gx-ghost[data-go="next"] { min-height: 2.5rem; }
/* time.jsx TimelineSkipPanel */
.gx-tl { display: flex; flex-direction: column; align-items: center; }
.gx-tl-link { display: block; width: 2px; height: 1.25rem; background: rgba(255, 255, 255, 0.1); }
.gx-tl-date { width: 5.5rem; text-align: center; background: rgba(255, 255, 255, 0.07); border: 2px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: #e4e4e7; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.35rem 0; }
.gx-tl-node { width: 12.5rem; padding: 0.38rem 0; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.18); color: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-family: sans-serif; }
.gx-tl-node:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }
.gx-tl-node b { font-size: 0.9rem; font-weight: 600; }
.gx-tl-node span { font-size: 0.7rem; color: #e4e4e7; }
.gx-tl-auto { width: 12.5rem; background: rgba(37, 99, 235, 0.2); border: 1px solid rgba(96, 165, 250, 0.45); border-radius: 12px; padding: 0.55rem 0.7rem; font-size: 0.85rem; font-weight: 700; color: white; cursor: pointer; font-family: sans-serif; }
.gx-tl-custom { width: 12.5rem; display: flex; gap: 0.35rem; align-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 0.45rem 0.5rem; }
.gx-tl-custom input { width: 3.4rem; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; color: white; font-size: 0.8rem; padding: 0.3rem 0.35rem; font-family: sans-serif; }
.gx-tl-custom select { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; color: white; font-size: 0.78rem; padding: 0.3rem; color-scheme: dark; }
.gx-tl-custom button { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 8px; color: white; font-size: 0.8rem; font-weight: 700; padding: 0.3rem 0.55rem; cursor: pointer; }
.gx-tl-custom button.off { opacity: 0.5; cursor: default; }
.gx-tl-lands { font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.4rem; }
.gx-tl-cap { font-size: 0.68rem; color: rgba(255, 255, 255, 0.42); margin-top: 0.45rem; text-align: center; line-height: 1.5; }
/* projects.jsx ProjectsBoard + ProjectCard */
.ac-board { padding: 0; gap: 0; }
.pj-filters { padding: 0.6rem 1rem 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.pj-find { position: relative; display: block; }
.pj-find svg { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.35); }
.pj-find input { width: 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9px; color: white; font-size: 0.75rem; padding: 0.4rem 0.5rem 0.4rem 1.7rem; outline: none; font-family: sans-serif; }
.pj-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.5rem; }
.pj-row select { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: white; font-size: 0.72rem; padding: 0.3rem 0.4rem; color-scheme: dark; }
.pj-chip { border-radius: 999px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.2rem 0.55rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); cursor: pointer; font-family: sans-serif; }
.pj-chip.on { background: rgba(0, 0, 0, 0.39); border-color: rgba(255, 255, 255, 0.28); color: #f4f4f5; }
.pj-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0.75rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.pj-list > * { flex-shrink: 0; }
.pj-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 0.7rem 0.8rem; }
.pj-top { display: flex; align-items: center; gap: 0.4rem; }
.pj-top b { font-size: 0.86rem; font-weight: 700; min-width: 0; }
.pj-top .sp { flex: 1; }
.pj-glyph, .pj-secret { font-size: 0.85rem; }
.pj-pill { border-radius: 999px; font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.45rem; white-space: nowrap; }
.pj-pill.foreign { color: rgba(253, 186, 116, 0.95); background: rgba(249, 115, 22, 0.14); }
.pj-status { border-radius: 999px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; text-transform: uppercase; white-space: nowrap; }
.pj-owner { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; font-size: 0.68rem; color: rgba(255, 255, 255, 0.55); }
.pj-owner.foreign { color: rgba(253, 186, 116, 0.85); }
.pj-owner .pj-flag { width: 1.3rem; height: 0.85rem; border-radius: 3px; overflow: hidden; }
.pj-owner .pj-flag.across { flex-direction: column; }
.pj-sum { font-size: 0.75rem; color: rgba(255, 255, 255, 0.72); line-height: 1.45; margin-top: 0.4rem; }
.pj-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4rem; }
.pj-tags span { font-size: 0.62rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); }
.pj-when { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.65rem; color: rgba(255, 255, 255, 0.45); margin-top: 0.5rem; }
.pj-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 0.3rem; }
.pj-bar i { display: block; height: 100%; border-radius: 999px; }
.pj-next { font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.4rem; }
.pj-update { font-size: 0.7rem; font-style: italic; color: rgba(255, 255, 255, 0.5); margin-top: 0.25rem; }
.pj-warn { display: inline-block; font-size: 0.62rem; font-weight: 700; color: #fca5a5; background: rgba(239, 68, 68, 0.14); border-radius: 999px; padding: 0.1rem 0.45rem; margin-top: 0.35rem; }
.pj-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.pj-btns button, .pj-review, .pj-abandon { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: white; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.6rem; cursor: pointer; font-family: sans-serif; }
.pj-own { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 0.55rem; padding-top: 0.5rem; }
.pj-prio { display: inline-flex; gap: 0.2rem; }
.pj-prio button { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: rgba(255, 255, 255, 0.5); font-size: 0.65rem; padding: 0.15rem 0.4rem; cursor: pointer; }
.pj-prio button.on { background: rgba(0, 0, 0, 0.39); border-color: rgba(255, 255, 255, 0.28); color: #f4f4f5; }
.pj-note { font-size: 0.66rem; color: rgba(255, 255, 255, 0.45); margin-top: 0.5rem; line-height: 1.4; }
.pj-review { width: 100%; padding: 0.5rem; }
/* MapModeSelector.jsx */
.gx-mapmode { position: absolute; right: 0.5rem; bottom: 0.5rem; z-index: 7; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; font-family: sans-serif; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.gx.drawer-open .gx-mapmode { right: calc(var(--gx-drawer) + 0.5rem); }
.gx-mm-bar { display: flex; padding: 0.2rem; gap: 0.2rem; background: var(--oh-hud-bg); backdrop-filter: var(--oh-hud-blur); -webkit-backdrop-filter: var(--oh-hud-blur); border: 1px solid var(--oh-hud-border); border-radius: 12px; box-shadow: var(--oh-hud-shadow-soft); }
.gx-mm-bar button { display: flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.65rem; border-radius: 8px; border: none; font-size: 0.75rem; background: transparent; color: rgba(255, 255, 255, 0.55); font-weight: 400; cursor: pointer; transition: all 0.15s ease; font-family: sans-serif; }
.gx-mm-bar button.dip { border: 1px solid transparent; }
.gx-mm-bar button.on { background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; }
.gx-mm-bar button.dip.on { background: rgba(37, 99, 235, 0.3); border-color: rgba(96, 165, 250, 0.4); color: #60a5fa; }
.gx-mm-legend { display: flex; flex-direction: column; gap: 0.3rem; min-width: 125px; margin-right: 4.5rem; padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--oh-hud-bg); backdrop-filter: var(--oh-hud-blur); -webkit-backdrop-filter: var(--oh-hud-blur); border: 1px solid var(--oh-hud-border); box-shadow: var(--oh-hud-shadow-soft); color: white; font-size: 0.72rem; }
.gx-mm-legend .hd { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.25rem; margin-bottom: 0.15rem; font-weight: 700; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.62rem; }
.gx-mm-legend .hd button { background: transparent; border: none; color: rgba(255, 255, 255, 0.5); padding: 0 0.15rem; font-size: 0.75rem; line-height: 1; cursor: pointer; }
.gx-mm-legend .row { display: flex; align-items: center; gap: 0.45rem; line-height: 1.2; font-size: 0.7rem; color: rgba(255, 255, 255, 0.9); }
.gx-mm-legend .row i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* search.jsx */
.gx-search { border-radius: 12px; overflow: visible; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s ease; }
.gx-search.open { padding: 0; gap: 0; }
.gx-search-ic { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 100%; flex-shrink: 0; color: rgba(255, 255, 255, 0.8); }
.gx-search-ic .cls, .gx-search.open .gx-search-ic .mag { display: none; }
.gx-search.open .gx-search-ic .cls { display: block; cursor: pointer; }
.gx-search input { font-size: 0.85rem; }
.gx-search.missing input::placeholder { color: #f87171; }
.gx-search-go { display: none; padding: 0 0.6rem; color: rgba(255, 255, 255, 0.2); }
.gx-search.open .gx-search-go { display: flex; }
.gx-search.listing { border-radius: 0 0 12px 12px; }
.gx-search-list { position: absolute; left: -1px; right: -1px; bottom: calc(100% - 1px); background: rgba(17, 17, 19, 0.66); backdrop-filter: var(--oh-hud-blur); -webkit-backdrop-filter: var(--oh-hud-blur); border: 1px solid var(--oh-hud-border); border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.3); overflow: hidden; }
.gx-search-list button { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.45rem 0.75rem; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); text-align: left; cursor: pointer; font-family: sans-serif; }
.gx-search-list button.hi, .gx-search-list button:hover { background: rgba(255, 255, 255, 0.08); }
.gx-search-list svg { color: rgba(255, 255, 255, 0.45); flex-shrink: 0; }
.gx-search-list b { font-size: 0.82rem; font-weight: 400; white-space: nowrap; }
.gx-search-list small { font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-search-list em { font-style: normal; font-size: 0.56rem; font-weight: 700; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 1px 5px; }
/* chat.jsx: one header, the Unread bar, dated groups, row actions, the conversation's own lines */
.gx-launch .rs-dock .gx-badge { top: -0.55rem; right: -0.8rem; }
.dp-head { border-bottom: 0; padding-bottom: 0; }
.dp-tabs { margin-top: 0.55rem; padding: 0 0.85rem 0.65rem; }
.dp-tab.on { background: #0e0e10; }
.dp { min-height: 24rem; }
.dp-unreadbar { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }
.dp-unread { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.28rem 0.65rem; font-size: 0.72rem; font-weight: 600; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.6); cursor: pointer; font-family: sans-serif; }
.dp-unread.on { background: rgba(96, 165, 250, 0.18); border-color: rgba(96, 165, 250, 0.5); color: #93c5fd; }
.dp-unread i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #60a5fa; }
.dp-markall { background: none; border: 0; color: rgba(96, 165, 250, 0.75); font-size: 0.72rem; font-weight: 600; cursor: pointer; font-family: sans-serif; }
.dp-group { text-transform: none; letter-spacing: 0; }
.dp-rowwrap { position: relative; }
.dp-rowwrap .dp-row { padding-right: 6.7rem; }
.dp-rowacts { position: absolute; top: 50%; right: 0.7rem; transform: translateY(-50%); display: flex; gap: 0.3rem; opacity: 0; transition: opacity 0.15s; }
.dp-rowwrap:hover .dp-rowacts, .dp-rowwrap:focus-within .dp-rowacts { opacity: 1; }
.dp-ic { display: inline-flex; align-items: center; justify-content: center; background: rgba(24, 24, 27, 0.86); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; padding: 0.3rem; cursor: pointer; }
.dp-ic.env { color: rgba(96, 165, 250, 0.78); }
.dp-ic.trash { color: rgba(239, 68, 68, 0.68); }
.dp-convhead .dp-ic { margin-left: 0.15rem; }
.dp-edit { color: rgba(255, 255, 255, 0.4); display: inline-flex; vertical-align: middle; }
.dp-add { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 7px; color: white; font-size: 0.68rem; font-weight: 700; padding: 0.26rem 0.48rem; cursor: pointer; white-space: nowrap; font-family: sans-serif; }
.dp-convhead .dp-convtitle { flex: 1; min-width: 0; }
.dp-msgs { padding: 1rem 1.15rem; gap: 0.86rem; }
.dp-msg { max-width: min(70%, 42rem); }
.dp-msg.same { margin-top: -0.55rem; }
.dp-day { display: flex; align-items: center; gap: 0.6rem; font-size: 0.68rem; font-weight: 600; color: rgba(255, 255, 255, 0.32); }
.dp-day::before, .dp-day::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); }
.dp-speaker { display: inline-flex; align-items: center; gap: 0.34rem; font-size: 0.7rem; color: rgba(255, 255, 255, 0.46); margin: 0 0 0.28rem; font-weight: 400; }
.dp-speaker strong { font-weight: 650; color: rgba(255, 255, 255, 0.58); }
.dp-sflag { width: 0.95em; height: 0.66em; border-radius: 2px; overflow: hidden; }
.dp-when { font-size: 0.63rem; color: rgba(255, 255, 255, 0.27); margin-top: 0.25rem; }
.dp-bubble { background-color: color-mix(in srgb, var(--accent) 4%, rgba(35, 35, 39, 0.96)); border-left-color: color-mix(in srgb, var(--accent) 72%, white 8%); }
.dp-compose { flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.72rem 1rem 0.82rem; border-top-color: rgba(255, 255, 255, 0.08); background: rgba(13, 13, 16, 0.56); }
.dp-crow { display: flex; align-items: flex-end; gap: 0.5rem; }
.dp-crow button { color: white; }
.dp-hint { font-size: 0.54rem; color: rgba(255, 255, 255, 0.26); }
/* warRoomRail.jsx: the picked troops counted; keys that need troops wait for them */
.wr-count { background: rgba(0, 0, 0, 0.45); color: var(--brass); border: 1px solid var(--brass); font-size: 0.86rem; }
.wr-count.on { background: var(--brass); color: #1c1608; }
.wr-railkey.off { opacity: 0.5; color: rgba(236, 231, 218, 0.42); cursor: default; }
@media (max-width: 700px) {
  .gx-mm-bar button span { display: none; }
  .gx-mm-bar button { padding: 0.35rem 0.55rem; }
  .gx-mapmode, .gx.drawer-open .gx-mapmode { right: 0.5rem; }
  .gx-date { width: min(24rem, calc(100% - 4.5rem)); }
  .gx-search-list { left: -1px; right: -1px; }
  .dp-rowacts { opacity: 1; }
  .dp { min-height: 10rem; }
}
@media (pointer: coarse), (hover: none) { .dp-rowacts { opacity: 1; } }