/* The orders wing's own spacing: what is not the component set's. Every rule is scoped to
   `.hq-orders`, which is the wrapper both of this wing's pages render, so nothing here reaches a
   class a shell or another page owns. Tokens only. */

/* The way back, above the heading of one order's page. */
.hq-orders .back {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}

/* ---- the list ---- */

/* Sheet 1b: the tabs, then the one well, the ruled sheet, the rows written on its rules. The
   component set draws the tabs, the well, the table on the paper and the chips; what is left here is
   the columns. The customer in the metadata ink, the order's name at the interface weight, NEXT as a
   meter, a chip and its words on one line, and the two dates in the mono face, need-by at the
   right edge. */
.hq-orders .tabs {
  margin-bottom: var(--space-4);
}

/* Find and the customer, between the tabs and the well (Reed, 8 Oct 2026). The same row the
   designs page has, drawn the same way: the controls on one baseline under one-line labels, so a
   hint hangs below without moving anything (hq-designs.css says why `start` and not `flex-end`). */
.hq-orders .orders-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-4);
}

.hq-orders td.orders-customer {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-meta);
}

.hq-orders td.orders-name {
  font-weight: var(--weight-medium);
}

/* `line-height: 1` because the cell's line is the ruled pitch: an inline-flex box at that line
   height sits on the baseline and makes the row taller than the pitch, so every row slid a little
   further off its rule (40.61 px a row, measured 7 Oct). */
.hq-orders .orders-next-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1;
}

.hq-orders .orders-next-words {
  color: var(--color-meta);
  font-size: var(--text-label);
}

.hq-orders td.orders-since,
.hq-orders td.orders-need-by {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

.hq-orders td.orders-since {
  color: var(--color-meta);
}

.hq-orders .orders-need-by {
  text-align: right;
}

.hq-orders .orders-none {
  padding-top: var(--space-6);
  border-top: var(--rule-strong) solid var(--color-ink);
}

/* ---- one order ---- */

/* The top (the canvas's Main.dc.html): "← All orders" with the Messages button across from it, the
   name at display size with whose it is beside it, and the pills, each a round of its own in the
   mono capitals: the line's stage, the need-by with the days left, on hold, settling, forced. */
.hq-order .order-head {
  margin: 0;
}

.hq-order .order-back-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  margin: 0;
}

.hq-order .order-back {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
}

.hq-order .order-back:hover {
  color: var(--color-ink);
}

.hq-order .order-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}

.hq-order .order-title {
  margin: 0;
  font-size: var(--text-display-2);
  letter-spacing: var(--tracking-display-1);
}

.hq-order .order-sub {
  color: var(--color-muted);
}

/* Whether the order has reached its customer, under the name on the Overview. */
.hq-order .order-reach {
  margin: var(--space-1) 0 0;
  font-size: var(--text-quiet);
}

.hq-order .order-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: none;
  margin: var(--space-3) 0 0;
}

.hq-order .order-pills .pill {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .order-pill-asana {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* **n forced**, hatched as a forced check is on the line (the backlog's "fewer pills"). */
.hq-order .order-pill-forced .pill {
  border-color: var(--color-ink);
  background: repeating-linear-gradient(
    135deg,
    var(--color-shell) 0 3px,
    var(--color-line-later) 3px 6px
  );
}

/* **Not visible**, one mark for every reason the customer would not hear (Reed, 13 Oct 2026): quiet,
   dashed as the line draws what is absent, while nothing staged would reach them; the warning yellow
   while the tray holds something that would have emailed them. A link to the Details row that fixes
   it. The same mark under the title, at Record and in the drawer. */
.hq-orders .order-unseen {
  display: inline-flex;
  align-items: center;
  padding: var(--pill-padding);
  border: var(--hairline) dashed var(--color-line-hatch);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-section);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.hq-orders .order-unseen:hover {
  border-style: solid;
  color: var(--color-ink);
}

.hq-orders .order-unseen-loud,
.hq-orders .order-unseen-loud:hover {
  border: var(--hairline) solid var(--color-flag);
  background: var(--color-flag);
  color: var(--color-flag-ink);
}

.hq-orders .order-unseen:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

/* In the drawer, on the dark ground, the quiet mark takes the ground's own ink. */
.hq-order .order-drawer .order-unseen:not(.order-unseen-loud) {
  border-color: var(--color-on-ground-hover);
  color: var(--color-on-ground-hover);
}

.hq-order .drawer-unseen {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Settling: the fill drains (the Sources frame), behind the outlined pill. */
.hq-order .order-pill-settling .pill {
  background: linear-gradient(90deg, var(--color-line-later) 0 35%, transparent 35%);
}

/* The A: Asana's word, an outlined square in the mono face, wherever a value is Asana's. */
.hq-orders .order-asana {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-drawn);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  font-weight: var(--weight-strong);
  letter-spacing: 0;
  line-height: 1;
}

/* A place held for what a later round brings (the roster's counts, the quote's total, who designs):
   grey and quiet, saying which round (Reed, 12 Oct 2026). */
.hq-orders .placeholder {
  color: var(--color-line-hatch);
  font-style: italic;
}

/* The order's tabs as the 12 Oct design draws them: mono capitals, a faint short rule between two,
   the current one heavier with an ink rule under it; a count a small grey round, the staged count a
   black one, absent when nothing is staged. */
.hq-order .tabs {
  margin-top: var(--space-5);
  padding: 0;
}

.hq-order .tabs-list {
  gap: 0;
}

.hq-order .tab {
  position: relative;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .tab:first-child {
  padding-left: 0;
}

.hq-order .tab + .tab::before {
  content: "";
  position: absolute;
  top: var(--space-3);
  bottom: var(--space-3);
  left: 0;
  width: var(--hairline);
  background: var(--color-line);
}

.hq-order .tab[aria-current="page"] {
  font-weight: var(--weight-strong);
}

.hq-order .tab-count,
.hq-order .tab-staged {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: var(--text-mono-chip);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.hq-order .tab-count {
  background: var(--color-line-panel);
  color: var(--color-ink);
}

/* A section: an ink rule over its title, as the snapshot titles every block on this page. */
.hq-order .order-section {
  padding-top: var(--space-3);
  border-top: var(--rule-strong) solid var(--color-ink);
}

.hq-order .order-section > h2 {
  margin: 0;
}

.hq-order .order-rows {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

/* A row: its words at the start, its controls and its chip at the end, on a hairline. */
.hq-order .order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-line);
  max-width: none;
}

.hq-order .order-row-waiting {
  display: block;
  padding: var(--space-3) 0;
}

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

.hq-order .order-row-controls {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

/* A row's "take off", as the snapshot draws it: there when the pointer is on the row or the
   keyboard is in it, and always there where there is no pointer to hover with. The controls a
   person has to find are never hidden like this: who may see the order (its share and hide
   buttons) and "set it" beside what release is waiting on are always shown. */
@media (hover: hover) {
  .hq-order .order-reveal {
    opacity: 0;
    transition: opacity 0.12s;
  }

  .hq-order .order-row:hover .order-reveal,
  .hq-order .order-row:focus-within .order-reveal,
  /* **A field row is the other kind of row this is drawn on.** `change`, on the Change tab's All
     fields view, wears `order-reveal` inside a `.field-row`, which is not an `.order-row` — so the
     rule above hid it on every device with a pointer and no rule anywhere could bring it back, and
     the one view that changes an order's fields had no control a mouse could see (measured
     `opacity: 0` on all six rows under a browser answering `(hover: hover)`, 8 Oct 2026, verifying
     the second polish; `docs/staff-guide.md` says it appears when you point at the row, and now it
     does). The same shape of fault as `take off` on an item head the same day: a class whose "on"
     state lives in a selector somewhere else fails silently, and it has now failed twice. */
  .hq-order .field-row:hover .order-reveal,
  .hq-order .field-row:focus-within .order-reveal {
    opacity: 1;
  }
}

.hq-order .order-more {
  margin: 0;
  padding: var(--space-2) 0;
}

.hq-order .order-adding {
  padding: var(--space-3) 0;
}

.hq-order .order-visibility {
  margin-top: var(--space-1);
  border-bottom: 0;
  font-size: var(--text-control-small);
}

/* The share and hide buttons may shrink to the column and wrap under each other, so on a phone
   "Show it to all of <a long club name>" stays on the page instead of running off its edge. */
.hq-order .order-visibility .order-row-controls {
  flex: 0 1 auto;
  min-width: 0;
}

/* **Who may see it, staged** (the correction pass, (2)): each pick a chip-shaped control, filled
   while it is the act in the tray, as `+ to proof` is. */
.hq-order .order-visibility-pick {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-chip);
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-control-small);
  cursor: pointer;
}

.hq-order .order-visibility-pick:hover {
  border-color: var(--color-ink);
}

.hq-order .order-visibility-pick.item-staged {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-shell);
}

/* On the Items tab the line stands above the well, on the ground beside the tabs' paper. */
.hq-order .order-items > .order-visibility {
  margin: 0 0 var(--space-3);
}

/* Somebody staged onto the order, under the people who are on it. */
.hq-order .order-staged-tag {
  padding: 0 var(--space-1);
  border-radius: var(--radius-chip);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* The proofs out with the customer, as small cards in a row under the design's words. */
.hq-order .order-proofs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.hq-order .order-proofs .proof-links {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

/* What has happened: its title, and at the far end which way it reads. */
.hq-order .order-happened-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.hq-order .order-happened-head > h2 {
  margin: 0;
}

.hq-order .order-flip {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-size: var(--text-meta);
  cursor: pointer;
}

.hq-order .order-flip:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* What is already settled: one quiet line, and "show" unfolds the rest. */
.hq-order .order-settled {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--text-quiet);
}

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

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

.hq-order .order-settled-show,
.hq-order .order-settled-hide {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

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

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

.hq-order .order-held {
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
  color: var(--color-ink);
}

.hq-order .order-held > li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-1) 0;
}

.hq-order .order-proofs-earlier {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-ink);
}

.hq-order .order-quiet {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
}

/* Release: the ink button and, beside it, what it does and what it waits for. */
.hq-order .order-release {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}

.hq-order .order-release-says {
  flex: 1 1 12rem;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-label);
}

.hq-order .proof-links,
.hq-order .proof-form-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}

/* Each block on a page stands apart from the one before it. The component set owns what is
   inside them. */
.hq-orders > .panel,
.hq-orders > .data-table-scroll,
.hq-orders > .empty-state {
  margin-bottom: var(--space-6);
}

.hq-orders > h2 {
  margin-top: var(--space-8);
}

.hq-orders .gate-missing {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
}

/* Which control settles a clause, beside the clause. */
.hq-orders .gate-field {
  margin-left: var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.hq-orders .panel-body > .text-input,
.hq-orders .panel-body > .select,
.hq-orders .order-adding > .text-input,
.hq-orders .order-adding > .select,
.hq-orders .proof-decision > .text-input,
.hq-orders .proof-setting > .select,
.hq-orders .proof-setting > .text-input {
  margin-bottom: var(--space-4);
}

/* The items a proof covers, and the artwork on it: a box on a proof's own form, which is a form
   and not a well. **Not `.order-items`**, which is the Items *tab*: it wore this box's grey hairline
   as the only tab with a border around its well, which is the thin grey line Reed saw on 8 Oct. */
.hq-orders .proof-items {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.hq-orders .covers {
  display: block;
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
}

.hq-orders .covers input {
  margin-right: var(--space-2);
}

.hq-orders .artwork-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.hq-orders .artwork-list {
  margin: var(--space-2) 0;
  padding: 0;
  list-style: none;
}

.hq-orders .artwork-list > li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
}

/* A staged proof's image file, drawn as the proof will carry it: a small picture, not its size. */
.hq-orders .artwork-file-picture {
  display: block;
  max-width: 160px;
  max-height: 120px;
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius);
}

/* One proof, and whatever may still be done to it: the forms open under the card's own content. */
.hq-orders .proof-decision,
.hq-orders .proof-setting {
  flex: 1 1 100%;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

/* ---- one order: the drawer, at the frame's foot ---- */

/* **The drawer is the foot of the screen and never moves** (docs/decisions.md, 12 Oct 2026, "Where
   an order stands, built", (1); the canvas's Details frame): the page puts it in the frame's tray
   (`ativv_ui::FrameTray`), so the shell ends in its rounded corners above it and scrolls inside
   itself while the drawer stays (base.css, "The frame", since 14 Oct 2026; before, this page took
   the shell's place with `:has` and drew a sheet of its own). */

.hq-order .order-tab {
  margin-top: var(--space-5);
}

/* The drawer: on the ground under the sheet. A settling row above the chips; the chips in their two
   groups, the customer's on the raised grey, Only Ativv's dashed; Record white on the ground. */
.hq-order .order-drawer {
  flex: none;
  display: flex;
  flex-direction: column;
  max-height: 45vh;
  overflow-y: auto;
  padding: var(--space-2) var(--space-2) var(--space-3);
  font-size: var(--text-quiet);
}

/* On Change the same contents are the page's own foot, on the ground's colour inside the sheet. */
.hq-order .order-drawer-foot {
  max-height: none;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-ground);
}

