/* The customer's order pages. Everything on them is a component from ativv-ui, so what is left
   here is only what is these pages' own: their column, the list's rows, the grid of tiles beside
   the one well, the toggles under it and the tray's drop. Every rule is under `.customer-orders`, the wrapper both pages
   render, so nothing here can reach a shell or the component set (docs/frontend/frontend-conventions.md,
   "Crates, compile times and size"). No color, size or radius: tokens only. */

/* The list's own measure, centred in the frame: on a phone the frame is this wide and the margins
   do nothing; on a laptop the frame is wider (frame-adapt.css) and a list of sentences does not
   want the window's width, so it sits in the middle of the shell rather than against its left
   edge. */
.customer-orders {
  max-width: 48rem;
  margin-inline: auto;
}

/* One order takes the room the frame gives it: the grid and the well side by side need more than
   the list's measure, and the frame stops growing at a measure the sentences still read at
   (frame-adapt.css).

   **And it takes the shell's height, not only its width** (Reed, 8 Oct 2026, after the viewer first
   drew: "so much extra space; the viewer should at least stretch to the top ... it is the main
   point and you can only get it as big as that little viewport"). The page is a column that fills
   the shell, the work — the letter grid and the well — takes every row left over, and the well's
   paper takes the height of that row, so the garment is as large as the window allows. The same
   two rules HQ's order page needs for its tray, and for the same reason: `.page` is a block whose
   height is the shell's, so a percentage against it resolves to nothing and the only way to fill it
   is for the page itself to be a column (hq-orders.css says it at length). */
.page:has(> .customer-order) {
  display: flex;
  flex-direction: column;
}

.customer-order {
  max-width: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* The list's centring margins, undone. `.customer-orders` is `margin-inline: auto`, and an auto
     margin on a flex item's cross axis wins over the stretch it would otherwise get, so with the
     page a column this section was drawn at its content's width and centred in the shell rather
     than filling it. */
  align-self: stretch;
  margin-inline: 0;
}

.customer-orders .back {
  margin: 0 0 var(--space-3);
}

/* ---- the list: "your orders" ------------------------------------------ */

.customer-orders .orders-title {
  margin: 0;
  font-size: var(--text-display-4);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

/* Sheet 1k: rows under an ink rule, a hairline between them. Each row is the order's name at the
   interface's strong weight with whose it is at its right in the mono face, then its standing as a
   pill, then the order's line, quiet. */
.customer-orders .order-rows {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  border-top: var(--rule-strong) solid var(--color-ink);
}

.customer-orders .order-row-link {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: var(--hairline) solid var(--color-line);
  color: inherit;
  text-decoration: none;
}

.customer-orders .order-row-link:hover .order-row-name {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.customer-orders .order-row-link:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

.customer-orders .order-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.customer-orders .order-row-name {
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-lead);
}

.customer-orders .order-row-whose {
  flex: none;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* The customer's stage words are lower case, as the ladder writes them; the pill leads with one. */
.customer-orders .order-row-stage {
  display: inline-block;
}

.customer-orders .order-row-stage::first-letter {
  text-transform: uppercase;
}

.customer-orders .order-row-headline {
  color: var(--color-meta);
  font-size: var(--text-label);
  text-wrap: pretty;
}

/* ---- one order: the top ------------------------------------------------ */

.customer-orders .back {
  margin: 0;
  font-size: var(--text-quiet);
}

.customer-orders .back a {
  color: var(--color-muted);
  text-decoration: none;
}

.customer-orders .back a:hover {
  color: var(--color-ink);
}

/* **The way back and Messages on one line** (docs/decisions.md, 12 Oct 2026, "Where an order
   stands, built", (11); the canvas's customer top): the way back at the left, the button at the right. */
.customer-orders .order-back-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  /* **The whole width of the page, at every width** (Reed, 13 Oct 2026, on the preview: at desktop
     width the button sat mid-page above the picture). It is a paragraph, and base.css gives every
     paragraph the text measure, so the line stopped at about 590 px and its right end was the middle
     of a wide page; the button belongs at the page's right edge. */
  max-width: none;
}

/* The order's name, as the title; its need-by under it in mono. */
.customer-orders .order-title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-display-4);
  font-weight: var(--weight-regular);
  line-height: var(--leading-order-title);
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}

.customer-orders .order-need-by {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---- your move, and ours ------------------------------------------------ */

.customer-orders .order-moves {
  margin-top: var(--space-5);
}

.customer-orders .order-moves-head {
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-strong);
}

