/* The customer's card (src/offer_card.rs; the 15 Oct handoff's *Customer, the pack* and *Customer,
   the kit*): one thing offered, square on an ink hairline, its pictures on the lattice above its
   words. Square, because a card is cut from the shell (the corners rule, tokens.css). Every value is
   a token. */
.offer-card {
  margin: var(--space-3) 0 0;
  border: var(--hairline) solid var(--color-ink);
  background: var(--color-shell);
  color: var(--color-ink);
}

/* ---- the picture strip ---- */

.offer-pictures,
.offer-well {
  border-bottom: var(--hairline) solid var(--color-line);
  background-color: var(--color-paper-lattice);
  background-image:
    linear-gradient(var(--color-rule) var(--hairline), transparent var(--hairline)),
    linear-gradient(90deg, var(--color-rule) var(--hairline), transparent var(--hairline));
  background-size: var(--lattice-pitch) var(--lattice-pitch);
}

.offer-pictures {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--offer-picture-height);
  padding: var(--space-2);
  box-sizing: border-box;
  overflow: hidden;
}

/* One picture, a button where the page opens the well on it. */
.offer-picture {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

button.offer-picture {
  cursor: zoom-in;
}

button.offer-picture:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: calc(-1 * var(--focus-width));
}

.offer-pictures-lettered .offer-picture {
  flex: 0 1 var(--offer-tile-width);
}

.offer-picture-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.offer-picture-none {
  color: var(--color-muted);
  font-size: var(--text-quiet);
  text-align: center;
}

/* The letter at a side-by-side tile's top left, large mono, in the drawing. */
.offer-letter {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-display);
}

/* The well open in the strip's place: the garment viewer, as tall as it draws itself. */
.offer-well {
  padding: var(--space-2);
}

/* ---- the words ---- */

.offer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.offer-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-lead);
  font-weight: var(--weight-medium);
}

.offer-price {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-regular);
  text-align: right;
}

.offer-price-none,
.offer-was {
  color: var(--color-muted);
}

.offer-spec {
  color: var(--color-meta);
  font-size: var(--text-quiet);
  text-wrap: pretty;
}

/* ---- the reconfirm: what changed since the yes ---- */

.offer-changed {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-left: var(--rule-strong) solid var(--color-ink);
  background: var(--color-note-ground);
}

.offer-changed-head {
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.offer-changed-row {
  display: grid;
  grid-template-columns: var(--space-4) minmax(0, 1fr);
  gap: var(--space-1);
  font-size: var(--text-quiet);
}

.offer-changed-mark {
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
}

.offer-changed-same {
  color: var(--color-muted);
}

/* ---- folded to one line, and coming ---- */

.offer-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
}

.offer-line:not(:has(> .offer-thumb)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.offer-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--offer-thumb);
  height: var(--offer-thumb);
  border: var(--hairline) solid var(--color-line);
  background-color: var(--color-paper-lattice);
  overflow: hidden;
}

.offer-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.offer-line-said {
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

/* A No, or a thing only coming: dashed, its name muted. */
.offer-quiet {
  border-style: dashed;
}

.offer-quiet .offer-line-name {
  color: var(--color-muted);
  font-weight: var(--weight-medium);
}

.offer-quiet .offer-thumb {
  opacity: 0.5;
}

.offer-tag {
  padding: var(--space-1) var(--space-2);
  border: var(--hairline) dashed var(--color-muted);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---- the ask, drawn and inert (HQ's compose) ---- */

.offer-ask-preview {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-1);
}

.offer-ask-yes,
.offer-ask-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: var(--control-height-small);
  border: var(--hairline) solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
}

.offer-ask-comment {
  padding: 0 var(--space-1);
  color: var(--color-meta);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---- what a yes asks for, under the ask (the customer's page) ---- */

/* The handoff's *Customer, the pack*: "How many, per size" over a row of square fields and their
   total, the line of what they come to under it; on a card that collects names, the sentence, the
   roster's two doors and "About how many, for the quote". */
.offer-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.offer-next-head {
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.offer-next-words,
.offer-next-line {
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

.offer-counts {
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  max-width: 100%;
  border: var(--hairline) solid var(--color-field-line);
}

.offer-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: var(--offer-count-width);
  padding: var(--space-1);
  border-left: var(--hairline) solid var(--color-line);
}

.offer-count:first-child {
  border-left: 0;
}

.offer-count-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.offer-count input,
.offer-about input {
  box-sizing: border-box;
  width: var(--offer-count-width);
  height: var(--control-height-small);
  border: var(--hairline) solid var(--color-field-line);
  background: var(--color-shell);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  text-align: center;
}

.offer-count-total {
  background: var(--color-paper-lattice);
}

.offer-count-sum {
  padding-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-strong);
}

.offer-about {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

.offer-roster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}