/* GENESIS-AIX-SITE-TREE-001 */

:root {
  --gaix-tree-width: 272px;
  --gaix-tree-z: 12000;
}

.gaix-site-tree-shell,
.gaix-site-tree-shell * {
  box-sizing: border-box;
}

.gaix-site-tree-shell {
  position: fixed;
  z-index: var(--gaix-tree-z);
  pointer-events: none;
  font-family: inherit;
}

/* Tiny edge tab */

.gaix-site-tree-handle {
  position: fixed;
  left: 0;
  top: 32vh;
  width: 9px;
  height: 68px;
  padding: 0;
  border: 1px solid rgba(100,110,125,.30);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  background: rgba(45,55,68,.60);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  overflow: hidden;
  z-index: calc(var(--gaix-tree-z) + 2);
  box-shadow: 1px 2px 5px rgba(0,0,0,.10);
  transition: width .16s ease, background .16s ease, box-shadow .16s ease;
}

.gaix-site-tree-handle:hover,
.gaix-site-tree-handle:focus-visible,
.gaix-site-tree-shell.is-open .gaix-site-tree-handle {
  width: 66px;
  background: rgba(32,42,55,.95);
  box-shadow: 2px 3px 10px rgba(0,0,0,.18);
}

.gaix-site-tree-handle-label {
  display: block;
  width: 66px;
  line-height: 66px;
  transform: translateX(-10px);
  opacity: 0;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  transition: opacity .11s ease, transform .16s ease;
}

.gaix-site-tree-handle:hover .gaix-site-tree-handle-label,
.gaix-site-tree-handle:focus-visible .gaix-site-tree-handle-label,
.gaix-site-tree-shell.is-open .gaix-site-tree-handle-label {
  opacity: 1;
  transform: translateX(7px);
}

/* Drawer */

.gaix-site-tree-drawer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(var(--gaix-tree-width), 86vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;

  background: var(--surface, #fff);
  color: var(--text, #17202a);

  border-right: 1px solid rgba(100,110,125,.22);
  box-shadow: 5px 0 20px rgba(0,0,0,.13);

  transform: translateX(-102%);
  transition: transform .19s ease;
}

.gaix-site-tree-shell.is-open .gaix-site-tree-drawer {
  transform: translateX(0);
}

.gaix-site-tree-shell.is-open .gaix-site-tree-handle {
  left: min(var(--gaix-tree-width), 86vw);
}

/* Header */

.gaix-site-tree-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 8px 6px 10px;
  border-bottom: 1px solid rgba(100,110,125,.16);
}

.gaix-site-tree-title {
  flex: 1;
  min-width: 0;
}

.gaix-site-tree-title strong {
  display: block;
  font-size: 12px;
}

.gaix-site-tree-title span {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  opacity: .62;
}

.gaix-site-tree-close {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid rgba(100,110,125,.22);
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
}

/* Search */

.gaix-site-tree-search-wrap {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(100,110,125,.13);
}

.gaix-site-tree-search {
  width: 100%;
  min-height: 29px;
  padding: 5px 8px;
  border: 1px solid rgba(100,110,125,.25);
  border-radius: 6px;
  background: rgba(127,127,127,.05);
  color: inherit;
  font: inherit;
  font-size: 11px;
}

/* Tree */

.gaix-site-tree-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px 7px 12px;
}

.gaix-tree-root,
.gaix-tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gaix-tree-group {
  margin: 1px 0;
}

.gaix-tree-group > summary {
  position: relative;
  min-height: 29px;
  padding: 6px 7px 6px 21px;
  border-radius: 5px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 11.5px;
  font-weight: 700;
}

.gaix-tree-group > summary::-webkit-details-marker {
  display: none;
}

.gaix-tree-group > summary::before {
  content: "›";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 11px;
  opacity: .62;
  transition: transform .12s ease;
}

.gaix-tree-group[open] > summary::before {
  transform: rotate(90deg);
}

.gaix-tree-group > summary:hover,
.gaix-tree-group > summary:focus-visible {
  background: rgba(127,127,127,.07);
}

/* Branch line */

.gaix-tree-children {
  position: relative;
  margin: 1px 0 4px 17px;
  padding-left: 10px;
  border-left: 1px solid rgba(100,110,125,.21);
}

