/* National cumulative environmental justice score explorer.
   Layers on styles.css: every surface, ink and accent here is one of that
   file's custom properties, so light/dark and any future recolor carry
   through with no edit. The exceptions are the data colors -- the three term
   hues and the diverging score ramp -- which are set below as their own
   tokens, per theme, because a chart color has to be chosen against the
   surface it is drawn on and cannot be an automatic flip of its light value.
   Both sets were run through the palette validator against this site's real
   surfaces (#ffffff light, #171c1f dark). */

:root{
  /* Three terms of the score, categorical. Fixed order; never cycled.
     Validated all-pairs: worst CVD dE 9.2, worst normal-vision dE 24.0. */
  --t-socio:  #2a78d6;
  --t-aq:     #eb6834;
  --t-health: #1baf7a;
  /* Recessive chrome for the hand-built SVG. */
  --axis:     #c9c7bf;
  --tip-bg:   #16191d;
  --tip-ink:  #ffffff;
}
html[data-theme="dark"]{
  --t-socio:  #3987e5;
  --t-aq:     #d95926;
  --t-health: #199e70;
  --axis:     #394247;
  --tip-bg:   #eef1f2;
  --tip-ink:  #16191d;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:.6rem 1rem;border-radius:0 0 var(--r-sm) 0;z-index:100}
.skip:focus{left:0}

/* ---------------------------------------------------------------- hero ---- */
.ej-hero{padding:calc(var(--nav-h,70px) + 3.2rem) 0 2.2rem;background:var(--bg-alt);
  border-bottom:1px solid var(--line)}
.ej-hero h1{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.08;margin:.35rem 0 .7rem;letter-spacing:-.02em}
.ej-lede{max-width:62ch;color:var(--ink-2);font-size:1.03rem;line-height:1.65}
.ej-stamp{margin:1rem 0 0;font-family:var(--mono);font-size:.78rem;
  color:var(--ink-3);letter-spacing:.01em}

/* Stat tiles: the four numbers that size the dataset. The form is a number,
   so it is not a chart. Proportional figures, not tabular -- these do not
   align in a column. */
.ej-stats{display:grid;gap:.9rem;margin-top:1.7rem;list-style:none;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(10.5rem,100%),1fr))}
.ej-stats li{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:.85rem 1rem;box-shadow:var(--shadow)}
.ej-stats b{display:block;font-family:var(--serif);font-size:1.75rem;
  font-weight:700;line-height:1.05;letter-spacing:-.02em}
.ej-stats span{display:block;margin-top:.2rem;font-size:.76rem;color:var(--ink-3);
  line-height:1.35}

/* -------------------------------------------------------------- picker ---- */
.ej-picker{display:grid;gap:1rem;margin-bottom:1.6rem}
.ej-search{position:relative;max-width:34rem}
.ej-search label{display:block;font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
  margin-bottom:.4rem}
.ej-search input{width:100%;padding:.8rem 1rem;font:inherit;font-size:1rem;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow)}
.ej-search input:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent)}
.ej-results{position:absolute;z-index:20;top:100%;left:0;right:0;margin:.35rem 0 0;
  padding:.3rem;list-style:none;max-height:20rem;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg)}
.ej-results li{padding:.5rem .7rem;border-radius:var(--r-sm);cursor:pointer;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.ej-results li[aria-selected="true"],.ej-results li:hover{background:var(--accent-soft)}
.ej-results .r-name{font-weight:600}
.ej-results .r-meta{font-size:.76rem;color:var(--ink-3);white-space:nowrap;
  display:flex;align-items:center;gap:.45rem}
.ej-results .r-score{font-family:var(--mono);font-size:.78rem;font-weight:600;
  padding:.1rem .4rem;border-radius:4px;color:var(--ink)}
.ej-quick{display:flex;flex-wrap:wrap;gap:.4rem}

/* ------------------------------------------------------------ headline ---- */
.ej-empty{padding:2.5rem 0;color:var(--ink-3)}
.ej-headline{display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.5rem;
  align-items:center;padding:1.3rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
/* The one hero figure on the page. Serif, matching the AQI badge on the
   forecast page -- this site's display face is its brand, and the two
   explorers have to read as one site. */
.ej-badge{width:120px;height:120px;border-radius:var(--r);display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  background:var(--line);transition:background .25s}
.ej-badge-num{font-family:var(--serif);font-size:2.5rem;font-weight:700;
  line-height:1}
.ej-badge-cat{font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-top:.3rem;text-align:center;padding:0 .35rem;
  line-height:1.25}
.ej-headline-txt h2{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);
  margin:0;letter-spacing:-.01em}
.ej-sub{margin:.25rem 0 0;color:var(--ink-3);font-size:.85rem}
.ej-verdict{margin:.6rem 0 0;font-size:.95rem;color:var(--ink-2)}
.ej-verdict strong{color:var(--ink)}
.ej-ranks{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:.7rem 0 0;
  padding:0;list-style:none}
.ej-ranks li{font-size:.76rem;color:var(--ink-2);background:var(--bg-alt);
  border:1px solid var(--line);border-radius:100px;padding:.2rem .6rem}
.ej-ranks b{font-variant-numeric:tabular-nums;color:var(--ink)}

/* --------------------------------------------------------------- cards ---- */
.ej-grid{display:grid;gap:1.1rem;margin-top:1.3rem;
  /* 26rem, not 20: at 20 the wrap fits three columns and the two half-width
     cards leave an empty third, which also shrinks their charts. */
  grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr))}
