/* =============================================================================
   class-features.css — the feature cards, for both sections that use them
   ============================================================================= */
/* One card per feature, in level order, each with its unlock level on a badge
   that rides the card's top-left corner. The model and the cards' markup are in
   src/js/class-features.js; where the section *sits* is sheet-layout.css.

   **Two sections draw these cards**: Class Features, and Species Traits from
   src/js/species-traits.js. They are one kind of thing — a named thing your
   character has, with a level it arrived at — read off two registries, so they
   share the styling rather than keeping two copies to drift apart. The only
   difference is `.no-badge`, below.

   The badge is the whole trick here. It sits neither inside the card nor beside
   it but **across the corner**, about a third of it hanging off — so the level
   is read before the card it belongs to and a long list can be scanned by level
   alone. That costs two things: the card needs a margin to hang into, and no
   ancestor may clip it. `.feature-list`'s padding is the first; the second is
   why nothing in this file uses `overflow: hidden`. */

/* **One card per row, always the full width of the section.** A run of cards
   read top to bottom is a list of what you have, in level order, and that is
   the thing this section is for; columns turn it into a grid to be searched.
   It also lets a description be a description rather than a narrow column of
   four-word lines.

   The padding is the room the badges hang into — half the badge plus its ring,
   so the first card's badge is not cut off at the top or the left. */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px 0 2px 14px;
}

.feature-card {
  position: relative;
  padding: 12px 13px 12px 26px;   /* the left inset clears the badge */
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 var(--emboss-hi), 0 1px 3px var(--emboss-lo);
}

/* ── The level badge ── */
/* `-13px` on a 34px circle leaves roughly a third of it outside the card on
   each axis — enough to read as breaking the edge, not so much that it floats
   free of it. The ring in the box-shadow is the card's own background, which is
   what makes the badge look punched through the corner rather than dropped on
   top of it. */
.feature-level {
  position: absolute;
  top: -13px;
  left: -13px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--panel), 0 1px 4px var(--emboss-lo);
}

/* A list whose levels are all the same is drawn without badges — see the
   `badge` option in `featureCard()`. With nothing hanging off the corner the
   card needs neither the inset that cleared it nor the room to hang into, so it
   takes back both and the list closes up. */
.feature-card.no-badge { padding-left: 13px; }
.feature-list:has(> .feature-card.no-badge) { padding-left: 0; }

/* ── The text ── */
.feature-name {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* ── Folding ── */
/* The name is a `<button>` so the fold has a real keyboard control (see
   `featureCard()`), and everything here exists to make that button look like
   the heading text it replaced — an expanded card is pixel-identical to the one
   that could not fold. `font: inherit` and `color: inherit` take the styling
   from `.feature-name` above, so the two cannot drift. */
.feature-name-btn {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.feature-name-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The whole card is the click target, so the whole card takes the cursor. The
   description is still selectable — a reader copying a passage is not folding
   anything, which `onFeatureCardClick` checks for. */
.feature-card { cursor: pointer; }
.feature-name { user-select: none; }

/* There is no caret or chevron on purpose: an expanded card was to look exactly
   as it always has, and a glyph at rest is a change to that. The hover lift is
   the affordance instead — the same one `.folder-header` uses for the same
   gesture. */
.feature-card:hover { border-color: var(--accent); }

/* Collapsed: the name and nothing else. The heading's bottom margin goes with
   the body it was spacing away from, or the card keeps a gap under a card that
   has nothing left to separate. */
.feature-card.collapsed .feature-desc { display: none; }
.feature-card.collapsed .feature-name { margin-bottom: 0; }

/* Only drawn when the character has more than one class — see `showClass`. */
.feature-class {
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── The description ── */
/* Markdown, rendered by markdown.js — so this styles the blocks *inside* the
   box rather than the box's own text. Deliberately a trimmed set rather than a
   copy of `.prose-preview` in sheet-prose.css: that is a page someone writes on
   and wants headings and rules for, this is a card two or three lines long, and
   the shared rhythm is the only part worth having twice.

   As there, the vertical rhythm is one margin between blocks and none at the
   ends, so a description sits flush in the card whatever it starts or finishes
   with. Everything is sized in `em` off the card's own 11.5px. */
.feature-desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: break-word;
}

.feature-desc > :first-child { margin-top: 0; }
.feature-desc > :last-child { margin-bottom: 0; }

.feature-desc p { margin: 0 0 0.6em; }

/* A heading in a feature is unusual but legal, so it must not arrive at the
   browser's default size — that is built for a document, not for a card. */
.feature-desc h1,
.feature-desc h2,
.feature-desc h3,
.feature-desc h4,
.feature-desc h5,
.feature-desc h6 {
  margin: 0.9em 0 0.3em;
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* What most descriptions are actually for: the two or three things a feature
   hands you, one per line, instead of a sentence with semicolons in it. */
.feature-desc ul,
.feature-desc ol { margin: 0 0 0.6em; padding-left: 1.35em; }
.feature-desc li { margin-bottom: 0.15em; }
.feature-desc li > ul,
.feature-desc li > ol { margin: 0.15em 0 0; }

.feature-desc blockquote {
  margin: 0 0 0.6em;
  padding: 0.1em 0 0.1em 0.8em;
  border-left: 2px solid var(--accent-soft);
  color: var(--text-dim);
  font-style: italic;
}
.feature-desc blockquote > :last-child { margin-bottom: 0; }

.feature-desc code {
  padding: 0.05em 0.3em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.feature-desc pre {
  margin: 0 0 0.6em;
  padding: 7px 9px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow-x: auto;            /* a long line scrolls itself, never the card */
}
.feature-desc pre code { padding: 0; background: none; border: none; }

.feature-desc a { color: var(--accent); text-decoration: underline; }
.feature-desc a:hover { text-decoration: none; }

.feature-desc strong, .feature-desc b { font-weight: 700; }
.feature-desc em, .feature-desc i { font-style: italic; }

/* Hand-written tables — markdown.js does not parse pipe syntax, so a damage
   ladder or a scaling table was typed as HTML. It still has to look like it
   belongs on the card. */
.feature-desc table {
  width: 100%;
  margin: 0 0 0.6em;
  border-collapse: collapse;
  font-size: 0.95em;
}
.feature-desc th,
.feature-desc td {
  padding: 3px 6px;
  border: 1px solid var(--border);
  text-align: left;
}
.feature-desc th {
  background: var(--field);
  font-weight: 700;
  color: var(--text-dim);
}

/* ── Locked ── */
/* Shown only when the reader asks for them, and drawn as a plan rather than a
   possession: dashed edge, flat ground, the badge hollowed out. Legible, but
   never mistakable for something you can use. */
.feature-card.locked {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  opacity: 0.72;
}
.feature-card.locked .feature-level {
  color: var(--text-dim);
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1px var(--border2);
}
.feature-card.locked .feature-name { color: var(--text-dim); }

/* ── The header toggle ── */
/* Rides the right end of the section's title. Absolute so it does not push the
   heading around, and un-styled back out of `.sheet-h`'s display casing. */
.widget-action {
  position: absolute;
  right: 0;
  bottom: 3px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.feature-note {
  margin: 0;
  font-size: 11px;
  font-style: italic;
  color: var(--text-dim);
}

/* A citation under the cards naming each class and subclass's source book.
   Not italic like `.feature-note` — it is information, not an apology for an
   absence. Sits a touch closer to the last card than the flex gap would give,
   reading as a footnote to the list rather than another item in it. */
.feature-sources {
  margin: -8px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}