.hq-order .drawer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
}

.hq-order .drawer-settling {
  border-bottom: var(--hairline) solid var(--color-on-ground-raised);
}

/* **Leaving with something staged asks, in the drawer** (Reed, 14 Oct 2026): the roster's flag, the
   pale warning with its rule, on the drawer's first row, so the link held back is answered where the
   staged changes are. */
.hq-order .drawer-leaving {
  /* The flag's inks for whatever is drawn on it, as `.on-ground` gives the ground's: the drawer is
     on the ground, and its button would otherwise wear the ground's white on the pale flag. */
  --color-ink: var(--color-flag-ink);
  --color-muted: var(--color-flag-ink);
  --color-line: var(--color-flag-rule);
  --color-accent: var(--color-flag-ink);
  --color-accent-hover: var(--color-flag-rule);
  --color-accent-ink: var(--color-flag);
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--color-flag-rule);
  background: var(--color-flag);
  color: var(--color-flag-ink);
  font-size: var(--text-quiet);
}

.hq-order .drawer-group {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .drawer-group-theirs {
  color: var(--color-ink);
}

.hq-order .drawer-rule {
  width: var(--hairline);
  height: 24px;
  margin: 0 var(--space-2);
  background: var(--color-on-ground-kind);
}

.hq-order .drawer-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  max-width: 100%;
  padding: 2px var(--space-2);
  border: var(--hairline) solid var(--color-on-ground-kind);
  background: var(--color-on-ground-raised);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .drawer-chip-ours {
  border-style: dashed;
  background: transparent;
  color: var(--color-on-ground-hover);
}

.hq-order .drawer-chip-kind {
  font-weight: var(--weight-strong);
}

.hq-order .drawer-chip-words {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  overflow-wrap: anywhere;
}

.hq-order .drawer-chip-out {
  padding: 0 0 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-on-ground-muted);
  font: inherit;
  cursor: pointer;
}

.hq-order .drawer-chip-out:hover {
  color: var(--color-ink);
}

.hq-order .drawer-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.hq-order .drawer-note {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* What a held-back control waits for, beside it (13 Oct 2026, (12)). */
.hq-orders .needs {
  color: var(--color-muted);
  font-size: var(--text-quiet);
}

.hq-order .order-drawer .needs {
  color: var(--color-on-ground-hover);
}

/* One act's parts, joined under its name: one outline, the name and the count, one ×. */
.hq-order .drawer-group-act {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2);
  border: var(--hairline) solid var(--color-on-ground-hover);
}

.hq-order .drawer-group-act-name {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hq-order .drawer-group-act .drawer-chip {
  border-style: dashed;
}

.hq-order .drawer-quiet {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .drawer-quiet input[type="text"] {
  min-width: 16rem;
}

/* **On a phone the drawer's words wrap** (13 Oct 2026, seen at 390): Record's words name the
   customer ("Record 2 · send 1 email to Bluewillow Rowing Club") and the quiet Record's label does
   too, and a button's one line ran both past the window's edge. The button keeps its height as its
   least and grows a line; the label and the reason's box take the row. */
@media (max-width: 36rem) {
  .hq-order .drawer-end {
    margin-left: 0;
    min-width: 0;
  }

  .hq-order .drawer-end .button {
    height: auto;
    min-height: var(--control-height);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    white-space: normal;
    text-align: left;
  }

  .hq-order .drawer-quiet,
  .hq-order .drawer-quiet .drawer-note {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .hq-order .drawer-quiet input[type="text"] {
    min-width: 0;
    width: 100%;
  }
}

.hq-order .drawer-review {
  color: var(--color-on-ground-hover);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* A move settling: the A, its words, and a fill draining from the left as its minutes run out. */
.hq-order .drawer-settling-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  padding: 2px var(--space-2);
  border: var(--hairline) solid var(--color-on-ground-hover);
  background: linear-gradient(
    90deg,
    var(--color-on-ground-kind) 0 calc(100% - var(--drained, 0%)),
    var(--color-on-ground-raised) calc(100% - var(--drained, 0%))
  );
  color: var(--color-ink);
  font-size: var(--text-label);
}

.hq-order .drawer-asana {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  font-weight: var(--weight-strong);
}

.hq-order .drawer-now {
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: var(--color-ink);
  color: var(--color-ground);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  cursor: pointer;
}

/* The lip's left-hand count. */
.hq-orders .well-count {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---- Items ---- */

/* One item: its head on a hairline, then its candidates as cards across the lattice. */
.hq-order .item + .item {
  margin-top: var(--space-8);
}

/* **No rule under an item's head** (Reed, 8 Oct 2026): a hairline the width of the well under every
   item competed with the lattice's grid, which is what divides this tab already. The item's name is
   in display type over its cards, and that is division enough. */
.hq-order .item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.hq-order .item-name {
  margin: 0;
  font-size: var(--text-display-3);
  font-weight: 600;
}

/* "Take off", at the head's end but always drawn: a quiet control among the item's other controls
   rather than one that appears under a pointer (Reed, 8 Oct 2026). */
.hq-order .item-head-off {
  margin-left: auto;
}

/* **The item's label is its shown state** while no proof covers it (docs/decisions.md, 10 Oct
   2026, "What a customer reads", (5)): `NOT SHOWN` dashed and muted, as the customer has nothing;
   `SHOWN` outlined in ink, as the tile they read; pressed, filled black and pending (`.item-staged`
   below) until Record. A chip's face, as a button. */
.hq-order .item-label {
  padding: var(--chip-padding);
  border: var(--hairline) dashed var(--color-line);
  border-radius: var(--radius-chip);
  background: none;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-chip);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.hq-order .item-label-shown {
  border-style: solid;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

/* Filled is staged, everywhere: the card's tag, the item's control, the tray's chip. */
.hq-order .item-staged {
  border-style: solid;
  background: var(--color-ink);
  color: var(--color-shell);
}

/* **The item's name is its rename** (the correction pass, (3)): the name in display type is a
   button that opens a box with the name in it; nothing else changes on the head while it does. A
   staged name is filled, as staged is everywhere, until Record. */
.hq-order .item-name-edit {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: text;
}

.hq-order .item-name-edit:hover:enabled,
.hq-order .item-name-edit:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 0.2em;
}

.hq-order .item-name-staged {
  padding: 0 var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--color-ink);
  color: var(--color-shell);
}

/* The box a rename is typed in, on its own line under the head, with Rename and Cancel beside it. */
.hq-order .item-renaming {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  flex-basis: 100%;
}

.hq-order .item-renaming .text-input {
  flex: 1 1 16rem;
  max-width: 24rem;
}

.hq-order .item-name-edit:disabled {
  cursor: default;
}

/* **"Add an option"**: the designer's dashed card with a plus, the last card of every item, the
   cards' own width and the picture box's height, so it reads as the place the next card goes. */
.hq-order .item-add-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 10rem;
  padding: var(--space-4);
  border: 1.5px dashed var(--color-ink);
  border-radius: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-control-small);
  cursor: pointer;
}

.hq-order .item-add-option:hover,
.hq-order .item-add-option:focus-visible {
  background: var(--color-paper-lattice);
}

.hq-order .item-add-option-from {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .item-add-option-plus {
  font-family: var(--font-mono);
  font-size: var(--card-letter);
  line-height: 1;
}

/* **The cards across, closed but one** (the design's *Items, with fields*): closed cards at their
   own narrow width, the open one wide, wrapping as the well allows; each card keeps its own height. */
.hq-order .item-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.hq-order .item-add-option {
  width: var(--card-closed-width);
}

/* A line of its own under the cards: a measure on the words would let it sit beside them. */
.hq-order .item-empty,
.hq-order .item-aside {
  flex-basis: 100%;
  max-width: none;
}

.hq-order .item-aside {
  margin-top: var(--space-4);
  font-size: var(--text-control-small);
}

.hq-order .item-aside summary {
  color: var(--color-muted);
  cursor: pointer;
}

/* **The proof ask, on the card's own line**: the opener (`+ to proof`, or the ask itself once it is
   staged, filled), the two choices while they are open, and the × that takes the entry off the
   tray. Every one of them is a chip-shaped control that never breaks its words, which is what
   `STAGED · FOR APPROVAL` did at the card's width (Reed, 8 Oct 2026). */
.hq-order .card-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .card-to-proof,
.hq-order .card-proof-pick {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-chip);
  background: none;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

/* **The ask itself, once it is staged: filled**, the same form as the choice that is pressed, which
   is what staged is everywhere in this language — the card's tag, the item's control, the tray's
   chip. It is named by the class *and* the element, at (0,3,0), because `.hq-order .item-staged`
   above and `.hq-order .card-to-proof` here are both (0,2,0) and the later of the two is this
   file's own `background: none`: the component set the class and nothing was drawn by it (found by
   reading the computed style, 8 Oct 2026, verifying the second polish). It matters more than it
   would have a day earlier, because the same round took the word "staged" out of these words, so
   the fill is now the whole of what says a candidate is on the proof. */
.hq-order .card-to-proof.item-staged {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-shell);
}

/* The one that is staged, among the two choices: filled, which is what staged is everywhere. */
.hq-order .card-proof-pick[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-shell);
}

.hq-order .card-to-proof:hover,
.hq-order .card-proof-pick:hover {
  border-color: var(--color-ink);
}

/* The × that takes this entry off the tray: the tray chip's own control, on the card. */
.hq-order .card-proof-drop {
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-label);
  line-height: 1;
  cursor: pointer;
}

.hq-order .card-proof-drop:hover {
  color: var(--color-ink);
}

.hq-order .order-adding {
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hq-order .order-adding-buttons {
  display: flex;
  gap: var(--space-3);
}

/* ---- Change ---- */

.hq-order .change-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* **The email as it will read, beside what only Ativv sees** (docs/decisions.md, 12 Oct 2026, "Where
   an order stands, built", (10)): two columns that wrap, the letter on the quiet panel with each
   line's tag at its right. */
.hq-order .change-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
}

.hq-order .change-email {
  flex: 999 1 32rem;
  min-width: 0;
}

.hq-order .change-aside {
  flex: 1 1 18rem;
  min-width: 0;
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.hq-order .change-head {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-strong);
}

.hq-order .change-to {
  margin: 0 0 var(--space-3);
}

.hq-order .change-letter {
  padding: var(--space-4) var(--space-5) var(--space-2);
  border: var(--hairline) solid var(--color-line);
  background: var(--color-line-panel-quiet);
}

.hq-order .change-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
  gap: var(--space-3);
  align-items: baseline;
  min-height: 38px;
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-rule);
}

.hq-order .change-line:last-child {
  border-bottom: 0;
}

.hq-order .change-subject b {
  font-size: var(--text-md);
}

.hq-order .change-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.hq-order .change-tag {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--text-meta);
  color: var(--color-muted);
}

.hq-order .change-tag-kind {
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-chip);
  text-transform: uppercase;
  color: var(--color-muted);
}

.hq-order .change-tag-words,
.hq-order .change-ours-words {
  margin-left: var(--space-1);
}

.hq-order .change-tag-out {
  padding: 0 0 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-line-hatch);
  font-size: var(--text-meta);
  cursor: pointer;
}

.hq-order .change-standing {
  display: block;
}

.hq-order .change-drop-says {
  margin: var(--space-2) 0 0;
  font-size: var(--text-quiet);
}

.hq-order .change-no-email {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 14rem;
  padding: var(--space-6);
  border: var(--hairline) dashed var(--color-line-hatch);
  text-align: center;
}

.hq-order .change-no-email-head {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-strong);
}

.hq-order .change-ours-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline) solid var(--color-ink);
}

.hq-order .change-ours-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-line);
}

.hq-order .change-asana p {
  margin: 0;
}

/* Change's own foot: the count, who sees how many, and Record, on the ground. */
.hq-order .change-foot-count {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-strong);
}

.hq-order .change-foot-sides {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-on-ground-muted);
}

/* The artwork on the proof being built: the picker and what has gone up, under the staged chips
   and beside the two writing boxes. Its own list rules are the .hq-orders ones above, which this
   page wears too. */
/* The three `+` lines — Artwork, a message, a note — are rows on the paper like the chips above
   them while they are folded: one rule each, the button the whole of the line. Unfolded, each is a
   form and keeps its own spacing. */
.hq-order .change-artwork,
.hq-order .change-writing {
  margin-top: 0;
}

.hq-order .change-artwork:has(> .button:only-child),
.hq-order .change-writing:has(> .button:only-child) {
  display: flex;
  align-items: center;
  height: var(--ruled-pitch);
}

.hq-order .change-artwork > .artwork {
  font-size: var(--text-control-small);
}

.hq-order .change-writing-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-control-small);
}

/* A section's title is itself one rule tall, so the rows under it stay on the rules; the ink rule
   over it is the paper's own line redrawn in ink. */
