/* ─── One sidebar for every media tab (media/sidebar-kit.js) ───────────────
   Videos, VR, Toons/Hentai, Images and Comics share one order and one look:
   painted 22px header icons, title-case headers with the brass accent the
   Torrents tab uses, chips of one height, long lists folded behind
   "Show all N", tools on a 12-track grid so no row ends short.
   Scoped to .kit-sidebar (added by the kit) so it only restyles what the kit
   has organized. */

.media-view .sidebar.kit-sidebar {
  --kit-brass: #d9a45b;
  --kit-brass-2: #f3c77e;
  --kit-line: color-mix(in srgb, var(--border) 80%, transparent);
  padding: 12px 12px 14px;
  gap: 0;
}
.media-view .sidebar.kit-sidebar [hidden] { display: none !important; }

/* Sections: one rhythm, a hairline between each. */
.media-view .sidebar.kit-sidebar .media-section {
  padding: 12px 2px 14px;
  border-bottom: 1px solid var(--kit-line);
}
.media-view .sidebar.kit-sidebar .media-section:first-of-type { padding-top: 2px; }
.media-view .sidebar.kit-sidebar .media-section.collapsed { padding-bottom: 10px; }

/* Headers: painted icon · title · (search) · chevron, all one height. */
.media-view .sidebar.kit-sidebar .media-section h3 {
  display: flex; align-items: center; gap: 8px;
  min-height: 30px; margin: 0 0 10px;
  font-size: 12.5px; font-weight: 650; letter-spacing: .01em; text-transform: none;
  color: var(--text-dim);
}
.media-view .sidebar.kit-sidebar .media-section h3.media-section-h3-clickable { padding: 3px 6px; margin: 0 -6px 8px; border-radius: 8px; }
.media-view .sidebar.kit-sidebar .media-section h3.media-section-h3-clickable:hover { background: rgba(217, 164, 91, .08); color: var(--text); }
.media-view .sidebar.kit-sidebar .media-h3-icon {
  width: 24px; height: 24px; flex: none; border-radius: 0; background: none;
}
.media-view .sidebar.kit-sidebar .media-h3-icon .kit-ico { width: 22px; height: 22px; display: block; }
.media-view .sidebar.kit-sidebar .media-section h3:hover .kit-ico { transform: rotate(-5deg) scale(1.06); }
.media-view .sidebar.kit-sidebar .kit-ico { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.media-view .sidebar.kit-sidebar .media-section .media-section-chevron {
  width: 22px; height: 22px; border-radius: 6px; font-size: 11px;
  color: var(--kit-brass-2); background: rgba(217, 164, 91, .08); border-color: rgba(217, 164, 91, .25);
}
.media-view .sidebar.kit-sidebar .media-section-search-toggle {
  width: 26px; height: 26px; opacity: .8; border-radius: 7px;
}
.media-view .sidebar.kit-sidebar .media-section-search-toggle img { width: 16px; height: 16px; display: block; }
.media-view .sidebar.kit-sidebar .media-section-search-toggle:hover,
.media-view .sidebar.kit-sidebar .media-section-search-toggle.active {
  background: rgba(217, 164, 91, .12); border-color: rgba(217, 164, 91, .4); opacity: 1;
}
.media-view .sidebar.kit-sidebar .media-section-search-row input {
  height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12px;
}
.media-view .sidebar.kit-sidebar .media-section-search-row input:focus { border-color: var(--kit-brass); }

/* Chips: one height, brass when picked (same as the Torrents facets). */
.media-view .sidebar.kit-sidebar .chip-list { gap: 5px; }
.media-view .sidebar.kit-sidebar .chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; padding: 0 10px; border-radius: 8px;
  font-size: 11.5px; font-weight: 550;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
}
.media-view .sidebar.kit-sidebar .chip:hover { color: var(--text); border-color: var(--border-strong); }
.media-view .sidebar.kit-sidebar .chip.active {
  color: #1a1009; border-color: transparent;
  background: linear-gradient(180deg, var(--kit-brass-2), var(--kit-brass));
}
.media-view .sidebar.kit-sidebar .chip[data-count]::after {
  content: attr(data-count);
  font: 600 9.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-mute);
}
.media-view .sidebar.kit-sidebar .chip.active[data-count]::after { color: rgba(26, 16, 9, .65); }
.media-view .sidebar.kit-sidebar .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Stars flow like every other list — no inner scroll box, no two-column
   grid cutting names in half. */
