@import url('font.css');

/* ============================================================
   KULĒK — анкета гостя
   Настроение — kulekbonus.ru: тёплый почти-белый, коралл, тёмные плашки,
   Raleway + JetBrains Mono. Идея — year-of-love: страница живая,
   объекты дышат и плавают, ничто не прибито. Буквы — плитки с вывески.
   ============================================================ */

:root{
  /* kulekbonus.ru */
  --ground:   #F6F2F0;
  --tint:     #FBF8F6;
  --panel:    #FFFFFF;
  --figure:   #272A2B;
  --muted:    #6B6764;   /* чуть темнее исходного #7e7a77: 5.1:1 на ground */
  --hair:     #DAD3CE;
  --kraft:    #D8C5AC;
  --coral:    #FF6144;
  --coral-ink:#E24A2F;   /* текст на светлом: 4.6:1 при ≥18px bold */
  --ok:       #3F7A4F;

  --slab:       #272A2B;
  --slab-panel: #313537;
  --slab-figure:#F6F2F0;
  --slab-muted: #A5A2A0;
  --slab-hair:  #43474A;

  /* Вывеска: плитка и литера */
  --tile:     #F4C752;
  --tile-hi:  #FFE08A;
  --tile-lo:  #D9A72E;
  --tile-ink: #B8301A;   /* 3.8:1 на янтаре плитки */

  /* Объекты в полях */
  --lemon:  #F2D45C;
  --olive:  #6C7A5B;
  --tomato: #E8563F;
  --bread:  #D9A45C;

  --f-display:'Raleway', system-ui, sans-serif;
  --f-text:   'Raleway', system-ui, sans-serif;
  --f-mono:   'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(18px, 4.5vw, 72px);
  --r: 4px;
  --rail: 4.75rem;
  --e: cubic-bezier(.2,.9,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--f-text);
  font-size:1.0625rem; line-height:1.55;
  color:var(--figure);
  background:var(--ground);
  overflow-x:hidden;
}

/* ---------- Поверхности браузера ---------- */
::selection{ background:var(--coral); color:#fff; }
input,textarea{ caret-color:var(--coral); }
:focus-visible{ outline:2px solid var(--figure); outline-offset:3px; border-radius:2px; }
[tabindex="-1"]:focus{ outline:none; }
*{ scrollbar-color:var(--kraft) transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:var(--kraft); border:3px solid var(--ground); border-radius:99px; }

/* ============================================================
   ПЛИТКА — литера с вывески
   ============================================================ */
.tiles{ display:inline-flex; gap:.14em; font-size:2.2rem; line-height:1; }
.tile{
  display:inline-grid; place-items:center;
  width:1.18em; height:1.18em;
  border-radius:.13em;
  background:
    radial-gradient(60% 55% at 50% 40%, var(--tile-hi) 0%, var(--tile) 62%, var(--tile-lo) 100%);
  box-shadow:
    inset 0 0 0 .045em rgba(39,42,43,.85),
    inset 0 .05em .12em rgba(255,240,180,.6),
    0 .08em 0 rgba(39,42,43,.9),
    0 .35em .6em rgba(39,42,43,.18);
  color:var(--tile-ink);
  font-family:var(--f-display); font-weight:900; font-size:.86em;
  line-height:1;                 /* иначе наследуется 1.55 и глиф уезжает вниз */
  letter-spacing:0; text-transform:uppercase;
  user-select:none;
}
.tile--dark{
  color:var(--slab-figure);
  background:radial-gradient(60% 55% at 50% 40%, var(--slab-panel), var(--slab) 80%);
  box-shadow:inset 0 0 0 .045em rgba(246,242,240,.55), 0 .08em 0 rgba(0,0,0,.6);
}
/* Одиночные плитки — не меньше 1.4rem: литера тогда ≥19px жирным, то есть
   «крупный текст» по WCAG, и 3.8:1 на янтаре проходит без затемнения красного. */
.tile--sm, .card .tile, .recap .tile, .q__head .tile{ font-size:1.4rem; }

/* Надпись из плиток, которая дышит — ей это задаёт GSAP. */
.brand{ position:fixed; top:14px; left:var(--gutter); z-index:70; }
.brand .tiles{ font-size:1.7rem; }

/* ============================================================
   ЗАГОЛОВОК — язык стикера: плотный, с жёстким контуром и сдвигом
   ============================================================ */
.display{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.6rem, 8.6vw, 6.4rem);
  line-height:.92; letter-spacing:-.025em;
  margin:0; text-wrap:balance;
  color:var(--coral-ink);   /* 3.4:1 на фоне; #FF6144 давал 2.7 */
  -webkit-text-stroke:.018em var(--figure);
  paint-order:stroke fill;
  text-shadow:.045em .045em 0 var(--figure);
}
.display--ink{ color:var(--figure); -webkit-text-stroke:0; text-shadow:none; }