.hq-order .change-section > h2 {
  height: var(--ruled-pitch);
  margin: 0;
  line-height: var(--ruled-pitch);
  border-top: var(--rule-strong) solid var(--color-ink);
  font-size: var(--text-control-small);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* **One field's row, on the rules**: `LABEL · value · who/when · change`, the line one ruled pitch
   and the who/when a second under it, so a row is two rules and the next row starts on one. The
   control a `change` opens is below both and is a form, not writing on the paper. */
.hq-order .field-row {
  display: grid;
  gap: 0 var(--space-5);
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
}

.hq-order .field-line,
.hq-order .field-label,
.hq-order .field-meta {
  height: var(--ruled-pitch);
  line-height: var(--ruled-pitch);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hq-order .field-label {
  margin: 0;
  min-width: 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .field-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.hq-order .field-line > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hq-order .field-line-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
}

.hq-order .field-meta,
.hq-order .field-aside {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-control-small);
}

.hq-order .field-was {
  color: var(--color-muted);
}

.hq-order .field-changing {
  margin: var(--space-3) 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* **The controls of a CHANGE row stand on one top edge** (Reed, 9 Oct 2026: "the CHANGE rows are
   misaligned because the Why box's hint pushes it higher than the other control"). The row is a
   grid whose cells stretched to its tallest, the Why box with its hint, and a stretched field grew
   its own label row, so the select beside it was drawn lower than the box. Each cell keeps its own
   height from the top, and the hint hangs under its own control. */
.hq-order .field-controls {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: start;
}

/* ---- Log ---- */

/* **One row per occasion** (`docs/decisions.md`, 13 Oct 2026, "D3…", (13); the design's `Log` and
   `Log, everything`): when, who, what, and the email chip; opened, its changes as subject · what ·
   from → to · mark beside the email as sent. The columns are one grid shared by the header, every
   occasion's row and every quiet line, so they line up down the page. On a phone the row stacks:
   the twisty, when and the chip on one line, who and what under them. */
.hq-order .log-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.hq-order .log-show {
  display: inline-flex;
  border: var(--rule-strong) solid var(--color-ink);
}

.hq-order .log-show button {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: var(--color-shell);
  color: var(--color-ink);
  cursor: pointer;
}

.hq-order .log-show button + button {
  border-left: var(--rule-strong) solid var(--color-ink);
}

.hq-order .log-show button[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-shell);
}

.hq-order .log-hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.hq-order .log {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hq-order .log-columns {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 8.5rem) minmax(0, 12rem) minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  align-items: center;
}

.hq-order .log-head {
  padding: var(--space-1) 0;
  border-bottom: var(--rule-strong) solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.hq-order .log-occasion,
.hq-order .log-quiet {
  border-bottom: var(--hairline) solid var(--color-rule);
}

.hq-order .log-row {
  padding: var(--space-3) 0;
}

.hq-order .log-opened {
  background: color-mix(in srgb, var(--color-rule) 25%, var(--color-shell));
  border-bottom: var(--rule-strong) solid var(--color-ink);
}

.hq-order .log-twisty {
  border: 0;
  padding: 0;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--text-meta);
}

.hq-order .log-when {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.hq-order .log-who {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1) 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.hq-order .log-name {
  font-weight: 600;
}

.hq-order .log-side {
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .log-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--color-ink);
}

.hq-order .log-dot-theirs {
  background: transparent;
  border: 1.5px solid var(--color-ink);
  box-sizing: border-box;
}

.hq-order .log-dot-system {
  background: var(--color-muted);
}

.hq-order .log-asana {
  width: 16px;
  height: 16px;
}

.hq-order .log-what {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hq-order .log-chip {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  background: var(--color-shell);
  color: var(--color-ink);
  cursor: pointer;
}

.hq-order .log-chip-on {
  background: var(--color-ink);
  color: var(--color-shell);
}

.hq-order .log-chip-none {
  border-color: var(--color-field-line);
  color: var(--color-muted);
  cursor: default;
}

/* Everything's quieter lines: a save, a look, a card moved and back. */
.hq-order .log-quiet {
  padding: var(--space-1) 0;
  color: var(--color-muted);
  font-size: var(--text-quiet);
}

.hq-order .log-quiet .log-dot,
.hq-order .log-quiet .log-asana {
  width: 10px;
  height: 10px;
  margin: 0 3px;
  background: var(--color-muted);
  border-color: var(--color-muted);
}

.hq-order .log-quiet .log-asana {
  font-size: 7px;
  background: none;
}

/* Opened: the changes beside the email as sent, side by side where there is room. */
.hq-order .log-open {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-1) var(--space-4) var(--space-4) 2.25rem;
}

.hq-order .log-changes {
  flex: 3 1 28rem;
  min-width: 0;
}

.hq-order .log-change {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 9rem) minmax(0, 1fr) 1.5rem;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-rule);
  font-size: var(--text-sm);
  align-items: baseline;
}

.hq-order .log-change-head {
  border-bottom: var(--rule-strong) solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.hq-order .log-change-folded {
  color: var(--color-muted);
}

.hq-order .log-subject,
.hq-order .log-what-changed,
.hq-order .log-moved {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hq-order .log-from {
  color: var(--color-muted);
  text-decoration: line-through;
}

.hq-order .log-ref {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.hq-order .log-said {
  display: block;
  font-style: italic;
  color: var(--color-ink);
}

.hq-order .log-files {
  display: block;
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .log-tick {
  display: inline-flex;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-shell);
  font-size: 8px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.hq-order .log-change .log-dot,
.hq-order .log-change .log-asana {
  width: 14px;
  height: 14px;
}

/* The email as sent, or why none went. */
.hq-order .log-email {
  flex: 2 1 18rem;
  min-width: 0;
}

.hq-order .log-email-head {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 800;
}

.hq-order .log-letter {
  margin-top: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-shell);
  border: var(--hairline) solid var(--color-line);
}

.hq-order .log-letter-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-1) 0;
  border-bottom: var(--hairline) solid var(--color-rule);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.hq-order .log-letter-standing {
  color: var(--color-meta);
}

/* Whose words the quote under it is, as the email says it: one line with the quote. */
.hq-order .log-letter-who {
  color: var(--color-meta);
  border-bottom: none;
  padding-bottom: 0;
}

.hq-order .log-letter-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  flex: none;
}

.hq-order .log-letter-text {
  margin: var(--space-2) 0 0;
  white-space: pre-wrap;
  font-size: var(--text-sm);
}

.hq-order .log-email-said {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.hq-order .log-email-foot {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* A version's small panel, opened in place under the changes. */
.hq-order .log-panel {
  max-width: 28rem;
  margin: var(--space-2) 0 var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-shell);
  border: var(--rule-strong) solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: 0 6px 18px rgb(20 20 20 / 0.12);
}

.hq-order .log-panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.hq-order .log-panel-about,
.hq-order .log-panel-open {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.hq-order .log-panel-open {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--color-ink);
}

.hq-order .log-panel-covers {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.hq-order .log-panel-lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 3px var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.hq-order .log-panel-n {
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
}

.hq-order .log-panel-total {
  border-top: var(--rule-strong) solid var(--color-ink);
  padding-top: 3px;
  font-weight: 700;
}

.hq-order .log-panel-was {
  color: var(--color-muted);
}

@media (max-width: 720px) {
  .hq-order .log-head {
    display: none;
  }

  .hq-order .log-columns {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    row-gap: var(--space-1);
  }

  .hq-order .log-columns > .log-who {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .hq-order .log-columns > .log-what {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  .hq-order .log-quiet > span:empty {
    display: none;
  }

  .hq-order .log-open {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .hq-order .log-change {
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    row-gap: 2px;
  }

  .hq-order .log-change > .log-subject {
    font-weight: 600;
  }

  .hq-order .log-change > .log-what-changed,
  .hq-order .log-change > .log-moved {
    grid-column: 1;
  }

  .hq-order .log-change > :last-child {
    grid-column: 2;
    grid-row: 1;
  }

  .hq-order .log-change-head {
    display: none;
  }
}

/* The lip's two switches, at its end. */
/* ---- The list's whose-move chips ---- */

/* Both chips in one cell of the list, side by side. */
.hq-orders .orders-whose {
  display: inline-flex;
  gap: var(--space-1);
}

/* ---- Take off ---- */

.take-off-options {
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.take-off-options li {
  padding: var(--space-1) 0;
}

.take-off-letter {
  display: inline-block;
  min-width: 1.5em;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
}

.take-off-shown {
  font-weight: var(--weight-medium);
}

/* ---- The shelf, opened for an item ---- */

/* The sections and cards are the component set's (`ativv-ui/styles/shelf.css`); what is the sheet's
   own is its line at the foot. */
.shelf-sheet-foot {
  margin: 0;
  font-size: var(--text-control-small);
}

.shelf-sheet-none {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius);
  font-size: var(--text-control-small);
}

/* An item's artwork proof among its options: the proof's own small card, a cell of the grid. */
.hq-order .item-artwork {
  min-width: 0;
}

/* Release, under what is staged, when it is the one move left. */
.hq-order .change-release {
  margin-top: var(--space-5);
}

/* ---- An item's artwork as an option (docs/decisions.md, 10 Oct 2026, "Production", (0)) ---- */

/* The sheet's two tabs, the component set's own, above whichever is open. */
.sheet-tabs {
  margin-bottom: var(--space-4);
}

.sheet-artwork {
  display: grid;
  gap: var(--space-3);
}

/* A new version is picked through the label, drawn as a button; the input itself is the browser's
   own and stays out of sight, reachable through its label. */
.hq-order .card-artwork-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hq-order label.button {
  cursor: pointer;
}

/* ---- Production (docs/decisions.md, 12 Oct 2026, "Where an order stands, built", (8), (9)) ---- */

.hq-order .order-production .production-order-hold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}

.hq-order .production-held-mark {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-strong);
}

/* A run: a block with an ink rim, its head, its line and the band, then its panel and sample. */
.hq-order .production-run {
  margin-top: var(--space-6);
  border: var(--hairline) solid var(--color-ink);
}

.hq-order .production-run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline) solid var(--color-line);
}

.hq-order .production-run-folded .production-run-head {
  border-bottom: 0;
}

.hq-order .production-run-kind {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-strong);
}

.hq-order .production-run-what {
  font-size: var(--text-lead);
  font-weight: var(--weight-strong);
}

/* How long it has to go, from the table, and *Override*, at the head's right. */
.hq-order .production-run-long {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-meta);
}


.hq-order .production-run-line {
  padding: var(--space-2) var(--space-4) var(--space-4);
}

.hq-order .production-fold,
.hq-order .production-link {
  padding: var(--space-1) var(--space-3);
  border: var(--hairline) solid var(--color-ink);
  background: var(--color-shell);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-quiet);
  cursor: pointer;
}

.hq-order .production-link {
  border: 0;
  padding: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hq-order .production-run-folded .production-fold {
  margin-left: auto;
}

.hq-order .production-ticks {
  display: inline-flex;
  gap: 3px;
}

.hq-order .production-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rail-square);
  height: var(--rail-square);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-shell);
  font-size: var(--text-mono-chip);
}

.hq-order .production-handed {
  padding: 2px var(--space-2);
  background: var(--color-ink);
  color: var(--color-shell);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-chip);
  text-transform: uppercase;
}

/* The current step's panel: its facts, what they read, and the acts, three columns that wrap. */
.hq-order .production-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-7);
  padding: var(--space-4);
  border-top: var(--hairline) solid var(--color-ink);
  background: var(--color-line-panel-quiet);
}

.hq-order .production-panel-facts {
  flex: 2 1 26rem;
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.hq-order .production-panel-reads {
  flex: 1 1 14rem;
  min-width: 0;
}

.hq-order .production-panel-acts {
  flex: 1 1 15rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.hq-order .production-panel-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hq-order .production-panel-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-strong);
}

.hq-order .production-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
}

.hq-order .production-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.hq-order .production-field-who {
  max-width: 16rem;
}

.hq-order .production-field-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.hq-order .production-they-read {
  margin: 0;
  font-size: var(--text-md);
}

.hq-order .production-say-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}

.hq-order .production-say {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.hq-order .production-note {
  width: 100%;
}

/* The hand-over: its label and the three ways on one row, a shipment's fields under them. */
.hq-order .production-handover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

.hq-order .production-handover-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.hq-order .production-handover .production-fields {
  width: 100%;
}

.hq-order .production-why {
  font-style: italic;
}

/* The sample, a row under the panel: its photos, what was decided, only Ativv's. */
.hq-order .production-sample {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: var(--hairline) solid var(--color-line);
}

.hq-order .production-sample-add {
  margin-left: auto;
  cursor: pointer;
}

.hq-order .production-sample-decide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.hq-order .production-photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hq-order .production-photo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: var(--hairline) solid var(--color-line);
}

.hq-order .production-asana {
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--text-meta);
}

.hq-order .item-run {
  font-size: var(--text-control-small);
  color: var(--color-muted);
}

/* **Items in no run** (an item added after release): its name, that it is in none, and a control
   per run that stages putting it there. */
