/* The components of the foundations board: the states, the buttons, the receipt, the transcript
   line; and what a form needs. */

/* A state is a mark and its word, never a colour alone: <span class="state" data-state="running">.
   Gold marks only what is live: running. */
.state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.state::before {
  content: "";
  flex: none;
  width: var(--mark);
  height: var(--mark);
  border-radius: 50%;
}

.state[data-state="idea"] {
  color: var(--text-secondary);
}

.state[data-state="idea"]::before {
  border: 1px solid currentcolor;
}

.state[data-state="chosen"]::before {
  border: 1px solid var(--text);
  background: linear-gradient(90deg, var(--text) 50%, transparent 50%);
}

.state[data-state="running"]::before {
  background: var(--live);
}

.state[data-state="review"]::before {
  border: 1px dashed var(--text);
}

.state[data-state="finished"]::before {
  background: var(--text);
}

/* The states drawn with a glyph instead of a dot. The glyph is decoration: the word says it. */
.state[data-state="parked"],
.state[data-state="abandoned"],
.state[data-state="failed"],
.state[data-state="dropped"] {
  color: var(--text-secondary);
}

.state[data-state="parked"]::before,
.state[data-state="abandoned"]::before,
.state[data-state="failed"]::before,
.state[data-state="dropped"]::before {
  height: auto;
  border-radius: 0;
  text-align: center;
}

.state[data-state="parked"]::before {
  content: "‖";
  content: "‖" / "";
  font-size: var(--small-size);
}

.state[data-state="abandoned"]::before,
.state[data-state="failed"]::before {
  content: "×";
  content: "×" / "";
}

.state[data-state="failed"] {
  color: var(--failure);
}

.state[data-state="dropped"] {
  color: var(--text-muted);
}

.state[data-state="dropped"]::before {
  content: "–";
  content: "–" / "";
}

/* Buttons: solid and light for the one action that matters, quiet for the rest, red only to stop. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--text);
  color: var(--ground);
  font-size: var(--ui-size);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-quick) var(--ease),
    border-color var(--duration-quick) var(--ease),
    color var(--duration-quick) var(--ease);
}

.button:hover {
  background: var(--text-hover);
  color: var(--ground);
}

.button.quiet {
  border-color: var(--line-control);
  background: transparent;
  color: var(--text);
  font-weight: 400;
}

.button.quiet:hover {
  border-color: var(--line-field);
  color: var(--text-hover);
}

.button.danger {
  border-color: var(--failure-line);
  background: transparent;
  color: var(--failure-text);
  font-weight: 400;
}

.button.danger:hover {
  border-color: var(--failure);
}

/* A control that does nothing yet, such as one on illustrative data: no hover, no click. */
.button:disabled,
button:disabled {
  pointer-events: none;
}

/* A form: its fields, one above the other, and its button. */
.form {
  display: grid;
  gap: var(--space-5);
}

/* A field: the label above, in sentence case; the field's edge keeps 3:1 on its ground. */
.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  color: var(--text-secondary);
}

.field input,
.field select {
  width: 100%;
  height: var(--field-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--line-field);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: var(--ui-size);
}

.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--text);
  outline-offset: 1px;
}

/* A failure said in words, such as a sign-in that was refused. */
.error {
  display: flex;
  gap: var(--space-2);
  color: var(--failure);
}

.error::before {
  content: "×";
  content: "×" / "";
}

/* A small label on a figure, such as "Illustrative data". */
.tag {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-tag);
  font-size: var(--small-size);
  line-height: var(--small-leading);
  color: var(--text-muted);
}

/* The mark an illustrative panel carries, in the canvas's own words: a tag that never wraps, and that
   no stylesheet hides, on a phone either (screens/tests/test_marks.py). */
.mark {
  flex: none;
  white-space: nowrap;
}

/* What a real panel says when its source finds nothing. */
.empty {
  color: var(--text-muted);
}

/* A figure that is an estimate, beside the measured ones. */
data.estimate {
  color: var(--text-secondary);
}

/* Rows of a table: a hairline between them, the head quiet, figures to the right. */
.table-scroll {
  overflow-x: auto;
}

.rows {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-size);
  line-height: var(--ui-leading);
}

.rows th,
.rows td {
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.rows th:last-child,
.rows td:last-child {
  padding-right: 0;
}

.rows thead th {
  padding-block: var(--space-3);
  border-bottom-color: var(--line-strong);
  font-size: var(--small-size);
  line-height: var(--small-leading);
  color: var(--text-muted);
}

.rows .number {
  text-align: right;
  white-space: nowrap;
}

/* A section's title, and what it says beside it. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.spacer {
  flex-grow: 1;
}

/* A card: a figure, an open receipt. */
.card {
  padding: var(--space-7);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

/* Facts in two columns, a quiet name before each: the limitation and the decision of a finding. On a
   phone the name goes above. */
.facts {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-4);
  font-size: var(--ui-size);
  line-height: var(--ui-leading);
}

.facts dt {
  color: var(--text-muted);
}

.facts dd {
  color: var(--text-secondary);
}

/* The quiet line under an answer: model · cost · Receipt. */
.receipt-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) 10px;
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  color: var(--text-muted);
}

.receipt-line > :not([aria-hidden]) {
  color: var(--text-secondary);
}

.receipt-line a {
  border-bottom: 1px solid var(--line-control);
}

/* The open receipt: what it cost, and what the others would have. The actual is solid; an estimate
   is hatched, begins with ~ and is named an estimate. */
.receipt {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 80px;
  gap: 10px var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
}

.receipt data {
  text-align: right;
}

/* A bar, as long as its value: an SVG rect, whose width the markup sets without a style attribute,
   which the Content Security Policy would block. */
.bar {
  display: block;
  height: 10px;
  background: var(--track);
}

.bar svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--text);
}

.bar.estimate {
  border: 1px solid var(--line-control);
  background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 5px);
}

/* A line of a transcript: when, who, which model, what. */
.transcript-line {
  display: grid;
  grid-template-columns: 70px 80px 120px minmax(0, 1fr);
  gap: var(--space-3);
  padding: 10px 0;
  border-block: 1px solid var(--line);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
}

.transcript-line time,
.transcript-line .model {
  color: var(--text-muted);
}

.transcript-line p {
  color: var(--text-reading);
}

@media (max-width: 640px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .facts dd + dt {
    margin-top: var(--space-3);
  }

  /* The model and its cost on one line, the bar under them. */
  .receipt {
    grid-template-columns: minmax(0, 1fr) 72px;
    grid-auto-flow: row dense;
  }

  .receipt .bar {
    grid-column: 1 / -1;
  }

  .transcript-line {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .transcript-line p {
    grid-column: 1 / -1;
  }
}