/* ============================================
   Component: Figure
   Partial: parts/_figure.html.erb
   Stimulus: none
   ============================================ */
/* A figure (#285): its label, its value, what it is compared with and its status, its frame, the
   source and date, and what it leaves out, behind a tap under the frame (D-105, #509), or in the
   frame for a figure drawn at a glance on a Summary card (D-45). The part fills its parent's width,
   and lays itself out by its own width, not the page's: under 20rem the value stands above its
   comparison and status, from 20rem they sit beside it and the value is right-aligned. */
.figure-container {
  container-type: inline-size;
  container-name: figure;
}

.figure {
  display: grid;
  gap: var(--spacing-xs);
}

.figure-label {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.figure-window { color: var(--color-muted); font-weight: 400; }

.figure-body {
  display: grid;
  gap: var(--spacing-xs);
}

.figure-value {
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* A figure given its records opens them from its value (#366), and so does an alternative given its
   records (#498): the link is at least the tap target's height, in the link colour, and keeps the
   value's size and figures. */
.figure-records-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-link);
  text-decoration: underline;
}

.figure-unavailable {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: 400;
}

.figure-context {
  display: grid;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.figure-comparison { color: var(--color-muted); }

.figure-comparison-value, .figure-difference {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* A status's colour is always beside its words, never in their place */
.figure-status { font-weight: 600; }
.figure-status.is-good { color: var(--color-success); }
.figure-status.is-warning { color: var(--color-warning); }
.figure-status.is-bad { color: var(--color-danger); }

@container figure (min-width: 20rem) {
  .figure-body {
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: var(--spacing-md);
  }

  .figure-value {
    grid-row: 1;
    grid-column: 2;
    text-align: right;
  }

  .figure-context {
    grid-row: 1;
    grid-column: 1;
  }
}

/* The frame: one line, its parts apart */
.figure-frame {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacing-sm);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.figure-frame > * + *::before {
  content: "· ";
}

.figure-frame time { color: var(--color-text); }

/* A synced entity's clauses in the frame (#301), coloured as the as-of line's, beside their words */
.figure-as-of-clause.is-degraded,
.figure-as-of-clause.is-unreconciled { color: var(--color-warning); }

.figure-as-of-clause.is-failed { color: var(--color-danger); }

/* What it leaves out (#509) and the other ways to count it, each behind a tap: <details> opens
   with no JavaScript and no hover */
.figure-leaves-out-tap,
.figure-alternatives { font-size: var(--font-size-xs); }

.figure-leaves-out-tap > summary,
.figure-alternatives > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-sm);
  min-height: var(--tap-target);
  color: var(--color-link);
  cursor: pointer;
  list-style: none;
}

/* A flex summary loses its marker, so it draws its own: closed, then open. The other ways' is drawn at the start of their words, so it stays on their first line however they wrap (#522) */
.figure-leaves-out-tap > summary::-webkit-details-marker,
.figure-alternatives > summary::-webkit-details-marker { display: none; }
.figure-leaves-out-tap > summary::before { content: "▸"; }
.figure-leaves-out-tap[open] > summary::before { content: "▾"; }
.figure-alternatives-words::before { content: "▸"; margin-right: var(--spacing-sm); }
.figure-alternatives[open] .figure-alternatives-words::before { content: "▾"; }

/* What it leaves out, indented under its tap as the other ways' list is */
.figure-leaves-out-tap > .figure-leaves-out {
  margin: 0;
  padding-left: var(--spacing-md);
  color: var(--color-muted);
}

.figure-other-count { color: var(--color-muted); }

.figure-alternative-list {
  display: grid;
  gap: var(--spacing-xs);
  padding-left: var(--spacing-md);
}

.figure-alternative {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--spacing-sm);
}

.figure-alternative-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.figure-alternative-evidence { color: var(--color-muted); }