.hq-order .production-unplaced-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.hq-order .production-unplaced {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .production-unplaced-name {
  font-weight: var(--weight-strong);
}

/* ---- The sheets (docs/decisions.md, 12 Oct 2026, "Where an order stands, built", (8)) ---- */

/* **A segmented choice**: a row of mono capitals in one ink rim, the chosen one filled. The sheets'
   choices and the hand-over's, in place of the small mono buttons beside the sentence-case ones.
   Each choice carries its own rim, overlapping its neighbour's by a hairline, so a row that wraps
   in a narrow column still lines up (13 Oct: the hand-over's chips and border fell apart when it
   wrapped under one rim). */
.hq-order .seg {
  display: inline-flex;
  flex-wrap: wrap;
  justify-self: start;
  align-self: flex-start;
  width: fit-content;
  padding: 0 0 var(--hairline) var(--hairline);
}

.hq-order .seg button {
  margin: 0 0 calc(-1 * var(--hairline)) calc(-1 * var(--hairline));
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--color-ink);
  background: var(--color-shell);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.hq-order .seg button[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-shell);
}

.hq-order .sheet {
  display: grid;
  gap: var(--space-3);
}

.hq-order .sheet-head {
  margin: var(--space-3) 0 0;
  padding-bottom: var(--space-1);
  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);
}

.hq-order .sheet-rows {
  display: grid;
}

.hq-order .sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-rule);
}

.hq-order .sheet-row-open {
  align-items: start;
  background: var(--color-line-panel-quiet);
}

.hq-order .sheet-row-stacked {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  border-bottom: 0;
}

.hq-order .sheet-row-stacked > .production-link {
  align-self: flex-start;
}

.hq-order .sheet-pick {
  width: auto;
  min-width: 12rem;
}

.hq-order .sheet-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.hq-order .sheet-check {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.hq-order .sheet-check > label {
  justify-self: stretch;
}

.hq-order .sheet-met {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  background: var(--color-ink);
  color: var(--color-shell);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
}

.hq-order .sheet-force {
  padding: var(--space-1) var(--space-3);
  border: var(--hairline) dashed var(--color-ink);
  background: var(--color-shell);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.hq-order .sheet-force[aria-pressed="true"] {
  border-style: solid;
  background: repeating-linear-gradient(135deg, var(--color-line-hatch) 0 2px, transparent 2px 6px);
}

.hq-order textarea.sheet-field,
.hq-order input.sheet-field {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--color-ink);
  background: var(--color-shell);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
}

.hq-order .sheet-reads {
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--color-line);
  background: var(--color-line-panel-quiet);
}

.hq-order .sheet-reads p {
  margin: 0;
}

.hq-order .sheet-says {
  margin: 0 auto 0 0;
  align-self: center;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .sheet .field-row {
  grid-template-columns: minmax(0, 1fr);
}

.hq-order .sheet .field-label {
  display: none;
}

@media (max-width: 36rem) {
  .hq-order .sheet-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* **Conversation** (docs/decisions.md, 10 Oct 2026, "The conversation on both order pages", (2)):
   the lines on plain paper, then the reply box at their foot, saying who it reaches, and the note
   box apart in the staff look. */
.hq-order .order-conversation .chat {
  padding: var(--space-2) 0 var(--space-6);
}

/* The boxes are the list's last line: as wide as the paper, and scrolled into view above the tray
   when the tab opens. The editor's room is kept before its code has loaded, so the page does not
   move under the newest line as it arrives. */
.hq-order .chat-compose {
  align-self: stretch;
  scroll-margin-bottom: calc(var(--space-14) + var(--space-8));
}

.hq-order .chat-compose .comment-editor {
  min-height: 10.5rem;
}

.hq-order .chat-reply {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--hairline) solid var(--color-line);
}

.hq-order .chat-reply-to {
  margin: 0;
  max-width: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.hq-order .chat-reply-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  max-width: none;
  font-size: var(--text-control-small);
}

/* What the message's picture button attached, each with x to take it off: the customer's chips. */
.hq-order .chat-attached {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hq-order .chat-attached-file {
  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);
}

.hq-order .chat-attached-file button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 var(--space-1);
}

/* The note box: tinted on a dashed rule, its own words saying it stays inside. */
.hq-order .chat-reply-note {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: var(--hairline) dashed var(--color-note-rule);
  background: var(--color-note-ground);
}

.hq-order .chat-note-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  max-width: none;
  font-size: var(--text-control-small);
}

.hq-order .chat-note-mark {
  color: var(--color-note-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* The list's dot beside a customer who wrote last. */
.hq-orders .orders-dot {
  display: inline-block;
  width: var(--dot-size);
  height: var(--dot-size);
  margin-left: var(--space-2);
  border-radius: 50%;
  background: var(--color-ink);
  vertical-align: middle;
}

/* **Write down what they said, per option** (docs/decisions.md, 10 Oct 2026, "The conversation on
   both order pages", (6)): a quiet link under the proof's ask, opening a small form on the card —
   the three picks in the ask's own mono, their words, how it came. */
.hq-order .card-write-down {
  margin-top: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-label);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.hq-order .card-write-down:hover {
  color: var(--color-ink);
}

.hq-order .card-noting {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--hairline) solid var(--color-line);
}

.hq-order .card-noting-head {
  margin: 0;
  max-width: none;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
}

.hq-order .card-noting-picks,
.hq-order .card-noting-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ---- Overview (the canvas's Main.dc.html) ---- */

/* A section's title: the mono capitals, small and heavy, over an ink rule where it heads rows. */
.hq-order .overview-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .overview-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .overview-aside {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .overview-progress .progress-line {
  margin-top: var(--space-2);
}

/* Two columns: who has what and the items; beside them the Asana card. One column on a phone, the
   aside under the rest. */
.hq-order .overview-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-top: var(--space-7);
}

.hq-order .overview-main {
  display: flex;
  flex: 999 1 35rem;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.hq-order .overview-aside-column {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.hq-order .overview-more {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* Who has what: a party, what is on their plate, since when; an ink rule over the rows. */
.hq-order .who-has-what {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) minmax(5rem, 8rem);
  border-top: var(--rule-strong) solid var(--color-ink);
}

.hq-order .who-row {
  display: contents;
}

.hq-order .who-row > * {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-line);
}

.hq-order .who-name {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .who-since {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .who-row-nothing > .who-name,
.hq-order .who-row-nothing > .who-what {
  color: var(--color-muted);
  font-weight: var(--weight-regular);
}

/* Their words waiting for ours: our row's first item, the way to Messages. */
.hq-order .who-reply {
  margin-right: var(--space-1);
  font-weight: var(--weight-strong);
}

.hq-order .who-asana {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-right: var(--space-2);
}

@media (max-width: 36rem) {
  .hq-order .who-has-what {
    grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr);
  }

  .hq-order .who-since {
    display: none;
  }
}

/* The items: a square with the option's letter, the name and where its design stands, the run. */
.hq-order .overview-items {
  border-top: var(--rule-strong) solid var(--color-ink);
}

.hq-order .overview-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-line);
}

.hq-order .overview-item-letter {
  display: inline-flex;
  align-items: flex-start;
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  padding: 3px 5px;
  border: var(--hairline) solid var(--color-line);
  background: var(--color-line-panel-quiet);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-strong);
}

.hq-order .overview-item-words {
  flex: 1 1 14rem;
  margin: 0;
}

.hq-order .overview-item-run {
  padding: 2px var(--space-2);
  background: var(--color-ink);
  color: var(--color-shell);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* The Asana card: its columns and fields as Asana says them, label and value. */
.hq-order .overview-card-fields {
  display: grid;
  grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr);
  gap: 2px var(--space-3);
  margin: 0;
}

.hq-order .overview-card-fields dt {
  padding-top: 3px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .overview-card-fields dd {
  margin: 0;
  font-weight: var(--weight-strong);
}

.hq-order .overview-card-says {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .overview-card-apart {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  font-size: var(--text-label);
}

/* ---- Details (the canvas's Details.dc.html) ---- */

/* One stage's section: a native disclosure, its head the line's own mark for the stage (13 Oct:
   one visual language with the Overview, at the line's size, the current a step's), its name in
   the mono capitals and a short word; unfolded, its checks with their marks, then the rows, label ·
   value · who and when · its control. */
.hq-order .details-section {
  margin-top: var(--space-6);
}

.hq-order .details-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--rule-strong) solid var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.hq-order .details-head::-webkit-details-marker {
  display: none;
}

/* The mark: a box the current size wide, so every title starts at one place. */
.hq-order .details-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--line-node-step-current) + 2 * var(--line-ring-step));
  height: calc(var(--line-node-step-current) + 2 * var(--line-ring-step));
}

.hq-order .details-mark .line-node {
  width: var(--line-node);
  height: var(--line-node);
  font-size: var(--text-mono-chip);
}

.hq-order .details-mark .line-node-current,
.hq-order .details-mark .line-node-held,
.hq-order .details-mark .line-node-following,
.hq-order .details-mark .line-node-settling {
  width: var(--line-node-step-current);
  height: var(--line-node-step-current);
  box-shadow: 0 0 0 var(--line-ring-step) var(--color-rule);
}

.hq-order .details-mark .line-asana {
  top: -8px;
  right: -13px;
}

/* The checks, as they hang under the stage on the line, here in a row. */
.hq-order .details-checks {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-rule);
  font-size: var(--text-quiet);
}

.hq-order .details-ahead > .details-head {
  border-bottom-color: var(--color-line);
}

.hq-order .details-ahead .details-title {
  color: var(--color-muted);
}