.h2{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.55rem, 3.6vw, 2.4rem); line-height:1.08;
  letter-spacing:-.02em; margin:0; text-wrap:balance;
}
.h3{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.125rem, 2.2vw, 1.375rem); line-height:1.3;
  letter-spacing:-.01em; margin:0; max-width:34ch; text-wrap:balance;
}
.label{
  font-family:var(--f-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.lede{ font-size:1.125rem; max-width:44ch; color:var(--figure); }
.lede b{ font-weight:700; }
.note{ font-size:.9rem; color:var(--muted); max-width:52ch; }

/* ============================================================
   НЕБО — фиксированный слой объектов, живёт под контентом
   ============================================================ */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.obj{
  position:absolute; width:var(--w,64px); height:var(--w,64px);
  will-change:transform; opacity:.95;
}
.obj svg{ width:100%; height:100%; display:block; overflow:visible; }
main{ position:relative; z-index:1; }

/* Правило баллов — плашка, которая повторяется в начале и в конце */
.rule{
  display:grid; grid-template-columns:auto 1fr; gap:1rem;
  align-items:start; max-width:38rem;
  padding:1rem 1.1rem; margin-top:1.6rem;
  background:var(--panel); border:1.5px solid var(--figure); border-radius:var(--r);
  box-shadow:3px 3px 0 var(--figure);
}
.rule__ico{ width:2.2rem; height:2.2rem; flex:none; }
.rule p{ margin:0; font-size:.95rem; line-height:1.45; }
.rule b{ font-weight:700; }

/* ============================================================
   ЭКРАНЫ
   ============================================================ */
.screen{ display:none; }
.screen.is-on{ display:block; }
  .pane{
  min-height:100vh; min-height:100svh;
  padding:calc(var(--gutter) + 3.2rem) var(--gutter) calc(var(--rail) + var(--gutter) + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
}
.wrap{ width:100%; max-width:72rem; margin-inline:auto; }

/* ---------- Вход ---------- */
.entry{ justify-content:center; }
.entry__grid{ display:grid; gap:2.5rem clamp(2rem,6vw,6rem); align-items:center; }
@media (min-width:980px){ .entry__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } }
.entry__lede{ margin:1.6rem 0 0; }

/* Поле — как на kulekbonus: панель, тонкая рамка, моно внутри */
.field{ display:block; margin-top:1.1rem; max-width:24rem; }
.field__label{ display:block; margin-bottom:.45rem; }
.field__in{
  width:100%; font:inherit; font-family:var(--f-mono); font-size:max(1.05rem,16px);
  color:var(--figure); background:var(--panel);
  border:1.5px solid var(--figure); border-radius:var(--r);
  padding:.85rem 1rem;
  transition:box-shadow .2s var(--e), transform .2s var(--e);
}
.field__in::placeholder{ color:var(--muted); }
.field__in:focus{ outline:none; box-shadow:3px 3px 0 var(--figure); transform:translate(-1px,-1px); }
.field__err{ display:none; margin-top:.45rem; font-size:.85rem; font-weight:600; color:var(--coral-ink); }
.field.is-bad .field__err{ display:block; }
.field.is-bad .field__in{ border-color:var(--coral-ink); }

/* Согласие с офертой */
.consent{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.2rem; max-width:32rem; font-size:.95rem; line-height:1.4; cursor:pointer; }
.consent input{ width:1.25rem; height:1.25rem; margin:.1rem 0 0; accent-color:var(--coral); flex:none; }
.consent a{ color:var(--coral-ink); font-weight:600; }
#consentErr{ display:none; }
.consent.is-bad + #consentErr{ display:block; }
.closed{ margin-top:1.4rem; max-width:38rem; padding:1rem 1.1rem; background:var(--tile); border:1.5px solid var(--figure); border-radius:var(--r); box-shadow:3px 3px 0 var(--figure); font-weight:600; }

/* Кнопка — коралл, плотная, с жёстким сдвигом */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-top:1.5rem; padding:1rem 1.7rem;
  font-family:var(--f-display); font-weight:800; font-size:1rem;
  letter-spacing:.01em; color:var(--figure); background:var(--coral);   /* 4.8:1 */
  border:1.5px solid var(--figure); border-radius:var(--r); cursor:pointer;
  box-shadow:4px 4px 0 var(--figure);
  transition:transform .18s var(--e), box-shadow .18s var(--e), background .18s var(--e);
}
.btn:hover{ background:var(--tile); transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--figure); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--figure); }
.btn[disabled]{ background:var(--hair); color:var(--muted); cursor:not-allowed;
  box-shadow:2px 2px 0 var(--hair); border-color:var(--hair); transform:none; }
