/* ============================================================
   Taily v5 — components (new in M0). Loaded after components.css, which
   keeps the v4 pieces v5 reuses (cta, pill, chip, info-card, bubble,
   fee-row, sheet, scheduler …). Tokens only: no literal colours, only
   the Figma type scale (--size-10 / 12 / 16 / 24 / 28 / 32 / 36), every
   tappable >= 44 x 44, strokes inside (inset box-shadow), and motion
   switched off under prefers-reduced-motion.
   ============================================================ */

/* ---------- a11y plumbing: the screen's h1 takes focus on arrival (no ring), the sticky action bar's height is --bar-h (router) ---------- */
#screen h1:focus { outline: none; }
:root { --bar-h: 96px; }
html:has(.action-bar) { scroll-padding-bottom: var(--bar-h); }

/* ---------- shared: focus ring + reduced motion ---------- */
:where(button, a, input, textarea, select, [role="switch"], [role="radio"], [role="button"]):focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
/* A programmatic focus target (a message or heading focused for screen readers) is not a control: no UA ring. */
[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .toggle::before, .toggle__knob, .chip-group__chip, .segmented__opt, .composer__send,
  .check-row__box, .option-row, .skeleton__line, .skeleton__dot, .skeleton__bubble, .skeleton__card { transition: none; animation: none; }
}

/* ============================================================
   M7 (K-03) — the one container, the rhythm utilities and the section head. Placed early so a component's own rules win.
   ============================================================ */
/* A4 (D-193): ONE depth strategy — an interactive group is tissue white with a chalk ring; reference content is flat on the linen */
.card { width: 100%; padding: var(--space-16); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-ring); }
.card--list { padding: 0 var(--space-16); }
.info-block { display: flex; flex-direction: column; gap: var(--rhythm-tight); width: 100%; }
.tabular { font-variant-numeric: tabular-nums lining-nums; }

/* A3 (K-03 #9): space is the separator — 8 inside a group, 32 between, 40 around the hero and the page actions */
.sec { display: flex; flex-direction: column; gap: var(--rhythm-tight); margin-top: var(--rhythm-section); }
.sec--first, .heading-after + .sec, .heading-row + .sec { margin-top: var(--rhythm-major); }
.hero + .sec { margin-top: var(--rhythm-major); }   /* P2-1 (D-228): the first section under a hero / summary block, written once (was copied into four screen files) */
/* P2-1 (D-228): ONE heading-to-content rule. Into a section that carries a caps label = --rhythm-major (40, above); into an unlabelled
   card / banner / empty state = --rhythm-block (24); a stepper's title sits 12 under it (what is above a title belongs to it, K-06). */
.stepper + :is(.t-title, .heading-row, .heading-block) { margin-top: var(--rhythm-group); }
.heading-row ~ [data-empty], .heading-after ~ [data-empty] { margin-top: var(--rhythm-block); }
.sec__body { display: flex; flex-direction: column; gap: var(--rhythm-tight); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 16px; margin-bottom: var(--space-4); }
.sec-head__title { margin: 0; }
.sec-head__aside { display: inline-flex; align-items: center; gap: var(--space-4); }
.page-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--rhythm-group); margin-top: var(--rhythm-major); }
.page-actions__links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-24); }

/* ---------- K-07 / K-08: chrome on the page ground; hairline on the action bar only ----------
   The status bar, top nav, Back-only bar, flow bar and onboarding bar are all --neutral-50 with NO line under them (K-08); they scroll
   away with the page (not pinned). Only the sticky action bar keeps a line: js/app.js (wireScrollEdges) sets #screen[data-more] while
   content continues below the viewport and the 1px --hairline on the bar's top edge fades in then. html.is-test already kills
   transitions (base.css), so a baseline is static; reduced motion drops the fade too. */
/* K-09 / P3-7: the thread composer bars (c-thread, t-thread) are the same bar: linen ground, the hairline only while content continues under them */
.action-bar::before, .c-thread__foot::before, .t-thread__foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline); opacity: 0; pointer-events: none; transition: opacity 150ms var(--ease-out); }
#screen[data-more="true"] .action-bar::before, #screen[data-more="true"] .c-thread__foot::before, #screen[data-more="true"] .t-thread__foot::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .action-bar::before, .c-thread__foot::before, .t-thread__foot::before { transition: none; } }

/* ---------- top nav: four icon links, each a 44 x 44 hit area (M7 A5.2; base.css owns the box + active stitch) ---------- */
.top-nav__links { gap: var(--space-4); margin-right: calc(-1 * var(--space-8)); }
.nav-icon { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.top-nav__icon { position: relative; display: inline-flex; }
/* K-06 (D-221): the Back chevron takes the logo's place at the left: a 44 x 44 target, the chevron's stroke edge on the 20 px gutter */
.top-nav__back { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 0 0 0 calc(-1 * var(--space-16)); padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink); font: inherit; }
.top-nav__back::after { content: ''; position: absolute; inset: 0; }
.top-nav__back:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.top-nav--back .top-nav__links { margin-left: auto; }
@media (hover: hover) { .top-nav__back:hover { background: var(--neutral-50); } }
/* D-164 / D-187: count dot hangs off the icon's corner so no link ever shifts */
.top-nav__dot { position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent-base); box-shadow: 0 0 0 2px var(--neutral-50); }
@media (hover: hover) {
  .top-nav__link:not(.is-active):hover { color: var(--ink); background: var(--neutral-50); }
}
@media (max-width: 22.4375em) {
  .top-nav__logo { width: 60px; height: 28px; }
}

/* ---------- v4 pieces v5 keeps, raised to a 44 px hit area (layout unchanged) ---------- */
.cta-small { min-height: 44px; }
.cta-small--filled { background: var(--ink); color: var(--white); box-shadow: none; }   /* K2-1-03: the primary small action */
.cta-small--filled:disabled { opacity: .5; cursor: not-allowed; }
.cta-small--filled:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.select-time { min-height: 44px; }
.filter-pill__box { min-height: 44px; }
.filter-pill__option { min-height: 44px; }
.link-row { min-height: 44px; padding-block: 0; }
.sheet__cancel, .sheet__confirm { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.sheet__cancel { justify-content: center; margin-left: calc(-1 * var(--space-12)); }   /* centred glyph in its 44 px target; -12 keeps the optical gutter (M6-C-25) */
.sheet__confirm { justify-content: flex-end; }
.sheet__spacer { display: inline-block; min-width: 44px; min-height: 44px; }
.sheet__cancel:focus-visible, .sheet__confirm:focus-visible { border-radius: var(--radius-full); outline: 2px solid var(--ink); outline-offset: 2px; }
.sheet__cancel[data-pfocus]:focus-visible, .sheet__confirm[data-pfocus]:focus-visible { outline: none; }   /* no ring on programmatic focus (wireSheetA11y) */
/* visual box stays put; an invisible pseudo-element carries the 44 px target (data-hit="inline") */
.back { position: relative; }
.back::after { content: ''; position: absolute; inset: calc(-1 * var(--space-4)) -11px; }   /* R3-1-C-14: 23x36 glyph box + 4 / 11 => a 45x44 target, glyph stays on the gutter */
/* selected garment tile: icons (40) · label (16) · a 44 px row of two sibling buttons, − and + (R1-1-C-04, C-05) */
.garment-tile--selected { justify-content: flex-start; padding: var(--space-4) 0 0; border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }   /* M7-2-C-02: inside stroke, no v4 drop shadow (D-193) */
.garment-tile--selected:active { transform: none; }
.garment-tile--selected .garment-tile__icons { width: 100%; flex: 0 0 40px; align-content: center; }
.garment-tile--selected.garment-tile--grid .garment-tile__icons { width: 53px; }
.garment-tile--selected .garment-tile__label { flex: 0 0 calc(var(--size-12) * var(--lh-12)); overflow: hidden; text-overflow: ellipsis; padding-inline: var(--space-4); }
.garment-tile__ctl { display: flex; width: 100%; margin-top: auto; box-shadow: inset 0 1px 0 var(--neutral-200); }
.garment-tile__step { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 44px; min-height: 44px; color: var(--neutral-700); }
.garment-tile__step:active { background: var(--neutral-100); }
.garment-tile__step:disabled { color: var(--neutral-300); cursor: not-allowed; }
.garment-tile__step + .garment-tile__step { box-shadow: inset 1px 0 0 var(--neutral-200); }
.garment-tile__glyph { width: 14px; height: 14px; display: block; }

/* ---------- avatar: sm 40 · md 56 · lg 80 ---------- */
.avatar--sm { width: 40px; height: 40px; font-size: var(--size-16); line-height: var(--lh-16); }
.avatar--md { width: 56px; height: 56px; font-size: var(--size-16); line-height: var(--lh-16); }
.avatar--lg { width: 80px; height: 80px; font-size: var(--size-24); line-height: var(--lh-24); font-weight: 600; }   /* R1-2-C-11: initials are Hanken sans at every size */
.avatar--photo { overflow: hidden; }
.avatar--glyph .icon-hanger { width: var(--size-24); height: var(--size-24); }   /* CR-m4 */
.avatar--placeholder .icon-camera { width: var(--size-24); height: var(--size-24); }
.avatar--mark { color: var(--accent-ink); }   /* K-54 P6 (D-464): Taily Help's own mark in the well, never initials */
.avatar--mark svg { width: var(--size-24); height: var(--size-24); }
.avatar__img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- tailor row (K-19, option Q "Cognac rule") ---------- */
.tailor-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-12);
  min-height: 44px;
  text-align: left;
}
.tailor-row__head { display: grid; grid-template-columns: var(--space-40) minmax(0, 1fr) auto; gap: 0 var(--space-12); align-items: start; }
.tailor-row__who { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding-top: var(--space-2); }
.tailor-row__name-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); min-width: 0; }
.tailor-row__name { min-width: 0; font-family: var(--font-sans); font-size: var(--size-16); line-height: var(--lh-16); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.tailor-row__name-row .verified { color: var(--success-ink); }
.tailor-row__rating { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; color: var(--neutral-700); font-variant-numeric: tabular-nums lining-nums; }
.tailor-row__star { color: var(--accent-base); }
.tailor-row__rating-n { font-weight: 500; color: var(--neutral-600); }
.tailor-row__rating--years { font-weight: 500; }
/* the estimate is the focal element: "$160" at 24 / 600 tabular, "Est." under it (R1-1-C-17, K-19) */
.tailor-row__quote { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; text-align: right; }
.tailor-row__amt { font-family: var(--font-sans); font-size: var(--size-24); line-height: var(--lh-24); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.tailor-row__est { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; color: var(--neutral-600); }
/* the card line: a margin note, 8 px off a 2 px cognac rule; it wraps and the card grows (never truncated) */
.tailor-row__line { display: block; min-width: 0; padding: var(--space-2) 0 var(--space-2) var(--space-8); box-shadow: inset 2px 0 0 var(--accent-base); font-size: var(--size-12); line-height: var(--lh-12); font-weight: 400; color: var(--neutral-700); text-wrap: pretty; overflow-wrap: break-word; }
.tailor-row__facts { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-12); box-shadow: inset 0 1px 0 var(--hairline); }
.tailor-row__fact { display: flex; align-items: flex-start; gap: var(--space-8); font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-700); }
.tailor-row__fact-t { min-width: 0; text-wrap: pretty; }
.tailor-row__glyph { display: inline-flex; flex: 0 0 auto; color: var(--neutral-500); }
.tailor-row__glyph svg { width: var(--size-16); height: var(--size-16); }
.tailor-row__fact--next { font-weight: 600; color: var(--accent-ink); }
.tailor-row__fact--next .tailor-row__glyph { color: var(--accent-base); }
.tailor-row__booked { display: block; padding-top: var(--space-8); font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-600); text-wrap: pretty; }
.tailor-row__note { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; color: var(--neutral-700); }
.tailor-row--declined { opacity: 0.55; cursor: not-allowed; }
/* S-18 (pre-MVP sweep, D-442): a stretched-link card (the K-25 request-card pattern) — the link covers the card; the Verified check sits above it */
.tailor-row { position: relative; }
.tailor-row__link { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tailor-row__link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.tailor-row .verified { z-index: 2; }

/* ---------- price row ---------- */
.price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 44px; padding-block: var(--space-8); }
.price-row + .price-row { box-shadow: inset 0 1px 0 var(--hairline); }
.price-row__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.price-row__label { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 500; color: var(--ink); }
.price-row__note { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-500-ink); }
.price-row__value { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-row--muted .price-row__label, .price-row--muted .price-row__value { color: var(--neutral-500-ink); }
.price-row--muted .price-row__value { font-weight: 400; }

/* ---------- stars · rating summary · review row ---------- */
.stars { display: inline-flex; align-items: center; color: var(--neutral-300); font-size: var(--size-16); line-height: var(--lh-16); letter-spacing: 1px; }
.stars__star.is-filled, .stars__opt.is-filled .stars__star { color: var(--accent-ink); }
.stars--input { letter-spacing: 0; }
.stars__opt { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
/* M7-1-A-06: an unrated star is an OUTLINE (it never reads as a grey 5-star rating); it fills accent when chosen or hovered up to the pointer */
.stars--input .stars__star { font-size: var(--size-24); line-height: var(--lh-24); color: transparent; -webkit-text-stroke: 1.5px var(--neutral-500); }
.stars--input .stars__opt.is-filled .stars__star { color: var(--accent-ink); -webkit-text-stroke-color: var(--accent-ink); }
@media (hover: hover) {
  .stars--input .stars__opt:hover .stars__star, .stars--input .stars__opt:has(~ .stars__opt:hover) .stars__star { color: var(--accent-ink); -webkit-text-stroke-color: var(--accent-ink); }
}
.stars__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.stars__opt:has(.stars__input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--radius-md); }
.review-row { display: flex; flex-direction: column; gap: var(--space-8); padding-block: var(--space-16); }
.review-row + .review-row { box-shadow: inset 0 1px 0 var(--hairline); }
.review-row__head { display: flex; align-items: center; gap: var(--space-12); }
.review-row__who { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.review-row__name { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 600; color: var(--ink); }
.review-row__date { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-500-ink); }
.review-row__text { margin: 0; font-size: var(--size-16); line-height: var(--lh-16); font-weight: 400; color: var(--ink); }
.review-row__photos { display: flex; gap: var(--space-8); }

/* ---------- countdown ---------- */
.countdown { display: inline-flex; align-items: center; font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; font-variant-numeric: tabular-nums; }
.countdown--normal { color: var(--neutral-600); }
.countdown--soon { color: var(--warning-ink); }
.countdown--expired { color: var(--error-ink); }
/* CR-4b: the one deadline line of a request ("2h left · answer by 12:00 PM") */
.countdown--line { display: block; font-size: var(--size-16); line-height: var(--lh-16-roomy); }
.countdown--line.countdown--normal { color: var(--accent-ink); }

/* ---------- chat ---------- */
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 100%; }
.chat-msg--me { align-items: flex-end; }
.chat-bubble { display: flex; flex-direction: column; gap: var(--space-8); overflow-wrap: anywhere; }
.chat-bubble__photos { display: flex; gap: var(--space-8); }
.chat-msg--sending .bubble { opacity: 0.6; }
.chat-msg--failed .bubble { box-shadow: inset 0 0 0 1px var(--error); }
.chat-msg__meta { display: flex; flex-direction: column; align-items: inherit; max-width: var(--chat-measure); padding-inline: var(--space-4); }
.chat-msg--me .chat-msg__meta { text-align: right; }
.chat-msg__time, .chat-msg__status, .chat-msg__note { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-500-ink); }
.chat-msg__note { color: var(--neutral-600); text-wrap: balance; }   /* R5-1-C-08 / T-08: two even lines, no orphan */
.empty-state__body, .leave-modal__body, .modal__body { text-wrap: pretty; }
.chat-msg__retry { min-height: 44px; min-width: 44px; padding-block: var(--space-12); margin-block: calc(-1 * var(--space-12)); padding-inline: var(--space-8); font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; color: var(--error-ink); text-align: right; }
.privacy-note { display: flex; align-items: flex-start; gap: var(--space-8); margin: 0; font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-600); }
.privacy-note__glyph { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--neutral-400); font-size: var(--size-10); line-height: var(--lh-10); font-weight: 600; color: var(--neutral-600); }
.read-only { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; }
.composer { display: flex; align-items: center; gap: var(--space-8); width: 100%; }
.composer__attach { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-200); color: var(--neutral-600); }
.composer__input { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 var(--space-16); border: 0; border-radius: var(--radius-20); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-500); font-family: var(--font-sans); font-size: var(--size-16); line-height: var(--lh-16); color: var(--ink); }
.composer__input::placeholder { color: var(--neutral-500-ink); }
.composer__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ink); }
.composer__send { flex-shrink: 0; min-width: 64px; min-height: 44px; padding-inline: var(--space-16); border-radius: var(--radius-20); background: var(--ink); color: var(--neutral-50); font-size: var(--size-16); line-height: var(--lh-16); font-weight: 600; transition: opacity 150ms ease; }
.composer__attach svg { width: var(--size-24); height: var(--size-24); flex: 0 0 auto; color: var(--neutral-600); }   /* R1-2-C-05: the camera sits inside its 44px ring */
.composer__send:disabled { opacity: 1; background: var(--neutral-200); color: var(--neutral-600); cursor: not-allowed; }
.composer__attach:disabled { opacity: 0.4; cursor: not-allowed; }
.composer--disabled .composer__input { background: var(--neutral-100); color: var(--neutral-500-ink); }

