/* Quick order page (15.481, 15.501, 15.594, 15.599; modules/quotes/ui/quickorder.js): the name and the order's
   data; the order as one estimate; the footer bar with the sum, the cover and the proposal. */
.qo-page { container: qo-page / inline-size; display: flex; flex-direction: column; gap: var(--sp-200); min-width: 0; }

/* Head (15.523): one row — «Файл», steps, the name */
.qo-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-100); min-width: 0; }
/* The tools hung at the top while the head is out of sight (15.803): a bar over the screen's whole width, from its top
   edge; it takes no room in the page */
.qo-hang-dock { position: sticky; top: calc(-1 * var(--sp-300)); z-index: 5; height: 0;
  margin-bottom: calc(-1 * var(--sp-200)); }
.qo-hang { position: absolute; top: 0; left: calc(-1 * var(--pad-side)); right: calc(-1 * var(--pad-side));
  display: flex; align-items: center; padding: var(--sp-100) var(--pad-side);
  border-bottom: var(--bw) solid var(--line); background: var(--bg);
  opacity: 0; translate: 0 calc(-1 * var(--sp-100)); pointer-events: none; visibility: hidden;
  transition: opacity var(--dur-fold) var(--ease-out), translate var(--dur-fold) var(--ease-out),
              visibility 0s linear var(--dur-fold); }
.qo-hang.shown { opacity: 1; translate: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
html[data-motion="calm"] .qo-hang { transition: none; }
.qo-head > .title-field { flex: 0 1 auto; min-width: 0; }
.qo-head .title-field-text { font-size: var(--fs-h); line-height: var(--lh-l); font-weight: var(--fw-semi); }

/* The order's data in one line (15.594): what is filled, a press opens «Данные заказа» */
.qo-facts {
  display: flex; flex-wrap: wrap; align-items: center; align-self: flex-start; gap: var(--sp-050) var(--sp-100);
  max-width: 100%; min-height: var(--h-btn); padding: var(--sp-050) var(--sp-150); border: 0; border-radius: var(--r);
  background: var(--a-100); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--dur-pop) var(--ease-out);
}
.qo-facts:hover { background: var(--a-200); }
.qo-facts > svg { flex: none; color: var(--ink3); }
.qo-fact { min-width: 0; max-width: 32ch; }
.qo-fact + .qo-fact::before { content: "·"; margin-right: var(--sp-100); color: var(--ink3); }
.qo-fact-empty { color: var(--ink3); max-width: none; }
.qo-facts-edit { margin-left: var(--sp-050); color: var(--acc-ink); font-size: var(--fs-s); }
html[data-motion="calm"] .qo-facts { transition: none; }

/* The estimate (15.599): one table for the whole order — the column names once, a head row for every product with its
   sum or its variants' sums, its positions under it, a position's variants as numbered chips under the position; every
   row has the same columns. Narrower than the table — it scrolls sideways */
