/* Quick-order card (15.481, 15.494; kit/quickcard.js): one drawing for the order screen, the template and the sheet. */
.qc-card {
  position: relative;
  padding: var(--sp-300);
  min-width: 0;
}
:is(.qc-card, .qt-totals).fill-none:not(.qc-paper) { background: var(--card); }
:is(.qc-card, .qt-totals).qc-r-none { border-radius: 0; }
:is(.qc-card, .qt-totals).qc-r-s { border-radius: var(--r-s); }
:is(.qc-card, .qt-totals).qc-r-m { border-radius: var(--r-l); }
:is(.qc-card, .qt-totals).qc-r-l { border-radius: var(--r-xl); }

.qc-grid {
  display: grid; grid-template-columns: repeat(var(--qc-cols, 2), minmax(0, 1fr));
  column-gap: var(--sp-300); align-items: start;
}
@media (max-width: 900px) { .qc-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap); } }
.qc-col { display: flex; flex-direction: column; gap: var(--sp-250); min-width: 0; }
.qc-col-empty { display: none; }
.qc-block { position: relative; min-width: 0; }

/* The holder of a block sits in the gutter left of it: the card padding or the gap between columns. */
.qc-hold {
  position: absolute; top: 0; left: calc(var(--sp-300) * -1);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: var(--cur-grab); opacity: 0; transition: opacity var(--dur-pop) var(--ease-out);
}
.qc-block:hover > .qc-hold, .qc-hold:focus-visible { opacity: 1; }
.qc-arranging .qc-col-empty {
  display: flex; min-height: calc(var(--h-field) * 2);
  border: var(--bw) dashed var(--line2); border-radius: var(--r);
}
.qc-arranging .qc-col { outline: var(--bw) dashed var(--line); outline-offset: var(--sp-100); border-radius: var(--r); }

/* The card at work (15.521): no final look — a plain surface, every block framed under a strip with its name and
   buttons; the block is carried by the strip. */
.qc-card.qc-work { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-l); }
.qc-work .qc-grid { column-gap: var(--sp-200); }
.qc-work .qc-col { gap: var(--sp-200); }
.qc-framed { border: var(--bw) solid var(--line2); border-radius: var(--r); background: var(--card); }
.qc-strip {
  display: flex; align-items: center; gap: var(--sp-050); min-height: calc(var(--h-btn-sm) + var(--sp-100));
  padding: var(--sp-050) var(--sp-050) var(--sp-050) var(--sp-150);
  background: var(--a-100); border-bottom: var(--bw) solid var(--line2);
  border-radius: calc(var(--r) - var(--bw)) calc(var(--r) - var(--bw)) 0 0;
  cursor: var(--cur-grab); user-select: none; touch-action: none;
}
.qc-strip-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--fw-semi); color: var(--ink2); }
.qc-strip-tools { display: flex; align-items: center; gap: var(--sp-050); cursor: default; }
.qc-block-body { padding: var(--sp-150); min-width: 0; }

/* Images */
.qc-images { display: grid; gap: var(--sp-100); --qc-ratio: 4 / 3; }
.qc-im-row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.qc-im-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qc-pic {
  display: block; padding: 0; border: 0; margin: 0;
  aspect-ratio: var(--qc-ratio); width: 100%; border-radius: var(--r);
  overflow: hidden; background: var(--field2);
}
button.qc-pic { cursor: var(--cur-zoom); }
.qc-pic > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.qc-fit-contain .qc-pic > img { object-fit: contain; }
.qc-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-100); }
.qc-pic-thumb { border-radius: var(--r-s); }
button.qc-pic-thumb { cursor: pointer; }
button.qc-pic-thumb.on { box-shadow: 0 0 0 var(--bw-sel) var(--acc); }

/* Description */
.qc-text { margin: 0; white-space: pre-wrap; color: var(--ink2); overflow-wrap: anywhere; }

/* Parameters: number and name, then the rows */
.qc-params { display: flex; flex-direction: column; gap: var(--sp-150); }
.qc-params-head { display: flex; align-items: center; gap: var(--sp-150); min-width: 0; }
.qc-number {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--h-btn); height: var(--h-btn-sm); padding: 0 var(--sp-100);
  border-radius: var(--r-xs); background: var(--a-200); font-weight: var(--fw-semi);
}
.qc-title { margin: 0; font-size: var(--fs-l); line-height: var(--lh-l); min-width: 0; overflow-wrap: anywhere; }
.qc-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-075) var(--sp-200); margin: 0; }
.qc-facts dt { color: var(--ink3); }
.qc-facts dd { margin: 0; overflow-wrap: anywhere; }

/* Composition */
.qc-rows { display: flex; flex-direction: column; gap: var(--sp-150); }
.qc-rows-group { display: flex; flex-direction: column; }
.qc-caption {
  font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3); padding-bottom: var(--sp-050);
  border-bottom: var(--bw) solid var(--line);
}
.qc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-150);
  align-items: baseline; padding: var(--sp-075) 0; border-bottom: var(--bw) solid var(--line);
}
.qc-row.priced { grid-template-columns: minmax(0, 1fr) auto auto; }
.qc-row:last-child { border-bottom: 0; }
.qc-row-name { min-width: 0; overflow-wrap: anywhere; }
.qc-row-variant, .qc-row-qty { color: var(--ink3); }
.qc-row-qty, .qc-row-sum { text-align: right; white-space: nowrap; }

