/* does.css: the "What the Institute does" band.
   The figure is the Atlas pathway panel's own markup (.kpis, .pillbar, .track,
   .fill, .gain, atlas/pathway.html lines 69 to 85), restyled to the site's
   type. Every colour and space here is a site.css :root token; no literal
   colours. The pillar hues stay on their own bar and nowhere else. */

.does .does-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:var(--s-7);
  align-items:start;
}

/* Left: the words, and nothing under them. */
.does-copy h2{margin:var(--s-2) 0 0}

.does-verbs{
  list-style:none;
  margin:var(--s-5) 0 0;
  padding:0;
  border-top:1px solid var(--rule);
}
.does-verbs li{
  display:flex;
  gap:var(--s-3);
  align-items:baseline;
  padding:var(--s-pad) 0;
  border-bottom:1px solid var(--rule);
  font-size:var(--t-base);
  line-height:1.55;
  color:var(--ink-2);
}
.does-verb{
  flex:0 0 auto;
  min-width:5.5em;
  font-family:var(--display);
  font-size:var(--t-base);
  font-weight:600;
  color:var(--ink);
}

/* Right: the Atlas panel. */
.does-fig{max-width:640px;justify-self:end;width:100%}
.does-fig figure{margin:0}

.does .kpis{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.28fr;
  gap:var(--s-gap);
  margin:0 0 var(--s-5);
}
/* The tiles are cards at the tile padding: the same border and the same tones. */
.does .kpi{
  background:var(--bg-2);
  border:1px solid var(--rule);
  border-radius:0;
  padding:var(--s-tile);
  min-width:0;
}
.band--tint .does .kpi{background:var(--bg)}
.does .kpi .kl{
  font-family:var(--mono);
  font-size:var(--t-xs);
  line-height:1.3;
  color:var(--ink-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.does .kpi .kv{
  font-family:var(--display);
  font-size:var(--t-lg);
  font-weight:600;
  line-height:1.3;
  margin-top:var(--s-1);
  color:var(--ink);
  overflow-wrap:anywhere;
}
.does .kpi .kd{
  font-family:var(--mono);
  font-size:var(--t-sm);
  line-height:1.5;
  color:var(--ink-3);
  margin-top:var(--s-1);
}

.does .pillbar{margin:0 0 var(--s-3)}
.does .pillbar .pl{
  display:flex;
  justify-content:space-between;
  gap:var(--s-3);
  font-family:var(--mono);
  font-size:var(--t-sm);
  line-height:1.3;
  color:var(--ink-3);
  margin-bottom:var(--s-1);
}
.does .pillbar .pb{font-size:var(--t-xs);color:var(--ink-3)}
.does .pillbar .pv{color:var(--ink-2);white-space:nowrap}
.does .track{
  height:var(--s-2);
  background:var(--rule);
  position:relative;
  overflow:hidden;
}
.does .fill{position:absolute;left:0;top:0;bottom:0}
.does .gain{position:absolute;top:0;bottom:0;opacity:.45}

/* The pillar hues, on their own bar only. */
.does .pillbar[data-pillar="e"] .pn{color:var(--eco)}
.does .pillbar[data-pillar="e"] .fill,
.does .pillbar[data-pillar="e"] .gain{background-color:var(--eco)}
.does .pillbar[data-pillar="s"] .pn{color:var(--soc)}
.does .pillbar[data-pillar="s"] .fill,
.does .pillbar[data-pillar="s"] .gain{background-color:var(--soc)}
.does .pillbar[data-pillar="c"] .pn{color:var(--cap)}
.does .pillbar[data-pillar="c"] .fill,
.does .pillbar[data-pillar="c"] .gain{background-color:var(--cap)}
/* The widths are the Guyana reading itself, read off /atlas/pathway with its
   default plan on 2026-09-22 (fill is today, gain is the extension to year 10),
   kept here because no page carries a style attribute (tools/check_site.py). */
.does .pillbar[data-pillar="e"] .fill{width:25.2%}
.does .pillbar[data-pillar="e"] .gain{left:25.2%;width:8.228%}
.does .pillbar[data-pillar="s"] .fill{width:63.4%}
.does .pillbar[data-pillar="s"] .gain{left:63.4%;width:0}
.does .pillbar[data-pillar="c"] .fill{width:30.9%}
.does .pillbar[data-pillar="c"] .gain{left:30.9%;width:19.540%}

/* The trajectory, as the Atlas draws it. Axis furniture takes the site's ink;
   the modelled lines and the pillar dots keep the Atlas's own colours. */
.does-chart{margin-top:var(--s-5)}
.does-chart svg{display:block;width:100%;height:auto;--signal:var(--ink)}
.does-chart svg text{fill:var(--ink-3);font-family:var(--sans)}
.does-chart svg line{stroke:var(--rule)}

.does figcaption.label{
  margin-top:var(--s-3);
  font-family:var(--mono);
  color:var(--ink-3);
}

@media (max-width:820px){
  .does .does-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .does-fig{max-width:none;justify-self:stretch}
  .does .kpis{grid-template-columns:repeat(2,1fr)}
  .does-verb{min-width:4.5em}
}