/* quote editor
   The readout and the repeating rows it sits beside.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

/* ---------------- the readout (signature element) ----------------
   A live instrument: what this product costs AND what it takes to build,
   at three representative sizes, recomputed as you type. */
/* The rail is the sticky element, not the readout inside it — sticky needs a
   tall containing block to travel within, and the readout is only as tall as
   itself. */
.rail { position: sticky; top: 78px; }
@media (max-width: 900px) { .rail { position: static; } }

.readout {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.readout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--ink);
  color: #fff;
}
.readout-head .eyebrow { color: rgba(255,255,255,.62); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.dot.err { background: #E0705F; }

.readout-size {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.readout-size:last-child { border-bottom: none; }
.readout-dims {
  font: 400 12px var(--mono);
  color: var(--ink-3);
  margin-bottom: 7px;
}
.readout-price {
  font: 500 21px var(--mono);
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.readout-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 3px 0;
  color: var(--ink-2);
}
.readout-line b { font: 400 12.5px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.readout-outputs { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--line); }

.readout-problem {
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.45;
  background: var(--danger-bg);
  color: var(--danger);
  border-bottom: 1px solid #EFD0CA;
}
.readout-problem strong { display: block; margin-bottom: 2px; }
.readout-warn { background: var(--signal-bg); color: var(--signal); border-bottom-color: var(--signal-line); }
.readout-empty { padding: 26px 14px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* ---------------- repeating rows ---------------- */
.rows-head, .kv-row, .value-row, .formula-row {
  display: grid;
  gap: 9px;
  align-items: center;
}
.rows-head {
  font: 500 11px var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.kv-row, .rows-head.kv    { grid-template-columns: 1fr 1fr 32px; }
/* Three columns, not four: an answer's price adjustment was a box on this row
   and is a table of charge rows under it now. See 10-products.css. */
.value-row, .rows-head.val { grid-template-columns: 1.5fr 1fr 32px; }
.kv-row, .value-row, .formula-row { margin-bottom: 8px; }

.subcard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sunken);
  padding: 15px;
  margin-bottom: 12px;
}
.subcard-head { display: flex; gap: 10px; align-items: flex-end; }
.subcard-head .field { margin-bottom: 0; flex: 1; }
.subcard-part {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.note {
  font-size: 12.5px;
  color: var(--signal);
  background: var(--signal-bg);
  border: 1px solid var(--signal-line);
  padding: 4px 9px;
  border-radius: var(--r);
  display: inline-block;
}

/* Price breakdown on quotes */
.breakdown { font-size: 13px; }
.breakdown-line {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0;
  color: var(--ink-2);
}
.breakdown-line span:last-child { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.breakdown-total {
  display: flex; justify-content: space-between;
  padding-top: 10px; margin-top: 8px;
  border-top: 1px solid var(--ink);
  font-weight: 500;
}
.breakdown-total span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  .readout-price, .readout-line b { transition: color .12s ease; }
}