.btn__i{ width:1.1em; height:1.1em; flex:none; }
.quiet{
  appearance:none; background:transparent; border:0; cursor:pointer;
  font-family:var(--f-mono); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--figure);
  padding:.6rem 0; text-decoration:underline; text-underline-offset:.35em;
  text-decoration-color:var(--kraft);
}
.quiet:hover{ text-decoration-color:var(--figure); }

/* Правая колонка входа: карточка-кулёк, которая плавает */
.hero-card{
  position:relative; justify-self:center; width:min(100%, 22rem);
  background:var(--panel); border:1.5px solid var(--figure); border-radius:8px;
  padding:1.4rem 1.4rem 1.2rem;
  box-shadow:6px 6px 0 var(--figure);
  transform:rotate(-3deg);
}
.hero-card__art{ width:100%; aspect-ratio:1/.92; display:block; position:relative; }
.hero-card__art svg{ width:100%; height:100%; }
/* Настоящее фото кулька с сайта бренда, PNG с прозрачностью.
   Пока файла нет, показывается рисованный. */
.hero-card__ph{
  position:absolute; inset:-8% -6%; width:112%; height:116%;
  object-fit:contain; display:none;
  filter:drop-shadow(0 10px 14px rgba(39,42,43,.18));
}
.hero-card.has-photo .hero-card__ph{ display:block; }
.hero-card.has-photo svg{ visibility:hidden; }
.hero-card__cap{ margin:.9rem 0 0; display:flex; justify-content:space-between; align-items:baseline; }
.hero-card__cap b{ font-family:var(--f-display); font-weight:800; font-size:1.1rem; }

/* ---------- Оглавление ---------- */
.corpus__n{ margin:0 0 .6rem; }
.corpus{ display:flex; flex-wrap:wrap; gap:3px; margin:0 0 2.2rem; max-width:44rem; }
.corpus i{ width:7px; height:18px; background:var(--hair); border-radius:1px; transition:background .35s var(--e); }
.corpus i.on{ background:var(--coral); }

