/* The order flow (design round, design/DIRECTION.md "Ordering a repair"): the address row, the capture tiles, the three
   steps. The shared pieces are in design.css. Loads after design.css and overrides the flow's old styles from here.
   Every new class sits under .order-sheet so nothing leaks into another screen. */

/* ------------------------------------------------------------------ the rules work.css held until the slice 1 tidy
   (2026-11-01): the flow's frame, the step's pieces and the Keep this draft panel, shared with the inspection booking.
   They sit first so every rule below still draws over them as it did when they loaded from work.css. */
.order-sheet .pick { min-height: 44px; }
.dialog-btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.order-sheet { display: flex; flex-direction: column; padding: 0; overflow: hidden; z-index: 45; }
.order-scrim { z-index: 44; }
@media (max-width: 1023px) { .order-sheet { top: 0; max-height: none; height: 100%; border-radius: 0; } }
/* The real sheet that takes a loading frame's place does not rise again: the swap is seamless (button audit G16). */
.order-sheet.o-swap { animation: none; }

.order-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s2) var(--pad) var(--s5); }
.order-foot { display: flex; gap: var(--s3); padding: var(--s3) var(--pad) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--white); }
.order-foot .btn-primary { flex: 1; }
.step-h { font-size: 20px; line-height: 26px; font-weight: 600; margin: var(--s2) 0 var(--s4); outline: none; }
.order-sheet .choice { align-items: center; }
.choice-t { display: block; font-weight: 600; }
.choice-open { padding: var(--s4); border-top: 1px solid var(--line); background: var(--mist); }
.choice-open .field:last-child { margin-bottom: var(--s2); }

.ph-fail { border: 0; background: none; padding: 4px; color: var(--stop); cursor: pointer; text-align: center; }
.ring { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }
.files { display: flex; flex-direction: column; }
.filerow { display: flex; align-items: center; gap: var(--s2); min-height: 44px; border-top: 1px solid var(--line); }
.filerow .filename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emergency { margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--stop); border-radius: var(--r-card); background: var(--stop-tint); }
.emergency h3 { font-size: 17px; margin-bottom: var(--s3); }
.emergency p { margin: var(--s3) 0 0; }
.tel-big { min-height: 56px; font-size: 20px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; margin: var(--s2) 0; }
.switch { position: relative; width: 48px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 14px; background: var(--field); cursor: pointer; transition: background var(--fast); }
.switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); transition: transform var(--fast); }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"] i { transform: translateX(20px); }
.switch[disabled] { opacity: .5; cursor: default; }
.bill-open { margin-top: var(--s4); }
.sums { overflow: hidden; margin-bottom: var(--s4); }
.sum { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.sum:first-child { border-top: 0; }
.sum h4 { margin: 0; font-size: 14px; color: var(--steel); font-weight: 600; }
.sum-l { overflow-wrap: anywhere; }
.sum-warn { color: var(--stop); margin-top: var(--s1); }
.order-unsent { margin: 0 var(--pad) var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-ctl); background: var(--stop-tint); color: var(--stop);
  font-size: 14px; line-height: 20px; font-weight: 600; }
.review-line { margin-top: var(--s4); }
.keep { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--white); border-top: 1px solid var(--line); box-shadow: var(--shadow-sheet);
  padding: var(--s5) var(--pad) calc(var(--s5) + env(safe-area-inset-bottom)); }
.keep h3 { margin-bottom: var(--s2); }

/* Inline validation and help outside a .field */
.order-body .error { font-size: 14px; line-height: 20px; color: var(--stop); margin-top: 6px; }
.order-body .help { font-size: 14px; line-height: 20px; color: var(--steel); }
.order-body .label { font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 4px; display: block; }

/* ------------------------------------------------------------------ the frame: full screen on a phone, 600 px at 1024 */
.order-sheet.sheet { border-radius: 0; background: var(--white); }
@media (min-width: 1024px) {
  .order-sheet.sheet { width: 600px; box-shadow: var(--shadow-sheet); }
}

/* Cancel on the left, the title centred. */
.order-sheet .o-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 52px;
  padding: calc(4px + env(safe-area-inset-top)) var(--pad) 4px; }
@media (min-width: 1024px) { .order-sheet .o-top { padding-top: 12px; } }
.order-sheet .o-title { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; text-align: center; outline: none; }
.order-sheet .o-left { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px;
  margin-left: -8px; padding: 0 8px; border: 0; background: none; border-radius: 12px; color: var(--ink); font-size: 16px; font-weight: 500; cursor: pointer; }
