/* 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;
}

/* The item's family: a select as quiet as the COMING chip beside it, in the same mono label. It
   commits on change, since nothing of it reaches the customer. */
.hq-order .item-family {
  height: auto;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-chip);
  background: none;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

/* **"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);
}

.hq-order .production-run-asana {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  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 .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-field-input {
  height: 36px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  border: var(--hairline) solid var(--color-field-line);
  background: var(--color-shell);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
}

.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 .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;
}

/* 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);
}

.hq-order .item-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-1) 2px var(--space-3);
  border: var(--hairline) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-shell);
  font-size: var(--text-meta);
}

.hq-order .item-field-size {
  background: var(--color-line-panel);
}

.hq-order .item-field-key {
  font-family: var(--font-mono);
  font-size: var(--text-mono-chip);
  font-weight: var(--weight-strong);
}

.hq-order .item-field-x {
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-meta);
  font: inherit;
  cursor: pointer;
}

.hq-order .item-field-x:hover,
.hq-order .item-field-x:focus-visible {
  color: var(--color-ink);
}

.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;
  padding: var(--space-1) var(--space-3);
  border: var(--hairline) solid var(--color-ink);
  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-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);
}

.hq-order .item-blank-run select {
  height: var(--control-height-small, 2rem);
  border: var(--hairline) solid var(--color-line);
  background: var(--color-shell);
  color: var(--color-ink);
  font: inherit;
}

/* **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-tool {
  padding: 6px var(--space-3);
  border: var(--hairline) solid var(--color-ink);
  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;
}

.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 {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--color-ink);
}

.hq-order .roster-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.hq-order .roster-group-name {
  font-size: var(--text-lead);
}

.hq-order .roster-group-items {
  margin-left: auto;
  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;
}

/* **The sheet on a phone** (the verification of B1 and B2, its finding 4): the dialog's frame is a
   grid whose one column was sized to its content, so the widest table set the sheet's width and the
   version bar, its Confirm and the tools ran off a 390 screen with it. One column of the frame's own
   width instead, and the table wrap the containing block of its headers' visually hidden words, so
   only a table wider than the screen scrolls, inside its own wrap. */
.hq-order .dialog-broad .dialog-frame {
  grid-template-columns: minmax(0, 1fr);
}

.hq-order .roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.hq-order .roster-table th {
  padding: 6px 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 .roster-table td {
  height: 38px;
  padding: 0 var(--space-2);
  border-bottom: var(--hairline) solid var(--color-rule);
  white-space: nowrap;
}

.hq-order .roster-row-warn td {
  background: color-mix(in srgb, var(--color-flag) 45%, var(--color-shell));
}

.hq-order .roster-row-stop td {
  background: var(--color-flag);
}

.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-select {
  height: 30px;
  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-size-missing .roster-select,
.hq-order .roster-select-unpicked {
  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-take-out {
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-muted);
  font-size: var(--text-lead);
  cursor: pointer;
}

.hq-order .roster-legend,
.hq-order .roster-youth,
.hq-order .roster-pairs,
.hq-order .roster-foot {
  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);
}

.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' lip: where the roster stands and its door; a group's Collects row, its door too. */
.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;
}

.hq-order .roster-door-open,
.hq-order .item-collects-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;
}

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

/* **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-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.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-take-out,
.hq-order .roster-fieldset:disabled .roster-blank-toggle,
.hq-order .roster-fieldset:disabled .roster-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;
}

.hq-order .roster-tools-off {
  display: 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-lines-wrap {
  position: relative;
  overflow-x: auto;
}

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

.hq-order .quote-lines th {
  padding: 6px 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 .quote-lines td {
  height: 38px;
  padding: 0 var(--space-2);
  border-bottom: var(--hairline) solid var(--color-rule);
}

.hq-order .quote-lines .quote-num {
  text-align: right;
}

/* A box a person types in shows where it is, empty or not: the roster's cells are a grid already
   filled, a quote line's quantity and unit price are often left empty. */
.hq-order .quote-lines input,
.hq-order .quote-lines select {
  padding: 2px var(--space-1);
  border: 0;
  border-bottom: var(--hairline) solid var(--color-field-line);
}

.hq-order .quote-words {
  min-width: 12rem;
}

.hq-order .quote-qty {
  width: 3.5rem;
  font-family: var(--font-mono);
  text-align: right;
}

.hq-order .quote-money {
  width: 6.5rem;
  font-family: var(--font-mono);
  text-align: right;
}

.hq-order .quote-item {
  max-width: 10rem;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
}

.hq-order .quote-total {
  margin: 0;
  text-align: right;
}

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

.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);
}

.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*) ---- */

/* A group is a section ruled in ink with a heavy left edge; a group inside a group a lighter one. Its
   header on the quiet panel, its children beneath. */
.hq-order .tree {
  display: grid;
  gap: var(--space-4);
}

