/* ═══════════════════════════════════════════════════════════
   ЛИЦО СЕРТИФИКАТА — мастер вида, окно продажи, лист, бумага, страница гостя
   ═══════════════════════════════════════════════════════════
   Подарочная карточка в пропорции A5 горизонтально; размеры — от ширины
   самого лица (единицы контейнера), и лицо на 150 пикселях плитки, на
   странице гостя и на листе 210 мм — одно и то же. Облик у каждого вида свой
   (cert-look.mjs, .scratch/certificates/face-design.md):
   - «Бумага» — член семьи бумаг заведения: почерк и тон «Вида документов»,
     чернила вместо цвета, одно поле;
   - «Цвет», «Фото», «Лента» — два поля: обложка слева, содержимое справа.
   Лицо — предмет: с темой интерфейса не перекрашивается, цвета только из
   токенов бумаги; цвет владельца приходит переменной `--cf-color`. */

.cf-wrap{container-type:inline-size;width:100%}
.cf{
  --tone:var(--doc-tone-ink);
  --cf-fill:var(--cf-color,var(--tone));
  --cf-on:var(--doc-paper);
  --doc-serif:"PT Serif",Georgia,"Times New Roman",serif;
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto auto auto;align-content:start;
  aspect-ratio:210 / 148;padding:5.6cqi 7cqi 5.4cqi;
  background:var(--doc-paper);color:var(--doc-ink);
  border-radius:clamp(4px,2.2cqi,16px);
  /* Глубина (apple §12): кромка, контактная тень и мягкая тень под картой — тоном чернил, не чёрным. */
  box-shadow:0 0 0 1px color-mix(in srgb,var(--doc-ink) 7%,transparent),0 1px 2px color-mix(in srgb,var(--doc-ink) 10%,transparent),
    0 14px 28px -14px color-mix(in srgb,var(--doc-ink) 30%,transparent),0 38px 64px -32px color-mix(in srgb,var(--doc-ink) 34%,transparent);
  font-family:var(--font);font-size:2.3cqi;line-height:1.35;font-variant-numeric:tabular-nums;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.cf[data-tone="pine"]{--tone:var(--doc-tone-pine)}
.cf[data-tone="sea"]{--tone:var(--doc-tone-sea)}
.cf[data-tone="brick"]{--tone:var(--doc-tone-brick)}
.cf[data-tone="plum"]{--tone:var(--doc-tone-plum)}
/* Слова на обложке: светлые на тёмном цвете, чернила на светлом (cert-look.inkOn). */
.cf[data-ink="dark"]{--cf-on:var(--doc-ink)}
/* Цвет слов на бумаге у макетов: цвет вида, если ему хватает контраста; светлые — чернилами. */
.cf{--cf-accent:var(--cf-fill)}
.cf[data-ink="dark"]{--cf-accent:var(--doc-ink)}

/* ── Бумага: рамка — одна деталь подарка, как было ── */
.cf-frame{position:absolute;inset:2.6cqi;z-index:-1;border:1px solid color-mix(in srgb,var(--tone) 60%,var(--doc-paper));border-radius:calc(var(--r-lg) - 4px);pointer-events:none}
.cf-frame::after{content:"";position:absolute;inset:.9cqi;border:1px solid color-mix(in srgb,var(--tone) 28%,var(--doc-paper));border-radius:calc(var(--r-lg) - 6px)}
/* Мягкий — подложка тоном без черт. */
.cf[data-hand="soft"] .cf-frame{border:0;inset:0;border-radius:inherit;background:color-mix(in srgb,var(--tone) 6%,var(--doc-paper))}
.cf[data-hand="soft"] .cf-frame::after{display:none}
/* Классический — прямые углы и двойная черта, крупное — с засечками. */
.cf[data-hand="classic"][data-cover="paper"]{border-radius:var(--r-xs)}
.cf[data-hand="classic"] .cf-frame{border:3px double var(--tone);border-radius:0}
.cf[data-hand="classic"] .cf-frame::after{inset:1.1cqi;border-radius:0}
.cf[data-hand="classic"][data-cover="paper"] :is(.cf-kind,.cf-value,.cf-to b){font-family:var(--doc-serif)}

.cf-head{display:flex;align-items:center;justify-content:space-between;gap:3cqi}
.cf-venue{display:flex;align-items:center;gap:2cqi;min-width:0}
.cf-venue b{font-size:2.6cqi;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-mark{
  width:6.4cqi;height:6.4cqi;flex-shrink:0;border-radius:var(--r-mark);display:grid;place-items:center;
  font-style:normal;font-size:2.2cqi;font-weight:600;letter-spacing:-.02em;background:var(--doc-ink);color:var(--doc-paper);
}
.cf-mark.img{background:none;object-fit:contain}
.cf-head>span{font-size:2.2cqi;color:var(--doc-ink-2);white-space:nowrap}

.cf-main{align-self:center;padding:1.8cqi 0 1.2cqi}
.cf-kind{font-size:3.1cqi;font-weight:500;letter-spacing:-.015em;color:var(--doc-ink-2)}
.cf-value{display:block;margin:.4cqi 0 .6cqi;font-size:9.2cqi;line-height:1.02;font-weight:650;letter-spacing:-.045em;color:var(--tone);white-space:nowrap}
.cf[data-tone="ink"][data-cover="paper"] .cf-value{color:var(--doc-ink)}
.cf-for{font-size:2.8cqi;color:var(--doc-ink)}
.cf-left{margin-top:1cqi;font-size:2.3cqi;font-weight:500;color:var(--doc-ink-2)}
.mute.cf-kind,.mute.cf-value{color:var(--doc-ink-3)}

.cf-to{padding:1.1cqi 0 1.3cqi;border-top:1px solid var(--doc-rule-2)}
.cf-to p{font-size:2.7cqi}
.cf-to span{color:var(--doc-ink-2)}
.cf-to b{font-weight:600}
.cf-msg{margin-top:.6cqi;font-style:italic;color:var(--doc-ink-2)}
.cf-text{padding-bottom:1.6cqi;font-size:2.1cqi;color:var(--doc-ink-2);max-width:62ch}

.cf-foot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:3cqi;align-items:end;padding-top:1.4cqi;border-top:1px solid var(--doc-rule)}
.cf-foot span{display:block;font-size:1.9cqi;color:var(--doc-ink-3)}
.cf-code code{display:block;margin-top:.3cqi;font-family:var(--mono);font-size:2.9cqi;font-weight:500;letter-spacing:.04em;white-space:nowrap}
.cf.draft .cf-code code{font-family:var(--font);font-size:2.2cqi;letter-spacing:0;color:var(--doc-ink-3)}
.cf-until b{display:block;margin-top:.3cqi;font-size:2.5cqi;font-weight:500}
.cf-qr{width:11cqi;height:11cqi}
.cf-qr svg{display:block;width:100%;height:100%}
.cf-qr:empty{display:none}
.cf-qr i{
  display:grid;place-items:center;width:100%;height:100%;padding:1cqi;text-align:center;
  border:1px dashed var(--doc-rule);border-radius:var(--r-sm);font-style:normal;font-size:1.5cqi;line-height:1.25;color:var(--doc-ink-3);
}

/* ── Два поля: обложка слева, содержимое справа ── */
.cf[data-layout="card"]:not([data-cover="paper"]){grid-template-columns:minmax(0,42fr) minmax(0,58fr);grid-template-rows:minmax(0,1fr);padding:0}
.cf-cover{position:relative;isolation:isolate;overflow:hidden;min-width:0;background:var(--cf-fill);color:var(--cf-on)}
.cf-cover-in{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:3cqi;
  padding:5.2cqi 4.6cqi 5cqi 5.4cqi;pointer-events:none;
}
.cf-cover .cf-mark{background:var(--cf-on);color:var(--cf-fill)}
.cf-cover .cf-mark.img{background:var(--doc-paper);padding:.7cqi;object-fit:contain}
/* Имя заведения на узкой обложке переносится, а не режется: до двух строк. */
.cf-cover .cf-venue{align-items:flex-start}
.cf-cover .cf-venue b{white-space:normal;line-height:1.2;padding-top:.5cqi;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.cf-cover .cf-kind{font-size:4.7cqi;line-height:1.08;font-weight:600;letter-spacing:-.032em;color:inherit}
.cf-cover .mute.cf-kind{color:inherit;opacity:.6}
.cf-body{display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;min-width:0;padding:5.2cqi 5.4cqi 4.8cqi 5cqi}
.cf-body .cf-main{padding:0 0 1.4cqi}
.cf-body .cf-value{font-size:8cqi;color:var(--doc-ink)}
/* Крупное — цветом вида, если на бумаге ему хватает контраста; светлые цвета — чернилами. */
.cf[data-ink="light"]:is([data-state="active"],[data-state="expired"]) .cf-body .cf-value:not(.mute){color:var(--cf-fill)}
.cf[data-layout="card"]:not([data-cover="paper"]) .cf-foot{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:3cqi;row-gap:1.3cqi}
.cf[data-layout="card"]:not([data-cover="paper"]) .cf-until{grid-row:2}
.cf[data-layout="card"]:not([data-cover="paper"]) .cf-qr{grid-column:2;grid-row:1 / span 2;width:10.4cqi;height:10.4cqi}

/* Свет по кромке обложки — материал, а не заливка (apple §12); у мрамора — блик полировки. */
.cf:is([data-cover="field"],[data-cover="photo"],[data-cover="marble"]) .cf-cover::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(158deg,color-mix(in srgb,var(--doc-paper) 16%,transparent),transparent 44%);
  box-shadow:inset -1px 0 0 color-mix(in srgb,var(--doc-ink) 14%,transparent);
}

/* Цвет: рельеф тон в тон — те же узоры, что у пропуска и медалей. */
.cf[data-cover="field"] .cf-cover::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--cf-relief,none);mix-blend-mode:overlay;opacity:.36;
}
.cf[data-pattern="guilloche"]{--cf-relief:url(../assets/awards/relief-guilloche.png) right -15cqi bottom -17cqi / 48cqi no-repeat}
.cf[data-pattern="lotus"]{--cf-relief:url(../assets/awards/relief-lotus.png) right -11cqi bottom -13cqi / 42cqi no-repeat}
.cf[data-pattern="honeycomb"]{--cf-relief:url(../assets/awards/relief-honeycomb.png) 0 0 / 12cqi repeat}
.cf[data-pattern="stars"]{--cf-relief:url(../assets/awards/relief-stars.png) 30% 50% / 20cqi repeat}
.cf[data-pattern="waves"]{--cf-relief:url(../assets/awards/relief-waves.png) 50% 50% / 26cqi repeat}
.cf[data-pattern="weave"]{--cf-relief:url(../assets/awards/relief-weave.png) 0 0 / 14cqi repeat}