.order-sheet .o-left:hover { background: var(--mist); }

/* The progress: the phase bar's look, three segments (four when Bill to is a step). */
.order-sheet .o-prog { padding: 4px var(--pad) 12px; }
.order-sheet .o-prog .phases { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.order-sheet .o-prog .phase.now i::after { transition: none; }
.order-sheet .o-prog .phase span { font-size: 14px; line-height: 18px; }

/* The step scrolls; the bar under it stays. */
.order-sheet .order-body { padding: 8px var(--pad) 32px; }
.order-sheet .o-step-in { animation: ds-rise var(--t-med) var(--ease); }
.order-sheet .step-h, .order-sheet .o-h { margin: 8px 0 20px; font: 600 24px/30px var(--font); letter-spacing: -.005em; outline: none; text-wrap: balance; }
.order-sheet .order-foot.sbar { position: relative; margin: 0; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); gap: 12px; }
.order-sheet .order-foot .btn { min-height: 52px; border-radius: var(--r-ctl); font-size: 16px; }
.order-sheet .order-foot .btn-primary, .order-sheet .order-foot .o-main { flex: 1; }          /* the foot's main button, orange or black */
.order-sheet .order-foot .btn:not(.btn-primary):not(.o-main) { flex: 0 0 auto; min-width: 96px; }
.order-sheet .order-foot[hidden], .order-sheet .o-prog[hidden] { display: none; }
.order-sheet .order-unsent { margin: 0 var(--pad) 8px; }
.order-sheet .order-unsent[hidden] { display: none; }
.order-sheet .o-lost { background: var(--mist); color: var(--ink); }

/* Blocks inside a step. */
.order-sheet .o-block { margin-top: 24px; }
.order-sheet .o-block.o-first, .order-sheet .o-block.o-insp { margin-top: 0; }
.order-sheet .o-block.o-insp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.order-sheet .o-block .field { margin-bottom: 0; }
.order-sheet .o-sub-h { margin: 0 0 8px; font: 600 17px/22px var(--font); }
.order-sheet .o-linkbtn { min-height: 44px; font-size: 15px; }
.order-sheet .sums + .o-linkbtn { display: inline-flex; align-items: center; margin-top: 8px; }

/* A row that holds one line and a button: the address, the way in. */
.order-sheet .o-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 10px 10px 14px;
  border: 1px solid var(--concrete); border-radius: var(--r-card); background: var(--white); }
.order-sheet .o-row > svg { flex: none; color: var(--steel); }
.order-sheet .o-row-t { flex: 1; min-width: 0; font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.order-sheet .o-change { flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--r-ctl); font-size: 15px; }
.order-sheet .o-edit { margin-top: 12px; padding: 16px; border: 1px solid var(--concrete); border-radius: var(--r-card); background: var(--mist); }
.order-sheet .o-edit[hidden] { display: none; }
.order-sheet .o-edit .field + .field { margin-top: 16px; }

/* Choice rows (the address list, how soon): 14 radius cards with 1 px concrete rules. */
.order-sheet .choices { border-color: var(--concrete); border-radius: var(--r-card); background: var(--white); }
.order-sheet .choice { min-height: 60px; border-top-color: var(--concrete); transition: background var(--t-fast) var(--ease); }
.order-sheet .choice-t { font-size: 16px; line-height: 22px; font-weight: 600; }
.order-sheet .choice .sub { font-size: 14px; line-height: 20px; }
.order-sheet .choice[aria-checked="true"] { background: var(--mist); }
.order-sheet .choice .dot { border-color: var(--field); }
.order-sheet .choice[aria-checked="true"] .dot { border-color: var(--ink); }
.order-sheet .choice-open { border-top-color: var(--concrete); }
.order-sheet .choices.o-capped { max-height: 336px; overflow-y: auto; }
.order-sheet .choice-open .chips { margin-top: 8px; }

/* Chips: 44 tall, radius 12, ink when picked. */
.order-sheet .o-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--concrete); border-radius: var(--r-ctl); background: var(--white); color: var(--ink);
  font: 500 15px/20px var(--font); cursor: pointer; text-align: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.order-sheet .o-chip:active { transform: scale(.98); }