.media-view .sidebar.kit-sidebar .media-star-filters {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: none; overflow: visible;
}
.media-view .sidebar.kit-sidebar .media-star-filters .star-chip { width: auto; padding-left: 3px; }
.media-view .sidebar.kit-sidebar .star-chip-avatar { width: 22px; height: 22px; font-size: 8.5px; }
.media-view .sidebar.kit-sidebar .star-chip-name { max-width: 130px; }

/* Bundles flow too (they had their own 220px scroll box). */
.media-view .sidebar.kit-sidebar .media-bundle-filters { max-height: none; overflow: visible; }

/* Showing and Search & sort are the sidebar's front door: always open, no
   collapse arrow on either. */
.media-view .sidebar.kit-sidebar .media-section[data-kit="showing"] .media-section-chevron,
.media-view .sidebar.kit-sidebar .media-section[data-kit="find"] .media-section-chevron { display: none; }
.media-view .sidebar.kit-sidebar .media-section[data-kit="showing"] h3,
.media-view .sidebar.kit-sidebar .media-section[data-kit="find"] h3 { cursor: default; }
.media-view .sidebar.kit-sidebar .media-section[data-kit="showing"] h3:hover,
.media-view .sidebar.kit-sidebar .media-section[data-kit="find"] h3:hover { background: none; }