/* Фото: снимок заведения на всю обложку, затемнение под слова сверху и снизу. */
.cf[data-cover="photo"]{--cf-on:var(--doc-paper)}
.cf-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:var(--cf-x) var(--cf-y);user-select:none;-webkit-user-drag:none}
.cf[data-cover="photo"] .cf-cover::after{
  background:linear-gradient(to top,color-mix(in srgb,var(--doc-ink) 72%,transparent),transparent 58%),
    linear-gradient(to bottom,color-mix(in srgb,var(--doc-ink) 46%,transparent),transparent 32%);
}
.cf[data-cover="photo"] .cf-cover .cf-mark{background:var(--doc-paper);color:var(--doc-ink)}
/* Снимок ещё не выбран — знак снимка посередине обложки, тоном слов. */
.cf-photo-empty{position:absolute;inset:0;z-index:0;display:grid;place-items:center;color:var(--cf-on);opacity:.5}
.cf-photo-empty svg{width:12cqi;height:12cqi}
/* Кадр в мастере: снимок держат и тянут; фокус с клавиатуры — кольцом по обложке. */
.cf-photo[data-cf-drag]{cursor:grab;touch-action:none;outline:none}
.cf-photo[data-cf-drag]:active{cursor:grabbing}
.cf-cover:has(.cf-photo:focus-visible){box-shadow:inset 0 0 0 .5cqi var(--doc-paper),inset 0 0 0 .9cqi var(--doc-ink)}