.hq-order .details-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .details-aside {
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* **A forced or unrecorded check marks its own row** (Reed's second look, 13 Oct 2026): before the
   label, the line's hatched square for forced and its dashed one for not recorded here
   (progress-line.css, the checks under a stage). */
.hq-orders .details-check-mark {
  display: inline-block;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin-right: var(--space-2);
  vertical-align: baseline;
}

.hq-orders .details-check-forced {
  border: 1px solid var(--color-ink);
  background: repeating-linear-gradient(
    135deg,
    var(--color-shell) 0 2px,
    var(--color-line-hatch) 2px 4px
  );
}

.hq-orders .details-check-not-recorded {
  border: 1px dashed var(--color-line-hatch);
}

/* The row an address sent the person to (the header's Not visible), marked for a moment. */
.hq-order .details-row-sent {
  animation: details-row-sent 1.6s ease-out 1;
}

@keyframes details-row-sent {
  from {
    background: var(--color-line-panel);
  }
  to {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hq-order .details-row-sent {
    animation: none;
    outline: var(--hairline) dashed var(--color-line-hatch);
  }
}

/* The same columns as a field's row, so a row here and a field row line up: the label one ruled
   pitch tall, the cell at least as tall. */
.hq-order .details-row {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 0 var(--space-5);
  align-items: start;
  padding: var(--space-1) 0 var(--space-2);
  border-bottom: var(--hairline) solid var(--color-rule);
}

.hq-order .details-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-width: 0;
  min-height: var(--ruled-pitch);
}

.hq-order .details-cell > a {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .details-rows .field-row {
  padding: var(--space-1) 0 var(--space-2);
  border-bottom: var(--hairline) solid var(--color-rule);
}

.hq-order .details-quiet {
  color: var(--color-muted);
}

.hq-order .details-chip {
  padding: 2px var(--space-2);
  background: var(--color-line-panel);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.hq-order .details-asana {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .details-people,
.hq-order .details-attach {
  flex: 1 1 100%;
}

/* The People act's own section head is this row's label here. */
.hq-order .details-people .order-section {
  padding-top: 0;
  border-top: 0;
}

.hq-order .details-people .order-section > h2 {
  display: none;
}

.hq-order .details-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-label);
}

.hq-order .details-proofs {
  align-items: flex-start;
}

@media (max-width: 36rem) {
  .hq-order .details-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}

/* ---- Moving the stage: the dialog and its checks ---- */

.stage-move {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stage-move-says {
  margin: 0;
  color: var(--color-muted);
}

.stage-move-refused {
  margin: 0;
  color: var(--color-danger);
}

.checks-to-fill {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-to-fill {
  padding-top: var(--space-2);
  border-top: var(--rule-strong) solid var(--color-ink);
}

.check-to-fill-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}

.check-to-fill-name {
  font-weight: var(--weight-strong);
}

.check-to-fill-state {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.design-to-fill {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.design-to-fill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.hq-order .production-line {
  margin-bottom: var(--space-6);
}

/* Linking a card by pasting its address: the box and Link on one line where there is room. */
.hq-order .link-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
}

.hq-order .link-card .text-input {
  flex: 1 1 14rem;
}

/* On Details, the card's *Link a card* at the row's end, as *Open the card ↗* is; the paste box it
   opens, the compact box and *Link*, on the row's line. */
.hq-order .details-cell > .button-tool:last-child {
  margin-left: auto;
}

.hq-order .link-card-line {
  flex: 1 1 18rem;
  align-items: center;
}

/* In the stage dialog a check's own head names it, so its field row is the control alone. */
.check-to-fill .field-row {
  grid-template-columns: minmax(0, 1fr);
}

.check-to-fill .field-label {
  display: none;
}

@media (max-width: 36rem) {
  .hq-order .tab {
    padding: var(--space-2) var(--space-3);
  }
}

/* ---- The order's shape on Items (docs/decisions.md, 13 Oct 2026, "D3…"; the design's *Items, with
   fields*) ---- */

/* **A group**: a kit is bracketed, an ink rule down its left and a hairline round it, its heading and
   what it collects above its items; an item alone is a section of its own with no bracket. */
.hq-order .item-group + .item-group {
  margin-top: var(--space-8);
}

.hq-order .item-kit {
  padding: var(--space-3) var(--space-5) var(--space-2);
  border: var(--hairline) solid var(--color-ink);
  border-left-width: var(--rule-heavy);
}

.hq-order .item-kit .item {
  padding: var(--space-4) 0;
}

.hq-order .item-kit .item + .item {
  margin-top: 0;
  border-top: var(--hairline) solid var(--color-line);
}

.hq-order .item-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.hq-order .item-group-word,
.hq-order .item-collects-word {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .item-group-word {
  font-weight: var(--weight-strong);
}

.hq-order .item-group-name {
  margin: 0;
  font-size: var(--text-lead);
  font-weight: var(--weight-strong);
}

.hq-order .item-group-count {
  font-size: var(--text-meta);
}

/* *Ungroup* and *Group with…*: a quiet outlined control at the head's end, pressed (filled) while
   what it staged waits in the tray. */
.hq-order .item-group-ungroup {
  margin-left: auto;
  padding: var(--space-1) var(--space-3);
  border: var(--hairline) solid var(--color-line);
  background: none;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.hq-order .item-group-ungroup:hover,
.hq-order .item-group-ungroup:focus-visible {
  border-color: var(--color-ink);
}

.hq-order .item-group-with {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .item-group-choices {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* **What a group collects**: a quiet band of chips, each key in mono with its ×, a size chip on the
   panel grey, *+ Field* at the band's end. */
.hq-order .item-collects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--color-line);
  background: var(--color-line-panel-quiet);
}

.hq-order .item-collects-word {
  margin-right: var(--space-1);
  color: var(--color-meta);
}

/* **A price, in mono** (the polish round, S5): `ativv_types::price::card`'s words, whole dollars where
   whole, as the artboards set a price in a row. */
.hq-order .price-words {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

/* In the pack table's column, one line, as the artboard sets "$36 · from $32 at 24": the mono words
   are wider than the sans ones were, and wrapped after "from" in a column sized for those. */
.hq-order td.price-words {
  white-space: nowrap;
}

/* The pack table's picture column: the thumbnail alone, the row's first cell after the tick. */
.hq-order .tree-table-thumb {
  width: var(--thumb-size);
}

/* The counts under an answer chip, in the meta line ("M 12 · L 12"). */
.hq-order .tree-answer-counts {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .item-collects-none,
.hq-order .item-collects-derived {
  color: var(--color-meta);
  font-size: var(--text-meta);
}

.hq-order .item-collects-derived {
  font-style: italic;
}

.hq-order .item-collects-add {
  margin-left: auto;
}

.hq-order .item-collects-picker,
.hq-order .item-blank-form {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

.hq-order .item-collects-picker .text-input,
.hq-order .item-blank-form .text-input {
  flex: 1 1 14rem;
  max-width: 22rem;
}

/* **The blank and its run on the item's head**: "on **generic tank** · AXS–A4XL". */
.hq-order .item-blank {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--color-meta);
  font-size: var(--text-meta);
}

.hq-order .item-blank b {
  color: var(--color-ink);
}

.hq-order .item-blank-edit {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-meta);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.hq-order .item-blank-run {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-meta);
}

/* *Add a size* (decision 4): the sizes this item adds to its run, as Collects' chips, beside the form. */
.hq-order .item-blank-added {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-meta);
}

.hq-order .item-blank-added-label,
.hq-order .item-blank-added-none {
  color: var(--color-meta);
}

/* **The option check** (R13): ✓ a small filled ink disc, ! the soft yellow with a darker rim; the
   closed card's line, and *Fields per garment*'s heading and rows in a grid of mark, key, words. */
.hq-order .check-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-shell);
  font-size: 9px;
  font-weight: var(--weight-strong);
  line-height: 1;
}

.hq-order .check-flag {
  border: var(--hairline) solid var(--color-flag-rule);
  background: var(--color-flag);
  color: var(--color-flag-ink);
  font-size: 10px;
}

.hq-order .check-line {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.hq-order .check-line .check-mark {
  align-self: center;
}

.hq-order .check-more {
  display: block;
  margin-top: 2px;
  font-size: var(--text-meta);
}

.hq-order .check-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.hq-order .check-title {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .check-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-meta);
  font-size: var(--text-meta);
}

.hq-order .check-hide,
.hq-order .check-collect {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-meta);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.hq-order .check-hide {
  color: var(--color-meta);
}

.hq-order .check-row {
  display: grid;
  grid-template-columns: 20px minmax(5rem, auto) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  padding: 3px 0;
  font-size: var(--text-meta);
}

.hq-order .check-key {
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
}

.hq-order .check-none {
  margin: 0;
  font-size: var(--text-meta);
}

/* **The kit's other items, offered with a staged one** (R21): a quiet line of picks under the ask. */
.hq-order .card-kit-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-meta);
}

/* **A kit's heading on the Overview and Details** (R21): the mono word and the kit's name over its
   items, which the Overview indents under it. */
.hq-order .overview-kit,
.hq-order .details-kit {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-quiet);
  font-weight: var(--weight-strong);
}

.hq-order .overview-kit-word,
.hq-order .details-kit-word {
  color: var(--color-meta);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .overview-item-in-kit {
  padding-left: var(--space-4);
  border-left: var(--rule-heavy) solid var(--color-ink);
}

/* **The roster sheet** (docs/decisions.md, 13 Oct 2026, "D3…", (4) to (9), (14); the design's *Roster
   sheet* and *Paste into the roster*): a version bar on the line panel's grey, mono labels, a table
   per group with hairline rows, the soft yellow for what warns and black chips for what stops
   Confirm, dashed boxes for what is not chosen yet. */
.hq-order .roster-versions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-line-panel);
}

.hq-order .roster-version,
.hq-order .roster-meta-word {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .roster-version {
  font-weight: 800;
}

.hq-order .roster-meta-word {
  color: var(--color-muted);
}

.hq-order .roster-meta {
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .roster-flag,
.hq-order .roster-stop,
.hq-order .roster-unsaved {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-meta);
  white-space: nowrap;
}

.hq-order .roster-flag {
  background: var(--color-flag);
  color: var(--color-flag-ink);
}

.hq-order .roster-stop {
  background: var(--color-ink);
  color: var(--color-shell);
}

.hq-order .roster-unsaved {
  border: var(--hairline) dashed var(--color-field-line);
  color: var(--color-meta);
}

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

.hq-order .roster-upload {
  position: relative;
  overflow: hidden;
}

.hq-order .roster-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.hq-order .roster-looks {
  margin-left: auto;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .roster-leaving,
.hq-order .roster-moved,
.hq-order .item-roster-warning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--color-flag-rule);
  background: var(--color-flag);
  color: var(--color-flag-ink);
  font-size: var(--text-quiet);
}

.hq-order .item-roster-warning {
  margin: var(--space-2) 0;
}

.hq-order .roster-lost,
.hq-order .roster-paste-refusal {
  color: var(--color-meta);
  font-size: var(--text-quiet);
}

.hq-order .roster-group-items {
  margin-left: auto;
  text-align: right;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.hq-order .roster-table-wrap {
  position: relative;
  margin-top: var(--space-2);
  overflow-x: auto;
}

.hq-order .roster-qty input {
  width: 3.5rem;
}

.hq-order .roster-qty input,
.hq-order .roster-input {
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
}

.hq-order .roster-qty input {
  font-family: var(--font-mono);
}

.hq-order .roster-cell {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 7rem;
}

.hq-order .roster-input {
  width: 100%;
  min-width: 4rem;
  padding: 2px var(--space-1);
}

.hq-order .roster-input-missing {
  outline: var(--hairline) dashed var(--color-line-hatch);
}

.hq-order .roster-input::placeholder {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

.hq-order .roster-blank-toggle {
  flex: none;
  padding: 0 var(--space-1);
  border: var(--hairline) solid var(--color-line);
  background: var(--color-shell);
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
}

.hq-order .roster-blank-toggle[aria-pressed="true"] {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.hq-order .roster-removed {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
  font-style: italic;
}

.hq-order .roster-size-missing .roster-select,
.hq-order .roster-select-unpicked {
  border-color: var(--color-field-line);
  border-style: dashed;
  color: var(--color-muted);
}

.hq-order .roster-table td.roster-flags-cell {
  white-space: normal;
}

.hq-order .roster-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.hq-order .roster-legend,
.hq-order .roster-youth,
.hq-order .roster-pairs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-quiet);
}

.hq-order .roster-missing-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border: var(--hairline) dashed var(--color-line-hatch);
  font-family: var(--font-mono);
  font-size: var(--text-mono-number-sm);
}

.hq-order .roster-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.hq-order .roster-totals {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-2);
  color: var(--color-meta);
  font-size: var(--text-meta);
}

.hq-order .roster-total b {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

.hq-order .roster-grid {
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  max-width: 100%;
  margin-top: var(--space-2);
  border: var(--hairline) solid var(--color-line-later);
}

.hq-order .roster-grid-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
  padding: 6px var(--space-2);
  border-left: var(--hairline) solid var(--color-line);
}

.hq-order .roster-grid-cell:first-child {
  border-left: 0;
}