.cards{ list-style:none; margin:0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(17rem,1fr)); }
.card{
  position:relative; width:100%; text-align:left;
  display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem; align-items:center;
  padding:1.1rem 1.1rem 1.05rem;
  background:var(--panel); border:1.5px solid var(--figure); border-radius:8px;
  font:inherit; color:var(--figure); cursor:pointer;
  box-shadow:3px 3px 0 var(--figure);
  transition:transform .18s var(--e), box-shadow .18s var(--e);
}
.card:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--figure); }
.card:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--figure); }
.card .tile{ grid-row:1/3; }
.card__t{ font-family:var(--f-display); font-weight:800; font-size:1.05rem; line-height:1.15; }
.card__s{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.card[data-state="done"]{ background:var(--tile); }
.card[data-state="done"] .card__s{ color:var(--figure); }
.card[data-state="part"] .card__s{ color:var(--coral-ink); }

/* ---------- Глава: тёмная плашка ---------- */
.slab{
  position:relative; background:var(--slab); color:var(--slab-figure);
  padding:calc(var(--gutter) + 3.2rem) var(--gutter) var(--gutter);
  min-height:52svh; display:flex; align-items:flex-end; overflow:hidden;
}
.slab .wrap{ position:relative; z-index:1; }
.slab__n{ margin:0 0 1.2rem; }
.slab .display{ color:var(--tile); text-shadow:.045em .045em 0 #000; -webkit-text-stroke:.012em #000; }
.slab__sub{ margin:1.2rem 0 0; color:var(--slab-muted); max-width:48ch; }
.slab__art{
  position:absolute; right:var(--gutter); bottom:-6%; width:clamp(160px, 26vw, 360px);
  opacity:.9; pointer-events:none;
}
.slab__art svg{ width:100%; height:auto; display:block; overflow:visible; }

/* ---------- Вопросы ---------- */
.qpane{ min-height:0; padding-top:var(--gutter); flex:1; }
.q{ padding:2.1rem 0; border-bottom:1px solid var(--hair); }
.q:last-of-type{ border-bottom:0; }
.q__head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.2rem; }
.q__head .tile{ flex:none; }
.q__head .h3{ max-width:none; }

/* Чипы — стикеры: панель, кейлайн, сдвиг. Выбранный — плитка с вывески. */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  font:inherit; font-weight:600; font-size:.95rem; line-height:1.2;
  padding:.62rem 1rem; color:var(--figure);
  background:var(--panel); border:1.5px solid var(--figure); border-radius:99px;
  cursor:pointer; box-shadow:2px 2px 0 var(--figure);
  transition:transform .16s var(--e), box-shadow .16s var(--e), background .16s var(--e), color .16s var(--e);
}
.chip:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--figure); }
.chip:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--figure); }
.chip[aria-pressed="true"]{
  background:var(--tile); color:var(--figure);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 2px 2px 0 var(--figure);
}
.chip[aria-pressed="true"]::before{ content:'✓ '; font-weight:900; color:var(--figure); }   /* на янтаре коралл давал 2.5:1 */

.own{ margin-top:.9rem; max-width:26rem; }
.area{
  width:100%; max-width:44rem; min-height:6.5rem; resize:vertical;
  font:inherit; font-size:max(1.0625rem,16px); line-height:1.55; color:var(--figure);
  background:var(--panel); border:1.5px solid var(--figure); border-radius:var(--r);
  padding:.9rem 1rem;
  transition:box-shadow .2s var(--e), transform .2s var(--e);
}
.area::placeholder{ color:var(--muted); }
.area:focus{ outline:none; box-shadow:3px 3px 0 var(--figure); transform:translate(-1px,-1px); }
.rows{ display:grid; gap:.9rem; max-width:44rem; }
.row2{ display:grid; grid-template-columns:1fr 1.4fr; gap:.75rem; align-items:end; }
.row2 .field{ margin:0; max-width:none; }
.qnav{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; padding:2rem 0 1rem; }