.qe-wrap { min-width: 0; }
.qe {
  --qe-acts: calc(var(--h-btn-sm) * 5 + var(--sp-050) * 4);
  --qe-cols: var(--h-btn-sm) minmax(104px, 184px) minmax(176px, 1fr) 136px 112px 128px var(--qe-acts);
  display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--card);
}
@container qo-page (max-width: 800px) {
  .qe-wrap { overflow-x: auto; }
  /* the whole estimate scrolls as one (15.765, 23.10: «На мобиле инструмент просчёта обрезается странно, пусть
     прокручивается в горизонталь, это норм, но интерфейс не весь работает так»): the table is as wide as its rows'
     columns need, the products' heads share it — their sums take a share of the table, not of the narrow screen */
  .qe { min-width: calc(var(--h-btn-sm) + 104px + 176px + 136px + 112px + 128px + var(--qe-acts) + 6 * var(--sp-100)
                       + 2 * var(--sp-150)); }
  /* the variants' sums under the name, the whole width of the table theirs (15.765: «пересечение вижу») */
  .qe-prod-head { grid-template-columns: var(--h-btn-sm) calc(var(--sp-400) * 2) minmax(0, 1fr) auto; }
  .qe-prod-head > .qe-vars { display: flex; flex-wrap: wrap; grid-column: 3 / -1; grid-row: 2; }
}
.qe-titles, .qe-pos, .qe-entry {
  display: grid; grid-template-columns: var(--qe-cols); align-items: center; gap: 0 var(--sp-100);
  padding-inline: var(--sp-150);
}
.qe-titles {
  /* under the hung tools while they are there (15.803) */
  position: sticky; top: calc(var(--qo-hang, 0px) - var(--sp-300)); z-index: 3; min-height: var(--h-row-head);
  transition: top var(--dur-fold) var(--ease-out);
  border-bottom: var(--bw) solid var(--line); border-radius: var(--r-l) var(--r-l) 0 0; background: var(--card);
  color: var(--ink3); font-size: var(--fs-s); line-height: var(--lh-s);
}
/* stuck over the scrolled rows — square, the rows never show in its corners (15.810) */
.qo-page.titles-stuck .qe-titles { border-radius: 0; }
.qe-titles > span { padding-inline: var(--sp-100); }
.qe-right { text-align: right; }

/* A product's head row: fold, picture, name and what is known about it, the sums, holder, menu */
.qe-prod + .qe-prod { border-top: var(--bw) solid var(--line); }
/* The variants' sums stand in one column of the same width in every product, from its left edge (15.722: «варианты
   упереть, выровнять по левому краю») */
.qe-prod-head {
  display: grid; grid-template-columns: var(--h-btn-sm) calc(var(--sp-400) * 2) minmax(0, 1fr) minmax(0, min(52cqi, 720px)) auto;
  align-items: center; gap: var(--sp-100) var(--sp-200); padding: var(--sp-150); background: var(--a-100);
}
.qe-fold > .ic { transition: transform var(--dur-fold) var(--ease-out); }
.qe-prod.folded .qe-fold > .ic { transform: rotate(-90deg); }
/* A folded product reads as a closed row, not as an open head (15.680, 23.10: «карточки просчёта закрытые пусть
   отличаются от открытых, они сливаются в одну»): no tint, a smaller picture, the line under it; open heads keep the
   tint, so two folded products never melt into one band */
.qe-prod-head { transition: background-color var(--dur-fold) var(--ease-out), padding var(--dur-fold) var(--ease-out); }
.qe-prod.folded > .qe-prod-head { padding-block: var(--sp-100); background: var(--card); }
.qe-prod.folded .qe-thumb { width: var(--sp-500); height: var(--sp-500); justify-self: center; }
.qe-prod.folded + .qe-prod, .qe-prod + .qe-prod.folded { border-top-color: var(--line2); }
html[data-motion="calm"] .qe-prod-head { transition: none; }
.qe-thumb {
  display: grid; place-items: center; width: calc(var(--sp-400) * 2); height: calc(var(--sp-400) * 2); padding: 0; border: 0;
  border-radius: var(--r);
  overflow: hidden; background: var(--a-200); color: var(--ink3); cursor: pointer;
}
.qe-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.qe-thumb.over { box-shadow: inset 0 0 0 calc(var(--bw) * 2) var(--acc); color: var(--acc-ink); }
.qe-prod-title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-050); min-width: 0; }
.qe-name .title-field-text { font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-semi); }
.qe-about {
  align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--ink3);
  font: inherit; font-size: var(--fs-s); line-height: var(--lh-s); text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qe-about:hover { color: var(--ink2); }
.qe-about.empty { color: var(--acc-ink); }
.qe-about:empty { display: none; }
/* The description in the card (15.631): the product's notes under its name, typed in place */
.qe .qe-prod-title > textarea.inline-field.qe-note:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input) {
  width: calc(100% + var(--sp-100) * 2); max-width: 72ch; min-height: 0; margin: var(--sp-050) calc(var(--sp-100) * -1) 0;
  color: var(--ink2); font-size: var(--fs-s); line-height: var(--lh-s);
}
.qe-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); justify-items: start;
           gap: var(--sp-050); min-width: 0; }