.gaix-tree-child {
  position: relative;
}

.gaix-tree-child::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 14px;
  width: 8px;
  border-top: 1px solid rgba(100,110,125,.21);
}

.gaix-tree-link {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 5px 4px 6px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  font-size: 10.8px;
  line-height: 1.25;
}

.gaix-tree-link:hover,
.gaix-tree-link:focus-visible {
  background: rgba(127,127,127,.08);
  text-decoration: none;
}

.gaix-tree-link[aria-current="page"] {
  background: rgba(80,120,175,.13);
  outline: 1px solid rgba(80,120,175,.16);
  font-weight: 700;
}

.gaix-tree-kind {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 3px;
  border: 1px solid rgba(100,110,125,.20);
  border-radius: 3px;
  font-size: 7.5px;
  line-height: 1.25;
  letter-spacing: .025em;
  text-transform: uppercase;
  opacity: .65;
}

.gaix-tree-empty {
  padding: 14px 8px;
  font-size: 11px;
  opacity: .68;
}

.gaix-site-tree-foot {
  padding: 6px 8px 8px;
  border-top: 1px solid rgba(100,110,125,.13);
  font-size: 8.5px;
  line-height: 1.3;
  opacity: .58;
}

/* Themes */

html[data-theme="medium"] .gaix-site-tree-drawer {
  background: #e8eaed;
  color: #1f2730;
}

html[data-theme="dark"] .gaix-site-tree-drawer {
  background: #151a20;
  color: #edf1f5;
  border-right-color: rgba(255,255,255,.12);
}

