/* ============================================================
   Компактный навигатор папок — 3D Contructions
   ============================================================ */
.folders{
  --fn-ink:#111214;
  --fn-line:#e3e6ea;
  --fn-mute:#6b7280;
  --fn-surface:#ffffff;
  --fn-track:#eef0f3;
  --fn-yellow:#FFD400;
  --fn-green:#17A34A;
  --fn-blue:#1A73E8;
  margin:14px 0 16px;
  padding:0;
  border:3px solid var(--fn-ink);
  border-radius:14px;
  background:
    radial-gradient(circle at 14px 12px, rgba(17,18,20,.045) 2.6px, transparent 3.1px) 0 0/28px 28px,
    linear-gradient(180deg,#ffffff 0%,#fbfaf7 100%);
  box-shadow:0 3px 0 rgba(17,18,20,.9), 0 10px 24px rgba(17,18,20,.06);
  position:relative;
  z-index:20;
}
.folders__bar{
  display:flex; align-items:center; gap:10px;
  padding:7px 9px; min-height:52px;
}
.folders__label{
  display:flex; align-items:center; gap:7px;
  margin:0 2px 0 4px; flex:0 0 auto;
  font:800 10.5px/1 system-ui,"Segoe UI",sans-serif;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--fn-mute);
}
.folders__brick{
  width:16px; height:13px; border:2px solid var(--fn-ink); border-radius:3px;
  background:var(--fn-yellow); position:relative; flex:0 0 auto;
}
.folders__brick::before,.folders__brick::after{
  content:""; position:absolute; top:-5px; width:5px; height:4px;
  border:2px solid var(--fn-ink); border-bottom:0; border-radius:3px 3px 0 0; background:var(--fn-yellow);
}
.folders__brick::before{left:0}
.folders__brick::after{right:0}

