/* Lead-to-Booking, showroom appointments: the kinds of appointment, the list of pieces beside them, a piece's
   own page and the note staff prepare from. Rules and hairlines where a box would be; colours, radius and the
   display face come from the business's tokens. */

/* ---- small labels: the list's heading, a group in the sheet, a detail's name ---- */
.xb-fit-h, .xb-fit-pick-h, .xb-fit-eyebrow, .xb-fit-detail > h2 { color: var(--x-muted); font: 600 .8125rem/var(--x-lh-label) var(--x-text); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }

/* ---- the kinds of appointment: rows between hairlines, one radio across them ---- */
.xb-fit-kinds { min-width: 0; margin: 0; padding: 0; border: 0; }
.xb-fit-kinds > legend { margin-bottom: 10px; padding: 0; font-weight: 600; }
.xb-fit-kind { position: relative; display: block; border-top: 1px solid var(--x-hair); cursor: pointer; }
.xb-fit-kind:last-child { border-bottom: 1px solid var(--x-hair); }
.xb-fit-kind input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.xb-fit-kind-face { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 18px 4px 18px 14px; transition: background-color var(--x-fast) ease; }
/* The mark is drawn, so the choice is told by its shape as well as by the rule at the row's edge. */
.xb-fit-kind-face::before { content: ""; width: 18px; height: 18px; margin-top: .22em; border: 1.5px solid var(--x-line); border-radius: 50%; }
.xb-fit-kind input:checked + .xb-fit-kind-face { background: var(--x-surface); box-shadow: inset 3px 0 0 var(--x-accent); }
.xb-fit-kind input:checked + .xb-fit-kind-face::before { border-color: var(--x-accent); background: radial-gradient(circle, var(--x-accent) 0 4.5px, transparent 5.5px); }
.xb-fit-kind input:focus-visible + .xb-fit-kind-face { outline: 2px solid var(--x-focus); outline-offset: 2px; }
.xb-fit-kind-text { display: grid; gap: 4px; min-width: 0; }
.xb-fit-kind-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.xb-fit-kind-title { font: var(--x-display-weight, 600) 1.3125rem/var(--x-lh-head) var(--x-display, var(--x-text)); }
.xb-fit-kind-title:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xb-fit-kind-meta { color: var(--x-muted); font-variant-numeric: tabular-nums; }
.xb-fit-kind-note { color: var(--x-muted); font-size: .9375rem; }
.xb-fit-kind-media { width: 84px; }
.xb-fit-kind-media .x-img { width: 100%; }
@media (min-width: 37.5em) { .xb-fit-kind-media { width: 132px; } }

/* ---- the list of pieces: a ruled list under one strong line, never a boxed basket ---- */
.xb-fit { display: grid; gap: 12px; min-width: 0; padding-top: 14px; border-top: 2px solid var(--x-ink); }
.xb-fit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.xb-fit-n { color: var(--x-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.xb-fit-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--x-hair); }
.xb-fit-item:last-child { border-bottom: 1px solid var(--x-hair); }
.xb-fit-item--gone { grid-template-columns: minmax(0, 1fr); }
.xb-fit-thumb .x-img, .xb-fit-pick-thumb .x-img { width: 100%; }
.xb-fit-body { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.xb-fit-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; }
.xb-fit-var { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--x-muted); font-size: .9375rem; }
.xb-fit-body .x-pill { white-space: normal; }
/* The dye itself: a square of it, with a line round it so that ecru shows on white paper. */
.xb-fit-sw { flex: none; display: inline-block; width: 12px; height: 12px; border: 1px solid var(--x-line); vertical-align: -1px; }
.x-chip-face .xb-fit-sw { margin-inline-end: 7px; }
.xb-fit-alts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; }
.xb-fit-acts { gap: 2px 14px; }
.xb-fit-none { color: var(--x-muted); }
.xb-fit-figure { display: grid; gap: 8px; margin-top: 28px; }
.xb-fit-figure .x-img { width: 100%; }
.xb-fit-figure figcaption { color: var(--x-muted); font-size: .875rem; }
.xb-fit-have { font-weight: 600; }
.xb-fit-why { display: grid; gap: 2px; padding-inline-start: 1.1em; list-style: disc; }
.xb-fit-where { max-width: 44rem; }
/* A browser brings a text box's caret into view, not the box. Room kept clear at the foot of the screen brings
   the note field up whole when Tab reaches it with only its top edge showing. */
html:has(.xb-step textarea) { scroll-padding-bottom: 10rem; }