.customer-orders .order-move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--color-line);
}

.customer-orders .order-move-detail {
  color: var(--color-muted);
  font-size: var(--text-quiet);
}

.customer-orders .order-move-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: var(--hairline) solid var(--color-ink);
  background: var(--color-shell);
  color: var(--color-ink);
  font: inherit;
  font-weight: var(--weight-strong);
  cursor: pointer;
}

/* ---- the cards -------------------------------------------------------- */

/* **One card per thing offered** (the 15 Oct handoff's *Customer, the pack* and *Customer, the
   kit*): sections by proof under a mono heading, "Proof 2 · 14 Oct", how many things at its right;
   the cards themselves are `ativv_ui::OfferCard`'s. */
.customer-orders .order-offered {
  margin-top: var(--space-5);
}

.customer-orders .order-cards {
  margin-top: var(--space-5);
}

.customer-orders .order-cards-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.customer-orders .order-cards-heading {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.customer-orders .order-cards-count {
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

/* *Below ↓* on a move: quiet mono, it scrolls to the card. */
.customer-orders .order-move-below {
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

/* *Change*, *Close*, *Keep it as it was*: an underlined word, a thumb's height. */
.customer-orders .offer-change {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-quiet);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  justify-self: start;
}

/* The well open in a card: the customer's, registration marks and no rim, the picture a fixed
   height so the card's ask stays on a phone's screen. `GarmentView` draws itself 4:3 wherever a
   page gives it the width, which is what HQ's cards want; here the box sets the height and the
   component fills the paper instead. */
.customer-orders .offer-well .well {
  margin: 0;
}

.customer-orders .offer-well .well-paper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--customer-well-height);
  padding: var(--space-2);
}

.customer-orders .offer-well .garment-view {
  height: 100%;
  aspect-ratio: auto;
}

.customer-orders .offer-well {
  --customer-well-height: 320px;
}

.customer-orders .offer-well .well-line {
  justify-content: space-between;
  margin-top: var(--space-2);
}

/* The answer that stands on an open card, quiet, its words under it. */
.customer-orders .offer-answered {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

.customer-orders .offer-answered-note {
  color: var(--color-ink);
  text-wrap: pretty;
}

/* ---- So far ----------------------------------------------------------- */

.customer-orders .order-so-far {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--color-ink);
}

.customer-orders .order-so-far-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.customer-orders .order-so-far-head {
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.customer-orders .order-so-far-sum {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-strong);
}

