/* Card: one approvable drawn on the lattice (sheet 1c). An ink hairline at the drawn radius on the
   lattice's paper; the picture on top over a hairline, with the letter in large mono at its top
   left and one state chip at its top right; under it the quiet mono caption, the name with
   "History ▸" at its end, the rail, the customer's last words in italic after who and when in
   mono, and the action row.

   **The caption is under the picture and not on it** (Reed, 8 Oct 2026): the Spec draws it inside
   the box at the bottom left, which works where the garment is a small drawing in the middle and
   not where it fills the box, as a real one does — the grey words then sit across the garment and
   neither reads. */
.card {
  min-width: 0;
  border: var(--hairline) solid var(--color-ink);
  border-radius: var(--radius-drawn);
  background: var(--color-paper-lattice);
}

/* **The lattice is inside the picture, and only there** (docs/decisions.md, 12 Oct 2026, "Where an
   order stands, built", (1)): what is drawn sits on it; the page around the cards is plain. */
.card-picture {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--card-picture-ratio);
  border-bottom: var(--hairline) solid var(--color-ink);
  overflow: hidden;
  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);
}

/* Whatever is drawn in the box fills its width and keeps its own shape; the box is already the
   viewer's, so a garment is whole in it and nothing is cut. */
.card-picture > :first-child {
  width: 100%;
}

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

.card-letter {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--card-letter);
  font-weight: var(--weight-medium);
  line-height: 1;
}

.card-state {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
}

.card-state .chip-outlined {
  background: var(--color-paper-lattice);
}

.card-caption {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.card-body {
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.card-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.card-title {
  margin: 0;
  font-size: var(--text-quiet);
  font-weight: var(--weight-medium);
}

.card-history {
  flex: none;
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.card-said {
  margin: var(--space-2) 0 0;
  font-size: var(--text-meta);
  line-height: var(--leading-body);
}

.card-said q {
  font-style: italic;
}

.card-said-by {
  margin-right: var(--space-2);
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* The last action, Set aside, at the row's far end. */
.card-actions > :last-child:not(:first-child) {
  margin-left: auto;
}

/* The line under the action row: one control that needs the card's whole width, so that its words
   are never broken across two lines and so that it stays in one place while it changes state
   (Reed, 8 Oct 2026, of the proof ask). */
.card-under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* **The card a line of the conversation opened** (docs/decisions.md, 10 Oct 2026, "The conversation,
   second pass", (3)): marked, so the eye lands on it after the scroll. */
.card-opened {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

/* **A card that opens in place** (the design's *Items, with fields*, 13 Oct 2026). Closed, it is a
   narrow card the whole of which presses: the picture with its letter and state, the name, the
   option check's line and one action. Open, it is wide: the picture beside everything the card
   holds, the state and Close at the top of that column, and *Fields per garment* across its foot
   under an ink rule; its rim is drawn heavier, as the design draws the one open. */
.card-opens {
  width: var(--card-closed-width);
}

.card-closed {
  position: relative;
  cursor: pointer;
}

.card-closed:hover,
.card-closed:focus-within {
  background: var(--color-line-panel-quiet);
}

/* **The closed card's opener**, a real button over the whole card and under its one action (the A
   verification's P3: a button is never inside another). */
.card-opener {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.card-opener:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

.card-closed .card-picture {
  aspect-ratio: var(--card-closed-ratio);
}

.card-summary {
  margin-top: var(--space-1);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
}

.card-closed-action {
  position: relative;
  z-index: 2;
  margin-top: var(--space-2);
  cursor: default;
}

.card-open {
  display: grid;
  grid-template-columns: minmax(0, var(--card-open-picture)) minmax(0, 1fr);
  width: min(100%, var(--card-open-width));
  outline: var(--rule-heavy) solid var(--color-ink);
  outline-offset: calc(-1 * var(--hairline));
}

.card-open .card-picture {
  aspect-ratio: auto;
  min-height: var(--card-open-picture-height);
  border-bottom: 0;
  border-right: var(--hairline) solid var(--color-ink);
}

.card-open .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.card-close {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-meta);
  font: inherit;
  font-size: var(--text-meta);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.card-fields {
  grid-column: 1 / -1;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: var(--hairline) solid var(--color-ink);
}

/* Under the wide measure, the open card is one column: the picture over what it holds. */
@media (max-width: 40rem) {
  .card-open {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-open .card-picture {
    border-right: 0;
    border-bottom: var(--hairline) solid var(--color-ink);
  }
}