/* EditTable: rows a person edits (17 Oct 2026, the third polish round; the artboards' Add an item,
   roster and quote tables). The heads are the labels, in small mono capitals over an ink rule; one
   control a cell at the compact height, filling it; rows on hairlines; the × at the end. Tokens
   only. */

/* Its own scroller: a table wider than the sheet scrolls sideways here, never off the screen. It
   is the containing block of what is placed inside it (a `.visually-hidden` head or word), or that
   would escape its clip and widen the sheet around it into a sideways scroll of its own. */
.edit-table-wrap {
  position: relative;
  overflow-x: auto;
}

.edit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-quiet);
}

.edit-table th {
  padding: 6px var(--space-2);
  border-bottom: var(--hairline) solid var(--color-ink);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: bottom;
}

/* A head's second line: "size", "one size". In the muted ink, not the artboards' #9aa0a6, which is
   the progress line's hatch and 2.6:1 on the shell: words are read, so they keep the muted's 6.3:1. */
.edit-table-sub {
  display: block;
  color: var(--color-muted);
}

.edit-table td {
  padding: 7px var(--space-2);
  border-bottom: var(--hairline) solid var(--color-rule);
  vertical-align: top;
}

/* **A row's header** (`<th scope="row">`, the fourth polish round): the cell that names the row, so
   a screen reader moving down a column hears which row it is in. Drawn as a cell, not as a head. */
.edit-table tbody th {
  padding: 7px var(--space-2);
  border-bottom: var(--hairline) solid var(--color-rule);
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  vertical-align: top;
}

.edit-table .edit-cell-center {
  text-align: center;
}

.edit-table .edit-cell-end {
  text-align: right;
}

/* A number or a price: the words and the box in mono. */
.edit-table .edit-cell-num,
.edit-table .edit-cell-num .text-input-control,
.edit-table .edit-cell-num .select-control {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

/* What is wrong with it stays in the reading face. */
.edit-table .edit-cell-num .text-input-error,
.edit-table .edit-cell-num .select-error {
  font-family: var(--font-sans);
  font-size: var(--text-label);
}

/* A row's tick and its ×: as narrow as they are, the tick on the control's middle line. */
.edit-table .edit-cell-tick,
.edit-table .edit-cell-out {
  width: 1%;
  white-space: nowrap;
}

.edit-table .edit-cell-tick input {
  margin: calc((var(--control-height-compact) - 13px) / 2) 0 0;
}

.edit-table .edit-cell-out {
  text-align: right;
}

/* One control a cell, filling it: a box or a select as wide as its column, never narrower than a
   select's own words (a <select> cannot end them in an ellipsis). */
.edit-table td > .text-input-compact,
.edit-table tbody th > .text-input-compact,
.edit-table td > .select-compact:not(.select-add, .select-inline) {
  display: grid;
  width: 100%;
}

.edit-table td > .select-compact:not(.select-add, .select-inline) .select-control {
  width: 100%;
  min-width: max-content;
}

/* The add select ("+ METHOD") is the verb, not a value: capped at its verb's width, never as wide
   as its longest method. */
.edit-table .select-add .select-control {
  max-width: var(--edit-add-width);
}

/* A quiet line under a cell's control: "a group of 2, shown together". */
.edit-table .edit-cell-note {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* A row that stops something takes the flag's fill; one that only warns, half of it. */
.edit-table .edit-row-stop > td,
.edit-table .edit-row-stop > th {
  background: var(--color-flag);
}

.edit-table .edit-row-warn > td,
.edit-table .edit-row-warn > th {
  background: color-mix(in srgb, var(--color-flag) 45%, var(--color-surface));
}

/* A quiet last line across every column: "… a row counts once … · + Row at Season kit". */
.edit-table .edit-table-foot > td {
  color: var(--color-muted);
  font-size: var(--text-quiet);
  vertical-align: middle;
}

/* ---- values: a sheet of values (the roster) ----
   Every row one height, the cells in the middle and on one line, the controls inline until
   focused. */
.edit-table-values {
  font-size: var(--text-sm);
}

.edit-table-values td,
.edit-table-values tbody th {
  height: var(--edit-row-values);
  padding: 0 var(--space-2);
  vertical-align: middle;
  white-space: nowrap;
}

.edit-table-values th.edit-cell-center {
  text-align: center;
}

/* The quiet last line wraps: held to one line it set the table's least width to its sentence, and
   every section scrolled sideways on a laptop. */
.edit-table-values .edit-table-foot > td {
  padding-block: var(--space-2);
  white-space: normal;
}

/* On a phone the compact controls are 16 px (so a phone does not zoom on focus), and a select grows
   past its column's width; at a fixed least width the table then took the difference out of the
   other sized columns (a name box at 91 px of its 144). As wide as its contents, at least its
   columns' widths, it keeps every column and scrolls inside its wrap. (The rows form only: the
   values form's quiet last line would set it as wide as its sentence.) */
@media (max-width: 40rem) {
  .edit-table:not(.edit-table-values) {
    width: max-content;
  }
}

/* The row's ×. */
.edit-remove {
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-lead);
  line-height: var(--control-height-compact);
  cursor: pointer;
}

.edit-remove:hover:not([disabled]) {
  color: var(--color-ink);
}

.edit-remove:focus-visible {
  outline: var(--focus-width) solid var(--color-ink);
  outline-offset: 0;
}

.edit-remove[disabled] {
  cursor: default;
  opacity: 0.4;
}