.qe-var {
  display: inline-flex; align-items: center; gap: var(--sp-075); min-height: var(--h-btn); padding: 0 var(--sp-100);
  border: 0; border-radius: var(--r-s); background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
  white-space: nowrap; transition: background-color var(--dur-pop) var(--ease-out);
}
.qe-var:hover { background: var(--a-200); }
/* the variant shown in all the product's positions (15.756) — as a picked chip of a position */
.qe-var > b { font-weight: var(--fw-bold); }
.qe-var > .qo-alt-n { flex: none; }
.qe-var-name { max-width: 16ch; color: var(--ink2); }
.qe-var-mark, .qe-var-wait { color: var(--ink3); font-size: var(--fs-s); }
.qe-lead { display: flex; flex-direction: column; align-items: center; gap: var(--sp-050); }
.qe-grab { cursor: var(--cur-grab); opacity: 0; transition: opacity var(--dur-reveal) var(--ease-reveal); }
.qe-prod-head:hover .qe-grab { opacity: 1; }
@media (hover: none) { .qe-grab { opacity: 1; } }
html[data-motion="calm"] .qe-grab { transition: none; }
/* The actions of a product and of a position: icon buttons in the row, shown under the pointer (15.606) */
.qe-acts {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-050);
  opacity: 0; transition: opacity var(--dur-pop) var(--ease-out);
}
:is(.qe-pos, .qe-prod-head):is(:hover, :focus-within) > .qe-acts { opacity: 1; }
@media (hover: none) { .qe-acts { opacity: 1; } }
html[data-motion="calm"] .qe-acts { transition: none; }
/* 15.835: an obligatory product's lock stays seen — the other actions still come under the pointer */
.qe-prod-head > .qe-acts:has(> .qe-lock.on) { opacity: 1; }
.qe-prod-head > .qe-acts > * { transition: opacity var(--dur-pop) var(--ease-out); }
.qe-prod-head:not(:hover, :focus-within) > .qe-acts:has(> .qe-lock.on) > :not(.qe-lock) { opacity: 0; }

/* The positions fold under the head row */
.qe-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-fold) var(--ease-out); }
.qe-body-in { min-height: 0; overflow: clip; }
.qe-prod.folded > .qe-body { grid-template-rows: 0fr; }
.qe-prod.folded > .qe-body > .qe-body-in { visibility: hidden; transition: visibility 0s var(--dur-fold); }

/* A position: holder, category in the proposal, position, quantity with its unit, price, sum, «+» for its next
   variant, menu; its variants as chips under it */
.qe-pos { min-height: calc(var(--h-field) + var(--sp-100)); padding-block: var(--sp-050); border-bottom: var(--bw) solid var(--line); }
.qe-pos > *, .qe-entry > * { min-width: 0; }
.qe .combo.inline { width: 100%; margin-inline: 0; }
.qe :is(input, textarea).inline-field:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input) {
  width: 100%; margin: 0; min-height: var(--h-field-sm);
}
.qe-group .title-field-view { max-width: 100%; margin: 0; }
.qe-price, .qe-sum { padding-inline: var(--sp-100); }
.qe-hold {
  display: inline-grid; place-items: center; width: var(--h-btn-sm); height: var(--h-btn-sm);
  cursor: var(--cur-grab); opacity: 0; transition: opacity var(--dur-pop) var(--ease-out);
}
.qe-pos:hover .qe-hold { opacity: 1; }
.qe-group .title-field-text { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink2); }
.qe-qty-cell { display: grid; grid-template-columns: minmax(0, 1fr) var(--sp-600); align-items: center; gap: var(--sp-050);
               padding-right: var(--sp-100); }