/* ---------- лента ---------- */
.folders__railwrap{position:relative; flex:1 1 auto; min-width:0}
.folders__railwrap::before,.folders__railwrap::after{
  content:""; position:absolute; top:0; bottom:0; width:26px; pointer-events:none;
  opacity:0; transition:opacity .18s ease; z-index:2;
}
.folders__railwrap::before{left:0;  background:linear-gradient(90deg,#fff 25%,rgba(255,255,255,0))}
.folders__railwrap::after {right:0; background:linear-gradient(270deg,#fff 25%,rgba(255,255,255,0))}
.folders__railwrap.has-left::before{opacity:1}
.folders__railwrap.has-right::after{opacity:1}

.folders__rail{
  position:relative;
  display:flex; align-items:center; gap:7px;
  overflow-x:auto; overflow-y:hidden;
  padding:4px 2px; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:var(--fn-yellow) var(--fn-track);
}

/* ---------- чип-папка ---------- */
.fn{
  display:inline-flex; align-items:stretch; flex:0 0 auto;
  height:34px; background:var(--fn-surface);
  border:2px solid var(--fn-ink); border-radius:999px;
  transition:box-shadow .16s ease, background-color .16s ease;
}
.fn:hover{box-shadow:0 3px 0 rgba(17,18,20,.85)}
.fn.is-open{background:var(--tint); box-shadow:0 3px 0 var(--fn-ink)}
.fn.is-active{background:var(--tint); box-shadow:inset 0 0 0 2px rgba(17,18,20,.08), 0 3px 0 var(--fn-ink)}
.fn.is-filtered{display:none}

.fn__chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:0 11px; height:100%;
  font:700 13.5px/1 system-ui,"Segoe UI",sans-serif; color:var(--fn-ink);
  text-decoration:none; white-space:nowrap; border-radius:999px;
}
.fn__chip:active{transform:translateY(1px)}
.fn__chip.is-hit{background:rgba(255,212,0,.4)}
.fn__name{max-width:190px; overflow:hidden; text-overflow:ellipsis}
.fn__count{
  font:700 10.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#3f4650; background:var(--fn-track);
  border:1.5px solid rgba(17,18,20,.14); border-radius:6px; padding:3px 5px;
}
.fn.is-active .fn__count{background:#fff; border-color:rgba(17,18,20,.35); color:var(--fn-ink)}

.fn-dot{
  width:11px; height:11px; flex:0 0 auto; border-radius:3px;
  background:var(--c,var(--fn-yellow)); border:1.5px solid var(--fn-ink);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5);
}
.fn-dot--all{background:linear-gradient(135deg,#FFD400 0 50%,#17A34A 50% 100%)}

.fn__caret{
  width:27px; flex:0 0 auto; display:grid; place-items:center;
  border:0; border-left:2px solid var(--fn-ink); border-radius:0 999px 999px 0;
  background:transparent; color:var(--fn-ink); cursor:pointer; padding:0;
  transition:background-color .15s ease;
}
.fn__caret:hover{background:rgba(17,18,20,.08)}
.fn__caret svg{transition:transform .18s cubic-bezier(.2,.9,.3,1.3)}
.fn__caret[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---------- выпадающая панель ---------- */
.fn__panel{
  position:fixed; left:-9999px; top:0; z-index:70;
  min-width:252px; max-width:min(340px,92vw); max-height:min(360px,68vh);
  overflow:auto; overscroll-behavior:contain;
  padding:5px 6px 7px;
  background:var(--fn-surface); border:3px solid var(--fn-ink); border-radius:12px;
  box-shadow:0 18px 40px rgba(17,18,20,.24);
  animation:fn-pop .15s cubic-bezier(.2,.9,.3,1.2);
  scrollbar-width:thin; scrollbar-color:var(--fn-yellow) var(--fn-track);
}
@keyframes fn-pop{from{opacity:0; transform:translateY(-6px) scale(.985)} to{opacity:1; transform:none}}

.fn__panel-head{
  position:sticky; top:-5px; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 6px 7px; margin:-5px -6px 5px;
  background:var(--fn-surface); border-bottom:2px dashed var(--fn-line);
}
.fn__panel-title{display:inline-flex; align-items:center; gap:7px; font:800 12.5px/1.2 system-ui,sans-serif}
.fn__panel-open{
  font:700 11px/1 system-ui,sans-serif; color:var(--fn-ink); text-decoration:none;
  background:var(--fn-yellow); border:2px solid var(--fn-ink); border-radius:999px; padding:4px 8px; white-space:nowrap;
}
.fn__panel-open:hover{background:#ffe45c}

/* ---------- строки дерева ---------- */
.fn-list{list-style:none; margin:0; padding:0}
.fn-branch>.fn-list{margin-left:12px; padding-left:8px; border-left:2px dotted var(--fn-line)}
.fn-item{margin:1px 0}
.fn-item[hidden]{display:none}

.fn-row{
  display:flex; align-items:center; gap:3px;
  min-height:28px; padding-right:5px; border-radius:8px;
  cursor:pointer; list-style:none; transition:background-color .13s ease;
}
.fn-row::-webkit-details-marker{display:none}
.fn-row:hover{background:#f4f6f8}
.fn-row.is-hit{background:rgba(255,212,0,.32)}
.fn-row--leaf{cursor:default}
.fn-item.is-active>.fn-row,
.fn-item.is-active>.fn-branch>.fn-row{background:var(--tint); box-shadow:inset 0 0 0 2px var(--fn-ink)}

.fn-twist{
  width:16px; height:16px; flex:0 0 auto; display:grid; place-items:center;
  color:var(--fn-mute); font-size:9px;
}
.fn-twist::before{content:"▶"; display:block; transition:transform .16s ease}
.fn-branch[open]>.fn-row .fn-twist::before{transform:rotate(90deg)}
.fn-twist--empty::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--fn-line)}

.fn-link{
  display:flex; align-items:center; gap:7px; flex:1 1 auto; min-width:0;
  padding:4px 2px; text-decoration:none; color:var(--fn-ink);
  font:600 13px/1.25 system-ui,"Segoe UI",sans-serif;
}
.fn-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fn-count{
  flex:0 0 auto; font:700 10px/1 ui-monospace,Consolas,monospace; color:#5b6270;
  background:var(--fn-track); border-radius:5px; padding:3px 5px;
}
.fn-item.is-active .fn-count{background:#fff; color:var(--fn-ink)}

/* ---------- инструменты ---------- */
.folders__tools{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.folders__filter{
  display:none; width:158px; height:30px; padding:0 10px;
  border:2px solid var(--fn-ink); border-radius:999px; background:#fff;
  font:600 12.5px/1 system-ui,sans-serif; color:var(--fn-ink);
}
.folders__filter::placeholder{color:#9aa1ab}
.folders__filter:focus{outline:none; box-shadow:0 0 0 3px rgba(26,115,232,.28)}
.fn-tool{
  width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center;
  border:2px solid var(--fn-ink); border-radius:9px; background:#fff; color:var(--fn-ink);
  cursor:pointer; padding:0; transition:background-color .15s ease, box-shadow .15s ease;
}
.fn-tool:hover{background:var(--fn-yellow); box-shadow:0 2px 0 var(--fn-ink)}
.fn-tool:active{transform:translateY(1px); box-shadow:none}
.fn-tool--collapse{display:none}
.fn-tool__i-rail{display:none}
.folders.is-expanded .fn-tool__i-tree{display:none}
.folders.is-expanded .fn-tool__i-rail{display:block}
.folders.is-expanded .fn-tool[aria-pressed="true"]{background:var(--fn-green); color:#fff}

/* ---------- развёрнутый режим ---------- */
.folders.is-expanded .folders__bar{flex-wrap:wrap}
.folders.is-expanded .folders__filter{display:block}
.folders.is-expanded .fn-tool--collapse{display:grid}
.folders.is-expanded .folders__railwrap{flex:1 0 100%; order:3}
.folders.is-expanded .folders__railwrap::before,
.folders.is-expanded .folders__railwrap::after{display:none}
.folders.is-expanded .folders__rail{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:9px; align-items:start; overflow-x:hidden; overflow-y:auto;
  max-height:264px; padding:4px 4px 6px; scroll-behavior:auto;
}
.folders.is-expanded .fn{
  display:block; height:auto; border-radius:11px; background:#fff;
  box-shadow:0 2px 0 rgba(17,18,20,.55); overflow:hidden;
}
.folders.is-expanded .fn.is-active{background:var(--tint)}
.folders.is-expanded .fn__chip{
  width:100%; height:32px; border-radius:0; justify-content:flex-start;
  border-bottom:2px solid var(--fn-ink); background:var(--tint);
}
.folders.is-expanded .fn__caret{display:none}
.folders.is-expanded .fn__panel,
.folders.is-expanded .fn__panel[hidden]{
  display:block !important; position:static !important; left:auto !important; top:auto !important;
  min-width:0; max-width:none; max-height:none; overflow:visible;
  border:0; border-radius:0; box-shadow:none; padding:5px 7px 7px; animation:none; background:transparent;
}
.folders.is-expanded .fn__panel-head{display:none}
.folders.is-expanded .fn--all{display:none}

/* ---------- скроллбары в стиле конструктора ---------- */
.folders__rail::-webkit-scrollbar,
.fn__panel::-webkit-scrollbar{width:10px; height:8px}
.folders__rail::-webkit-scrollbar-track,
.fn__panel::-webkit-scrollbar-track{background:var(--fn-track); border-radius:999px}
.folders__rail::-webkit-scrollbar-thumb,
.fn__panel::-webkit-scrollbar-thumb{
  background:var(--fn-yellow); border:2px solid var(--fn-ink); border-radius:999px;
}
.folders__rail::-webkit-scrollbar-thumb:hover,
.fn__panel::-webkit-scrollbar-thumb:hover{background:var(--fn-green)}
.folders__rail::-webkit-scrollbar-corner,
.fn__panel::-webkit-scrollbar-corner{background:transparent}

/* ---------- фокус ---------- */
.folders a:focus-visible,
.folders button:focus-visible,
.folders summary:focus-visible,
.folders input:focus-visible{outline:3px solid var(--fn-blue); outline-offset:2px; border-radius:8px}

/* ---------- адаптив ---------- */
@media (max-width:860px){
  .folders__label span+*{display:none}
  .fn__name{max-width:130px}
}
@media (max-width:640px){
  .folders{margin:10px 0 12px; border-width:2px; border-radius:12px}
  .folders__bar{padding:6px; gap:6px; min-height:46px}
  .folders__label{display:none}
  .fn{height:31px}
  .fn__chip{font-size:12.5px; padding:0 9px; gap:6px}
  .fn__name{max-width:112px}
  .fn__caret{width:24px}
  .fn-tool{width:30px; height:30px}
  .folders.is-expanded .folders__filter{width:100%; order:2; flex:1 1 100%}
  .folders.is-expanded .folders__rail{grid-template-columns:1fr; max-height:230px}
  .fn__panel{max-width:92vw}
}
@media (prefers-reduced-motion:reduce){
  .folders *,.folders *::before,.folders *::after{animation:none !important; transition:none !important}
  .folders__rail{scroll-behavior:auto}
}