/* ==========================================================================
   eil-core — TOKENS
   The contract every eil module reads. Defaults sit in :where() so they carry
   zero specificity: a host overrides any of them with a plain rule and never
   needs !important. Shared by states-status and newsroom — one skin dresses
   the whole site.
   ========================================================================== */

:where([data-eil-root]){
  /* ground + type */
  --eil-bg:transparent;
  --eil-text:currentColor;
  --eil-text-dim:currentColor;
  --eil-heading:currentColor;
  --eil-surface:rgba(128,128,128,.08);
  --eil-surface-2:rgba(128,128,128,.14);
  --eil-border:rgba(128,128,128,.35);        /* dividers, card edges */
  --eil-border-strong:var(--eil-border); /* borders that DEFINE a control — must clear 3:1 */
  --eil-accent:currentColor;          /* graphics: fills, rings, rules */
  --eil-accent-text:var(--eil-accent); /* text that must pass contrast */
  --eil-accent-ink:canvas;
  --eil-focus:currentColor;

  --eil-font-display:inherit;
  --eil-font-body:inherit;
  --eil-font-numeric:var(--eil-font-display);
  --eil-eyebrow-tracking:.18em;
  --eil-eyebrow-transform:uppercase;
  --eil-count-weight:700;
  --eil-count-tracking:-.02em;

  --eil-radius:16px;
  --eil-radius-sm:10px;
  --eil-radius-pill:999px;
  --eil-shadow:none;
  --eil-pad:clamp(56px,6vw,84px);

  /* the four statuses: fill / edge / label ink / pattern */
  --eil-law-fill:#F2C94C;      --eil-law-edge:#FFF0BE;  --eil-law-ink:#0A0A0A;      --eil-law-pattern:transparent;
  --eil-moving-fill:#2C46B8;   --eil-moving-edge:#6E8BFF; --eil-moving-ink:#FFFFFF;  --eil-moving-pattern:#8FA6FF;
  --eil-outreach-fill:#16233F; --eil-outreach-edge:#6E8BFF; --eil-outreach-ink:#C7D4F5; --eil-outreach-pattern:#6E8BFF;
  --eil-open-fill:#18202F;     --eil-open-edge:#5C6A85; --eil-open-ink:#98A4BC;

  /* the mark: on a state that passed, and floating on the ground */
  --eil-tip-bg:#0A0A0A;
  --eil-tip-text:#FFFFFF;
  --eil-tip-dim:#C8CFDE;

  --eil-mark-law:#0A0A0A;
  --eil-mark-air:#F2C94C;
  --eil-glow:drop-shadow(0 0 7px rgba(242,201,76,.45));

  --eil-step-1:clamp(.8rem,.75rem + .2vw,.9rem);
  --eil-step0:clamp(1rem,.95rem + .3vw,1.125rem);
  --eil-step2:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);
  --eil-step3:clamp(2rem,1.5rem + 2.2vw,3.1rem);
  --eil-step4:clamp(2.6rem,1.8rem + 3.8vw,4.6rem);
}

/* ==========================================================================
   eil-core — BASE
   Primitives every eil module shares: the shell reset, the wrap, the eyebrow,
   the mark, filter chips, buttons, badges and the closing CTA. No brand
   values — every declaration reads a token from tokens.css.
   ========================================================================== */

[data-eil-root]{background:var(--eil-bg);color:var(--eil-text);font-family:var(--eil-font-body);
  font-size:var(--eil-step0);line-height:1.6;padding:var(--eil-pad) 0}
[data-eil-root] *,[data-eil-root] *::before,[data-eil-root] *::after{box-sizing:border-box}
[data-eil-root] [hidden]{display:none !important}
[data-eil-root] :focus-visible{outline:3px solid var(--eil-focus);outline-offset:3px;border-radius:6px}
[data-eil-root] h2,[data-eil-root] h3{font-family:var(--eil-font-display);color:var(--eil-heading);
  line-height:1.12;text-wrap:balance;margin:0}