.qe-qty-cell > .numfield, .qe-price > .numfield { min-width: 0; }
.qe-qty-cell input.num, .qe-price input.num { text-align: right; }
.qe-unit { color: var(--ink3); font-size: var(--fs-s); line-height: var(--lh-s); white-space: nowrap; }
.qe-unit .combo.inline { width: calc(100% + var(--sp-050)); margin-inline: calc(var(--sp-050) * -1) 0; }
.qe-unit .combo.inline .combo-button { padding-inline: var(--sp-050); }
.qe-unit .combo-caret { display: none; }
.qe-unit-toggle {
  padding: 0 var(--sp-050); margin-left: calc(var(--sp-050) * -1); border: 0; border-radius: var(--r-xs);
  background: none; color: var(--acc-ink); font: inherit; cursor: pointer;
}
.qe-unit-toggle:hover { background: var(--acc-weak); }
.qe-price { color: var(--ink3); text-align: right; white-space: nowrap; }
.qe-sum { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-050); white-space: nowrap; }
/* A hidden position keeps its look; a chip «Скрыто» after its name (15.624) */
.qe-what { display: flex; align-items: center; gap: var(--sp-100); }
.qe-what > :first-child { flex: 1 1 auto; min-width: 0; }
/* a position hidden from the proposal — in the warning's colours (15.804) */
.qe-hidden-chip { flex: none; }
/* 15.967: the obligatory product's chip beside its name */
.qe-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-100); min-width: 0; max-width: 100%; }
.qe-must-chip { flex: none; }
@media (hover: none) { .qe-hold { opacity: 1; } }
html[data-motion="calm"] :is(.qe-hold, .qe-var, .qe-fold > .ic, .qe-body) { transition: none; }

/* A position's variants (15.599, concept 3): a chip each — its number, what it is, its sum; the chip shown in the row
   is filled; «Вариант» adds the next */
.qe-alts {
  grid-column: 3 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-050);
  padding-block: var(--sp-050) var(--sp-025);
}
.qe-chip {
  display: inline-flex; align-items: center; gap: var(--sp-075); max-width: 100%; min-height: var(--h-btn-sm);
  padding: 0 var(--sp-100) 0 var(--sp-050); border: 0; border-radius: var(--r-s); background: var(--a-100);
  color: var(--ink2); font: inherit; font-size: var(--fs-s); line-height: var(--lh-s); cursor: pointer;
}
.qe-chip:hover { background: var(--a-200); }
.qe-chip.on { background: var(--acc-weak); color: var(--acc-ink); }
/* the cross of a variant (15.768): under the pointer; where there is no pointer — on the variant picked */
.qe-chip.chip-x { padding-right: var(--sp-025); }
/* its place is kept and the cross only fades in, so the neighbours never move (15.794: «при появлении крестика
   двигаются другие варианты… с рывком») */
.qe-chip > .chip-off { visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
@media (hover: hover) { .qe-chip:hover > .chip-off { visibility: visible; opacity: .55; } }
@media (hover: none) { .qe-chip.on > .chip-off { visibility: visible; opacity: .55; } }
.qe-chip > .chip-off:hover { opacity: 1; }
.qe-chip > .qo-alt-n { flex: none; width: var(--sp-250); height: var(--sp-250); }
.qe-chip-name { max-width: 28ch; }
.qe-chip-sum { color: var(--ink); }

/* The line that adds the next position: typing searches the assortment */
.qe-entry { min-height: calc(var(--h-field) + var(--sp-100)); padding-block: var(--sp-050); }
/* the field over the whole row while unused, back in its column when pressed (15.799); the list waits for it */
.qe-entry > .combo { grid-column: 2 / -2; }
.qe-entry.picking > .combo { grid-column: 3; }
.qe-entry.gliding .combo-drop { opacity: 0; }
.qe-entry .combo.empty .combo-label { color: var(--ink3); }
.qe-entry-own { grid-column: -2 / -1; justify-self: end; }

/* Adding a product or a saved quote, under the products */
.qe-more { display: flex; flex-wrap: wrap; gap: var(--sp-050); padding: var(--sp-100) var(--sp-150);
           border-top: var(--bw) solid var(--line); }

/* The order's total — a block at the end, under the products, at the side of their sums (15.678) */
/* in the middle under the products (15.758: «а почему он сместился вообще вправо, можно же было отцентровать нормально») */
/* the whole width of the estimate (15.796, 23.10: «расширь до ширины всего, этот обглодыш в конце мне не нравится») */
.qe-total-block { align-self: stretch; width: auto; }
.qe-total-v { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-025); }
.qe-total-v > small { color: var(--ink3); font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--fw-reg); }
.qe-total-block .rg-val { color: var(--ink); font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-bold);
                          font-variant-numeric: tabular-nums; white-space: nowrap; }
