/* Карточка ЖК: пятнадцать вопросов покупателя.

   Светлая бумага, сериф, спокойные цвета — отдельная система от style.css,
   где тёмное стекло и лайм кабинета риэлтора. Держим врозь сознательно:
   иначе однажды поправишь кнопку здесь и сломаешь её там.

   Всё до раздела «дополнено» перенесено из docs/prototype-kartochka.html
   без изменений. */

:root{
  --paper:#F6F7F8; --card:#FFFFFF; --ink:#14181B; --ink2:#69737C; --ink3:#A2AAB1;
  --rule:#E7EBEE; --rule2:#F0F3F5;
  --sea:#1E4D6B; --gold:#A8792A; --moss:#4E8C6A; --clay:#A85A48; --lav:#6B5E8C;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:'Inter Tight',system-ui,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:#D9E6EE}
:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:3px}
.mono{font-family:'JetBrains Mono',monospace}

/* ─── общая шапка ─── */
header{position:sticky;top:0;z-index:60;background:rgba(246,247,248,.88);
  backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--rule)}
.wrap{max-width:1080px;margin:0 auto;padding:0 40px}
@media(max-width:760px){.wrap{padding:0 20px}}
.hrow{display:flex;align-items:center;gap:18px;padding:20px 0 18px}
.brand{font-family:'Instrument Serif',Georgia,serif;font-size:21px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:10px}
.brand button{color:var(--ink3);font-size:14px;display:flex;align-items:center;gap:6px}
.brand button:hover{color:var(--ink)}
.grow{flex:1}
.b{padding:9px 15px;border:1px solid var(--rule);border-radius:8px;background:var(--card);
  font-size:13px;font-weight:500;color:var(--ink2);transition:.15s;white-space:nowrap}