/* ---- the sheet: every piece, then one piece with its colours and sizes ---- */
.xb-fit-pick { display: grid; gap: 20px; }
.xb-fit-pick-group { display: grid; }
.xb-fit-pick-h { padding-bottom: 8px; }
.xb-fit-pick-note { letter-spacing: 0; text-transform: none; font-weight: 400; }
.xb-fit-pick-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 64px; padding: 6px 2px; border: 0; border-top: 1px solid var(--x-hair); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.xb-fit-pick-name { font-weight: 600; }
.xb-fit-pick-on { display: inline-flex; align-items: center; gap: 6px; color: var(--x-muted); font-size: .875rem; }
.xb-fit-ed { display: grid; gap: 18px; }
.xb-fit-ed-top { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; }
.xb-fit-ed-state { display: grid; gap: 6px; justify-items: start; }

/* ---- the pieces at the showroom, and one piece's page ---- */
.xb-fit-coll { display: grid; gap: 16px; padding-top: 20px; border-top: 1px solid var(--x-hair); }
.xb-fit-coll-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.xb-fit-coll-head p { color: var(--x-muted); }
/* Upright pictures, two across on a phone, then three and five: a collection's row is filled from the left. */
.xb-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 37.5em) { .xb-fit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 56.25em) { .xb-fit-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.xb-fit-grid .x-card-title { overflow-wrap: anywhere; }
.xb-fit-piece { display: grid; gap: 20px; }
.xb-fit-piece-cols { display: grid; gap: 24px; }
.xb-fit-piece-media .x-img { width: 100%; }
.xb-fit-piece-text { --x-gap: 16px; min-width: 0; }
@media (min-width: 45em) {
  .xb-fit-piece-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
}
.xb-fit-rail { display: grid; gap: 8px; }
.xb-fit-rail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xb-fit-rail-colour { display: inline-flex; align-items: center; gap: 7px; min-width: 6.5rem; }
.xb-fit-size { display: inline-grid; place-items: center; min-width: 2.375rem; padding: 3px 6px; border: 1px solid var(--x-line); font-size: .875rem; font-variant-numeric: tabular-nums; }
.xb-fit-size--away { border-style: dashed; color: var(--x-muted); text-decoration: line-through; }
.xb-fit-detail { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--x-hair); }
.xb-fit-detail ul { display: grid; gap: 4px; padding-inline-start: 1.1em; list-style: disc; }

/* ---- the staff's side: the view switch, the preparation note, the pieces that are away ---- */
.xb-fit-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.xb-fit-prep { display: grid; gap: 10px; padding-top: 14px; border-top: 2px solid var(--x-ink); }
.xb-fit-prep-item { display: grid; gap: 2px; justify-items: start; padding: 10px 0; border-top: 1px solid var(--x-hair); }
.xb-fit-away { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--x-hair); }
.xb-fit-away-list { display: grid; max-width: 44rem; }
.xb-fit-away-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--x-hair); }
.xb-fit-away-form { display: grid; gap: 12px; max-width: 24rem; justify-items: start; }
.xb-fit-away-form .x-field { width: 100%; }
.xb-fit-cell { display: grid; gap: 2px; justify-items: start; }
/* The board's own widths: the appointment column has the most to say. */
@media (min-width: 37.5em) {
  .xb-fit-board .xb-table thead th:nth-child(2) { width: 14%; }
  .xb-fit-board .xb-table thead th:nth-child(4) { width: 14%; }
  .xb-fit-board .xb-table thead th:nth-last-child(2) { width: 17%; }
  .xb-fit-board .xb-table thead th:last-child { width: 22%; }
}
/* In a phone's compact card each cell has a line of its own, and the two lines of a cell run on as one. */
@media (max-width: 37.49em) {
  .xb-fit-board .xb-table--compact td:not(:nth-last-child(-n+2)) { flex: 0 0 100%; }
  .xb-fit-board .xb-table--compact td:not(:nth-last-child(-n+2)) ~ td:not(:nth-last-child(-n+2))::before { content: none; }
  .xb-fit-board .xb-table--compact .xb-fit-cell { display: inline; }
  .xb-fit-board .xb-table--compact .xb-fit-cell > * + *::before { content: "\00B7"; margin-inline: 7px; color: var(--x-muted); }
  .xb-fit-board .xb-table--compact .xb-fit-cell > .x-pill { margin-inline-start: 7px; }
  .xb-fit-board .xb-table--compact .xb-fit-cell > .x-pill::before { content: none; }
}

@media (hover: hover) and (pointer: fine) {
  .xb-fit-kind:hover .xb-fit-kind-face, .xb-fit-pick-row:hover { background: var(--x-surface); }
}
@media (forced-colors: active) {
  .xb-fit-kind input:checked + .xb-fit-kind-face { outline: 2px solid Highlight; outline-offset: -2px; }
  .xb-fit-sw { forced-color-adjust: none; }
}