#reckoning-page {
  margin-top: 2rem;
  max-width: 48rem;
}

h1 {
  margin: 0 0 1.25rem;
  font-size: 1.2rem;
  font-weight: 600;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.standing {
  margin: 0 0 1rem;
  max-width: 42rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

.standing.note { opacity: 0.65; }

h3.working-epoch {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.8;
}

.reckoning {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid currentColor;
}

.loading { opacity: 0.6; font-size: 0.85rem; }

.figures,
.working {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
}

.figures dt,
.working dt { opacity: 0.65; }

.figures dd,
.working dd {
  margin: 0;
  overflow-wrap: anywhere; /* long decimals must not push the page sideways */
}

.figures dd.big { font-size: 1.05rem; }

/* The corner. Two columns on a wide screen, one on a phone — the labels
   are sentences rather than words, so they get room to be read. */
.corner-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  max-width: 42rem;
  font-size: 0.85rem;
}

.corner-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  min-width: 0;
}

.corner-field label { opacity: 0.65; }

.corner-field input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.25rem 0.4rem;
  min-width: 0;
  max-width: 100%;
}

.corner-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0.25rem 0 0;
}

.corner-actions button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
}

.corner-zone { opacity: 0.6; overflow-wrap: anywhere; }

.scene-caption {
  margin: -0.75rem 0 0;
  font-size: 0.75rem;
  opacity: 0.6;
}

.drift-figure {
  margin: 0;
  font-size: 1.05rem;
}

/* The pledge section, broken. As on the front door: no colour, because a
   reader who cannot see colour must not be the last to learn the tower
   failed to keep its word. Weight and a rule, nothing else. */
.reckoning--broken {
  padding-left: 0.9rem;
  border-left: 3px solid currentColor;
}

.ledger__entry {
  padding: 0.75rem 0;
  border-top: 1px solid currentColor;
  font-size: 0.85rem;
}

.ledger__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  align-items: baseline;
}

.ledger__date { min-width: 6rem; }
.ledger__times { opacity: 0.75; }

.ledger__method {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  opacity: 0.55;
}

.ledger__verdict {
  margin-left: auto;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.ledger__verdict--good { opacity: 0.55; }
.ledger__verdict--bad { opacity: 1; font-weight: 600; }

.ledger__broken {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.ledger__note {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  opacity: 0.6;
}

@media (max-width: 30rem) {
  .figures,
  .working { grid-template-columns: minmax(0, 1fr); gap: 0 0 }
  .figures dt,
  .working dt { margin-top: 0.6rem; }
  .ledger__verdict { margin-left: 0; }
  .corner-form { grid-template-columns: minmax(0, 1fr); }
}