/* ===========================================================================
   Borneo · конфигуратор клана, прототип (ТЗ 105, раздел Б)

   Страница подключает НАСТОЯЩИЙ borneo.css (assets/borneo.css — побайтовая копия
   .claude/skills/borneo/assets/borneo.css): превью клана собрано теми же классами
   (.phone, .screen, .mesh, .glass, .li, .pillbtn, .entrycard), что и экраны
   приложения, и красится теми же переменными почерка. Никакой «картинки-макета».

   Поэтому собственные классы конфигуратора начинаются с c- : ни одного имени из
   дизайн-системы они не перекрывают. Что не c-, то живёт по правилам borneo.css.
   =========================================================================== */

/* фон страницы: тот же .mesh, что в приложении, во весь экран */
.c-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.c-bg .mesh{position:absolute;inset:-12%}
.c-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,18,.5),rgba(10,12,18,.34) 35%,rgba(10,12,18,.62))}
.c-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.c-wrap{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:18px 22px 80px}

/* ---------- шапка ---------- */
.c-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0 18px}
.c-top .brandmark{margin-right:auto}
.c-lang{display:flex;gap:2px;padding:3px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.c-lang button,.c-lang a{padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600;
  font-family:var(--font-h,Onest);color:var(--w-3);background:none;border:none;cursor:pointer;
  transition:all .2s ease}
.c-lang button.on,.c-lang a.on{background:rgba(255,255,255,.94);color:#15181F}
.c-btn{padding:7px 14px;border-radius:999px;font-size:12px;font-weight:600;font-family:var(--font-h,Onest);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--w-2);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.c-btn:hover{color:#fff;border-color:rgba(255,255,255,.34)}
.c-proto{font-size:10px;letter-spacing:.1em;text-transform:lowercase;color:var(--w-3);
  border:1px dashed rgba(255,255,255,.3);border-radius:999px;padding:4px 10px}

/* ---------- заголовок и рельс шагов ---------- */
.c-head{margin-bottom:16px}
.c-head h1{font-family:var(--font-h,Onest);font-weight:200;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:-.03em;line-height:1.05;margin:6px 0 0}
.c-head p{font-size:13.5px;color:var(--w-2);margin-top:8px;max-width:64ch}
.c-rail{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px}
.c-chip{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 9px;border-radius:999px;
  font-size:12px;font-family:var(--font-h,Onest);color:var(--w-3);cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);transition:all .2s ease}
.c-chip .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:10px;font-weight:700;background:rgba(255,255,255,.16)}
.c-chip.on{background:rgba(255,255,255,.94);color:#15181F;border-color:transparent}
.c-chip.on .n{background:rgba(21,24,31,.12)}
.c-chip.done .n{background:rgba(255,255,255,.9);color:#15181F}
.c-chip[disabled]{opacity:.45;cursor:default}

/* ---------- шаги ---------- */
.c-step{display:none}
.c-step.on{display:block}
.c-cols{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.c-col{flex:1;min-width:320px}
.c-col.narrow{flex:none;width:302px}
.c-card{position:relative;border-radius:24px;padding:18px 18px;margin-bottom:14px;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}
.c-card>h2{font-family:var(--font-h,Onest);font-weight:600;font-size:13.5px;letter-spacing:-.01em;
  margin:0 0 4px;display:flex;align-items:center;gap:8px}
.c-note{font-size:11px;color:var(--w-3);line-height:1.45;margin-top:8px}
.c-lead{font-size:13.5px;color:var(--w-2);line-height:1.5;margin-bottom:14px;max-width:70ch}

/* карточки заготовок (шаг 1) */
.c-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.c-preset{text-align:left;padding:15px 16px;border-radius:20px;cursor:pointer;width:100%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);transition:all .2s ease}
.c-preset:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.34)}
.c-preset.on{background:rgba(255,255,255,.16);border-color:color-mix(in srgb,var(--accent,#FFC36B) 60%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent,#FFC36B) 24%,transparent)}
.c-preset .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;margin-bottom:10px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24)}
.c-preset .t{font-family:var(--font-h,Onest);font-weight:600;font-size:13.5px}
.c-preset .s{font-size:11px;color:var(--w-2);margin-top:5px;line-height:1.45}
.c-preset .f{font-size:10.5px;color:var(--w-3);margin-top:7px;line-height:1.4}
.c-preset .tag{display:inline-block;margin-top:9px;font-size:9.5px;letter-spacing:.08em;
  text-transform:lowercase;color:var(--w-3)}

/* разговор (шаг 2) */
.c-q{margin-bottom:12px}
.c-q .qt{font-family:var(--font-h,Onest);font-weight:600;font-size:13.5px;line-height:1.35}
.c-q .qn{font-size:10px;color:var(--w-3);letter-spacing:.13em;text-transform:lowercase}
.c-opts{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.c-opt{text-align:left;padding:11px 14px;border-radius:16px;font-size:12.5px;cursor:pointer;
  color:var(--w-2);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:all .18s ease}
.c-opt:hover{border-color:rgba(255,255,255,.34);color:#fff}
.c-opt.on{background:rgba(255,255,255,.92);color:#15181F;border-color:transparent;font-weight:600}
.c-why{font-size:11.5px;color:var(--w-2);line-height:1.5}
.c-why li{margin-bottom:6px}
.c-why code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:#fff}

/* правки (шаг 4) */
.c-pals{display:flex;gap:8px;flex-wrap:wrap}
.c-pal{display:flex;align-items:center;gap:8px;padding:8px 13px 8px 8px;border-radius:999px;cursor:pointer;
  font-size:12px;font-family:var(--font-h,Onest);color:var(--w-2);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);transition:all .2s ease}
.c-pal .sp{display:flex;gap:3px}
.c-pal .sp i{width:9px;height:9px;border-radius:50%;display:block}
.c-pal.on{background:rgba(255,255,255,.94);color:#15181F;border-color:transparent}
.c-motifs{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:7px}
.c-motif{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:var(--w-2);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);transition:all .18s ease}
.c-motif:hover{color:#fff;border-color:rgba(255,255,255,.34)}
.c-motif.on{background:rgba(255,255,255,.94);color:#15181F;border-color:transparent}
.c-blocks{display:flex;flex-direction:column;gap:7px}
.c-block{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.c-block .bt{font-family:var(--font-h,Onest);font-weight:600;font-size:12px}
.c-block .bs{font-size:10px;color:var(--w-3);margin-top:1px}
.c-block .arrows{margin-left:auto;display:flex;gap:5px;flex:none}
.c-mini{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;cursor:pointer;
  color:var(--w-2);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.c-mini:hover{color:#fff}
.c-mini[disabled]{opacity:.3;cursor:default}
.c-block.off{opacity:.5}
/* Тумблеры — настоящие <button> (находка 163 №2: из <div phx-click> их нельзя было
   ни сфокусировать, ни переключить с клавиатуры). Отсюда сброс вида кнопки: своего
   `button{...}` на этой странице нет — site.css сюда не подключается, — и без сброса
   строка получила бы серую подложку, рамку и шрифт браузера. */
.c-switch{display:flex;align-items:center;gap:10px;padding:9px 0;width:100%;text-align:left;
  font:inherit;color:inherit;background:none;border:none;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.13)}
.c-switch:last-child{border-bottom:none}
.c-switch .tx{flex:1;min-width:0}
/* .tx блокифицируется как флекс-элемент сама, а её дети — нет: внутри кнопки они
   теперь <span>, и без display:block обе строки склеились бы в одну. */
.c-switch .st{display:block;font-family:var(--font-h,Onest);font-weight:600;font-size:12px}
.c-switch .ss{display:block;font-size:10px;color:var(--w-3);margin-top:1px}
.c-switch .sw{cursor:pointer}
/* Сам рычажок в списке блоков — тоже кнопка. Вид ему задаёт .sw из borneo.css,
   здесь только то, что кнопка приносит своего. */
button.sw{padding:0;font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
/* Фокус виден. До этой правки фокусировать здесь было нечего, поэтому и кольца
   не было ни у одного контрола шага 4. */
.c-switch:focus-visible,button.sw:focus-visible,.c-mini:focus-visible,.c-motif:focus-visible,
.c-preset:focus-visible,.c-opt:focus-visible,.c-chip:focus-visible{
  outline:2px solid var(--accent,#FFC36B);outline-offset:2px}
.c-field{margin-bottom:11px}
.c-field label{display:block;font-size:11px;color:var(--w-3);margin-bottom:5px}
.c-field input,.c-field textarea,.c-field select{width:100%;padding:10px 13px;border-radius:14px;
  font:inherit;font-size:12.5px;color:#fff;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);outline:none}
.c-field textarea{min-height:64px;resize:vertical}
.c-field input:focus,.c-field textarea:focus,.c-field select:focus{border-color:rgba(255,255,255,.45)}
.c-field select option{background:#15181F}
.c-field .cnt{font-size:10px;color:var(--w-3);margin-top:4px;text-align:right}
.c-field .cnt.over{color:#FFB3AE}
.c-row2{display:flex;gap:10px}
.c-row2>*{flex:1}
.c-radio{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);margin-bottom:8px}
.c-radio.on{border-color:color-mix(in srgb,var(--accent,#FFC36B) 60%,transparent);background:rgba(255,255,255,.12)}
.c-radio .rt{font-family:var(--font-h,Onest);font-weight:600;font-size:12.5px}
.c-radio .rs{font-size:10.5px;color:var(--w-3);margin-top:2px}

/* превью */
.c-preview{position:sticky;top:18px}
.c-tabs{display:flex;gap:7px;margin-bottom:12px}
.c-tab{padding:7px 13px;border-radius:999px;font-size:11.5px;font-family:var(--font-h,Onest);cursor:pointer;
  color:var(--w-2);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.c-tab.on{background:rgba(255,255,255,.94);color:#15181F;border-color:transparent}

/* итог */
.c-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;color:var(--w-2);max-height:360px;overflow:auto;
  padding:14px;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14)}
.c-cmd{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#fff;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.16);word-break:break-all}
.c-ticket{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.14em;color:#fff}
.c-ok{font-size:12px;color:var(--w-2);display:flex;gap:8px;align-items:flex-start}
.c-ok .dt{width:17px;height:17px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:#15181F;margin-top:1px}
.c-bad{color:#FFB3AE;font-size:12px;line-height:1.5}
.c-bad li{margin-bottom:5px}

/* подвал шага */
.c-foot{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.c-foot .c-saved{font-size:10.5px;color:var(--w-3);margin-left:auto}
.c-next{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);color:#15181F;
  border-radius:999px;padding:12px 16px 12px 22px;font-size:13px;font-weight:600;
  font-family:var(--font-h,Onest);cursor:pointer;border:none;transition:transform .15s ease}
.c-next .a{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--accent-btn,#15181F);color:var(--accent-ink,#fff)}
.c-next:hover{transform:translateY(-1px)}
.c-next:active{transform:scale(.98)}
.c-next[disabled]{opacity:.45;cursor:default;transform:none}

@media (max-width:820px){
  .c-col.narrow{width:100%;display:flex;justify-content:center}
  .c-preview{position:static}
}
@media (prefers-reduced-motion: reduce){
  .c-preset,.c-opt,.c-pal,.c-motif,.c-next{transition:none}
}