.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-nested {
  margin-top: var(--space-3);
  border-left-width: var(--rule-strong);
}

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

.hq-order .tree-group-folded .tree-group-head {
  border-bottom: 0;
}

.hq-order .tree-fold {
  width: var(--space-5);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-mono);
  cursor: pointer;
}

.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);
}

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

.hq-order .tree-group-rows {
  font-size: var(--text-sm);
}

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

.hq-order .tree-verb {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  white-space: nowrap;
}

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

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

.hq-order .tree-group .item-collects {
  margin: 0;
  border-width: 0 0 var(--hairline);
}

.hq-order .tree-group .item-collects,
.hq-order .tree-needs-line,
.hq-order .tree-group-folded-line {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--hairline) solid var(--color-line);
  font-size: var(--text-sm);
}

.hq-order .tree-group-folded-line {
  border-bottom: 0;
  color: var(--color-meta);
}

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

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

/* The price switch and the shown switch are segmented rows, a little smaller than a sheet's. */
.hq-order .tree-price-switch button,
.hq-order .tree-shown-switch button {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-mono-sm);
}

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

.hq-order .tree-shown-derived {
  font-size: var(--text-sm);
}

.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);
  padding: var(--space-2) var(--space-4);
}

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

/* **An item's row**: its tick and letter, then its lines, its verbs at the right. */
.hq-order .tree-item {
  border-top: var(--hairline) solid var(--color-line);
}

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

.hq-order .tree > .tree-item {
  border: var(--hairline) solid var(--color-ink);
  padding: 0 var(--space-4);
}

.hq-order .tree-item-line {
  display: grid;
  grid-template-columns: auto var(--space-5) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
}

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

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

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

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

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

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

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

.hq-order .tree-item-blank,
.hq-order .tree-item-needs {
  color: var(--color-meta);
}

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

.hq-order .tree-item-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: var(--space-2) var(--space-3);
  max-width: 22rem;
}

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

/* On a row, the picker (*Move…*, *Group with…*) is a line of its own under the row's lines, never a
   fifth cell in the row's grid, which would widen the tick's column and push the name aside. */
.hq-order .tree-item-line > .tree-item-picker {
  grid-column: 1 / -1;
  padding-left: calc(var(--space-5) + var(--space-6));
}

/* **An item open**: its candidate's card beside its fields, the needs list under them. */
.hq-order .tree-item-detail {
  display: grid;
  grid-template-columns: minmax(0, var(--card-open-width)) minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  padding: 0 0 var(--space-4) calc(var(--space-5) + var(--space-6));
}

.hq-order .tree-item-detail .card {
  width: 100%;
}

.hq-order .tree-item-fields {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  margin: 0;
  align-content: start;
}

.hq-order .tree-item-fields dt {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-meta);
  padding-top: var(--space-1);
}

.hq-order .tree-item-fields dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.hq-order .tree-item-fields .tree-price-editor,
.hq-order .tree-item-fields .tree-decoration-add {
  padding: 0;
  width: 100%;
}

.hq-order .tree-nothing-yet {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--hairline) dashed var(--color-line);
}

/* **The needs list in sentences**: ✓ met, ! missing, grey not yet. */
.hq-order .tree-needs {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-3) 0 0;
  border-top: var(--hairline) solid var(--color-line);
  list-style: none;
  font-size: var(--text-sm);
}

.hq-order .tree-need {
  display: grid;
  grid-template-columns: var(--space-4) 6rem minmax(0, 1fr);
  gap: var(--space-2);
}

.hq-order .tree-need-mark {
  font-family: var(--font-mono);
  font-weight: var(--weight-strong);
}

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

.hq-order .tree-need-missing .tree-need-mark {
  color: var(--color-danger);
}

.hq-order .tree-need-not-yet {
  color: var(--color-muted);
}

/* **The selection bar**, over the tree while items are ticked. */
.hq-order .tree-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink);
  color: var(--color-shell);
}

.hq-order .tree-selection .tree-selection-move,
.hq-order .tree-selection-hint {
  font-size: var(--text-sm);
}

.hq-order .tree-selection-count {
  font-weight: var(--weight-strong);
}

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

/* **The fold under the tree**: what is set aside or declined. */
.hq-order .tree-aside {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) dashed var(--color-line);
}

