/* =========================================================================
   WEAR · RAE — components

   Two box primitives and the kicker that sits in one. Every bordered surface
   in the deck is one of these; nothing styles its own border, fill or
   padding inline. That is what stops two boxes on the same slide having
   different insets.

     .card      holds a small block of content — a question, a finding
     .callout   spans the column and states one thing about the slide
     .kicker    the uppercase label at the top of either

   Loaded after type.css, before deck.css. deck.css positions these; it must
   not repaint them.

   Legacy names still in the markup map onto the primitives at the bottom of
   this file, so nothing has to be rewritten to inherit the system.
   ========================================================================= */

:root{
  /* One inset for every box on the deck, as a fraction of the frame. */
  --box-pad: clamp(16px, calc(var(--frame-h) * 0.0260), 56px);
  /* One gap between boxes that sit side by side. */
  --box-gap: clamp(18px, calc(var(--frame-h) * 0.0356), 72px);

  --edge: 1px solid var(--rule);
  --edge-accent: 1px solid rgba(91,75,196,.45);

  --surface: rgba(255,255,255,.42);      /* card on paper */
  --surface-quiet: rgba(27,36,82,.04);   /* callout, stating a consequence */
  --surface-accent: rgba(91,75,196,.06); /* callout, stating a claim */
}

/* Dark beats re-map the surface, not the component. */
.slide.dark{
  --edge: 1px solid var(--rule-light);
  --surface: rgba(255,255,255,.055);
  --surface-quiet: rgba(255,255,255,.045);
  --surface-accent: rgba(139,126,224,.09);
}

/* ================================================================ card == */
.card,
.course > div{
  border: var(--edge);
  background: var(--surface);
  padding: var(--box-pad);
}

/* ============================================================= callout == */
.callout,
.why,
.contrib{
  border: var(--edge);
  padding: var(--box-pad);
}
.callout--quiet,
.why{background: var(--surface-quiet);}
.callout--accent{background: var(--surface-accent);}

.callout .kicker,
.callout .why-k,
.callout .contrib-k{margin-bottom:.5em;}

/* A callout holds running prose, so it takes the full box width and the prose
   step — the same size, leading and ink whether the prose arrives as a
   paragraph or as a list. */
.callout > p,
.callout li,
.callout p.why-t{
  font-size: var(--type-body);
  line-height: 1.5;
  color: rgba(16,21,40,.72);
  margin-top: 0;
  max-width: none;
}
.slide.dark .callout > p,
.slide.dark .callout li{color: rgba(255,255,255,.74);}
.callout b{color: var(--ink);}
.slide.dark .callout b{color:#fff;}

/* ============================================================== kicker == */
.kicker,
.why-k,
.contrib-k{font-family: var(--display);}

/* ====================================================== legacy mapping == */
/* Older markup keeps its own class for the inner bits — these three are the
   boxes it lives in, so they inherit the primitive above. New markup should
   use .card / .callout direct. */