.customer-orders .order-so-far-words {
  margin: var(--space-1) 0 0;
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

/* ---- the ask: Yes · No · Comment -------------------------------------- */

/* **One ask** (docs/decisions.md, 15 Oct 2026, "The order as a tree…", (4) and (18)): Yes and No of
   equal weight, because the entry that asked for them asked for answers of equal weight, and Comment
   a quieter word beside them. They stage; nothing here commits. */
.customer-orders .answering {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.customer-orders .answer {
  flex: 1 1 0;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: var(--hairline) solid var(--color-ink);
  border-radius: var(--radius-button);
  background: var(--color-shell);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-control);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

/* The hover is the secondary button's (button.css) and not the paper token: paper is the shell's
   white from 8 Oct 2026, so a paper-coloured hover on a white shell is no hover at all. */
.customer-orders .answer:hover:not([disabled]) {
  background: color-mix(in oklab, var(--color-ink) 6%, transparent);
}

.customer-orders .answer:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

.customer-orders .answer[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* **Four looks** (docs/decisions.md, 10 Oct 2026, "The conversation, second pass", (4)). Sent is
   the answer that stands, filled; staged is lighter and dashed, as HQ draws what is pending; about
   to clear is sent and staged to be taken back (or replaced), filled but faded and struck through,
   until Send records it; none is the plain outline above. */
.customer-orders .answer-sent {
  background: var(--color-ink);
  color: var(--color-shell);
}

.customer-orders .answer-sent:hover:not([disabled]) {
  background: var(--color-accent-hover);
}

.customer-orders .answer-staged {
  border-style: dashed;
  border-width: var(--rule-strong);
  background: color-mix(in oklab, var(--color-ink) 12%, var(--color-shell));
}

.customer-orders .answer-clearing {
  border-style: dashed;
  background: color-mix(in oklab, var(--color-ink) 22%, var(--color-shell));
  color: var(--color-ink);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.customer-orders .answer-comment {
  min-height: var(--control-height);
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--color-meta);
  font: inherit;
  font-size: var(--text-quiet);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.customer-orders .answer-comment-on {
  color: var(--color-ink);
  font-weight: var(--weight-strong);
}


/* ---- the message box, with a chip saying what it is about -------------- */

.customer-orders .about-box {
  margin: var(--space-4) 0 0;
}

.customer-orders .about-box-chip {
  margin: 0 0 var(--space-2);
}

.customer-orders .about-box .comment-editor {
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-box);
  padding: var(--space-3);
}

/* ---- the tray: what is staged, and the one × per chip ------------------ */

/* **The tray is the frame's foot** (docs/decisions.md, 14 Oct 2026, "The browser crates", (10)), as
   HQ's is: the page puts it in the frame's tray (`FrameTray`), on the ground under the shell, which
   ends above it in its rounded corners and scrolls inside itself, so nothing runs under the tray
   and it never moves (base.css, "The frame"). Until then it was sticky at the foot of the page,
   inside the shell, with the record scrolling under it. Its wrapper carries this page's class for
   the rules below, and none of the list's measure: the tray runs the frame's width. */
.customer-orders.customer-tray {
  max-width: none;
  margin: 0;
}

/* The tray is the ground at the foot of the page (tray-bar.css); what is this page's is the × that
   takes one chip back, which rides inside the chip's own words. */
.customer-orders .tray-drop {
  margin-left: var(--space-2);
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.customer-orders .tray-drop:hover {
  opacity: 1;
}

.customer-orders .tray-drop:focus-visible {
  outline: var(--focus-width) solid currentColor;
  outline-offset: var(--focus-offset);
}

/* ---- proofs of files alone -------------------------------------------- */

/* What every proof was before entries existed, and what a proof carrying only files still is: the
   picture, what it covers, and the two things that can be said of it. */
.customer-orders .files-proofs {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
}

/* The box a proof's picture is mounted in. Its paper is the shell's white from 8 Oct 2026, so what
   says where the picture ends is a hairline rather than a tone. */
.customer-orders .files-proof-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--decide-art-height-small);
  padding: var(--space-4);
  background: var(--color-paper-lattice);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-card);
}

.customer-orders .files-proof-image {
  max-width: 100%;
  max-height: var(--decide-art-height);
  object-fit: contain;
}

.customer-orders .files-proof-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

.customer-orders .files-proof-sent {
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
}

/* ---- also settled: one quiet line, and its days behind "show" ---------- */

.customer-orders .order-settled {
  margin: var(--space-5) 0 0;
  color: var(--color-muted);
  font-size: var(--text-quiet);
  line-height: var(--leading-body);
}

.customer-orders .order-settled > summary {
  list-style: none;
  cursor: pointer;
}

.customer-orders .order-settled > summary::-webkit-details-marker {
  display: none;
}

.customer-orders .order-settled-show,
.customer-orders .order-settled-hide {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.customer-orders .order-settled-hide,
.customer-orders .order-settled[open] .order-settled-show {
  display: none;
}

.customer-orders .order-settled[open] .order-settled-hide {
  display: inline;
}

.customer-orders .order-settled-days {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.customer-orders .order-settled-days > li {
  display: grid;
  grid-template-columns: var(--thread-date-column) minmax(0, 1fr);
  gap: var(--space-3);
}

.customer-orders .order-settled-day {
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  line-height: var(--leading-body);
}

/* **Under the quantities, each item's pieces and sizes** (docs/decisions.md, 13 Oct 2026, "D3…",
   (8)): the second column of the quantities' row, one item a line. */
.customer-orders .order-settled-counts {
  grid-column: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.customer-orders .order-settled-sizes {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
}

/* **Under the quote, its total before tax and what it covers** (docs/decisions.md, 13 Oct 2026, "D3…",
   (10)): the second column of the quote's row, as the counts sit under the quantities. */
.customer-orders .order-settled-quote {
  grid-column: 2;
  margin: 0;
}

.customer-orders .order-settled-quote b {
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
}

/* **A quote they accepted, being updated**: one quiet line under the need-by. */
.customer-orders .order-quote-updating {
  margin: var(--space-2) 0 0;
  color: var(--color-ink);
}

/* ---- write to the house: one bordered box at the foot ------------------ */

/* Since 10 Oct 2026 the box is Messages' own, at its foot (below). */
.customer-orders .write-to {
  padding-top: var(--space-3);
  border-top: var(--rule-strong) solid var(--color-ink);
}

/* The box is the page's: the editor inside it gives up its own frame, so the box, the editor's
   toolbar and send read as one thing. */
.customer-orders .write-to-box {
  display: flex;
  flex-direction: column;
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.customer-orders .write-to-box:focus-within {
  border-color: var(--color-ink);
}

.customer-orders .write-to .comment-editor {
  border: 0;
  border-radius: var(--radius);
  background: transparent;
}

/* Inside the box the editor's own frame and focus ring give way to the box's; its colours are the
   tokens' already (comment-editor.css). */
.customer-orders .write-to .comment-editor wordgard-editor {
  border: 0;
  outline: none;
}

.customer-orders .write-to .comment-editor wg-content {
  min-height: var(--space-14);
}

/* The invitation, in the empty editor's one paragraph: an empty paragraph, or one holding only
   the break an editor keeps in an empty line. */
.customer-orders .write-to wg-content > p:only-child:is(:empty, :has(> br:only-child))::before {
  content: var(--write-to-placeholder);
  float: left;
  height: 0;
  color: var(--color-muted);
  pointer-events: none;
}

.customer-orders .write-to-box > .button {
  align-self: flex-end;
  margin: 0 var(--space-3) var(--space-3);
}

.customer-orders .write-to .refusal {
  margin-top: var(--space-2);
}

.customer-orders .subscribing {
  margin: var(--space-3) 0 0;
}

/* ---- what's happened ----------------------------------------------------- */

/* **Folded, and the last thing on the page**, under the tray (Reed, 8 Oct 2026). Its summary is one
   line: the label, and how many there are. Closed it is a foot to the page; open it runs on under
   the tray, which stays where it is. */
.customer-orders .order-thread {
  margin-top: var(--space-6);
}

.customer-orders .order-thread > summary::-webkit-details-marker {
  display: none;
}

/* Under an ink rule, as the snapshot sets a section: the mono label, and which way it reads. */
.customer-orders .order-thread-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--rule-strong) solid var(--color-ink);
  list-style: none;
  cursor: pointer;
}

.customer-orders .order-thread-heading {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-chip);
  line-height: var(--leading-section);
  text-transform: uppercase;
}

.customer-orders .order-thread-order {
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* A hold before release: the one line that says the order is paused, and what staff chose to say. */
.customer-orders .order-paused {
  margin: var(--space-4) 0 0;
  font-size: var(--text-quiet);
}

/* ---- Messages: the conversation, slid in ---------------------------------- */

/* **A slide-in at every width** (docs/decisions.md, 10 Oct 2026, "The conversation on both order
   pages", (3)). The page and Messages share a row: on a phone Messages covers the page, over
   everything but the shell's top line; on a wide screen it is docked beside the well, which
   narrows while it is open, so the picture stays in view and can still be turned and answered. */
.customer-orders .order-body {
  display: flex;
  flex: 1;
  gap: var(--space-6);
  min-height: 0;
}

.customer-orders .order-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.customer-orders .messages {
  display: none;
}

.customer-orders .messages-open {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--color-shell);
}

/* **Beside the page, where there is room for both** ("The conversation, second pass", (1)): from
   the width the main column has its widest measure and the chat its own beside it
   (`messages::BESIDE`, the same query), the frame grows by the chat's width and the gap, so the
   main column keeps its measure and moves over and nothing narrows; the chat is a sticky column in
   the room the page's sides had. Below it, it covers the page, as on a phone, and is modal. */
@media (min-width: 98rem) {
  .frame-adapt:has(.customer-orders .messages-open) {
    max-width: calc(
      var(--measure-adapt) + var(--messages-width-beside) + var(--space-6) + 2 * var(--shell-inset)
    );
  }

  .customer-orders .messages-open {
    position: sticky;
    top: var(--space-2);
    z-index: auto;
    flex: none;
    width: var(--messages-width-beside);
    height: calc(100dvh - var(--customer-work-above));
    min-height: 26rem;
    padding: 0 0 0 var(--space-5);
    border-left: var(--hairline) solid var(--color-line);
    background: transparent;
  }
}

.frame-adapt {
  --messages-width-beside: 22rem;
}

.customer-orders .messages {
  --messages-width: 22rem;
  --customer-work-above: 7.5rem;
  --customer-tray-band: 4.75rem;
}

.customer-orders .messages-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--rule-strong) solid var(--color-ink);
}