.hq-order .roster-grid-size {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .roster-grid-cell input {
  width: 40px;
  height: 30px;
  border: var(--hairline) solid var(--color-line-later);
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
  text-align: center;
}

.hq-order .roster-grid-number {
  padding-top: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.hq-order .roster-grid-total {
  background: var(--color-line-panel);
}

.hq-order .roster-grid-unsized {
  border-style: dashed;
}

.hq-order .roster-remove {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* The paste step: what was pasted beside the mapping, as the design draws them. */
.hq-order .roster-paste {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.hq-order .roster-paste-head,
.hq-order .roster-paste-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.hq-order .roster-paste-actions {
  justify-content: flex-end;
}

.hq-order .roster-paste-into,
.hq-order .roster-paste-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hq-order .roster-paste-text textarea {
  min-height: 12rem;
  padding: var(--space-2);
  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-number);
}

.hq-order .roster-mapping {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
}

.hq-order .roster-mapping-pasted {
  flex: 1 1 22rem;
  min-width: 0;
}

.hq-order .roster-mapping-choices {
  display: flex;
  flex: 1 1 28rem;
  flex-direction: column;
  min-width: 0;
}

.hq-order .roster-pasted {
  margin: var(--space-1) 0 0;
  padding: var(--space-3);
  overflow-x: auto;
  border: var(--hairline) solid var(--color-line);
  background: var(--color-line-panel-quiet);
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
  line-height: 1.7;
  white-space: pre;
  tab-size: 12;
}

.hq-order .roster-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 11rem;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-rule);
  font-size: var(--text-quiet);
}

.hq-order .roster-map-from {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

.hq-order .roster-map-exact {
  color: var(--color-muted);
}

.hq-order .roster-mapping-choices > .roster-meta-word {
  margin: var(--space-4) 0 var(--space-1);
}

.hq-order .roster-mapping-choices > .roster-meta-word:first-child {
  margin-top: 0;
}

/* Items' subject bar: where the roster stands and its door. */
.hq-order .roster-door {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}


/* **The counts on the pages** (docs/decisions.md, 13 Oct 2026, "D3…", (8); the design's *Counts on
   the pages*): an item's count in mono beside its name, the confirmed count in ink and the draft's
   beside it; a count that is only the draft's, before any confirm, in the muted grey it is marked
   with. */
.hq-order .item-count,
.hq-order .details-count,
.hq-order .production-run-pieces {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
  white-space: nowrap;
}

.hq-order .sheet-kit-items {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

.hq-order .item-count-draft,
.hq-order .details-count-draft {
  color: var(--color-muted);
}

.hq-order .item-count-printed {
  color: var(--color-muted);
}

.hq-order .details-quantities {
  display: grid;
  gap: var(--space-1);
}

.hq-order .details-quantities p {
  margin: 0;
}

.hq-order .details-quantities-head {
  font-weight: 700;
}

.hq-order .details-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.hq-order .details-quantities-foot,
.hq-order .check-to-fill-roster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.hq-order .details-roster {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

/* **The roster's confirm** (the design's *A change after confirm*): *Confirm r3 …* at the end of the
   version bar, and the confirm step in the sheet's place, a grid of labelled rows. */
.hq-order .roster-moved-since {
  color: var(--color-ink);
}

.hq-order .roster-confirm-step {
  display: grid;
  gap: var(--space-3);
  max-width: 44rem;
  margin-top: var(--space-4);
}

.hq-order .roster-confirm-title {
  margin: 0;
  font-size: var(--text-lead);
}

.hq-order .roster-confirm-row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-rule);
}

.hq-order .roster-confirm-row:has(.text-input),
.hq-order .roster-confirm-row:has(input) {
  grid-template-columns: minmax(0, 1fr);
}

.hq-order .roster-confirm-counts,
.hq-order .roster-confirm-line {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

.hq-order .roster-confirm-reads {
  align-items: start;
}

.hq-order .roster-confirm-reads .roster-confirm-line {
  grid-column: 2;
}

.hq-order .roster-released {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--color-ink);
  color: var(--color-ink);
  font-size: var(--text-quiet);
}

.hq-order .roster-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Released: what would edit the roster goes, and what is shown is read. */
.hq-order .roster-fieldset:disabled .roster-blank-toggle,
.hq-order .roster-fieldset:disabled .button-tool {
  display: none;
}

.hq-order .roster-fieldset:disabled select,
.hq-order .roster-fieldset:disabled input {
  border-color: transparent;
  background: transparent;
  color: var(--color-ink);
  appearance: none;
}

/* **A kit is one control on the release sheet** (the design's *Groups across the pages*): its row
   names the kit and its items' counts, with *Split…*; a split kit's heading over its items' rows. */
.hq-order .sheet-row-stream {
  grid-template-columns: minmax(0, 1fr) auto;
}

.hq-order .sheet-row-kit b {
  margin-right: var(--space-1);
}

.hq-order .sheet-split {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-meta);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.hq-order .sheet-kit-split {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

@media (max-width: 40rem) {
  .hq-order .roster-confirm-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hq-order .roster-confirm-reads .roster-confirm-line {
    grid-column: 1;
  }

  .hq-order .roster-confirm {
    margin-left: 0;
  }
}

/* **The quote** (docs/decisions.md, 13 Oct 2026, "D3…", (10); the design's *Counts on the pages*):
   Details' Quote row in the Quantities row's shape, a version's lines as a small ruled table with its
   amounts in mono to the right, and the sheet's lines as boxes on the same rules. */
.hq-order .details-quote-covers {
  color: var(--color-ink);
}

.hq-order .quote-lines-read {
  width: 100%;
  max-width: 36rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.hq-order .quote-lines-read td {
  padding: 2px var(--space-2) 2px 0;
  border-bottom: var(--hairline) solid var(--color-rule);
  vertical-align: baseline;
}

.hq-order .quote-lines-read tfoot td {
  border-bottom: 0;
  font-weight: 700;
}

.hq-order .quote-line-each,
.hq-order .quote-line-amount,
.hq-order .quote-computed {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
  white-space: nowrap;
}

.hq-order .quote-line-each {
  color: var(--color-muted);
}

.hq-order .quote-line-amount {
  text-align: right;
}

.hq-order .quote-sheet {
  display: grid;
  gap: var(--space-3);
}

.hq-order .quote-check {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}


.hq-order .quote-problem {
  margin: 0;
  color: var(--color-danger);
}

.hq-order .quote-accept-lines {
  margin: 0;
  padding-left: var(--space-4);
}

/* **The quote sheet** (`quote.rs`; the handoff's *Quote sheet*, the fourth polish round): the version
   bar, the lines on EditTable's rows form, the total, and the two reads side by side. */
.hq-order .quote-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-box);
  background: var(--color-line-panel-quiet);
}

.hq-order .quote-bar-version {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .quote-bar-words {
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .quote-bar-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.hq-order .quote-explain {
  max-width: none;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* The line's name in 600, read in place; the node it names beneath it, quiet. */
.hq-order .quote-line-name .text-input-control {
  padding-inline: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

.hq-order .quote-line-quiet .quote-line-name .text-input-control {
  color: var(--color-muted);
}

.hq-order .quote-line-name .quote-node {
  height: auto;
  padding: 0 var(--space-1);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--text-meta);
}

.hq-order .quote-basis,
.hq-order .quote-status-words {
  color: var(--color-muted);
  font-size: var(--text-meta);
  line-height: var(--control-height-compact);
}

.hq-order .quote-basis {
  line-height: 1.4;
  padding-top: calc(var(--space-1) + 7px);
}

/* A count and a price read in place sit at the end, as the column's words do. */
.hq-order .quote-table .edit-cell-end .text-input-control {
  text-align: right;
}

.hq-order .quote-was {
  display: block;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-number-sm);
}

.hq-order .quote-amount {
  display: inline-block;
  line-height: var(--control-height-compact);
  white-space: nowrap;
}

.hq-order .quote-amount-none {
  color: var(--color-muted);
}

/* "typed", "typed · wins": the flag's tag, a line a person stands behind. */
.hq-order .quote-tag {
  display: inline-block;
  margin-top: calc((var(--control-height-compact) - 1.5em) / 2);
  padding: 1px var(--space-2);
  border: var(--hairline) solid var(--color-flag-rule);
  border-radius: var(--radius-chip);
  background: var(--color-flag);
  color: var(--color-flag-ink);
  font-size: var(--text-meta);
  white-space: nowrap;
}

.hq-order .quote-add-row td {
  padding-block: var(--space-2);
}

.hq-order .quote-add-row td > * {
  vertical-align: middle;
}

.hq-order .quote-add-row td > .button:last-child {
  margin-left: var(--space-3);
}

.hq-order .quote-total-row > * {
  padding-block: var(--space-3);
  border-bottom: 0;
  font-weight: var(--weight-strong);
}

.hq-order .quote-table .quote-total-row th {
  font-weight: var(--weight-strong);
}

.hq-order .quote-reads {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
}

.hq-order .quote-read {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.hq-order .quote-read-head {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .quote-read-box {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--color-line);
  background: var(--color-line-panel-quiet);
}

.hq-order .quote-read-sum {
  margin: 0;
  font-weight: var(--weight-strong);
}

.hq-order .quote-read-words {
  max-width: none;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .quote-terms {
  display: grid;
  gap: var(--space-2);
}

@media (max-width: 40rem) {
  .hq-order .quote-reads {
    grid-template-columns: minmax(0, 1fr);
  }

  .hq-order .quote-bar-tools {
    margin-left: 0;
  }
}


.hq-order .roster-confirm-quote {
  color: var(--color-ink);
}

/* **A field's row on a phone** (the verification of B1 and B2, its Observation 4): the label above the
   value, as a Details row is, and the line free to wrap, so "release is waiting on this · change"
   moves under the value rather than past the screen's edge, where *change* could not be pressed. */
@media (max-width: 36rem) {
  .hq-order .field-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .hq-order .field-line {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--ruled-pitch);
    white-space: normal;
  }

  .hq-order .field-line-end {
    margin-left: auto;
  }
}

/* ---- Items as the tree (`docs/decisions.md`, 15 Oct 2026, "The order as a tree…", (18); the
   handoff's frames *Items, the season kit* and *Items, the One pack*; built to `ItemsTree` and
   `ItemsPack` in the second polish round) ---- */

.hq-order .tree {
  display: grid;
  gap: var(--space-4);
}

/* Small words beside a control or under a name: the artboards' `.w`. */
.hq-order .tree-meta {
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* **A group** (`ativv_ui::Fold`, framed here): a hairline in ink with the heavy rule at its left edge;
   a group inside a group is an inset box on the same hairline, its name a size smaller. */
.hq-order .tree-group {
  border: var(--hairline) solid var(--color-ink);
  border-left-width: var(--rule-heavy);
  background: var(--color-shell);
}

.hq-order .tree-group .tree-group {
  margin: var(--space-3) var(--space-4);
}

.hq-order .tree-group-name {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.hq-order .tree-word {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-right: var(--space-2);
}

/* A verb: underlined words in the meta size, no box. */
.hq-order .tree-verb {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-meta);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  white-space: nowrap;
}

/* *More…* in the verbs' size, beside them on a row (`RowActions` draws it in the quiet buttons'). */
.hq-order .row-actions-summary {
  font-size: var(--text-meta);
}

.hq-order .tree-verb-quiet {
  color: var(--color-muted);
}

.hq-order .tree-verb-small {
  font-size: var(--text-mono-number-sm);
}

.hq-order .tree-verb.item-staged,
.hq-order .tree-factory.item-staged {
  outline: var(--hairline) dashed var(--color-ink);
  outline-offset: var(--space-1);
}

/* *Collects* and the needs reading, each one line under the head, ruled under. */
.hq-order .tree-group .item-collects {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: var(--hairline) solid var(--color-line);
  background: none;
  font-size: var(--text-meta);
}

.hq-order .tree-group .item-collects-word,
.hq-order .tree-reads-word {
  margin-right: var(--space-1);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .tree-group .item-collects-picker {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--hairline) solid var(--color-line);
}

/* **A lone item's Collects on its row** (the staging look of 18 Oct, (5)): the group's strip, drawn
   under the item's own columns (past its tick and thumbnail), with no box of its own. */
.hq-order .tree-item-collects {
  --tree-item-collects-inset: calc(var(--space-5) + var(--thumb-size-large) + 2 * var(--space-4));
}

.hq-order .tree-item-collects .item-collects {
  margin: 0 0 var(--space-3) var(--tree-item-collects-inset);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-meta);
}

.hq-order .tree-item-collects .item-collects-word {
  margin-right: var(--space-1);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .tree-item-collects .item-collects-picker {
  margin: 0 0 var(--space-3) var(--tree-item-collects-inset);
}

/* **A group whose items went to the customer one by one** (the staging look of 18 Oct, (6)): the
   line under its head that says they see them apart until the group is offered. */
.hq-order .tree-group-apart {
  max-width: none;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--hairline) solid var(--color-line);
  color: var(--color-meta);
  font-size: var(--text-meta);
}

/* An item in a group reads what the group at the top of its branch collects, in the open item. */
.hq-order .tree-open-collected {
  margin: 0;
}

.hq-order .tree-reads {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--hairline) solid var(--color-line);
  color: var(--color-meta);
  font-size: var(--text-meta);
}

.hq-order .tree-children {
  display: grid;
}

.hq-order .tree-empty {
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

/* The price switch and the shown switch: segmented rows in the smallest mono, square. */
.hq-order .tree-price-switch,
.hq-order .tree-shown-switch {
  align-self: center;
}

.hq-order .tree-price-switch button,
.hq-order .tree-shown-switch button {
  padding: var(--space-1) var(--space-3);
  border-radius: 0;
  font-size: var(--text-mono-chip);
}

.hq-order .tree-price-switch button:disabled {
  cursor: default;
}

.hq-order .tree-price-editor,
.hq-order .tree-move,
.hq-order .tree-decoration-add {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2) var(--space-3);
}

.hq-order .fold-under .tree-price-editor,
.hq-order .fold-under .item-renaming {
  padding: var(--space-2) 0 0;
}

.hq-order .tree-move select {
  margin-left: var(--space-2);
}

/* **An item's row** (`ItemsTree`'s `.leaf`): tick and letter · thumbnail · the item · its needs · the
   intended factory or what the customer reads · its verbs. */
.hq-order .tree-item {
  border-top: var(--hairline) solid var(--color-rule);
}

.hq-order .tree-children > .tree-item:first-child {
  border-top: 0;
}

/* An item on its own: under an ink rule, its row flush with the page. */
.hq-order .tree > .tree-item {
  border-top: var(--hairline) solid var(--color-ink);
}

.hq-order .tree-item-line {
  --tree-acts-width: 15rem;
  display: grid;
  grid-template-columns:
    var(--space-5) var(--thumb-size-large) minmax(0, 1.2fr) minmax(0, 1.7fr)
    minmax(0, 0.8fr) var(--tree-acts-width);
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-4);
}

.hq-order .tree > .tree-item > .tree-item-line {
  padding-inline: 0;
}

.hq-order .tree-item-tick {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}

.hq-order .tree-tick {
  margin: var(--space-1) 0 0;
}

.hq-order .tree-letter {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
  font-weight: var(--weight-strong);
}

.hq-order .tree-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.hq-order .tree-item-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-control);
  font-weight: var(--weight-strong);
  text-align: left;
  cursor: pointer;
}

.hq-order .tree-item-name:hover {
  text-decoration: underline;
}

.hq-order .tree-item-blank,
.hq-order .tree-item-price {
  margin: var(--space-1) 0 0;
  color: var(--color-meta);
  font-size: var(--text-meta);
}

.hq-order .tree-item-price {
  color: var(--color-muted);
}

.hq-order .tree-item-decorations {
  margin: var(--space-1) 0 0;
}

.hq-order .tree-item-decorations:empty {
  display: none;
}

.hq-order .tree-item-state {
  font-size: var(--text-meta);
}

.hq-order .tree-item-factory {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}

/* What the customer reads of an item not on a proof yet: the words, pressed to change, as
   `ItemsTree` writes "the customer reads “Coming”"; filled while the change is staged, as every staged
   control is. */
.hq-order .tree-item-state .item-label,
.hq-order .tree-open-chips .item-label {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  white-space: normal;
}


.hq-order .tree-item-acts {
  display: flex;
  justify-content: end;
}

/* The verbs' column is one width on every row, so the columns before it line up down a group
   whatever a row's verbs are (an item not yet offered adds *+ To proof*); a row with more than fit
   wraps them to a second line, right-aligned. The table's verbs keep to one line, their column
   shrinking to fit them. */
.hq-order .tree-item-acts .row-actions {
  gap: var(--space-2) var(--space-3);
}

.hq-order .tree-item-line .tree-item-acts .row-actions {
  flex-wrap: wrap;
}

/* The intended factory on a row: its name in words, the select being the open item's. */
.hq-order .tree-factory-name {
  font-size: var(--text-quiet);
}

.hq-order .tree-factory-name.item-staged {
  padding: 0 var(--space-1);
}

.hq-order .tree-item-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  padding: var(--space-2) 0 0;
}

