/* openings — the measure measure
 *
 * A table somebody types a job into, so it is tuned for typing rather than for
 * reading: rows dense enough that twelve openings fit on a screen, inputs that
 * do not look like inputs until they are being used, and measurements
 * monospaced so a column of them lines up.
 */

/* --- what the job is, set once --- */
.job-bar { display: grid; gap: 8px; }

.job-bar-field {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.job-bar-field label {
  font: 500 14px var(--ui);
  color: var(--ink-2);
  white-space: nowrap;
}

/* Wide enough to read a product name, not so wide it owns the card. */
.job-bar-field .combo { flex: 1; min-width: 220px; max-width: 380px; }
.job-bar .hint { margin: 0; font-size: 13px; }

/* The questions the whole job answers. Laid out as a row of narrow fields
   rather than a column: they are one decision seen at a glance, and a stack
   of them reads as a form to work through. */
.job-options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.job-options-grid .field { flex: 1 1 180px; margin: 0; min-width: 0; }
.job-options-grid label { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--ink-2); }
.job-options-grid select { width: 100%; }

/* --- the measure --- */
.measure { width: 100%; border-collapse: collapse; }

.measure thead th {
  padding: 0 8px 7px;
  text-align: left;
  font: 500 11px/1 var(--ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.measure thead th.num { text-align: right; }
.measure td { padding: 3px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }

.measure-row:hover td { background: var(--sunken); }

/* Quiet until touched. A grid of twelve boxed inputs reads as a wall; the
   borders come back on focus, where they are the thing that matters. */
.measure input[type="text"],
.measure input[type="number"],
.measure select {
  width: 100%;
  padding: 6px 7px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  font: 400 14px var(--ui);
}

.measure input.mono { font-family: var(--mono); text-align: right; }

.measure input:hover,
.measure select:hover { border-color: var(--line); }

.measure input:focus,
.measure select:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(23, 25, 26, .09);
}

/* Chrome's spinners steal a third of a narrow measurement column. */
.measure input[type="number"]::-webkit-outer-spin-button,
.measure input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.measure input[type="number"] { appearance: textfield; }

.measure-tick { width: 34px; text-align: center; }
.measure-tick input { width: auto; }
.measure-where > div { display: flex; gap: 6px; }
.measure-code { width: 68px; }
.measure-room { min-width: 150px; flex: 1 1 auto; }
/* The coarser fact, and on most jobs the same word on every row — so it sits
   under the room and reads as the quieter half of the pair. */
.measure-area { margin-top: 5px; width: 100%; font-size: 13px; color: var(--ink-2); }
.measure-product { min-width: 150px; }
.measure td.num { width: 92px; }
.measure-price { white-space: nowrap; }
.measure-actions { width: 130px; white-space: nowrap; }

.measure-actions .row-link { margin-right: 10px; }

/* A tick rather than a bin: the measure saves in one submit, so removal is a
   thing you change your mind about by not saving. */
.measure-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
}

.measure-remove input { width: auto; }

.measure-add {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.measure-add .muted { font-size: 13px; }

/* --- picking rows to make a run of --- */
.selection-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 30;

  display: flex;
  align-items: center;
  gap: 20px;
  padding: 11px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .16);
}

/* Spelled out because a `display:` rule beats the hidden attribute, and this
   bar is display:flex. Without this line it is never hidden — the trap this
   codebase documents and which has cost a day here already. */
.selection-bar[hidden] { display: none; }

.selection-count { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.selection-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selection-controls select {
  padding: 7px 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  font: 400 13.5px var(--ui);
}

/* --- a run as it reads on the measure --- */
.run-compact .run-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.run-compact .run-panels li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sunken);
  font-size: 13px;
}

.run-foot {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  /* The measure is genuinely wide. Scrolling it sideways beats stacking each
     opening into a card, which is the shape this page exists to get away
     from. */
  .measure-scroll { overflow-x: auto; }
  .measure { min-width: 760px; }

  .selection-bar {
    left: 12px;
    right: 12px;
    transform: none;
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* --- terms, folded away until they are wanted --- */
.terms { margin-top: 4px; }

.terms > summary {
  cursor: pointer;
  padding: 9px 0;
  font-size: 13.5px;
  color: var(--ink-2);
  list-style: none;
}

.terms > summary::-webkit-details-marker { display: none; }

/* The triangle drawn rather than borrowed, so it points the right way in
   every browser and sits on the text baseline. */
.terms > summary::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: var(--ink-3);
}

.terms[open] > summary::before { content: "▾"; }
.terms > summary:hover { color: var(--ink); }
.terms[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.measure-code { min-width: 92px; }