/* bottom.css — bottom row of page 1.
 *
 * Slice origin: bottom-left + bottom-right. Each column is ONE outer
 * box with internal horizontal dividers separating its three
 * sections (top strip / middle list / bottom list). The columns meet
 * in a 1:2 ratio matching the printed reference (left narrower, right
 * wider — so EXPERTISES and TALENTS have room to breathe).
 *
 *   Left (1fr):   [LIFTING | MOVEMENT] / CONDITIONS & INJURIES / WEAPONS
 *   Right (2fr):  [RECOVERY | SENSES]  / EXPERTISES / TALENTS
 *
 * Inside the top strip, the two derived-stat cells sit side-by-side
 * separated by a vertical divider. `createDerivedField` supplies the
 * internal markup (`.derived-label`, `.derived-val`, …) — scoped
 * overrides below restyle it in slice-like proportions (prominent
 * value, restrained label).
 */

.bottom-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
  padding: var(--sp-md);
}

@container sheet (min-width: 40rem) {
  .bottom-row {
    grid-template-columns: 1fr 2fr;
  }
}

/* Each column is a single outer box. */
.bottom-row__column {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* Horizontal dividers between the three sections inside the column. */
.bottom-row__column > * + * {
  border-top: 1px solid var(--color-border);
}

/* Top strip: two derived cells side-by-side. */
.bottom-row__derived-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Vertical divider between the two cells in the strip. */
.bottom-row__derived-strip > * + * {
  border-left: 1px solid var(--color-border);
}

/* Individual derived cell: wraps the createDerivedField output.
 * The outer column border + the strip's sibling rule handle the box
 * chrome; this cell only controls internal spacing. */
.bottom-row__derived-cell {
  padding: var(--sp-sm);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

/* Scope legacy .derived-* classes (emitted by createDerivedField)
 * to the slice-faithful look inside the bottom row. Label small and
 * muted; value prominent and tabular. */
.bottom-row__derived-cell > .derived-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xxs);
  width: 100%;
}

.bottom-row__derived-cell .derived-label {
  font-size: var(--fs-caption);
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.bottom-row__derived-cell .derived-val {
  font-size: var(--fs-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Middle + bottom sections of each column: entry lists under a
 * centered label. No border/background — the outer column supplies
 * them, dividers come from the sibling rule above. */
.bottom-row__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-md);
}

.bottom-row__section-label {
  font-size: var(--fs-emphasis);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-fg);
  letter-spacing: 0.05em;
  text-align: center;
  padding: var(--sp-xs) 0;
}