/* Лента: бумажное лицо, тронутое цветом вида, и лента крестом, как на упакованном подарке: вдоль —
   между обложкой и содержимым, поперёк — через обложку над названием. Атлас — блик посередине ленты. */
.cf[data-cover="ribbon"]{--cf-band:6.4cqi;--cf-satin-x:linear-gradient(90deg,color-mix(in srgb,var(--cf-fill) 76%,var(--doc-ink)) 0 7%,var(--cf-fill) 7% 36%,
    color-mix(in srgb,var(--cf-fill) 70%,var(--doc-paper)) 50%,var(--cf-fill) 64% 93%,color-mix(in srgb,var(--cf-fill) 76%,var(--doc-ink)) 93%)}
.cf[data-cover="ribbon"] .cf-cover{background:color-mix(in srgb,var(--cf-fill) 7%,var(--doc-paper));color:var(--doc-ink)}
.cf[data-cover="ribbon"] .cf-cover .cf-mark{background:var(--doc-ink);color:var(--doc-paper)}
.cf[data-cover="ribbon"] .cf-cover-in{padding-right:calc(var(--cf-band) + 3.4cqi)}
.cf[data-cover="ribbon"] .cf-cover::after{
  content:"";position:absolute;top:0;bottom:0;right:0;z-index:1;width:var(--cf-band);pointer-events:none;background:var(--cf-satin-x);
  box-shadow:-.5cqi 0 1.4cqi -.7cqi color-mix(in srgb,var(--doc-ink) 34%,transparent),.5cqi 0 1.4cqi -.7cqi color-mix(in srgb,var(--doc-ink) 34%,transparent);
}
.cf[data-cover="ribbon"] .cf-cover::before{
  content:"";position:absolute;left:0;right:0;top:44%;z-index:1;height:var(--cf-band);pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cf-fill) 76%,var(--doc-ink)) 0 7%,var(--cf-fill) 7% 36%,
    color-mix(in srgb,var(--cf-fill) 70%,var(--doc-paper)) 50%,var(--cf-fill) 64% 93%,color-mix(in srgb,var(--cf-fill) 76%,var(--doc-ink)) 93%);
  box-shadow:0 .5cqi 1.4cqi -.7cqi color-mix(in srgb,var(--doc-ink) 34%,transparent),0 -.5cqi 1.4cqi -.7cqi color-mix(in srgb,var(--doc-ink) 34%,transparent);
}

