/* Tool-specific layout only. Faces, buttons, fields, the title and the toolbar
   come from ../assets/base.css over the vendored system. This file styles the
   controls this tool adds and the sheets it prints. */

/* Numbers are set in mono in every field that takes one, so a typed parameter
   and the value it produces share a register. */
.field.num,
.field.seed {
  font-family: var(--pp-font-mono);
  font-size: 0.86rem;
}
.field.num {
  width: 90px;
}
.field.num.narrow {
  width: 68px;
}
.field.seed {
  width: 132px;
}

/* A parameter name is a label inside a labelled group, so it sits one step
   quieter than the group's own label. */
.group label.param {
  color: var(--pp-faint);
  margin-left: 4px;
}

.card.prompt {
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--pp-muted);
}
.card.prompt strong {
  font-family: var(--pp-font-mono);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--pp-ink);
}

.summary-label {
  margin: 1.75rem 0 0.85rem;
}

/* The table itself is in ../assets/base.css. What stays here is true of
   figures rather than tables: right-aligned so decimal points stack, and
   tabular numerals so columns hold still between runs. The row name is not a
   figure, so it stays left. */
.sheet td {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sheet th {
  text-align: right;
}
.sheet th:first-child,
.sheet td:first-child {
  width: 88px;
  text-align: left;
  color: var(--pp-faint);
}

/* The plots. A table brings its own padding, so the figures inside one supply
   theirs. */
.plots {
  padding: 0.9rem 0.8rem 0.8rem;
}
.hist + .hist {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
}
.hist {
  margin: 0;
}

/* Column names, so a plot is named the same way its column is. */
.hist-name,
.hist-axis {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-label);
  color: var(--pp-faint);
}
.hist-name {
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: var(--pp-track-label);
}
.hist-axis {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
}
/* The ends of the range are read from the plot; the bin count describes how it
   was drawn, so it sits one step further back. */
.hist-axis span:first-child,
.hist-axis span:last-child {
  color: var(--pp-muted);
}
.hist-bins {
  text-align: center;
}

.hist-plot {
  display: block;
}
/* Bars are solid ink with no outline, because a histogram bar is a filled
   area. The rug is the sample underneath, at the same weight as the figures in
   the tables. */
.hist-bar {
  fill: var(--pp-ink);
}
.hist-base {
  fill: var(--pp-edge);
}
.hist-rug {
  fill: var(--pp-muted);
}

.hist-empty {
  margin: 0;
  font-size: 0.82rem;
  color: var(--pp-faint);
}

/* The seed a run used, offered back as a control: pressing it puts the seed in
   the field. It is a button, not a tag, so it takes the cut scale at the small
   end. */
.seed-tag {
  padding: 0.1rem 0.5rem;
  background: transparent;
  border: var(--pp-rule-line) solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  font-family: var(--pp-font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--w-track-label);
  color: var(--pp-muted);
}
.seed-tag:hover {
  border-color: var(--pp-edge);
  color: var(--pp-ink);
}
.seed-tag:active {
  transform: var(--w-press);
}