.qe-total-var { display: inline-flex; align-items: center; gap: var(--sp-100); }

/* A product's own parameter in its panel: the name typed where the label stands */
/* the name stands as the label's text: no own ground, no inset — the row glows and takes the accent line, as for every
   field of a row group (15.603) */
.rg-row input.qe-own-name.inline-field:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input),
.rg-row input.qe-own-name.inline-field:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input):focus {
  width: 100%; margin: 0; padding: 0; background: none; box-shadow: none; font-weight: inherit;
}
.rg-row input.qe-own-name.inline-field:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input):hover:not(:disabled):not([readonly]):not(:focus):not(.invalid) {
  background: none; box-shadow: none;
}

/* The variant number in a circle: the sums, the chips, the footer bar */
.qo-alt-n {
  display: inline-block; width: var(--h-btn-sm); height: var(--h-btn-sm);
  border-radius: var(--r-full); background: var(--acc); color: var(--acc-fg); font-size: var(--fs-xs); font-weight: var(--fw-semi);
}

/* Photos: squares, three in a row; with none — one tile that takes files, a drop or a paste; the star marks what the
   proposal prints */
.qo-pics-edit { --qc-ratio: 1 / 1; display: flex; flex-direction: column; gap: var(--sp-100); }
.qo-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-100); }
.qo-pics.empty { grid-template-columns: minmax(0, 1fr); }
.qo-pic { position: relative; aspect-ratio: var(--qc-ratio); border-radius: var(--r); overflow: hidden; background: var(--field2); }
.qo-pic-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: var(--cur-zoom); }
.qo-pic-open > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qo-pic > .icon-btn { position: absolute; top: var(--sp-050); background: var(--card); box-shadow: var(--sh-raised);
                      opacity: 0; scale: .82;
                      transition: opacity var(--dur-reveal) var(--ease-reveal), scale var(--dur-reveal) var(--ease-reveal); }
.qo-pic > .qo-pic-star { left: var(--sp-050); color: var(--ink2); }
.qo-pic > .qo-pic-star.on { color: var(--acc-fg); background: var(--acc); }
.qo-pic > .qo-pic-drop { right: var(--sp-050); }
.qo-pic:is(:hover, :focus-within) > .icon-btn { opacity: 1; scale: 1; }
@media (hover: none) { .qo-pic > .icon-btn { opacity: 1; scale: 1; } }
.qo-pic-add {
  aspect-ratio: var(--qc-ratio); min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-100);
  padding: var(--sp-150); border: var(--bw) dashed var(--line2); border-radius: var(--r);
  background: none; color: var(--ink3); font: inherit; text-align: center; cursor: pointer;
  transition: background-color var(--dur-pop) var(--ease-out), border-color var(--dur-pop) var(--ease-out);
}
.qo-pics.empty > .qo-pic-add { aspect-ratio: 4 / 3; }
.qo-pic-add:hover, .qo-pics-edit.over .qo-pic-add { background: var(--acc-weak); border-color: var(--acc); color: var(--acc-ink); }
.qo-pic-add-text { color: var(--ink2); }
html[data-motion="calm"] :is(.qo-pic-add, .qo-pic > .icon-btn) { transition: none; }

