/* craftgen lab · v21 — общее: токены, тема, компоненты. Раскладка: v21-d.css (.d), v21-m.css (.m). */
:root {
  --bg: #f5f2ec;
  --bg2: #ebe6dd;
  --card: #fffdf9;
  --ink: #1c1a17;
  --ink2: #5b554c;
  --line: #d9d2c5;
  --cta: #c8461f;
  --cta-ink: #fff;
  --ok: #11745e;
  --ok-bg: #e2f2ec;
  --bad: #b8283a;
  --bad-bg: #fbe7e9;
  --warn-bg: #fdf1d8;
  --focus: #1f5fd6;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141311; --bg2: #1d1b18; --card: #1f1d1a; --ink: #f1ede6; --ink2: #b3ab9f;
    --line: #3a3630; --cta: #e8673e; --cta-ink: #170a05; --ok: #4fc9a6; --ok-bg: #12302a;
    --bad: #ff7d8a; --bad-bg: #3a171c; --warn-bg: #352a12; --focus: #8fb3ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141311; --bg2: #1d1b18; --card: #1f1d1a; --ink: #f1ede6; --ink2: #b3ab9f;
  --line: #3a3630; --cta: #e8673e; --cta-ink: #170a05; --ok: #4fc9a6; --ok-bg: #12302a;
  --bad: #ff7d8a; --bad-bg: #3a171c; --warn-bg: #352a12; --focus: #8fb3ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); overflow-x: hidden; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fatal { padding: 24px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 8px; }

/* шапка */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; margin-right: auto; min-width: 0; }
.brand b { font-size: 17px; letter-spacing: -0.01em; }
.brand span { font-size: 12px; color: var(--ink2); }
.lang { font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  border-radius: 999px; padding: 10px 18px; font-weight: 650; text-decoration: none; min-height: 44px; }
.btn-cta { background: var(--cta); color: var(--cta-ink); }
.btn-cta:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-big { width: 100%; font-size: 18px; min-height: 54px; }

/* сцена */
.stage { position: relative; overflow: hidden; border-radius: var(--r); touch-action: none;
  background: radial-gradient(120% 90% at 50% 30%, #3a3631 0%, #1c1a17 70%); }
.stage[data-tone="light"] { background: radial-gradient(120% 90% at 50% 30%, #fbf8f2 0%, #e2dbcf 75%); }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.stage-canvas:active { cursor: grabbing; }
.stage-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pill { position: absolute; left: 12px; bottom: 12px; margin: 0; max-width: calc(100% - 24px);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3;
  background: rgba(20, 19, 17, .72); color: #fff; backdrop-filter: blur(6px); pointer-events: none; }
.stage[data-tone="light"] .pill { background: rgba(255, 253, 249, .86); color: #1c1a17; }
.pill[data-mode="busy"]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; vertical-align: -1px;
  animation: spin .8s linear infinite; }
.pill[data-mode="ok"]::before { content: "●"; color: #4fc9a6; margin-right: 6px; }
.pill[data-mode="bad"]::before { content: "●"; color: #ff6b78; margin-right: 6px; }
.pill[data-mode="down"]::before { content: "●"; color: #f0b54a; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* рельс шагов */
.rail { list-style: none; margin: 0; padding: 0; position: relative; --p: 0; }
.rail a { text-decoration: none; display: flex; align-items: center; gap: 8px; }
.rail-n { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%;
  font-size: 12px; font-weight: 700; border: 2px solid var(--line); background: var(--card); transition: background .3s, border-color .3s, color .3s; }
.rail-n { position: relative; }
.rail-i.has-ok .rail-n::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px;
  transform: rotate(45deg); background: var(--cta); border: 2px solid var(--card); }
.rail-i.done .rail-n, .rail-i.on .rail-n { border-color: var(--ok); }
.rail-i.done .rail-n { background: var(--ok); color: var(--card); }
.rail-i.on .rail-t { font-weight: 700; color: var(--ink); }
.rail-t { font-size: 13px; color: var(--ink2); }
.rail-fill { position: absolute; background: var(--ok); pointer-events: none; }

/* текст */
.eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cta); }
.kin { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; margin: 0 0 16px; }
/* маска слова с запасом под выносы и курсив: поля внутри, компенсация снаружи */
.kin .w { display: inline-block; clip-path: inset(0); vertical-align: bottom;
  padding: .14em .3em .24em .2em; margin: -.14em -.3em -.24em -.2em; }
.kin .w > span { display: inline-block; animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 110ms + 100ms); }
.kin .w:nth-child(3) > span { font-style: italic; color: var(--cta); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.lead { color: var(--ink2); margin: 0 0 12px; }
.hint { font-size: 14px; font-weight: 600; color: var(--ink2); display: flex; align-items: center; gap: 8px; }
.hint::after { content: "↓"; display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }
.small { font-size: 13px; color: var(--ink2); margin: 6px 0 0; }

/* карточка шага */
.step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; transition: border-color .3s, box-shadow .3s; }
.step.on { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); }
.step.pre { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s, border-color .3s; }
.step.pre.in, .quote.pre.in { opacity: 1; transform: none; }
.quote.pre { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.step-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.step-n { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--cta); font-variant-numeric: tabular-nums; }
.step-h h2 { margin: 0; font-family: var(--serif); font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.roles { margin: 0; display: grid; gap: 8px; }
.role { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg2); }
.role dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); padding-top: 2px; }
.role dd { margin: 0; }
.r-ok { background: var(--ok-bg); }
.r-ok dt { color: var(--ok); }
.r-ok.r-none { background: var(--bg2); }
.r-ok.r-none dt { color: var(--ink2); }
.r-ok.r-none dd { color: var(--ink2); }
.risk { margin: 12px 0 0; padding-left: 12px; border-left: 3px solid var(--cta); font-size: 14px; color: var(--ink2); }
.seal { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center;
  border: 2px solid var(--ok); color: var(--ok); border-radius: 50%; font-weight: 800; font-size: 20px; transform: scale(.7); opacity: .25; transition: opacity .3s; }
.step.on .seal { opacity: 1; animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes stamp { from { transform: rotate(-20deg) scale(1.8); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
.step.on .seal { transform: rotate(-8deg); }
.extra:empty { display: none; }
/* «сначала потрогай»: в «Макеті» и «Перевірці» ручки и протокол — сразу под заголовком */
.step { display: flex; flex-direction: column; }
.step[data-k="layout"] .extra, .step[data-k="check"] .extra { order: -1; margin: 0 0 14px; }
.step-h { order: -2; }
.extra { margin-top: 14px; }
.extra h3 { font-size: 15px; margin: 16px 0 8px; }
.extra h3:first-child { margin-top: 0; }

/* выбор */
.chips { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--card); cursor: pointer; text-align: left; }
.chip:hover { border-color: var(--ink2); }
.chip.on { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); background: var(--ok-bg); }
.logo-chip img, .upload img { width: 28px; height: 28px; flex: none; }
:root[data-theme="dark"] .logo-chip img, :root[data-theme="dark"] .upload img { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-chip img, :root:not([data-theme="light"]) .upload img { filter: invert(1); } }
.cn { font-weight: 600; font-size: 14px; }
.badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 6px; background: var(--warn-bg); color: var(--ink2); }
.upload { border-style: dashed; position: relative; }
.upload::before { content: "+"; font-weight: 700; font-size: 18px; }
.upload:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.prod { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px 10px; width: 132px; }
.prod .thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--bg2); margin-bottom: 4px; }
.prod .sub { font-size: 12px; color: var(--ink2); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: var(--c); cursor: pointer; padding: 0; }
.sw.on { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ok); }
.err { color: var(--bad); font-size: 14px; margin: 6px 0 0; }
.err:empty { display: none; }

