/* ════════════════════════════════════════════════════════════════════════════
   Кабинет психолога: библиотека тестов, конструктор, приглашения, разбор.
   Дополняет app.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── карточки тестов ───────────────────────────────────────────────────── */
.tests{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.tcd{--tint:transparent;text-align:left;border-radius:6px;position:relative;
  display:flex;flex-direction:column;
  background:color-mix(in srgb, var(--tint) 9%, color-mix(in srgb, var(--plate) 86%, transparent));
  border:1px solid color-mix(in srgb, var(--tint) 24%, var(--hair));
  backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 1px 0 var(--plate-lip), 0 12px 26px -20px var(--shadow)}
.tcd:hover{border-color:color-mix(in srgb, var(--signal) 38%, var(--hair))}
.tcd.pub{--tint:var(--live)}
.tcd.draft{--tint:var(--warn)}
.tcd-h{display:flex;align-items:center;gap:9px;padding:12px 14px;
  border-bottom:1px solid color-mix(in srgb, var(--tint) 22%, var(--hair))}
.tcd-h b{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25}
.tcd-b{padding:13px 14px;flex:1}
.tcd-b p{margin:0;font-size:13px;opacity:.62;line-height:1.5}
.tcd-f{display:flex;align-items:center;gap:8px;padding:10px 14px;flex-wrap:wrap;
  border-top:1px solid color-mix(in srgb, var(--tint) 22%, var(--hair));
  font-family:var(--mono);font-size:11px;opacity:.6}
.tcd-f span::after{content:"·";margin-left:8px;opacity:.5}
.tcd-f span:last-child::after{content:""}

/* ── конструктор вопросов ──────────────────────────────────────────────── */
.qs{list-style:none;margin:0;padding:0;counter-reset:q}
.qs li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid color-mix(in srgb,var(--hair) 34%,transparent)}
.qs li:last-child{border:0}
.qs li::before{counter-increment:q;content:counter(q);font-family:var(--mono);font-size:11.5px;
  opacity:.4;flex:0 0 18px;padding-top:2px}
.qs .qt{flex:1;font-size:14px;line-height:1.45}
.qs .qm{display:flex;gap:6px;flex:0 0 auto;align-items:center}
.dom{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:3px 7px;
  border-radius:3px;border:1px solid color-mix(in srgb,var(--live) 34%,var(--hair));
  color:var(--live);white-space:nowrap}
.rev{font-family:var(--mono);font-size:10.5px;padding:3px 7px;border-radius:3px;
  border:1px solid color-mix(in srgb,var(--signal) 34%,var(--hair));color:var(--signal)}
.qdel{opacity:.35;font-size:17px;line-height:1;padding:0 3px;background:none;border:0;
  color:inherit;cursor:pointer}
.qdel:hover{opacity:.9;color:var(--signal)}

.qnew{display:grid;gap:9px;margin-top:14px;padding:14px;border-radius:5px;
  border:1px dashed var(--hair);background:color-mix(in srgb,var(--plate) 45%,transparent)}
.qnew textarea,.qnew input{width:100%;padding:11px;border-radius:4px;border:1px solid var(--hair);
  background:var(--plate);color:inherit;font:inherit;font-size:14px;resize:vertical}
.qnew textarea:focus,.qnew input:focus{outline:none;border-color:var(--signal)}
.qnew .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qnew .row .tag{margin:0}
.seg{display:flex;gap:5px;flex-wrap:wrap}
.seg button{font-family:var(--mono);font-size:12.5px;padding:7px 11px;border-radius:4px;
  border:1px solid var(--hair);background:color-mix(in srgb,var(--plate) 55%,transparent);
  color:inherit;cursor:pointer}
.seg button.on{border-color:var(--signal);color:var(--signal)}

/* проверка публикуемости */
.gate{list-style:none;margin:13px 0 0;padding:0;font-size:13.5px}
.gate li{display:flex;gap:9px;align-items:flex-start;padding:5px 0}
.gate li i{font-style:normal;flex:0 0 15px;text-align:center;font-size:13px}
.gate li.ok i{color:var(--live)}
.gate li.no i{color:var(--warn)}
.gate li.no{opacity:.9}
.gate li.ok{opacity:.55}

/* ── приглашения ───────────────────────────────────────────────────────── */
.inv-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:12px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--hair) 42%,transparent)}
.inv-row:last-child{border:0}
.inv-row .who b{font-family:var(--display);font-weight:600;font-size:14.5px;display:block}
.inv-row .who span{font-size:12.5px;opacity:.55}
.inv-row .lnk{font-family:var(--mono);font-size:11.5px;opacity:.45;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.inv-row .rt{margin-left:auto;text-align:right;flex:0 0 auto}
.inv-row .rt span{font-size:11px;opacity:.5;display:block;margin-top:2px}

/* ── результат: шкалы доменов ──────────────────────────────────────────── */
.scales{list-style:none;margin:0;padding:0}
.scales li{padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--hair) 30%,transparent)}
.scales li:last-child{border:0}
.scales .sh{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.scales .sh b{font-family:var(--display);font-weight:600;font-size:14.5px}
.scales .sh em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:14px}
.bar{position:relative;height:7px;border-radius:4px;background:var(--recess);overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;left:0;border-radius:4px;background:var(--live)}
.bar i.mid{background:var(--warn)}
.bar i.low{background:var(--signal)}
.bar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.34}
.scales .sd{margin:7px 0 0;font-size:12.5px;opacity:.6;line-height:1.45}
.delta{font-family:var(--mono);font-size:11.5px;padding:2px 6px;border-radius:3px;margin-left:8px}
.delta.up{color:var(--live);border:1px solid color-mix(in srgb,var(--live) 34%,var(--hair))}
.delta.dn{color:var(--signal);border:1px solid color-mix(in srgb,var(--signal) 34%,var(--hair))}

/* ── доверие к попытке ─────────────────────────────────────────────────── */
.trust{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.dial{position:relative;width:56px;height:56px;flex:0 0 56px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:14px}
.dial::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p) * 1%), var(--recess) 0)}
.dial::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--plate)}
.dial span{position:relative;z-index:1}
.flags{list-style:none;margin:0;padding:0;font-size:13px}
.flags li{display:flex;gap:9px;padding:5px 0;align-items:flex-start}
.flags li i{font-style:normal;color:var(--warn);flex:0 0 14px}
.flags li span{opacity:.62;font-size:12.5px}

/* ── клиенты ───────────────────────────────────────────────────────────── */
.cls{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:13px}
.tries{list-style:none;margin:10px 0 0;padding:0;font-size:13px}
.tries li{display:flex;gap:9px;align-items:center;padding:5px 0;
  border-bottom:1px solid color-mix(in srgb,var(--hair) 28%,transparent)}
.tries li:last-child{border:0}
.tries li span{opacity:.5;font-family:var(--mono);font-size:11.5px;flex:0 0 58px}
.tries li em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:12.5px;opacity:.6}