/* ───────── WINDOW IMAGE ───────── */

/* one clip for ALL window layers */
#windowStack{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -2;

  clip-path: inset(
  var(--hole-t)
  var(--hole-r)
  calc(var(--hole-b) + var(--hole-b-adjust))
  var(--hole-l)
  round var(--hole-rad)
);


  transition: clip-path var(--fsDur) var(--fsEase);


  will-change: clip-path;
}
body.hero-expanded #windowStack{ clip-path: inset(0 round 0); }


#windowBack, #windowFront{
  position: absolute;
  inset: 0;
}
#windowBack{ z-index: -6; }
#windowFront{ z-index: -5; }

#windowStack img,
#windowStack video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#windowImage, #windowImageB{ z-index: 10; }
#midMedia{ z-index: 20; }





#windowImage,
#windowImageB {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;

  clip-path: inset(
  var(--hole-t)
  var(--hole-r)
  calc(var(--hole-b) + var(--hole-b-adjust))
  var(--hole-l)
  round var(--hole-rad)
);



  transition: clip-path var(--fsDur) var(--fsEase);


}

body.hero-expanded #windowImage,
body.hero-expanded #windowImageB {
  clip-path: inset(0 round 0);
}



/* ───────── TOP BAR ───────── */
.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(192, 255, 90, 0.9);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 2;
}

.logo {
  font-size: 28px;
  margin: 0;
}

#aboutBtn {
  font-family: var(--font);
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}


.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.tagbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width: 52vw;
  justify-content:flex-end;
}

.tagbtn{
  font-family: var(--font);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.35);
  cursor: pointer;
}

.tagbtn.active{
  background: rgba(0,0,0,0.75);
  color: #fff;
  border-color: rgba(0,0,0,0.75);
}


/* ───────── LEFT SLIDE PANEL ───────── */
:root{
  --topbar-h: 64px;           /* header height */
  --bottompanel-h: var(--fsPanelH, 120px); /* will be auto-set by JS if found */
  --lsp-w: min(600px, 92vw);
  

}

#leftSlidePanel{
  position: fixed;
  top: var(--topbar-h);
  bottom: var(--bottompanel-h);
  left: 0;
  width: var(--lsp-w);
  transform: translateX(calc(-1 * var(--lsp-w) - 16px));
  opacity: 0;
  pointer-events: none;
  z-index: 6;

  background: rgb(0, 0, 0);
  backdrop-filter: blur(0px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);

  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  transition:
    transform 520ms cubic-bezier(.22,.61,.36,1),
    opacity 240ms ease;
}

body.lsp-open #leftSlidePanel{
  transform: translateX(0px);
  opacity: 1;
  pointer-events: auto;
}

#lspBackdrop{
  position: fixed;
  top: var(--topbar-h);
  bottom: var(--bottompanel-h);
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 240ms ease;
}

body.lsp-open #lspBackdrop{
  opacity: 1;
  pointer-events: auto;
}

.lsp-head{
  /* remove fixed height */
  min-height: 56px;         /* controls header height */
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: 14px 18px;       /* controls “fatness” */
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}


.lsp-title{
  
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  letter-spacing: 0.02em;
}

.lsp-close{
  background: none;
  border: none;
  color: rgba(255,255,255,0.9);
  font-size: 22px;
  cursor: pointer;
}

.lsp-body{
  flex: 1;        /* ✅ take remaining height */
  min-height: 0;  /* ✅ allow scroll inside */
  padding: 18px;
  overflow: auto;
}
/* LSP: hide scrollbar ONLY when the Blog app panel is showing */
#leftSlidePanel:has(.lsp-blogList) .lsp-body{
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge/IE */
}

#leftSlidePanel:has(.lsp-blogList) .lsp-body::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

/* LSP_ABOUT_TEXT (unique anchor) */
#leftSlidePanel .lsp-about{
  color: rgba(255,255,255,0.92);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
}

#leftSlidePanel .lsp-about h1,
#leftSlidePanel .lsp-about h2,
#leftSlidePanel .lsp-about h3{
  margin: 0 0 10px;
  font-weight: 600;
}

#leftSlidePanel .lsp-about p{
  margin: 0 0 12px;
  opacity: 0.92;
}

#leftSlidePanel .lsp-about a{
  color: rgba(255,255,255,0.92);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#leftSlidePanel .lsp-about a:hover{
  color: rgb(255, 238, 0);
}

/* About meta line (Updated: ...) */
#leftSlidePanel .lsp-aboutMeta{
  opacity: 0.65;
  font-size: 12px;
  margin: 0 0 12px;
}

/* Thumbs in LSP (override your global .aboutThumbGrid to fit the panel) */
#leftSlidePanel .aboutThumbGrid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#leftSlidePanel .aboutThumb img{
  height: 96px;
}

