/* Mobile Category Bar — Tree (lite ≤1024px) */

/* Tokens */
:root{
  --catbar-mobile-z: 4005;
  --sheet-radius: 14px;
  --sheet-shadow: 0 8px 20px rgba(0,0,0,.10);
  --hit-min: 44px;

  --ink: #0b1320;
  --bg:  #fff;
  --bd:  rgba(0,0,0,.12);
  --sep: rgba(0,0,0,.06);

  /* Poziomy */
  --rail1: #2f6dff; --bg1: #eef3ff;
  --rail2: #1ea672; --bg2: #e9f7f1;
  --rail3: #f08a00; --bg3: #fff4e8;
  --rail4: #8752d3; --bg4: #f5efff;

  --focus: color-mix(in oklab, var(--rail1) 55%, white);
}

/* Mobile only */
@media (max-width:1024px){
  .tuto-catbar__viewport{ display:none !important; }
}
@media (min-width:1025px){
  .tuto-catbar-mobile-btn, #tuto-catbar-sheet{ display:none !important; }
}

/* Button */
.tuto-catbar-mobile-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:var(--hit-min); padding:.5rem .9rem;
  border-radius:999px; border:1px solid var(--bd);
  background: var(--bg); color:var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.tuto-catbar-mobile-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tuto-catbar-mobile-btn__icon{ width:20px; text-align:center; }

/* Sheet */
.tuto-catbar-sheet[hidden]{ display:none; }
.tuto-catbar-sheet{ position:fixed; inset:0; z-index:var(--catbar-mobile-z); }
.tuto-catbar-sheet__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.24); opacity:0; transition:opacity .16s ease; }
.tuto-catbar-sheet__panel{
  position:absolute; left:0; right:0; bottom:0; max-height:100dvh;
  background:var(--bg); border-radius:var(--sheet-radius) var(--sheet-radius) 0 0; box-shadow:var(--sheet-shadow);
  transform:translateY(8%); opacity:.98; transition:transform .2s ease, opacity .2s ease;
  display:flex; flex-direction:column; padding-bottom: env(safe-area-inset-bottom);
}
.tuto-catbar-sheet.is-open .tuto-catbar-sheet__overlay{ opacity:1; }
.tuto-catbar-sheet.is-open .tuto-catbar-sheet__panel{ transform:translateY(0); opacity:1; }

/* Header */
.tuto-catbar-sheet__header{
  position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--sep);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:8px 12px;
  padding-top:max(8px, env(safe-area-inset-top));
}
.tuto-catbar-sheet__title{ grid-column:2; margin:0; font-size:1.08rem; color:var(--ink); font-weight:800; }
.tuto-catbar-sheet__close{
  grid-column:3; justify-self:end;
  inline-size:48px; block-size:48px;        /* NEW: większy hit-area tylko tutaj */
  display:grid; place-items:center; border:0; background:transparent; border-radius:999px; cursor:pointer;
  font-size:1.15rem;                         /* NEW: ciut większy znak „✕” */
}
.tuto-catbar-sheet__close:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.tuto-catbar-sheet__grabber{ position:absolute; left:50%; top:6px; transform:translateX(-50%); width:44px; height:4px; border-radius:999px; background:rgba(0,0,0,.14); }

/* Search */
.tuto-catbar-sheet__search{
  padding:10px 12px;
  position:relative; /* NEW: pozycjonowanie dla przycisku „wyczyść” */
}
.tuto-catbar-sheet__search-input{
  width:100%; height:42px; border-radius:10px; border:1px solid var(--bd); padding:0 40px 0 12px; /* NEW: miejsce na X */
  font-size:.95rem;
}
/* NEW: przycisk czyszczenia pola wyszukiwania */
.tuto-catbar-search__clear{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  inline-size:28px; block-size:28px; display:none; place-items:center;
  border-radius:999px; border:1px solid var(--bd); background:#fff; color:var(--ink);
  cursor:pointer;
}
.tuto-catbar-search__clear.is-visible{ display:grid; }
.tuto-catbar-search__clear:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* Content */
.tuto-catbar-sheet__content{ overflow:auto; -webkit-overflow-scrolling:touch; padding:6px 8px 14px; }