/* Акварель, мрамор, ботаника — рисунки масками (assets/covers: нарисованы Higgsfield в оттенках серого и
   переведены в прозрачность — бумага прозрачна, пигмент, прожилки и линии плотные). Цвет вида ложится в
   рисунок: у акварели и ботаники — на бумаге, слова чернилами; у мрамора — камень цвета вида, прожилки
   цветом слов обложки. Маска печатается как есть (print-color-adjust у лица). */
.cf[data-cover="wash"]{--cf-art:url(../assets/covers/wash.webp)}
.cf[data-cover="marble"]{--cf-art:url(../assets/covers/marble.webp)}
.cf[data-cover="botanic"]{--cf-art:url(../assets/covers/botanic.webp)}
/* Маленькое лицо (плитки мастера, предпросмотр) — своя маска, заранее ужатая: иначе браузер
   сжимает большую грубо, и линии рябят. */
@container (max-width:420px){
  .cf[data-cover="wash"]{--cf-art:url(../assets/covers/wash-s.webp)}
  .cf[data-cover="marble"]{--cf-art:url(../assets/covers/marble-s.webp)}
  .cf[data-cover="botanic"]{--cf-art:url(../assets/covers/botanic-s.webp)}
}
.cf:is([data-cover="wash"],[data-cover="marble"],[data-cover="botanic"]) .cf-cover::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--cf-fill);
  -webkit-mask:var(--cf-art) center / cover no-repeat;mask:var(--cf-art) center / cover no-repeat;
}
.cf:is([data-cover="wash"],[data-cover="botanic"]) .cf-cover{background:var(--doc-paper);color:var(--doc-ink);box-shadow:inset -1px 0 0 var(--doc-rule-2)}
.cf:is([data-cover="wash"],[data-cover="botanic"]) .cf-cover .cf-mark{background:var(--doc-ink);color:var(--doc-paper)}
/* Рисунок чуть ниже и правее кадра — знак и имя заведения вверху остаются на чистой бумаге. */
.cf[data-cover="wash"] .cf-cover::before{opacity:.94;-webkit-mask-position:right 0 top 8cqi;mask-position:right 0 top 8cqi}
.cf[data-cover="botanic"] .cf-cover::before{-webkit-mask-position:right 0 top 9cqi;mask-position:right 0 top 9cqi}
.cf[data-cover="botanic"] .cf-cover{background:color-mix(in srgb,var(--cf-fill) 5%,var(--doc-paper))}
.cf[data-cover="marble"] .cf-cover::before{background:var(--cf-on);opacity:.55}

