/* ==========================================================================
   04 · EIGHTFOLD — soul
   Technical, defensible, serious. The darkest, coolest paper in the set —
   this is read in a boardroom, on a projector, by someone who will be asked
   to defend the number.
   Motion budget: the row expander, the maturity bar on first open, and the
   report render. Re-run monthly per client, so the report is the payoff.
   ========================================================================== */
:root{
  /* Palette — fourth pass, 2026-08-30: Crowe's own 4-color system
     (grey/gold/sky-blue/navy), used the way Crowe itself uses them —
     navy as the dominant hero-panel color, gold for buttons/underline
     accents, the lighter blue as a secondary/status accent, grey as
     the alternate section background. --accent (the spine's "word"
     token) maps to navy: it's the color Crowe uses for heading text,
     and navy passes AA as text against every other color in this set,
     which gold and sky do not (see --gold-text/--sky-text below). */
  --accent:#073D7F;
  --accent-rgb:7,61,127;
  --paper:#F1F1F1;
  --paper-rgb:241,241,241;
  --card:#FFFFFF;

  --navy:#073D7F;
  --navy-rgb:7,61,127;

  /* --gold is Crowe's literal button/underline color — 5.78:1 against
     navy (safe for text there) but only 1.62:1 against white/--paper,
     so on light backgrounds it's decorative only (bars, rings, button
     fills with dark text on top) — never small text. --gold-text is
     the same hue darkened to 5.79:1 on white, for status text that
     needs the gold cue. */
  --gold:#F4B443;
  --gold-rgb:244,180,67;
  --gold-text:#8A5C1A;

  /* --sky is the lighter secondary blue — 3.16:1 on white (large/
     decorative only, same story as --gold). --sky-text is the same
     hue darkened to 5.19:1 for small text. */
  --sky:#6491DE;
  --sky-rgb:100,145,222;
  --sky-text:#446EB0;

  --connector:#D8DEE3;
}

/* ---------- the scorecard ------------------------------------------------- */
.ef-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);}
.ef-head{
  display:grid;grid-template-columns:2rem minmax(0,1fr) 9rem 5.5rem 1.5rem;
  gap:.75rem 1rem;align-items:center;padding:.55rem .9rem;
  background:var(--surface);border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
}
.ef-row{
  display:grid;grid-template-columns:2rem minmax(0,1fr) 9rem 5.5rem 1.5rem;
  gap:.75rem 1rem;align-items:center;width:100%;text-align:left;
  padding:.85rem .9rem;background:var(--card);border:0;border-bottom:1px solid var(--line-soft);
  cursor:pointer;font-size:var(--t-small);
  transition:background-color var(--dur) var(--ease-out);
}
.ef-row__n{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}
.ef-row__name{font-weight:600;color:var(--ink);}
.ef-row__lvl{display:flex;align-items:center;gap:.55rem;}
.ef-row__ml{font-family:var(--font-mono);font-size:var(--t-small);font-weight:500;white-space:nowrap;}
.ef-row__gap{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--amber);white-space:nowrap;}
.ef-row__ok{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--green);white-space:nowrap;}
.ef-row__chev{
  justify-self:end;color:var(--faint);font-family:var(--font-mono);
  transition:transform var(--dur) var(--ease-out);
}
.ef-row:active{background:var(--surface-2);}
.ef-row[aria-expanded="true"]{background:var(--surface);}
.ef-row[aria-expanded="true"] .ef-row__chev{transform:rotate(90deg);}
@media (hover:hover) and (pointer:fine){ .ef-row:hover{background:var(--surface);} }
@media (max-width:760px){
  .ef-head{display:none;}
  .ef-row{grid-template-columns:1.6rem minmax(0,1fr) 1.2rem;row-gap:.4rem;}
  .ef-row__lvl{grid-column:2;}
  .ef-row__delta{grid-column:2;}
}

/* The maturity bar. Fills once, on first open — never on collapse, never
   again. A bar that re-fills every time you glance at a row is a bar nobody
   reads twice. */