.customer-orders .messages-title {
  margin: 0;
  font-size: var(--text-display-3);
}

.customer-orders .messages-close {
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-control-small);
  cursor: pointer;
}

.customer-orders .messages-close:hover {
  color: var(--color-ink);
}

/* The lines scroll; the box stays at the foot. **A column turned upside down**, the one child at the
   end, so the browser keeps the scroll at the newest line as the box's editor loads under it and a
   picture arrives above it: a chat's own anchoring, with nothing measured in script. */
.customer-orders .messages-body {
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

.customer-orders .messages-box {
  flex: none;
}

.customer-orders .messages-says {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-label);
}

/* **The Messages button**, on the title's line: outlined, a chat icon, and a dot while something of
   ours is new to this customer; never the pill's style. */
.customer-orders .order-messages-open {
  flex: none;
  margin-top: var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--hairline) solid var(--color-ink);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-control-small);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

/* Open, it stays outlined, never filled as the pill is: a heavier rule says it is pressed. */
.customer-orders .order-messages-open[aria-expanded="true"] {
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.customer-orders .order-messages-icon {
  width: 1.1em;
  height: 1.1em;
}

.customer-orders .order-messages-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: currentColor;
}

/* ---- the chips above Messages' box, and the tray's way to it --------------- */

/* **What goes with the message** ("The conversation, second pass", (2) and (3)): the answers staged,
   dashed as staged things are, and the options the message is about, outlined; each with its ×. */
