/* Configuration pages — one shared composition card, and its family.

   Sibling of components/config-ladder.css and pages/products-bundles.css, which
   draw the same five primitives for a visitor comparing across expertises. These
   pages now use the product catalogue's card anatomy for the itemised bill.

   The five --t0-* tones come from tokens.css, shared with the ladder and the
   atlas, so a primitive is the same colour wherever it appears. */

[data-medium="framework"]{--tone:var(--t0-framework)}
[data-medium="office_hours"]{--tone:var(--t0-office_hours)}
[data-medium="cohort"]{--tone:var(--t0-cohort)}
[data-medium="programme"]{--tone:var(--t0-programme)}
[data-medium="capacity"]{--tone:var(--t0-capacity)}

.cfg-signature{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 4px;font-family:var(--font-display);font-size:1.4rem}
.cfg-plus{color:var(--silver)}
.cfg-glyph{
  display:inline-grid;place-items:center;min-width:2.1em;height:2.1em;padding:0 .35em;
  border-radius:8px;border:1px solid var(--tone,var(--silver));color:var(--tone,inherit);
  font-size:.8em;font-weight:600;letter-spacing:.02em;
}
.cfg-range{color:var(--silver);margin:6px 0 0}

.cfg-bill h2,.cfg-family h2{margin:0 0 16px}
.cfg-family .product-catalogue-grid{margin-bottom:34px}
.config-detail-grid{grid-template-columns:minmax(0,720px);max-width:720px}
.cfg-note{margin:0 0 8px;color:var(--silver);font-size:.92rem;max-width:68ch;line-height:1.55;text-wrap:pretty}
.cfg-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.cfg-neighbours{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:30px 0 0}
.cfg-neighbours a{color:inherit;text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
  .config-detail-grid{grid-template-columns:minmax(0,1fr)}
}