.ef-bar{
  position:relative;height:4px;border-radius:2px;background:var(--surface-2);
  overflow:hidden;width:100%;margin-top:.4rem;
}
.ef-bar i{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;background:var(--accent);
  transition:width 220ms var(--ease-out);
}
.ef-bar.is-filled i{width:var(--fill,0%);}
.ef-bar u{
  position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--ink);opacity:.45;
  left:var(--target,100%);
}

/* ---------- the expander -------------------------------------------------
   grid-template-rows 0fr → 1fr animates to content height without measuring
   it, so a long strategy and a short one both open correctly. */
.ef-detail{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 280ms var(--ease-drawer);
  border-bottom:1px solid var(--line-soft);background:var(--surface);
}
.ef-detail.is-open{grid-template-rows:1fr;}
.ef-detail > div{overflow:hidden;}
.ef-detail__in{padding:1rem .9rem 1.25rem;display:grid;gap:1rem;}
@media (min-width:900px){ .ef-detail__in{grid-template-columns:repeat(3,minmax(0,1fr));} }
.ef-col h4{
  margin:0 0 .55rem;font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500;
}
.ef-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;}
.ef-col li{font-size:var(--t-small);line-height:1.55;color:var(--muted);}
.ef-col--miss li::before{content:'✕ ';color:var(--red);font-family:var(--font-mono);}
.ef-col--found li{display:grid;gap:.25rem;}
.ef-req{
  grid-column:1 / -1;font-size:var(--t-small);line-height:1.6;color:var(--muted);
  padding:.6rem .75rem;border-left:2px solid var(--accent);background:var(--card);
}
.ef-req b{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.25rem;font-weight:500;}
.ef-none{font-size:var(--t-small);color:var(--green);font-family:var(--font-mono);}

/* ---------- the headline number ------------------------------------------ */
.ef-overall{
  display:grid;gap:1rem;padding:1.35rem 1.5rem;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
}
@media (min-width:760px){ .ef-overall{grid-template-columns:auto 1fr auto;} }
.ef-overall__ml{
  font-family:var(--font-display);font-size:clamp(3rem,2rem + 4vw,4.75rem);line-height:.85;
  color:var(--accent);
}
.ef-overall__ml small{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;
  display:block;color:var(--faint);margin-top:.5rem;text-transform:uppercase;}
.ef-overall__why{font-size:var(--t-small);color:var(--muted);max-width:52ch;line-height:1.6;}
.ef-overall__why b{color:var(--ink);font-weight:600;}

/* ---------- the report ---------------------------------------------------- */
.ef-report{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:clamp(1.25rem,1rem + 2vw,2.5rem);
  opacity:0;transform:translateY(8px) scale(.99);
}
.ef-report.is-in{
  opacity:1;transform:none;
  transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);
}
.ef-report h3{font-family:var(--font-display);font-weight:400;font-size:1.7rem;margin:0 0 .2rem;line-height:1.1;}
.ef-report__meta{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);margin:0 0 1.25rem;}
/* The report summary strip — three labelled facts up top, before the prose.
   Values are computed from EF.STRATEGIES at render time (see score.js /
   tool.html renderReport) — never hardcoded, so it can't drift from the
   scorecard below it. */
.ef-report__stats{
  display:grid;gap:.4rem;margin:0 0 1.1rem;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
}
.ef-report__stats p{
  margin:0;font-size:var(--t-small);color:var(--ink);
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline;
}
.ef-report__stats .label{ min-width:13rem; }
.ef-report table{width:100%;border-collapse:collapse;font-size:var(--t-small);margin:1rem 0;}
.ef-report th{text-align:left;font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);padding:.45rem .5rem;}
.ef-report td{border-bottom:1px solid var(--line-soft);padding:.45rem .5rem;vertical-align:top;}
.ef-report td.n{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums;}
.ef-report__note{font-size:var(--t-small);color:var(--muted);line-height:1.65;}
@media print{
  .ind-nav,.wb__bar,.ef-card,.signoff,.no-print{display:none !important;}
  .ef-report{border:0;padding:0;opacity:1;transform:none;}
  body{background:#fff;}
}