/* ==========================================================
   COUNFIELD — AEI ATLAS + LIVE MODEL COMPARATOR
   Loaded only by /research/aei/. Inherits every token from
   style.css and research.css; adds nothing to any other page.

   ACCESSIBILITY CONTRACT (same as research.css)
   Colour never carries information alone. The unit-band hues
   in the atlas plate are always accompanied by the band's own
   text label, by the legend, by the figure's text-equivalent
   table, and by the matrix column that states the same thing
   in words.
========================================================== */
:root{
  --aei-system:#7d94a8;
  --aei-collective:#a98fc0;
  --aei-population:#7faa8c;
  --aei-ecosystem:#c8a96a;
  --aei-regime:#cf8f9e;
  --aei-fill-system:rgba(125,148,168,0.22);
  --aei-fill-collective:rgba(169,143,192,0.24);
  --aei-fill-population:rgba(127,170,140,0.22);
  --aei-fill-ecosystem:rgba(200,169,106,0.22);
  --aei-fill-regime:rgba(207,143,158,0.22);
}

/* ---------- framework status ---------- */
.aei-status{margin-bottom:var(--space-2)}
.aei-status-tag{
  display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text);border:1px solid var(--line);border-radius:3px;padding:5px 10px;
  background:var(--sci-panel);
}

/* The separation callout is the loudest block on the page on purpose:
   reading the Roman numeral as a benchmark score is the misreading
   everything else on the page guards against. */
.sci-callout-separation{border-left-color:var(--text);background:var(--sci-panel)}
.sci-callout-separation .sci-callout-head{color:var(--text) !important;font-size:15px;letter-spacing:.02em}
.aei-eq{font-size:13px;color:var(--text);white-space:nowrap}

/* ---------- atlas plate ---------- */
.aei-fig{margin-top:var(--space-3)}
.aei-plate-wrap{padding-bottom:6px}
.aei-plate{min-width:680px;display:block}
.aei-era-bar{fill:var(--text-2);opacity:.55}
.aei-era-label{fill:var(--text-2);font-size:11px;letter-spacing:.08em;font-family:var(--sans)}
.aei-band{stroke-width:1}
.aei-band-label{fill:var(--text);font-size:12px;font-family:var(--sans)}
.aei-num{fill:var(--text-2);font-size:10px;font-family:var(--sans);font-variant-numeric:tabular-nums}
.aei-bound{stroke:var(--text);stroke-width:1.5;opacity:.85}
.aei-unit-system{fill:var(--aei-fill-system);stroke:var(--aei-system)}
.aei-unit-collective{fill:var(--aei-fill-collective);stroke:var(--aei-collective)}
.aei-unit-population{fill:var(--aei-fill-population);stroke:var(--aei-population)}
.aei-unit-ecosystem{fill:var(--aei-fill-ecosystem);stroke:var(--aei-ecosystem)}
.aei-unit-regime{fill:var(--aei-fill-regime);stroke:var(--aei-regime)}

.aei-legend{list-style:none;padding:0;margin:var(--space-3) 0 0;display:grid;gap:14px}
.aei-legend-item{
  font-size:13px;color:var(--text-2);
  display:grid;grid-template-columns:14px auto 1fr;gap:8px;align-items:baseline;
}
.aei-legend-item p{grid-column:1 / -1;margin:0;font-size:13px;color:var(--text-2);max-width:72ch}
.aei-legend-label{color:var(--text);font-weight:600}
.aei-legend-ids{font-variant-numeric:tabular-nums}
.aei-swatch{
  display:inline-block;width:12px;height:12px;border-radius:2px;border-width:1px;border-style:solid;
  transform:translateY(1px);
}
span.aei-unit-system{background:var(--aei-fill-system);border-color:var(--aei-system)}
span.aei-unit-collective{background:var(--aei-fill-collective);border-color:var(--aei-collective)}
span.aei-unit-population{background:var(--aei-fill-population);border-color:var(--aei-population)}
span.aei-unit-ecosystem{background:var(--aei-fill-ecosystem);border-color:var(--aei-ecosystem)}
span.aei-unit-regime{background:var(--aei-fill-regime);border-color:var(--aei-regime)}