/* ---------- field · code input ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.field__label { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; color: var(--neutral-700); }
.field__label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.field__label-row .info-btn { margin-block: calc((var(--size-12) * var(--lh-12) - var(--touch)) / 2); margin-right: calc(-1 * var(--space-12)); }   /* B5 P3-11: the ⓘ is in the label row (44 px target, 16 px of row height) */
.field__box { display: flex; align-items: center; min-height: 48px; border-radius: var(--radius-md); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-500); }
.field__box:focus-within { box-shadow: inset 0 0 0 2px var(--accent-ink); }
.field__input { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 var(--space-16); border: 0; border-radius: var(--radius-md); background: transparent; font-family: var(--font-sans); font-size: var(--size-16); line-height: var(--lh-16); font-weight: 500; color: var(--ink); }
.field__input:focus { outline: none; }
.field__input::placeholder { color: var(--neutral-500-ink); font-weight: 400; }
.field__affix { padding-left: var(--space-16); font-size: var(--size-16); line-height: var(--lh-16); font-weight: 500; color: var(--neutral-500-ink); }
.field__affix + .field__input { padding-left: var(--space-4); }
.field__input + .field__affix { padding: 0 var(--space-16) 0 0; }
.field__msg { margin: 0; font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-600); }
.field__msg--error { color: var(--error-ink); font-weight: 600; }
.field--error .field__box { box-shadow: inset 0 0 0 1px var(--error); }
.field--error .field__box:focus-within { box-shadow: inset 0 0 0 2px var(--error); }
.field--disabled .field__box { background: var(--neutral-100); box-shadow: inset 0 0 0 1px var(--neutral-200); }
.field--disabled .field__input, .field--disabled .field__affix { color: var(--neutral-500-ink); cursor: not-allowed; }
.field--code .field__box { min-height: 56px; }
.field--code .field__input { min-height: 56px; text-align: center; font-size: var(--size-24); line-height: var(--lh-24); font-weight: 600; letter-spacing: 8px; font-variant-numeric: tabular-nums; }
.field--code .field__input::placeholder { color: var(--neutral-300); }

/* ---------- toggle ---------- */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 56px; padding-block: var(--space-4); }
.toggle-row__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.toggle-row__label { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 500; color: var(--ink); }
.toggle-row__helper { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-600); }
.toggle { position: relative; flex-shrink: 0; width: 52px; height: 44px; }
.toggle::before { content: ''; position: absolute; inset: var(--space-8) 0; border-radius: var(--radius-full); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--neutral-500); transition: background-color var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out); }
/* K-04 / CR-2: off = a white track with a 1.5 px outline and a 20 px grey knob; on = an ink track and the 28 px white knob */
.toggle__knob { position: absolute; top: var(--space-12); left: var(--space-8); width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--neutral-500); transition: transform var(--dur-press) var(--ease-out), width var(--dur-press) var(--ease-out), height var(--dur-press) var(--ease-out), top var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out); }
.toggle[aria-checked="true"]::before { background: var(--ink); box-shadow: none; }
.toggle[aria-checked="true"] .toggle__knob { top: var(--space-8); width: 28px; height: 28px; background: var(--white); transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .toggle::before, .toggle__knob { transition: none; } }
.toggle:disabled { opacity: 0.45; cursor: not-allowed; }
.toggle-row--disabled .toggle-row__label { color: var(--neutral-500-ink); }

/* ---------- check row ---------- */
.check-row-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.check-row { position: relative; display: flex; align-items: center; gap: var(--space-12); min-height: 44px; width: 100%; cursor: pointer; }
.check-row__input { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.check-row__box { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-500); font-size: var(--size-12); line-height: var(--lh-12); font-weight: 700; color: transparent; transition: background-color 120ms ease; }
.check-row__input:checked + .check-row__box { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--neutral-50); }
.check-row__input:focus-visible + .check-row__box { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.check-row__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-block: var(--space-8); }
.check-row__label { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 500; color: var(--ink); }
.check-row__caption { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-600); }
.check-row-wrap--error .check-row__box { box-shadow: inset 0 0 0 1px var(--error); }

/* ---------- chip group · segmented ---------- */
.chip-group { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.chip-group__label { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; color: var(--neutral-700); }
.chip-group__options { display: flex; flex-wrap: wrap; gap: var(--space-8); }
/* P1-3 (D-224): a chip in a wrapping group may wrap its own label rather than clip */
.chip-group__options .chip { white-space: normal; text-wrap: balance; max-width: 100%; min-width: 0; text-align: center; }
.chip-group__chip { min-height: 44px; flex-direction: column; gap: var(--space-2); }
.chip-group__caption { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; }
.segmented__opt .chip-group__caption { color: var(--neutral-600); }
.segmented__opt.is-selected .chip-group__caption { color: var(--neutral-300); }
.chip-group__chip:disabled, .segmented__opt:disabled { opacity: 0.45; cursor: not-allowed; }
.chip-group--error .chip:not(.chip--selected) { box-shadow: inset 0 0 0 1px var(--error); }
.segmented { display: flex; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-20); background: var(--neutral-100); box-shadow: inset 0 0 0 1px var(--neutral-200); }
.segmented__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; min-height: 44px; padding: var(--space-8) var(--space-12); border-radius: var(--radius-full); font-size: var(--size-16); line-height: var(--lh-16); font-weight: 600; color: var(--neutral-600); transition: background-color 150ms ease, color 150ms ease; }
.segmented__opt.is-selected { background: var(--ink); color: var(--neutral-50); }
.chip-group--error .segmented { box-shadow: inset 0 0 0 1px var(--error); }

/* ---------- stepper ---------- */
.stepper { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.stepper__text { margin: 0; font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; color: var(--neutral-700); }
.stepper__bar { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }   /* SF-42: an <ol> in both variants */
.stepper__seg { flex: 1 1 0; height: 5px; border-radius: var(--radius-4); background: var(--neutral-100); box-shadow: inset 0 0 0 1px var(--neutral-200); }
.stepper__seg--done { background: var(--ink); box-shadow: none; }
.stepper__seg--current { background: var(--accent-ink); box-shadow: none; }
/* compact: the booking progress — "Step n of 5 · name" over 5 segments 3 px high; not interactive (K-04 / CR-6a) */
.stepper--compact { flex-direction: column; align-items: stretch; gap: var(--space-8); }   /* its title sits 12 under it (.stepper + .t-title) */
.stepper--compact .stepper__bar { width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none; }
.stepper--compact .stepper__seg { flex: 1 1 0; height: 3px; border-radius: var(--radius-full); background: var(--neutral-200); box-shadow: none; }
.stepper--compact .stepper__seg--done { background: var(--ink); }
.stepper--compact .stepper__seg--current { background: var(--accent-ink); }
.stepper__count { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- cta: busy spinner + the disabled attribute ---------- */
.cta { gap: var(--space-8); }
/* K-04 / CR-1a: disabled, soft-disabled (aria-disabled) = a flat neutral-200 button with neutral-600 text at full opacity (7:1 on the fill).
   A busy button keeps its ink fill and spinner; it is aria-disabled + aria-busy but not `disabled` (AU-P1-2c). */
.cta:disabled, .cta--disabled, .cta[aria-disabled="true"]:not(.cta--busy) { opacity: 1; background: var(--neutral-200); color: var(--neutral-600); }
.cta--busy { background: var(--ink); color: var(--neutral-50); }
.cta--danger.cta--busy { background: var(--error); color: var(--white); }
.cta:disabled, .cta--disabled { cursor: not-allowed; }
.cta:disabled:active, .cta--disabled:active { transform: none; }
.cta--busy { cursor: progress; }
/* K-46 (D-303) · the two-line cta: "Pay $144.00" over a 12 / 500 line ("Charged at pickup", neutral-300 on ink 9.6:1); disabled, the
   reason in neutral-600 / 600 on neutral-200 (5.1:1). Grows past 54 px only when a line wraps (320 px, 200% text). */
.cta--two { height: auto; min-height: 54px; flex-direction: column; gap: var(--space-2); padding: var(--space-8) var(--space-16); text-align: center; }
.cta__main { display: inline-flex; align-items: center; gap: var(--space-8); font-variant-numeric: tabular-nums lining-nums; }
.cta__sub { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-300); text-wrap: balance; }
.cta--two:disabled .cta__sub, .cta--two.cta--disabled .cta__sub { color: var(--neutral-600); font-weight: 600; }
.cta__spinner {
  flex-shrink: 0; width: var(--size-16); height: var(--size-16); border-radius: var(--radius-full);
  border: 2px solid var(--white); border-top-color: transparent;
}
.cta--secondary .cta__spinner { border-color: var(--ink); border-top-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .cta__spinner { animation: cta-spin 800ms linear infinite; }
}
@keyframes cta-spin { to { transform: rotate(360deg); } }

/* ---------- action bar: sticky bottom bar on the page ground (K-07), a sibling of main.body inside #screen ---------- */
.screen:has(> .action-bar) { display: flex; flex-direction: column; }
.screen > .body--with-bar { flex: 1 0 auto; padding-bottom: calc(var(--bar-h) + var(--space-24)); }
.action-bar {
  position: sticky; bottom: 0; z-index: var(--z-sticky); flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--space-8);
  width: 100%; max-width: var(--column); padding: var(--space-12) var(--space-20) calc(var(--space-20) + var(--safe-bottom));
  background: var(--neutral-50);
}
.action-bar__lead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); margin: 0; font-variant-numeric: tabular-nums; }
.action-bar__lead b { font-weight: 600; color: var(--ink); }
.action-bar__note { margin: 0; text-align: center; }
/* K-09 / P1-5: a bar over a quarter of the viewport (short screen, 200% text) stops being sticky: it becomes the page's closing block.
   js/app.js sets #screen[data-bar-tall]; [data-more] and the hairline are moot while static. */
#screen[data-bar-tall] .action-bar { position: static; }
#screen[data-bar-tall] .action-bar::before { display: none; }
#screen[data-bar-tall] .body--with-bar { padding-bottom: var(--rhythm-major); }

/* ---------- option row: a single-select row for sheets ---------- */
.option-row {
  display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: 56px; padding-block: var(--space-8);
  text-align: left; box-shadow: inset 0 -1px 0 var(--neutral-100);
}
.option-row:last-child { box-shadow: none; }
.option-row__lead { display: inline-flex; align-items: center; justify-content: flex-start; flex-shrink: 0; min-width: var(--size-32); }
.option-row__lead .garment-icon--card { background: none; box-shadow: none; border-radius: 0; overflow: visible; }   /* K-05: the add-item sheet row shows the bare 40 px illustration, no well */
.option-row__text { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.option-row__check {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--size-24); height: var(--size-24); border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 2px var(--neutral-300); color: var(--white);
  font-size: var(--size-12); line-height: var(--lh-12); font-weight: 700;
}
.option-row.is-checked .option-row__check { background: var(--ink); box-shadow: none; }

/* ---------- list row ---------- */
.list-row { display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: 56px; padding-block: var(--space-8); text-align: left; }
.list-row + .list-row { box-shadow: inset 0 1px 0 var(--hairline); }
.list-row__lead { display: inline-flex; align-items: center; justify-content: flex-start; flex-shrink: 0; min-width: var(--size-32); }
.list-row__text { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.list-row__title { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 500; color: var(--ink); }
.list-row__sub { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-500-ink); text-wrap: pretty; }
.list-row__right { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 400; color: var(--neutral-600); }
.list-row__tag { display: inline-block; padding: var(--space-2) var(--space-8); border-radius: var(--radius-full); background: var(--accent-bg); color: var(--accent-ink); letter-spacing: 1px; white-space: nowrap; }   /* P3-1: the "Default" tag on saved-item rows (c-addresses, c-cards) */
.list-row__chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--neutral-500); }

/* ---------- skeleton ---------- */
.skeleton { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; }
.skeleton__line, .skeleton__dot, .skeleton__bubble { background: var(--neutral-100); }
.skeleton__line { display: block; height: 16px; width: 100%; border-radius: var(--radius-sm); }
.skeleton__line--w40 { width: 40%; }
.skeleton__line--w60 { width: 60%; }
.skeleton__line--w80 { width: 80%; }
.skeleton__card { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-lg); background: var(--white); }
.skeleton__card--row { align-items: stretch; }   /* head + cognac-ruled card line + hairline facts = the shape of tailorRow (R1-2-C-09, K-19) */
.skeleton__who { display: flex; align-items: flex-start; gap: var(--space-12); }
.skeleton__price { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); width: calc(var(--space-40) + var(--space-24)); flex-shrink: 0; }
.skeleton__card--row .skeleton__dot { width: var(--space-40); height: var(--space-40); border-radius: var(--radius-full); }
.skeleton__note { display: flex; flex-direction: column; gap: var(--space-4); padding-left: var(--space-8); box-shadow: inset 2px 0 0 var(--neutral-100); }
.skeleton__lower { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-12); border-top: 1px solid var(--neutral-100); }
.skeleton__dot { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-lg); }
.skeleton__lines { display: flex; flex-direction: column; gap: var(--space-8); flex: 1 1 0; }
.skeleton__thread { display: flex; flex-direction: column; gap: var(--space-12); }
.skeleton__bubble { height: 44px; width: 62%; border-radius: var(--radius-lg); }
.skeleton__bubble--me { align-self: flex-end; width: 50%; }
.skeleton__bubble--short { width: 36%; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton__line, .skeleton__dot, .skeleton__bubble { animation: skeleton-pulse 1.4s ease-in-out infinite; }
}
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ---------- empty state ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); padding: var(--space-40) var(--space-20); text-align: center; }
.empty-state__title, .empty-state__body { max-width: 320px; }
.empty-state__title { text-wrap: balance; color: var(--ink); }
/* R1-1-C-12: Cormorant draws old-style figures by default ("11201" reads "IIzoI", "$16.00" reads "$I6.oo");
   money, ZIPs and ratings in serif always use lining figures */
.t-display, .t-title, .t-h2, .status-hero__title, .visit-block__title,
.trust-card__name, .scheduler__title, .avatar--lg { font-variant-numeric: lining-nums; }
.meta-row__glyph svg { width: var(--size-16); height: var(--size-16); flex: 0 0 auto; }   /* R1-2-C-04: line icons, one set */
.meta-row__glyph { flex: 0 0 var(--glyph-box); display: inline-flex; align-items: center; justify-content: center; }   /* R1-1-C-13: one glyph column, so every text line starts at the same x */
.visit-block--flush { padding-inline: 0; }
.visit-block--flush .visit-block__row { white-space: pre-wrap; }
/* K-10 (D-235): Option A "Icon rows" — rows 16 apart, icon box = one 16-size text line so the icon centres on the first line, value + detail 2 apart */
/* K-14 (D-240) "Icon tiles match the avatar": one column of 40 px circles (avatar + icon tiles) on one axis, one text edge for every row.
   The text column is >= one tile tall and centres on it; a --tall row (garment tiles under the count) top-aligns the first line to the tile. */
.visit-rows { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-4); }
.visit-row { display: flex; align-items: flex-start; gap: var(--space-12); }
.visit-row__icon { flex: 0 0 var(--space-40); display: inline-flex; align-items: center; justify-content: center; width: var(--space-40); height: var(--space-40); border-radius: var(--radius-full); background: var(--neutral-100); color: var(--neutral-600); }
.visit-row__icon svg { width: var(--glyph-box); height: var(--glyph-box); flex: 0 0 auto; }
.visit-row__icon--avatar { background: none; }
.visit-row__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; min-height: var(--space-40); }
.visit-row--tall .visit-row__text { justify-content: flex-start; padding-top: calc((var(--space-40) - var(--size-16) * var(--lh-16)) / 2); }
.visit-row__value { color: var(--ink); overflow-wrap: break-word; max-width: 100%; }
.visit-row__detail { display: block; overflow-wrap: break-word; max-width: 100%; }
.visit-row__text .garment-strip { margin-top: var(--space-4); padding-block: 0; }
.visit-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.filter-pill__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-pill__box .select-time__chevron { flex-shrink: 0; }
.empty-state__actions { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; margin-top: var(--space-12); }