/* Tree */
.tuto-tree{ display:block; }
.tuto-tree mark{ background:#ffed9f; }

/* Item row */
.tuto-tree__item{ content-visibility:auto; contain-intrinsic-size: 56px; }
.tuto-tree__row{
  display:flex; align-items:center; gap:10px; padding:6px 4px; border-top:1px dashed var(--sep);
}
.tuto-tree__row:first-child{ border-top:0; }

.tuto-tree__toggle{
  flex:0 0 auto; inline-size:28px; block-size:28px; display:grid; place-items:center;
  border-radius:8px; border:1px solid var(--bd); background:#fff; color:var(--ink); cursor:pointer;
}
.tuto-tree__spacer{ flex:0 0 28px; }

.tuto-tree__link{
  flex:1 1 auto; display:flex; align-items:center; gap:10px; min-height:44px;
  border:1px solid transparent; border-radius:10px; padding:8px 10px; text-decoration:none; color:var(--ink);
}
.tuto-tree__link:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.tuto-tree__thumb{ inline-size:28px; block-size:28px; object-fit:cover; border-radius:8px; border:1px solid var(--bd); }
.tuto-tree__dot{ inline-size:12px; block-size:12px; border-radius:999px; border:2px solid #fff; box-shadow:0 0 0 1px var(--bd); }
.tuto-tree__name{ font-weight:700; line-height:1.25; }
.tuto-row__count{ margin-left:auto; font-size:.78rem; font-weight:700; padding:2px 6px; border-radius:999px; border:1px solid var(--bd); background:#fff; }

/* Groups (bez JS pomiarów) */
.tuto-tree__group{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .18s ease, opacity .16s ease;
  opacity:0; overflow:hidden; margin-left:18px; border-left:4px solid var(--rail2); padding-left:8px;
}
.tuto-tree__group-inner{ min-height:0; }

/* Otwarty item */
.tuto-tree__item.is-open > .tuto-tree__group{ grid-template-rows:1fr; opacity:1; }

/* Poziomy: akcenty i tła */
.tuto-tree__item[data-level="1"] .tuto-tree__link{ font-weight:800; border-color:var(--bd); background:var(--bg1); }
.tuto-tree__item[data-level="1"] .tuto-tree__dot{ background:var(--rail1); }
.tuto-tree__item[data-level="1"] .tuto-row__count{ background:var(--bg1); }

.tuto-tree__item[data-level="2"] .tuto-tree__link{ font-weight:700; background:var(--bg2); }
.tuto-tree__item[data-level="2"] .tuto-tree__dot{ background:var(--rail2); }
.tuto-tree__item[data-level="2"] + .tuto-tree__group{ border-left-color:var(--rail2); background:color-mix(in oklab, var(--bg2) 60%, #fff); }

.tuto-tree__item[data-level="3"] .tuto-tree__link{ font-weight:600; background:var(--bg3); }
.tuto-tree__item[data-level="3"] .tuto-tree__dot{ background:var(--rail3); }
.tuto-tree__item[data-level="3"] + .tuto-tree__group{ border-left-color:var(--rail3); background:color-mix(in oklab, var(--bg3) 55%, #fff); }

.tuto-tree__item[data-level="4"] .tuto-tree__link{ font-weight:600; background:var(--bg4); }
.tuto-tree__item[data-level="4"] .tuto-tree__dot{ background:var(--rail4); }
.tuto-tree__item[data-level="4"] + .tuto-tree__group{ border-left-color:var(--rail4); background:color-mix(in oklab, var(--bg4) 50%, #fff); }

/* Compact */
.tuto-catbar-sheet--compact .tuto-tree__link{ min-height:40px; }
.tuto-catbar-sheet--compact .tuto-tree__thumb{ inline-size:24px; block-size:24px; }

/* Skeleton */
.tuto-skeleton{ position:relative; height:14px; border-radius:8px; background:#eef1f6; overflow:hidden; margin:8px 12px; }
.tuto-skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:tuto-skel 1.2s infinite; }
@keyframes tuto-skel{ 100%{ transform:translateX(100%); } }

/* Global lock */
html.tuto-scroll-locked{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  .tuto-catbar-sheet__overlay,.tuto-catbar-sheet__panel,.tuto-tree__group{ transition:none; }
}