/* On a row, a picker (*Move…*, *Group with…*) is a line of its own under the row's lines. */
.hq-order .tree-item-line > .tree-item-picker {
  grid-column: 3 / -1;
  padding-top: 0;
}

/* **An item open** (`ItemsTree`'s open jersey): framed in ink where its row was; the picture on the
   lattice at the left, the facts at the right, the needs list full width beneath. */
.hq-order .tree-open {
  display: grid;
  grid-template-columns: var(--item-open-picture) minmax(0, 1fr);
  margin: var(--space-3) var(--space-4);
  border: var(--rule-tab) solid var(--color-ink);
  background: var(--color-shell);
}

.hq-order .tree > .tree-item > .tree-open {
  margin-inline: 0;
}

.hq-order .tree-open-picture {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  min-height: var(--item-open-picture-height);
  padding: var(--space-3);
  border-right: 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(--space-6) var(--space-6);
}

.hq-order .tree-open-picture .garment-view {
  width: 100%;
}

.hq-order .tree-open-artwork {
  display: block;
  max-width: 100%;
  max-height: var(--item-open-picture-height);
  object-fit: contain;
}

.hq-order .tree-open-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
}

.hq-order .tree-open-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.hq-order .tree-open-chips,
.hq-order .tree-open-name-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .tree-open-name .item-name-edit {
  font-size: var(--text-lead);
  font-weight: var(--weight-strong);
}

.hq-order .tree-open-close {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-meta);
  cursor: pointer;
}

.hq-order .tree-open-close:hover {
  color: var(--color-ink);
}

.hq-order .tree-open-history {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .tree-open-spec {
  color: var(--color-meta);
  font-size: var(--text-meta);
}

.hq-order .tree-open-spec .tree-decorations,
.hq-order .tree-open-spec .tree-decorations-spec {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-right: var(--space-2);
}

.hq-order .tree-open-spec .tree-decoration-add {
  display: inline-flex;
  margin-top: var(--space-1);
}

.hq-order .tree-open-spec .tree-decoration-add .text-input {
  width: var(--item-open-placement);
}

.hq-order .tree-open-facts .rail {
  margin-top: var(--space-1);
}

.hq-order .tree-open-said {
  margin: 0;
  padding-top: var(--space-2);
  border-top: var(--hairline) solid var(--color-rule);
  font-size: var(--text-quiet);
}

.hq-order .tree-open-fields {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: end;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-2);
  border-top: var(--hairline) solid var(--color-rule);
}

.hq-order .tree-open-field {
  display: grid;
  gap: var(--space-1);
}

.hq-order .tree-open-label,
.hq-order .tree-open-needs-word {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .tree-open-value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: var(--control-height-compact);
  align-items: center;
}

.hq-order .tree-open-hint {
  align-self: center;
}

.hq-order .tree-open-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: auto;
  padding-top: var(--space-1);
}

.hq-order .tree-open-acts-end {
  display: inline-flex;
  gap: var(--space-3);
  margin-left: auto;
}

.hq-order .tree-open .card-write-down {
  align-self: flex-start;
}

.hq-order .tree-open-needs {
  grid-column: 1 / -1;
  padding: var(--space-3) var(--space-4);
  border-top: var(--hairline) solid var(--color-ink);
}

.hq-order .tree-open-needs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.hq-order .tree-open-needs-word {
  color: var(--color-ink);
  font-weight: var(--weight-strong);
}

.hq-order .tree-nothing-yet {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 100%;
  padding: var(--space-4);
  text-align: center;
}

/* **The selection bar** (S9; `ItemsTree`), on the ground: the count in mono capitals, the verbs as
   words, the hint and *Clear* at the right, one line. */
.hq-order .tree-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-ground);
  color: var(--color-ink);
}

.hq-order .tree-selection-count {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .tree-selection-move {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .tree-selection-quiet,
.hq-order .tree-selection-hint {
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .tree-selection-hint {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* **The fold under the tree** (`ativv_ui::Fold`; `ItemsTree`'s foot): under a hairline, SET ASIDE and
   its count, one line per thing set aside. */
.hq-order .tree-aside {
  margin-top: var(--space-4);
  border-top: var(--hairline) solid var(--color-line);
}

.hq-order .tree-aside > .fold-head {
  padding: var(--space-3) 0 var(--space-2);
  border-bottom: 0;
  background: none;
}

.hq-order .tree-aside .fold-name:empty {
  display: none;
}

.hq-order .tree-aside-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0 0 0 var(--space-7);
  list-style: none;
}

.hq-order .tree-aside-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.hq-order .tree-aside-name {
  color: var(--color-ink);
  font-weight: var(--weight-strong);
}

/* **The pack as a table** (`ItemsPack`): one-line rows at the artboard's height; a group's row and the
   items inside it under the heavy rule at the left edge; the dismissed greyed. On a phone the table is
   wider than the page and scrolls in its own box. */
.hq-order .tree-table-note {
  max-width: none;
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* The wrap scrolls the table sideways on a phone, and is the containing block of what is placed in
   it (a column's hidden head), which otherwise escaped it and widened the page past the screen. */
.hq-order .tree-table-wrap {
  position: relative;
  overflow-x: auto;
}

/* Never narrower than its columns read at: on a phone it scrolls inside its wrap rather than
   folding every cell to a word a line. */
.hq-order .tree-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  font-size: var(--text-quiet);
}

.hq-order .tree-table-col-tick {
  width: var(--space-7);
}

.hq-order .tree-table-col-thumb {
  width: calc(var(--thumb-size) + 2 * var(--space-2));
}

.hq-order .tree-table-col-item {
  width: 17%;
}

.hq-order .tree-table-col-decorations {
  width: 20%;
}

.hq-order .tree-table-col-answer {
  width: 12%;
}

.hq-order .tree-table-col-needs {
  width: 24%;
}

/* The verbs' column as narrow as its one line. */
.hq-order .tree-table-col-acts {
  width: 1%;
}

.hq-order .tree-table th {
  padding: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-ink);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.hq-order .tree-table td {
  padding: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-rule);
  vertical-align: top;
}

.hq-order .tree-table-thumb {
  width: var(--thumb-size);
}

.hq-order .tree-table td.tree-table-thumb {
  padding-left: calc(var(--space-2) + var(--tree-depth, 0) * var(--space-5));
}

.hq-order .tree-table-name {
  line-height: 1.4;
}

.hq-order .tree-table-name .tree-item-name {
  margin-right: var(--space-2);
  font-size: var(--text-quiet);
}

.hq-order .tree-table-blank {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .tree-table .field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.hq-order .tree-table-needs {
  color: var(--color-meta);
}

.hq-order .tree-table .tree-item-acts {
  justify-content: start;
}

/* A group's row and the items inside it: the heavy rule down their left edge. */
.hq-order .tree-table-group td {
  padding: var(--space-2) var(--space-3);
  background: var(--color-line-panel-quiet);
  box-shadow: inset var(--rule-heavy) 0 0 var(--color-ink);
}

.hq-order .tree-table-inside > td:first-child {
  box-shadow: inset var(--rule-heavy) 0 0 var(--color-ink);
}

.hq-order .tree-table-group-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-left: calc(var(--tree-depth, 0) * var(--space-5));
}

.hq-order .tree-table-group-name {
  font-size: var(--text-control);
  font-weight: var(--weight-strong);
}

.hq-order .tree-table-group-verbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-left: auto;
}

.hq-order .tree-table-declined > td {
  color: var(--color-muted);
}

.hq-order .tree-table-declined .thumb {
  opacity: 0.5;
}

.hq-order .tree-table-declined .tree-item-name {
  color: var(--color-muted);
}

.hq-order .tree-table-open > td {
  padding: 0 0 var(--space-3);
}

.hq-order .tree-table-open .tree-open {
  margin: var(--space-2) 0 0;
}

.hq-order .tree-made {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--color-ink);
  color: var(--color-meta);
  font-size: var(--text-meta);
}

/* A phone: the item's needs, standing and verbs under its name; the open item in one column. */
@media (max-width: 40rem) {
  .hq-order .tree-item-line {
    grid-template-columns: var(--space-5) var(--thumb-size) minmax(0, 1fr);
    padding-inline: var(--space-3);
  }

  .hq-order .tree-item-line .thumb-large {
    width: var(--thumb-size);
    height: var(--thumb-size);
  }

  .hq-order .tree-item-collects {
    --tree-item-collects-inset: calc(var(--space-5) + var(--thumb-size) + 2 * var(--space-4));
  }

  .hq-order .tree-item-needs,
  .hq-order .tree-item-state,
  .hq-order .tree-item-acts,
  .hq-order .tree-item-line > .tree-item-picker {
    grid-column: 3;
  }

  .hq-order .tree-item-acts {
    justify-content: start;
  }

  .hq-order .tree-group .tree-group {
    margin: var(--space-2);
  }

  .hq-order .tree-open {
    grid-template-columns: minmax(0, 1fr);
    margin: var(--space-2);
  }

  .hq-order .tree-open-picture {
    min-height: 0;
    border-right: 0;
    border-bottom: var(--hairline) solid var(--color-line);
  }

  .hq-order .tree-open-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .hq-order .tree-selection-hint {
    flex-basis: 100%;
    text-align: left;
    white-space: normal;
  }
}

/* ---- Add an item (`crate::add`; the handoff's *Add an item*, drawn as `AddItem` draws it): the
   sheet's *into* beside its title, three short doors, the counts, the rows on `EditTable` ---- */
.hq-order .add-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

/* "Q2 gear · One   into [On its own]": the sheet's default place, which each row's *In* overrides. */
.hq-order .add-into {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Three doors side by side, each a title, one line and one button. */
.hq-order .add-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-3);
}

.hq-order .add-door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--color-line);
}

/* A door asking for its item's name: drawn in ink, as the artboard draws the door in use. */
.hq-order .add-door-open {
  border-color: var(--color-ink);
  outline: var(--rule-tab) solid var(--color-ink);
  outline-offset: calc(var(--hairline) * -1);
}

.hq-order .add-door h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

.hq-order .add-door p {
  margin: 0;
  font-size: var(--text-meta);
}

.hq-order .add-door > .button {
  margin-top: var(--space-1);
}

/* The door's own line once pressed: a name, what it is, the button, ×. */
.hq-order .add-door-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.hq-order .add-door-line .text-input {
  flex: 1 1 7rem;
}

/* The pack door waits for the pack reader: greyed, its line saying so. */
.hq-order .add-door-later {
  border-style: dashed;
  color: var(--color-muted);
}

.hq-order .add-door .button-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* "2 items · 1 group", in the artboard's heavy mono. */
.hq-order .add-counts {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .add-selection {
  margin: 0;
}

.hq-order .add-selection-clear {
  margin-left: auto;
}

.hq-order .add-decorations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-height-compact);
}

/* A method picked and its placement being typed: the chip with a box in it. */
.hq-order .add-placing input {
  width: 7.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  outline: none;
}

.hq-order .add-placing:focus-within {
  outline: var(--focus-width) solid var(--color-ink);
  outline-offset: var(--hairline);
}

.hq-order .add-more {
  display: flex;
}

.hq-order .add-hint {
  margin: 0;
  font-size: var(--text-meta);
}

.hq-order .tree-staged {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}

/* ---- The roster with the tree as its header (`roster.rs`; the handoff's "The roster") ---- */
/* A cell outside the row's home is hatched, never a dash (Reed). */
.hq-order .roster-cell-outside,
.hq-order .roster-key-box.roster-key-outside {
  background: repeating-linear-gradient(
    135deg,
    var(--color-shell) 0 3px,
    var(--color-line-hatch) 3px 5px
  );
}

/* On a row that stops or warns, the hatch over the flag's fill. */
.hq-order .edit-row-stop > td.roster-cell-outside,
.hq-order .edit-row-warn > td.roster-cell-outside {
  background: repeating-linear-gradient(
    135deg,
    var(--color-flag) 0 3px,
    var(--color-line-hatch) 3px 5px
  );
}

/* Given here bold, from above grey, none struck, not chosen dashed, mixed in italics. */
.hq-order .roster-size-here .roster-select {
  font-weight: var(--weight-strong);
}

.hq-order .roster-size-above .roster-select,
.hq-order .roster-size-above {
  color: var(--color-meta);
}