.ej-card{margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:1.1rem 1.2rem 1.2rem}
.ej-card-wide{grid-column:1/-1}
.ej-card figcaption{margin-bottom:.9rem}
.ej-card h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 .2rem}
.ej-card figcaption p{margin:0;font-size:.83rem;color:var(--ink-3);line-height:1.5}
.ej-chart svg{display:block;width:100%;height:auto;overflow:visible}

/* Legend: always present, because two or more series are on screen. */
.ej-legend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:.2rem 0 .9rem;
  padding:0;list-style:none;font-size:.8rem;color:var(--ink-2)}
.ej-legend li{display:flex;align-items:center;gap:.4rem}
.ej-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* --------------------------------------------------------------- table ---- */
.ej-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ej-table{width:100%;border-collapse:collapse;font-size:.85rem}
.ej-table th,.ej-table td{padding:.45rem .6rem;text-align:right;
  border-bottom:1px solid var(--line);white-space:nowrap}
.ej-table th:first-child,.ej-table td:first-child{text-align:left;white-space:normal}
.ej-table thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);font-weight:700;border-bottom:1px solid var(--axis)}
.ej-table tbody td{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.ej-table tbody td:first-child{color:var(--ink);font-variant-numeric:normal}
.ej-table tbody tr:hover{background:var(--bg-alt)}
.ej-table .num-strong{color:var(--ink);font-weight:600}
.ej-table .over{color:var(--ink);font-weight:600}
.ej-table caption{caption-side:bottom;text-align:left;padding-top:.6rem;
  font-size:.76rem;color:var(--ink-3)}
.ej-swatch{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:.45rem;vertical-align:baseline}
.ej-filters label{display:block;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  margin-bottom:.25rem}
.ej-filters select,.ej-filters input[type=search]{font:inherit;font-size:.88rem;
  padding:.45rem .6rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.ej-mapwrap{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:.6rem}
.ej-mapwrap canvas{display:block;width:100%;height:auto;cursor:crosshair;
  border-radius:var(--r-sm)}
.ej-maphint{margin:.5rem .2rem 0;font-size:.76rem;color:var(--ink-3)}
.ej-scale{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;
  font-size:.75rem;color:var(--ink-3);flex-wrap:wrap}
.ej-scale-bar{flex:1 1 14rem;height:11px;border-radius:6px;min-width:10rem}
.ej-scale-mid{font-variant-numeric:tabular-nums}

/* Tooltip: enhances, never gates -- every value it shows is also in a table. */
.ej-tip{position:fixed;z-index:60;pointer-events:none;opacity:0;
  transition:opacity .12s;background:var(--tip-bg);color:var(--tip-ink);
  border-radius:var(--r-sm);padding:.5rem .65rem;font-size:.78rem;
  line-height:1.45;box-shadow:var(--shadow-lg);max-width:16rem}
.ej-tip b{font-size:.85rem}
.ej-tip .t-num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- method text --- */
.ej-cols{display:grid;gap:2rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.ej-prose h3{font-family:var(--serif);font-size:1.18rem;margin:1.8rem 0 .5rem}
.ej-prose h3:first-child{margin-top:0}
.ej-prose h4{font-family:var(--serif);font-size:1rem;margin:1.2rem 0 .35rem}
.ej-prose p,.ej-prose li{font-size:.94rem;line-height:1.7;color:var(--ink-2)}
.ej-prose strong{color:var(--ink)}
.ej-prose a{color:var(--accent);text-decoration-thickness:1px;
  text-underline-offset:2px}
.ej-prose ul{padding-left:1.1rem}
.ej-prose li{margin-bottom:.4rem}
.ej-formula{font-family:var(--mono);font-size:.82rem;line-height:1.9;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.9rem 1rem;overflow-x:auto;color:var(--ink-2);margin:.8rem 0 1rem}
.ej-formula b{color:var(--ink)}
.ej-note{border-left:3px solid var(--accent);background:var(--accent-soft);
  padding:.8rem 1rem;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:1rem 0}
.ej-note p{margin:0;font-size:.9rem}
.ej-note p + p{margin-top:.6rem}
.ej-warn{border-left-color:var(--accent-2);
  background:color-mix(in srgb,var(--accent-2) 9%,transparent)}
.ej-caveats li{margin-bottom:.55rem}
.ej-official{font-size:.88rem;color:var(--ink-3);margin-top:1.2rem}
.ej-fine{margin:.9rem 0 0;font-size:.82rem;color:var(--ink-3);line-height:1.55}
.ej-fine strong{color:var(--ink-2)}

@media (max-width:640px){
  .ej-headline{grid-template-columns:1fr;text-align:left}
  .ej-badge{width:100%;height:92px;flex-direction:row;gap:.8rem}
  .ej-badge-cat{margin-top:0}
}
.ej-mapempty{margin:.8rem 0 0;font-size:.9rem;color:var(--muted);text-align:center}