/* "Show all N" under a folded list. */
.media-view .sidebar.kit-sidebar .kit-more {
  flex: 1 0 100%; min-height: 30px; margin-top: 2px; padding: 0 10px;
  border: 1px dashed var(--border); border-radius: 8px; background: transparent;
  color: var(--kit-brass-2); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.media-view .sidebar.kit-sidebar .kit-more:hover { border-style: solid; border-color: rgba(217, 164, 91, .45); background: rgba(217, 164, 91, .06); }
.media-view .sidebar.kit-sidebar .kit-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Search & sort — first thing under Showing. */
.media-view .sidebar.kit-sidebar .media-search-wrap input {
  height: 38px; border-radius: 10px; font-size: 13px;
}
.media-view .sidebar.kit-sidebar .media-search-wrap input:focus {
  border-color: color-mix(in srgb, var(--kit-brass) 60%, var(--border));
  box-shadow: 0 0 0 3px rgba(217, 164, 91, .12);
}
.kit-sort-row {
  display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center; gap: 8px;
  margin-top: 8px;
}
.kit-sort-row .kit-ico { width: 20px; height: 20px; }
.kit-sort-label { font-size: 11.5px; font-weight: 600; color: var(--text-mute); }
.media-view .sidebar.kit-sidebar .kit-sort-row select {
  width: 100%; min-width: 0; height: 34px; padding: 0 8px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font: inherit; font-size: 12px; cursor: pointer;
}
.media-view .sidebar.kit-sidebar .kit-sort-row select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Showing: the video lanes use the Images switch's shape. */
.kit-lane-switch button[data-lane="videos"] { --sw-accent: var(--accent); }
.kit-lane-switch button[data-lane="toons"] { --sw-accent: var(--accent-2); }
.kit-lane-switch button[data-lane="hentai"] { --sw-accent: var(--accent-pink); }
.kit-lane-switch button[data-lane="vr"] { --sw-accent: var(--accent-warm); }
.media-view .sidebar.kit-sidebar .imgsplit-reopen { min-height: 32px; border-radius: 9px; }

/* Rating: stars and its two controls in one tidy block. */
.media-view .sidebar.kit-sidebar .media-rating-filter { display: flex; flex-direction: column; gap: 8px; }
.media-view .sidebar.kit-sidebar .media-rating-filter .rating-strip { align-self: stretch; justify-content: space-between; }
.media-view .sidebar.kit-sidebar .media-rating-filter-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.media-view .sidebar.kit-sidebar .media-rating-filter-controls .btn { min-height: 30px; justify-content: center; }

/* Library (was "Server") sits last, above the tools. */
.media-view .sidebar.kit-sidebar .media-section-server {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; border-bottom: 1px solid var(--border);
}
.media-view .sidebar.kit-sidebar .media-section-server h3 { margin: 0; }
.media-view .sidebar.kit-sidebar .media-section-server:not(.collapsed) h3 { margin-bottom: 10px; }
.media-view .sidebar.kit-sidebar .media-server-quickadd img { width: 18px; height: 18px; display: block; }
.media-view .sidebar.kit-sidebar .cat-groups-cog img { width: 16px; height: 16px; display: block; }

/* Tools: painted icons on a 12-track grid; the kit sets each span so every
   row is full (7 → 4 + 3, 5 → 3 + 2). */
.media-view .sidebar.kit-sidebar .media-tools-dock.kit-dock {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px;
  margin-top: auto; padding: 12px 0 2px; border-top: 1px solid var(--kit-line);
}
.media-view .sidebar.kit-sidebar .kit-dock .media-tool-btn {
  width: auto; height: 40px; border-radius: 10px;
  background: var(--surface); border-color: var(--border);
}
.media-view .sidebar.kit-sidebar .kit-dock .media-tool-btn img { width: 24px; height: 24px; display: block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.media-view .sidebar.kit-sidebar .kit-dock .media-tool-btn:hover:not(:disabled) { background: var(--surface-2); border-color: rgba(217, 164, 91, .45); }
.media-view .sidebar.kit-sidebar .kit-dock .media-tool-btn:hover:not(:disabled) img { transform: scale(1.12) rotate(-5deg); }
.media-view .sidebar.kit-sidebar .kit-dock .media-tool-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .media-view .sidebar.kit-sidebar .kit-ico,
  .media-view .sidebar.kit-sidebar .kit-dock .media-tool-btn img { transition: none; transform: none !important; }
}

/* ─── Shared bits outside the media views ─────────────────────────────── */
.sidebar.kit-sidebar [hidden] { display: none !important; }
.sidebar.kit-sidebar .kit-sort-row select {
  width: 100%; min-width: 0; height: 34px; padding: 0 8px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font: inherit; font-size: 12px; cursor: pointer;
}
.sidebar.kit-sidebar .kit-sort-row select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sidebar.kit-sidebar .kit-search {
  width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font: inherit; font-size: 13px; outline: none;
}
.sidebar.kit-sidebar .kit-search:focus {
  border-color: color-mix(in srgb, #d9a45b 60%, var(--border));
  box-shadow: 0 0 0 3px rgba(217, 164, 91, .12);
}

/* ─── Games sidebars (Local / Web / Steam) ────────────────────────────── */
.sidebar.kit-games {
  --kit-brass: #d9a45b;
  --kit-brass-2: #f3c77e;
  --kit-line: color-mix(in srgb, var(--border) 80%, transparent);
  padding: 12px 12px 14px;
}
.sidebar.kit-games > section {
  margin: 0; padding: 12px 2px 14px;
  border-bottom: 1px solid var(--kit-line);
}
.sidebar.kit-games > section:first-of-type { padding-top: 2px; }
.sidebar.kit-games > section:last-of-type { border-bottom: 0; }
.sidebar.kit-games > section > h3,
.sidebar.kit-games > section > .section-toggle {
  display: flex; align-items: center; gap: 8px; min-height: 30px; margin: 0 0 10px;
  font-size: 12.5px; font-weight: 650; letter-spacing: .01em; text-transform: none; color: var(--text-dim);
}
.sidebar.kit-games > section.collapsible > .section-toggle { margin: 0; padding: 3px 6px; margin: 0 -6px; width: calc(100% + 12px); border-radius: 8px; }
.sidebar.kit-games > section.collapsible > .section-toggle:hover { background: rgba(217, 164, 91, .08); color: var(--text); }
.sidebar.kit-games .section-toggle > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.sidebar.kit-games .section-toggle .chev {
  width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 6px; font-size: 11px;
  color: var(--kit-brass-2); background: rgba(217, 164, 91, .08); border: 1px solid rgba(217, 164, 91, .25);
}
.sidebar.kit-games .media-h3-icon,
.kit-tor-settings .media-h3-icon { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; }
.sidebar.kit-games .media-h3-icon img,
.kit-tor-settings .media-h3-icon img { width: 22px; height: 22px; display: block; }
.sidebar.kit-games .section-count { color: var(--text-mute); font-weight: 600; }

/* Show filters: compact chips that wrap (like every other list), painted
   icons, brass when on. The All / Installed / Not installed radios are a
   three-way segment. */
.sidebar.kit-games .show-toggles { flex-direction: row; flex-wrap: wrap; gap: 5px; }
.sidebar.kit-games .show-toggles + .show-toggles { margin-top: 8px !important; }
.sidebar.kit-games .show-chip {
  gap: 6px; min-height: 30px; padding: 0 10px 0 5px; border-radius: 8px;
  font-size: 11.5px; font-weight: 550; box-shadow: none;
}
.sidebar.kit-games .show-chip .show-icon { width: 20px; height: 20px; background: none; border-radius: 0; }
.sidebar.kit-games .show-chip .show-icon img { width: 20px; height: 20px; display: block; filter: grayscale(.25); }
.sidebar.kit-games .show-chip:has(input:checked),
.sidebar.kit-games .show-chip[for]:has(input:checked) {
  color: #1a1009; border-color: transparent; box-shadow: none;
  background: linear-gradient(180deg, var(--kit-brass-2), var(--kit-brass));
}
.sidebar.kit-games .show-chip:has(input:checked) .show-icon { background: none; }
.sidebar.kit-games .show-chip:has(input:checked) .show-icon img { filter: none; }
.sidebar.kit-games .show-toggles.kit-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.sidebar.kit-games .kit-seg .show-chip {
  flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 5px 2px;
  border: 0; background: transparent; text-align: center; font-size: 11px; line-height: 1.2;
}
.sidebar.kit-games .kit-seg .show-chip:hover { background: var(--surface-2); }
.sidebar.kit-games .kit-seg .show-chip .show-icon,
.sidebar.kit-games .kit-seg .show-chip .show-icon img { width: 22px; height: 22px; }
.sidebar.kit-games .kit-seg .show-chip:has(input:checked) { color: var(--text); background: var(--surface-3); box-shadow: inset 0 -2px 0 var(--kit-brass); }
.sidebar.kit-games .show-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Showing: Local / Web / Steam, same switch as Images and Videos. */
.sidebar.kit-games .kit-glane-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kit-glane-switch button[data-glane="local"] { --sw-accent: var(--accent-warm); }
.kit-glane-switch button[data-glane="web"] { --sw-accent: var(--accent-2); }
.kit-glane-switch button[data-glane="steam"] { --sw-accent: #66c0f4; }
.sidebar.kit-games .imgsplit-reopen { min-height: 32px; border-radius: 9px; }

/* Buttons in these sidebars carry painted icons now. */
.sidebar.kit-games .btn > .kit-ico { width: 20px; height: 20px; flex: none; }
.sidebar.kit-games .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

/* Torrents' Settings header, same style. */
.kit-tor-settings .section-toggle > span:first-child { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650; letter-spacing: .01em; text-transform: none; color: var(--text-dim); }
/* The filter shelf's pull-tab: the one edge tab (--edge-tab-* in styles.css).
   Square where it meets its edge, rounded where it stands out, with an ember
   seam along that edge. QUIET at rest — a dim tab in the page's own greys —
   and lit only under the pointer or keyboard focus, so it never competes with
   the shelf. Shut, it hangs on the window's left edge; open, it moves to the
   shelf's edge and hangs there, pointing back.
   Folded, the shelf's column is ZERO wide: the tab is an overlay on the
   content's left edge, not a rail, and it is exactly as deep as the page
   gutter (--edge-tab-depth = --page-gutter), so all it ever covers is .main's
   own padding — the content starts at the normal gutter and the grid gets the
   whole width. The column change is not animated on purpose: every frame of
   it would re-lay-out the whole tile grid (chrome-fold.css avoids that for
   the same reason). The shelf slides in instead. */
.layout.media-filters-foldable {
  --side-tab-top: 16px;
  --kit-shelf-w: 240px;
  --edge-tab-depth: var(--page-gutter);
  grid-template-columns: 0 minmax(0, 1fr);
}
/* Mac shell: the traffic lights sit inset over the window's top-left corner.
   With the bars tucked the lane starts 10px down, so drop the tab clear of
   them, and the open shelf's first header with it. */
body.shell-mac .layout.media-filters-foldable { --side-tab-top: 32px; }
body.shell-mac .layout.media-filters-open > .sidebar { padding-top: 30px; }
.layout.media-filters-foldable > .sidebar { display: none; }
.layout.media-filters-foldable > .main { grid-column: 2; min-width: 0; }
.layout.media-filters-foldable.media-filters-open { grid-template-columns: var(--kit-shelf-w) minmax(0, 1fr); }
.layout.media-filters-open > .sidebar {
  display: block; grid-column: 1;
  animation: kit-shelf-in .3s var(--edge-tab-ease);
}
@keyframes kit-shelf-in {
  from { opacity: 0; transform: translateX(-14px); }
}
.kit-filter-toggle {
  --side-tab-seam: color-mix(in srgb, var(--accent-warm) 34%, transparent);
  position: absolute; z-index: 6;
  top: var(--side-tab-top, 16px); left: 0;
  display: flex; align-items: center; justify-content: center;
  width: var(--edge-tab-depth); height: var(--edge-tab-span);
  padding: 0 0 0 1px; margin: 0;
  border: 1px solid var(--border); border-left: 0;
  border-radius: 0 var(--edge-tab-radius) var(--edge-tab-radius) 0;
  background:
    /* the seam: light leaking out of the edge the tab is pulled from */
    linear-gradient(180deg, transparent 12%, var(--side-tab-seam) 50%, transparent 88%) left center / 1.5px 100% no-repeat;
  background-color: var(--bg-2);
  box-shadow: 4px 0 12px -8px var(--edge-tab-shadow);
  color: var(--text-mute);
  cursor: pointer; touch-action: manipulation;
  -webkit-app-region: no-drag;
  transition: left .3s var(--edge-tab-ease), width .32s var(--edge-tab-ease), background-color .18s, border-color .18s, box-shadow .18s, color .18s;
}
/* Open: flush on the shelf's edge (its right border), pointing back. */
.layout.media-filters-open > .kit-filter-toggle { left: var(--kit-shelf-w); }
/* A wider target than the 22px tab, reaching a little over the content's
   edge (the dock's end cap, never a control) and never past the window's. */
.kit-filter-toggle::before { content: ''; position: absolute; inset: -6px -10px -6px 0; }
.kit-filter-toggle svg { flex: none; transition: transform .32s var(--edge-tab-ease); }
.kit-filter-toggle[aria-expanded=true] svg { transform: rotate(180deg); }
/* Wanted: the full edge tab — amber line, ember seam and glow, lit chevron. */
.kit-filter-toggle:focus-visible,
.kit-filter-toggle:active { --side-tab-seam: var(--edge-tab-seam); border-color: var(--edge-tab-line-hi); background-color: var(--edge-tab-fill-hi); color: var(--accent-warm); }
@media (hover: hover) {
  .kit-filter-toggle:hover {
    --side-tab-seam: var(--edge-tab-seam);
    width: calc(var(--edge-tab-depth) + var(--edge-tab-pull));
    border-color: var(--edge-tab-line-hi);
    background-color: var(--edge-tab-fill-hi);
    box-shadow: 9px 0 18px -8px var(--edge-tab-shadow), 2px 0 14px -4px var(--edge-tab-glow);
    color: var(--accent-warm);
  }
  .kit-filter-toggle:hover svg { transform: translateX(1.5px); }
  .kit-filter-toggle[aria-expanded=true]:hover svg { transform: rotate(180deg) translateX(1.5px); }
}
/* No hover on a touch screen, so the resting tab there is a step brighter. */
@media (hover: none) {
  .kit-filter-toggle { color: var(--text-dim); border-color: var(--border-strong); }
}
.kit-filter-toggle:active { width: calc(var(--edge-tab-depth) - 1px); background-color: var(--surface-3); }
/* The ring runs round the three sides that stand out; the fourth is the edge. */
.kit-filter-toggle:focus-visible { outline: 2px solid var(--accent-warm); outline-offset: 2px; }
body.hearth-immersive .kit-filter-toggle { display: none; }
#view-images:has(.imgsplit:not(.hidden)) > .kit-filter-toggle { display: none; }
@media (max-width: 700px) {
  /* A phone keeps the grid's width open too: the shelf lies over it. */
  .layout.media-filters-foldable { --kit-shelf-w: min(300px, calc(100% - 52px)); }
  .layout.media-filters-foldable.media-filters-open { grid-template-columns: 0 minmax(0, 1fr); }
  .layout.media-filters-open > .sidebar { position: absolute; inset: 0 auto 0 0; width: var(--kit-shelf-w); z-index: 5; background: var(--bg); box-shadow: 12px 0 32px #0008; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-filter-toggle, .kit-filter-toggle svg { transition: none; }
  .layout.media-filters-open > .sidebar { animation: none; }
}