/* ---------- matrix ---------- */
.aei-matrix{font-size:13px}
.aei-matrix th,.aei-matrix td{vertical-align:top;padding:10px 12px}
.aei-matrix .aei-col{display:block;color:var(--text)}
.aei-matrix .aei-col-prov{
  display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2);font-weight:400;margin-top:3px;
}
/* Two class names on purpose. research.css sets `.sci-table tbody th
   {white-space:nowrap}` so numeric row headers stay on one line, and that
   selector outranks a single-class override. An era heading is a sentence,
   not a row header: left nowrap it runs off the side of a phone. */
.aei-matrix .aei-era-row th{
  background:var(--sci-panel);color:var(--text);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;padding:12px;border-top:2px solid var(--line);
  white-space:normal;overflow-wrap:break-word;
}
.aei-era-roman{color:var(--text);font-weight:700;margin-right:6px}
.aei-era-range{
  color:var(--text-2);font-variant-numeric:tabular-nums;margin-left:6px;
  text-transform:none;letter-spacing:0;
}
.aei-boundary-row td{
  background:transparent;color:var(--text);font-size:12px;
  border-top:1px dashed var(--text-2);padding:9px 12px;
}
.aei-boundary-tag{
  display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);border:1px solid var(--line);border-radius:3px;padding:2px 6px;margin-right:8px;
}
.aei-matrix .aei-row th{white-space:nowrap}
.aei-id{font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}
.aei-name{display:block;color:var(--text);font-weight:600;margin-bottom:4px}
.aei-def{display:block;color:var(--text-2);font-size:12.5px;line-height:1.55;max-width:44ch}
.aei-row-owner td,.aei-row-owner th{background:rgba(255,255,255,0.025)}

/* Narrow screens: the seven-column matrix becomes one labelled block per
   stage. Nothing is hidden and nothing is truncated -- every field is still
   printed, with its column name above it. Explicit ARIA roles are on the
   markup so that changing `display` does not strip the table semantics a
   screen reader relies on. */
@media (max-width:900px){
  .aei-matrix-wrap{overflow-x:visible}
  /* .sci-table carries min-width:560px so wide data tables scroll inside
     their own container instead of squashing. The reflowed matrix is no
     longer a wide table and no longer sits in a scroll container, so that
     floor has to be released -- otherwise it pushes the page sideways at
     every width below 580px. Measured: +190px at 390, +85px at 500. */
  .aei-matrix,.aei-matrix tbody,.aei-matrix tr,.aei-matrix th,.aei-matrix td{display:block;width:auto;min-width:0}
  .aei-matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* The table is display:block here but the caption keeps table-caption, so
     it gets sized against a collapsed anonymous table box and wraps to one
     word per line. Making it a block lets it use the full width. */
  .aei-matrix caption{display:block;max-width:none}
  .aei-matrix .aei-row{
    border:1px solid var(--line);border-radius:6px;padding:14px;margin-bottom:12px;
    background:var(--sci-panel);
  }
  .aei-matrix .aei-row th,.aei-matrix .aei-row td{padding:0;border:0;white-space:normal}
  .aei-matrix .aei-row th{margin-bottom:8px}
  .aei-matrix .aei-row td{margin-top:12px}
  .aei-matrix .aei-row td::before{
    content:attr(data-col);display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--text-2);margin-bottom:3px;
  }
  .aei-matrix .aei-row td[data-col="Canonical name"]::before{content:none}
  .aei-matrix .aei-def{max-width:none}
  .aei-boundary-row td{border:0;border-top:1px dashed var(--text-2);padding:10px 0;margin:0 0 12px}
  .aei-boundary-row td::before{content:none}
  .aei-matrix .aei-era-row th{border-radius:4px;margin-bottom:12px}
}

/* ---------- boundaries ---------- */
.aei-boundary-note{border-left:2px solid var(--line);padding-left:16px;margin:var(--space-3) 0}
.aei-boundary-pair{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);
  margin-bottom:4px !important;
}
.aei-boundary-note h3{margin-top:0}

/* ---------- pipeline ---------- */
.aei-pipeline{list-style:none;padding:0;margin:var(--space-3) 0 0;counter-reset:pipe}
.aei-pipeline li{
  counter-increment:pipe;position:relative;padding:0 0 18px 30px;
  border-left:1px solid var(--line);margin-left:8px;
}
.aei-pipeline li:last-child{border-left-color:transparent;padding-bottom:0}
.aei-pipeline li::before{
  content:counter(pipe);position:absolute;left:-9px;top:0;width:17px;height:17px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);color:var(--text-2);
  font-size:10px;line-height:15px;text-align:center;font-variant-numeric:tabular-nums;
}
.aei-pipe-step{display:block;color:var(--text);font-weight:600;font-size:14px}
.aei-pipe-what{
  display:block;color:var(--text-2);font-size:13.5px;line-height:1.6;margin-top:2px;max-width:68ch;
}