[data-eil-root] p{margin:0}
[data-eil-root] img{max-width:100%;display:block}

.eil-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.eil-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.eil-eyebrow{font-family:var(--eil-font-display);font-weight:600;color:var(--eil-accent-text);
  text-transform:var(--eil-eyebrow-transform);letter-spacing:var(--eil-eyebrow-tracking);font-size:var(--eil-step-1)}
.eil-lede{color:var(--eil-text-dim);max-width:46ch}
.eil-lede b{color:var(--eil-heading);font-weight:600}

/* --- the mark ------------------------------------------------------------- */
.eil-mark{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.16em}
.eil-mark--air{width:1.9em;height:1.9em;vertical-align:-.62em;margin-right:.5em;color:var(--eil-mark-air)}

/* --- filter chips --------------------------------------------------------- */
.eil-keys{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.eil-key{display:inline-flex;align-items:center;gap:10px;background:none;border:1.5px solid var(--eil-border-strong);
  color:var(--eil-text-dim);font-family:var(--eil-font-display);font-weight:600;font-size:.9rem;
  border-radius:var(--eil-radius-pill);padding:8px 16px 8px 12px;cursor:pointer}
.eil-key:hover{border-color:var(--eil-accent);color:var(--eil-heading)}
.eil-key[aria-pressed="true"]{border-color:var(--eil-accent);color:var(--eil-heading);background:var(--eil-surface-2)}
.eil-key .eil-sw{width:16px;height:16px;border-radius:4px;flex:none;display:block}
.eil-key .eil-n{font-variant-numeric:tabular-nums}
.eil-key[aria-pressed="true"] .eil-n{color:var(--eil-accent-text)}
.eil-sw--law{background:var(--eil-law-fill)}
.eil-sw--law .eil-mark{width:12px;height:12px;color:var(--eil-mark-law);display:block;margin:2px auto 0}
.eil-sw--moving{background:var(--eil-moving-fill);box-shadow:inset 0 0 0 1.5px var(--eil-moving-edge)}
.eil-sw--outreach{background:var(--eil-outreach-fill);box-shadow:inset 0 0 0 1.5px var(--eil-outreach-edge)}
.eil-sw--open{background:var(--eil-open-fill);box-shadow:inset 0 0 0 1.5px var(--eil-open-edge)}

/* --- buttons -------------------------------------------------------------- */
.eil-btn{display:inline-block;font-family:var(--eil-font-display);font-weight:700;text-decoration:none;
  border-radius:var(--eil-radius-sm);padding:13px 24px;font-size:.98rem;border:2px solid transparent;cursor:pointer}
.eil-btn--primary{background:var(--eil-accent);color:var(--eil-accent-ink)}
.eil-btn--primary:hover{filter:brightness(1.08)}
.eil-btn--ghost{border-color:var(--eil-border-strong);color:var(--eil-heading);background:none}
.eil-btn--ghost:hover{background:var(--eil-surface-2);border-color:var(--eil-accent)}

/* --- badges --------------------------------------------------------------- */
.eil-badge{display:inline-block;font-family:var(--eil-font-display);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;border-radius:var(--eil-radius-pill);padding:4px 11px;white-space:nowrap}
.eil-badge--law{background:var(--eil-law-fill);color:var(--eil-law-ink)}
.eil-badge--moving{background:var(--eil-moving-fill);color:var(--eil-moving-ink)}
.eil-badge--outreach{background:var(--eil-outreach-fill);color:var(--eil-outreach-ink);box-shadow:inset 0 0 0 1.5px var(--eil-outreach-edge)}
.eil-badge--open{background:var(--eil-open-fill);color:var(--eil-open-ink);box-shadow:inset 0 0 0 1.5px var(--eil-open-edge)}

/* --- closing CTA ---------------------------------------------------------- */
.eil-closer{margin-top:44px;border-top:1px solid var(--eil-border);padding-top:34px;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.eil-closer h3{font-size:var(--eil-step2)}
.eil-closer p{color:var(--eil-text-dim);margin:8px 0 0;max-width:52ch}
.eil-cta{display:flex;gap:12px;flex-wrap:wrap}
.eil-stamp{color:var(--eil-text-dim);font-size:.8rem;margin-top:26px}

@media (max-width:980px){
  .eil-closer{grid-template-columns:1fr}
}

/* ==========================================================================
   states-status — STRUCTURE (map, panel, list)
   Layout and states only; the shell, tokens and shared primitives come from
   eil-core. Not one brand value lives in this file — every color, face and
   radius reads a token.
   ========================================================================== */

/* --- the mark ------------------------------------------------------------- */
.eil-pk--law .eil-mark{width:1.05em;height:1.05em;color:var(--eil-mark-law);margin-right:.15em}

/* --- head ----------------------------------------------------------------- */
.eil-head{display:grid;grid-template-columns:auto 1fr;gap:20px 56px;align-items:end;margin-bottom:12px}
.eil-head>*{min-width:0}
.eil-count{font-family:var(--eil-font-numeric);font-weight:var(--eil-count-weight);
  font-size:var(--eil-step4);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:var(--eil-count-tracking)}
.eil-hl{color:var(--eil-accent-text)}

/* --- toolbar -------------------------------------------------------------- */
.eil-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  margin:30px 0 18px;padding-top:22px;border-top:1px solid var(--eil-border)}
.eil-views{display:inline-flex;border:1.5px solid var(--eil-border-strong);border-radius:var(--eil-radius-pill);overflow:hidden}
.eil-views button{background:none;border:0;color:var(--eil-text-dim);font-family:var(--eil-font-display);
  font-weight:600;font-size:.88rem;padding:9px 18px;cursor:pointer}
.eil-views button[aria-pressed="true"]{background:var(--eil-accent);color:var(--eil-accent-ink)}

/* --- map + panel ---------------------------------------------------------- */
.eil-grid{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.eil-stage{position:relative;background:var(--eil-surface);border:1px solid var(--eil-border);
  border-radius:var(--eil-radius);padding:10px 12px 6px}
.eil-map{width:100%;height:auto;display:block;overflow:visible}
.eil-hint{color:var(--eil-text-dim);font-size:.82rem;text-align:center;padding:2px 0 8px}
.eil-hint kbd{font-family:inherit;background:var(--eil-surface-2);border:1px solid var(--eil-border);
  border-radius:4px;padding:1px 6px;font-size:.8rem}

/* patterns — styled here so a skin can retint them without touching markup */
.eil-pat--moving line{stroke:var(--eil-moving-pattern);opacity:.55}
.eil-pat--outreach circle{fill:var(--eil-outreach-pattern);opacity:.75}
.eil-pat--law line{stroke:var(--eil-law-pattern);opacity:.45}

/* --- state shapes --------------------------------------------------------- */
.eil-st{cursor:pointer}
.eil-st .eil-shape{stroke-width:.9;stroke-linejoin:round;transition:fill .18s ease,stroke .18s ease}
.eil-st .eil-tagbox{transition:fill .18s ease,stroke .18s ease}
.eil-st .eil-fill{pointer-events:none}
.eil-st--open .eil-shape,.eil-st--open .eil-tagbox{fill:var(--eil-open-fill);stroke:var(--eil-open-edge)}
.eil-st--outreach .eil-shape,.eil-st--outreach .eil-tagbox{fill:var(--eil-outreach-fill);stroke:var(--eil-outreach-edge);stroke-dasharray:4 3}
.eil-st--moving .eil-shape,.eil-st--moving .eil-tagbox{fill:var(--eil-moving-fill);stroke:var(--eil-moving-edge)}
.eil-st--law .eil-shape,.eil-st--law .eil-tagbox{fill:var(--eil-law-fill);stroke:var(--eil-law-edge)}
.eil-st--law{filter:var(--eil-glow)}

.eil-lbl{font-family:var(--eil-font-display);font-weight:700;font-size:13px;text-anchor:middle;
  dominant-baseline:central;pointer-events:none;letter-spacing:.02em}
.eil-st--open .eil-lbl{fill:var(--eil-open-ink)}
.eil-st--outreach .eil-lbl{fill:var(--eil-outreach-ink)}
.eil-st--moving .eil-lbl{fill:var(--eil-moving-ink)}
.eil-st--law .eil-lbl{fill:var(--eil-law-ink)}

.eil-leader{stroke:var(--eil-open-edge);stroke-width:.9;fill:none}
.eil-st--outreach .eil-leader,.eil-st--moving .eil-leader{stroke:var(--eil-moving-edge)}
.eil-st--law .eil-leader{stroke:var(--eil-accent)}

/* the butterfly that lands on a state once the law passes */
.eil-perch{color:var(--eil-mark-law);pointer-events:none}
.eil-perch--air{color:var(--eil-mark-air)}
.eil-ring{fill:none;stroke:var(--eil-accent);stroke-width:1.6;stroke-dasharray:3 4;pointer-events:none}

.eil-st:hover .eil-shape,.eil-st:hover .eil-tagbox{stroke:var(--eil-heading);stroke-width:2}
.eil-st.is-sel .eil-shape,.eil-st.is-sel .eil-tagbox{stroke:var(--eil-accent);stroke-width:2.4;stroke-dasharray:none}
.eil-st:focus{outline:none}
.eil-st:focus-visible .eil-shape,.eil-st:focus-visible .eil-tagbox{stroke:var(--eil-focus);stroke-width:2.6;stroke-dasharray:none}
.eil-st.is-muted{opacity:.28}
.eil-st.is-muted .eil-lbl{opacity:.5}

@media (prefers-reduced-motion:no-preference){
  .eil-ring{animation:eil-spin 14s linear infinite;transform-box:fill-box;transform-origin:center}
  @keyframes eil-spin{to{transform:rotate(360deg)}}
  .eil-perch{animation:eil-rest 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes eil-rest{50%{transform:translateY(-1.5px) scale(1.03)}}
  .eil-st .eil-shape,.eil-st .eil-tagbox{animation:eil-lightup .5s ease both}
  @keyframes eil-lightup{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
}

/* --- tooltip -------------------------------------------------------------- */
.eil-tip{position:absolute;z-index:5;pointer-events:none;background:var(--eil-tip-bg);color:var(--eil-tip-text);
  border:1px solid var(--eil-tip-bg);border-radius:var(--eil-radius-sm);padding:8px 12px;font-size:.85rem;
  line-height:1.35;box-shadow:0 8px 26px rgba(0,0,0,.45);opacity:0;width:max-content;max-width:270px;
  transform:translate(-50%,-118%);transition:opacity .12s}
.eil-tip b{font-family:var(--eil-font-display);display:block;font-size:.95rem;color:var(--eil-tip-text)}
.eil-tip .eil-tip-s{color:var(--eil-tip-dim);font-size:.8rem}
.eil-tip.is-on{opacity:1}

/* --- panel ---------------------------------------------------------------- */
.eil-panel{background:var(--eil-surface);border:1px solid var(--eil-border);border-radius:var(--eil-radius);
  padding:26px 24px;min-height:340px;position:sticky;top:20px;box-shadow:var(--eil-shadow)}
.eil-pk{display:inline-flex;align-items:center;gap:8px;font-family:var(--eil-font-display);font-weight:700;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;border-radius:var(--eil-radius-pill);
  padding:6px 14px;margin-bottom:16px}
.eil-pk--law{background:var(--eil-law-fill);color:var(--eil-law-ink)}
.eil-pk--moving{background:var(--eil-moving-fill);color:var(--eil-moving-ink)}
.eil-pk--outreach{background:var(--eil-outreach-fill);color:var(--eil-outreach-ink);box-shadow:inset 0 0 0 1.5px var(--eil-outreach-edge)}
.eil-pk--open{background:var(--eil-open-fill);color:var(--eil-open-ink);box-shadow:inset 0 0 0 1.5px var(--eil-open-edge)}
.eil-panel h3{font-size:1.7rem;margin:0 0 4px;letter-spacing:-.01em}
.eil-bill{font-family:var(--eil-font-display);font-weight:600;color:var(--eil-accent-text);font-size:.98rem;margin:0 0 12px}
.eil-note{color:var(--eil-text-dim);font-size:.96rem;margin:0 0 18px}
.eil-tl{list-style:none;margin:0 0 20px;padding:0;border-left:2px solid var(--eil-border)}
.eil-tl li{position:relative;padding:0 0 14px 18px;font-size:.9rem;color:var(--eil-text-dim)}
.eil-tl li::before{content:"";position:absolute;left:-6px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--eil-accent)}
.eil-tl b{display:block;color:var(--eil-heading);font-family:var(--eil-font-display);font-weight:600;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.eil-flag{display:flex;gap:10px;align-items:flex-start;background:var(--eil-surface-2);
  border:1px solid var(--eil-accent);border-radius:12px;padding:12px 14px;margin:0 0 18px;
  font-size:.9rem;color:var(--eil-accent-text)}
.eil-flag svg{flex:none;margin-top:2px;color:var(--eil-accent);fill:currentColor}
.eil-acts{display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:center}
.eil-empty h3{font-size:1.35rem;margin-bottom:10px}
.eil-empty p{color:var(--eil-text-dim);font-size:.94rem}
.eil-tally{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:1px;background:var(--eil-border);
  border:1px solid var(--eil-border);border-radius:12px;overflow:hidden}
.eil-tally li{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--eil-surface);padding:11px 14px;font-size:.9rem;color:var(--eil-text-dim)}
.eil-tally .eil-v{font-family:var(--eil-font-numeric);font-weight:var(--eil-count-weight);
  font-size:1.15rem;color:var(--eil-heading);font-variant-numeric:tabular-nums}
.eil-tally .eil-dot{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:9px;vertical-align:-1px}


/* --- list ----------------------------------------------------------------- */
.eil-list{margin-top:26px;overflow-x:auto}
.eil-list table{width:100%;min-width:560px;border-collapse:collapse;background:var(--eil-surface);
  border:1px solid var(--eil-border);border-radius:var(--eil-radius);overflow:hidden;font-size:.94rem}
.eil-list caption{text-align:left;color:var(--eil-text-dim);font-size:.86rem;padding:0 0 10px}
.eil-list th,.eil-list td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--eil-border);vertical-align:top}
.eil-list th{font-family:var(--eil-font-display);font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--eil-text-dim);background:var(--eil-surface-2)}
.eil-list td{color:var(--eil-text-dim)}
.eil-list td.eil-j{color:var(--eil-heading);font-family:var(--eil-font-display);font-weight:600;white-space:nowrap}
.eil-list tr:last-child td{border-bottom:0}
.eil-list tr.is-sel{background:var(--eil-surface-2)}
.eil-go{background:none;border:0;color:var(--eil-accent-text);font:inherit;font-size:.9rem;
  text-decoration:underline;cursor:pointer;padding:0}


@media (max-width:980px){
  .eil-grid{grid-template-columns:1fr}
  .eil-panel{position:static;min-height:0}
  .eil-head{grid-template-columns:1fr}
}
@media (max-width:700px){
  .eil-list{display:block !important}
  .eil-views{display:none}
  .eil-hint .eil-wide{display:none}
}