/* --- dignities ------------------------------------------------------------------
   A grid of seven planets against seven dignities. Gains and losses are told
   apart three ways at once, so colour is never needed: a group heading over
   each, a rule between them, and the mark itself — a light filled box with a
   plus for a gain, a dark box with a heavy edge and a minus for a loss. The
   total's bar is filled for a gain and only outlined for a loss. No new
   colours: paper tones only, and each planet's glyph in its own colour.
   ------------------------------------------------------------------------- */

.dig { margin: 0; display: grid; gap: 1rem; justify-items: center; }
/* positioned, so the hidden words inside the grid are clipped by its scroll
   box instead of widening the page from outside it */
.dig__box { position: relative; width: 100%; max-width: 56rem; overflow-x: auto; }
.dig figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 60ch;
}

.dig__table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.dig__table th,
.dig__table td {
  padding: 0.55rem 0.4rem;
  border-top: var(--rule);
  text-align: center;
  vertical-align: middle;
}
.dig__table thead th,
.dig__table thead td {
  border-top: 0;
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--paper-dim);
}
.dig__table thead tr:first-child th { padding-bottom: 0; color: var(--paper-mute); }
.dig__pts { display: block; color: var(--paper-mute); }
.dig__table .is-split { border-inline-start: 1px solid var(--line-field); }

.dig__planethead,
.dig__planet { text-align: start; }
.dig__table .dig__planet { white-space: nowrap; font-weight: 400; }
.dig__planet svg { vertical-align: middle; margin-inline-end: 0.5rem; }
.dig__name { color: var(--paper); }
.dig__where {
  display: block;
  padding-inline-start: calc(22px + 0.5rem);
  font-size: var(--step--1);
  color: var(--paper-mute);
}

.dig__mark {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 2.5rem;
  height: 1.9rem;
  border: 1px solid var(--line-field);
  font-size: var(--step--1);
}
.dig__cell.is-on.is-gain .dig__mark {
  background: var(--paper-dim);
  border-color: var(--paper-dim);
  color: var(--ink-void);
  font-weight: 600;
}
.dig__cell.is-on.is-loss .dig__mark {
  background: var(--ink-void);
  border: 2px solid var(--paper);
  color: var(--paper);
  font-weight: 600;
}
.dig__cell.is-maybe .dig__mark {
  border: 1px dashed var(--paper-dim);
  color: var(--paper);
}
.dig__when {
  display: block;
  font-size: var(--step--1);
  color: var(--paper-mute);
}

.dig__totalhead,
.dig__total { text-align: start; }
.dig__table .dig__total { min-width: 10.5rem; }
.dig__bar {
  position: relative;
  display: block;
  height: 0.8rem;
  margin-block: 0.2rem 0.35rem;
  border-bottom: var(--rule);
}
.dig__bar i { position: absolute; top: 0; bottom: 0; box-sizing: border-box; }
.dig__bar .dig__zero { top: -0.25rem; bottom: -0.25rem; width: 1px; background: var(--paper-mute); }
.dig__fill.is-gain { background: var(--paper-dim); }
.dig__fill.is-loss { border: 2px solid var(--paper-dim); }
.dig__fill.is-maybe { border: 1px dashed var(--paper-dim); }
.dig__sum { color: var(--paper); }
.dig__peregrine {
  display: block;
  font-size: var(--step--1);
  color: var(--paper-mute);
}

.dig__receptions { list-style: none; padding: 0; margin: 0; }
.dig__receptions li { padding-block: 0.6rem; border-top: var(--rule); }

.dig__note:empty { display: none; }

/* read by a screen reader, not shown */
.dig__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}