/* -------------------------------------------------------------------------
   Nowcast share graphic - off-screen editorial layout captured to PNG.

   This is the browser port of social_media_graphics/build_nowcast.py: same
   1200px portrait composition, same typography, same palette. Shared rather
   than page-local so every page that exports a projection produces the same
   picture. Used by build-your-own-ge and the demographic swingometer.

   Palette follows the nowcast, not the older 16:9 card: ink #1a1a1a, muted
   #999, hairlines #eee, deltas #2e7d32 / #c62828.
   ------------------------------------------------------------------------- */
/* html2canvas only, and it must come BEFORE the component rules: `.ng-gfx-h2c *`
   ties on specificity with `.ng-gfx-brand`, so placed after it would override
   the per-component letter-spacing and render every heading narrower. A hair of
   spacing forces html2canvas onto its per-glyph text path, which keeps
   inter-word spaces; without it words collapse on mobile. The big tabular seat
   counts get visible digit gaps from it, so those are reset below. Pages
   rasterising with html-to-image do not need this and leave the modifier off. */
.ng-gfx-h2c, .ng-gfx-h2c * { letter-spacing: 0.08px; }

.ng-gfx {
    width: 1200px;
    background: #fff;
    padding: 48px 60px 36px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: #1a1a1a;
}
.ng-gfx-brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #1a1a1a;
}
.ng-gfx-rule { height: 3px; background: #1a1a1a; margin-top: 10px; }
.ng-gfx-kicker {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999;
    margin-top: 22px;
}
.ng-gfx-headline {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 44px;
    margin-top: 8px;
    line-height: 1.08;
}
.ng-gfx-compwrap { margin-top: 40px; position: relative; }
.ng-gfx-compbar {
    display: flex;
    height: 30px;
    width: 100%;
    border-radius: 2px;
    overflow: hidden;
}
.ng-gfx-compbar div { height: 100%; }
.ng-gfx-majline {
    position: absolute;
    top: -6px;
    height: 42px;
    width: 2px;
    background: #1a1a1a;
}
.ng-gfx-majlab {
    position: absolute;
    top: -26px;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.ng-gfx-complabels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12.5px;
    color: #999;
}
.ng-gfx-cols { display: flex; margin-top: 28px; gap: 36px; align-items: flex-start; }
.ng-gfx-left { flex-shrink: 0; }
.ng-gfx-prow {
    display: flex;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #eee;
}
.ng-gfx-prow:first-child { border-top: 1px solid #1a1a1a; }
.ng-gfx-sw {
    width: 14px;
    height: 28px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-right: 16px;
}
.ng-gfx-pname { flex: 1; font-size: 18px; font-weight: 600; }
.ng-gfx-pbase {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.ng-gfx-h2c .ng-gfx-pseat, .ng-gfx-h2c .ng-gfx-pseat * { letter-spacing: normal; }
.ng-gfx-pseat {
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.ng-gfx-pchg { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ng-gfx-up { color: #2e7d32; }
.ng-gfx-down { color: #c62828; }
.ng-gfx-flat { color: #999; }
.ng-gfx-natwrap { margin-top: 30px; border-top: 1px solid #1a1a1a; padding-top: 18px; }
.ng-gfx-natlab {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
}
.ng-gfx-natrow { display: flex; align-items: center; margin-top: 15px; }
.ng-gfx-natname { width: 108px; flex-shrink: 0; font-size: 15px; font-weight: 600; }
.ng-gfx-natname span {
    color: #999;
    font-weight: 400;
    margin-left: 7px;
    font-variant-numeric: tabular-nums;
}
.ng-gfx-natbar { flex: 1; display: flex; height: 26px; border-radius: 2px; overflow: hidden; }
.ng-gfx-natbar div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ng-gfx-right { flex-shrink: 0; position: relative; }
.ng-gfx-mapcap {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ng-gfx-mapholder { margin-top: 4px; }
.ng-gfx-mapholder svg { display: block; }
.ng-gfx-mapholder img { display: block; width: 100%; height: auto; }
.ng-gfx-ldnbox { margin-top: 26px; }
.ng-gfx-ldnbox svg {
    display: block;
    margin-top: 8px;
    border: 1px solid #f0f0f0;
}
.ng-gfx-ldnbox img {
    display: block;
    margin-top: 8px;
    width: 100%;
    height: auto;
    border: 1px solid #f0f0f0;
}
.ng-gfx-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    border-top: 1px solid #eee;
    padding-top: 14px;
    font-size: 13px;
    color: #aaa;
}


/* Map-only poster variant */
.ng-gfx-cols-map { align-items: center; }
.ng-gfx-cols-map .ng-gfx-ldnbox { margin-top: 0; }
.ng-gfx-poster { display: flex; justify-content: center; margin-top: 20px; }
.ng-gfx-map .ng-gfx-headline { font-size: 52px; }
.ng-gfx-full .ng-gfx-ldnholder { margin-top: 6px; }

/* Minimal (logo-only) map export */
.ng-gfx-minimal { padding: 32px 40px 28px; }
.ng-gfx-minimal .ng-gfx-poster { margin-top: 0; }
.ng-gfx-logo {
    margin-top: 8px;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 40px;
    color: #1a1a1a;
    line-height: 1;
}
.ng-gfx-logo span {
    display: block;
    margin-top: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #999;
}

/* Legend rows (map poster) */
.ng-gfx-legend { border-top: 1px solid #1a1a1a; }
.ng-gfx-legrow {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.ng-gfx-legsw {
    width: 16px;
    height: 26px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-right: 14px;
}
.ng-gfx-legname { flex: 1; font-size: 18px; font-weight: 600; }
.ng-gfx-legseat { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }