/* steel-class.css — class landing header (.sc-classhead) + jump bar
   (.sc-classnav). Head layout comes from steel-cardhead.css; this sheet only
   plates the card and styles the potency strip + anchor pills.
   Emitted by steel-etl internal/site/class_page.go. */

/* Hide the injected "# Name" H1 (+ --- rule) ONLY when the class card
   directly follows it — same adjacency family as the other leaf cards
   (see steel-ability-cards.css). Regression test: tests/e2e/page-titles.e2e.cjs. */
.md-typeset > h1:first-child:has(+ hr + .sc-classhead),
.md-typeset > h1:first-child + hr:has(+ .sc-classhead) { display: none; }

.md-typeset .sc-classhead {
  max-width: 47rem; margin: 1.7rem auto 0; padding: 1.1rem 1.2rem;
  border: 1px solid var(--fx-metal-line);
  border-radius: .65rem;
  background: var(--fx-metal-faint);
}

/* rail: the deck line is the caption of the primaries mini above it — quieter
   and tucked tight so the pair reads as one field (value over label) */
.sc-classhead .sc-head__right-deck.sc-head__slot--line {
  font-size: .72rem; letter-spacing: .07em; margin-top: -.1rem;
  color: var(--md-default-fg-color--lighter);
}

/* flavor: the class's read-aloud voice, set apart from the stat cells */
.md-typeset .sc-classhead__flavor {
  margin: .8rem 0 0; padding: 0 .2rem;
  font-style: italic; font-size: .78rem; line-height: 1.55;
  color: var(--md-default-fg-color--light);
}

/* stat + potency strips: two matched 3-column rows of centered value-over-
   label cells (the statblock defense-grid pattern), filling the card width
   edge to edge — a flex row of content-sized cells read as ragged/unbalanced */
.sc-classhead__stats,
.sc-classhead__pot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem; margin-top: .8rem;
}
.sc-classhead__stats { margin-top: .9rem; }
.sc-classhead__stats + .sc-classhead__pot { margin-top: .5rem; }
@media (max-width: 40em) {
  .sc-classhead__stats,
  .sc-classhead__pot { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}
.sc-classhead__cell {
  display: flex; flex-direction: column-reverse; gap: .1rem;
  align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--fx-metal-line); border-radius: .35rem;
  padding: .34rem .5rem; background: var(--md-default-bg-color);
}
.sc-classhead__cell .l {
  font-variant: small-caps; text-transform: lowercase; letter-spacing: .05em;
  font-size: .72rem; color: var(--md-default-fg-color--light);
  white-space: nowrap;
}
.sc-classhead__cell .v { font-size: .95rem; }

/* skills: prose footer line, set off from the cells above */
.md-typeset .sc-classhead__skills {
  margin: .8rem 0 0; padding-top: .6rem;
  border-top: 1px solid var(--fx-metal-line);
  font-size: .72rem; line-height: 1.5;
  color: var(--md-default-fg-color--light);
}
.sc-classhead__skills .l {
  font-family: var(--md-small-header-font);
  font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em;
  margin-right: .35rem; color: var(--md-default-fg-color);
}

/* jump bar: wrapping pill row (non-sticky; the right TOC covers deep nav) */
.md-typeset .sc-classnav {
  max-width: 47rem; margin: .7rem auto 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.md-typeset .sc-classnav a {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .35em; padding: .14rem .5rem;
  font-family: var(--md-small-header-font);
  font-variant: small-caps; text-transform: lowercase; letter-spacing: .04em;
  font-size: .82rem; line-height: 1.3; color: var(--md-default-fg-color--light);
}
.md-typeset .sc-classnav a:hover {
  color: var(--md-accent-fg-color); border-color: currentColor;
}

/* the "Level 1 2 … 10" group: one bordered pill holding ten number anchors */
.md-typeset .sc-classnav__lvls {
  display: inline-flex; align-items: center; gap: .1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .35em; padding: .14rem .5rem;
  font-family: var(--md-small-header-font);
  font-variant-caps: small-caps; text-transform: lowercase; letter-spacing: .04em;
  /* lining-nums so the level digits sit on the baseline as a row — the font's
     default old-style figures let 3/4/5/7/9 drop below it and the row looked wavy.
     line-height:1 (was 1.3) removes the ~1.5px low ride of the caps/figures. */
  font-variant-numeric: lining-nums;
  font-size: .82rem; line-height: 1; color: var(--md-default-fg-color--light);
}
.md-typeset .sc-classnav__lvls .l { margin-right: .3rem; }
.md-typeset .sc-classnav__lvls a {
  border: 0; border-radius: .3em; padding: 0 .28rem;
  color: var(--md-default-fg-color--light);
}
.md-typeset .sc-classnav__lvls a:hover {
  color: var(--md-accent-fg-color); background: var(--md-default-fg-color--lightest);
}