/* ── The app is its own scroll container. Inside an itch iframe the document
    itself often refuses to scroll (Safari especially); giving #root an explicit
    height and its own overflow makes scrolling work everywhere, and makes the
    game fill whatever size the iframe/fullscreen gives it. ── */
 html, body { margin:0; padding:0; background:#0D1522; height:100%; overflow:hidden; }
 #root { position:relative; z-index:2; height:100%;
   overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
   overscroll-behavior:contain; }
 * { box-sizing: border-box; }
 /* corner widgets never eat trackpad/wheel scroll; only their real controls take clicks */
 .dialrail, .radialnav { touch-action:pan-y; }
 /* the nav's svg canvas is decorative — let wheel/touch fall through to the page */
 .radialnav svg { pointer-events: none; touch-action: pan-y; }
 .radialnav-wedge, .radialnav-hub { pointer-events: auto; }
 /* the rollout is a horizontal strip: it must be free to pan sideways, so it
    gets auto rather than pan-y (an ancestor declaring pan-y vetoes horizontal
    swipe for everything inside it). */
 .radialnav-rollout { touch-action:auto; }
 .dialrail button, .dialrail .dial, .radialnav-wedge, .radialnav-hub { pointer-events:auto; touch-action:pan-y; }
 .radialnav-rollout button { pointer-events:auto; touch-action:manipulation; }

 /* grid, not columns — columns let wide panels overlap their neighbours */
 .board { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
 .board > * { margin-bottom: 0 !important; min-width: 0; }
 .panel { height: fit-content; }
 .wide { grid-column: 1 / -1; }
 @media (min-width: 900px) {
   .board { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1200px; margin: 0 auto; }
 }
 @media (min-width: 1420px) {
   .board { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1400px; }
 }
 /* a lone wide panel should not strand an empty column beside it */
 .board > .wide:only-child { max-width: 900px; margin: 0 auto; }

 /* tabs: a swipeable strip on a phone, a wrapped row on a desktop */
 .nav { display: flex; gap: 5px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding-bottom: 6px; margin-bottom: 12px; }
 .nav::-webkit-scrollbar { display: none; }
 .nav > button { flex: 0 0 auto; }
 @media (min-width: 900px) {
   .nav { flex-wrap: wrap; overflow: visible; }
 }

 /* comfortable targets on touch, tighter on a pointer */
 @media (max-width: 899px) {
   button, select, input[type="text"], input:not([type]) { min-height: 40px; }
   textarea { font-size: 16px; }  /* stops iOS zooming on focus */
 }
 @media (min-width: 900px) {
   .board p, .board span { line-height: 1.5; }
 }

 /* the crawl scales with the viewport instead of guessing */
 .crawl-title { font-size: clamp(28px, 7vw, 54px) !important; }
 .crawl-sub { font-size: clamp(9px, 1.6vw, 13px) !important; }
 .crawl-head { font-size: clamp(12px, 1.9vw, 17px) !important; }
 .crawl-body { font-size: clamp(14px, 1.85vw, 19px) !important; }
 .crawl-wrap { max-width: min(760px, 92vw); }

 /* the shell: board on the left, department brief docked on the right */
 .shell { display: block; }
 .drawer { display: none; }
 @media (min-width: 1100px) {
   .shell { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
   .drawer { display: block; position: sticky; top: 10px; max-height: calc(100vh - 20px);
             overflow-y: auto; border-radius: 3px; }
   .shell .board { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
 }
 @media (min-width: 1500px) {
   .shell { grid-template-columns: minmax(0, 1fr) 380px; }
   .shell .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 /* on a phone the drawer becomes a sheet over the page */
 @media (max-width: 1099px) {
   .drawer { display: block; position: fixed; inset: auto 0 0 0; max-height: 74vh;
             overflow-y: auto; z-index: 40; border-top: 1px solid #C9A227;
             border-radius: 6px 6px 0 0; box-shadow: 0 -12px 30px rgba(0,0,0,0.5); }
 }

 /* the map never eats the screen */
 .mapbox svg { max-height: 44vh; border-radius: 12px; }
 button { transition: transform .08s ease, filter .12s ease; }

 header { background: linear-gradient(180deg, rgba(10,17,28,0.97), rgba(10,17,28,0.86)) !important;
   position: relative; z-index: 3; }

 /* ── the map under everything ── */
 .mapbg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none;
   background-size: cover; background-position: center; z-index: 0; opacity: 0.85; filter: saturate(1.05); }
 .mapveil { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none;
   background: radial-gradient(ellipse at 50% 42%, rgba(13,21,34,0.12), rgba(13,21,34,0.70)); }
 .shell { position: relative; }
 .shell > .board, .shell > header { position: relative; z-index: 2; }
 .panel { /* no backdrop-filter: it breaks scrolling in Safari on tall stacked panels. */ }

 /* ── capitals on the map (dashboard) ── */
 .mapstage { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }
 .cap { position: absolute; transform: translate(-50%, -50%); text-align: center; }
 /* the world signature: a thin ring reads a capital's economic health at a
    glance, with mobilisation chevrons and an active-weather glyph beneath it
    when either is present. Additive to the existing capdot, never replaces it. */
 .capvital { position: absolute; top: -8px; left: 50%; transform: translate(-50%, -50%);
   width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid; opacity: 0.75; pointer-events: none; }
 .capvital-mil { position: absolute; top: 6px; left: 26px; white-space: nowrap;
   font-size: 6px; letter-spacing: -1px; line-height: 1; text-shadow: 0 0 4px rgba(0,0,0,0.9); }
 .capvital-wx { position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
   filter: drop-shadow(0 0 3px rgba(233,184,79,0.7)); animation: wxPulse 2.2s ease-in-out infinite; }
 @keyframes wxPulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
 .capdot { width: 11px; height: 11px; border-radius: 50%; margin: 0 auto; background: #E7EDF5;
   box-shadow: 0 0 12px rgba(231,237,245,0.8); opacity: 0.85; }
 .capdot-me { width: 16px; height: 16px; background: #E9B84F; box-shadow: 0 0 18px rgba(233,184,79,0.9);
   animation: capPulse 2.6s ease-in-out infinite; }
 @keyframes capPulse { 0%,100% { box-shadow: 0 0 12px rgba(233,184,79,0.7); } 50% { box-shadow: 0 0 26px rgba(233,184,79,1); } }
 .capnm { display: inline-block; margin-top: 3px; font-family: monospace; font-size: 10px; font-weight: 700;
   color: #E7EDF5; background: rgba(13,21,34,0.72); padding: 1px 8px; border-radius: 6px;
   border: 1px solid rgba(127,182,232,0.25); }
 .capnm-me { color: #E9B84F; border-color: rgba(233,184,79,0.5); }

 /* ── radial navigator: bottom-left, replaces the flat tab strip.
    A quarter-circle dial opening up-and-right from the corner — a full 360°
    dial would point half its wedges off-screen from a corner anchor, so
    the sweep is deliberately 0°(right) to 90°(up), not a full circle. Kept
    small so the resting dial overlaps as little page content as possible,
    and touch-action:pan-y on every interactive piece lets a vertical scroll
    gesture pass through even when it starts on top of the dial. ── */
 .radialnav { position: fixed; left: 0; bottom: 0; width: 196px; height: 196px; z-index: 41; pointer-events: none;
   pointer-events: none; }
 .radialnav svg { pointer-events: none; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.55)); }
 .radialnav-wedge { pointer-events: auto; touch-action: pan-y; cursor: pointer; transition: opacity .18s ease, fill .18s ease, stroke-width .18s ease; }
 .radialnav-wedge:hover { filter: brightness(1.3); }
 .radialnav-hub { position: absolute; pointer-events: auto; touch-action: pan-y; transform: translate(-50%, -50%);
   border-radius: 999px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase;
   width: 46px; height: 46px; border: 1px solid #E9B84F; background: rgba(13,21,34,0.92);
   color: #E9B84F; font-size: 8px; letter-spacing: 0.8px; box-shadow: 0 0 14px rgba(233,184,79,0.25); }
 /* Rolled-out sector tabs: a full-width strip along the very bottom, not a diagonal fan over
    content. pointer-events:none on the wrapper / auto on the inner strip keeps the transparent
    margins above the bar from stealing clicks or scroll the way the old fan risked. */
 .radialnav-rollout { position: fixed; left: 0; right: 0; bottom: 0; z-index: 42; pointer-events: none; }
 .radialnav-rollout-inner { pointer-events: auto; display: flex; align-items: center; gap: 7px;
   padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
   overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
   touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
   scrollbar-width: thin; scrollbar-color: rgba(233,184,79,0.5) transparent;
   -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
           mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
   background: linear-gradient(0deg, rgba(10,17,28,0.98), rgba(10,17,28,0.92));
   border-top: 1px solid rgba(255,255,255,0.08);
   animation: rollOut .22s cubic-bezier(.2,.7,.2,1) both; }
 .radialnav-rollout-label { flex: 0 0 auto; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
   letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap; padding-right: 2px; }
 .radialnav-rollout-tag { flex: 0 0 auto; padding: 7px 12px; border-radius: 8px; border: 1px solid; cursor: pointer;
   scroll-snap-align: center; touch-action: manipulation; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.6px;
   text-transform: uppercase; white-space: nowrap; }
 .radialnav-rollout-close { flex: 0 0 auto; position: sticky; right: -12px; margin-left: auto; width: 26px; height: 26px;
   border-radius: 999px; border: 1px solid #2C3B52; color: #8FA0B6; cursor: pointer;
   font-family: 'IBM Plex Mono', monospace; z-index: 2;
   background: #0D1522; box-shadow: -10px 0 12px 6px #0D1522; }
 .radialnav-rollout-inner::-webkit-scrollbar { height: 4px; }
 .radialnav-rollout-inner::-webkit-scrollbar-thumb { background: rgba(233,184,79,0.5); border-radius: 2px; }
 .radialnav-rollout-inner::-webkit-scrollbar-track { background: transparent; }
 @keyframes rollOut { from { transform: translateY(100%); opacity: 0.3; } to { transform: translateY(0); opacity: 1; } }
 @media (max-width: 640px) { .radialnav { transform: scale(0.78); transform-origin: bottom left; } }
 @media (prefers-reduced-motion: reduce) { .radialnav-rollout-inner { animation: none !important; } }
 /* The dial is a 150×150 fixed object in the bottom-left corner, so the page has
    to reserve at least that much room underneath it — 56px left the last panel
    of every tab sitting under the wedges, where it could not be clicked. */
 .board { padding-bottom: 178px !important; }
 @media (max-width: 640px) { .board { padding-bottom: 200px !important; } }
 /* Idle, the dial steps back so it stops competing with the panel beneath it;
    it comes back to full strength on hover, focus, or touch. */
 .radialnav { opacity: 0.88; transition: opacity .18s ease; }
 .radialnav:hover, .radialnav:focus-within, .radialnav.is-open { opacity: 1; }
 @media (hover: none) { .radialnav { opacity: 0.72; } }

 /* ── full-screen map overlay ── */
 .mapscrim { position: fixed; inset: 0; z-index: 60; background: rgba(6,10,18,0.55);
   backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; }
 .mapoverlay { position: relative; width: min(1240px, 92vw); height: min(760px, 84vh);
   border-radius: 18px; overflow: hidden; border: 1px solid rgba(233,184,79,0.45);
   box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 40px rgba(233,184,79,0.08);
   animation: mapZoom .45s cubic-bezier(.2,.7,.2,1) both; }
 .mapoverlay-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.85; }
 .mapoverlay-veil { position: absolute; inset: 0;
   background: radial-gradient(ellipse at 50% 45%, rgba(13,21,34,0.12), rgba(13,21,34,0.6)); }
 .mapoverlay-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
 .capforce { display: flex; gap: 3px; justify-content: center; margin-top: 2px; }
 .capforce .fmark { font-style: normal; font-size: 9px; line-height: 1;
   color: #E9B84F; background: rgba(13,21,34,0.82); border: 1px solid rgba(233,184,79,0.55);
   border-radius: 3px; padding: 1px 3px; letter-spacing: 0.5px; white-space: nowrap; }
 .capforce .fmark-sel { color: #0D1522; background: #E9B84F; border-color: #E9B84F; }
 .capforce .fmark-away { color: #E8935A; border-color: rgba(232,147,90,0.7); }
 .routechip { position: absolute; transform: translate(-50%, -50%); font-family: monospace; font-size: 11px;
   font-weight: 700; background: rgba(13,21,34,0.82); padding: 1px 7px; border-radius: 6px;
   border: 1px solid rgba(127,182,232,0.3); }
 .cap-big .capdot { width: 15px; height: 15px; }
 .cap-big .capnm { font-size: 12px; }
 .hostilering { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
   border: 1.5px dashed #F0748F; border-radius: 50%; opacity: 0.8; animation: hostileSpin 9s linear infinite; }
 @keyframes hostileSpin { to { transform: rotate(360deg); } }
 .mapoverlay-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px;
   padding: 12px 18px; background: linear-gradient(180deg, rgba(10,17,28,0.92), transparent); }
 .mapoverlay-close { margin-left: auto; background: rgba(233,184,79,0.15); border: 1px solid #E9B84F;
   border-radius: 8px; color: #E9B84F; cursor: pointer; padding: 6px 14px; font-family: monospace;
   font-size: 11px; letter-spacing: 1px; }
 /* the expandable capital card — tap a country with no units there to see its
    economy, military posture, relations and weather together in one place. */
 .capcard { position: absolute; transform: translate(-50%, calc(-100% - 26px)); z-index: 6; width: 200px;
   padding: 11px 12px; border-radius: 11px; background: rgba(10,17,28,0.96); backdrop-filter: blur(3px);
   border: 1px solid rgba(233,184,79,0.4); box-shadow: 0 10px 26px rgba(0,0,0,0.5);
   animation: cardIn .18s ease-out both; }
 /* clamp inside the map frame so a card near an edge stays fully visible */
 .capcard { max-width: calc(100vw - 24px); }
 @keyframes cardIn { from { opacity: 0; transform: translate(-50%, calc(-100% - 20px)) scale(.94); }
                       to { opacity: 1; transform: translate(-50%, calc(-100% - 26px)) scale(1); } }
 .maplayers { position: absolute; top: 44px; left: 0; right: 0; z-index: 2; display: flex; gap: 6px;
   flex-wrap: wrap; padding: 0 18px; }
 .maplayer-btn { background: rgba(13,21,34,0.72); border: 1px solid rgba(233,184,79,0.3); border-radius: 999px;
   color: #C7D3E3; cursor: pointer; padding: 4px 11px; font-family: monospace; font-size: 10px;
   letter-spacing: 1px; text-transform: uppercase; }
 .maplayer-on { background: rgba(233,184,79,0.22); border-color: #E9B84F; color: #E9B84F; }
 /* the quarter-step chain: five nodes read as one circuit, current/done steps carry the charge.
    Cool cyan, thin lines, a schematic readout rather than warm ornate metal — the JARVIS register,
    not the Stark gauntlet one. */
 @media (min-width: 900px) {
   .qchain { flex-wrap: nowrap !important; }
   .qchain-node { position: relative; }
   .qchain-node:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -8px; width: 8px; height: 1px;
     background: linear-gradient(90deg, rgba(127,182,232,0.5), rgba(127,182,232,0.1)); transform: translateY(-50%); z-index: 1; }
   .qchain-node.qchain-done:not(:last-child)::after { background: linear-gradient(90deg, #7FB6E8, rgba(127,182,232,0.25));
     box-shadow: 0 0 4px rgba(127,182,232,0.75); }
   .qchain-node:not(:last-child)::before { content: ""; position: absolute; top: 50%; right: -4.5px; width: 3px; height: 3px;
     border-radius: 50%; background: rgba(127,182,232,0.3); transform: translate(50%, -50%); z-index: 2; }
   .qchain-node.qchain-done:not(:last-child)::before { background: #7FB6E8; box-shadow: 0 0 5px rgba(127,182,232,0.95); }
 }
 @keyframes mapZoom { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
 @media (prefers-reduced-motion: reduce) { .mapoverlay, .hostilering { animation: none !important; } }

 /* ── coalition ring ── */
 .coalring { position: relative; width: 92px; height: 108px; display: flex; flex-direction: column;
   align-items: center; margin-left: -13px; }
 .coalring svg { filter: drop-shadow(0 0 7px rgba(127,182,232,0.3)); }
 .coalcenter { position: absolute; top: 0; left: 0; width: 92px; height: 92px; display: flex;
   flex-direction: column; align-items: center; justify-content: center; }

 /* ── the dial rail ── */
 .dialrail { position: fixed; right: 12px; top: 120px; pointer-events: none; display: flex; flex-direction: column;
   gap: 14px; z-index: 30; }
 @media (max-width: 1099px) { .dialrail { display: none; } }
 .dial { position: relative; width: 66px; height: 84px; background: transparent; border: none;
   cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; }
 .dial svg { filter: drop-shadow(0 0 5px rgba(127,182,232,0.25)); }
 .dial .dial-arc { transition: stroke-dasharray .5s cubic-bezier(.4,0,.2,1); }
 .dial:hover .dial-arc { filter: brightness(1.3); }
 .dial-center { position: absolute; top: 0; left: 0; width: 66px; height: 66px;
   display: flex; align-items: center; justify-content: center; }
 .dial-val { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 600; letter-spacing: 0.3px; }
 .dial-label { font-family: monospace; font-size: 8px; letter-spacing: 1.4px; color: #8FA0B6; margin-top: 2px; }
 .dial:hover { transform: translateX(-3px); }
 .dial-open svg { animation: dialSpin .6s cubic-bezier(.4,0,.2,1); }
 .dial-open .dial-label { color: #7FB6E8; }
 @keyframes dialSpin { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.12); } to { transform: rotate(360deg) scale(1); } }

 /* ── the tab / panel reveal: winds open from the dial ── */
 .board > * { animation: windOpen .42s cubic-bezier(.2,.7,.2,1) both; }
 .board > *:nth-child(2) { animation-delay: .04s; }
 .board > *:nth-child(3) { animation-delay: .08s; }
 .board > *:nth-child(4) { animation-delay: .12s; }
 .board > *:nth-child(5) { animation-delay: .15s; }
 .board > *:nth-child(n+6) { animation-delay: .18s; }
 @keyframes windOpen {
   from { opacity: 0; transform: perspective(800px) rotateX(8deg) translateY(14px) scale(.97); }
   to { opacity: 1; transform: perspective(800px) rotateX(0) translateY(0) scale(1); }
 }

 @media (prefers-reduced-motion: reduce) {
   .board > *, .dial-open svg { animation: none !important; }
   .dial .dial-arc { transition: none; }
 }

 button:hover { filter: brightness(1.12); }
 button:active { transform: translateY(1px); }
 select, input, textarea { border-radius: 8px !important; }
 @media (prefers-reduced-motion: reduce) { button { transition: none; } }
 @media (max-width: 899px) { .mapbox svg { max-height: 38vh; } }

 /* ── DEPARTMENT FAMILIES · shell-level skin (body ground, header, map veil).
    The panels themselves are re-coloured in JS; these rules handle only the
    surfaces that live in CSS, keyed off the data-dept attribute on <html>. ── */
 html, body { transition: background-color .45s ease; }
 header { transition: background .45s ease, border-color .45s ease; }

 /* 1 · INSTITUTIONS — mahogany chamber */
 html[data-dept="institutions"], html[data-dept="institutions"] body { background: #1C0F0C !important; }
 html[data-dept="institutions"] header { background: linear-gradient(180deg, rgba(30,16,12,0.98), rgba(24,12,9,0.90)) !important; border-bottom: 1px solid #4E3327 !important; }
 html[data-dept="institutions"] .mapbg { opacity: 0.80; filter: sepia(0.3) saturate(1.1); }
 html[data-dept="institutions"] .mapveil { background: radial-gradient(ellipse at 50% 42%, rgba(28,15,12,0.20), rgba(28,15,12,0.82)); }

 /* 2 · SITUATION ROOM — abyssal black, radar glow */
 html[data-dept="situation"], html[data-dept="situation"] body { background: #04070A !important; }
 html[data-dept="situation"] header { background: linear-gradient(180deg, rgba(4,10,9,0.98), rgba(2,6,6,0.92)) !important; border-bottom: 1px solid #143D30 !important; }
 html[data-dept="situation"] .mapbg { opacity: 0.55; filter: grayscale(1) brightness(0.8) sepia(1) hue-rotate(90deg) saturate(2.4); }
 html[data-dept="situation"] .mapveil { background: radial-gradient(ellipse at 50% 42%, rgba(2,10,8,0.22), rgba(2,8,7,0.84)); }

 /* 3 · BUREAUCRACY — frosted ledger (light) */
 html[data-dept="bureaucracy"], html[data-dept="bureaucracy"] body { background: #E7ECF1 !important; }
 html[data-dept="bureaucracy"] header { background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(231,236,241,0.92)) !important; border-bottom: 1px solid #C6D2DE !important; }
 html[data-dept="bureaucracy"] .mapbg { opacity: 0.30; filter: grayscale(1) brightness(1.35); }
 html[data-dept="bureaucracy"] .mapveil { background: radial-gradient(ellipse at 50% 42%, rgba(231,236,241,0.34), rgba(231,236,241,0.72)); }

 /* 4 · GLOBAL STAGE — glass over deep ocean */
 html[data-dept="global"], html[data-dept="global"] body { background: #0A1826 !important; }
 html[data-dept="global"] header { background: linear-gradient(180deg, rgba(12,28,44,0.92), rgba(10,24,38,0.80)) !important; border-bottom: 1px solid rgba(130,170,210,0.40) !important; }
 html[data-dept="global"] .mapbg { opacity: 0.85; filter: saturate(1.15) brightness(1.05); }
 html[data-dept="global"] .mapveil { background: radial-gradient(ellipse at 50% 42%, rgba(10,24,38,0.06), rgba(10,24,38,0.56)); }

/* Build 37 · mandate breakdown */
.hm-mandate{border:1px solid var(--edge,#c7d2d3);border-radius:10px;padding:12px 14px;margin:10px 0;background:rgba(255,255,255,.35)}
.hm-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.hm-head strong{font-size:22px}.hm-head small{color:#4a5f69}
.hm-mandate h4{margin:10px 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#4a5f69}
.hm-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline;padding:3px 0;border-bottom:1px dotted #c7d2d3;font-size:13px}
.hm-row small{color:#4a5f69;font-size:11px}.hm-up{color:#2f7d4e}.hm-down{color:#b22c3c}
.hm-net{font-size:12px;color:#11232c;margin:6px 0}.hm-risk{background:#f6e7e9;border-left:3px solid #b22c3c;padding:6px 8px;font-size:12px;margin-top:6px}
.hm-trends{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:10px 0}
.hm-trend{margin:0;border:1px solid #c7d2d3;border-radius:8px;padding:6px 8px;color:#1e6b7c}
.hm-trend figcaption{display:flex;gap:6px;align-items:baseline;color:#11232c;font-size:12px}.hm-trend figcaption span{flex:1}
.hm-trend svg{width:100%;height:54px;display:block}
.hm-causal{border-left:3px solid #1e6b7c;padding:4px 10px;margin:10px 0}.hm-causal ol{margin:4px 0 0 18px;font-size:13px}
.dk-cost{display:block;font-size:11px;margin-top:4px;color:#4a5f69}.dk-cost.bad{color:#b22c3c;font-weight:600}
.hm-key{border:1px solid #c7d2d3;border-radius:10px;padding:10px 12px;margin:10px 0}.hm-key dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:6px 0 0}
.hm-key dt{font-size:13px}.hm-key dd{margin:2px 0 0;font-size:12px;color:#4a5f69}
.vx-whip-notes{margin:4px 0 6px 16px;font-size:11.5px;color:#4a5f69}.vx-whip-notes li.bad{color:#b22c3c}.vx-whip-notes li.good{color:#2f7d4e}
.hm-chamber{border:1px solid #c7d2d3;border-radius:10px;padding:10px 12px;margin-top:12px}
/* Build 37: the header tickers were pale-on-paper (light green/pink built for the old dark header). Readable ink now. */
.hos-places .tk-lane{color:#11232c}
.hos-places .tk-good{color:#2f6b45}.hos-places .tk-bad{color:#9c2a36}.hos-places .tk-plain{color:#11232c}
.hos-places .tk-q.up{color:#2f7d4e}.hos-places .tk-q.down{color:#b22c3c}
.hos-places .tk-wrap{flex:1 1 300px !important;min-width:260px !important}
.gd-tour.gd-tour-pill{width:auto;max-width:360px;top:auto;bottom:24px;padding:8px 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px}
.gd-tour.gd-tour-pill span{flex:1 1 100%}
.hm-election{border:1px solid #c7d2d3;border-left:4px solid #1e6b7c;border-radius:8px;padding:8px 12px;margin:8px 0}
.hm-election.hm-lose{border-left-color:#b22c3c}.hm-election.hm-win{border-left-color:#2f7d4e}.hm-election ul{margin:4px 0 0 18px;font-size:12.5px}
.hm-election p{margin:4px 0;font-size:13px}
/* Build 37: readable inside the close-the-quarter column, and a clean active state for the Sign-off step */
.hos-places .hm-mandate,.hos-places .hm-mandate *{color:#11232c}
.hos-places .hm-mandate small,.hos-places .hm-mandate .hm-head small{color:#4a5f69}
.hos-places .hm-mandate .hm-up{color:#2f7d4e}.hos-places .hm-mandate .hm-down{color:#b22c3c}
.hos-places .hm-mandate .hm-head strong{font-size:22px;color:#11232c}
.hos-places .hm-mandate .hm-risk,.hos-places .hm-mandate .hm-risk *{color:#7a1d28}
.hm-row{grid-template-columns:1fr auto}.hm-row small{grid-column:1/-1;grid-row:2}
.hos-places .hp-turn > button.active{background:linear-gradient(180deg,#eef2f2,#dfe6e7) !important;color:#11232c !important}
.hos-places .hp-turn > button.active small,.hos-places .hp-turn > button.active span{color:#4a5f69 !important}
/* Build 37.1: text inside the new panels inherited the legacy light-on-dark colour on the paper theme */
.hos-places .hm-causal li,.hos-places .hm-key dt,.hos-places .hm-key dd,.hos-places .hm-election p,.hos-places .hm-election b,.hos-places .hm-chamber dt,.hos-places .hm-chamber p,.hos-places .hm-trend figcaption span,.hos-places .hm-trend figcaption small{color:#11232c}
.hos-places .hm-key dd,.hos-places .hm-trend figcaption small{color:#4a5f69}
.hos-places .hm-election li.hm-up,.hos-places .hm-chamber dd.hx-good{color:#2f7d4e}.hos-places .hm-election li.hm-down,.hos-places .hm-chamber dd.hx-bad{color:#b22c3c}
.hos-places .hm-chamber dd{color:#11232c}.hos-places .hm-chamber dd.hx-warn{color:#8a5a12}
.hos-places .hx-race span,.hos-places .hx-race small{color:#11232c}
.hos-places .vx-whip-notes li{color:#4a5f69}.hos-places .vx-whip-notes li.bad{color:#b22c3c}.hos-places .vx-whip-notes li.good{color:#2f7d4e}
.hos-places .hx-race b{color:#11232c}.hos-places .hx-race b.hx-bad{color:#b22c3c}.hos-places .hx-race b.hx-warn{color:#8a5a12}