/* Каталог демо-сайтов «Рабочие сайты».
   Навигация — дерево папок в редакторском стиле: сфера → подсфера → сайт.
   Цвета берутся из переменных темы сайта, каталог переключается вместе с ней. */

@import url('fonts/jetbrains.css');

:root{
  --dc-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ---------- кнопки входа ---------- */
.demos-btn{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  padding:.55rem 1rem;border-radius:10px;border:1px solid var(--accent-color,var(--accent, #c9f24d));
  background:var(--accent-color,var(--accent, #c9f24d));
  color:var(--color-accent-on,var(--accent-ink, #101204));font-weight:650;font-size:.9rem;
  cursor:pointer;transition:filter .18s ease,transform .18s ease}
.demos-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.demos-btn:active{transform:translateY(0)}
.demos-btn:focus-visible{outline:3px solid var(--accent-color,var(--accent, #c9f24d));outline-offset:3px}
.demos-btn__dot{width:8px;height:8px;border-radius:50%;
  background:var(--color-accent-on,var(--accent-ink, #101204));opacity:.55;flex:none;
  box-shadow:0 0 0 0 rgba(126,231,135,.7);animation:demosPulse 2.4s infinite}
@keyframes demosPulse{
  0%{box-shadow:0 0 0 0 rgba(126,231,135,.6)}
  70%{box-shadow:0 0 0 7px rgba(126,231,135,0)}
  100%{box-shadow:0 0 0 0 rgba(126,231,135,0)}}
@media (prefers-reduced-motion:reduce){.demos-btn__dot{animation:none}}

.demos-btn--sidebar{width:100%;justify-content:center;margin-bottom:.6rem}
.demos-btn__short{display:none}
.demos-btn--bar{display:none}
.header-actions{min-width:0}
.demos-btn{max-width:100%}

@media (max-width:768px){
  .header-actions .demos-btn{display:none}
  .demos-btn--bar{display:flex;width:calc(100% - 2rem);margin:.75rem 1rem 0;
    justify-content:center;padding:.7rem 1rem;min-height:44px}
  .demos-btn--bar .demos-btn__short{display:none}
}
@media (max-width:360px){
  .demos-btn--bar .demos-btn__long{display:none}
  .demos-btn--bar .demos-btn__short{display:inline}
  .demos-btn--bar .demos-btn__short::after{content:" студий бьютисферы"}
}

/* ---------- экран ---------- */
.demos-screen{
  position:fixed;inset:0;z-index:1200;display:none;
  background:var(--bg-color,var(--surface-1, #111317));color:var(--text-color,#fff)}
.demos-screen.is-open{display:flex;flex-direction:column}
body.demos-locked{overflow:hidden}

.demos-top{display:flex;align-items:center;gap:.9rem;flex:none;
  padding:.8rem clamp(1rem,3vw,1.6rem);
  border-bottom:1px solid var(--border-color,var(--line, #262a32))}
.demos-top h2{margin:0;font-size:1.05rem;white-space:nowrap}
.demos-path{font-family:'Inter',system-ui,sans-serif;font-size:.85rem;
  display:flex;align-items:center;gap:.15rem;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}
.demos-path::-webkit-scrollbar{display:none}
.demos-path b{color:var(--color-link,var(--accent-hi, #d8ff62));font-weight:500;white-space:nowrap;padding:.2rem .35rem}
.dc-sep{opacity:.35;flex:none}
.dc-crumb{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;
  opacity:.62;padding:.2rem .35rem;border-radius:5px;white-space:nowrap;flex:none}
.dc-crumb:hover{opacity:1;color:var(--color-link,var(--accent-hi, #d8ff62));background:rgba(127,127,127,.12)}
.dc-crumb:focus-visible{outline:2px solid var(--accent-color,var(--accent, #c9f24d));outline-offset:1px;opacity:1}
.demos-close{width:40px;height:40px;flex:none;border-radius:9px;
  border:1px solid var(--border-color,var(--line, #262a32));background:transparent;
  color:inherit;font-size:1.1rem;cursor:pointer}
.demos-close:hover{border-color:var(--accent-color,var(--accent, #c9f24d));color:var(--color-link,var(--accent-hi, #d8ff62))}
.demos-close:focus-visible{outline:3px solid var(--accent-color,var(--accent, #c9f24d));outline-offset:2px}

.demos-main{flex:1;display:grid;grid-template-columns:minmax(300px,380px) 1fr;
  min-height:0;overflow:hidden}

/* ============ ДЕРЕВО ============ */
.demos-tree{
  overflow-y:auto;overflow-x:hidden;padding:.9rem .6rem 3rem;
  border-right:1px solid var(--border-color,var(--line, #262a32));
  font-family:'Inter',system-ui,sans-serif;font-size:.9rem;line-height:1.5;
  -webkit-overflow-scrolling:touch}

.dc-row{display:flex;align-items:center;gap:.45rem;width:100%;
  padding:.34rem .5rem;border:0;background:transparent;color:inherit;
  font:inherit;text-align:left;cursor:pointer;border-radius:6px;position:relative}
.dc-row:hover{background:rgba(127,127,127,.11)}
.dc-row:focus-visible{outline:2px solid var(--accent-color,var(--accent, #c9f24d));outline-offset:-2px}
.dc-row.is-current{background:color-mix(in srgb,var(--accent-color,var(--accent, #c9f24d)) 20%,transparent)}
.dc-row.is-current .dc-name{color:var(--color-link,var(--accent-hi, #d8ff62))}

/* Направляющие как в файловом дереве: вертикаль от родителя + отвод к строке */
.dc-level{position:relative}
.dc-level::before{content:"";position:absolute;left:calc(var(--ind) * 1ch + 1.05rem);
  top:0;bottom:.5rem;width:1px;background:var(--border-color,var(--line, #262a32));opacity:.75}
.dc-row[data-leaf]::before{content:"";position:absolute;
  left:calc(var(--ind) * 1ch + .35rem);top:50%;width:.62rem;height:1px;
  background:var(--border-color,var(--line, #262a32));opacity:.75}

.dc-chev{width:1ch;flex:none;opacity:.7;transition:transform .18s ease;display:inline-block}
.dc-open > .dc-row .dc-chev{transform:rotate(90deg)}
.dc-ico{flex:none;width:16px;height:16px;opacity:.95}
.dc-ico--folder{color:var(--color-link,var(--accent-hi, #d8ff62))}
.dc-ico--file{color:var(--text-2, #a5abb6)}
.dc-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-dim{opacity:.45}
.dc-count{margin-left:auto;flex:none;font-size:.76rem;opacity:.5;
  padding-left:.6rem;font-variant-numeric:tabular-nums}
.dc-swatch{width:9px;height:9px;border-radius:2px;flex:none;margin-left:auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.dc-kids{display:none}
.dc-open > .dc-kids{display:block}

/* ============ СЕТКА ПРЕДПРОСМОТРА НИШИ ============ */
.dc-gridwrap{max-width:1180px;margin:0 auto}
.dc-gridhead{margin-bottom:1.1rem}
.dc-gridhead h3{margin:0 0 .25rem;font-size:1.3rem}
.dc-gridhead p{margin:0;opacity:.6;font-size:.9rem;line-height:1.55;max-width:64ch}

.dc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1rem}
.dc-tile{display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer;
  border:1px solid var(--border-color,var(--line, #262a32));border-radius:13px;overflow:hidden;
  background:var(--secondary-bg,var(--surface-2, #171a1f));color:inherit;font:inherit;
  transition:border-color .18s ease,transform .18s ease}
.dc-tile:hover{border-color:var(--accent-color,var(--accent, #c9f24d));transform:translateY(-2px)}
.dc-tile:focus-visible{outline:3px solid var(--accent-color,var(--accent, #c9f24d));outline-offset:2px}
.dc-tile__shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg, #0b0c0e);
  border-bottom:1px solid var(--border-color,var(--line, #262a32))}
.dc-tile__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.dc-tile__shot img.is-failed{display:grid;place-content:center;
  background:repeating-linear-gradient(45deg,rgba(127,127,127,.08) 0 10px,transparent 10px 20px)}
.dc-tile__body{display:flex;flex-direction:column;gap:.28rem;padding:.85rem 1rem 1rem}
.dc-tile__name{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:.45rem}
.dc-tile__name .dc-swatch{margin-left:0;width:10px;height:10px}
.dc-tile__meta{font-family:var(--dc-mono);font-size:.76rem;opacity:.55}
.dc-tile__tag{font-size:.87rem;opacity:.82;line-height:1.45}

.dc-skel-card{border-radius:13px;height:270px;
  background:linear-gradient(90deg,rgba(127,127,127,.09),rgba(127,127,127,.2),rgba(127,127,127,.09));
  background-size:200% 100%;animation:dcShimmer 1.25s linear infinite}
@media (prefers-reduced-motion:reduce){.dc-skel-card{animation:none}}

/* ============ ПРАВАЯ ПАНЕЛЬ ============ */
.demos-detail{overflow-y:auto;padding:clamp(1rem,2.5vw,1.8rem);min-width:0;
  -webkit-overflow-scrolling:touch}
.dc-empty{height:100%;display:grid;place-content:center;text-align:center;
  gap:.6rem;opacity:.55;font-family:'Inter',system-ui,sans-serif;font-size:.92rem;padding:2rem}
.dc-empty svg{margin:0 auto;opacity:.5}

.dc-card{max-width:920px;margin:0 auto}
.dc-shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  border-radius:12px;border:1px solid var(--border-color,var(--line, #262a32));background:var(--bg, #0b0c0e);display:block}
.dc-head{display:flex;align-items:flex-start;gap:1rem;margin:1.1rem 0 .3rem;flex-wrap:wrap}
.dc-title{font-size:1.35rem;font-weight:700;margin:0}
.dc-meta{font-family:var(--dc-mono);font-size:.8rem;opacity:.6;margin:.15rem 0 0}
.dc-tag{margin:.55rem 0 0;opacity:.9}
.dc-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin:1.1rem 0 1.4rem}
.dc-act{padding:.62rem 1.05rem;border-radius:9px;font-size:.88rem;font-weight:600;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  font-family:inherit;border:1px solid var(--border-color,var(--line, #262a32));background:transparent;color:inherit}
.dc-act--primary{background:var(--accent-color,var(--accent, #c9f24d));border-color:var(--accent-color,var(--accent, #c9f24d));color:#fff}
.dc-act:hover{border-color:var(--accent-color,var(--accent, #c9f24d))}
.dc-act--primary:hover{filter:brightness(1.08)}
.dc-act:focus-visible{outline:3px solid var(--accent-color,var(--accent, #c9f24d));outline-offset:2px}

.dc-sec{margin-top:1.4rem}
.dc-sec h4{margin:0 0 .5rem;font-family:var(--dc-mono);font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;opacity:.5}
.dc-sec p{margin:.25rem 0;line-height:1.65;opacity:.9}
.dc-sec ul{margin:.3rem 0;padding-left:1.15rem;line-height:1.65}
.dc-sec li{margin-bottom:.28rem;opacity:.9}
.dc-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.dc-chip{padding:.24rem .62rem;border-radius:999px;font-size:.78rem;
  border:1px solid var(--border-color,var(--line, #262a32));opacity:.88}
.dc-kv{font-family:var(--dc-mono);font-size:.82rem;display:grid;
  grid-template-columns:auto 1fr;gap:.3rem .9rem;line-height:1.7}
.dc-kv dt{opacity:.5}
.dc-kv dd{margin:0;overflow-wrap:anywhere}

/* ---------- загрузка ---------- */
.dc-skel{padding:.9rem .6rem}
.dc-skel-row{height:1.55rem;border-radius:6px;margin-bottom:.45rem;
  background:linear-gradient(90deg,rgba(127,127,127,.09),rgba(127,127,127,.2),rgba(127,127,127,.09));
  background-size:200% 100%;animation:dcShimmer 1.25s linear infinite}
@keyframes dcShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.dc-skel-row{animation:none}}

/* ---------- ошибка ---------- */
.dc-error{margin:auto;max-width:30rem;padding:2rem 1.2rem;text-align:center;
  display:grid;gap:.7rem;justify-items:center}
.dc-error svg{opacity:.65}
.dc-error b{font-size:1.05rem}
.dc-error p{margin:0;opacity:.7;line-height:1.6;font-size:.92rem}
.dc-error code{font-family:var(--dc-mono);font-size:.78rem;opacity:.55;
  background:rgba(127,127,127,.12);padding:.15rem .4rem;border-radius:4px;
  overflow-wrap:anywhere}

/* Заглушка вместо битой картинки — вместо иконки сломанного файла */
.dc-shot.is-failed{display:grid;place-content:center;aspect-ratio:16/10;
  background:repeating-linear-gradient(45deg,rgba(127,127,127,.07) 0 12px,transparent 12px 24px);
  font-family:var(--dc-mono);font-size:.78rem;opacity:.6;text-align:center;padding:1rem}

/* ---------- кнопка «назад» ----------
   Нужна и на десктопе: из карточки сайта она возвращает к сетке ниши. */
.dc-back{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1rem;
  padding:.45rem .8rem;border-radius:8px;cursor:pointer;
  border:1px solid var(--border-color,var(--line, #262a32));background:transparent;color:inherit;
  font-family:var(--dc-mono);font-size:.82rem}
.dc-back:hover{border-color:var(--accent-color,var(--accent, #c9f24d));color:var(--color-link,var(--accent-hi, #d8ff62))}
.dc-back:focus-visible{outline:3px solid var(--accent-color,var(--accent, #c9f24d));outline-offset:2px}

/* ---------- мобильный: дерево на весь экран, деталь поверх ---------- */
@media (max-width:860px){
  .demos-main{grid-template-columns:1fr}
  .demos-tree{border-right:0;padding-bottom:4rem}
  .demos-detail{position:fixed;inset:0;z-index:5;background:var(--bg-color,var(--surface-1, #111317));
    display:none;padding:0}
  .demos-detail.is-shown{display:block}
  .dc-card,.dc-gridwrap{padding:0 1rem 3rem}
  .dc-back{position:sticky;top:0;z-index:2;display:flex;width:100%;margin:0 0 1rem;
    border-radius:0;border:0;border-bottom:1px solid var(--border-color,var(--line, #262a32));
    background:var(--bg-color,var(--surface-1, #111317));padding:.85rem 1rem}
  .dc-grid{grid-template-columns:1fr}
  .demos-top h2{display:none}          /* заголовок уступает место крошкам */
  .demos-path{font-size:.78rem;flex:1}
  .demos-top{gap:.5rem;padding:.7rem .8rem}
}

/* Заголовок оверлея дублировал первую хлебную крошку. Оставляем его для
   озвучивания программой чтения с экрана, но убираем с глаз. */
.demos-top .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;
  padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}