/* ---------- banner ---------- */
.banner { display: flex; align-items: flex-start; gap: var(--space-12); width: 100%; padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); }
.banner--info { background: var(--accent-bg); color: var(--accent-ink); }   /* M7: no blue anywhere */
.banner--success { background: var(--success-bg); color: var(--success-ink); }
.banner--warning { background: var(--warning-bg); color: var(--warning-ink); }
.banner--error { background: var(--error-bg); color: var(--error-ink); }
.banner__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); flex: 1 1 0; min-width: 0; }
.banner__title { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 600; }
.banner__text { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 500; }
.banner__title + .banner__text { font-size: var(--size-12); line-height: var(--lh-12); }
.banner__action { min-height: 44px; padding-right: var(--space-8); font-size: var(--size-12); line-height: var(--lh-12); font-weight: 700; text-align: left; }
.banner__action::after { content: ' ›'; }
.banner__close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin: calc(-1 * var(--space-12)) calc(-1 * var(--space-16)) calc(-1 * var(--space-12)) 0; font-size: var(--size-16); line-height: var(--lh-16); }
.banner--error .banner__title { font-weight: 700; }

/* ---------- toast tones (the toast chassis stays in components.css) ---------- */
.toast--success { background: var(--success); color: var(--white); }
.toast--warning { background: var(--warning-bg); color: var(--warning-ink); }
.toast--error { background: var(--error); color: var(--white); }
.toast--info { background: var(--ink); color: var(--white); }

/* ---------- money rows ---------- */
.money-rows { display: flex; flex-direction: column; width: 100%; font-variant-numeric: tabular-nums; }   /* M7 (A4): flat on the linen — no card, ring or side padding */
.money-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); min-height: 44px; padding-block: var(--space-8); }
.money-row__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.money-row__label { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 500; color: var(--ink); }
.money-row__caption { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 500; color: var(--neutral-500-ink); }
.money-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex-shrink: 0; }
.money-row__amt { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 600; color: var(--ink); white-space: nowrap; }
.money-row__status { font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; color: var(--neutral-600); }
.money-row--subtotal .money-row__label, .money-row--subtotal .money-row__amt { font-weight: 600; }
.money-row--total .money-row__label, .money-row--total .money-row__amt { font-weight: 700; }
/* R4-1-C-06: a total that is the only row (the pay sheet's Balance) has nothing above it to rule off */
.money-row--negative .money-row__amt { color: var(--neutral-700); }
.money-row--muted .money-row__label, .money-row--muted .money-row__amt { color: var(--neutral-500-ink); font-weight: 400; }
.money-row--changed .money-row__amt { color: var(--accent-ink); }

/* ---------- overlay chassis (sheetOverlay / modalOverlay holders; moved from the v4 screens.css) ---------- */
.screen-sheet { position: absolute; inset: 0; }
.screen-sheet--overlay { z-index: var(--z-overlay); }

/* R1-2-C-01: wheel columns are listboxes — the keyboard focus ring sits inside the column */
.wheel__col--scroll:focus-visible, .wheel__col--focus { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--radius-md); }

/* ---------- scheduler: compact (3-row) wheel — c-book. The settled row sits at the centre of a 132 window (3 × 44, M6-V-02), no dead space above it (R1-1-C-18) ---------- */
.scheduler--compact { padding-top: var(--space-12); }   /* M6-C-20: the blank lead row of a wheel settled on its first row is dead space — trim the card's top */
.scheduler--compact .wheel--sched { height: 132px; }
.scheduler--compact .wheel--sched .wheel__band { top: 44px; }
.scheduler--compact .wheel--sched .wheel__col--scroll { height: 132px; }
.scheduler--compact .wheel--sched .wheel__pad { flex: 0 0 44px; }
/* M7-2-C-07 / A-05 (c-book): the band is the top row — no blank lead pad; two rows show under it and the tail pad lets the last row reach it */
.scheduler--top .wheel--sched .wheel__band { top: 0; }
.scheduler--top .wheel--sched .wheel__pad:first-child { flex: 0 0 0; }
.scheduler--top .wheel--sched .wheel__pad:last-child { flex: 0 0 88px; }
.scheduler--top .wheel--sched .wheel__col--scroll .wheel__row { scroll-snap-align: start; }

/* ============================================================
   M2 — tailor onboarding + Shop components (M2-spec §A6)
   ============================================================ */

/* ---------- avatar: placeholder photo (D-58) ---------- */

/* ---------- check row: disabled ---------- */
.check-row-wrap--disabled .check-row, .check-row-wrap--disabled .check-row__input { cursor: not-allowed; }
.check-row-wrap--disabled .check-row__label { color: var(--neutral-400); }
.check-row-wrap--disabled .check-row__box { background: var(--neutral-100); box-shadow: inset 0 0 0 1px var(--neutral-200); }

/* ---------- onboarding header: status bar + a 56 px bar ---------- */
.ob-bar { position: absolute; inset: var(--status-h) auto auto 0; width: 100%; max-width: var(--column); height: var(--nav-h); z-index: var(--z-chrome); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-20); background: var(--neutral-50); }
.ob-bar .back { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: calc(-1 * var(--space-8)); font-size: var(--size-28); line-height: 1; color: var(--ink); }
.ob-bar__spacer { display: block; width: 44px; height: 44px; }
.ob-bar__later { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; margin-right: calc(-1 * var(--space-8)); padding-inline: var(--space-8); color: var(--accent-ink); }
.ob-bar__later:focus-visible, .ob-bar .back:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--radius-md); }

/* ---------- text area ---------- */
.text-area__box { align-items: stretch; min-height: 0; }
.text-area__input { flex: 1 1 0; min-width: 0; padding: var(--space-12) var(--space-16); border: 0; border-radius: var(--radius-md); background: transparent; resize: none; font-family: var(--font-sans); font-size: var(--size-16); line-height: var(--lh-16); font-weight: 500; color: var(--ink); }
.text-area__input:focus { outline: none; }
.text-area__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); }
.text-area__foot > .field__msg { flex: 1 1 0; min-width: 0; }
.text-area__count { flex-shrink: 0; margin-left: auto; font-variant-numeric: tabular-nums; }
.text-area__count--over { color: var(--error-ink); font-weight: 600; }


/* ---------- service row ---------- */
.service-row-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.service-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); min-height: 56px; }
.service-row__check { flex: 1 1 0; min-width: 0; }
.service-row__check .check-row { min-height: 56px; align-items: center; }
.service-row__check .check-row__text { padding-block: var(--space-8); }
.service-row__check .check-row__caption { text-wrap: pretty; }
.service-row__part { white-space: nowrap; }
.service-row__price { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); flex-shrink: 0; width: 104px; padding-top: var(--space-4); }
.service-row__box { width: 96px; min-height: 48px; }
.service-row__box .field__input { padding-left: var(--space-4); padding-right: var(--space-8); font-variant-numeric: tabular-nums; }
.service-row__box--error { box-shadow: inset 0 0 0 1px var(--error); }
.service-row__box--error:focus-within { box-shadow: inset 0 0 0 2px var(--error); }
/* K-45 (D-303) · the payout slot sits directly under today's 96 px box, right-aligned, in a FIXED 104 column (typing never re-wraps the
   name beside it). The slot may reach 8 px further left, into the 8 px gap: "Your payout: $22.50" (107 px) stays on one line and hangs
   ~3 px past the column, never into the name column; a 3-digit payout wraps under itself. The slot is there from the first tick ("—"),
   so the row never jumps as she types; the error takes the same slot. */
.service-row__pay { margin: 0 0 0 calc(-1 * var(--space-8)); text-align: right; text-wrap: balance; }
.service-row-wrap--error .check-row__box { box-shadow: inset 0 0 0 1px var(--error); }

/* ---------- day hours ---------- */
.day-hours { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-4); }
.day-hours + .day-hours { box-shadow: inset 0 1px 0 var(--neutral-100); }
.day-hours .toggle-row__label { font-weight: 600; }
.day-hours__times { display: flex; align-items: center; gap: var(--space-12); padding-bottom: var(--space-8); }
.day-hours__time { display: inline-flex; align-items: center; justify-content: center; min-width: 110px; min-height: 44px; padding-inline: var(--space-12); border-radius: var(--radius-md); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-200); font-variant-numeric: tabular-nums; color: var(--ink); }
.day-hours__time:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.day-hours--error .day-hours__time { box-shadow: inset 0 0 0 1px var(--error); }
.day-hours__error { padding-bottom: var(--space-8); }
/* K-53 a4 (S-34, D-424): a split day — the second window's ✕ and "Add more hours" */
.day-hours__times[data-second] { margin-top: calc(-1 * var(--space-4)); }
.day-hours--split .day-hours__time { min-width: 0; flex: 1 1 0; }   /* both rows share the width with the ✕ (no overflow at 320) */
.day-hours--split .day-hours__times:not([data-second])::after { content: ""; flex: 0 0 var(--touch); margin-left: calc(-1 * var(--space-4)); }   /* the first row keeps the ✕'s column, so the times line up */
.day-hours__remove { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--touch); width: var(--touch); height: var(--touch); margin-left: calc(-1 * var(--space-4)); border-radius: var(--radius-full); color: var(--neutral-600); }
.day-hours__remove svg { width: var(--size-16); height: var(--size-16); }
.day-hours__remove:focus-visible, .day-hours__add:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.day-hours__add { align-self: flex-start; min-height: var(--touch); margin-top: calc(-1 * var(--space-8)); padding-inline: 0; color: var(--accent-ink); background: none; border: 0; }

/* ---------- customer preview ---------- */
.customer-preview { display: flex; flex-direction: column; gap: var(--space-8); }
.customer-preview__title { margin: 0; }
.customer-preview__body { display: flex; flex-direction: column; gap: var(--space-8); pointer-events: none; }   /* M7-1-T-04: no slab — the preview card keeps its one ring, the caps title and caption frame it */
.customer-preview__caption { margin: 0; text-wrap: pretty; }

/* ---------- mini profile (the tailor's own card, inside a customer preview) ---------- */
.mini-profile { display: flex; flex-direction: row; align-items: center; gap: var(--space-12); width: 100%; padding: var(--space-16); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-200); text-align: left; }
.mini-profile--bio { align-items: flex-start; }
.mini-profile__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1 1 0; }
.mini-profile__text p { margin: 0; overflow-wrap: break-word; }
.mini-profile__text [hidden] { display: none; }
.mini-profile__bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--space-4); }

/* ---------- returns rows (c-tailor "Getting it back"; to-returns preview) ---------- */
.returns-rows { display: flex; flex-direction: column; gap: var(--space-12); }
.returns-rows .meta-row { color: var(--ink); align-items: flex-start; }
.returns-rows .meta-row__glyph { height: 21px; line-height: 21px; color: var(--neutral-600); }   /* the 16px line icon centres on the first text line */
.returns-rows--empty { margin: 0; }

/* ---------- rush ladder ---------- */
.rush-ladder { text-wrap: pretty; }
.rush-tier { white-space: nowrap; }

/* ---------- leave modal ---------- */
.modal--leave { left: var(--space-20); right: var(--space-20); width: auto; top: 50%; translate: 0 -50%; gap: var(--space-12); max-height: calc(100% - var(--rhythm-major)); overflow-y: auto; }   /* P1-1: scrolls inside on a short viewport */
.leave-modal__body { margin: 0; font-size: var(--size-16); line-height: var(--lh-16); font-weight: 400; color: var(--neutral-600); }

/* toast with an inline action (Undo) — the pill takes pointer events for its button */
.toast--action { pointer-events: auto; display: flex; align-items: center; gap: var(--space-12); padding-right: var(--space-4); }
.toast__action {
  min-width: 44px; min-height: 44px; margin: calc((var(--size-12) * var(--lh-12) - var(--touch)) / 2) 0; padding: 0 var(--space-12);
  border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--radius-full);
}
.toast__action:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

/* ============================================================
   M3 — request loop (D-75, D-79, D-80, D-87)
   ============================================================ */

/* ---------- cta: danger (the one filled button of a destructive confirm sheet) ---------- */
.cta--danger { background: var(--error); color: var(--white); }
@media (hover: hover) { .cta--danger:hover:not(:disabled) { filter: brightness(0.94); } }
.cta--danger:active:not(:disabled) { filter: brightness(0.94); }
.cta--danger.cta--busy, .cta--danger:disabled { filter: none; }

/* ---------- action bar: one primary, secondary / tertiary as text links (M7 A5.9) ---------- */
.action-bar__links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-24); }

