/* Global rhythm and alignment */
button,
.btn,
.ghost,
.icon-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

header > div,
.section-head > div {
  min-width: 0;
}

.section-head {
  min-height: 42px;
  gap: 20px;
}

.section-head > p {
  margin: 0;
}

.row {
  min-height: 72px;
}

.row > :last-child {
  justify-self: end;
}

.review-actions {
  align-items: center;
  justify-content: flex-end;
}

/* Three stable columns: description / points / action */
.rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 58px;
  gap: 14px;
  padding: 10px 0;
}

.rule > span {
  min-width: 0;
  line-height: 1.45;
}

.rule > b {
  min-width: 112px;
  display: grid;
  grid-template-columns: minmax(54px, auto) 52px;
  align-items: center;
  justify-content: end;
  gap: 8px;
  text-align: right;
  white-space: nowrap;
}

.rule > b .ghost {
  width: 52px;
  min-height: 36px;
  padding: 8px 10px;
}

/* Rules without an action keep the value aligned to the edge. */
.rule > b:not(:has(.ghost)) {
  display: block;
  min-width: 72px;
}

.field input,
.field select {
  min-height: 44px;
}

.checks {
  align-items: center;
}

.check {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  gap: 6px;
}

nav > button,
nav .nav-parent {
  justify-content: flex-start;
}

nav > button .nav-icon,
nav .nav-parent i {
  flex: 0 0 16px;
  line-height: 1;
}

nav .nav-parent > b {
  margin-left: auto;
}

@media (max-width: 640px) {
  .section-head {
    align-items: flex-start;
  }

  .rule {
    gap: 10px;
  }

  .rule > b {
    min-width: 104px;
    gap: 5px;
  }
}

/* Keep short pages anchored to the top instead of vertically centering. */
main {
  margin: 0 auto;
}

/* A single content cell must stay on the left. */
.row > :last-child:not(:first-child) {
  justify-self: end;
}

.row > :first-child:last-child {
  justify-self: stretch;
}