/* =========================
   VibeQ99 App — page-specific CSS
   (keep separate from shared.css)
   ========================= */

/* App-specific vars */
:root{
  --controls-height:72px;
  --sticky-gap:12px;
}

/* Layout under global header */
.page-body{
  display:flex;
  flex:1;
  min-height:100vh;
}

/* Map panel (collapsible) */
aside.map{
  width:40%;
  min-width:380px;
  transition:width .25s ease,min-width .25s ease,opacity .2s ease;
  border-right:1px solid var(--line);
  padding:16px;
  overflow:auto;
}
aside.map.collapsed{
  width:0;
  min-width:0;
  border-right:0;
  opacity:0;
  padding:0;
}

/* Panel styling */
.panel{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.panel h1{margin:0 0 8px;color:#9ed5ff;font-size:24px}
.panel h2{margin:0 0 10px;color:#ffc000;font-size:18px}

.legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.legend .item{
  background:#0f1836;border:1px solid var(--line);
  border-radius:999px;padding:6px 10px;color:#b7c6ff;font-size:12px
}

.flow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.lane{margin-top:10px}
.lane h3{margin:6px 0 6px;font-size:14px;color:#a8c4ff}

.node{
  background:#0f1836;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;min-width:165px
}
.node h3{margin:0 0 6px;color:#bcd2ff;font-size:15px}
.node p{margin:0;color:#cdd8ff;font-size:13px}

.arrow{color:#9cdcff;font-size:18px}

/* Viewer column — override shared main sizing */
main{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:16px;
  min-height:0;

  /* critical overrides */
  max-width:none;
  margin:0;
  width:100%;
}

.controls{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:10px;border:1px solid var(--line);border-radius:12px;
  background:#0f1a44;margin-bottom:10px;
  position:sticky;top:var(--header-offset);z-index:5
}
.btn{
  background:var(--accent);color:#001225;border:0;border-radius:10px;
  padding:8px 12px;font-weight:700;cursor:pointer
}
.btn.secondary{background:#1b2b62;color:#cfe1ff;border:1px solid var(--line)}
.spacer{flex:1}

/* Gallery + sidebar */
.gallery{
  flex:1;display:flex;gap:16px;min-height:0;align-items:stretch;
}
.sidebar{
  width:360px;min-width:260px;background:#0f1836;border:1px solid var(--line);
  border-radius:12px;overflow:auto;position:relative;height:100%;align-self:stretch
}
.sidebar .catbar{
  position:sticky;top:0;background:#0f1836;border-bottom:1px solid #213064;
  display:flex;gap:8px;padding:8px;z-index:2
}
select.catjump{
  flex:1;background:#0b1336;border:1px solid #2a3970;border-radius:8px;
  color:#cfe1ff;padding:8px;font-size:13px
}
.group{
  padding:10px 12px;color:#8fb0ff;font-size:13px;opacity:.95;
  position:sticky;top:42px;background:#0f1836;border-bottom:1px solid #213064;
  display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none
}
.group .caret{display:inline-block;transform:rotate(0deg);transition:transform .15s ease}
.group.collapsed .caret{transform:rotate(-90deg)}

.list{list-style:none;margin:0;padding:8px}
.list.collapsed{display:none}
.list li{
  padding:12px;border-radius:10px;margin-bottom:8px;cursor:pointer;
  background:#0e1736;border:1px solid var(--line)
}
.list li:hover{background:#182452}
.list li.active{background:var(--accent);color:#001225;font-weight:800}

/* Sticky viewer (desktop) */
.viewer-col{
  flex:1;display:flex;flex-direction:column;align-items:center;
  position:sticky;
  top: calc(var(--header-offset) + var(--controls-height) + var(--sticky-gap));
  height: calc(100vh - (var(--header-offset) + var(--controls-height) + 2*var(--sticky-gap)));
  align-self:flex-start;z-index:5
}
.frame{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:#0a1333;border:1px solid var(--line);border-radius:16px;
  padding:8px;overflow:auto
}
.frame.fit img{object-fit:contain;width:100%;height:100%}
.frame.true img{object-fit:unset;width:auto;height:auto}
.frame img{
  border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.4);
  max-width:none;max-height:none
}
.caption{color:#9fb0de;font-size:14px;margin-top:16px}

/* Hide Screens button; JS still works */
#sidebarToggle{display:none!important;}

/* Mobile slide-up sidebar */
@media (max-width: 900px){
  aside.map{display:none}
  .gallery{flex-direction:column}
  .viewer-col{position:static;height:auto}
  .frame{height:calc(100vh - 240px)}

  .sidebar{
    position:fixed; inset:auto 0 0 0; height:65vh; width:100%;
    border-radius:16px 16px 0 0; border:1px solid var(--line);
    transform:translateY(105%); transition:transform .25s ease;
    box-shadow:0 -18px 40px rgba(0,0,0,.45); z-index:20;
  }
  .sidebar.open{ transform:translateY(0) }
  .sidebar::before{
    content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:52px; height:5px; border-radius:999px; background:#334a86; opacity:.9;
  }

  .btn{padding:10px 14px;border-radius:12px}
  select.catjump{padding:10px;font-size:14px}
}
/* App palette tokens (from old inline CSS) */
:root{
  --bg:#0c1126;
  --panel:#121a3f;
  --card:#0f1836;
  --card2:#13224d;
  --ink:#e9ecff;
  --muted:#9fb0de;
  --line:#2b3a66;
  --accent:#30eeff;
  --gold:#ffc000;
}

/* Let gallery/sidebar fill height like old version */
.gallery{
  flex:1;
  min-height:0;
  align-items:stretch;
}

.sidebar{
  height:100%;
  align-self:stretch;
}

/* Footer should follow content (not push to bottom) */
footer.footer{
  margin-top:16px;
}

.mobile-only {
  display: none;
}

@media (max-width: 900px) {
  .mobile-only {
    display: inline-block;
  }
}