.customer-orders .messages-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.customer-orders .messages-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-1) 0 var(--space-2);
  border: var(--hairline) solid var(--color-ink);
  border-radius: var(--radius-chip);
  font-size: var(--text-label);
}

.customer-orders .messages-chip-answer {
  border-style: dashed;
  background: color-mix(in oklab, var(--color-ink) 8%, var(--color-shell));
}

.customer-orders .messages-chip button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 var(--space-1);
}

.customer-orders .tray-write {
  margin-left: var(--space-2);
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.customer-orders .messages-chip-file img {
  height: 1.5rem;
  width: auto;
}

/* ---- the roster's door ------------------------------------------------- */

/* **The roster's door** (src/roster.rs): a sheet over the page, a section per thing they said yes
   to, a row per person as a small form of fields that wraps on a phone. */
.roster-door-words,
.roster-door-others,
.roster-door-closed {
  margin: 0 0 var(--space-3);
  color: var(--color-meta);
  font-size: var(--text-quiet);
  text-wrap: pretty;
}

.roster-door-section {
  margin-top: var(--space-4);
}

.roster-door-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-ink);
}

.roster-door-head h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

.roster-door-so-far {
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.roster-door-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--color-line);
}

.roster-door-counted {
  background: var(--color-paper-lattice);
  padding-inline: var(--space-2);
}

.roster-door-counted-name {
  flex-basis: 100%;
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

.roster-door-field {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-quiet);
  color: var(--color-meta);
}

.roster-door-field input,
.roster-door-field select {
  min-height: var(--control-height-small);
  border: var(--hairline) solid var(--color-field-line);
  background: var(--color-shell);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-md);
  padding: 0 var(--space-2);
}

.roster-door-quantity input {
  width: var(--offer-count-width);
  font-family: var(--font-mono);
  text-align: center;
}

.roster-door-drop {
  min-width: var(--control-height-small);
  min-height: var(--control-height-small);
  border: 0;
  background: none;
  color: var(--color-meta);
  font-size: var(--text-lg);
  cursor: pointer;
}

.roster-door-more {
  display: flex;
  gap: var(--space-4);
}

.roster-door-paste {
  box-sizing: border-box;
  width: 100%;
  min-height: 12rem;
  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);
  padding: var(--space-2);
}

/* ---- after Confirm: what they agreed, what is being made ---------------- */

/* The handoff's *Customer, after Confirm*: rows under an ink rule, a name and its pieces at the left,
   what it comes to in mono at the right, a quieter line under each. */
.customer-orders .agreed {
  margin-top: var(--space-5);
}

.customer-orders .agreed-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-ink);
}