/* ---------- request card: the tailor's inbox ticket ---------- */
.request-card {
  display: flex; flex-direction: column;   /* M7-2-T-01: the shared .card is block; the 12 px gap between top / work / pay needs flex */
  align-items: stretch; justify-content: flex-start; gap: var(--space-12); min-height: 44px; text-align: left;
}
/* K-25: stretched-link card — the card's action is a button laid over the whole card (z 1); the count cluster sits above it (z 2) as its own button */
.request-card { position: relative; }
.request-card__link { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.request-card__link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.request-card:has(> .request-card__link:active) { transform: scale(var(--press-scale)); }
/* the count cluster: icons + "2 items · 3 services" are ONE 44 px trigger (a ::before pad); the count is underlined neutral-500, 2 px ink when open */
.peek-cluster { position: relative; z-index: 2; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.peek-cluster::before { content: ''; position: absolute; inset: calc(-0.5 * (var(--touch) - var(--size-24))) calc(-1 * var(--space-4)); }
.peek-cluster__count { text-decoration: underline; text-decoration-color: var(--neutral-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.peek-cluster[aria-expanded="true"] .peek-cluster__count { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.peek-cluster:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
@media (hover: hover) { .peek-cluster:hover .peek-cluster__count { text-decoration-color: var(--ink); } }
/* K-11 (D-236), Option 1 "Flush band": the timer is a full-width strip across the top of the card (the card's overflow clips its corners);
   warning by default, error at <= EXPIRING_SOON_MIN, neutral once expired. The old top-right clock and the soon ring are gone. */
.request-card--strip { overflow: hidden; }
.request-card__strip { display: flex; align-items: center; gap: var(--space-8); margin: calc(-1 * var(--space-16)) calc(-1 * var(--space-16)) 0; padding: var(--space-12) var(--space-16); font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; background: var(--warning-bg); color: var(--warning-ink); }
.request-card__strip .icon-16 { flex-shrink: 0; }
.request-card__strip--urgent { background: var(--error-bg); color: var(--error-ink); }
.request-card__strip--expired { background: var(--neutral-100); color: var(--neutral-600); }
/* K-13 (D-238), option F "The proposal leads the bar": a suggested card's strip = "You suggested <when>" left, clock + countdown at the right end; same warning / error tones */
.request-card__strip--suggest { justify-content: space-between; gap: var(--space-12); }
/* K-15: the same strip on the t-request screen — bleeds across the 390 frame, flush under the nav (no card to clip it), 20 px gutter */
.request-card__strip--page { margin: calc(-1 * var(--space-16)) calc(-1 * var(--space-20)) var(--space-20); padding-inline: var(--space-20); }
/* K-17 (K16-1-02): the strip already owns the 20 px below it — a first section after it adds no major gap on top */
.request-card__strip--page + .sec--first { margin-top: 0; }
.request-card__strip-lead { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-card__strip-clock { display: inline-flex; align-items: center; gap: var(--space-4); flex-shrink: 0; margin-left: auto; }
/* K-17 (D-242): STATE strips on t-job / c-price-change — the same band, token tones: warn (the default band: waiting on the other side), action (your move), done, calm.
   A strip with a right-hand fact (`--split`) keeps the lead on one line and the fact beside it. */
.request-card__strip--action { background: var(--accent-bg); color: var(--accent-ink); }
.request-card__strip--done { background: var(--success-bg); color: var(--success-ink); }
.request-card__strip--calm { background: var(--neutral-100); color: var(--neutral-700); }
.request-card__strip--split { justify-content: space-between; gap: var(--space-12); }
.request-card__strip--split .request-card__strip-lead { white-space: normal; text-wrap: pretty; }
.request-card__strip[data-strip] .request-card__strip-lead { flex: 1 1 auto; white-space: normal; text-wrap: pretty; overflow: visible; }
.request-card__strip[data-strip] .request-card__strip-clock { margin-left: auto; white-space: nowrap; }
/* the header of a status screen (the K-15 request head on t-job / c-price-change): person left, the one amount (or Message) right, supporting lines under it, one hairline */
.page-head { padding-bottom: var(--space-16); box-shadow: inset 0 -1px 0 var(--neutral-200); }
.page-head .request-card__top { align-items: center; flex-wrap: wrap; row-gap: var(--space-8); }
.page-head .request-card__who { flex: 1 1 auto; min-width: min-content; width: auto; padding-bottom: 0; }
.page-head .request-card__top > .request-card__payside, .page-head .request-card__top > .page-head__trail { margin-left: auto; }
.page-head .request-card__name { margin: 0; }
.request-head__name { display: inline-flex; align-items: center; gap: var(--space-4); min-width: 0; }
.request-head__name .verified { flex: 0 0 auto; }
.request-head__sub { white-space: nowrap; }
.page-head__foot { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-12); }
.page-head__foot p { margin: 0; text-wrap: pretty; }
.page-head__trail .cta-small { flex-direction: row; gap: var(--space-8); padding-inline: var(--space-16); white-space: nowrap; }
.page-head__trail .cta-small svg { width: var(--size-16); height: var(--size-16); }
.page-head + * { margin-top: var(--space-20); }
/* K-17 (K16-1-05): in a narrow header (a 320 screen) the Message button cannot sit beside avatar + name, so it becomes a 44 x 44 icon-only button
   (its aria-label carries "Message <first>") and stays on the row; 390 is unchanged. */
.page-head { container-type: inline-size; }
@container (max-width: 320px) {
  .page-head__trail .cta-small { width: var(--touch); min-width: var(--touch); padding-inline: 0; justify-content: center; }
  .page-head__trail .cta-small > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.person-actions { margin-top: var(--rhythm-block); }

/* K-12 Option C "Person-led block": the avatar is the spine, the visit rows hang under the name, equal action buttons close the block */
.visit-row--person .visit-row__text { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.person-block__name { color: var(--ink); overflow-wrap: break-word; min-width: 0; }
.person-block__actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--rhythm-block); }
.person-block__actions .cta-small { flex-direction: column; gap: var(--space-4); min-height: 64px; padding: var(--space-12) var(--space-4); white-space: normal; text-align: center; border-radius: var(--radius-lg); }
.person-block__actions .cta-small svg { width: var(--glyph-box); height: var(--glyph-box); }
.verified--icon { min-height: 0; }
.verified--icon .icon-16 { display: block; }

/* K-12 (D-237), Option A "Payout beside the name": the payout rides in the header's right column, a hairline, then one line (date / time on the
   left; each garment drawn + "n items · n services" on the right). No footer. */
.request-card__payside { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.request-card__payside .request-card__amount { line-height: calc(29 / 24); }
/* K-15: on t-request the payout column is one 44 px button (amount over "Your payout ⓘ") that opens the Taily-fee sheet */
.request-card__name.t-title { font-family: var(--font-serif); font-size: var(--size-28); line-height: calc(34 / 28); font-weight: 500; }   /* K-15: the screen's h1 (beats the v4 .request-card__name in components.css) */
.request-head__pay { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-sm); }
.request-head__pay:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.request-head__label { display: inline-flex; align-items: center; gap: var(--space-4); }
.request-head__label .icon-16 { width: var(--size-16); height: var(--size-16); }
.request-card__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-12); padding-top: var(--space-12); box-shadow: inset 0 1px 0 var(--neutral-100); font-variant-numeric: tabular-nums; }
.request-card__icons { display: inline-flex; align-items: center; gap: var(--space-2); }

/* K-11 (D-236), Option 3 "Ochre band": c-request's status + clock in one soft band above the title; <= EXPIRING_SOON_MIN adds a 2 px warning ring */
.wait-band { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4) var(--space-12); align-self: stretch; box-sizing: border-box; margin-bottom: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); background: var(--warning-bg); }
.wait-band--soon { box-shadow: inset 0 0 0 2px var(--warning); }
.wait-band__clock { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--warning-ink); }
.wait-band__clock .countdown { color: var(--warning-ink); }
.wait-band .status { color: var(--warning-ink); }
.request-card__top { display: flex; align-items: flex-start; gap: var(--space-12); }
.request-card__top .avatar { flex-shrink: 0; }
.request-card__who { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.request-card__name { display: flex; align-items: baseline; gap: var(--space-8); min-width: 0; color: var(--ink); }
.request-card__again { flex-shrink: 0; white-space: nowrap; }
.request-card__where { display: flex; flex-direction: column; min-width: 0; }
.request-card__visit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-card__place { overflow-wrap: anywhere; }   /* K-13: beside the payout at 320 the zip wraps rather than clips */
.request-card__count { display: inline-flex; align-items: center; gap: var(--space-8); }
.request-card__when { color: var(--ink); }
.request-card__amount { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.request-card--suggested .request-card__amount { color: var(--neutral-600); }   /* pending: the payout is greyed until Sarah answers */
.request-card__asked { color: var(--neutral-700); }

/* ---------- appt row: one 72 px list line ---------- */
.appt-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, max-content) var(--size-12); column-gap: var(--space-8); row-gap: var(--space-2); align-items: center;   /* P3-3: the status / amount column may shrink; the name column keeps the rest */
  width: 100%; min-height: 72px; padding: var(--space-12) var(--space-16); text-align: left;
  border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--card-ring-tap);   /* P-31 (D-374): one tap target */
  font-variant-numeric: tabular-nums;
}
.appt-row__avatar { grid-column: 1; grid-row: 1 / span 3; align-self: start; display: inline-flex; margin-right: var(--space-4); }
.appt-row__name { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.appt-row__pill { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; }
/* R4-2-T-01: the time line is the row's news — it wraps to a second line rather than losing its end to an ellipsis */
.appt-row__when { grid-column: 2; grid-row: 2; min-width: 0; text-wrap: pretty; display: flex; align-items: center; gap: var(--space-4); }
.appt-row__garment { display: inline-flex; flex-shrink: 0; margin-block: calc(-1 * var(--space-4)); }   /* M7-2-A-03: the 24 px glyph does not grow the 21 px line */
.appt-row__when-text { min-width: 0; }
.appt-row__amount { grid-column: 3; grid-row: 2; justify-self: end; color: var(--ink); white-space: nowrap; }
.appt-row__place { grid-column: 2; grid-row: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-row__caption { grid-column: 3; grid-row: 3; justify-self: end; white-space: nowrap; }
.appt-row__caption--action { color: var(--accent-ink); font-weight: 600; }
.appt-row__caption--error { color: var(--error-ink); font-weight: 600; }
.appt-row__chevron { grid-column: 4; grid-row: 1 / span 3; width: var(--size-12); height: var(--size-16); justify-self: end; color: var(--neutral-500); }
.appt-row--bare .appt-row__when, .appt-row--bare .appt-row__place { grid-column: 2 / span 2; }   /* no amount: the time and place may use the amount's column */
/* P3-3: on a narrow phone the name column keeps a floor, and the right column (status word over amount over caption) gives way: the status word wraps beside its dot, the amount sits under it */
@media (max-width: 21.25em) {
  .appt-row { --appt-name-min: 88px; grid-template-columns: 40px minmax(var(--appt-name-min), 1fr) minmax(0, max-content) var(--size-12); }
  .appt-row .status { white-space: normal; }
  .appt-row__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: break-word; }   /* a long name takes a second line before it loses its end */
  .appt-row__amount, .appt-row__caption { white-space: normal; text-align: right; }
}
.appt-row--muted .appt-row__name { color: var(--neutral-700); }
/* R3-1-C-12 / R3-2-C-06 (M7): a muted (past) row reads calm — its status keeps the word but loses the alarm colour, except where money was kept (.appt-row--kept) */
.appt-row--muted:not(.appt-row--kept) .status { color: var(--status-calm-ink); }
.appt-row--muted:not(.appt-row--kept) .status__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--status-calm); }
.appt-row--muted .avatar { background: var(--neutral-100); color: var(--neutral-600); box-shadow: none; }

/* ---------- tailor's note (R3-1-C-09): one quote card for c-request--declined and c-booking--cant-make-it ---------- */
.note-quote { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-24) 0 0; padding: var(--space-12); border-radius: var(--radius-md); background: var(--neutral-100); }
.note-quote blockquote { margin: 0; color: var(--ink); }

/* ---------- the work list (R3-1-T-05): shared by t-request and t-job ---------- */
.work-list { padding-top: var(--space-8); }   /* the h2's own 8 + this 8 = 16 to the first garment */
.work-list__garment { margin-bottom: var(--space-12); }
/* K2-1-01: each garment is one block (head, services, tabs, photos, comment); a hairline + 20 px separates it from the one above */
.work-list__garment + .work-list__garment, .change-list__garment + .change-list__garment:not(.change-list__garment--new) { padding-top: var(--space-20); box-shadow: inset 0 1px 0 var(--neutral-200); }
/* the photo viewer sheet (R3-2-T-11): one placeholder per photo */
.photo-viewer { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-8) var(--space-20) var(--space-24); max-height: 70vh; overflow-y: auto; }
.photo-viewer__item { margin: 0; display: flex; flex-direction: column; gap: var(--space-8); align-items: center; }
.photo-viewer__img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; }
.photo-viewer__img .doc-photo { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.work-list__estimate { margin-top: var(--space-4); box-shadow: inset 0 1px 0 var(--neutral-200); }
.work-list__estimate .price-row__label, .work-list__estimate .price-row__value { font-weight: 600; }

/* ---------- the heading (K-06, D-221): status line · title row · notes, ALL flush on the 20 px gutter edge ----------
   headingRow(inner, { back, status, trailing, sticky }). The Back is not here: it sits in the top nav (see .top-nav__back). The status
   line sits on its own line, --rhythm-tight above the h1; then the title row; then the notes at the screen padding. */
.heading-lead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 100%; margin-bottom: var(--rhythm-tight); }
.heading-lead > p { margin: 0; }
.heading-row { display: flex; align-items: flex-start; gap: var(--space-4); width: 100%; min-width: 0; }
.heading-row__body { flex: 1 1 0; min-width: 0; }
.heading-row__body > h1 { margin: 0; text-wrap: balance; }
/* a thread head (avatar + name + sub) is taller than one line */
.heading-row--head { align-items: center; }
.heading-row__trail { display: flex; align-items: center; align-self: flex-start; flex-shrink: 0; margin: calc((var(--size-28) * var(--lh-28) - var(--touch)) / 2) calc(-1 * var(--space-12)) calc((var(--size-28) * var(--lh-28) - var(--touch)) / 2) auto; }   /* optical: the 44 px ••• centres on the 34 px title line */
/* the thread screens keep the head in view while the messages scroll (AU-P2-4) */
.heading-row--sticky { position: sticky; top: 0; z-index: 4; padding-block: var(--space-8); margin-block: calc(-1 * var(--space-8)); background: var(--neutral-50); }
.heading-after { width: 100%; margin-top: var(--space-8); }
.heading-row + .status-hero__notes, .heading-after + .status-hero__notes { margin-top: var(--space-8); }
.heading-row + .status-hero__notes p, .heading-after + .status-hero__notes p { text-wrap: pretty; }

/* R3-2-T-07: a date or time that must not break across lines */
.nb { white-space: nowrap; }

/* ---------- M4: the correction mark (changeList), deltaFigure, courierCard ---------- */
.change-list { display: flex; flex-direction: column; gap: var(--space-16); }
.change-list__rows { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.change-list__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 44px; padding-block: var(--space-12); }
.change-list__row + .change-list__row { box-shadow: inset 0 1px 0 var(--hairline); }
.change-list__text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); min-width: 0; }
.change-list__label { color: var(--neutral-700); }
.change-list__amt, .change-list__was { white-space: nowrap; font-variant-numeric: tabular-nums; }
.change-list__amt { color: var(--ink); }
.change-list__amts { display: inline-flex; align-items: baseline; gap: var(--space-8); flex-shrink: 0; }
.change-list__was { color: var(--neutral-600); text-decoration: line-through; }
/* the tag: sentence case on purpose (the word is searched and read as written); 12 / 600, no tracking (K-04 / CR-7) */
.change-list__tag { display: inline-block; padding: var(--space-2) var(--space-8); border-radius: var(--radius-full); white-space: nowrap; }
/* M7-2-C-06: one "changed" tag for New / New price / New item — accent ground, accent ink (no green: an added charge is not a success) */
.change-list__tag--added, .change-list__tag--new-item, .change-list__tag--repriced { color: var(--accent-ink); background: var(--accent-bg); font-weight: 600; }
.change-list__tag--removed { color: var(--neutral-600); background: var(--neutral-100); }
/* R4-1-C-09: the tint bleeds outward, so label and amount stay on the same columns as the rows around it */
/* .change-list__row--added: no row tint (M7-2-C-06); the tag says it */
.change-list__row--removed .change-list__label { color: var(--neutral-600); }
.change-list__row--removed .change-list__amt { color: var(--neutral-600); }
.change-list__row s { text-decoration-thickness: 1px; }
/* K-01: a new item is one green panel; its rows read as plain rows inside it */
.change-list__garment--new { background: color-mix(in srgb, var(--accent-bg) 45%, transparent); border-radius: var(--radius-md); padding: var(--space-12); }   /* M7-2-C-06: a light accent panel, not success green */
.change-list__garment--new .change-list__row + .change-list__row { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-base) 20%, transparent); }
.change-list__garment--new .change-list__label { color: var(--ink); font-weight: 600; }
.change-list__garment--gone .change-list__row--removed .change-list__label { color: var(--neutral-600); }
.change-summary { margin: 0; text-wrap: pretty; }

.delta-figure { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; font-variant-numeric: tabular-nums; }
.delta-figure__amt { color: var(--ink); white-space: nowrap; }
.delta-figure__was, .delta-figure__caption { text-wrap: pretty; }

.courier-card { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-200); }
.courier-card .meta-row { margin: 0; }
/* R4-1-C-08: a metaRow used as a heading reads as one (ink), glyph stays neutral */
.courier-card > .meta-row:first-child { color: var(--ink); font-weight: 600; }
.visit-block .meta-row { color: var(--ink); }
.courier-card > .meta-row:first-child .meta-row__glyph, .visit-block .meta-row .meta-row__glyph { color: var(--neutral-600); }
.courier-card__route { margin: 0; }
.courier-card__error-title { display: flex; align-items: center; gap: var(--space-8); color: var(--error-ink); }
.courier-card__error-glyph { display: inline-flex; flex-shrink: 0; }
.courier-card .money-rows { padding-inline: 0; background: none; border-radius: 0; box-shadow: none; }
.courier-card__note { margin: 0; }
.courier-card__status { margin: 0; }
.courier-card .skeleton { display: flex; flex-direction: column; gap: var(--space-12); padding-block: var(--space-8); }
.courier-card__error { display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-4); }
.courier-card__error p { margin: 0; }

/* ============================================================
   M5 — messaging, accounts, earnings, system (docs/v5/M5-spec.md §A8–A9)
   ============================================================ */

/* ---------- thread: day dividers, system lines, masked token, photos ---------- */
.thread { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; }
.thread__day { text-align: center; margin-top: var(--space-8); }
.thread__system { margin: 0; text-align: center; text-wrap: pretty; padding-inline: var(--space-16); }
.thread__system-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-msg__time { font-variant-numeric: tabular-nums; }
.masked-token { display: inline-flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-8); border-radius: var(--radius-sm); background: var(--neutral-100); color: var(--ink); font-size: var(--size-12); line-height: var(--lh-12-roomy); font-weight: 600; vertical-align: baseline; white-space: nowrap; }
.masked-token svg { width: var(--size-12); height: var(--size-12); flex-shrink: 0; color: var(--neutral-600); }
.chat-bubble__photo { display: flex; gap: var(--space-8); align-self: flex-start; min-width: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-sm); text-align: left; }
.chat-bubble__photo:active { opacity: 0.6; }
.chat-bubble__tile { display: block; flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.bubble--me .chat-bubble__photo:focus-visible { outline-color: var(--white); }

/* ---------- thread header + context row ---------- */
.thread-head { display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.thread-head .avatar { flex-shrink: 0; }
.thread-head__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0; }
.thread-head__name, .thread-head__sub { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-head__sub .countdown { font-weight: 600; }
.thread-context { display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: 56px; padding: var(--space-8) var(--space-16); border-radius: var(--radius-md); text-align: left; }
.thread-context__text { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.thread-context__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-8); min-width: 0; }   /* AU-P2-3: a long visit time wraps instead of clipping */
.thread-context__pill { display: inline-flex; flex-shrink: 0; }
.thread-context__title { min-width: 0; white-space: normal; font-variant-numeric: tabular-nums; }
.thread-context__sub { text-wrap: pretty; }
.thread-context + .privacy-note { margin-top: var(--space-8); }
.thread-head + .thread-context { margin-top: var(--space-12); }
.thread-context__chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--neutral-500); }