/* ползунок и числа */
.range { display: block; margin-bottom: 14px; }
.range-h { display: flex; justify-content: space-between; font-weight: 600; }
.range-v { font-variant-numeric: tabular-nums; }
.range input { width: 100%; accent-color: var(--ok); min-height: 36px; }
.num, .date { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; margin: 8px 0; }
.num-box { display: inline-flex; align-items: center; gap: 6px; }
.num input, .date input { width: 96px; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); text-align: center; font-variant-numeric: tabular-nums; }
.date input { width: auto; }
.nb { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font-size: 20px; }
.unit { color: var(--ink2); font-weight: 500; }
.calc { font-size: 14px; color: var(--ink2); margin: 4px 0 0; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg2); gap: 4px; flex-wrap: wrap; }
.seg-b { border: 0; background: none; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; min-height: 40px; }
.seg-b.on { background: var(--ok); color: var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.terms { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--warn-bg); }
.terms p { margin: 4px 0 0; font-size: 14px; }

/* протокол */
.proto { border: 1.5px solid var(--ok); border-radius: 12px; padding: 14px; background: color-mix(in srgb, var(--ok-bg) 45%, var(--card)); transition: border-color .3s, background .3s; }
.proto.is-bad { border-color: var(--bad); background: var(--bad-bg); }
.proto.is-wait { border-color: var(--line); background: var(--card); }
.proto h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.proto h4 { margin: 12px 0 4px; font-size: 14px; }
.pr-l { margin: 0; }
.pr { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.pr dt { color: var(--ink2); }
.pr dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.pr.ok dd { color: var(--ok); }
.pr.ok dd::before { content: "✓ "; }
.pr.bad dd { color: var(--bad); }
.pr.wait dd { color: var(--ink2); font-weight: 500; }
.tips { margin: 0; padding-left: 18px; font-size: 14px; }
.bad-h { margin: 0 0 4px; font-weight: 700; color: var(--bad); }
.bad-l { margin: 0; padding-left: 18px; }
.wait, .warn { margin: 0; color: var(--ink2); }

/* КП */
.quote { background: var(--ink); color: var(--bg); border-radius: var(--r); padding: 24px 20px; }
.quote h2 { font-family: var(--serif); font-size: 32px; margin: 0 0 8px; line-height: 1.1; }
.quote .lead { color: color-mix(in srgb, var(--bg) 75%, var(--ink)); }
.quote .small { color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.sum { margin: 16px 0; }
.sum .pr { border-bottom-color: color-mix(in srgb, var(--bg) 25%, var(--ink)); }
.sum .pr dt { color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.qmsg { margin: 10px 0 0; min-height: 1.5em; }
.qmsg.ok { color: #7fe0c2; }
:root[data-theme="dark"] .qmsg.ok { color: var(--ok); }
.qmsg .go { font-weight: 700; }
.foot { padding: 32px 16px 120px; text-align: center; font-size: 13px; color: var(--ink2); }
.mbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .step.pre, .quote.pre { opacity: 1; transform: none; }
}