/* ═══ Макеты по рисункам Higgsfield: «Билет», «Афиша», «Печать» (face-design.md, «Макеты») ═══ */

/* «Билет» — главное поле с полосой цвета вида сверху; справа отрывной корешок по перфорации с двумя
   вырезами (маска: настоящая дыра, тень — по её форме фильтром обёртки). */
.cf[data-layout="ticket"]{
  --cf-stub:25cqi;
  display:grid;grid-template-columns:minmax(0,1fr) var(--cf-stub);grid-template-rows:minmax(0,1fr);padding:0;
  background:var(--doc-paper);box-shadow:inset 0 0 0 1px var(--doc-rule-2);
  -webkit-mask:radial-gradient(circle 2.3cqi at calc(100% - var(--cf-stub)) 0,transparent 97%,black 100%) top / 100% 51% no-repeat,
    radial-gradient(circle 2.3cqi at calc(100% - var(--cf-stub)) 100%,transparent 97%,black 100%) bottom / 100% 51% no-repeat;
  mask:radial-gradient(circle 2.3cqi at calc(100% - var(--cf-stub)) 0,transparent 97%,black 100%) top / 100% 51% no-repeat,
    radial-gradient(circle 2.3cqi at calc(100% - var(--cf-stub)) 100%,transparent 97%,black 100%) bottom / 100% 51% no-repeat;
}
.cf-wrap:has(> .cf[data-layout="ticket"]){filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--doc-ink) 12%,transparent))
  drop-shadow(0 12px 16px color-mix(in srgb,var(--doc-ink) 20%,transparent))}
.cf-tk-main{position:relative;display:flex;flex-direction:column;min-width:0;padding:7.6cqi 5cqi 5cqi 6.4cqi}
.cf-tk-main::before{content:"";position:absolute;left:0;right:0;top:0;height:2.1cqi;background:var(--cf-fill)}
.cf-brand{display:flex;align-items:center;gap:1.6cqi;min-width:0;font-size:2.5cqi;font-weight:500;color:var(--cf-accent)}
.cf-brand span,.cf-po-top b span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Знак заведения рядом с именем — своей высотой, пропорции сохраняются. */
.cf-logo{flex:none;display:block;height:6cqi;width:auto;max-width:18cqi;object-fit:contain}
.cf-tk-main .cf-kind{margin-top:1.4cqi;font-size:5.4cqi;line-height:1.02;font-weight:700;letter-spacing:-.035em;color:var(--doc-ink)}
.cf-tk-main .cf-value{margin:1.8cqi 0 .6cqi;font-size:10.6cqi;line-height:.95;font-weight:700;letter-spacing:-.05em;color:var(--cf-accent)}
.cf-tk-main .cf-for{font-size:3cqi}
.cf-tk-main .cf-to{margin-top:auto;padding:0;border:0}
.cf-tk-main .cf-to p{font-size:3.1cqi}
.cf-tk-main .cf-to span{color:var(--doc-ink)}
.cf-tk-main .cf-msg{color:var(--cf-accent);font-size:2.7cqi}
.cf-tk-main .cf-text{padding:1cqi 0 0;font-size:1.9cqi}
.cf-tk-stub{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;align-items:center;
  column-gap:1.6cqi;padding:7cqi 3cqi 5cqi 4cqi;color:var(--cf-accent);font-size:2.6cqi}