.hq-order .tree-aside summary {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.hq-order .tree-aside-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  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 {
  font-weight: var(--weight-strong);
}

.hq-order .tree-flip {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}

/* **The pack as a table**: a row per item under its group's row, indented by depth. On a phone the
   table is wider than the page, which clips sideways, so it scrolls in its own box. */
.hq-order .tree-table-wrap {
  overflow-x: auto;
}

.hq-order .tree-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

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

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

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

.hq-order .tree-table-group td {
  background: var(--color-surface);
}

.hq-order .tree-table-group td > * {
  margin-right: var(--space-3);
}

.hq-order .tree-table-group .tree-verbs {
  display: inline-flex;
  margin-left: 0;
}

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

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

.hq-order .tree-table-note,
.hq-order .tree-made {
  font-size: var(--text-sm);
}

.hq-order .tree-made {
  margin-top: var(--space-4);
}

/* A phone: the item's lines under its name, its verbs under them, the open item in one column. */
@media (max-width: 40rem) {
  .hq-order .tree-item-line {
    grid-template-columns: auto var(--space-4) minmax(0, 1fr);
  }

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

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

  .hq-order .tree-item-detail {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }

  .hq-order .tree-verbs {
    margin-left: 0;
  }
}

/* ---- Add an item (`crate::add`; the handoff's *Add an item*): three doors, then rows ---- */
.hq-order .add-sheet {
  display: grid;
  gap: var(--space-4);
}

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

.hq-order .add-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
}

.hq-order .add-door {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--hairline) solid var(--color-ink);
}

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

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

/* The pack door is greyed: a stub naming the workflow it becomes. */
.hq-order .add-door-later {
  border-style: dashed;
  border-color: var(--color-line);
  color: var(--color-muted);
}

.hq-order .add-family {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

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

.hq-order .add-rows {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

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

.hq-order .add-rows td {
  padding: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-line);
  vertical-align: top;
}

.hq-order .add-rows td > * + * {
  margin-top: var(--space-2);
}

.hq-order .add-foot {
  margin-right: auto;
  font-size: var(--text-sm);
}

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

.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") ---- */
.hq-order .roster-group-head .roster-fold {
  width: var(--space-5);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-mono);
  cursor: pointer;
}

.hq-order .roster-group-folded .roster-group-head {
  margin-bottom: 0;
}

.hq-order .roster-row-at {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.hq-order .roster-key {
  font-size: var(--text-sm);
}

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

.hq-order .roster-key-outside {
  display: inline-block;
  width: var(--space-4);
  height: var(--space-3);
  vertical-align: middle;
}

/* 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-group {
  border-bottom: var(--hairline) solid var(--color-ink);
  text-align: left;
}

.hq-order .roster-col-fold {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-weight: var(--weight-strong);
  cursor: pointer;
}

.hq-order .roster-col-sub,
.hq-order .roster-col-item {
  font-weight: var(--weight-regular);
}

.hq-order .roster-home {
  white-space: nowrap;
}

.hq-order .roster-table .roster-home .roster-home-qty {
  width: 4rem;
  min-width: 0;
}

.hq-order .roster-home-name {
  margin-left: var(--space-2);
}

.hq-order .roster-row-answered td {
  background: var(--color-line-panel-quiet);
}

.hq-order .roster-made-table td,
.hq-order .roster-made-table th {
  text-align: right;
}

.hq-order .roster-made-table td:first-child,
.hq-order .roster-made-table th:first-child {
  text-align: left;
}

/* ---- Compose (`crate::compose`; the handoff's *Proof, compose*) ---- */
.hq-order .compose-list,
.hq-order .compose-reads,
.hq-order .compose-email,
.hq-order .compose-changed {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hq-order .compose-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border: var(--hairline) solid var(--color-ink);
}

.hq-order .compose-row-quiet {
  border-color: var(--color-line);
  color: var(--color-meta);
}

.hq-order .compose-pick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hq-order .compose-covered,
.hq-order .compose-price {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-sm);
}

.hq-order .compose-changed {
  flex-basis: 100%;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

/* What the customer will read: their own cards (`ativv_ui::OfferCard`), at a phone's measure, as
   their page draws them. */
.hq-order .compose-reads {
  max-width: var(--measure-side);
  gap: 0;
}

.hq-order .compose-note {
  margin: 0;
  font-size: var(--text-sm);
}

.hq-order .quote-basis {
  font-size: var(--text-sm);
  color: var(--color-meta);
}

/* ---- The release sheet by factory (`sheets.rs`; the handoff's *Release sheet*) ---- */
.hq-order .release-items {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

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

.hq-order .release-items td {
  padding: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-line);
  vertical-align: top;
}

.hq-order .release-items td:first-child {
  padding-left: calc(var(--space-2) + var(--tree-depth, 0) * var(--space-4));
}

.hq-order .release-group td {
  background: var(--color-surface);
}

.hq-order .release-dismissed td {
  color: var(--color-meta);
}

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

.hq-order .release-run {
  padding: var(--space-3);
  border: var(--hairline) solid var(--color-ink);
}

.hq-order .release-ladder,
.hq-order .release-note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

/* ---- Production's ladder rows and the sample's sign-off ---- */
.hq-order .production-ladder {
  margin-top: var(--space-4);
  padding: 0 var(--space-4) var(--space-3);
}

.hq-order .production-ladder summary {
  font-weight: var(--weight-strong);
  cursor: pointer;
}

.hq-order .production-ladder-rows {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.hq-order .production-ladder-rows th,
.hq-order .production-ladder-rows td {
  padding: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.hq-order .production-signoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}