/* Shared styles for decarbonization.thehonestbroker.org -- one file, four
   pages (index.html, percapita.html, methodology.html, library.html) --
   extracted from what was a single-page site's inline <style> block, kept
   as one file rather than duplicated per page so a site-wide tweak is one
   edit, not four kept in sync by hand. */

  :root {
    color-scheme: light;
    --surface-1:      #fcfcfb;
    --page:           #f9f9f7;
    --text-primary:   #16140f;
    --text-secondary: #52514e;
    --text-muted:     #86837c;
    --gridline:       #e5e3db;
    --baseline:       #c3c2b7;
    --border:         rgba(11,11,11,0.10);
    --brand-accent:      #c04440;
    --brand-accent-wash: #f6dcda;
    --shadow-panel: 0 1px 2px rgba(0,0,0,0.05), 0 10px 28px rgba(0,0,0,0.06);
    --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", monospace;
    --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
    --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --surface-1:      #1c1b17;
      --page:           #100f0c;
      --text-primary:   #f7f5f0;
      --text-secondary: #c3c2b7;
      --text-muted:     #8f8c83;
      --gridline:       #2f2d27;
      --baseline:       #3a3833;
      --border:         rgba(255,255,255,0.10);
      --brand-accent:      #e8776f;
      --brand-accent-wash: #3a2220;
      --shadow-panel: 0 1px 2px rgba(22,20,15,0.30), 0 10px 28px rgba(22,20,15,0.40);
      --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
      --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
    }
  }
  * { box-sizing: border-box; }
  html { font-size: 17px; }
  body {
    margin: 0; background: var(--page); color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.55;
  }
  .top-rule { background: var(--brand-accent); height: 4px; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem 4rem; }

  header.site { padding: 2rem 0 1.25rem; display: flex; align-items: center; gap: 1rem; }
  header.site img.logo { width: 56px; height: 56px; border-radius: 50%; flex: none; }
  header.site h1 {
    font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
    font-size: 2.3rem; line-height: 1.08; margin: 0 0 0.3rem;
  }
  header.site .byline { color: var(--text-secondary); font-size: 1rem; margin: 0; }
  header.site .byline a { color: var(--brand-accent); text-decoration: none; font-weight: 600; }
  header.site .byline a:hover { text-decoration: underline; }

  nav.site-nav {
    display: flex; gap: 1.75rem; border-bottom: 1px solid var(--baseline); padding-bottom: 0;
  }
  nav.site-nav a {
    display: inline-block; color: var(--text-secondary); text-decoration: none;
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 0.6rem 0 0.7rem; border-bottom: 2px solid transparent;
  }
  nav.site-nav a.current { color: var(--text-primary); border-bottom-color: var(--brand-accent); }
  nav.site-nav a:hover { color: var(--text-primary); }

  /* Matches the figures on BOTH edges, not just the left: padding aligns
     the text's left edge with the cards' content inset (same as
     before), and dropping max-width:76ch (a prior attempt at this fix
     only touched the left side, which wasn't the visible mismatch --
     capping the text at a reading-width column while the full-bleed cards
     below it ran much wider was) lets it span the cards' full width too,
     so its right edge matches theirs as well. */
  .intro { margin: 1.5rem 0; padding: 0 1.5rem; color: var(--text-secondary); font-size: 1.02rem; }

  .card {
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-panel);
  }

  .controls {
    display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end;
    padding: 1.4rem; margin-bottom: 1.5rem;
  }
  .field { display: flex; flex-direction: column; gap: 0.4rem; }
  .field label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; }
  .toggle-group { display: flex; border: 1px solid var(--baseline); border-radius: 7px; overflow: hidden; }
  .toggle-group button {
    border: none; background: var(--surface-1); color: var(--text-primary);
    padding: 0.55rem 1.1rem; font-size: 0.95rem; cursor: pointer; font-family: inherit;
  }
  .toggle-group button + button { border-left: 1px solid var(--baseline); }
  .toggle-group button[aria-pressed="true"] { background: var(--brand-accent); color: #fff; font-weight: 600; }
  .year-range { display: flex; align-items: center; gap: 0.5rem; }
  .year-range input[type="number"] {
    width: 5rem; padding: 0.45rem 0.55rem; border: 1px solid var(--baseline); border-radius: 6px;
    background: var(--surface-1); color: var(--text-primary); font-family: var(--font-mono); font-size: 0.95rem;
  }
  .year-range span { color: var(--text-muted); }

  /* Calculator controls: same field-row layout as the other two sections'
     .controls.card, but shaded to match the .calc-zone boxes below it
     (var(--page), no border/shadow) rather than the plain white .card
     look those sections use -- so the whole calculator, input box
     included, reads as one consistent set of shaded panels instead of a
     white input row sitting above three shaded result panels. */
  #calc-controls {
    background: var(--page); border: none; box-shadow: none; border-radius: 10px;
  }
  #calc-controls select {
    min-width: 14rem; padding: 0.45rem 0.55rem; border: 1px solid var(--baseline); border-radius: 6px;
    background: var(--surface-1); color: var(--text-primary); font-family: var(--font-mono); font-size: 0.95rem;
  }
  #calc-baseline-note { font-style: italic; }
  .field-hint { font-size: 0.78rem; color: var(--text-muted); max-width: 14rem; }
  .checkbox-field {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem;
    color: var(--text-secondary); font-weight: 400; white-space: nowrap; cursor: pointer;
  }
  .checkbox-field input { flex: none; accent-color: var(--brand-accent); width: 1.05rem; height: 1.05rem; }
  .calc-share-wrap { margin-top: 0.5rem; border-radius: 10px; overflow: hidden; }
  #calc-share-canvas { width: 100%; height: auto; display: block; }
  .calc-share-toolbar { justify-content: flex-start; margin-bottom: 0; margin-top: 0.75rem; }
  .share-icons { display: flex; align-items: center; gap: 1.25rem; margin: 0.6rem 0 0; }
  .share-icon-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    text-decoration: none; border-bottom: none;
    cursor: pointer; transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  }
  .share-icon-btn:link, .share-icon-btn:visited, .share-icon-btn:hover, .share-icon-btn:active {
    text-decoration: none;
  }
  .share-icon-btn:hover, .share-icon-btn:focus-visible { opacity: 0.8; }
  .share-icon-btn img { display: block; max-width: 100%; max-height: 100%; }
  /* Used only by the native-share button and X's chip (see index.html) --
     Facebook/LinkedIn's real marks already carry their own background. */
  .share-icon-btn--outline {
    border-radius: 50%; border: 1px solid var(--gridline); color: var(--text-secondary);
  }
  .share-icon-btn--outline:hover, .share-icon-btn--outline:focus-visible {
    color: var(--brand-accent); border-color: var(--brand-accent); opacity: 1;
  }
  .share-icon-chip { border-radius: 50%; background: #fff; padding: 8px; }

  .picker { position: relative; }
  .picker-topline { display: flex; align-items: center; gap: 0.75rem; }
  .picker-search {
    padding: 0.55rem 0.7rem; border: 1px solid var(--baseline); border-radius: 6px;
    background: var(--surface-1); color: var(--text-primary); font-family: inherit; font-size: 0.95rem;
    width: 16rem;
  }
  .clear-all {
    border: 1px solid var(--baseline); background: var(--surface-1); color: var(--text-secondary);
    border-radius: 6px; padding: 0.5rem 0.8rem; font-size: 0.85rem; cursor: pointer; font-family: inherit;
    white-space: nowrap;
  }
  .clear-all:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
  .picker-panel {
    display: none; position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 10;
    width: 21rem; max-height: 24rem; overflow-y: auto;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-panel); padding: 0.5rem;
  }
  .picker-panel.open { display: block; }
  .picker-group-label {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); padding: 0.5rem 0.4rem 0.3rem; font-weight: 600;
  }
  .picker-row {
    display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.4rem; border-radius: 5px;
    font-size: 0.92rem; cursor: pointer;
  }
  .picker-row:hover { background: var(--page); }
  .picker-row.disabled { opacity: 0.4; cursor: not-allowed; }
  .picker-row .caveat-flag { color: var(--series-4); font-size: 0.85rem; }
  .picker-count { font-size: 0.85rem; color: var(--text-muted); }

  .caveat-banner {
    background: var(--brand-accent-wash); border-left: 3px solid var(--brand-accent);
    border-radius: 6px; padding: 0.85rem 1.1rem; margin-bottom: 1.25rem; font-size: 0.92rem;
    color: var(--text-secondary); display: none;
  }
  .caveat-banner.show { display: block; }
  .caveat-banner p { margin: 0.3rem 0; }
  .caveat-banner strong { color: var(--text-primary); }

  .chart-card { padding: 1.5rem; position: relative; margin-bottom: 1.5rem; }
  .chart-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; gap: 0.6rem; }
  .toolbar-btn {
    border: 1px solid var(--baseline); background: var(--surface-1); color: var(--text-secondary);
    border-radius: 6px; padding: 0.45rem 0.85rem; font-size: 0.85rem; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 0.4rem;
  }
  .toolbar-btn:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
  .chart-source { font-size: 0.78rem; font-style: italic; color: var(--text-muted); margin: 1rem 0 0; }

  svg#chart { width: 100%; height: auto; display: block; overflow: visible; }
  .axis-label { fill: var(--text-muted); font-size: 15px; font-family: var(--font-body); }
  .gridline { stroke: var(--gridline); stroke-width: 1; }
  .axis-line { stroke: var(--baseline); stroke-width: 1; }
  .series-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
  .series-dot { stroke: var(--surface-1); stroke-width: 2; }
  .crosshair { stroke: var(--baseline); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
  .hover-catch { fill: transparent; cursor: crosshair; }

  .tooltip {
    position: absolute; pointer-events: none; background: var(--surface-1);
    border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.85rem;
    box-shadow: var(--shadow-panel); font-size: 0.9rem; display: none; z-index: 20;
    min-width: 11rem;
  }
  .tooltip.show { display: block; }
  .tooltip .t-year { font-weight: 700; margin-bottom: 0.4rem; color: var(--text-primary); font-family: var(--font-mono); }
  .tooltip-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.12rem 0; }
  .tooltip-row .key { width: 13px; height: 2.25px; flex: none; }
  .tooltip-row .name { color: var(--text-secondary); flex: 1; }
  .tooltip-row .val { color: var(--text-primary); font-weight: 700; font-family: var(--font-mono); }

  .legend { display: flex; flex-wrap: wrap; gap: 0.65rem 1.25rem; margin-top: 1.25rem; }
  .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
  .legend-item .key { width: 15px; height: 2.25px; flex: none; }
  .legend-item button {
    border: none; background: none; color: var(--text-muted); cursor: pointer;
    font-size: 1rem; padding: 0 0.15rem; line-height: 1;
  }
  .legend-item button:hover { color: var(--brand-accent); }

  .view-toggle { margin-top: 1.25rem; }

  /* Percapita/methods/library-page open straight into their first section
     (no .intro paragraph) and get the smaller top margin. index.html's
     #intensity has its own .intro again as of 2026-08-05, so it's excluded
     here and instead gets the larger gap below, same as #calculator (which
     only ever follows another section, on index.html). */
  section#intensity, section#calculator, section#percapita { margin-top: 2.5rem; }
  section#percapita, section#methods, section#library-page { margin-top: 0.5rem; }
  h2.section-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 0.4rem; }
  h3.section-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 0.4rem; }
  .section-sub-lead { color: var(--text-secondary); font-size: 0.98rem; margin: 0 0 1.25rem; }
  .section-sub { color: var(--text-secondary); font-size: 0.92rem; margin: 0 0 1rem; }
  /* h2/section-sub-lead sit directly under <section>, as siblings of the
     figure cards below them (unlike h3/.section-sub, which only ever
     appear INSIDE a .table-card that already supplies this same inset via
     its padding) -- same fix and same reasoning as .intro's
     padding above: align their text with the cards' content inset instead
     of sitting flush against .wrap's edge. Dropped max-width:76ch too, for
     the same reason as .intro above -- see that comment. */
  section > h2.section-title, section > .section-sub-lead { padding: 0 1.5rem; }
  .calc-caption { margin-top: 1rem; }
  /* Shaded sub-panels inside the calculator card -- breaks what was one
     long flat list (rate table, buildout, share image all the same
     background) into three visually distinct zones, each a shade darker
     than the card's own surface so they read as boxes without needing a
     visible border. */
  .calc-zone {
    background: var(--page); border-radius: 10px; padding: 1.4rem 1.5rem; margin-bottom: 1.5rem;
  }
  .calc-zone h3.section-title { margin-top: 0; }
  .calc-zone-last { margin-bottom: 0; }
  .table-card { padding: 1.4rem; margin-bottom: 1.5rem; overflow-x: auto; }

  table.data-table {
    border-collapse: collapse; width: 100%; font-size: 0.9rem;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  }
  table.data-table.hidden { display: none; }
  table.data-table th, table.data-table td { padding: 0.45rem 0.75rem; text-align: right; border-bottom: 1px solid var(--gridline); white-space: nowrap; }
  table.data-table th:first-child, table.data-table td:first-child { text-align: left; font-family: var(--font-body); }
  table.data-table thead th { color: var(--text-secondary); font-weight: 600; position: sticky; top: 0; background: var(--surface-1); }
  table.data-table td.pos { color: #0ca30c; }
  table.data-table td.neg { color: var(--brand-accent); }

  /* Methodology & Library pages: plain content pages (no chart), reusing
     .section-title/.section-sub-lead for their headers like the other
     two pages -- these rules are for the methods list and the library's
     link cards specifically. */
  .methods-card { padding: 1.6rem 1.8rem; }
  .methods-list { padding-left: 1.3rem; color: var(--text-secondary); font-size: 0.95rem; margin: 0; }
  .methods-list li { margin-bottom: 0.9rem; }
  .methods-list strong { color: var(--text-primary); }

  .library-section-label {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
    color: var(--text-muted); padding: 0 1.5rem; margin: 2.5rem 0 1rem;
  }
  .library-section-label:first-of-type { margin-top: 0; }
  .library-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem; padding: 0 1.5rem;
  }
  .library-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; }
  .library-card img { width: 100%; height: 160px; object-fit: cover; display: block; background: var(--page); }
  .library-card .lc-body { padding: 1.1rem 1.2rem 1.3rem; }
  .library-card .lc-date {
    font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.03em; font-weight: 600;
  }
  .library-card h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0.35rem 0 0.5rem; color: var(--text-primary); }
  .library-card p { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }
  .library-card:hover h3 { color: var(--brand-accent); }