/* The mark of a page break as it prints, in the cards' print settings (15.645) */
.qo-next-sample { width: 100%; padding: var(--sp-200) var(--sp-150); border-radius: var(--r-s); }

/* The photo view's choice (15.629): tiles, two in a row, each its layout on the product's photos and its name; the
   chosen one ringed */
.qe-pv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-150) var(--sp-100); }
.qe-pv-tile {
  display: flex; flex-direction: column; gap: var(--sp-050); min-width: 0; padding: 0; border: 0; background: none;
  color: var(--ink2); font: inherit; font-size: var(--fs-s); line-height: var(--lh-s); text-align: left; cursor: pointer;
}
.qe-pv-pic { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-s); overflow: hidden;
             background: var(--a-100); box-shadow: 0 0 0 var(--bw) var(--line); transition: box-shadow var(--dur-pop) var(--ease-out); }
.qe-pv-pic > .qph-sample { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.qe-pv-tile:hover .qe-pv-pic { box-shadow: 0 0 0 var(--bw) var(--line2); }
.qe-pv-tile.on .qe-pv-pic { box-shadow: 0 0 0 calc(var(--bw) * 2) var(--acc); }
.qe-pv-tile.on { color: var(--ink); }
html[data-motion="calm"] .qe-pv-pic { transition: none; }

/* The product's sums in their side panel (15.619): the sum at the end of its row, what it was before the discount or
   the manual note under it; the codes waited for under the groups */
.qe-total-sum { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-025); text-align: right; }
.qe-total-sum > b { font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-bold); white-space: nowrap; }
/* the sum pressed to type over it (15.797): as the sum, an outline under the pointer */
.qe-total-edit { margin: calc(-1 * var(--sp-050)) calc(-1 * var(--sp-100)); padding: var(--sp-050) var(--sp-100);
  border: 0; border-radius: var(--r-s); background: none; color: var(--ink); font: inherit; font-size: var(--fs-l);
  line-height: var(--lh-l); font-weight: var(--fw-bold); white-space: nowrap; cursor: text;
  transition: background-color var(--dur-pop) var(--ease-out); }
.qe-total-edit:hover { background: var(--a-100); box-shadow: inset 0 0 0 var(--bw) var(--line); }
.qe-total-was { color: var(--ink3); font-size: var(--fs-s); line-height: var(--lh-s); }
:root .rg-group .rg-row .numfield.qe-total-field:not(.with-steps) > input.input.num:not([type=checkbox]):not([type=radio]) { width: 10em; }
.qo-sum-wait { display: flex; flex-direction: column; gap: var(--sp-075); color: var(--warn-ink); font-size: var(--fs-s); }
.qo-sum-wait > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-075); }
.qo-sum-wait:empty { display: none; }

/* «Быстрый заказ» tab of the proposal settings: the sample left, the groups right */
.qo-template { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--sp-300); align-items: start; }
@media (max-width: 1100px) { .qo-template { grid-template-columns: minmax(0, 1fr); } }
.qo-template-main { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; position: sticky; top: var(--sp-300); }
@media (max-width: 1100px) { .qo-template-main { position: static; } }
/* a sticky column is a layer of its own: the preview's own full screen would stay under the side column */
.qo-template-main:has(.fs-self) { position: static; }
.qo-template-side { min-width: 0; }
/* «Макет листа» (15.660, 15.675, 15.686): the sample proposal page by page as the print lays it out, or as one long
   file — `paperView` with its switch, print and full screen inside; every page an A4 sheet */
/* the window's top meets the side's first group (under its caption), its foot the screen's bottom padding */
.qo-layout { --paper-view-h: max(360px, calc(var(--screen-room) - 220px)); min-width: 0;
             padding-top: calc(var(--lh-s) + var(--sp-200)); }