.order-sheet .o-chip:hover { background: var(--mist); }
.order-sheet .o-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.order-sheet .o-chip[aria-pressed="true"]:hover { background: #262B33; }

/* The capture tiles, then the strip. */
.order-sheet .o-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.order-sheet .o-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; padding: 12px;
  border: 1px solid var(--concrete); border-radius: var(--r-card); background: var(--mist); color: var(--ink);
  font: 600 16px/22px var(--font); cursor: pointer; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.order-sheet .o-tile:hover { background: #ECEFF2; }
.order-sheet .o-tile:active { transform: scale(.98); }
.order-sheet .o-photos { margin-top: 12px; }
.order-sheet .o-photos[hidden] { display: none; }
.order-sheet .o-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.order-sheet .o-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; background: var(--mist); display: flex; align-items: center; justify-content: center; }
.order-sheet .o-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.order-sheet .o-thumb-bad { background: var(--stop-tint); }
.order-sheet .o-thumb-np { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--steel); }
.order-sheet .o-thumb-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(14, 17, 22, .82); color: var(--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.order-sheet .o-thumb-x::after { content: ""; position: absolute; inset: -8px; }
.order-sheet .o-count { margin: 8px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--steel); }
.order-sheet .ph-fail { font-size: 14px; line-height: 18px; font-weight: 600; }

/* Fields. */
.order-sheet .textarea { border-radius: var(--r-ctl); min-height: 112px; }
.order-sheet .input, .order-sheet .select { border-radius: var(--r-ctl); }

/* The categories in two levels (design pass, board 3). Level one: ten tiles, two to a row at every width, each at least
   96 px: the line icon top left, the word bottom left, a 1 px hairline edge, a 2 px ink edge on the category kept from
   before. Level two: the category's own rows on hairlines, a chevron on each, Not sure last with its line under it. */
