/* Styles for the Fact Sheet rendering (Views/Jobs/FactSheet.cshtml).
   Every rule is scoped under .fs-root so nothing leaks onto the host Sitecore page. */
.fs-root {
  color-scheme: light;
  --eei-blue: #0083BE;
  --eei-blue-dark: #00567F;
  --eei-navy: #0B3552;
  --eei-gold: #F0AA24;
  --eei-gray: #3F4142;
  --useer: #D98E04;
  --page: #FFFFFF;
  --edge: #E3E8EC;          /* hairline around the sheet and panel on the white page */
  --surface: #FFFFFF;
  --ink: #1A1C1D;
  --ink-2: #4E5356;
  --muted: #80868A;
  --hairline: #DDE1E4;
  --track: #E6F1F8;
  --aside: #F2F7FA;
}
.fs-root, .fs-root * { box-sizing: border-box; }
.fs-root { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
.fs-root button, .fs-root select, .fs-root input { font: inherit; }

/* ---------- App shell ---------- */
/* This phase (2026-10-06, from the user): the generator-mode panel (place picker, map style,
   section toggles, print) is OFF — the sheet just shows its default sections. Kept, not deleted,
   for a later phase: to bring it back, add class="with-panel" here and uncomment the
   <aside class="fs-panel"> block (and its one-line guarded JS counterparts) further down. */
.fs-root .layout { max-width: 816px; margin: 0 auto; padding: 20px; }
@media (max-width: 900px) { .fs-root .layout { padding: 16px; } }
.fs-root .layout.with-panel { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; max-width: 1180px; }
@media (max-width: 900px) { .fs-root .layout.with-panel { grid-template-columns: minmax(0, 1fr); } }
.fs-root .toolbar { display: flex; justify-content: space-between; align-items: center; max-width: 816px; margin: 12px auto; }
.fs-root .toolbar .form-control { width: auto; min-width: 200px; }   /* site's Bootstrap form-control is full width; keep room for the Print button */
.fs-root .fs-panel { background: var(--surface); border: 1px solid var(--edge); border-radius: 8px; padding: 16px; align-self: start; position: sticky; top: 16px; }
@media (max-width: 900px) { .fs-root .fs-panel { position: static; } }
.fs-root .fs-panel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--eei-blue-dark); margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--edge); }
.fs-root .fs-panel h2:first-child { padding-top: 0; border-top: 0; }
.fs-root .fs-panel h2:first-child { margin-top: 0; }
.fs-root .fs-panel select { width: 100%; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 6px; background: #fff; }
.fs-root .toggle { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; cursor: pointer; }
.fs-root .toggle input { margin-top: 3px; accent-color: var(--eei-blue); }
.fs-root .toggle .note { display: block; font-size: 12px; color: var(--muted); }
.fs-root .fs-btn { display: inline-block; border: 0; border-radius: 6px; padding: 9px 14px; cursor: pointer; background: var(--eei-blue); color: #fff; font-weight: 600; }
.fs-root .fs-btn.fs-secondary { background: transparent; color: var(--eei-blue); border: 1px solid var(--eei-blue); }
.fs-root .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fs-root .fs-panel .hint { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* ---------- Fact sheet: Bold layout ---------- */
.fs-root .sheet-wrap { min-width: 0; }
/* On a white page the sheet is set apart by a hairline and a soft, blue-tinted shadow, like paper on a desk */
.fs-root .sheet { position: relative; background: var(--surface); width: 100%; max-width: 816px; margin: 0 auto; border: 1px solid var(--edge); border-radius: 6px;
         box-shadow: 0 1px 2px rgba(11,53,82,.06), 0 10px 30px rgba(11,53,82,.10); overflow: hidden; }

.fs-root .band { background: var(--eei-blue); color: #fff; padding: 26px 36px 22px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 6px solid var(--eei-gold); }
@media (max-width: 600px) { .fs-root .band { padding: 20px 16px; } }
.fs-root .band .kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.fs-root .band h2 { margin: 4px 0 0; font-size: 36px; line-height: 1.1; font-weight: 700; }
/* EEI_Logo-horz_rev.png (2026-10-08 decision, from the user: the full horizontal lockup, not the
   compact "bug" mark) — white-on-transparent, made for sitting on this blue band. */
.fs-root .band .logo-slot { flex: none; width: auto; max-width: 240px; }
.fs-root .band .logo-slot img { max-width: 100%; max-height: 44px; display: block; }
/* Phones: kicker and logo share the top row and the place name gets the full width below, so a long
   name can't squeeze the logo off the edge. display: contents lets the kicker and h2 inside the band's
   first <div> join the band's grid directly. */
@media (max-width: 600px) {
  .fs-root .band { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; align-items: center; }
  .fs-root .band > div:first-child { display: contents; }
  .fs-root .band .kicker { grid-column: 1; grid-row: 1; }
  .fs-root .band .logo-slot { grid-column: 2; grid-row: 1; max-width: 120px; }
  .fs-root .band h2 { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; overflow-wrap: break-word; }
}

.fs-root .body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; padding: 24px 36px 8px; }
.fs-root .body.one-col { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) { .fs-root .body { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 8px; } }

.fs-root .fs-block { margin-bottom: 22px; }
.fs-root .fs-block h3 { font-weight:bold; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--eei-blue-dark); margin: 0 0 0px; }
.fs-root .fs-block .sub { font-size: 12.5px; color: var(--ink-2); margin: -4px 0 10px; }

/* Hero */
.fs-root .fs-hero .label { font-size: 14px; color: var(--ink-2); }
.fs-root .fs-hero .big { font-size: 56px; font-weight: 700; line-height: 1; color: var(--eei-navy); margin: 4px 0 6px; }
@media (max-width: 420px) { .fs-root .fs-hero .big { font-size: 44px; } }
.fs-root .fs-hero .line { font-size: 17px; color: var(--ink-2); margin: 0 0 12px; }
.fs-root .fs-hero .line b { color: var(--ink); }

/* Comms copy blocks: heading reuses .fs-block h3; body text matches the other sections' copy (e.g. .defs) */
.fs-root .prose p { font-size: 14px; color: var(--ink-2); margin: 0 0 6px; }
.fs-root .prose p:last-child { margin-bottom: 0; }

/* Bar list (single series) */
.fs-root .bl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.fs-root .bl .rl { font-size: 12.5px; color: var(--ink-2); }
.fs-root .bl .track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fs-root .bl .bar { height: 16px; background: var(--eei-blue); border-radius: 0 4px 4px 0; min-width: 2px; }
.fs-root .bl .bar.useer { background: var(--useer); }
.fs-root .bl .val { font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs-root .bl .val small { font-weight: 400; color: var(--muted); }
.fs-root .defs { font-size: 11.5px; color: var(--ink-2); margin: 10px 0 0; }

/* Activity table */
.fs-root table.act { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.fs-root table.act th, .fs-root table.act td { border-top:none; border-left:none; width:unset; padding: 6px 6px; text-align: right; border-bottom: 1px solid var(--hairline); }
.fs-root table.act th:first-child, .fs-root table.act td:first-child { text-align: left; }
.fs-root table.act th:not(:first-child), .fs-root table.act td:not(:first-child) { width: 18%; } /* Jobs, Wages and benefits, GDP: equal widths */
.fs-root table.act thead th { background: none; font-size: 11.5px; color: var(--ink-2); font-weight: 600; border-bottom: 2px solid var(--eei-blue); }
.fs-root table.act tr.total td { font-weight: 700; border-bottom: 0; }
.fs-root table.act caption.act-note { caption-side: bottom; text-align: left; font-size: 14px; color: var(--ink-2); font-weight: unset; background: unset; border: none; padding: 8px 0 0 0; }
.fs-root table  {margin: unset; border: unset; border-collapse: unset; table-layout: unset;}

/* Aside */
.fs-root aside.side { background: var(--aside); border-radius: 10px; padding: 16px; align-self: start; }
.fs-root .impact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 0 0 10px; }
.fs-root .impact-row .stat { padding: 2px 0; }
.fs-root .impact-row .stat:first-child { border-right: 1px solid var(--hairline); }
.fs-root .impact-row .v { display: block; font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.fs-root .impact-row .l { font-size: 14px; color: var(--ink-2); }
.fs-root .glance { list-style: none; margin: 0; padding: 0; }
.fs-root .glance li { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.fs-root .glance li:last-child { border-bottom: 0; }
.fs-root .glance .v { display: block; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.fs-root .glance .l { font-size: 14px; color: var(--ink-2); }
.fs-root .ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fs-root .rank { background: var(--surface); border-radius: 8px; padding: 10px; text-align: center; }
.fs-root .rank .n { font-size: 26px; font-weight: 700; color: var(--eei-navy); line-height: 1.1; }
.fs-root .rank .t { font-size: 11.5px; color: var(--ink-2); }
.fs-root .cmp { margin-top: 10px; display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 6px 8px; align-items: center; font-size: 12px; }
.fs-root .cmp .bar { height: 10px; border-radius: 0 4px 4px 0; background: var(--eei-blue); }
.fs-root .cmp .bar.us { background: #9AA3A8; }
.fs-root .cmp .track { display: flex; gap: 6px; align-items: center; min-width: 0; }
.fs-root .cmp .val { font-weight: 600; font-variant-numeric: tabular-nums; }

.fs-root .tilemap { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 2px; }
.fs-root .st { aspect-ratio: 1; border-radius: 3px; display: grid; place-items: center; font-size: 7.5px; font-weight: 600; cursor: pointer; border: 0; padding: 0; }
.fs-root .st.sel { outline: 2.5px solid var(--ink); outline-offset: 1px; position: relative; z-index: 1; }
/* Geographic map (shared GeoMap renderer) — locator style: every state one flat color, the
   selected state is marked by its outline only (see .geo-state.sel / .st.sel), not a color change */
.fs-root .geomap svg { display: block; width: 100%; height: auto; }
.fs-root .geo-state { stroke: #fff; stroke-width: 0.6; cursor: pointer; outline: none; }
.fs-root .geo-state:hover, .fs-root .geo-state:focus-visible { stroke: var(--ink); stroke-width: 1.2; }
.fs-root .geo-state.sel { stroke: var(--ink); stroke-width: 2; }
.fs-root .geo-closeup .geo-state { stroke-width: 1; }
.fs-root .geo-closeup .geo-state.sel { stroke-width: 2; }
.fs-root .geo-label { fill: var(--ink-2); font-weight: 600; }
.fs-root .geo-neighbor { fill: #6B7378; font-weight: 600; pointer-events: none; }
.fs-root #mapTitle:empty { display: none; }
.fs-root .map-sub { font-size: 11.5px; color: var(--ink-2); margin: -4px 0 8px; }
.fs-root .map-note { font-size: 11px; color: var(--muted); margin: 6px 0 0; }
.fs-root .map-hint { font-size: 11.5px; color: var(--ink-2); text-align: center; margin: 0 0 6px; }
.fs-root .map-reset { display: block; margin: 6px auto 0; padding: 0; border: 0; background: none; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--eei-blue); }
.fs-root .map-reset:hover, .fs-root .map-reset:focus-visible { text-decoration: underline; }
.fs-root [data-sec="report"] h3 { text-align: center; }
.fs-root .report-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 4px; text-decoration: none; }
.fs-root .qr-img { width: 96px; height: 96px; display: block; }
.fs-root .report-slot .fs-link { font-size: 11.5px; color: var(--ink-2); }
.fs-root .fs-panel .map-style { display: flex; flex-wrap: wrap; gap: 4px; }
.fs-root .fs-panel .map-style label { flex: 1 1 auto; text-align: center; border: 1px solid var(--hairline); border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 13px; }
.fs-root .fs-panel .map-style input { position: absolute; opacity: 0; pointer-events: none; }
.fs-root .fs-panel .map-style label:has(input:checked) { border-color: var(--eei-blue); background: #E6F3FA; color: var(--eei-blue-dark); font-weight: 600; }
.fs-root .fs-panel .map-style label:has(input:focus-visible) { outline: 2px solid var(--eei-blue); outline-offset: 1px; }


.fs-root .page-mark { position: absolute; left: 0; right: 0; border-top: 1.5px dashed #E07A5F; pointer-events: none; }
.fs-root .page-mark span { position: absolute; left: 2px; top: -15px; width: 40px; font-size: 10px; line-height: 1.2; color: #B4533A; }

.fs-root .table-view { padding: 0 36px 8px; }
@media (max-width: 700px) { .fs-root .table-view { padding: 0 16px 8px; } }
.fs-root .table-view .tv-scroll { overflow-x: auto; }
.fs-root .table-view thead th { color: var(--ink-2); font-weight: 600; border-bottom: 2px solid var(--eei-blue); }
.fs-root .table-view table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fs-root .table-view th, .fs-root .table-view td { padding: 6px 8px; border-bottom: 1px solid var(--hairline); text-align: right; white-space: nowrap; }
.fs-root .table-view th:first-child, .fs-root .table-view td:first-child { text-align: left; }

.fs-root #tip { position: fixed; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 6px; max-width: 260px; opacity: 0; transition: opacity .1s; z-index: 10; }
.fs-root #tip b { display: block; }
.fs-root [hidden] { display: none !important; }

@page { size: letter; margin: 0; }
@media print {
  /* Print only the fact sheet: hide everything on the host page (header, nav, footer, other
     renderings) except .fs-root and the chain of containers it sits in, and flatten that chain's
     spacing so the sheet starts at the top of page 1 and the letter-size page breaks line up. */
  body *:not(.fs-root):not(.fs-root *):not(:has(.fs-root)) { display: none !important; }
  html, body, body *:has(.fs-root) { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
                                     width: auto !important; max-width: none !important; min-height: 0 !important; position: static !important;
                                     float: none !important; transform: none !important; box-shadow: none !important; background: #fff !important; }
  .fs-root { background: #fff; }
  .fs-root .fs-panel, .fs-root .toolbar, .fs-root .page-mark, .fs-root #tip, .fs-root .map-hint, .fs-root .map-reset { display: none !important; }
  .fs-root .layout { display: block; padding: 0; max-width: none; }
  .fs-root .sheet { box-shadow: none; max-width: none; border: 0; border-radius: 0; }
  .fs-root .fs-block, .fs-root aside.side { break-inside: avoid; }
  .fs-root, .fs-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}