html[data-theme="dark"] .gaix-site-tree-search {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

/* Mobile */

@media (max-width: 700px) {

  :root {
    --gaix-tree-width: 292px;
  }

  .gaix-site-tree-handle {
    top: 29vh;
    width: 10px;
    height: 66px;
  }

  .gaix-site-tree-handle-label {
    line-height: 64px;
  }

  .gaix-tree-link {
    min-height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gaix-site-tree-handle,
  .gaix-site-tree-handle-label,
  .gaix-site-tree-drawer,
  .gaix-tree-group > summary::before {
    transition: none !important;
  }
}

/* ==================================================================
   GENESIS-AIX-SITE-TREE-001
   VISIBILITY CORRECTION

   Human visual finding:
   original 9 px handle was too difficult to discover.

   This block intentionally overrides only the closed/peek handle.
   Tree drawer and hierarchy remain unchanged.
   ================================================================== */

.gaix-site-tree-handle {
  top: 29vh !important;

  width: 16px !important;
  height: 82px !important;

  background: rgba(38, 49, 64, .86) !important;

  border-top:
    1px solid rgba(255,255,255,.20) !important;

  border-right:
    1px solid rgba(255,255,255,.24) !important;

  border-bottom:
    1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    2px 2px 8px rgba(0,0,0,.20) !important;

  overflow: hidden;
}

/* Persistent closed-state discoverability cue */

.gaix-site-tree-handle::before {
  content: "TREE";

  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .10em;

  color: rgba(255,255,255,.88);

  opacity: .82;

  pointer-events: none;

  transition:
    opacity .12s ease;
}

/* Existing SITE TREE text remains hidden until hover/focus/open */

.gaix-site-tree-handle-label {
  width: 76px !important;

  line-height: 80px !important;

  opacity: 0 !important;

  transform:
    translateX(-8px) !important;
}

/* Peek state */

.gaix-site-tree-handle:hover,
.gaix-site-tree-handle:focus-visible,
.gaix-site-tree-shell.is-open .gaix-site-tree-handle {
  width: 76px !important;

  background:
    rgba(30, 40, 54, .97) !important;

  box-shadow:
    3px 3px 12px rgba(0,0,0,.24) !important;
}

.gaix-site-tree-handle:hover::before,
.gaix-site-tree-handle:focus-visible::before,
.gaix-site-tree-shell.is-open .gaix-site-tree-handle::before {
  opacity: 0;
}

.gaix-site-tree-handle:hover .gaix-site-tree-handle-label,
.gaix-site-tree-handle:focus-visible .gaix-site-tree-handle-label,
.gaix-site-tree-shell.is-open .gaix-site-tree-handle-label {
  opacity: 1 !important;

  transform:
    translateX(8px) !important;
}

/* Mobile: slightly larger touch target but still compact */

@media (max-width: 700px) {

  .gaix-site-tree-handle {
    top: 27vh !important;

    width: 18px !important;
    height: 84px !important;
  }

  .gaix-site-tree-handle::before {
    font-size: 8px;
  }

  .gaix-site-tree-handle:hover,
  .gaix-site-tree-handle:focus-visible,
  .gaix-site-tree-shell.is-open .gaix-site-tree-handle {
    width: 78px !important;
  }
}

/* ==================================================================
   GENESIS-AIX-SITE-TREE-001
   DIRECT-HOVER / EXIT / TRANSLUCENCY CORRECTION
   ================================================================== */

/* ---------------------------------------------------------------
   DRAWER — VISIBLY TRANSLUCENT
   --------------------------------------------------------------- */

.gaix-site-tree-drawer {
  background:
    rgba(248, 250, 253, .82) !important;

  -webkit-backdrop-filter:
    blur(6px) saturate(106%);

  backdrop-filter:
    blur(6px) saturate(106%);

  box-shadow:
    4px 0 15px rgba(0,0,0,.10) !important;
}

/* Medium theme */

html[data-theme="medium"] .gaix-site-tree-drawer {
  background:
    rgba(218, 222, 228, .84) !important;

  color:
    #1f2730 !important;
}

/* Dark theme */

html[data-theme="dark"] .gaix-site-tree-drawer {
  background:
    rgba(18, 23, 29, .82) !important;

  color:
    #edf1f5 !important;

  border-right-color:
    rgba(255,255,255,.11) !important;

  box-shadow:
    4px 0 17px rgba(0,0,0,.20) !important;
}

/* ---------------------------------------------------------------
   WHEN THE DRAWER OPENS, THE EDGE HANDLE IS NO LONGER NEEDED.

   Hide it beneath the opened drawer instead of moving a second
   SITE TREE label to the right edge.
   --------------------------------------------------------------- */

.gaix-site-tree-shell.is-open .gaix-site-tree-handle {
  left: 0 !important;

  width: 16px !important;

  opacity: 0 !important;

  pointer-events: none !important;

  transition:
    opacity .08s ease !important;
}

/* ---------------------------------------------------------------
   NARROW SCROLLBAR
   --------------------------------------------------------------- */

.gaix-site-tree-body {
  scrollbar-width: thin;

  scrollbar-color:
    rgba(70, 82, 98, .22)
    transparent;
}

.gaix-site-tree-body::-webkit-scrollbar {
  width: 4px;
}

.gaix-site-tree-body::-webkit-scrollbar-track {
  background: transparent;
}

.gaix-site-tree-body::-webkit-scrollbar-thumb {
  background:
    rgba(70, 82, 98, .18);

  border-radius:
    999px;
}

.gaix-site-tree-body:hover::-webkit-scrollbar-thumb,
.gaix-site-tree-body:focus-within::-webkit-scrollbar-thumb {
  background:
    rgba(70, 82, 98, .38);
}

html[data-theme="dark"] .gaix-site-tree-body {
  scrollbar-color:
    rgba(230,235,240,.24)
    transparent;
}

html[data-theme="dark"]
.gaix-site-tree-body::-webkit-scrollbar-thumb {
  background:
    rgba(230,235,240,.18);
}

html[data-theme="dark"]
.gaix-site-tree-body:hover::-webkit-scrollbar-thumb,
html[data-theme="dark"]
.gaix-site-tree-body:focus-within::-webkit-scrollbar-thumb {
  background:
    rgba(230,235,240,.36);
}

/* Subtle tree branch lines */

.gaix-tree-children {
  border-left-color:
    rgba(90,105,120,.15) !important;
}

.gaix-tree-child::before {
  border-top-color:
    rgba(90,105,120,.15) !important;
}

html[data-theme="dark"] .gaix-tree-children {
  border-left-color:
    rgba(225,232,240,.13) !important;
}

html[data-theme="dark"] .gaix-tree-child::before {
  border-top-color:
    rgba(225,232,240,.13) !important;
}