.order-sheet .o-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.order-sheet .o-cat { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px;
  min-height: 96px; padding: 14px; border: 0; border-radius: var(--v-r-surf, 12px); background: var(--white);
  box-shadow: inset 0 0 0 1px var(--v-hair-2, #D6DADF); color: var(--ink); text-align: left; font: 600 16px/20px var(--font); cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.order-sheet .o-cat > svg { flex: none; }
.order-sheet .o-cat-t { overflow-wrap: anywhere; }
.order-sheet .o-cat:active { transform: scale(.98); }
.order-sheet .o-cat[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.order-sheet .o-licence { margin: -8px 0 16px; }
.order-sheet .o-subrows { border-top: 1px solid var(--v-hair, #E6E8EB); }
.order-sheet .o-subrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; border: 0;
  border-bottom: 1px solid var(--v-hair, #E6E8EB); border-radius: 0; background: none; color: var(--ink); text-align: left; cursor: pointer;
  font: 500 16px/22px var(--font); }
.order-sheet .o-subrow > svg { flex: none; margin-left: auto; color: var(--v-mute, #5C6570); }
.order-sheet .o-subrow-m { min-width: 0; }
.order-sheet .o-subrow-t { display: block; overflow-wrap: anywhere; }
.order-sheet .o-subrow[aria-current="true"] .o-subrow-t { font-weight: 600; }
.order-sheet .o-subrow-s { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--v-mute, #5C6570); }
/* hover only where there is a pointer that hovers: a phone keeps no hover mark on the row its finger lands on next */
@media (hover: hover) {
  .order-sheet .o-cat:hover { box-shadow: inset 0 0 0 1px var(--v-field, #8A929B); }
  .order-sheet .o-cat[aria-current="true"]:hover { box-shadow: inset 0 0 0 2px var(--ink); }
  .order-sheet .o-subrow:hover .o-subrow-t { text-decoration: underline; text-decoration-color: var(--v-hair-2, #D6DADF); text-underline-offset: 3px; }
}
/* The rest of What: the pick as the heading, its category over it. */
.order-sheet .o-eyebrow { margin: 8px 0 -12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-mute, #5C6570); }

/* Details. */
.order-sheet .o-targets { margin-top: 12px; }
.order-sheet .emergency { border-radius: var(--r-card); }
.order-sheet .switch-row { margin: 12px 0 4px; }
/* 44 px targets: the switch's hit area grows past its 28 px track, the words toggle it, Remove is a full height button. */
.order-sheet .switch::after { content: ""; position: absolute; inset: -8px -4px; }
.order-sheet .switch-label { cursor: pointer; }
.order-sheet .filerow .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-right: -8px; }
.order-sheet .o-doc .help { margin-top: 8px; }
.order-sheet .o-doc .files { margin-top: 4px; }

/* Review. */
.order-sheet .o-rphotos { display: flex; gap: 8px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.order-sheet .o-rthumb { flex: none; width: 64px; height: 64px; border-radius: 10px; background: var(--mist); display: flex; align-items: center; justify-content: center; }
.order-sheet .o-rthumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.order-sheet .sums { border-radius: var(--r-card); margin-bottom: 8px; }
.order-sheet .sum { padding: 4px 16px 12px; border-top-color: var(--concrete); }
.order-sheet .sum h4 { font: 600 15px/20px var(--font); color: var(--steel); }
.order-sheet .sum-edit { min-height: 44px; min-width: 44px; padding: 0 0 0 12px; font-size: 15px; text-align: right; }
.order-sheet .sum-l { font-size: 15px; line-height: 22px; }
.order-sheet .review-line { margin-top: 20px; font-weight: 500; }

/* The keep-this-draft question rides above the bar under the steps (.sbar, 5): at 3 it sat under Continue and Cancel
   looked dead. The veil dims the sheet behind it. */
.order-sheet .keep-veil { position: absolute; inset: 0; z-index: 8; background: rgba(14, 17, 22, .32); }
.order-sheet .keep { z-index: 9; border-radius: var(--r-sheet) var(--r-sheet) 0 0; max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; }
/* Any window wider than a phone (the owner's staging walk, Nov 6: at 1280 by 720 the question sat on the window's bottom
   edge, cut off): a card in the middle of the window, every corner round, never taller than the window, its buttons
   always in view. The pay panel (.keep-pay) is the same box and stands the same way. */
@media (min-width: 600px) {
  .order-sheet .keep, .v2.v-order .keep, .v2.v-order .keep-pay { top: 50%; bottom: auto; left: 50%; right: auto; width: min(520px, calc(100% - 48px));
    max-height: calc(100% - 48px); transform: translate(-50%, -50%); border: 0; border-radius: var(--r-sheet); padding: 28px 28px 24px; }
}
.order-sheet .keep .dialog-btns .btn { min-height: 48px; }
/* The inspection booking's own question (inspection.js) has no veil element: its sheet is dimmed behind the card the same way. */
.insp-sheet:has(> .keep)::after { content: ""; position: absolute; inset: 0; z-index: 8; background: rgba(14, 17, 22, .32); }

/* The typed address: a card when it stands alone, a row of the list otherwise. */
.order-sheet .choice-open { display: flex; flex-direction: column; gap: 16px; }
.order-sheet .row-fields { gap: 16px; }
.order-sheet .o-form { border: 1px solid var(--concrete); border-radius: var(--r-card); overflow: hidden; }
.order-sheet .o-form .choice-open { border-top: 0; }
.order-sheet .o-form + .muted { margin-top: 12px; }
.order-sheet .o-thumb .ph-fail { width: 100%; height: 100%; }
.order-sheet .choice-open .field, .order-sheet .o-edit .field { margin-bottom: 0; }
.order-sheet .choice-open .chips { margin-top: 0; }
.order-sheet .choice-open .label { margin-bottom: 0; }

/* Read out by a screen reader, never drawn: what the sheet is doing (Sending your order). */
.order-sheet .o-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The way to pay asked for over the Send button (PAYMENT_METHOD_SPEC 6.3): the form can be taller than the question. */
.order-sheet .keep.keep-pay { max-height: 92%; overflow-y: auto; overscroll-behavior: contain; }
.order-sheet .keep.keep-pay .pay-slot { margin-top: 12px; }
.order-sheet .o-step .pay-slot { margin-top: 12px; }
.order-sheet .o-step .o-p { margin: 0 0 12px; font-size: 16px; line-height: 24px; max-width: 480px; }

/* ================================================================ look v2 (SPEC 7.14): Order a repair as a full screen flow
   The sheet is .v2.v-order: the whole screen at every width (the flow bar on top, the step in the middle, the primary
   action docked at the foot on the phone); from 1024 the step is a 560 px column. Its own classes take the v2 look. */
.v2.v-order.sheet { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; width: auto; max-width: none;
  height: auto; max-height: none; margin: 0; border-radius: 0; box-shadow: none; transform: none; background: var(--v-white); }
.v2.v-order .o-top { flex: none; min-height: 52px; padding: env(safe-area-inset-top) var(--v-gut) 0; border-bottom: 1px solid var(--v-hair); }
.v2.v-order .o-title { font-size: 16px; line-height: 22px; font-weight: 600; }
.v2.v-order .o-left { min-height: 44px; margin-left: -6px; padding: 0 6px; border-radius: var(--v-r-ctl); font-size: 16px; font-weight: 500; color: var(--v-mute); }
.v2.v-order .o-left:hover { background: none; color: var(--v-ink); }
.v2.v-order .o-prog { flex: none; padding: 12px var(--v-gut) 4px; }
.v2.v-order .o-prog .phase i { background: var(--v-hair); border-radius: 2px; }
.v2.v-order .o-prog .phase.done i, .v2.v-order .o-prog .phase.now i { background: var(--v-ink); }
.v2.v-order .o-prog .phase.now i::after { display: none; }       /* no orange in the progress (rule 3) */
.v2.v-order .o-prog .phase span { font-size: 14px; color: var(--v-mute); }
.v2.v-order .o-prog .phase.now span { color: var(--v-ink); font-weight: 600; }
.v2.v-order .order-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--v-gut) 32px; }
.v2.v-order .order-unsent { margin: 8px var(--v-gut); padding: 0 0 0 12px; border-radius: 0; background: none; box-shadow: inset 2px 0 0 var(--v-red);
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.v2.v-order .step-h, .v2.v-order .o-h { margin: 8px 0 16px; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.3px; }
.v2.v-order .o-sub-h { font-size: 15px; line-height: 20px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid var(--v-ink); }
.v2.v-order .order-foot.sbar { flex: none; display: flex; gap: 8px; padding: 12px var(--v-gut) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--v-hair); background: var(--v-white); box-shadow: none; }
@media (min-width: 1024px) {
  .v2.v-order .o-top { padding: 0 32px; min-height: 64px; }
  .v2.v-order .o-prog, .v2.v-order .order-body, .v2.v-order .order-unsent { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
  .v2.v-order .order-body { max-width: none; padding-left: max(0px, calc((100% - 560px) / 2)); padding-right: max(0px, calc((100% - 560px) / 2)); }
  .v2.v-order .order-foot.sbar { justify-content: center; padding: 16px max(32px, calc((100% - 560px) / 2)) 24px; }
}

/* fields, choices, tiles, chips and buttons in the v2 look */
.v2.v-order .field > label, .v2.v-order .label { display: block; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.v2.v-order .input, .v2.v-order .select, .v2.v-order .textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--v-r-ctl);
  background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-field); font-size: 16px; line-height: 22px; color: var(--v-ink); }
.v2.v-order .textarea { padding: 12px 14px; min-height: 100px; }
.v2.v-order .input:focus, .v2.v-order .select:focus, .v2.v-order .textarea:focus { box-shadow: inset 0 0 0 2px var(--v-ink); }
.v2.v-order .help, .v2.v-order .muted { font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2.v-order .error { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-red); }
.v2.v-order .choices { border: 0; border-top: 1px solid var(--v-hair); border-radius: 0; box-shadow: none; background: none; gap: 0; }
.v2.v-order .choice { min-height: 56px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--v-hair); border-radius: 0; background: none;
  box-shadow: none; color: var(--v-ink); }
.v2.v-order .choice:hover { background: none; }
.v2.v-order .choice-t { font-size: 16px; font-weight: 600; }
.v2.v-order .choice .sub { font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2.v-order .choice .dot { width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--v-field); }
.v2.v-order .choice[aria-checked="true"], .v2.v-order .choice[aria-pressed="true"] { background: none; box-shadow: none; }
.v2.v-order .choice[aria-checked="true"] .dot, .v2.v-order .choice[aria-pressed="true"] .dot { background: none; box-shadow: inset 0 0 0 6px var(--v-ink); }
.v2.v-order .o-tile { border: 0; border-radius: var(--v-r-ctl); background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-hair-2); color: var(--v-ink); }
.v2.v-order .o-tile[aria-pressed="true"], .v2.v-order .o-tile.on { box-shadow: inset 0 0 0 2px var(--v-ink); background: var(--v-white); }
.v2.v-order .chips .chip, .v2.v-order .o-chip { border: 0; border-radius: var(--v-r-ctl); background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-hair-2); color: var(--v-ink); }
.v2.v-order .o-chip[aria-pressed="true"], .v2.v-order .chips .chip[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--v-ink); background: var(--v-white); color: var(--v-ink); }
.v2.v-order .btn { min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--v-r-ctl); background: var(--v-white); color: var(--v-ink);
  box-shadow: inset 0 0 0 1px var(--v-hair-2); font-size: 16px; line-height: 22px; font-weight: 600; }
.v2.v-order .btn:hover { background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-field); }
.v2.v-order .btn-primary { background: var(--v-orange); color: var(--v-on-orange); box-shadow: none; }
.v2.v-order .btn-primary:hover { background: #DE4F17; box-shadow: none; }
.v2.v-order .btn-ink { background: var(--v-ink); color: var(--v-white); box-shadow: none; }
html.kbd .v2.v-order .btn-primary:focus-visible { box-shadow: inset 0 0 0 2px var(--v-white); }
.v2.v-order .link { color: var(--v-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; }
/* rows on hairlines, not boxes (rule 1); chips as 8 px rectangles */
.v2.v-order .o-row { padding: 12px 0; border: 0; border-top: 1px solid var(--v-hair); border-bottom: 1px solid var(--v-hair); border-radius: 0; background: none; box-shadow: none; }
.v2.v-order .chips > button, .v2.v-order .chips > .chip { min-height: 44px; border: 0; border-radius: var(--v-r-ctl); background: var(--v-white);
  box-shadow: inset 0 0 0 1px var(--v-hair-2); color: var(--v-ink); font-weight: 600; }
.v2.v-order .chips > [aria-pressed="true"], .v2.v-order .chips > [aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--v-ink); background: var(--v-white); color: var(--v-ink); }
/* review fixes (Codex S4): the page holds still behind the flow; focus rings are not clipped; at 1024 the action sits
   under the form and the whole flow scrolls; the draft question and the pay panel keep the form's column; the address
   picker on hairlines; 96 px photo thumbnails; links with a 44 px target on the phone */
html:has(.v-order) { overflow: hidden; }
.v2.v-order .choices { overflow: visible; }
@media (min-width: 1024px) {
  /* the body scrolls and the bar stays (Opus S4 1: the whole flow scrolling left steps opened mid page); the action docks */
  .v2.v-order .order-unsent { padding-left: 12px; }
}
.v2.v-order .choice-open { padding: 12px 0; border-radius: 0; background: none; }
.v2.v-order .o-form { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.v2.v-order .o-thumb { width: 96px; height: 96px; border-radius: var(--v-r-ctl); }
@media (max-width: 1023px) {
  .v2.v-order .order-body a:not([class]) { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Opus S4: a capped list scrolls; old boxes become rows (rule 1); the emergency block as a red bar, its call button big;
   headings keep their weight under the :where() reset; one rule under a label */
.v2.v-order .choices.o-capped { overflow-y: auto; }
.v2.v-order .card.sums, .v2.v-order .sums { padding: 0; border: 0; border-top: 1px solid var(--v-ink); border-radius: 0; box-shadow: none; background: none; }
.v2.v-order .sum { padding: 12px 0; border-bottom: 1px solid var(--v-hair); }
.v2.v-order .o-edit { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.v2.v-order .emergency { padding: 4px 0 4px 14px; border: 0; border-radius: 0; background: none; box-shadow: inset 2px 0 0 var(--v-red); }
.v2.v-order .emergency h3, .v2.v-order .keep h3 { font-weight: 600; }
.v2.v-order .keep h3 { font-size: 20px; line-height: 26px; }
.v2.v-order .tel-big { min-height: 56px; font-size: 20px; }
.v2.v-order .o-sub-h { margin-bottom: 0; }
.v2.v-order .o-sub-h + .choices, .v2.v-order .o-sub-h + .o-row { border-top: 0; }

/* The first order's ask (design pass, board 6a): the owner's sheet holds the way to pay form at once, its heading at the
   step's weight and the server's line under it; the member's sheet closes on one outlined Close, full width; the
   emergency receipt's Add a way to pay is full width too. */
.v2.v-order .keep.keep-pay h3 { margin: 0 0 4px; font-size: 22px; line-height: 28px; }
.v2.v-order .keep.keep-pay .pay-slot { margin-top: 16px; outline: none; }
.v2.v-order .keep .o-line { flex: 1; background: var(--v-white); color: var(--v-ink); box-shadow: inset 0 0 0 1.5px var(--v-ink); }
.v2.v-order .keep .o-line:hover { background: var(--v-fill); box-shadow: inset 0 0 0 1.5px var(--v-ink); }
.v2.v-order .o-receipt .dialog-btns .btn { flex: 1; }