.cf-tk-stub::before{content:"";position:absolute;left:0;top:3.4cqi;bottom:3.4cqi;border-left:.5cqi dotted var(--cf-fill)}
.cf-tk-stub .cf-qr{grid-column:1;grid-row:1;justify-self:center;width:14cqi;height:14cqi}
.cf-tk-code{grid-column:2;grid-row:1 / span 2;align-self:center;writing-mode:vertical-rl;rotate:180deg;
  font-family:var(--mono);font-size:1em;font-weight:500;letter-spacing:.1em;white-space:nowrap}
/* У повёрнутого текста cqi считался бы от окна (у контейнера нет высоты): размер — от корешка, в em. */
.cf.draft .cf-tk-code{font-family:var(--font);font-size:.72em;letter-spacing:0;color:var(--doc-ink-3)}
.cf-tk-until{grid-column:1;grid-row:2;text-align:center;font-size:.77em;line-height:1.3;white-space:nowrap}
.cf-tk-until span{display:block;font-size:.9em;color:var(--doc-ink-3)}
.cf-tk-until b{font-weight:500}

/* «Афиша» — сумма во всю ширину стоит на границе бумаги и поля цвета вида: над ней — цвет вида,
   под ней — цвет слов поля (градиент по тексту, граница ровно посередине карты). */