.b:hover{border-color:#CFD6DB;color:var(--ink)}
.b.pri{background:var(--sea);border-color:var(--sea);color:#fff}
.b.pri:hover{background:#194159}
.b.sm{padding:7px 12px;font-size:12.5px}

/* ─── список ЖК ─── */
.lead{padding:54px 0 40px}
.lead h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:46px;
  line-height:1.06;letter-spacing:-.02em;max-width:620px}
@media(max-width:760px){.lead h1{font-size:33px}}
.lead p{margin-top:16px;font-size:16px;color:var(--ink2);max-width:530px;line-height:1.55}
.lead .row{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;
  padding-bottom:90px}
.jk{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:22px;
  cursor:pointer;transition:.18s;display:flex;flex-direction:column;gap:16px}
.jk:hover{border-color:#CFD9E0;transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(20,24,27,.05)}
.jk h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:24px;
  line-height:1.15;letter-spacing:-.012em}
.jk .sub{font-size:12px;color:var(--ink3);margin-top:5px}
.jk .ticks{display:flex;gap:2px;height:3px}
.jk .ticks i{flex:1;border-radius:2px;background:var(--rule2)}
.jk .ticks i.part{background:#DFC98A}
.jk .ticks i.full{background:var(--moss)}
.jk .foot{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--ink3)}
.jk .foot b{color:var(--ink);font-weight:600}
.jk .del{align-self:flex-start;font-size:12px;color:var(--ink3);opacity:0;transition:.15s}
.jk:hover .del{opacity:1}
.jk .del:hover{color:var(--clay)}
.add{border:1px dashed #D5DCE1;border-radius:14px;padding:22px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:168px;
  color:var(--ink3);transition:.18s;cursor:pointer}
.add:hover{border-color:var(--sea);color:var(--sea);background:#FBFCFD}
.add span{font-size:14px;font-weight:500}
.empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--ink3);
  font-family:'Instrument Serif',Georgia,serif;font-size:22px}

/* ─── карточка ─── */
.title{flex:1;min-width:0}
.title input{width:100%;background:none;border:0;outline:0;padding:0;
  font-family:'Instrument Serif',Georgia,serif;font-size:30px;line-height:1.06;
  letter-spacing:-.015em;color:var(--ink)}
.title input::placeholder{color:#C7CED3}
.meta{margin-top:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.scale{display:flex;gap:3px;padding-bottom:14px}
.tick{flex:1;height:3px;border-radius:2px;background:var(--rule);transition:background .3s}
.tick.part{background:#DFC98A}
.tick.full{background:var(--moss)}
.slabel{display:flex;justify-content:space-between;align-items:center;font-size:11px;
  color:var(--ink3);padding-bottom:14px;margin-top:-6px;gap:14px;flex-wrap:wrap}
.slabel b{color:var(--ink);font-weight:600}
.toggles{display:flex;gap:8px;align-items:center}
.tg{font-size:11.5px;color:var(--ink3);display:flex;align-items:center;gap:6px;cursor:pointer}
.tg i{width:30px;height:17px;border-radius:9px;background:#DFE5E9;position:relative;transition:.2s}
.tg i:after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.tg.on i{background:var(--sea)}
.tg.on i:after{transform:translateX(13px)}

main{max-width:1080px;margin:0 auto;padding:0 40px 140px}
@media(max-width:760px){main{padding:0 20px 140px}}
.intro{padding:40px 0 30px;border-bottom:1px solid var(--rule)}
.intro p{font-family:'Instrument Serif',Georgia,serif;font-size:22px;line-height:1.42;
  color:var(--ink2);max-width:640px}
.intro p em{font-style:italic;color:var(--ink)}

.q{border-bottom:1px solid var(--rule)}
.qh{display:grid;grid-template-columns:56px 1fr auto;gap:22px;align-items:start;padding:28px 0;
  cursor:pointer}
@media(max-width:760px){.qh{grid-template-columns:34px 1fr auto;gap:13px;padding:22px 0}}
.qn{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3);padding-top:10px}
.qt h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:27px;line-height:1.2;
  letter-spacing:-.015em}
@media(max-width:760px){.qt h2{font-size:21px}}
.qt .note{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--ink2);max-width:560px}
.qst{display:flex;align-items:center;gap:13px;padding-top:11px}
.qst .n{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink3)}
.qst .n.done{color:var(--moss)}
.chev{color:#C4CBD1;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.q.open .chev{transform:rotate(90deg)}
.qb{display:none;padding-bottom:20px}
.q.open .qb{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

.f{display:grid;grid-template-columns:56px 1fr 300px;gap:22px;padding:19px 0;
  border-top:1px solid var(--rule2);align-items:start}
@media(max-width:900px){.f{grid-template-columns:56px 1fr;gap:15px}}
@media(max-width:760px){.f{grid-template-columns:34px 1fr;gap:13px;padding:16px 0}}
.f.hidden{display:none}
.fname{font-size:14.5px;font-weight:600;letter-spacing:-.005em;line-height:1.35;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.req{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.04em;color:var(--gold);
  border:1px solid #E8DCC0;border-radius:4px;padding:2px 5px;flex:none}
.say{margin-top:11px;padding-left:15px;border-left:2px solid #DCE4E9;
  font-family:'Instrument Serif',Georgia,serif;font-size:18px;line-height:1.4;color:var(--sea)}
.say small{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.how{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--ink2);max-width:520px}
.origin{margin-top:11px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink3)}
.origin .d{width:5px;height:5px;border-radius:50%;flex:none}
.origin .then{color:#C4CBD1}
.fc{min-width:0}
@media(max-width:900px){.fc{grid-column:2}}
.in{width:100%;background:var(--card);border:1px solid var(--rule);border-radius:9px;
  padding:11px 13px;outline:0;font-size:14.5px;transition:.15s}
.in:hover{border-color:#D8DEE3}
.in:focus{border-color:var(--sea);box-shadow:0 0 0 3px rgba(30,77,107,.09)}
textarea.in{min-height:74px;resize:vertical;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:8px 13px;border:1px solid var(--rule);border-radius:20px;background:var(--card);
  font-size:13px;color:var(--ink2);transition:.15s}
.chip:hover{border-color:#CBD3D9;color:var(--ink)}
.chip.on{background:var(--sea);border-color:var(--sea);color:#fff;font-weight:500}
.auto{border:1px dashed var(--rule);border-radius:9px;padding:11px 13px;
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink3);background:#FBFCFC}
.auto.has{border-style:solid;border-color:#CFE0EA;background:#F4F9FC;color:var(--sea)}
.auto span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);margin-top:5px}
.skip{margin-top:9px;font-size:12px;color:var(--ink3)}
.skip button{color:var(--clay);border-bottom:1px solid #E4CFC9;padding-bottom:1px}
.refused{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--clay);
  border:1px solid #EBD9D4;border-radius:8px;padding:10px 13px;background:#FDF8F7}
.refused button{margin-left:8px;color:var(--ink3);text-decoration:underline}

/* панель задач */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(20,24,27,.28);opacity:0;
  pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:fixed;right:0;top:0;bottom:0;z-index:90;width:min(440px,94vw);background:var(--card);
  border-left:1px solid var(--rule);transform:translateX(101%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column}
.panel.on{transform:none}
.ph{padding:26px 30px 20px;border-bottom:1px solid var(--rule);display:flex;
  align-items:baseline;justify-content:space-between;gap:16px}
.ph h3{font-family:'Instrument Serif',Georgia,serif;font-size:26px;font-weight:400}
.ph button{font-size:13px;color:var(--ink3)}
.pb{flex:1;overflow-y:auto;padding:24px 30px 40px}
.grp{margin-bottom:32px}
.grp h4{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.grp h4 .d{width:6px;height:6px;border-radius:50%}
.grp .ld{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-bottom:14px;max-width:340px}
.item{padding:13px 0;border-top:1px solid var(--rule2);font-size:14px;line-height:1.45}
.item:first-of-type{border-top:1px solid var(--rule)}
.item .src{font-size:11.5px;color:var(--ink3);margin-top:4px}
.item .rq{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--gold);margin-left:6px}
.mail{margin-top:16px;padding:18px;border:1px solid var(--rule);border-radius:12px;background:#FBFCFD;
  font-size:13.5px;line-height:1.6;white-space:pre-wrap;color:var(--ink2)}
.done-all{text-align:center;padding:60px 20px;color:var(--ink3);
  font-family:'Instrument Serif',Georgia,serif;font-size:22px}

.fab{position:fixed;right:32px;bottom:32px;z-index:70;display:flex;align-items:center;gap:11px;
  padding:14px 20px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;font-weight:500;
  box-shadow:0 4px 18px rgba(20,24,27,.16);transition:.2s}
.fab:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(20,24,27,.2)}
.fab .c{font-family:'JetBrains Mono',monospace;font-size:12px;background:rgba(255,255,255,.16);
  border-radius:6px;padding:2px 7px}
@media(max-width:760px){.fab{right:20px;bottom:20px}}
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(10px);bottom:30px;z-index:200;
  background:var(--ink);color:#fff;border-radius:10px;padding:12px 20px;font-size:13.5px;
  opacity:0;transition:.25s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ─── дополнено: чего в прототипе не было ─── */

/* Прототип хранил всё в браузере и о неудачном сохранении не знал.
   Здесь данные уходят на сервер, и менеджер работает из отдела продаж,
   где связь пропадает. Поле, которое не сохранилось, обязано выглядеть
   не сохранившимся, иначе человек уйдёт с экрана уверенным, что записал. */
.f.saving .fc{opacity:.55;transition:opacity .15s}
.f.failed .in,.f.failed .chips{outline:2px solid var(--clay);outline-offset:3px;border-radius:9px}
.retry{margin-top:9px;font-size:12px;color:var(--clay);display:flex;align-items:center;gap:8px}
.retry button{color:var(--clay);border-bottom:1px solid #E4CFC9;padding-bottom:1px;font-weight:500}
.toast.bad{background:var(--clay)}

/* Кто вписал ответ. Менеджеров будет больше одного, и через месяц
   «откуда это взялось» — первый вопрос к любой цифре. */
.by{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.04em;color:var(--ink3)}

/* Три режима вместо двух переключателей прототипа. */
.modes{display:flex;gap:2px;background:#EDF0F2;border-radius:8px;padding:2px}
.modes button{font-size:11.5px;padding:5px 10px;border-radius:6px;color:var(--ink2);
  white-space:nowrap;transition:.15s}
.modes button.on{background:var(--card);color:var(--ink);font-weight:600;
  box-shadow:0 1px 2px rgba(20,24,27,.07)}
.q.empty-mode{display:none}

/* Форма входа на списке — своя, чтобы не тащить сюда тёмный login.html. */
.newjk{display:flex;gap:8px;flex-wrap:wrap}
.newjk input{background:var(--card);border:1px solid var(--rule);border-radius:8px;
  padding:9px 13px;outline:0;font-size:14px;min-width:240px}
.newjk input:focus{border-color:var(--sea);box-shadow:0 0 0 3px rgba(30,77,107,.09)}

/* Пустое поле в режиме «только проверенное» прячем целиком. */
.f.mode-out{display:none}

/* Плитка ЖК — ссылка, а не div с обработчиком: по ней должно работать
   «открыть в новой вкладке». Но синевы и подчёркивания от ссылки ей
   не нужно — это карточка, а не строка текста. */
a.jk,a.jk:visited{text-decoration:none;color:var(--ink)}
a.jk h3{color:var(--ink)}
header a.b{text-decoration:none;display:inline-block}

/* Вход в карточку. Отдельный экран, потому что общая форма входа — это
   список демо-имён, а боевую учётку в такой список пускать нельзя. */
.signin{max-width:340px;margin:0 auto;padding:70px 0 120px}
.signin h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:38px;
  letter-spacing:-.02em;margin-bottom:22px}
.signin form{display:flex;flex-direction:column;gap:7px}
.signin label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);margin-top:12px}
.signin .b{margin-top:22px;text-align:center;padding:12px}
.signin .err{background:#FDF8F7;border:1px solid #EBD9D4;color:var(--clay);
  border-radius:9px;padding:11px 14px;font-size:13.5px;margin-bottom:6px}

/* ─── телефон ───
   Прототип рисовался на широком экране, а менеджер работает в отделе
   продаж с телефона в руке. Здесь то, что на 390 не помещалось:
   переключатель режимов уезжал за правый край, а название ЖК
   наезжало на «Выйти». */
@media(max-width:760px){
  .hrow{gap:12px;padding:16px 0 14px;align-items:flex-start}
  .title input{font-size:23px}
  .meta{font-size:10px;line-height:1.35}
  .brand button{padding-top:5px}

  /* Строка под полоской перестраивается в три этажа: подпись, режимы,
     тумблер. В одну линию они помещаются только на большом экране. */
  .slabel{flex-direction:column;align-items:stretch;gap:11px}
  .toggles{flex-direction:column;align-items:flex-start;gap:11px;width:100%}
  .modes{width:100%;overflow-x:auto;scrollbar-width:none}
  .modes::-webkit-scrollbar{display:none}
  .modes button{flex:none}

  /* Кнопка задач висит поверх содержимого, поэтому под последним полем
     нужен запас — иначе до него не добраться. */
  main{padding-bottom:180px}
}

/* ─── подключение фида ───
   Превью до записи: менеджер видит, что подключает, а не узнаёт
   постфактум. Цифры крупно — по ним и решают. */
.preview{max-width:640px;padding-bottom:90px}
.preview h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:30px;
  letter-spacing:-.015em}
.preview .sub{font-size:12px;color:var(--ink3);margin-top:5px}
.pv-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pv{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:14px 18px;min-width:96px}
.pv b{display:block;font-size:22px;font-weight:600;letter-spacing:-.01em}
.pv span{font-size:11.5px;color:var(--ink3)}
.pv-rooms{margin-top:12px;font-size:11.5px;color:var(--ink2)}
.pv-warn{margin-top:14px;padding:11px 14px;border:1px solid #E8DCC0;background:#FDFBF5;
  border-radius:9px;font-size:13px;color:var(--gold);max-width:520px}
.lead .err{background:#FDF8F7;border:1px solid #EBD9D4;color:var(--clay);
  border-radius:9px;padding:11px 14px;font-size:13.5px;margin-top:14px}

/* Подсказка из фида у смешанных полей: менеджер сверяет с ДДУ и пишет
   своё, а фидовая цифра остаётся перед глазами. */
.feedhint{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  color:var(--sea);background:#F4F9FC;border:1px solid #CFE0EA;border-radius:7px;
  padding:6px 10px;display:inline-block}
/* Пояснение в шапке панели задач */
.pl{padding:14px 30px 0;font-size:12.5px;line-height:1.5;color:var(--ink2)}