/* ==========================================================================
   КОНСТРУКТОР КУПОНОВ, публичный лендинг (08.10.2026).
   Владелец: «для сео части по факту нужен лендинг, который будет по шагам
   вести и сео описывать». Шесть шагов идут разделами с заголовками: текст
   каждого шага видят и человек, и поисковик, ничего не спрятано за вкладками.
   Сверху прилипший живой купон, тот же, что внутри приложения (coupon-3d.js).

   Подключать ПОСЛЕ tokens.css и guides.css: шапка, крошки, плашка 18+, текст и
   FAQ берутся оттуда. Свой префикс cm-, чужие классы не красим.
   ========================================================================== */

.cm-wrap{max-width:760px;margin-inline:auto;padding:0 var(--s-4) var(--s-10)}

/* ---------- живой купон ---------- */

.cm-stage{
  position:sticky;top:0;z-index:5;
  height:min(34vh,270px);
  margin:0 calc(-1 * var(--s-4)) var(--s-4);
  border-bottom:1px solid var(--c-border);
  background:
    radial-gradient(18% 14% at 80% 22%, rgba(255,190,140,.16), transparent 70%),
    radial-gradient(24% 16% at 16% 78%, rgba(255,120,170,.12), transparent 70%),
    radial-gradient(120% 90% at 30% 10%, #5a1a35 0%, #2a0c1c 48%, #12050c 100%);
}
.cm-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.cm-stage canvas.cm-flat{
  inset:0;margin:auto;width:86% !important;height:auto !important;
  transform:perspective(900px) rotateX(6deg) rotateY(-8deg);
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.5));
}
.cm-stage__wait{position:absolute;inset:0;display:grid;place-items:center;color:var(--c-muted);font:400 var(--t-body-s) var(--f-sans)}

/* шесть точек шагов внизу сцены */
.cm-dots{
  position:absolute;left:0;right:0;bottom:var(--s-2);
  display:flex;justify-content:center;gap:var(--s-2);margin:0;padding:0;list-style:none;
}
.cm-dots a{
  display:block;width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.22);
}
.cm-dots a[aria-current="step"]{background:var(--c-gold);box-shadow:0 0 0 3px rgba(212,175,55,.28)}
.cm-dots a.is-done{background:rgba(233,200,117,.6)}

@media (min-width:1024px){
  .cm-stage{margin:0 0 var(--s-5);border:1px solid var(--c-border);border-radius:var(--r-lg);height:320px}
}

/* ---------- шаг ---------- */

.cm-step{
  margin:0 0 var(--s-5);padding:var(--s-5) var(--s-4);
  background:var(--c-card-bg,var(--c-surface));
  border:1px solid var(--c-border);border-radius:var(--r-lg);
  scroll-margin-top:calc(min(34vh,270px) + var(--s-3));
}
@media (min-width:1024px){.cm-step{scroll-margin-top:var(--s-4)}}
.cm-step__n{
  margin:0 0 var(--s-1);
  font:600 var(--t-label-s) var(--f-mono);letter-spacing:var(--tr-label-s);
  text-transform:uppercase;color:var(--c-gold);
}
.cm-step h2{margin:0 0 var(--s-2);font:400 var(--t-headline-s) var(--f-serif);color:var(--c-text)}
.cm-step__lead{margin:0 0 var(--s-4);font:400 var(--t-body-m) var(--f-sans);color:var(--c-muted)}
.cm-field{margin:0 0 var(--s-4)}
.cm-field:last-child{margin-bottom:0}
.cm-label{
  display:block;margin:0 0 var(--s-2);
  font:600 var(--t-label-m) var(--f-sans);letter-spacing:var(--tr-label-m);color:var(--c-muted);
}
.cm-input{
  width:100%;box-sizing:border-box;min-height:var(--tap);
  padding:var(--s-3);border-radius:var(--r-ctl);
  border:1px solid var(--c-border-strong);background:var(--c-surface-alt);color:var(--c-text);
  font:400 max(16px,var(--t-input-min,16px)) var(--f-sans);
}
textarea.cm-input{resize:vertical;min-height:110px;line-height:1.45}
.cm-input:focus{outline:2px solid var(--c-gold);outline-offset:1px}
.cm-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
@media (max-width:380px){.cm-pair{grid-template-columns:1fr}}
.cm-error{margin:var(--s-2) 0 0;color:var(--c-danger);font:500 var(--t-body-s) var(--f-sans)}

/* ---------- готовые купоны: кнопка «Идеи» и шторка, как в next ----------
   Владелец 08.10: «почему не повторишь кнопочкой идеи, как в некст». В next
   (screens/coupon-make.js, css/coupons.css .kp-идея) рядом с названием стоит
   кнопка, по ней снизу выезжает шторка с карточками «название + обещание».
   Шторка это <dialog>: карточки в разметке, поисковик их видит. */

.cm-title-row{display:grid;grid-template-columns:1fr auto;gap:var(--s-2);align-items:center}
.cm-ideas-btn{white-space:nowrap}