/* ---------- thread row (Messages list) ---------- */
.thread-list { display: flex; flex-direction: column; padding-inline: var(--space-16); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-200); }
.thread-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-12); row-gap: var(--space-2); align-items: center; align-content: center; width: 100%; min-height: 72px; padding-block: var(--space-8); text-align: left; }
.thread-row + .thread-row { box-shadow: inset 0 1px 0 var(--hairline); }
.thread-row__avatar { grid-column: 1; grid-row: 1 / span 2; display: inline-flex; }
.thread-row__head { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-8); min-width: 0; }
.thread-row__name { flex: 1 0 auto; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.thread-row__pill { display: inline-flex; flex-shrink: 0; }
.thread-row__time { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.thread-row__foot { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-8); min-width: 0; }
.thread-row__preview { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-row__badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 20px; height: 20px; padding-inline: var(--space-4); border-radius: var(--radius-full); background: var(--accent-ink); color: var(--white); font-variant-numeric: tabular-nums; }
.thread-row--closed .thread-row__name { color: var(--neutral-700); }
.thread-row--closed .avatar { background: var(--neutral-100); color: var(--neutral-600); box-shadow: none; }
.thread-row--unread .thread-row__time { color: var(--ink); font-weight: 600; }

/* ---------- composer: live hint, photo tray ---------- */
.composer { flex-wrap: wrap; row-gap: 0; }
.composer__hint { display: flex; align-items: flex-start; gap: var(--space-8); flex: 0 0 100%; margin: 0 0 var(--space-8); }
.composer__hint:empty { display: block; height: 0; margin: 0; }
.composer__tray { display: flex; gap: var(--space-8); flex: 0 0 100%; margin-bottom: var(--space-8); }
.composer__thumb { position: relative; display: block; width: 64px; height: 64px; flex-shrink: 0; }
.composer__thumb-tile { display: block; width: 100%; height: 100%; border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.composer__remove { position: absolute; top: 0; right: 0; display: inline-flex; align-items: flex-start; justify-content: flex-end; width: 44px; height: 44px; padding: var(--space-4); color: var(--white); }
.composer__remove svg { box-sizing: content-box; width: var(--size-10); height: var(--size-10); padding: var(--space-4); border-radius: var(--radius-full); background: var(--ink); }
.composer__remove:disabled { opacity: 0.4; }

/* ---------- attach sheet ---------- */
.attach-sheet { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.attach-sheet__note { margin: 0; text-wrap: pretty; }
.attach-sheet__rows { display: flex; flex-direction: column; }
.attach-sheet .list-row { min-height: 56px; }
.attach-sheet .list-row__title { font-weight: 600; }
.attach-sheet .list-row__lead svg { width: var(--size-24); height: var(--size-24); color: var(--neutral-700); }

/* ---------- card fields (add-card, lifted from c-pay) ---------- */
.card-fields { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; }
.card-fields__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.card-fields__pair > * { min-width: 0; }

/* ---------- skeleton: thread-row, payout ---------- */
.skeleton__row { display: flex; align-items: center; gap: var(--space-12); min-height: 72px; }
.skeleton__dot--sm { width: 40px; height: 40px; border-radius: var(--radius-md); }
.skeleton__line--figure { height: 40px; border-radius: var(--radius-md); }
.skeleton--thread-row { gap: 0; }
/* R5-1-C-07: the appt-row skeleton is the shape of apptRow (separate white cards 12 apart, a pill and an amount on the right) */
.skeleton__appt { display: flex; align-items: flex-start; gap: var(--space-12); min-height: 96px; padding: var(--space-12) var(--space-16); border-radius: var(--radius-lg); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-200); }
.skeleton__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-8); width: 72px; flex-shrink: 0; }
.skeleton__line--pill { width: 64px; height: 20px; border-radius: var(--radius-full); }
.skeleton__line--amt { width: 48px; }

/* ---------- system: offline banner, re-auth, text messages ---------- */
#screen { --sys-banner-h: calc(var(--space-40) + var(--space-24)); }
.sys-banner { position: absolute; top: var(--chrome-h); left: 0; z-index: var(--z-chrome); display: flex; align-items: center; gap: var(--space-12); width: 100%; max-width: var(--column); min-height: var(--sys-banner-h); padding: var(--space-8) var(--space-20); background: var(--warning-bg); color: var(--ink); box-shadow: inset 0 -1px 0 var(--warning); }
.sys-banner__glyph { display: inline-flex; flex-shrink: 0; color: var(--warning-ink); }
.sys-banner__glyph svg { width: var(--size-24); height: var(--size-24); }
.sys-banner__text { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.sys-banner__body { font-weight: 500; text-wrap: pretty; }
.sys-banner__retry { flex-shrink: 0; min-width: 44px; min-height: 44px; padding-inline: var(--space-12); border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
/* K-43 (D-301, was D-167's push card): a text message from Taily over the status bar — the Messages banner: the sender, the text in a
   bubble, its unique link; slides down unless motion is reduced (html.is-test sets it directly) */
.text-banner { position: absolute; z-index: var(--z-banner); top: var(--space-8); left: var(--space-8); right: var(--space-8); display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); min-height: 64px; padding: var(--space-12) var(--space-16) var(--space-16); border-radius: var(--radius-lg); background: var(--white); color: var(--ink); text-align: left; box-shadow: var(--shadow-overlay), inset 0 0 0 1px var(--neutral-200); transform: translateY(calc(-100% - var(--space-8))); transition: transform var(--dur-modal) var(--ease-out); }
.text-banner--in { transform: translateY(0); }
.text-banner__head { display: flex; align-items: center; gap: var(--space-8); }
.text-banner__glyph { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--size-24); height: var(--size-24); border-radius: var(--radius-sm); background: var(--success); color: var(--white); }
.text-banner__when { margin-left: auto; }
.text-banner__bubble { align-self: flex-start; max-width: 100%; padding: var(--space-8) var(--space-12); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--space-4); background: var(--neutral-100); color: var(--ink); text-wrap: pretty; }
.text-banner__link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .text-banner { transition: none; } }
.sys-banner__retry:disabled { opacity: 0.6; }
#screen.has-sys-banner .body { padding-top: calc(var(--body-top) + var(--sys-banner-h)); }

.reauth { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; }
.reauth__lead { margin: 0; text-wrap: pretty; }
.reauth__resend { align-self: flex-start; min-height: 44px; color: var(--accent-ink); text-decoration: underline; }
.reauth__resend:disabled { color: var(--neutral-600); text-decoration: none; cursor: default; }
.reauth__actions { display: flex; flex-direction: column; gap: var(--space-12); }
[data-s="sys-reauth"] .sheet__cancel { visibility: hidden; }   /* locked: no ✕ (D-139) */

/* M6-P-11: the shared receipt block (c-booking--completed, c-complete) */
.receipt__how { margin-bottom: var(--space-8); }
.receipt__card { margin: var(--space-12) 0 0; }
.receipt__full { margin-top: var(--space-4); }   /* S-25 (pre-MVP B2) */

/* D-173: Directions / Add to calendar are links that look like the small outline buttons */
a.cta-small { text-decoration: none; }

/* ============================================================
   K-02 — garment icons, fitting documentation (D-175…D-183)
   ============================================================ */

/* ---------- garment icon: card 40 (the c-job tile) · row 32 · inline 24 ---------- */
.garment-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.garment-icon img { width: 100%; height: 100%; object-fit: contain; }
.garment-icon--card { flex: 0 0 var(--space-40); width: var(--space-40); height: var(--space-40); border-radius: var(--radius-sm); background: var(--neutral-50); }
.garment-icon--row { width: var(--size-32); height: var(--size-32); border-radius: var(--radius-sm); background: var(--neutral-50); }
.garment-icon--inline { width: var(--size-24); height: var(--size-24); }
/* M7-2-C-04: garment strip — the booked order before the fitting (c-request, c-booking): 32 px wells 8 apart, then the count */
.garment-strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8) var(--space-12); padding-block: var(--space-4); white-space: normal; }
/* K-25: each thumb is a button — 32 px well + 12 gap = a 44 pitch, the ::before pads abut and never overlap. Closed: the control stroke
   (neutral-500, D-163); hover ink; open (aria-expanded) a 2 px ink ring. "+N" is a well of its own. */
.garment-strip__icons { display: flex; align-items: center; gap: var(--space-12); }
.garment-strip .garment-icon--row { background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-500); }
.garment-strip__more { display: inline-flex; align-items: center; justify-content: center; width: var(--size-32); height: var(--size-32); border-radius: var(--radius-sm); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-500); font-variant-numeric: tabular-nums lining-nums; }
.garment-strip__btn { position: relative; display: inline-flex; flex: 0 0 auto; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.garment-strip__btn::before { content: ''; position: absolute; inset: calc(-0.5 * (var(--touch) - var(--size-32))); }
.garment-strip__btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.garment-strip__btn[aria-expanded="true"] .garment-icon--row, .garment-strip__btn[aria-expanded="true"] .garment-strip__more { box-shadow: inset 0 0 0 2px var(--ink); }
@media (hover: hover) { .garment-strip__btn:hover .garment-icon--row, .garment-strip__btn:hover .garment-strip__more { box-shadow: inset 0 0 0 1px var(--ink); } .garment-strip__btn[aria-expanded="true"]:hover .garment-icon--row, .garment-strip__btn[aria-expanded="true"]:hover .garment-strip__more { box-shadow: inset 0 0 0 2px var(--ink); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-test) .garment-strip__btn { transition: transform var(--dur-press) var(--ease-out); }
  html:not(.is-test) .garment-strip__btn:active { transform: scale(var(--press-scale)); }
}
/* a garment that leads a line of text (thread preview) sits in a 24 px well, drawn at 20 */
.thread-row__garment { display: inline-flex; flex-shrink: 0; }   /* M7-2-C-05: a 32 px well (garmentIcon 'row'), the hero garment of the booking */
.thread-context__garment { display: inline-flex; flex-shrink: 0; }
.garment-icon--fallback svg { width: 60%; height: 60%; color: var(--neutral-500); }

/* ---------- the simulated photo: a token tone, the garment's illustration, a pin on Pinned ---------- */
.doc-photo { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.doc-photo img, .doc-photo > svg { width: 70%; height: 70%; object-fit: contain; }
.doc-photo--even img { transform: rotate(-4deg); }
.doc-photo--odd img { transform: rotate(3deg); }
/* taily-app Day 3: a stored photo fills its frame, untilted (the tint shows while the signed URL loads) */
.doc-photo--file img { width: 100%; height: 100%; object-fit: cover; transform: none; }
.doc-photo--thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); }
.doc-photo--stage { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-md); }
.doc-photo--t0 { background: linear-gradient(135deg, var(--neutral-200), var(--neutral-300)); }
.doc-photo--t1 { background: linear-gradient(135deg, var(--accent-bg), var(--neutral-200)); }
.doc-photo--t2 { background: linear-gradient(135deg, var(--neutral-100), var(--neutral-300)); }
.doc-photo--t3 { background: linear-gradient(135deg, var(--success-bg), var(--neutral-200)); }
.doc-photo__pin { position: absolute; right: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; justify-content: center; width: var(--space-20); height: var(--space-20); border-radius: var(--radius-full); background: var(--white); color: var(--ink); }
.doc-photo__pin svg { width: 12px; height: 12px; }
.doc-photo--stage .doc-photo__pin { right: var(--space-12); bottom: var(--space-12); width: var(--space-28); height: var(--space-28); }
.doc-photo--stage .doc-photo__pin svg { width: var(--size-16); height: var(--size-16); }

/* ---------- docs editor (t-adjust garment card) ---------- */
.docs-editor { display: flex; flex-direction: column; gap: var(--space-16); margin: var(--space-4) calc(-1 * var(--space-16)) 0; padding: var(--space-16) var(--space-16) var(--space-12); box-shadow: inset 0 1px 0 var(--neutral-200); }
.docs-editor__row { display: flex; flex-direction: column; gap: var(--space-8); }
.docs-editor__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); }
.docs-editor__tiles.photo-tiles { flex-wrap: wrap; gap: var(--space-8); }
.docs-editor__thumb { padding: 0; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; line-height: 0; }
.docs-editor__thumb:active, .docs-viewer__thumb:active { opacity: .7; }
.docs-editor__add { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 1.5px dashed var(--neutral-500); border-radius: var(--radius-sm); background: transparent; color: var(--neutral-600); cursor: pointer; }
.docs-editor__add svg { position: static; width: var(--size-24); height: var(--size-24); }
.docs-editor__add:active { background: var(--neutral-50); }
.docs-editor__add:disabled, .docs-editor__thumb:disabled, .docs-editor__text:disabled { opacity: .5; cursor: not-allowed; }
.docs-editor__thumb:focus-visible, .docs-editor__add:focus-visible, .docs-editor__text:focus-visible,
.doc-tab:focus-visible, .docs-viewer__thumb:focus-visible, .docs-viewer__nav:focus-visible, .docs-viewer__stage:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.docs-editor__max { margin: 0; }
.docs-editor__missing { display: flex; align-items: flex-start; gap: var(--space-4); margin: 0; color: var(--error-ink); }
.docs-editor__missing svg { flex-shrink: 0; margin-top: var(--space-2); color: var(--error); }
.docs-editor__comment-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.docs-editor__optional { display: flex; align-items: center; gap: var(--space-4); }
.docs-editor__text { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-8); margin-left: calc(-1 * var(--space-8)); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font-family: var(--font-sans); cursor: pointer; }
.docs-editor__edit-link { display: flex; margin-left: calc(-1 * var(--space-8)); }   /* the shared textLink, flush with the comment above */
.docs-editor__edit { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.docs-editor__actions { display: flex; align-items: center; gap: var(--space-8); }
/* K2-1-03: Save is the primary action — sized to its label; Cancel is the quiet secondary at the same 12 px weight */
.docs-editor__actions .cta-small { flex: 0 0 auto; min-width: 88px; padding-inline: var(--space-20); }
.docs-editor__actions .docs-editor__text { margin-left: 0; color: var(--neutral-600); text-decoration: none; }
.docs-editor__comment, .garment-docs__comment { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; margin: 0; padding: var(--space-12); border-radius: var(--radius-md); background: var(--neutral-50); }
.garment-docs__comment { background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-200); }   /* K2-1-01: lists sit on the --neutral-50 page, so the comment is a visible white panel */
.docs-editor__comment blockquote, .garment-docs__comment blockquote { margin: 0; color: var(--ink); text-wrap: pretty; }
.docs-editor__masked, .garment-docs__masked { margin: 0; text-wrap: pretty; }

/* ---------- garment docs (read-only): the tailor's comment under the rows; the Before | Pinned tabs live in the viewer (K-04 / D-207) ---------- */
.garment-docs { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-12); }
.garment-docs__tabs { display: flex; gap: var(--space-24); box-shadow: inset 0 -1px 0 var(--neutral-200); }
.doc-tab { display: inline-flex; align-items: center; gap: var(--space-4); min-height: 44px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--neutral-500-ink); font-family: var(--font-sans); cursor: pointer; }
.doc-tab.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.garment-docs__none { margin: 0; min-height: 44px; display: flex; align-items: center; }
.garment-docs__comment { margin-top: var(--space-4); }
.change-list__garment--new .garment-docs__comment { padding: 0 0 0 var(--space-12); border-radius: 0; background: transparent; box-shadow: none; }   /* B5 P3-8 (amends D-185(1)): inside the accent new-item panel the comment is a flat quote, not a white ringed panel (no card in a card) */

/* ---------- the garment head (K-04, D-206): bare 40 px icon → name (underlined) → tag … photo stack / trailing control (K-05, D-220) ---------- */

