/* Демо решений: конструктор модулей и рабочие экраны. Цвета - токены warm-site.css. */

.dk-shell{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:28px;align-items:start;margin-bottom:40px}
.dk-constructor{position:sticky;top:20px;background:var(--warm-pale);border-radius:8px;padding:22px}
.dk-constructor .section-label{margin:0 0 10px}
.dk-constructor .section-label+*{margin-bottom:22px}

.dk-presets{display:grid;gap:8px}
.dk-preset{display:grid;gap:2px;text-align:left;padding:11px 13px;background:var(--warm-white);border:1px solid var(--warm-line);border-radius:5px;font:inherit;color:var(--warm-ink);cursor:pointer}
.dk-preset strong{font-weight:600;font-size:15px}
.dk-preset-scale{font-size:12px;color:var(--warm-muted);text-transform:uppercase;letter-spacing:.04em}
.dk-preset[aria-pressed="true"]{border-color:var(--warm-accent);background:#efdbca;color:var(--warm-strong)}
.dk-preset:focus-visible{outline:3px solid var(--warm-accent);outline-offset:2px}

.dk-modules{flex-direction:column}
.dk-modules span{display:flex;justify-content:space-between;gap:10px}
.dk-modules small{color:var(--warm-muted);white-space:nowrap}

.dk-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 8px;padding-top:16px;border-top:1px solid var(--warm-line)}
.dk-total strong{font-size:24px;font-weight:600;color:var(--warm-strong)}
.dk-total span{color:var(--warm-muted);font-size:14px}
.dk-disclaimer{font-size:13px;margin:0 0 16px}
.dk-cta{width:100%;justify-content:center}
.dk-cta[aria-disabled="true"]{opacity:.5;pointer-events:none}

.dk-workspace{min-width:0}
.dk-workspace>h2{margin-top:0}
.dk-panels{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:20px;align-items:start}
.dk-panels>*,.dk-dashboard>*,.dk-shell>*{min-width:0}

.dk-list{display:grid;gap:8px}
.dk-conv{display:grid;gap:6px;text-align:left;padding:12px 14px;background:var(--warm-white);border:1px solid var(--warm-line);border-radius:5px;font:inherit;color:var(--warm-ink);cursor:pointer}
.dk-conv[aria-pressed="true"]{border-color:var(--warm-accent);box-shadow:inset 3px 0 0 var(--warm-accent)}
.dk-conv-top{display:grid;gap:2px}
.dk-conv-top span,.dk-conv-meta{font-size:13px;color:var(--warm-muted)}
.dk-conv-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

.dk-badge{padding:2px 7px;border-radius:10px;font-size:12px;font-weight:600;background:var(--warm-pale);color:var(--warm-ink)}
.dk-badge.is-good{background:#dfe9d8;color:#2f5424}
.dk-badge.is-mid{background:#f3e3c6;color:#6b4a12}
.dk-badge.is-bad{background:#f2d3c8;color:var(--warm-strong)}

.dk-detail{min-width:0;border:1px solid var(--warm-line);border-radius:8px;padding:20px;background:var(--warm-white)}
.dk-detail-head h3{margin:0 0 4px;font-size:20px}
.dk-detail-head .note{margin:0 0 14px}

.dk-processing{padding:8px 0}
.dk-stages{margin:0;padding-left:20px;display:grid;gap:6px}
.dk-stages li{animation:dk-in .3s ease}
@keyframes dk-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.dk-alert{display:grid;gap:2px;margin:0 0 14px;padding:10px 14px;border-left:4px solid var(--warm-accent);background:#f7e1d8;border-radius:4px;font-size:14px}
.dk-alert strong{color:var(--warm-strong)}

.dk-player{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px}
.dk-player .note{flex-basis:100%;margin:0;font-size:12px}
.dk-bar{flex:1;min-width:120px;height:6px;border-radius:3px;background:var(--warm-pale);overflow:hidden}
.dk-bar span{display:block;height:100%;width:0;background:var(--warm-accent);transition:width .3s}

.dk-transcript{position:relative;list-style:none;margin:0 0 16px;padding:0 6px 0 0;max-height:380px;overflow-y:auto;display:grid;gap:10px}
.dk-line{padding:10px 12px;border-radius:6px;background:var(--warm-paper);border:1px solid transparent;transition:border-color .2s,background .2s}
.dk-line.is-manager{background:var(--warm-pale)}
.dk-line.is-playing{border-color:var(--warm-accent);background:#efdbca}
.dk-line p{margin:3px 0 0;font-size:15px;line-height:1.5}
.dk-line-who{font-size:12px;color:var(--warm-muted)}
.dk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dk-tag{font-size:12px;padding:2px 8px;border-radius:10px;background:var(--warm-white);border:1px solid var(--warm-line)}
.dk-tag.is-step{color:#2f5424;border-color:#b9cfae}
.dk-tag.is-objection{color:#6b4a12;border-color:#e0c79a}
.dk-tag.is-alert{color:var(--warm-strong);border-color:var(--warm-soft);background:#f7e1d8}

.dk-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.dk-card{padding:16px;border:1px solid var(--warm-line);border-radius:6px;background:var(--warm-paper)}
.dk-card h4{margin:0 0 10px;font-size:16px}
.dk-card h4:not(:first-child){margin-top:14px}
.dk-card p{margin:0 0 10px;font-size:14px;line-height:1.55}
.dk-card .button{margin-top:6px}

.dk-checklist,.dk-tasks{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:14px}
.dk-checklist .is-missed{color:var(--warm-strong)}
.dk-jump{padding:0;border:0;background:none;font:inherit;color:#2f5424;text-align:left;cursor:pointer;text-decoration:underline dotted}
.dk-tasks li{padding-left:18px;position:relative}
.dk-tasks li:before{content:'□';position:absolute;left:0;color:var(--warm-muted)}

.dk-dashboard{display:grid;gap:16px;margin-top:20px}
.dk-week{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:0;padding:12px 16px;background:var(--warm-pale);border-radius:6px;font-size:14px}
.dk-week span{color:var(--warm-muted)}
.dk-week b{color:var(--warm-strong)}
.dk-dashboard table{width:100%;border-collapse:collapse;font-size:14px}
.dk-dashboard th,.dk-dashboard td{padding:8px 10px;border-bottom:1px solid var(--warm-line);text-align:left}
.dk-bars{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.dk-bars li{display:grid;grid-template-columns:minmax(140px,200px) 1fr 32px;gap:10px;align-items:center}
.dk-bars-track{height:10px;border-radius:5px;background:var(--warm-pale);overflow:hidden}
.dk-bars-fill{display:block;height:100%;background:var(--warm-mid)}
.dk-bars b{text-align:right}

[data-demo-kit]:not(.dk-ready) [data-demo-constructor]{min-height:200px}

@media (max-width:900px){
  .dk-shell{grid-template-columns:1fr}
  .dk-constructor{position:static;order:2}
  .dk-panels{grid-template-columns:1fr}
  .dk-list{grid-auto-flow:column;grid-auto-columns:minmax(220px,78%);overflow-x:auto;padding-bottom:6px}
}
@media (max-width:520px){
  .dk-detail{padding:14px}
  .dk-bars li{grid-template-columns:1fr 32px}
  .dk-bars-track{grid-column:1/-1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){
  .dk-stages li{animation:none}
  .dk-bar span,.dk-line{transition:none}
}