.cm-sheet{
  position:fixed;inset:auto 0 0 0;margin:0 auto;
  width:100%;max-width:760px;max-height:82vh;box-sizing:border-box;
  padding:var(--s-4) var(--s-4) var(--s-5);
  border:1px solid var(--c-border);border-bottom:0;
  border-radius:var(--r-sheet,var(--r-xl)) var(--r-sheet,var(--r-xl)) 0 0;
  background:var(--c-surface-high,var(--c-surface));color:var(--c-text);
  overflow:hidden;
}
.cm-sheet[open]{display:flex;flex-direction:column}
.cm-sheet::backdrop{background:var(--c-scrim,rgba(0,0,0,.6))}
.cm-sheet__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 var(--s-3)}
.cm-sheet__title{margin:0;font:400 var(--t-title-l) var(--f-serif)}
.cm-sheet__x{
  width:var(--tap);height:var(--tap);cursor:pointer;
  border:0;border-radius:50%;background:transparent;color:var(--c-muted);font-size:28px;line-height:1;
}

.cm-ideas{display:grid;gap:var(--s-2);overflow-y:auto;overscroll-behavior:contain;padding:2px}
.cm-idea{
  display:grid;gap:2px;align-content:start;text-align:left;cursor:pointer;
  padding:var(--s-3);
  border:1px solid var(--c-border);border-radius:var(--r-md);
  background:var(--c-surface-alt);color:var(--c-text);
}
.cm-idea:hover{border-color:var(--c-gold)}
.cm-idea b{font:600 var(--t-label-l) var(--f-sans)}
.cm-idea span{font:400 var(--t-body-s) var(--f-sans);color:var(--c-muted)}
.cm-idea[aria-pressed="true"]{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(212,175,55,.28)}

/* ---------- выбор ---------- */

.cm-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.cm-chip{
  min-height:var(--tap);min-width:var(--tap);padding:0 var(--s-4);cursor:pointer;
  border:1px solid var(--c-border-strong);border-radius:var(--r-pill);
  background:var(--c-surface-alt);color:var(--c-text);
  font:500 var(--t-label-l) var(--f-sans);
}
.cm-chip[aria-pressed="true"]{border-color:var(--c-gold);background:rgba(212,175,55,.14);color:var(--c-gold-light,var(--c-gold))}

.cm-palettes{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--s-2)}
@media (max-width:380px){.cm-palettes{grid-template-columns:repeat(4,1fr)}}
.cm-palette{
  aspect-ratio:1;border-radius:50%;cursor:pointer;padding:0;
  background:radial-gradient(circle at 70% 30%, var(--c) 0 18%, transparent 19%), linear-gradient(135deg, var(--a), var(--b));
  border:2px solid var(--c-border);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);
}
.cm-palette[aria-pressed="true"]{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(212,175,55,.28), inset 0 0 0 2px rgba(0,0,0,.25)}

.cm-arts,.cm-patterns{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
.cm-art,.cm-pattern{
  padding:0;overflow:hidden;cursor:pointer;
  border:2px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface-alt);
}
.cm-art{aspect-ratio:1}
.cm-pattern{aspect-ratio:1.4}
.cm-art canvas,.cm-pattern canvas{width:100%;height:100%;display:block}
.cm-art[aria-pressed="true"],.cm-pattern[aria-pressed="true"]{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(212,175,55,.28)}

/* ---------- кнопки ---------- */

.cm-next{
  display:inline-flex;align-items:center;gap:var(--s-2);
  margin-top:var(--s-4);min-height:var(--tap);padding:0 var(--s-4);cursor:pointer;
  border:1px solid var(--c-border-strong);border-radius:var(--r-ctl);
  background:transparent;color:var(--c-text);text-decoration:none;
  font:600 var(--t-label-l) var(--f-sans);
}
.cm-send{
  display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;
  min-height:calc(var(--tap) + 8px);padding:var(--s-3) var(--s-5);cursor:pointer;
  border:0;border-radius:var(--r-ctl);
  background:var(--g-flame,var(--c-gold));color:var(--c-on-gold);
  font:600 var(--t-title-s) var(--f-sans);text-decoration:none;
}
.cm-print{
  display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;
  margin-top:var(--s-3);min-height:var(--tap);padding:var(--s-3) var(--s-5);
  border:1px solid var(--c-border-strong);border-radius:var(--r-ctl);
  color:var(--c-text);text-decoration:none;font:600 var(--t-label-l) var(--f-sans);
}
.cm-note{margin:var(--s-3) 0 0;font:400 var(--t-body-s) var(--f-sans);color:var(--c-muted)}

/* ---------- список идей в тексте ---------- */

.cm-list{margin:0 0 var(--s-5);padding-left:1.2em}
.cm-list li{margin:0 0 var(--s-2);color:var(--c-muted)}
.cm-list li strong{color:var(--c-text)}

@media (min-width:1024px){
  .cm-wrap{padding-inline:var(--s-6)}
}