.garment-head { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-8); min-width: 0; margin-bottom: var(--space-4); }
.garment-head__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); flex: 1 1 auto; min-width: 0; }
.garment-head__name { margin: 0; min-width: 0; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-skip-ink: auto; }   /* decoration only: not a link, no hover, no pointer */
.garment-head--gone .garment-head__name { color: var(--neutral-600); text-decoration: none; }
/* D-24 (K-48): the underlined name opens that item's services popover (K-25) — a bare button that keeps the name's look; ::before = the 44 px target */
.garment-head__peek { position: relative; display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-skip-ink: auto; }
.garment-head__peek::before { content: ''; position: absolute; inset: -12px calc(-1 * var(--space-4)); }
.garment-head__peek:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-sm); }
.garment-head--gone .garment-head__name s { text-decoration-thickness: 1px; }
.garment-head .garment-icon--card { background: none; box-shadow: none; border-radius: 0; overflow: visible; }   /* K-05: the bare illustration, no well / ring / radius box */
.garment-head--gone .garment-icon { opacity: .5; filter: grayscale(1); }
.garment-head__end { display: inline-flex; align-items: center; gap: var(--space-8); flex: 0 0 auto; margin-left: auto; }

/* ---------- the photo stack (K-04, D-207): up to three overlapping 32 px stubs + "n photos", one 44 px button at the row's end ---------- */
.photo-stack { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; min-width: 44px; padding: 0 0 0 var(--space-4); margin: 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--neutral-700); }
.photo-stack:active { opacity: .7; }
.photo-stack:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-sm); }
.photo-stack__thumbs { display: inline-flex; align-items: center; }
.photo-stack__thumb { display: inline-flex; border-radius: var(--radius-sm); box-shadow: 0 0 0 2px var(--neutral-50); }
.photo-stack__thumb + .photo-stack__thumb { margin-left: calc(-1 * var(--space-12)); }
.photo-stack__count { color: var(--neutral-700); white-space: nowrap; }
.doc-photo--mini { width: var(--size-32); height: var(--size-32); border-radius: var(--radius-sm); }
.photo-stack .doc-photo__pin { display: none; }

/* ---------- the fitting-photo viewer sheet ---------- */
.docs-viewer { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-8) var(--space-20) var(--space-24); max-height: 70vh; overflow-y: auto; }
.docs-viewer__sub { margin: 0; }
.docs-viewer__stage { display: flex; flex-direction: column; align-items: center; border-radius: var(--radius-md); }
.docs-viewer__photo { width: auto; height: clamp(160px, calc(70vh - 330px), 320px); aspect-ratio: 3 / 4; max-width: 100%; }   /* K2-1-02: the stage takes the room left in the 70vh sheet (tabs, controls, strip and Remove photo are ~330 px), so nothing scrolls off at 667 or 844 */
.docs-viewer__photo .doc-photo--stage { width: 100%; height: 100%; aspect-ratio: auto; }
.docs-viewer__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-16); }
.docs-viewer__nav { width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--neutral-50); color: var(--ink); font-family: var(--font-sans); font-size: var(--size-24); line-height: 1; cursor: pointer; }
.docs-viewer__nav:disabled { opacity: .4; cursor: not-allowed; }
.docs-viewer__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
.docs-viewer__thumb { padding: 0; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; line-height: 0; }
.docs-viewer__thumb[aria-current="true"] .doc-photo { box-shadow: inset 0 0 0 2px var(--ink); }
.docs-viewer > * { flex-shrink: 0; }
.docs-viewer .cta { width: 100%; }
@media (prefers-reduced-motion: reduce) { .doc-tab, .docs-viewer__nav, .docs-editor__add { transition: none; } }
.docs-demo .docs-editor { margin: 0; padding: 0; box-shadow: none; }

/* ============================================================
   M7 (K-03) — polish: text link, stitch, flow bar, info + verified sheets, rating line, more menu, photo stubs, motion.
   ============================================================ */

/* ---------- text link (A5.9, D-195): the secondary action everywhere an outline button used to be ---------- */
.text-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: 44px; padding-inline: var(--space-8); font-family: var(--font-sans); font-size: var(--size-16); line-height: var(--lh-16); font-weight: 600; color: var(--accent-ink); background: none; border: 0; }
.text-link svg { flex-shrink: 0; }
.text-link--danger { color: var(--error-ink); }
.text-link--muted { color: var(--neutral-700); }
.text-link:disabled { color: var(--neutral-400); cursor: not-allowed; }

/* ---------- stitched dash (A5.10, signature 2): a perforation above a total ---------- */
.stitch { display: block; width: 100%; height: var(--stitch-w); margin: var(--space-8) 0; border: 0; background: repeating-linear-gradient(90deg, var(--stitch-ink) 0 var(--stitch-dash), transparent var(--stitch-dash) calc(var(--stitch-dash) + var(--stitch-gap))); }

/* ---------- booking flow bar (A5.3, D-186): Back · n of 5 · ✕ ---------- */
.flow-bar { position: absolute; inset: var(--status-h) auto auto 0; z-index: var(--z-chrome); display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-8); width: 100%; max-width: var(--column); height: var(--nav-h); padding-inline: var(--space-12); background: var(--neutral-50); }
.flow-bar .back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: var(--size-28); line-height: var(--lh-28); }
.flow-bar .back::after { inset: 0; }
.flow-bar__spacer { display: block; width: 44px; height: 44px; }
.flow-bar__steps { min-width: 0; }
.flow-bar__steps .stepper--compact { gap: var(--space-4); }
.flow-bar__exit { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); color: var(--neutral-700); }
.flow-bar__exit svg { width: var(--size-16); height: var(--size-16); }
.flow-bar__exit:disabled, .flow-bar .back:disabled { color: var(--neutral-400); cursor: not-allowed; }

/* ---------- ⓘ info button + sheets (A5.11, D-191) ---------- */
.info-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin-block: calc(-1 * var(--space-12)); color: var(--neutral-600); border-radius: var(--radius-full); }
.sec-head__aside .info-btn { margin-right: calc(-1 * var(--space-12)); }
.info-btn .icon-16 { width: var(--size-16); height: var(--size-16); }
.info-sheet { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-12) var(--space-20) var(--space-24); }
.info-sheet .meta-row { align-items: flex-start; }
.info-sheet .meta-row__glyph { color: var(--neutral-600); padding-top: var(--space-2); }

/* ---------- the tailor's Verified check + tooltip popover (A5.7, D-189; K-15) ---------- */
.verified { position: relative; display: inline-flex; align-items: center; gap: var(--space-4); min-height: 20px; padding: 0; border: 0; background: none; font-family: var(--font-sans); font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; color: var(--success-ink); cursor: pointer; }
.verified .icon-16 { width: var(--size-16); height: var(--size-16); }
/* M7-2-C-03 / K-15: 16-20 px visible, an invisible ::before carries the 44 px target (data-hit="inline") */
.verified::before, .rating-line--link::before { content: ''; position: absolute; inset: -12px calc(-1 * var(--space-8)); }
.verified--icon { min-height: 0; }
.verified--icon::before { inset: -14px; }
.verified:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-sm); }
/* K-25: ONE anchored popover shell (anchorPopover) — white, neutral-300 inset stroke, --shadow-float, radius 12, the arrow on the trigger.
   Skins: .verified-pop (K-15, the four checks) · .garment-pop (P2, what a garment is in for). Motion only when motion is welcome, never under test. */
.anchor-pop { position: absolute; z-index: var(--z-banner); box-sizing: border-box; width: max-content; max-width: calc(100% - var(--space-24)); border-radius: var(--radius-md); background: var(--white); box-shadow: inset 0 0 0 1px var(--neutral-300), var(--shadow-float); color: var(--ink); outline: none; text-align: left; white-space: normal; }
.anchor-pop__arrow { position: absolute; left: var(--pop-arrow-x, 50%); width: var(--space-8); height: var(--space-8); margin-left: calc(-0.5 * var(--space-8)); background: var(--white); border: 0 solid var(--neutral-300); transform: rotate(45deg); }
.anchor-pop[data-side="below"] .anchor-pop__arrow { top: calc(-0.5 * var(--space-8) - 1px); border-width: 1px 0 0 1px; }
.anchor-pop[data-side="above"] .anchor-pop__arrow { bottom: calc(-0.5 * var(--space-8) - 1px); border-width: 0 1px 1px 0; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-test) .verified-pop { animation: verified-pop-in var(--dur-press) var(--ease-out); }
  html:not(.is-test) .garment-pop { transform-origin: var(--pop-arrow-x, 50%) top; animation: garment-pop-in 160ms var(--ease-out) both; }
  html:not(.is-test) .garment-pop[data-side="above"] { transform-origin: var(--pop-arrow-x, 50%) bottom; }
}
@keyframes verified-pop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes garment-pop-in { from { opacity: 0; transform: translateY(calc(-1 * var(--space-4))) scale(0.96); } to { opacity: 1; transform: none; } }
.verified-pop { padding: var(--space-12) var(--space-16); }
.verified-pop__list { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.verified-pop__item { display: flex; align-items: center; gap: var(--space-8); }
.verified-pop__tick { display: inline-flex; flex-shrink: 0; color: var(--success-ink); }
.verified-pop__tick .icon-16 { width: var(--size-16); height: var(--size-16); }
/* K-25 P2 garment popover: head (32 px thumb + name + "N services"), hairline, services on cognac stitch dashes; at most 280 wide (names wrap),
   several items stack and scroll past 320 */
.garment-pop { min-width: calc(var(--space-40) * 4); max-width: min(calc(100% - var(--space-24)), calc(var(--space-40) * 7)); padding: var(--space-12) var(--space-16) var(--space-16); }
.garment-pop__list { max-height: calc(var(--space-40) * 8); overflow-y: auto; overscroll-behavior: contain; margin: calc(-1 * var(--space-4)); padding: var(--space-4); border-radius: var(--radius-sm); }
.garment-pop__list:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.garment-pop__item + .garment-pop__item { margin-top: var(--space-16); }
.garment-pop__head { display: flex; align-items: center; gap: var(--space-12); padding-bottom: var(--space-8); box-shadow: inset 0 -1px 0 var(--hairline); }
.garment-pop__head .garment-icon--row { background: var(--neutral-50); }
.garment-pop__who { display: flex; flex-direction: column; min-width: 0; }
.garment-pop__name { overflow-wrap: anywhere; }
.garment-pop__count { font-variant-numeric: tabular-nums lining-nums; }
.garment-pop__svcs { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.garment-pop__svcs li { position: relative; padding-left: var(--space-16); text-wrap: pretty; overflow-wrap: anywhere; }
.garment-pop__svcs li::before { content: ''; position: absolute; left: var(--space-2); top: calc(0.5em * var(--lh-16) - var(--space-2) - 1px); width: calc(var(--space-4) + var(--space-2)); height: calc(var(--space-4) + var(--space-2)); border-radius: 50%; background: var(--accent-base); }   /* K-25 rev: a round cognac bullet per service (was a 12 px stitch dash) */

/* ---------- rating line (A5.8, D-190) ---------- */
.rating-line { display: inline-flex; align-items: center; gap: var(--space-4); }
.rating-line__star { color: var(--accent-base); }
.rating-line--link { position: relative; min-height: 20px; }

/* ---------- ••• more menu (A5.9) ---------- */
.more-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); color: var(--ink); }
.more-menu { display: flex; flex-direction: column; padding: var(--space-4) var(--space-20) var(--space-24); }
.more-item--danger { color: var(--error-ink); }

/* ---------- photo stubs, garment hero, empty-state art (A5.12, D-194) ---------- */
.doc-photo > svg { color: var(--neutral-600); }
.doc-photo--tile { width: 72px; height: 72px; border-radius: var(--radius-md); }
.doc-photo--fill { width: 100%; height: 100%; border-radius: inherit; }
.garment-icon--hero { width: 96px; height: 96px; }
.garment-icon--tag { width: 84px; height: 92px; }   /* K-17: the garment on a hang tag (c-complete) — bare, the tag is its card; --n tags shrink it via the screen */
.garment-icon--tag.garment-icon--fallback svg { width: 60%; height: 60%; }
.garment-icon--hero.garment-icon--fallback svg { width: 60%; height: 60%; }
.empty-state__art { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; margin-bottom: var(--space-8); border-radius: var(--radius-full); background: var(--accent-bg); }
.empty-state__art .garment-icon--hero { transform: rotate(-4deg); }

/* ---------- fitting photo rows: Required until she tries (A5.13, D-196) ---------- */
.docs-editor__req { flex-shrink: 0; }
.docs-editor__row[data-missing="true"][data-tried="true"] .docs-editor__add { border-color: var(--error); }

/* ---------- misc shared changes (A5.15) ---------- */
.privacy-note { align-items: flex-start; }
.privacy-note .icon-16, .composer__hint .icon-16 { flex-shrink: 0; margin-top: 0; }
.change-summary--lines { display: flex; flex-direction: column; gap: var(--space-2); }
.rush-ladder { display: flex; flex-direction: column; gap: var(--space-2); }
.rush-tier { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.rush-tier__fee { white-space: nowrap; font-variant-numeric: tabular-nums; }
.status-hero__row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-8); }
.status-hero__row .t-figure { color: var(--ink); }
.courier-card--ready, .courier-card--loading, .courier-card--tailor { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.courier-card--failed { /* a Try again lives in it: the one courier card that stays a card */ }

/* ---------- press (A5.14): one rule for every tappable surface — transform only, never `all` ---------- */
.text-link, .top-nav__link, .more-btn, .info-btn, .tailor-row, .request-card, .appt-row, .thread-row, .thread-context, .list-row, .option-row, .where__card, .docs-editor__add, .photo-tile--add, .flow-bar__exit, .flow-bar .back, .verified { transition: transform var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out); }
:is(.cta, .text-link, .top-nav__link, .more-btn, .info-btn, .tailor-row, .appt-row, .thread-row, .thread-context, .list-row, .option-row, .garment-tile:not(.garment-tile--selected), .chip, .time-chip, .where__card, .docs-editor__add, .photo-tile--add, .select-time, .cta-small, .method-row, .scheduler__cta, .flow-bar__exit):active:not(:disabled):not([aria-disabled="true"]) { transform: scale(var(--press-scale)); }

/* reduced motion (and html.is-test): transforms off for press, sheets and modals; opacity / colour transitions stay short */
@media (prefers-reduced-motion: reduce) {
  :is(.cta, .text-link, .top-nav__link, .more-btn, .info-btn, .tailor-row, .request-card, .appt-row, .thread-row, .thread-context, .list-row, .option-row, .garment-tile, .chip, .time-chip, .where__card, .docs-editor__add, .photo-tile--add, .select-time, .cta-small, .method-row, .scheduler__cta, .flow-bar__exit):active { transform: none; }
  .request-card:has(> .request-card__link:active) { transform: none; }
  .text-link, .top-nav__link, .more-btn, .info-btn, .tailor-row, .request-card, .appt-row, .thread-row, .thread-context, .list-row, .where__card, .flow-bar__exit, .flow-bar .back, .verified { transition: color 150ms ease, background-color 150ms ease; }
  .modal-host:not([data-open="true"]) .modal, .modal-host:not([data-open="true"]) .scheduler-popup { transform: none; }
}

/* ---------- forced colors (K-04 / AU-P2-5): strokes are inset box-shadows and selections are fills, both erased by Windows High Contrast ---------- */
@media (forced-colors: active) {
  .field__box, .cta, .cta-small, .filter-pill__box, .garment-tile, .segmented__opt, .chip, .time-chip,
  .option-row, .tailor-row, .request-card, .appt-row, .thread-list, .composer__input, .photo-stack, .card { border: 1px solid CanvasText; }
  .garment-tile--selected, .segmented__opt.is-selected, .chip--selected { outline: 3px solid Highlight; outline-offset: -3px; }
  .toggle::before { background: Canvas; border: 1px solid CanvasText; }
  .toggle[aria-checked="true"]::before { background: Highlight; }
  .toggle__knob { background: CanvasText; }
  .toggle[aria-checked="true"] .toggle__knob { background: HighlightText; }
  .field__box:focus-within { outline: 2px solid Highlight; }
  .top-nav__logo { color: CanvasText; }
}