.qo-layout .sheet.sheet-page { height: 297mm; margin: 0; border: 0; border-radius: 0; overflow: hidden; }
.qo-layout .paper-view-page:not(.sheet-page) { margin: 0; }
.qo-template:has(> .qo-template-side:empty) { grid-template-columns: minmax(0, 1fr); }
/* Covers (15.530): the company's covers as tiles with a preview; the pill «Редактировать» under the pointer */
/* A cover's tile is large enough for its picture to be read and for its bar with the names (15.666, 23.10: «Сами карточки
   увеличь просто в размерах, пусть даже столбцов меньше станет») */
.qo-cover-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: var(--sp-300) var(--sp-200); }
.qo-cover-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-100); min-width: 0; }
.qo-cover-thumb { width: 256px; border-radius: var(--r-s); overflow: hidden; box-shadow: 0 0 0 var(--bw) var(--line); }
.qo-cover-thumb > .sheet { zoom: .3225; border-radius: 0; }
.qo-cover-tile > .float-bar { bottom: calc(var(--sp-200) + var(--lh)); opacity: 0;
                              transition: opacity var(--dur-pop) var(--ease-out); }
.qo-cover-tile:is(:hover, :focus-within) > .float-bar { opacity: 1; }
@media (hover: none) { .qo-cover-tile > .float-bar { opacity: 1; } }
html[data-motion="calm"] .qo-cover-tile > .float-bar { transition: none; }
.qo-cover-name { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink2); text-align: center; }
.qo-cover-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-100);
  width: 256px; aspect-ratio: 210 / 297; justify-self: center; padding: 0; border: var(--bw) dashed var(--line2);
  border-radius: var(--r-s); background: none; color: var(--ink2); font: inherit; cursor: pointer;
}
.qo-cover-add:hover { background: var(--a-100); color: var(--ink); }
.qo-cover-add-ring { display: inline-grid; place-items: center; width: var(--h-btn); height: var(--h-btn);
                     border-radius: var(--r-full); background: var(--a-200); }
.qo-cover-thumb { cursor: var(--cur-zoom); }
/* A cover large in its window (15.537) */
.qo-cover-view { display: flex; justify-content: center; overflow-x: auto; padding-block: var(--sp-100); }
.qo-cover-view > .sheet { flex: none; box-shadow: 0 0 0 var(--bw) var(--line); }

/* Card views and totals as lists of designs (15.576): wider tiles than the covers — a card or the totals of the sample
   order, cut at the tile's height; the default one is marked */
.qo-design-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* 15.1140 («фон превью же можно темнее сделать в тёмной теме?»): the sheet stands on the program's desk, as in the
   sheet's own window — dark in the dark theme; the sheet keeps its own paper */
.qo-design-thumb { position: relative; width: 100%; height: 280px; overflow: hidden;
                   background: var(--sheet-desk); }
.qo-design-thumb > .sheet { position: absolute; left: 50%; top: 50%; zoom: 1; border: 0; border-radius: 0;
                            transform: translate(-50%, -50%) scale(.3); }
.qo-design-tile.on > .qo-design-thumb, .qo-cover-tile.on > .qo-cover-thumb { box-shadow: 0 0 0 calc(var(--bw) * 2) var(--acc); }
/* The chosen design (15.592): a chip with an icon on its picture */
.qo-cover-thumb { position: relative; }
.qo-chosen { position: absolute; top: var(--sp-100); left: var(--sp-100); z-index: 2; background: var(--acc); color: var(--acc-fg); }
/* 15.849: «Превью ссылки» — the picture as a messenger shows it, the words under it */
.qo-linkpreview { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* 15.953: the designs of the preview as tiles — each its picture whole; a press chooses it */
.qo-linkpreview-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.qo-linkpreview-thumb { width: 100%; aspect-ratio: 1200 / 630; cursor: pointer; }
.qo-linkpreview-tile.on > .qo-linkpreview-thumb { cursor: default; }
.qo-linkpreview-thumb > img { display: block; width: 100%; height: 100%; }
.qo-linkpreview-pic { display: block; width: 100%; max-width: 720px; height: auto; border-radius: var(--r-l);
  box-shadow: var(--sh-raised); }