.cf[data-layout="poster"]{display:block;padding:0;background:linear-gradient(to bottom,var(--doc-paper) 0 50%,var(--cf-fill) 50% 100%)}
.cf-po-top{position:absolute;left:5.4cqi;right:5.4cqi;top:4.6cqi;height:6cqi;display:flex;justify-content:space-between;align-items:center;gap:4cqi;color:var(--cf-accent)}
.cf-po-top b{display:flex;align-items:center;gap:1.6cqi;min-width:0;font-size:2.9cqi;font-weight:600;letter-spacing:-.01em}
.cf-po-top span{font-size:2.9cqi;font-weight:500;white-space:nowrap}
.cf-po-for{position:absolute;right:5.4cqi;top:11.2cqi;font-size:2.2cqi;color:var(--doc-ink-2)}
.cf[data-layout="poster"] .cf-left{position:absolute;right:5.4cqi;top:14.4cqi;margin:0;font-size:2.1cqi}
.cf-po-value{
  position:absolute;left:3cqi;right:3cqi;top:50%;translate:0 -50%;margin:0;text-align:center;white-space:nowrap;
  font-size:min(27cqi,calc(174cqi / var(--cf-len)));line-height:.84;font-weight:700;letter-spacing:-.06em;
  background:linear-gradient(to bottom,var(--cf-fill) 50%,var(--cf-on) 50%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.cf[data-ink="dark"] .cf-po-value{background:var(--doc-ink);-webkit-background-clip:text;background-clip:text}
.cf-po-value.mute{background:none;color:var(--doc-ink-3);font-weight:600}
.cf-po-bottom{position:absolute;left:5.4cqi;right:5.4cqi;bottom:4.6cqi;display:flex;justify-content:space-between;align-items:flex-end;gap:4cqi;color:var(--cf-on)}
.cf-po-to{min-width:0}
.cf-po-to p{font-size:3.6cqi;font-weight:600}
.cf-po-to span{color:inherit}
.cf-po-to .cf-msg{margin-top:.4cqi;font-family:var(--doc-serif);font-size:4.6cqi;font-weight:400;font-style:italic;color:inherit}
.cf-po-to .cf-text{max-width:44cqi;padding:1cqi 0 0;font-size:1.9cqi;color:inherit;opacity:.8}
.cf-po-meta{display:flex;align-items:flex-end;gap:2.4cqi;text-align:right;flex:none}
.cf-po-meta code{display:block;font-family:var(--mono);font-size:2.5cqi;font-weight:500;letter-spacing:.06em;white-space:nowrap}
.cf-po-meta span{display:block;margin-top:.4cqi;font-family:var(--mono);font-size:2.1cqi;white-space:nowrap;opacity:.9}
.cf.draft .cf-po-meta code{font-family:var(--font);letter-spacing:0}
.cf-po-meta .cf-qr{width:10cqi;height:10cqi}

/* «Печать» — цвет вида во всю карту, тонкая двойная рамка, всё по центру; печать с монограммой и
   именем заведения по кругу. Заголовок разрядкой строчными-заглавными — как надпись печати. */
.cf[data-layout="seal"]{display:flex;flex-direction:column;align-items:center;text-align:center;padding:5.4cqi 7.4cqi 4.4cqi;
  background:var(--cf-fill);color:var(--cf-on)}
.cf-sl-frame{position:absolute;inset:2.2cqi;border:1px solid color-mix(in srgb,var(--cf-on) 55%,transparent);pointer-events:none}
.cf-sl-frame::after{content:"";position:absolute;inset:.8cqi;border:1px solid color-mix(in srgb,var(--cf-on) 28%,transparent)}
.cf-sl-seal{flex:none;width:14.5cqi;height:14.5cqi}
.cf-sl-seal svg{display:block;width:100%;height:100%;overflow:visible}
.cf-sl-arc{fill:currentColor;font-family:var(--font);font-weight:500;letter-spacing:.08em}
.cf-sl-mono{fill:currentColor;font-family:var(--doc-serif);font-size:22px}
.cf-sl-plate{fill:var(--doc-paper)}
.cf-sl-title{margin-top:2cqi;font-size:3cqi;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:inherit}
.cf-sl-title.mute{color:inherit;opacity:.6}
.cf[data-layout="seal"] .cf-value{margin:1.2cqi 0 .3cqi;font-size:8.6cqi;line-height:1.02;font-weight:400;letter-spacing:-.02em;color:inherit}
.cf[data-layout="seal"] .mute.cf-value{color:inherit;opacity:.6}
.cf[data-layout="seal"] .cf-for,.cf[data-layout="seal"] .cf-left{font-size:2.3cqi;color:inherit;opacity:.78}
.cf-sl-to{margin-top:1.6cqi;font-size:3.3cqi;letter-spacing:.03em}
.cf-sl-to b{font-weight:500}
.cf[data-layout="seal"] .cf-msg{margin-top:.2cqi;font-family:var(--doc-serif);font-size:3.8cqi;color:inherit;opacity:.92}
.cf[data-layout="seal"] .cf-text{padding:.8cqi 0 0;font-size:1.9cqi;color:inherit;opacity:.72}
.cf-sl-foot{margin-top:auto;align-self:stretch;display:grid;grid-template-columns:auto minmax(2cqi,1fr) auto minmax(2cqi,1fr) auto;align-items:center;
  gap:2.2cqi;padding-top:1.6cqi;font-size:2.1cqi}
.cf-sl-foot code{font-family:var(--mono);font-size:2.2cqi;letter-spacing:.08em;white-space:nowrap}
.cf.draft .cf-sl-foot code{font-family:var(--font);letter-spacing:0}
.cf-sl-foot i{height:1px;background:color-mix(in srgb,var(--cf-on) 45%,transparent)}
.cf-sl-foot span{letter-spacing:.04em;white-space:nowrap}
.cf-sl-foot .cf-qr{width:9cqi;height:9cqi}

/* Состояние — печатью поверх, как «оплачено» на чеке. */
.cf-stamp{
  position:absolute;top:34%;right:9%;z-index:3;padding:.8cqi 2.4cqi;rotate:-9deg;
  border:.45cqi solid currentColor;border-radius:var(--r-sm);color:var(--doc-ink-2);background:color-mix(in srgb,var(--doc-paper) 72%,transparent);
  font-size:3.6cqi;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.86;
}
.cf[data-state="expired"] .cf-stamp{color:var(--doc-tone-brick)}
.cf:is([data-state="used"],[data-state="burned"],[data-state="void"],[data-state="refunded"]) :is(.cf-value,.cf-for,.cf-left){color:var(--doc-ink-3)}
.cf:is([data-state="used"],[data-state="burned"],[data-state="void"],[data-state="refunded"]) .cf-cover{filter:saturate(.35)}

/* ── миниатюра обложки: плитки видов в окне продажи, на витрине и в мастере ── */
.cf-mini{
  --cf-fill:var(--cf-color,var(--doc-tone-ink));
  position:relative;display:block;flex:none;width:46px;aspect-ratio:210 / 148;overflow:hidden;border-radius:4px;
  background:linear-gradient(90deg,var(--cf-fill) 0 42%,var(--doc-paper) 42%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--doc-ink) 12%,transparent),0 1px 2px color-mix(in srgb,var(--doc-ink) 14%,transparent);
}
.cf-mini img{position:absolute;inset:0 auto 0 0;width:42%;height:100%;object-fit:cover}
.cf-mini[data-cover="paper"]{background:var(--doc-paper);box-shadow:inset 0 0 0 3px var(--doc-paper),inset 0 0 0 4px var(--doc-rule),0 0 0 1px color-mix(in srgb,var(--doc-ink) 12%,transparent)}
.cf-mini[data-cover="ribbon"]{background:linear-gradient(90deg,var(--doc-paper) 0 36%,var(--cf-fill) 36% 45%,var(--doc-paper) 45%)}
.cf-mini[data-cover="field"]::before{content:"";position:absolute;inset:0 58% 0 0;background:var(--cf-relief,none);mix-blend-mode:overlay;opacity:.4}
.cf-mini[data-pattern="guilloche"]{--cf-relief:url(../assets/awards/relief-guilloche.png) right -10px bottom -10px / 30px no-repeat}
.cf-mini[data-pattern="lotus"]{--cf-relief:url(../assets/awards/relief-lotus.png) right -8px bottom -8px / 26px no-repeat}
.cf-mini[data-pattern="honeycomb"]{--cf-relief:url(../assets/awards/relief-honeycomb.png) 0 0 / 8px repeat}
.cf-mini[data-pattern="stars"]{--cf-relief:url(../assets/awards/relief-stars.png) 0 0 / 12px repeat}
.cf-mini[data-pattern="waves"]{--cf-relief:url(../assets/awards/relief-waves.png) 0 0 / 16px repeat}
.cf-mini[data-pattern="weave"]{--cf-relief:url(../assets/awards/relief-weave.png) 0 0 / 9px repeat}

.cf-mini[data-cover="wash"]{--cf-art:url(../assets/covers/wash-s.webp)}
.cf-mini[data-cover="marble"]{--cf-art:url(../assets/covers/marble-s.webp)}
.cf-mini[data-cover="botanic"]{--cf-art:url(../assets/covers/botanic-s.webp)}
.cf-mini:is([data-cover="wash"],[data-cover="botanic"]){background:var(--doc-paper)}
.cf-mini:is([data-cover="wash"],[data-cover="marble"],[data-cover="botanic"])::before{
  content:"";position:absolute;inset:0 58% 0 0;background:var(--cf-fill);
  -webkit-mask:var(--cf-art) center / cover no-repeat;mask:var(--cf-art) center / cover no-repeat;
}
.cf-mini[data-cover="marble"]::before{background:var(--doc-paper);opacity:.6}

/* Миниатюры макетов: полоса и корешок билета, два поля афиши, заливка и круг печати. */
.cf-mini[data-layout="ticket"]{background:linear-gradient(var(--cf-fill),var(--cf-fill)) 0 0 / 74% 10% no-repeat,var(--doc-paper)}
.cf-mini[data-layout="ticket"]::after{content:"";position:absolute;top:14%;bottom:10%;left:75%;border-left:1px dotted var(--cf-fill)}
.cf-mini[data-layout="poster"]{background:linear-gradient(to bottom,var(--doc-paper) 0 50%,var(--cf-fill) 50%)}
.cf-mini[data-layout="seal"]{background:var(--cf-fill)}
.cf-mini[data-layout="seal"]::after{content:"";position:absolute;left:50%;top:16%;width:28%;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--doc-paper) 80%,transparent)}

/* ── бумага: лист A5 горизонтально ── */
.cf-print-wrap{container-type:inline-size;width:210mm}
.cf.cf-print{width:210mm;border-radius:0;box-shadow:none}
@page cert-a5{size:A5 landscape;margin:0!important}
@media print{
  body.printing .doc-print .cf-print-wrap{page:cert-a5}
}