/* CR-m5: an action-bar lead of two lines — the figure, then a note under it */
.lead-stack { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- zoom tier (LAYOUT-PLAN P1-2): at <= 300 CSS px (200% zoom on a 390 phone, split view) fixed rows compress or reflow.
   Not a container query: container-type would make #screen the containing block of the fixed overlay holder and toast.
   Nothing here applies at 320 or wider, so the 390 / 320 baselines do not move.
   S-17 (pre-MVP sweep, D-443): the tiers are em queries (18.75em = 300 px at the browser's 16 px default), so a reader who doubles the
   text size (390 px = 12.2em at 32 px) gets the same reflow as 200% zoom; identical at the default. ---------- */
@media (max-width: 18.75em) {
  /* K-54 F6 (D-459): the tailor card's head stacks — avatar + name share the first line, the estimate drops under them (the name never
     squeezes to a letter per line) */
  .tailor-row__head { grid-template-columns: var(--space-40) minmax(0, 1fr); row-gap: var(--space-8); }
  .tailor-row__name { overflow-wrap: break-word; }
  .tailor-row__quote { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--space-4); text-align: left; }
  /* K-54 F7 (D-459): a date + time wheel (4 columns) stacks — the day wheel on its own row, the time wheels under it, each with its band */
  .scheduler:has(.wheel--sched > .wheel__col ~ .wheel__col ~ .wheel__col ~ .wheel__col) { padding-inline: var(--space-12); }
  .scheduler .wheel--sched:has(> .wheel__col ~ .wheel__col ~ .wheel__col ~ .wheel__col) {
    --sched-h: 220px; --sched-band: 88px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-8); height: auto;
  }
  .scheduler--compact .wheel--sched:has(> .wheel__col ~ .wheel__col ~ .wheel__col ~ .wheel__col) { --sched-h: 132px; --sched-band: 44px; }
  .scheduler--top .wheel--sched:has(> .wheel__col ~ .wheel__col ~ .wheel__col ~ .wheel__col) { --sched-band: 0px; }
  .wheel--sched:has(> .wheel__col ~ .wheel__col ~ .wheel__col ~ .wheel__col) > .wheel__col { z-index: 1; min-width: 0; }
  .wheel--sched:has(> .wheel__col ~ .wheel__col ~ .wheel__col ~ .wheel__col) > .wheel__band + .wheel__col { grid-column: 1 / -1; }
  .wheel--sched:has(> .wheel__col ~ .wheel__col ~ .wheel__col ~ .wheel__col) > .wheel__band { top: var(--sched-band); }
  .wheel--sched:has(> .wheel__col ~ .wheel__col ~ .wheel__col ~ .wheel__col)::after {
    content: ''; position: absolute; left: 0; right: 0; top: calc(var(--sched-h) + var(--space-8) + var(--sched-band)); height: 44px;
    border-radius: var(--radius-md); background: var(--neutral-50);
  }
  .wheel--sched:has(> .wheel__col ~ .wheel__col ~ .wheel__col ~ .wheel__col) .wheel__row { white-space: nowrap; }
  /* K-54 (the a-case zoom check): a long status under an amount ("Pending · Fri, Oct 16") wraps instead of running over the label */
  .money-row__right { flex-shrink: 1; min-width: 0; }
  .money-row__status { text-align: right; }
  /* SF-35: a deadline on another day ("23h left · by tomorrow 10:00 AM") may wrap under the lead instead of crossing the edge */
  .request-card__strip--split { flex-wrap: wrap; row-gap: var(--space-4); }
  .request-card__strip[data-strip] .request-card__strip-clock { white-space: normal; flex-shrink: 1; min-width: 0; }
  /* nav: Back + 4 icons share the row (5 x 32 = 160 <= 171); D-187 and K-06 kept, only the gaps compress */
  .top-nav { padding-inline: var(--space-12); }
  .top-nav__links { gap: 0; min-width: 0; margin-right: calc(-1 * var(--space-4)); }
  .top-nav__link, .top-nav__back { flex: 0 1 44px; min-width: 32px; width: auto; }
  .top-nav__back { margin-left: calc(-1 * var(--space-8)); }
  .top-nav__logo { flex: 0 1 52px; width: 52px; min-width: 40px; height: auto; }   /* the wordmark shrinks first: tab roots have the logo + 4 icons (40 + 4 x 32 = 168) */
  /* rating stars: five columns that may shrink to the glyph */
  .stars--input { display: grid; grid-template-columns: repeat(5, minmax(0, 44px)); max-width: 100%; }   /* 5 x 26 at the narrowest: still 52 px of touch at 100% zoom */
  .stars__opt { width: auto; min-width: 0; }
  /* day hours: the open / close buttons wrap instead of running off the edge */
  .day-hours__times { flex-wrap: wrap; }
  .day-hours__time { min-width: 0; flex: 1 1 96px; }
  .day-hours__dash { display: none; }   /* open and close stack: no stranded dash */
  .toggle-row { gap: var(--space-8); flex-wrap: wrap; }   /* K9-2-03 (D-233): the toggle drops under its label only when the longest word and the toggle cannot share the line */
  .toggle-row__text { flex: 1 1 0; min-width: min-content; }
  /* B5 P2-5: the edge lint's 195 finds: the appointment row's name floor yields to the row width, and a service row's take-home line may wrap */
  /* K9-2-01 (D-233): the appointment row stacks. The 340 tier's third column could shrink to 0, so the right-aligned status /
     amount / caption printed over the name / time / place. Here the avatar and name share the first line and every other
     line runs the row's full text width under them, left-aligned; the chevron spans the rows */
  .appt-row { grid-template-columns: 40px minmax(0, 1fr) var(--size-12); }
  .appt-row__avatar { grid-row: 1; align-self: center; }
  .appt-row__name { grid-column: 2; grid-row: 1; }
  .appt-row__pill, .appt-row__when, .appt-row__amount, .appt-row__place, .appt-row__caption,
  .appt-row--bare .appt-row__when, .appt-row--bare .appt-row__place { grid-column: 1 / span 2; justify-self: start; text-align: left; }
  .appt-row__pill { grid-row: 2; margin-top: var(--space-4); }
  .appt-row__when { grid-row: 3; }
  .appt-row__amount { grid-row: 4; }
  .appt-row__place { grid-row: 5; white-space: normal; overflow-wrap: break-word; }
  .appt-row__caption { grid-row: 6; }
  .appt-row__amount:empty, .appt-row__caption:empty, .appt-row__place:empty { display: none; }
  .appt-row__chevron { grid-column: 3; grid-row: 1 / span 6; }
  .service-row__part { white-space: normal; }
  .toggle-row__label { overflow-wrap: break-word; }   /* a long label wraps between words beside its 52 px toggle (break-word keeps whole words: min-content is the longest word) */
  /* the appointment-like cards: the countdown / photo stack drop under the name */
  .request-card__top, .request-card__name { flex-wrap: wrap; }
  .garment-head { flex-wrap: wrap; }
  /* labels may wrap; only the amount stays whole */
  .rush-tier { white-space: normal; }
  .rush-tier__when { min-width: 0; overflow-wrap: break-word; }
  .status { white-space: normal; }   /* a long status word wraps beside its dot instead of running off the edge */
  /* the customer preview (to-profile, t-shop, to-where): the text drops under the avatar when its longest word cannot sit beside it */
  .mini-profile { flex-wrap: wrap; }
  .mini-profile__text { min-width: min-content; }
  /* K9-2-02 (D-233): text that overprinted text at 195 */
  .service-row { flex-wrap: wrap; row-gap: var(--space-4); }   /* to-services: the price box drops under its label */
  .service-row__check { flex-basis: 100%; }
  .service-row__price { width: 100%; align-items: stretch; padding-left: calc(var(--size-24) + var(--space-12)); padding-top: 0; }
  .service-row__box { width: 100%; }
  .service-row__pay { margin-left: 0; }
  /* a saved-item tag (c-cards, c-addresses), a row amount (t-earnings) or a check's status dot (DG-4) goes on its own line under the title / sub */
  .list-row:has(> .list-row__right :is(.list-row__tag, [data-money], .status)) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0; row-gap: var(--space-4); }
  .list-row:has(> .list-row__right :is(.list-row__tag, [data-money], .status)) > .list-row__lead { grid-column: 1; grid-row: 1 / span 2; margin-right: var(--space-12); }
  .list-row:has(> .list-row__right :is(.list-row__tag, [data-money], .status)) > .list-row__text { grid-column: 2; grid-row: 1; }
  .list-row:has(> .list-row__right :is(.list-row__tag, [data-money], .status)) > .list-row__right { grid-column: 2; grid-row: 2; justify-self: start; }
  .list-row:has(> .list-row__right :is(.list-row__tag, [data-money], .status)) > .list-row__chevron { grid-column: 3; grid-row: 1 / span 2; margin-left: var(--space-12); }
  /* c-job: two tiles a row, labels wrap whole words, the tile grows to hold them; − / + share the tile (each still 64+ px of touch at 200%) */
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garment-tile { height: auto; min-height: 110px; padding-inline: var(--space-2); }   /* 65 px of label: "Accessories" fits whole */
  .garment-tile__label, .garment-tile--selected .garment-tile__label { flex: 0 0 auto; white-space: normal; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }   /* "Accessories" hyphenates rather than splits blind */
  .garment-tile__step { min-width: 0; }
}

/* ---------- K-17 / K-20 / K-21 the linen stage + tag rail (linenStage, tagRail): c-complete and t-job completed ---------- */
.linen-stage { margin: calc(-1 * var(--space-16)) calc(-1 * var(--space-20)) 0; padding: var(--space-24) var(--space-20) 0; background: var(--neutral-100); color: var(--ink); }
.linen-stage__eyebrow { margin: 0; color: var(--accent-ink); }
.linen-stage--calm .linen-stage__eyebrow { color: var(--neutral-600); }
.linen-stage__title { margin: var(--space-8) 0 0; font-family: var(--font-serif); font-size: var(--size-36); line-height: var(--lh-28); font-weight: 500; color: var(--ink); text-wrap: balance; }
.linen-stage__line { margin: var(--space-8) 0 0; color: var(--neutral-700); text-wrap: pretty; }
.tag-rail { position: relative; margin-top: var(--rhythm-block); padding: var(--space-8) 0 var(--space-32); }
.tag-rail__stitch { position: absolute; left: 0; right: 0; top: var(--space-8); height: 0; border-top: 2px dashed var(--accent-base); }
.tag-rail__tags { display: flex; justify-content: center; align-items: flex-start; gap: var(--space-24); }
.tag-rail__tags[data-n="3"] { gap: var(--space-8); }
.tag-rail__tag { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 1 144px; min-width: 0; transform-origin: 50% 0; }
.tag-rail__string { width: 2px; height: var(--space-20); background: var(--accent-base); }
.tag-rail__card { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-8) var(--space-8) var(--space-12); border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm); background: var(--white); color: var(--ink); box-shadow: var(--shadow-float); }
.tag-rail__hole { width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); box-shadow: inset 0 0 0 2px var(--accent-base); }
.tag-rail__card .garment-icon--tag { max-width: 100%; }
.tag-rail__name { max-width: 100%; font-size: var(--size-12); line-height: var(--lh-12); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.tag-rail__svc { font-size: var(--size-10); line-height: var(--lh-10); font-weight: 600; color: var(--neutral-600); text-align: center; }
/* K-21 option Z: four or more tags slide along the stitch — the stitch runs edge to edge and stays; full-size tags scroll-snap under it, three + a peek */
.tag-rail--slide .tag-rail__stitch { left: calc(-1 * var(--space-20)); right: calc(-1 * var(--space-20)); }
.tag-rail__scroll { margin-inline: calc(-1 * var(--space-20)); padding: 0 var(--space-20) var(--space-16); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-20); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - var(--space-24)), transparent); mask-image: linear-gradient(90deg, var(--ink) calc(100% - var(--space-24)), transparent); }
.tag-rail__scroll::-webkit-scrollbar { display: none; }
.tag-rail__scroll:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.tag-rail--slide .tag-rail__tags { justify-content: flex-start; gap: var(--space-8); width: max-content; }
.tag-rail--slide .tag-rail__tag { flex: 0 0 100px; scroll-snap-align: start; }
.tag-rail--slide { padding-bottom: var(--space-24); }
.tag-rail__more { margin: var(--space-4) 0 0; text-align: center; }
/* the stitch sews itself, the tags swing in from it and settle (staggered by --d); complete at rest, html.is-test never moves; a calm stage never moves */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tag-rail-wipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }
  @keyframes tag-rail-swing { 0% { transform: translateY(calc(-1 * var(--space-24))) rotate(-10deg); opacity: 0; } 35% { opacity: 1; } 45% { transform: translateY(0) rotate(6deg); } 65% { transform: rotate(-3deg); } 85% { transform: rotate(1deg); } 100% { transform: none; opacity: 1; } }
  html:not(.is-test) .tag-rail__stitch::after { content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--space-4)); height: var(--space-8); background: var(--neutral-100); transform-origin: 100% 50%; transform: scaleX(0); animation: tag-rail-wipe 700ms var(--ease-in-out) both; }
  html:not(.is-test) .tag-rail__tag { animation: tag-rail-swing 1100ms var(--ease-out) var(--d, 450ms) both; }
  html .linen-stage--calm .tag-rail__tag { animation: none; }
  html .linen-stage--calm .tag-rail__stitch::after { display: none; animation: none; }
  .tag-rail__scroll { scroll-behavior: smooth; }
}

/* ---------- K-18 (D-249) the hanging stage (hangStage): 1-E's linen + cognac stitch, edge to edge; K-22 H1 threads; K-21 sliding rail ---------- */
.hang { margin-inline: calc(-1 * var(--space-20)); padding: var(--space-16) 0; background: var(--neutral-100); color: var(--ink); }
.hang__band { position: relative; display: flex; align-items: flex-start; }
.hang__rail { position: absolute; left: 0; right: 0; top: 17px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent-base) 0 6px, transparent 6px 10px); }
.hang__scroll { position: relative; display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.hang__scroll::-webkit-scrollbar { display: none; }
.hang__scroll--fit { justify-content: safe center; }
.hang--slide .hang__scroll { padding-left: var(--space-12); scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-12);
  -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - var(--space-24)), transparent); mask-image: linear-gradient(90deg, var(--ink) calc(100% - var(--space-24)), transparent); }
.hang--slide .hang__slot { scroll-snap-align: start; }
.hang__scroll:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.hang__track { position: relative; display: flex; flex: 0 0 auto; }
.hang__slot { position: relative; display: block; flex: 0 0 auto; overflow: visible; }
.hang__thread { stroke: var(--accent-base); stroke-width: 1.4; }
.hang__eyelet { fill: var(--white); stroke: var(--accent-base); stroke-width: 1.4; }
.hang__item, .hang__tag { transform-box: view-box; }
.hang__loop { fill: none; stroke: var(--accent-base); stroke-width: 1.4; }
.hang__string { stroke: var(--accent-base); stroke-width: 1.4; }
.hang__tagcard { fill: var(--white); filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--ink) 14%, transparent)); }
.hang__hole { fill: var(--white); stroke: var(--accent-base); stroke-width: 2; }
.hang__t1 { fill: var(--ink); font-family: var(--font-sans); font-size: var(--size-12); font-weight: 700; letter-spacing: -0.01em; }
.hang__t2 { fill: var(--neutral-600); font-family: var(--font-sans); font-size: var(--size-10); font-weight: 600; }
.hang__cap { display: flex; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-8); padding-inline: var(--space-20); }
.hang__cap .t-small + .t-small { color: var(--neutral-700); text-align: right; }
/* the stitch sews itself left to right, then each garment and the tag drop in on their threads and settle (staggered by --d); complete at rest (html.is-test never animates) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hang-sew { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes hang-drop { 0% { transform: translateY(-44px) rotate(-9deg); opacity: 0; } 50% { transform: translateY(2px) rotate(4deg); opacity: 1; } 70% { transform: translateY(0) rotate(-2deg); } 86% { transform: rotate(.8deg); } 100% { transform: none; opacity: 1; } }
  html:not(.is-test) .hang__rail { transform-origin: 0 50%; animation: hang-sew 700ms var(--ease-in-out) both; }
  html:not(.is-test) .hang__item, html:not(.is-test) .hang__tag { animation: hang-drop 1000ms var(--ease-out) var(--d, 450ms) both; }
  .hang__scroll { scroll-behavior: smooth; }
}

/* ===== S1-A ===== */
/* Study-1 WS-A: pickup code, auto-complete line, the photo figure (B1 edit photo), review reminder */
.pickup-code { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-16) var(--space-20); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-ring); }
.pickup-code__digits { letter-spacing: 0.24em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.auto-line { display: flex; align-items: flex-start; gap: var(--space-8); margin: 0; }
.auto-line svg { flex: none; width: var(--size-16); height: var(--size-16); margin-top: var(--space-2); color: var(--neutral-600); }
.photo-figure { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; }
.photo-figure__frame { display: block; width: 128px; }
.reminder-card { display: flex; gap: var(--space-12); align-items: flex-start; }
.reminder-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--space-40); height: var(--space-40); border-radius: var(--radius-full); background: var(--accent-bg); color: var(--accent-ink); }
.reminder-card__icon svg { width: var(--size-24); height: var(--size-24); }
.reminder-card__body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.reminder-card__body .cta-small { align-self: flex-start; max-width: 100%; margin-top: var(--space-8); padding-inline: var(--space-16); white-space: normal; text-align: center; }
/* DG-2 A (pre-MVP A1): the one-time notice — the reminder card + a 44 px ✕ in its top-right corner */
.notice-card { position: relative; }
.reminder-card--dismissible { padding-right: var(--space-40); }
.notice-card__close { position: absolute; top: var(--space-4); right: var(--space-4); display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border-radius: var(--radius-full); color: var(--neutral-600); }
.notice-card__close svg { width: var(--size-16); height: var(--size-16); }
.notice-card__close:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }

/* ===== S1-B ===== */
/* Study-1 WS-B: private General notes (B2) — one white card of notes, hairlines between them; the editor in place; the edit's due line (B1) */
.private-notes__lock { display: flex; align-items: center; gap: var(--space-8); margin: 0; }
.private-notes__lock svg { flex: none; width: var(--size-16); height: var(--size-16); color: var(--neutral-600); }
.private-notes__empty { margin: 0; text-wrap: pretty; }
.private-notes__list { list-style: none; margin: 0; padding: 0 var(--space-16); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-ring); }
.private-note { display: flex; flex-direction: column; gap: var(--space-8); padding-block: var(--space-16) var(--space-4); }
.private-note + .private-note { box-shadow: inset 0 1px 0 var(--hairline); }
.private-note__text { margin: 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; }
.private-note__photos { display: flex; flex-wrap: wrap; gap: var(--space-8); align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.private-note__photos:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-sm); }
.private-note__thumb { display: block; }
.private-note__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.private-note__foot p { margin: 0; }
.private-note__foot .text-link { margin-right: calc(-1 * var(--space-8)); }
.private-note--editing { padding-bottom: var(--space-16); }
.private-notes__tray { margin: 0; }
.private-notes__add-photo { display: flex; }
.private-notes__add-photo .text-link, .private-notes__add .text-link { margin-left: calc(-1 * var(--space-8)); }
.private-notes__add-photo .text-link svg, .private-notes__add .text-link svg { width: var(--size-16); height: var(--size-16); }
.private-notes__max { margin: 0; }
.private-notes__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.private-notes__actions .cta-small { flex: 0 0 auto; padding-inline: var(--space-20); }
.private-notes__add { display: flex; }
.due-change { font-variant-numeric: tabular-nums; }
.due-change__part { white-space: nowrap; }

/* ===== S1-C ===== */
/* C1 · placeholder example text: grey, regular weight, gone on the first keystroke (native placeholder, never a value) */
.text-area__input::placeholder { color: var(--neutral-500-ink); font-weight: 400; }
/* C2 · at the hard stop the counter and the ring take the error tone; the field stays valid (no aria-invalid) */
.text-area--full .field__box { box-shadow: inset 0 0 0 1px var(--error); }
.text-area--full .field__box:focus-within { box-shadow: inset 0 0 0 2px var(--error); }
.text-area__foot-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.text-area__notice { margin: 0; }
.text-area__notice:empty { display: none; }
/* C1 · the live card preview stays in view while the fields under it scroll (the onboarding bar scrolls away, so top 0) */
.customer-preview--sticky { position: sticky; top: 0; z-index: var(--z-sticky); margin-inline: calc(-1 * var(--space-20)); padding: var(--space-12) var(--space-20); background: var(--neutral-50); box-shadow: 0 1px 0 var(--hairline); }
/* C3 · the "Most NYC tailors charge" line, under the garments caption in the name column (K-45), indented to the service name */
.service-row__range { margin: 0; padding-left: calc(var(--size-24) + var(--space-12)); padding-bottom: var(--space-8); }
/* C5 · neighborhood picker: one collapsible group per borough */
.hood-picker { display: flex; flex-direction: column; gap: var(--space-8); }
.hood-picker__label, .hood-picker__help { margin: 0; }
.hood-picker__groups { display: flex; flex-direction: column; margin-top: var(--space-4); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--neutral-200); }
.hood-group + .hood-group { box-shadow: inset 0 1px 0 var(--neutral-200); }
.hood-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); width: 100%; min-height: 48px; padding: var(--space-8) var(--space-12) var(--space-8) var(--space-16); border: 0; background: none; text-align: left; color: var(--ink); }
.hood-group__name { flex: 1 1 auto; }   /* no min-width: 0 — at 200% zoom the count wraps under the name instead of overprinting it */
.hood-group__count { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.hood-group__chev { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; color: var(--neutral-700); }
.hood-group__chev svg { width: 12px; height: 12px; }
.hood-group.is-open .hood-group__chev svg { transform: rotate(180deg); }
.hood-group__chips { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: 0 var(--space-16) var(--space-16); }
.hood-group__chips[hidden] { display: none; }
.hood-chip { min-height: 44px; padding-block: var(--space-8); white-space: normal; text-align: left; }
.hood-picker--error .hood-picker__groups { box-shadow: inset 0 0 0 1px var(--error); }
@media (prefers-reduced-motion: no-preference) {
  .hood-group__chev svg { transition: transform var(--dur-press) var(--ease-out); }
}
/* C5 · the tile map: one rounded tile per neighborhood, selected = accent */
.hood-map { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); margin: 0; padding: var(--space-16) var(--space-12) var(--space-12); border-radius: var(--radius-md); background: var(--neutral-100); }
.hood-map__svg { display: block; width: 100%; max-width: 240px; height: auto; }
.hood-map__tile { fill: var(--white); stroke: var(--neutral-300); stroke-width: 1; }
.hood-map__tile.is-on { fill: var(--accent-base); stroke: var(--accent-base); }
.hood-map__label { fill: var(--neutral-600); font-family: var(--font-sans); font-size: var(--size-10); font-weight: 600; letter-spacing: 0.06em; }
.hood-map__caption { margin: 0; text-align: center; }
/* C3 · a disabled outline small button (to-services "Use recommended prices" before anything is ticked) */
.cta-small:disabled:not(.cta-small--filled) { background: var(--neutral-100); color: var(--neutral-500-ink); box-shadow: inset 0 0 0 1px var(--neutral-200); cursor: not-allowed; }

/* ===== K-40 (T1) ===== the handoff time: the When row under the chosen way back, and the Scheduler sheet */
.when-row .list-row__lead { color: var(--neutral-600); }
.when-row__ask { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.when-row__val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.when-row.is-set { box-shadow: inset 0 0 0 1.5px var(--ink); }
.handoff-sheet { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; }
.handoff-sheet p { margin: 0; }
.handoff-sheet__wheel { display: flex; justify-content: center; }

/* K-41 (R3, D-296): the 24-hour reminder card on Home — the strip across the card, the booking row flat inside it, the rule, Confirm inline */
.visit-prompt { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); overflow: hidden; border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-ring); }
.visit-prompt > .request-card__strip { flex-wrap: wrap; row-gap: var(--space-4); margin: calc(-1 * var(--space-16)) calc(-1 * var(--space-16)) 0; }   /* at 200% zoom the time wraps under the question */
.visit-prompt .appt-row { margin: 0; padding: 0; background: none; box-shadow: none; }
.visit-prompt__rule { margin: 0; text-wrap: pretty; }
.visit-prompt__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
/* K-54 F1 (D-454): a booking that needs her — the row, then its one full-width primary */
.appt-next { display: flex; flex-direction: column; gap: var(--space-12); }
.visit-prompt__actions .cta-small { flex: 1 1 0; min-width: fit-content; justify-content: center; }   /* equal halves; at 200% zoom they stack */

/* SF-43: the edit-scope line under a live-shop editor's intro */
.edit-scope { margin: var(--space-8) 0 0; text-wrap: pretty; }

/* S-32 (pre-MVP A1): the Call through Taily sheet */
.call-sheet { display: flex; flex-direction: column; gap: var(--space-12); }
/* ---------- DG-4, option B (K-48, D-350…D-355): the four checks, the background-check disclosure, the hosted payout step ---------- */
.verify-list .list-row { min-height: 56px; }
.verify-list .list-row__right { flex: 0 0 auto; }
.disclosure { display: flex; flex-direction: column; gap: var(--rhythm-tight); }
.disclosure p { margin: 0; text-wrap: pretty; }
.disclosure__draft { padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm); background: var(--neutral-100); }   /* the copy is a placeholder for counsel — say so on the page */
.disclosure__agree { margin-top: var(--rhythm-group); }
.disclosure__go { margin-top: var(--rhythm-group); padding-bottom: var(--space-8); }
.disclosure__go .cta { width: 100%; }
.id-sheet__lead { margin: 0 0 var(--rhythm-group); text-wrap: pretty; }
.secure-setup { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); }
.secure-setup p { margin: 0; }
.secure-setup__list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding-left: var(--space-20); }
.payout-rows .list-row { min-height: 56px; }

/* P-27 (D-362): a text area whose label is a section title (c-review: peers with "Your rating" and "Photos", R4-1-C-10) */
.field__label.field__label--section { font-size: var(--size-16); line-height: var(--lh-16); font-weight: 600; color: var(--ink); }

/* ============================================================
   pre-MVP A2 (K-48.1, DG-1 option B, D-14, S-32, D-21): Taily Help — the Get help button, the case strip, the Help thread (c-case /
   t-case), Help home (c-help / t-help), policies, the confirm and safety sheets, garment protection, the admin's rows (a-inbox / a-case)
   ============================================================ */
.help-entry { margin-top: var(--rhythm-group); }
.help-entry .help-row { margin-top: 0; }
/* the Get help person button on a row of its own (B's mock): one full-width tile, icon beside the word */
.help-row { margin-top: var(--space-8); }
.help-row .cta-small { flex-direction: row; gap: var(--space-8); min-height: 44px; padding-block: var(--space-8); }
.case-strip { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16) var(--space-16) var(--space-4); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-ring); overflow: hidden; }
.case-strip > .request-card__strip { margin-bottom: var(--space-4); }
.case-strip__line { margin: 0; }
.case-strip > .text-link { align-self: flex-start; margin-left: calc(-1 * var(--space-8)); }
.case-strip-wrap { margin-top: var(--rhythm-group); }
.help-topics { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); }
.help-topics__chip { min-height: 44px; }
.help-thread { flex: 1 0 auto; display: flex; flex-direction: column; gap: 0; padding-bottom: var(--space-16); }
.help-thread__strip { margin-top: var(--rhythm-tight); }
.help-thread__strip .request-card__strip { margin: 0; border-radius: var(--radius-md); }
.help-thread__context { margin-top: var(--rhythm-group); }
.help-thread__note { margin-top: var(--rhythm-tight); padding-inline: var(--space-4); }
.help-thread__messages { display: flex; flex: 1 0 auto; flex-direction: column; gap: var(--space-12); margin-top: var(--rhythm-block); }
.help-thread__step, .help-thread__decision { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.help-thread__step p, .help-thread__decision p { margin: 0; }
.help-thread__step .cta { width: 100%; }
.help-thread__foot {
  position: sticky; bottom: 0; z-index: var(--z-sticky); flex-shrink: 0; width: 100%; max-width: var(--column);
  padding: var(--space-12) var(--space-20) calc(var(--space-20) + var(--safe-bottom)); background: var(--neutral-50);
}
.help-thread__foot .read-only { display: flex; flex-direction: column; gap: var(--space-12); }
.help-home { gap: 0; padding-bottom: var(--space-40); }
.help-home__ask { display: flex; flex-direction: column; gap: var(--space-12); }
.help-home__ask p { margin: 0; }
.help-home__list .list-row { min-height: 64px; }
.help-home__note { margin: var(--space-8) 0 0; text-wrap: pretty; }   /* K-53 Q10 (D-430): the backup admin + after-hours line */
.help-home__dot { display: inline-block; width: var(--space-8); height: var(--space-8); margin-left: var(--space-4); border-radius: var(--radius-full); background: var(--accent-base); vertical-align: middle; }
.help-home__select { user-select: text; font-variant-numeric: tabular-nums; }
.policy { gap: 0; padding-bottom: var(--space-40); }
.policy__sec { display: flex; flex-direction: column; gap: var(--space-8); }
.policy__title, .policy__line { margin: 0; }
/* the legal pages (B2's c-legal / t-legal, unified into c-policy / t-policy at the merge, D-380): the version line, IN SHORT as a list, the counsel block */
.policy__version { margin: var(--space-4) 0 0; }
.policy__list { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding-left: var(--space-20); }
.policy__list li { text-wrap: pretty; }
/* K-53 b (D-429): the draft line at the top of every legal draft (the "Full text coming soon" block is retired) */
.policy__draft { display: flex; gap: var(--space-8); align-items: flex-start; margin: var(--space-4) 0 0; padding: var(--space-12); border-radius: var(--radius-md); background: var(--warning-bg); color: var(--warning-ink); }
.policy__draft svg { flex-shrink: 0; margin-top: var(--space-4); }
.protection-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-8); row-gap: 0; }
.protection-row > svg { flex-shrink: 0; color: var(--success); }
.protection-row > span { flex: 1 1 200px; min-width: 0; }
.protection-row .text-link { margin-left: calc(-1 * var(--space-8)); }
.safety-report { display: flex; flex-direction: column; gap: var(--space-12); }   /* the confirm sheets are B2's .confirm-sheet (D-375) */
.safety-report__reasons { display: flex; flex-direction: column; }
.page-head .request-card__top > .request-head__more { flex: 0 0 auto; margin-right: calc(-1 * var(--space-12)); }
/* the admin (a-inbox / a-case) */
.admin-row { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; min-height: 72px; padding: var(--space-12) var(--space-16); border: 0; border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-ring); text-align: left; color: var(--ink); }
.admin-row + .admin-row { margin-top: var(--space-8); }
.admin-row--unread { box-shadow: inset 0 0 0 1px var(--card-ring), inset 3px 0 0 var(--accent-base); }
.admin-row__head, .admin-row__foot { display: flex; align-items: center; gap: var(--space-8); }
.admin-row__head { justify-content: space-between; }
.admin-row__ref { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.admin-row__badge { display: inline-flex; align-items: center; justify-content: center; min-width: var(--size-16); height: var(--size-16); margin-left: auto; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--accent-base); color: var(--white); }
.admin-note { display: flex; align-items: center; gap: var(--space-8); width: 100%; min-height: 56px; padding: var(--space-8) 0; border: 0; background: none; text-align: left; color: var(--ink); box-shadow: inset 0 -1px 0 var(--hairline); }
.admin-note:last-child { box-shadow: none; }
.admin-note__dot { flex: 0 0 auto; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: var(--accent-base); }
.admin-note__text { flex: 1 1 auto; min-width: 0; }
.admin-note__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
/* ---------- pre-MVP B2 ---------- */
/* P-32 (D-375): the one confirm container — a bottom sheet (sign out, leave without saving, delete account, as cancel / remove / decline) */
.confirm-sheet { display: flex; flex-direction: column; gap: var(--space-16); }
.confirm-sheet__body { display: flex; flex-direction: column; gap: var(--space-8); }
.confirm-sheet__body p { margin: 0; text-wrap: pretty; }
.confirm-sheet__actions { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-4); }
/* P-31 (D-374): a card that is one tap target carries a 3:1 outline against the page; list cards (rows with chevrons) keep the chalk ring */
button.card, .card.request-card, .card.tailor-row, .method-row { box-shadow: inset 0 0 0 1px var(--card-ring-tap); }   /* tailor row, thread context, request card, Pay with; .appt-row, .where__card, .c-complete__row set it in their own rules */
/* DG-3 A (D-370 / D-371): the change-phone page, shared by both personas (js/account-ui.js) */
.phone-change__lead { margin: var(--rhythm-tight) 0 var(--rhythm-block); text-wrap: pretty; }
.phone-change__link, .phone-change__resend { position: relative; padding: 0; border: 0; background: none; font: inherit; color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.phone-change__link::before { content: ''; position: absolute; inset: -12px -4px; }
.phone-change__resend { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-8); font-size: var(--size-16); }
.phone-change__wait { margin: var(--space-12) 0 0; }

/* The render error boundary (app.js renderCrash): a calm screen instead of a blank page */
.render-crash { display: flex; flex-direction: column; gap: var(--rhythm-group); }
.render-crash h1 { margin: 0; }
.render-crash p { margin: 0; text-wrap: pretty; }
.render-crash__id { font-variant-numeric: tabular-nums; font-weight: 600; }
.render-crash__actions { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-12); }