.customer-orders .agreed-head h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.customer-orders .agreed-meta,
.customer-orders .agreed-words {
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

.customer-orders .agreed-words {
  margin: var(--space-2) 0 0;
}

.customer-orders .agreed-row,
.customer-orders .agreed-sub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.customer-orders .agreed-row {
  padding-top: var(--space-3);
}

.customer-orders .agreed-sub {
  padding: var(--space-1) 0 var(--space-2) var(--space-3);
  border-bottom: var(--hairline) solid var(--color-line);
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

.customer-orders .agreed-made {
  padding-left: 0;
  color: var(--color-ink);
}

.customer-orders .agreed-sizes {
  color: var(--color-meta);
}

.customer-orders .agreed-no {
  color: var(--color-muted);
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-line);
}

.customer-orders .agreed-total {
  padding-bottom: var(--space-1);
}

.customer-orders .agreed-n {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  white-space: nowrap;
}

/* ---- the timeline ------------------------------------------------------ */

/* The handoff's *Customer, after release*: a line down the left joining one dot per step, done ones
   ticked and filled, the current one ringed, later ones hollow and muted; what they were told sits
   under a step in mono and quiet words. */
.customer-orders .timeline {
  margin-top: var(--space-5);
}

.customer-orders .tl {
  margin: var(--space-2) 0 var(--space-3);
}

.customer-orders .tl-step {
  position: relative;
  padding: 0 0 var(--space-4) var(--space-7);
}

.customer-orders .tl-step::before {
  content: "";
  position: absolute;
  left: calc(var(--dot-size) * 1.5);
  top: var(--space-4);
  bottom: 0;
  border-left: var(--rule-strong) solid var(--color-line);
}

.customer-orders .tl-step:last-child::before {
  display: none;
}

.customer-orders .tl-dot {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--dot-size) * 3);
  height: calc(var(--dot-size) * 3);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-shell);
  font-size: var(--text-mono-label);
  box-sizing: border-box;
}

.customer-orders .tl-done .tl-dot {
  background: var(--color-ink);
  color: var(--color-shell);
}

.customer-orders .tl-current .tl-dot {
  box-shadow: 0 0 0 var(--rule-strong) var(--color-shell), 0 0 0 calc(var(--rule-strong) * 2) var(--color-ink);
}

.customer-orders .tl-later .tl-dot {
  border-color: var(--color-line);
}

.customer-orders .tl-later .tl-name {
  color: var(--color-muted);
}

.customer-orders .tl-name {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
}

.customer-orders .tl-current .tl-name {
  font-weight: var(--weight-strong);
}

.customer-orders .tl-when {
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-regular);
  white-space: nowrap;
}

.customer-orders .tl-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

.customer-orders .tl-event-day {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.customer-orders .tl-paused {
  margin-top: var(--space-1);
  font-size: var(--text-quiet);
}

.customer-orders .tl-run-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-bottom: var(--space-2);
}

.customer-orders .agreed-fold {
  margin-top: var(--space-5);
}

.customer-orders .agreed-fold > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-ink);
}

.customer-orders .agreed-open {
  float: right;
  color: var(--color-meta);
  font-weight: var(--weight-regular);
}

.customer-orders .agreed-fold[open] .agreed-open {
  visibility: hidden;
}

/* ---- the factory sample's sign-off -------------------------------------- */

/* The handoff's *Customer, the factory sample*: the photos two by two, Ativv's look first on a ruled
   row, what differs in its words, Sign off and Ask for changes of equal weight, and the words. */
.sign-off-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.sign-off-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: var(--hairline) solid var(--color-line);
  background: var(--color-paper-lattice);
}

.customer-orders .sign-off-look {
  margin-top: var(--space-3);
  border-top: var(--hairline) solid var(--color-ink);
}

.customer-orders .sign-off-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-line);
}

.customer-orders .sign-off-ok {
  font-weight: var(--weight-strong);
}

.customer-orders .sign-off-meta,
.customer-orders .sign-off-differs,
.customer-orders .sign-off-words {
  margin: var(--space-2) 0 0;
  color: var(--color-meta);
  font-size: var(--text-quiet);
  text-wrap: pretty;
}

.customer-orders .sign-off-differs {
  color: var(--color-ink);
}

.customer-orders .sign-off-text {
  box-sizing: border-box;
  width: 100%;
  min-height: 5rem;
  margin-top: var(--space-2);
  border: var(--hairline) solid var(--color-field-line);
  background: var(--color-shell);
  color: var(--color-ink);
  font: inherit;
  padding: var(--space-2);
}

/* **The cards keep a column's measure on a wide screen**: they are drawn for a phone (the handoff's
   frames are all 390 wide), and a card stretched across a laptop puts its Yes a long way from its No;
   the customer's pages are one phone-width column (tokens.css, `--measure-column`). */
.customer-orders .order-offered,
.customer-orders .agreed,
.customer-orders .timeline,
.customer-orders .agreed-fold,
.customer-orders .files-proofs {
  max-width: var(--measure-column);
}