/* ---------- frontier placement figure ----------
   The dominant graphic. One outer frame, rows inside, a long bar per
   row, the label sitting with the bar, a large Roman numeral at the
   right, and a lot of whitespace. Monochrome on purpose: this is a
   research-publication figure, and nothing at all is encoded in colour,
   so nothing is lost without it. */
.fr-fig{margin:0 0 var(--space-3)}
.fr-frame{
  border:1px solid var(--line);border-radius:8px;
  padding:clamp(18px,3vw,32px) clamp(14px,2.5vw,28px);
  background:var(--sci-panel);
}
.fr-heading{
  font-family:var(--serif);font-size:clamp(19px,2.4vw,26px);line-height:1.25;
  color:var(--text);margin:0 0 6px !important;max-width:none;
}
.fr-sub{
  font-size:12.5px;letter-spacing:.04em;color:var(--text-2);
  margin:0 0 clamp(16px,2.6vw,26px) !important;max-width:none;
}
.fr-plotwrap{padding-bottom:4px}
.fr-plot{min-width:640px;display:block}

/* axis: a quiet grid, never competing with the bars */
.fr-tick{stroke:var(--sci-grid);stroke-width:1}
.fr-axis-label{
  fill:var(--text-2);font-size:10.5px;font-family:var(--sans);
  letter-spacing:.04em;
}
.fr-axis-cont{fill:var(--text-2);font-size:10px;font-family:var(--sans);letter-spacing:.05em}

/* rows */
.fr-company{
  fill:var(--text-2);font-size:10.5px;font-family:var(--sans);
  letter-spacing:.13em;
}
.fr-model{fill:var(--text);font-size:16px;font-family:var(--sans);font-weight:600}
.fr-status{
  fill:var(--text-2);font-size:9.5px;font-family:var(--sans);
  letter-spacing:.11em;
}
.fr-bar{stroke:var(--text);stroke-width:2.5;stroke-linecap:butt}
.fr-cap{fill:var(--text)}
.fr-roman{
  fill:var(--text);font-family:var(--serif);font-size:30px;
  font-variant-numeric:tabular-nums;
}
.fr-stage{
  fill:var(--text-2);font-size:10.5px;font-family:var(--sans);letter-spacing:.06em;
}

.fr-zoom{
  font-size:12px;color:var(--text-2);margin:clamp(14px,2vw,20px) 0 0 !important;
  max-width:none;border-top:1px solid var(--line);padding-top:12px;
}
.fr-fig figcaption{margin-top:var(--space-3)}

/* The refusals list: four things that do not become an AEI stage. */
.fr-refusals{list-style:none;padding:0;margin:var(--space-2) 0 var(--space-3);display:grid;gap:8px}
.fr-refusals li{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:8px;font-size:13.5px;
}
.fr-from{color:var(--text-2)}
.fr-arrow{color:var(--text);font-size:13px}
.fr-to{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;min-width:66px;text-align:right}

.fr-table td,.fr-table th{vertical-align:top}

/* ---------- placement notes ---------- */
.aei-note{border-top:1px solid var(--line);padding-top:var(--space-3);margin-top:var(--space-3)}
.aei-note-head h3{margin-top:0;margin-bottom:6px}
.aei-note-meta{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
  display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px !important;max-width:none;
}
.aei-note-stage{color:var(--text);font-weight:600}
.aei-note p{font-size:14.5px}
.aei-note-limit,.aei-note-caveat,.aei-note-sel,.aei-note-not{
  border-left:2px solid var(--line);padding-left:12px;
}
.aei-note-not{color:var(--text-2)}

.aei-sep code{font-size:12.5px}
.aei-logic td,.aei-logic th{vertical-align:top}

@media (max-width:520px){
  /* The numeral stays dominant but the frame stops eating the viewport. */
  .fr-frame{padding:16px 12px;border-radius:6px}
  .fr-refusals li{grid-template-columns:1fr auto;row-gap:2px}
  .fr-arrow{display:none}
  .fr-to{min-width:0}
}