:root{--bg:#fbfbfc;--fg:#16181d;--muted:#6b7280;--card:#fff;--line:#e4e6eb;--accent:#2a78d6}
@media(prefers-color-scheme:dark){:root{--bg:#14161a;--fg:#e8eaed;--muted:#9aa1ac;--card:#1c1f25;--line:#2c3038;--accent:#4f9bff}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.index{max-width:760px;margin:0 auto;padding:48px 20px}
.index h1{font-size:22px;font-weight:650;margin:0 0 22px}
.index ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.index a{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-decoration:none;color:inherit}
.index a:hover{border-color:var(--accent)}
.index span{font-size:13px;color:var(--muted)}

.dash-nav{display:flex;gap:4px;align-items:center;padding:8px 14px;background:#000;font:13px system-ui,-apple-system,sans-serif;flex-wrap:wrap}
/* The home icon is an <a> too, so it opts OUT of the switcher-link padding and
   keeps its own square hit area. */
.dash-nav a.brand{display:inline-flex;align-items:center;justify-content:center;color:#9aa1ac;padding:5px;border-radius:6px;text-decoration:none}
.dash-nav a.brand:hover{background:#1f232a;color:#fff}
.dash-nav .brand svg{display:block}
.dash-nav .sep{width:1px;align-self:stretch;background:#2c3038;margin:0 10px}
.dash-nav a{padding:4px 10px;border-radius:6px;text-decoration:none;color:#c9ced6}
.dash-nav a:hover{background:#1f232a;color:#fff}
.dash-nav a.on{background:#fff;color:#000;font-weight:550}

/* U.S. Emissions Explorer theme: appended to the bundle's assets/site.css by scripts/build_site.py.
   Navy top bar with grouped section pills, a navy hero per page, a white filter card that overlaps
   the hero, warm off-white page, rounded white cards. Light theme on purpose (charts are light). */

html:root {
  --ge-navy: #0b1d33; --ge-navy-2: #12355c; --ge-ink: #0f172a; --ge-muted: #5b6475; --ge-line: #e6e3dc;
  --ge-page: #f4f2ee; --ge-card: #ffffff; --ge-accent: #2a78d6; --ge-accent-2: #eb6834;
  --bg: var(--ge-page); --fg: var(--ge-ink); --muted: var(--ge-muted); --card: #fff; --line: var(--ge-line); --accent: var(--ge-accent);
  /* dashboard runtime controls */
  --dash-bg: var(--ge-page); --dash-fg: var(--ge-ink); --dash-muted: var(--ge-muted); --dash-border: #e2dfd7;
  --dash-accent: var(--ge-accent); --dash-accent-fg: #fff; --dash-control-bg: #fff; --dash-controls-bg: #fff;
  --dash-chip-bg: #e8f0fb; --dash-chip-fg: #174a87; --dash-panel-bg: transparent; --dash-radius: 14px;
  --dash-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
html, body { background: var(--ge-page) !important; color: var(--ge-ink); }
body { font: 15px/1.5 var(--dash-font); -webkit-font-smoothing: antialiased; }

/* ---------- top navigation ---------- */
.ge-top { position: sticky; top: 0; z-index: 100; background: var(--ge-navy); color: #fff;
  display: flex; align-items: center; gap: 18px; padding: 10px 24px; overflow-x: auto; scrollbar-width: none; }
.ge-top::-webkit-scrollbar { display: none; }
.ge-brand { color: #fff; text-decoration: none; font-weight: 750; font-size: 15px; letter-spacing: -.01em; white-space: nowrap;
  display: flex; align-items: center; gap: 9px; margin-right: 6px; }
.ge-brand svg { flex: none; }
.ge-sections { display: flex; gap: 6px; }
.ge-sections a { display: block; padding: 7px 14px; border-radius: 12px; text-decoration: none; color: #dbe6f3; white-space: nowrap; line-height: 1.2; }
.ge-sections a b { display: block; font-size: 13.5px; font-weight: 600; color: #fff; }
.ge-sections a small { display: block; font-size: 11px; color: #9fb4cc; }
.ge-sections a:hover { background: rgba(255, 255, 255, .08); }
.ge-sections a.on { background: #fff; }
.ge-sections a.on b { color: var(--ge-navy); }
.ge-sections a.on small { color: #4a5b70; }
.ge-pages { position: sticky; top: 58px; z-index: 99; display: flex; gap: 4px; padding: 8px 24px; background: #fff;
  border-bottom: 1px solid var(--ge-line); overflow-x: auto; scrollbar-width: none; }
.ge-pages::-webkit-scrollbar { display: none; }
.ge-pages a { padding: 5px 12px; border-radius: 999px; text-decoration: none; color: var(--ge-muted); font-size: 13.5px; white-space: nowrap; }
.ge-pages a:hover { background: #f1efe9; color: var(--ge-ink); }
.ge-pages a.on { background: var(--ge-ink); color: #fff; font-weight: 600; }
.dash-nav { display: none !important; } /* replaced by .ge-top / .ge-pages */

/* ---------- page hero (tag-only dashboards: title + description + controls + panel) ---------- */
#root > div { padding: 0 !important; background: var(--ge-page); }
#root > div > h1 { margin: 0 !important; padding: 34px 32px 8px; font-size: 32px !important; line-height: 1.15; font-weight: 750;
  letter-spacing: -.015em; color: #fff; background: var(--ge-navy-2); }
#root > div > h1::before { content: "U.S. greenhouse gas emissions"; display: block; font-size: 12px; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: #9fc1e6; margin-bottom: 8px; }
#root > div > p { margin: 0 !important; padding: 0 32px 70px; max-width: none; color: #d5e1ee !important; font-size: 15.5px;
  background: var(--ge-navy-2); }
#root > div > h1, #root > div > p { border: 0 !important; box-shadow: 0 1px 0 var(--ge-navy-2); } /* no seam between the two */
#root > div > h1 + p + div, #root > div > h1 + div { margin: -48px 32px 22px !important; padding: 14px 18px !important; background: #fff !important;
  border: 0 !important; border-radius: 16px !important; box-shadow: 0 12px 32px rgba(11, 29, 51, .14) !important; }
#root > div > h1 + div { margin-top: 18px !important; }
#root label, #root [style*="text-transform: uppercase"] { letter-spacing: .06em; }
#root select, #root input { border-radius: 10px !important; }

/* ---------- result cards (Malloy renderer) ---------- */
#root .malloy-render { --malloy-render--dashboard-bg: transparent; background: transparent !important; }
#root > div > div:last-child { padding: 0 32px 40px; }
#root .malloy-dashboard { background: transparent !important; }
#root .malloy-dashboard .dashboard-item { background: var(--ge-card) !important; border-radius: 18px !important; padding: 20px 22px !important;
  box-shadow: 0 0 0 1px var(--ge-line), 0 1px 2px rgba(15, 23, 42, .05) !important; }
#root .malloy-dashboard .dashboard-item-title { font-size: 16.5px !important; font-weight: 700 !important; color: var(--ge-ink) !important; }
#root .malloy-dashboard .dashboard-item-subtitle { color: var(--ge-muted) !important; font-size: 13px !important; }
/* KPI tiles: the accent goes on the outer card; the renderer's inner card is flattened */
#root .malloy-dashboard .dashboard-item:has(.malloy-big-value) { border-left: 5px solid var(--ge-accent) !important; }
#root .malloy-dashboard .dashboard-columns > .dashboard-item:has(.malloy-big-value):nth-child(3n+2) { border-left-color: var(--ge-accent-2) !important; }
#root .malloy-dashboard .dashboard-columns > .dashboard-item:has(.malloy-big-value):nth-child(3n+3) { border-left-color: #1baf7a !important; }
#root .malloy-big-value-card { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
#root .malloy-big-value-label { text-transform: none !important; letter-spacing: 0 !important; color: var(--ge-muted) !important; font-weight: 600 !important; }
#root .malloy-big-value-value { color: var(--ge-ink) !important; font-weight: 750 !important; }
#root .malloy-render { --malloy-theme--table-header-color: #5b6475; --malloy-theme--table-body-color: #1f2937; --malloy-theme--table-font-size: 13px; }

/* ---------- landing page ---------- */
.ge-land-hero { background: linear-gradient(135deg, var(--ge-navy) 0%, var(--ge-navy-2) 55%, #1b5a96 100%); color: #fff; padding: 56px 32px 96px; }
.ge-land-hero .eyebrow { font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #9fc1e6; }
.ge-land-hero h1 { font-size: 44px; line-height: 1.08; letter-spacing: -.02em; margin: 10px 0 14px; max-width: 900px; }
.ge-land-hero p { font-size: 17px; color: #d5e1ee; max-width: 820px; margin: 0; }
.ge-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: -60px 32px 0; position: relative; }
.ge-stat { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 12px 32px rgba(11, 29, 51, .12); border-left: 4px solid var(--ge-accent); }
.ge-stat:nth-child(2) { border-left-color: var(--ge-accent-2); } .ge-stat:nth-child(3) { border-left-color: #1baf7a; } .ge-stat:nth-child(4) { border-left-color: #898781; }
.ge-stat span { display: block; font-size: 12.5px; color: var(--ge-muted); font-weight: 600; }
.ge-stat b { display: block; font-size: 26px; font-weight: 750; margin-top: 2px; }
.ge-stat small { color: var(--ge-muted); }
.ge-section { padding: 34px 32px 0; }
.ge-section h2 { font-size: 20px; margin: 0 0 2px; }
.ge-section > p { color: var(--ge-muted); margin: 0 0 14px; }
.ge-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ge-cards a { display: block; background: #fff; border-radius: 16px; padding: 16px 18px; text-decoration: none; color: inherit;
  box-shadow: 0 0 0 1px var(--ge-line); transition: box-shadow .12s, transform .12s; }
.ge-cards a:hover { box-shadow: 0 0 0 1px var(--ge-accent), 0 10px 24px rgba(11, 29, 51, .10); transform: translateY(-1px); }
.ge-cards b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.ge-cards span { display: block; font-size: 13px; color: var(--ge-muted); line-height: 1.45; }
.ge-foot { margin: 44px 32px 0; padding: 22px 0 40px; border-top: 1px solid var(--ge-line); color: var(--ge-muted); font-size: 13px; }
.ge-foot a { color: var(--ge-accent); }
.ge-callout { display: flex; gap: 10px; background: #ece9e2; border-radius: 12px; padding: 12px 14px; font-size: 14px; color: #364152; margin: 18px 32px 0; }
.ge-callout i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ge-accent); color: #fff; font: 700 13px/20px Georgia, serif; text-align: center; font-style: normal; }

@media (max-width: 900px) {
  .ge-top { padding: 8px 14px; gap: 10px; } .ge-pages { top: 54px; padding: 8px 14px; }
  #root > div > h1 { padding: 26px 16px 6px; font-size: 25px !important; } #root > div > p { padding: 0 16px 64px; }
  #root > div > h1 + p + div { margin: -48px 12px 18px !important; } #root > div > div:last-child { padding: 0 12px 32px; }
  .ge-land-hero { padding: 40px 16px 86px; } .ge-land-hero h1 { font-size: 32px; }
  .ge-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -56px 12px 0; } .ge-section { padding: 28px 12px 0; } .ge-foot, .ge-callout { margin-left: 12px; margin-right: 12px; }
}