/* Sum: digit size (s, m, l) and text size (ts, tm, tl) are set apart (T23) */
.qc-sum { display: flex; flex-direction: column; gap: var(--sp-150); }
.qc-sum-line { display: flex; flex-direction: column; gap: var(--sp-025); }
.qc-sum-label { display: flex; align-items: center; gap: var(--sp-050); color: var(--ink3); }
.qc-sum-line.final .qc-sum-label { color: var(--acc-ink); }
.qc-sum-off { display: flex; align-items: baseline; gap: var(--sp-100); color: var(--ink3); }
.qc-sum-pct { color: var(--acc-ink); font-weight: var(--fw-semi); }
.qc-sum-value { font-weight: var(--fw-bold); font-size: var(--fs-num); line-height: var(--lh-l); }
.qc-sum-s .qc-sum-value { font-size: var(--fs-l); }
.qc-sum-l .qc-sum-value { font-size: var(--fs-board); line-height: calc(var(--fs-board) * 1.25); }
.qc-sum-value.qc-sum-wait { font-size: var(--fs-s); font-weight: var(--fw-reg); color: var(--ink3); }
.qc-sum-note { margin: 0; color: var(--ink2); white-space: pre-wrap; }
.qc-sum-ts :is(.qc-sum-label, .qc-sum-off) { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.qc-sum-ts .qc-sum-note { font-size: var(--fs-s); line-height: var(--lh-s); }
.qc-sum-tm :is(.qc-sum-label, .qc-sum-off) { font-size: var(--fs-s); line-height: var(--lh-s); }
.qc-sum-tm .qc-sum-note { font-size: var(--fs); line-height: var(--lh); }
.qc-sum-tl :is(.qc-sum-label, .qc-sum-off) { font-size: var(--fs); line-height: var(--lh); }
.qc-sum-tl .qc-sum-note { font-size: var(--fs-l); line-height: var(--lh-l); }

/* Totals of the order: digit size (s, m, l) and text size (ts, tm, tl) are set apart (T23) */
.qt-totals { position: relative; display: flex; flex-direction: column; gap: var(--sp-150); padding: var(--sp-300);
             min-width: 0; }
.qt-title { margin: 0; font-size: var(--fs-l); line-height: var(--lh-l); }
.qt-lines { display: flex; flex-direction: column; }
.qt-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-150); align-items: baseline;
  padding: var(--sp-075) 0; border-bottom: var(--bw) solid var(--line);
}
.qt-n, .qt-variant { color: var(--ink3); }
.qt-name { min-width: 0; overflow-wrap: anywhere; }
.qt-sum { text-align: right; white-space: nowrap; }
/* A card with variants (15.545): its range on its line, every variant under it, lighter and indented */
.qt-card { border-bottom: var(--bw) solid var(--line); padding-bottom: var(--sp-050); }
.qt-card > .qt-line { border-bottom: 0; }
.qt-card > .qt-variant-line { padding: var(--sp-025) 0; font-size: var(--fs-s); line-height: var(--lh-s); }
.qt-card > .qt-variant-line > .qt-sum { color: var(--ink2); }
.qt-range { font-weight: var(--fw-semi); }
.qt-value.qt-range { font-size: var(--fs-num); }
.qt-l .qt-value.qt-range { font-size: var(--fs-num); line-height: var(--lh-l); }
.qt-meta { display: flex; justify-content: space-between; gap: var(--sp-150); color: var(--ink2); }
.qt-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-150); }
.qt-label { color: var(--ink2); }
.qt-value { font-weight: var(--fw-bold); font-size: var(--fs-num); line-height: var(--lh-l); white-space: nowrap; }
.qt-s .qt-value { font-size: var(--fs-l); }
.qt-l .qt-value { font-size: var(--fs-board); line-height: calc(var(--fs-board) * 1.25); }
.qt-note { margin: 0; color: var(--ink2); white-space: pre-wrap; }
.qt-ts :is(.qt-line, .qt-meta, .qt-label, .qt-note) { font-size: var(--fs-s); line-height: var(--lh-s); }
.qt-tl :is(.qt-line, .qt-meta, .qt-label, .qt-note) { font-size: var(--fs-l); line-height: var(--lh-l); }

/* On paper the card keeps its drawing at the sheet scale and never splits between pages. */
.sheet .qc-card.qc-paper { padding: var(--sheet-7); color: var(--sheet-ink); break-inside: avoid; }
.sheet .qc-card.qc-paper.fill-none:not(.bd-line) { padding: 0; }
.sheet .qc-paper .qc-grid { column-gap: var(--sheet-7); }
.sheet .qc-paper .qc-col { gap: var(--sheet-5); }
.sheet .qc-paper .qc-number { background: var(--sheet-line); }
.sheet .qc-paper :is(.qc-caption, .qc-row) { border-color: var(--sheet-line); }
.sheet .qc-paper :is(.qc-text, .qc-facts dt, .qc-row-qty, .qc-row-variant, .qc-sum-label, .qc-sum-off, .qc-sum-note) {
  color: var(--sheet-ink-2);
}
.sheet .qc-paper :is(.qc-sum-pct, .qc-sum-line.final .qc-sum-label) { color: var(--sheet-accent); }
.sheet .qc-paper .qc-pic { background: var(--sheet-line); border-radius: var(--sheet-radius); }
.sheet .qt-totals.qc-paper { padding: var(--sheet-7); color: var(--sheet-ink); }
.sheet .qt-totals.qc-paper.fill-none:not(.bd-line) { padding: 0; }
.sheet .qc-paper .qt-line { border-color: var(--sheet-line); }
.sheet .qc-paper :is(.qt-n, .qt-variant, .qt-meta, .qt-label, .qt-note) { color: var(--sheet-ink-2); }
.sheet .sheet-quick-totals { margin-top: var(--sheet-10); break-inside: avoid; }
@media print { .sheet :is(.qc-card, .qt-totals).qc-paper { break-inside: avoid; } }