/* ---------- Бордюр глав ---------- */
.rail{
  position:fixed; left:0; right:0; bottom:0; z-index:60; height:var(--rail);
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  background:var(--panel); border-top:1.5px solid var(--figure);
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom);
  height:calc(var(--rail) + env(safe-area-inset-bottom));
}
.rail::-webkit-scrollbar{ display:none; }
.cell{
  position:relative; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  border:0; border-right:1px solid var(--hair); background:transparent;
  font:inherit; color:var(--muted); cursor:pointer; padding:0 .3rem;
  transition:background .18s var(--e), color .18s var(--e);
}
.cell:last-child{ border-right:0; }
.cell:hover{ background:var(--tint); color:var(--figure); }
.cell .tile{ font-size:1.4rem; }
.cell__t{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell[data-state="active"]{ background:var(--coral); color:var(--figure); }
.cell[data-state="active"] .cell__t{ color:var(--figure); }   /* 4.8:1; белый давал 3.0 */
.cell[data-state="done"] .tile{ filter:none; }
.cell[data-state="open"] .tile,
.cell[data-state="skipped"] .tile{ filter:grayscale(1) brightness(1.08); opacity:.55; }
.cell[data-state="part"] .tile{ filter:saturate(.6); }

/* ---------- Финал ---------- */
.pct{ display:flex; gap:.14em; font-size:clamp(3.2rem, 12vw, 7.5rem); margin:1.2rem 0 .4rem; }
.pct .tile{ width:1.18em; height:1.18em; }
.done__sub{ margin:.5rem 0 0; max-width:44ch; }
.share{
  margin:2.2rem 0 0; width:min(100%, 26rem);
  background:var(--panel); border:1.5px solid var(--figure); border-radius:8px;
  padding:1.3rem 1.4rem; box-shadow:6px 6px 0 var(--figure);
}
.share__top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem 1rem; }
.share .tiles{ font-size:1.35rem; }
.share__big{ font-family:var(--f-display); font-weight:900; font-size:2.2rem; line-height:1; margin:.9rem 0 .2rem; color:var(--coral-ink); }
.share__row{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-top:1px dashed var(--hair); font-size:.92rem; }
.share__row b{ font-weight:700; }
.recap{ list-style:none; margin:2.4rem 0 0; padding:0; max-width:64rem; display:grid; gap:.8rem; }
.recap > li{
  display:grid; grid-template-columns:auto 1fr auto; gap:.25rem 1rem; align-items:center;
  padding:1rem 1.1rem; background:var(--panel); border:1.5px solid var(--figure); border-radius:8px;
}
.recap .tile{ grid-row:1/3; }
.recap__t{ font-family:var(--f-display); font-weight:800; }
.recap__c{ grid-row:1/3; white-space:nowrap; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.recap__lines{ grid-column:2/4; list-style:none; margin:.4rem 0 0; padding:0; font-size:.92rem; color:var(--figure); }
.recap__lines li{ padding:.15rem 0; max-width:62ch; }
.recap__empty{ grid-column:2/4; margin:.3rem 0 0; font-size:.85rem; color:var(--muted); }

/* ---------- Мелочи ---------- */
.spin{ display:inline-block; width:1em; height:1em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:sp .7s linear infinite; }
@keyframes sp{ to{ transform:rotate(360deg); } }

@media (max-width:760px){
  :root{ --rail:4.25rem; }
  .obj{ opacity:.7; }
  .rail{ grid-auto-columns:minmax(60px,1fr); }
  .cell__t{ display:none; }
  .row2{ grid-template-columns:1fr; }
  .hero-card{ transform:rotate(-2deg); width:min(100%, 18rem); }
  .slab{ min-height:46svh; }
  /* Объект уходит в правый верхний угол, текст получает правый отступ — не пересекаются. */
  .slab__art{ width:32vw; right:-2vw; bottom:auto; top:calc(var(--gutter) + 2.4rem); }
  .slab .wrap{ padding-right:30vw; }
  .btn{ width:100%; justify-content:center; }
}
@media (max-width:360px){
  :root{ --gutter:14px; }
  .display{ font-size:clamp(2.1rem, 11vw, 2.6rem); }
  .brand .tiles{ font-size:1.35rem; }
  .chip{ padding:.55rem .8rem; font-size:.9rem; }
  .hero-card{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms !important; transition-duration:1ms !important; }
}