.hq-order .roster-size-none .roster-select {
  color: var(--color-meta);
  text-decoration: line-through;
}

.hq-order .roster-size-mixed .roster-select {
  font-style: italic;
}

.hq-order .roster-col-fold {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-weight: var(--weight-strong);
  cursor: pointer;
}

/* A row from the customer's answer on the quiet panel, unless it stops or warns (the flag wins), and
   never over a hatched cell. */
.hq-order .roster-row-answered:not(.edit-row-stop, .edit-row-warn) > td:not(.roster-cell-outside),
.hq-order .roster-row-answered:not(.edit-row-stop, .edit-row-warn) > th {
  background: var(--color-line-panel-quiet);
}

/* The roster as `RosterTree` draws it (the third polish round): Save and Confirm at the version bar's
   end; the tools and the key on one line; sections on `Fold` under an ink rule with no panel; the
   rows on `EditTable`'s values form; *What gets made* capped at 50rem, numbers in mono. */
.hq-order .roster-acts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.hq-order .roster-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.hq-order .roster-row-at {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .roster-row-at-words {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* The key: a right-aligned row of small boxed samples, each with its words. */
.hq-order .roster-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1) var(--space-4);
  margin-left: auto;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .roster-key-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 22px;
  height: 18px;
  margin-right: var(--space-1);
  padding: 0 3px;
  border: var(--hairline) solid var(--color-line);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-number-sm);
  vertical-align: middle;
}

.hq-order .roster-key-here {
  font-weight: 700;
}

.hq-order .roster-key-above,
.hq-order .roster-key-blank {
  color: var(--color-muted);
}

.hq-order .roster-key-none {
  color: var(--color-muted);
  text-decoration: line-through;
}

.hq-order .roster-key-mixed {
  color: var(--color-muted);
  font-style: italic;
}

.hq-order .roster-key-box .roster-missing-mark {
  min-width: 14px;
  height: 14px;
}

.hq-order .roster-key-box.roster-key-outside {
  width: 32px;
}

/* A section: under an ink rule, its head on the sheet's white rather than a panel. */
.hq-order .roster-group {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--color-ink);
}

.hq-order .roster-group > .fold-head {
  align-items: baseline;
  padding: 0;
  border-bottom: 0;
  background: none;
}

.hq-order .roster-group > .edit-table-wrap,
.hq-order .roster-group > .roster-table-wrap {
  margin-top: var(--space-2);
}

.hq-order .roster-made {
  border-top-color: var(--color-line);
}

.hq-order .roster-made-pieces {
  margin-left: auto;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* A group over its items' columns: the name bold in ink, a press folds it. */
.hq-order .roster-table .roster-col-group {
  border-bottom: var(--hairline) solid var(--color-line-later);
  background: var(--color-line-panel-quiet);
  color: var(--color-ink);
  font-weight: 700;
  text-align: center;
}

.hq-order .roster-col-folded {
  background: var(--color-line-panel-quiet);
}

/* The row: its name, or its count, then its home small and muted. */
.hq-order .roster-count {
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

.hq-order .roster-table .roster-home-qty {
  field-sizing: content;
  min-width: 2ch;
  padding: 2px 1px;
  border: var(--hairline) solid transparent;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
}

.hq-order .roster-table .roster-home-qty:hover,
.hq-order .roster-table .roster-home-qty:focus {
  border-color: var(--color-field-line);
}

.hq-order .roster-at {
  color: var(--color-muted);
  font-size: var(--text-mono-number-sm);
}

/* *+ Row at* the section, in the rule's quiet line: the tool's words, underlined, no box. */
.hq-order .roster-row-add {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-label);
  text-decoration: underline;
  text-transform: uppercase;
  cursor: pointer;
}

.hq-order .roster-fieldset:disabled .roster-row-add {
  display: none;
}

.hq-order .roster-made-table {
  width: auto;
  min-width: min(45rem, 100%);
  max-width: 50rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.hq-order .roster-made-table th {
  padding: 6px var(--space-3);
  border-bottom: var(--hairline) solid var(--color-ink);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.hq-order .roster-made-table td {
  height: 30px;
  padding: 0 var(--space-3);
  border-bottom: var(--hairline) solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-mono-number);
  text-align: right;
  white-space: nowrap;
}

.hq-order .roster-made-table th:first-child,
.hq-order .roster-made-table td:first-child {
  padding-left: 0;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
}

.hq-order .roster-made-table th:first-child {
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
}

.hq-order .roster-made-table .roster-made-none {
  color: var(--color-line);
}

.hq-order .roster-made-table .roster-made-total {
  font-weight: 700;
}

/* ---- Compose (`crate::compose`; the handoff's *Proof, compose* and *Proof, after a yes*, the
   fourth polish round): two columns, the offer and its rules on the left, what the customer reads
   and the email on the right; a phone stacks them. ---- */
.hq-order .compose-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.hq-order .compose-offer,
.hq-order .compose-side {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.hq-order .compose-columns .sheet-head {
  margin-top: 0;
}

.hq-order .compose-list,
.hq-order .compose-changed,
.hq-order .compose-email-lines {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* An offer row on a hairline, as the artboard lists them: the head (tick, name, how it is shown,
   where it stands), what it covers, what changed beneath, the set-price question. */
.hq-order .compose-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-rule);
}

.hq-order .compose-row:last-child {
  border-bottom: var(--hairline) solid var(--color-ink);
}

.hq-order .compose-row-quiet .compose-pick b {
  color: var(--color-muted);
}

.hq-order .compose-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.hq-order .compose-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
}

.hq-order .compose-pick input {
  align-self: center;
}

.hq-order .compose-pick b {
  font-weight: var(--weight-strong);
}

.hq-order .compose-pick .muted {
  font-size: var(--text-meta);
}

.hq-order .compose-covered {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  max-width: none;
  margin: 0;
  padding-left: calc(13px + var(--space-5));
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .compose-changed li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-2) calc(13px + var(--space-5));
  border-top: var(--hairline) solid var(--color-rule);
  font-size: var(--text-sm);
}

.hq-order .compose-changed b {
  font-weight: var(--weight-strong);
}

.hq-order .compose-changed .muted {
  font-size: var(--text-meta);
}

/* The set-price question: one flagged line, a segmented choice beneath, its one price box. */
.hq-order .compose-price {
  display: grid;
  gap: var(--space-2);
  padding-left: calc(13px + var(--space-5));
}

.hq-order .compose-price-ask {
  max-width: none;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-flag);
  color: var(--color-flag-ink);
  font-size: var(--text-meta);
}

.hq-order .compose-price-seg {
  justify-self: start;
}

.hq-order .compose-price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--space-2);
}

.hq-order .compose-note {
  max-width: none;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* What the customer will read: their own cards, side by side where there is room. */
.hq-order .compose-reads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}

.hq-order .compose-reads:empty {
  display: none;
}

.hq-order .compose-email {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--color-line);
  background: var(--color-line-panel-quiet);
}

.hq-order .compose-email p {
  max-width: none;
  margin: 0;
}

.hq-order .compose-email-to,
.hq-order .compose-email-lines {
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .compose-email-subject {
  font-weight: var(--weight-strong);
}

@media (max-width: 52rem) {
  .hq-order .compose-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- The release sheet by factory (`sheets.rs`; the handoff's *Release sheet*, the fourth polish
   round): the items on EditTable with their checks per item, the order's own block, the runs as
   ladders of step chips. ---- */
.hq-order .release-items-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}

.hq-order .release-counts {
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
  text-transform: none;
}

.hq-order .release-items tbody th:first-child {
  padding-left: calc(var(--space-2) + var(--tree-depth, 0) * var(--space-4));
}

/* A group's row: the 3 px ink rule at its left, as Items draws a group, on the quiet panel. */
.hq-order .release-group > * {
  background: var(--color-line-panel-quiet);
  vertical-align: middle;
}

.hq-order .release-group > th:first-child {
  box-shadow: inset 3px 0 0 var(--color-ink);
}

.hq-order .release-group .tree-word {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .release-group-to {
  text-align: right;
  white-space: nowrap;
}

/* The group's "all to" is a choice beside words, as wide as its answer, not the cell. */
.hq-order .edit-table .release-group-to > .select-compact {
  display: inline-grid;
  width: auto;
  vertical-align: middle;
}

.hq-order .edit-table .release-group-to > .select-compact .select-control {
  width: auto;
  min-width: 0;
}

.hq-order .release-item-name b {
  font-weight: var(--weight-strong);
}

.hq-order .release-item-parent {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-meta);
}

/* A check per item: ✓ in a filled ink circle, ! in the flag's rim. */
.hq-order .release-check {
  white-space: nowrap;
}

.hq-order .release-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-right: var(--space-1);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-strong);
  line-height: 1;
  vertical-align: -2px;
}

.hq-order .release-mark-met {
  background: var(--color-ink);
  color: var(--color-shell);
}

.hq-order .release-mark-missing {
  border: var(--hairline) solid var(--color-flag-rule);
  background: var(--color-flag);
  color: var(--color-flag-ink);
}

.hq-order .release-pick {
  color: var(--color-muted);
}

.hq-order .release-factory .select-inline .select-control {
  padding-inline: 0;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
}

.hq-order .release-needs .needs-list {
  margin: 0;
}

.hq-order .release-dismissed th,
.hq-order .release-dismissed td {
  color: var(--color-muted);
}

.hq-order .release-order-met {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .release-forced {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .release-hatch {
  flex: none;
  width: 14px;
  height: 14px;
  border: var(--hairline) solid var(--color-ink);
  background: repeating-linear-gradient(135deg, var(--color-ink) 0 1px, transparent 1px 4px);
}

.hq-order .release-runs {
  display: grid;
}

.hq-order .release-run {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--color-rule);
}

.hq-order .release-run-head {
  display: grid;
}

.hq-order .release-run-head b {
  font-weight: var(--weight-strong);
}

.hq-order .release-run-head .muted {
  font-size: var(--text-meta);
}

.hq-order .release-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hq-order .release-ladder li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.hq-order .release-step {
  padding: 2px var(--space-2);
  border: var(--hairline) solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.hq-order .release-step-then {
  color: var(--color-muted);
}

.hq-order .release-board,
.hq-order .release-note {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .release-note {
  max-width: none;
  margin: var(--space-3) 0 0;
}

@media (max-width: 40rem) {
  .hq-order .release-run {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Production's ladder table, the sample in its step, and the customer's sign-off ----
   (the 15 Oct artboard *Production, what the customer reads*; the fifth polish round) */

/* The ladder, under its run's block and outside it: a fold head in mono capitals, then the table
   (`EditTable`), the override's editor and a quiet line on where the times come from. */
.hq-order .production-ladder {
  margin-top: var(--space-6);
}

.hq-order .production-ladder .fold-head {
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  border-bottom: 0;
  background: none;
}

.hq-order .production-ladder .fold-name {
  line-height: inherit;
}

.hq-order .production-ladder .fold-word,
.hq-order .production-ladder-title {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .production-ladder-title::before {
  content: "· ";
  white-space: pre;
}

.hq-order .production-ladder-rule {
  margin-left: auto;
  font-size: var(--text-meta);
}

.hq-order .production-ladder-note {
  color: var(--color-muted);
  font-size: var(--text-meta);
}

.hq-order .production-ladder-foot {
  margin: var(--space-3) 0 0;
  font-size: var(--text-meta);
}

.hq-order .production-override {
  margin-top: var(--space-3);
}

/* The sampling step's panel in two columns: the step on the left (its photos, Ativv's look, the
   sign-off box), *Next* on the right. */
.hq-order .production-panel-two .production-panel-facts {
  flex: 3 1 30rem;
}

.hq-order .production-panel-two .production-panel-acts {
  flex: 2 1 18rem;
}

.hq-order .production-panel-warn {
  margin: 0;
  max-width: 34rem;
  font-size: var(--text-meta);
}

/* The sample inside its step: the photos with *Add photos* beside them, then Ativv's look. */
.hq-order .production-sample-in {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  border-top: 0;
}

.hq-order .production-sample-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.hq-order .production-sample-in .production-photo {
  width: 72px;
  height: 72px;
}

.hq-order .production-sample-in .production-sample-add {
  margin-left: 0;
}

.hq-order .production-look {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--text-meta);
}

/* The customer's sign-off, boxed in ink inside the step: the switch, what it means now, and what
   they read with *Say something else*. */
.hq-order .production-signoff {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--hairline) solid var(--color-ink);
  background: var(--color-shell);
}

.hq-order .production-signoff-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.hq-order .production-signoff-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hq-order .production-signoff-says {
  margin: 0;
  max-width: 44rem;
  font-size: var(--text-meta);
}

.hq-order .production-signoff-reads {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.hq-order .production-signoff-reads .production-they-read {
  font-style: italic;
}

.hq-order .production-signoff-reads .production-say-links,
.hq-order .production-signoff-reads .production-say,
.hq-order .production-signoff-reads > p.muted {
  flex-basis: 100%;
  margin: 0;
}

.hq-order .production-sample-add[hidden] {
  display: none;
}