/* Inline images inside HTML blocks */
#leftSlidePanel .aboutInlineImg{
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.18);
}



.lspLink{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Links panel icon (SVG mask) */
.lspLinkIcon{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;


  background: #ffffff;     /* ✅ icon is white */
  opacity: 1;           /* ✅ no dull/gray look */

  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}



.lspLinkText{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}



/* Links panel: 3 columns */
.lspGrid3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lspCol{
  min-width: 0;
  padding: 0;                 /* or keep 10px if you still want spacing */
  border: none;               /* ✅ remove outline */
  border-radius: 0;           /* optional */
  background: transparent;    /* ✅ remove fill */
}


.lspCol h4{
  margin: 0 0 10px 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

/* Links: icon + label row */
.lspCol a,
.lsp-linkRow{
  display: flex;
  align-items: center;
  gap: 10px;

  color: rgba(255,255,255,0.92);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 8px 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  background: transparent !important; /* ✅ no box */
  border: none !important;
  padding: 0;  
}


.lspCol a,
.lsp-linkRow,
.lsp-link{
  color: rgba(255,255,255,0.92);
}

/* label truncation */
.lspLinkText{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



@media (max-width: 820px){
  .lspGrid3{ grid-template-columns: 1fr; }
}


.lsp-linkList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.lsp-link{
  display: flex;
  align-items: center;
  gap: 8px;

  color: rgba(255,255,255,0.92);
  text-decoration: underline;
  text-underline-offset: 3px;

  min-width: 0;
}
.lsp-link .lspLinkText{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.lsp-link:hover{ opacity: 0.9; }
/* icon used before links (mask icon so it inherits text color) */




/* ───────── LSP: Tools two-column layout ───────── */
.lsp-toolsGrid{
  height: 100%;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr); /* ✅ safer than 1fr */
  gap: 14px;
  align-items: start;
}

.lsp-toolsFolders{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lsp-toolsFiles{
  min-height: 0;
  overflow: auto;
}

.lsp-folderBtn{
  font-family: var(--font);
  text-align: left;
  padding: 10px 10px;
  border-radius: 0px;
  border: 1px solid rgba(255, 255, 255, 0.628);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
}
.lsp-folderBtn.active{
  border-color: rgb(255, 230, 0);
}

.lsp-toolsFiles{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lsp-fileLink{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 0px;
  border: 1px solid rgba(255, 255, 255, 0.728);
  background: rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.9);
  text-decoration: none;
}
.lsp-fileLink:hover{ border-color: rgb(255, 238, 0); }
.lsp-fileMeta{ opacity: 0.7; font-size: 12px; white-space: nowrap; }

/* ───────── LSP: Blog accordion ───────── */
.lsp-blogBar{
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgb(0,0,0);
  padding: 8px 0;
}

.lsp-blogBtn{
  font-family: var(--font);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 0px;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
}
.lsp-blogBtn:hover{ border-color: rgb(255, 238, 0); }

.lsp-blogList{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lsp-blogItem{
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.14);
}
.lsp-blogItem:hover{ border-color: rgb(255, 238, 0); }
.lsp-blogItem.open{ border-color: rgb(255, 238, 0); }

.lsp-blogHead{
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 10px;
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  font-family: var(--font);
}

.lsp-blogTitleRow{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.lsp-blogTitle{
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsp-blogDate{
  opacity: 0.65;
  font-size: 12px;
  white-space: nowrap;
}

.lsp-blogDesc{
  margin-top: 6px;
  opacity: 0.75;
  font-size: 12px;
  line-height: 1.35;
}

.lsp-blogBodyWrap{
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 10px 10px;
}

.lsp-blogBody{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  white-space: normal;
}



/* mobile filter dropdown toggle button (hidden on desktop) */
#filterToggleBtn{ display: none; }


/* ───────── Tools panel: equal row height + equal text size ───────── */
:root{
  --lsp-row-h: 42px;     /* change this to make both sides taller/shorter */
  --lsp-row-fs: 13px;    /* one shared text size */
  --lsp-row-pad-x: 10px;
}

/* make left folder buttons and right file rows match */
.lsp-folderBtn,
.lsp-fileLink{
  min-height: var(--lsp-row-h);
  height: var(--lsp-row-h);

  font-size: var(--lsp-row-fs);
  line-height: 1;

  padding: 0 var(--lsp-row-pad-x);

  display: flex;
  align-items: center;

  white-space: nowrap;
}

/* keep folder button left-aligned */
.lsp-folderBtn{
  justify-content: flex-start;
  width: 100%;
}

/* keep file link spaced name | meta */
.lsp-fileLink{
  justify-content: space-between;
}

/* prevent name from stretching the row / wrap */
.lsp-fileLink > span:first-child{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* make meta SAME size too (only lower opacity) */
.lsp-fileMeta{
  font-size: inherit;
  line-height: 1;
}