/* skills.css — skills row, three columns of seven skill rows each.
 *
 * Slice origin: skills-zone. Layout follows slices/skills-zone.html
 * directly: .skill-col has 7 equal-height rows; each .skill is a
 * three-column grid [value | name | track] with all children pinned
 * to grid-row: 1 so DOM order doesn't cause wrap. */

.skills-row {
  display: grid;
  grid-template-columns: 1fr;
  padding: var(--sp-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

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

.skill-col {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  padding: 0 var(--sp-sm);
  row-gap: var(--sp-xs);
  box-sizing: border-box;
}

/* Internal divider between columns — no outer gap on the row so
 * columns meet along the divider like the rest of the printed sheet. */
.skill-col + .skill-col {
  border-left: 1px solid var(--color-border);
}

/* Row layout: [value | name | track]. ALL children pin to grid-row: 1
 * so auto-placement can't push the value onto a second row when DOM
 * order differs. */
.skill {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: var(--sp-xs);
  box-sizing: border-box;
}

/* Number box for the derived modifier. Implemented as a readonly
 * <input> so it picks up the sheet's shared .field-input typography
 * and paper background via sheet.css, while this rule anchors the
 * outer dimensions and border to match the slice (2.8em × 2.1em). */
.skill-value {
  grid-column: 1;
  grid-row: 1;
  width: 2.8em;
  height: 2.1em;
  text-align: center;
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.skill-name {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-fg);
}

/* Empty name (custom row, no value yet) still reserves baseline. */
.skill-name:empty::before {
  content: "\00a0";
}

.skill-name--custom {
  border: none;
  background: transparent;
  font: inherit;
  padding: 0;
  width: 100%;
  outline: none;
  color: var(--color-fg);
}

/* The track is the .rank-dots element produced by createRankDots,
 * with .skill-track added for grid placement. Sheet.css already
 * styles .rank-dots (flex + gap) and .rank-dot (14×14 circle,
 * filled state, hover) — don't duplicate. */
.skill-track {
  grid-column: 3;
  grid-row: 1;
}