/* ============================================================
   Case files page — page-specific polish.
   Foundation styles (.case, .stamp, .body, .fld, .lesson) live in
   css/styles.css. This file only adds the new metadata chips, the
   strategy tag, and the headline-stat callout the renderer emits.
   ============================================================ */

/* Slightly wider cards so the richer prose breathes. */
.cases{ grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); }

/* Strategy tag on the right of the dispatch stamp. */
.case .stamp .strat{
  font-weight:normal;
  text-transform:none;
  letter-spacing:.04em;
  opacity:.95;
}

/* Meta row: basis badge + sector, just under the stamp. */
.case .case-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:2px;
}
.case .badge{
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.56rem;
  padding:3px 8px;
  border-radius:20px;
  border:1px solid var(--line-2);
  color:var(--ink-soft);
}
.case .badge-real{
  color:var(--moss);
  border-color:var(--moss);
  background:color-mix(in srgb, var(--moss) 12%, transparent);
}
.case .badge-illustrative{
  color:var(--sky-deep);
  border-color:var(--sky);
  background:color-mix(in srgb, var(--sky) 12%, transparent);
}
.case .sector{
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.56rem;
  color:var(--ink-faint);
}

/* A faint colour-coded rail marks documented vs illustrative cases. */
.case.is-real{ border-left:3px solid var(--moss); }
.case.is-illustrative{ border-left:3px solid var(--sky); }

/* Headline stat callout. */
.case .case-stat{
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:8px 12px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
}
.case .case-stat b{
  font-family:var(--font-label);
  letter-spacing:.02em;
  font-size:1.02rem;
  color:var(--amber);
  line-height:1;
}
.case .case-stat span{
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.56rem;
  color:var(--ink-faint);
}

/* Fallback for browsers without color-mix(): the border colours still read. */
@supports not (background: color-mix(in srgb, red, blue)){
  .case .badge-real,
  .case .badge-illustrative{ background:transparent; }
}