/* StikDex pre-v0.05 — desktop utility consolidation.
   The mobile More sheet and every mobile header rule remain authoritative. */
.desktop-more-shell{
  display:none;
  position:relative;
  flex:0 0 auto;
}

html:not(.stik-mobile-layout) .desktop-more-shell{
  display:block;
}

html:not(.stik-mobile-layout) .header-tools{
  min-width:0;
  flex-wrap:nowrap;
}

html:not(.stik-mobile-layout) .header-tools .search-wrap{
  width:clamp(220px,32vw,440px);
  min-width:220px;
  flex:1 1 440px;
}

html:not(.stik-mobile-layout) #ownerUtilityGroup,
html:not(.stik-mobile-layout) #themeToggle,
html:not(.stik-mobile-layout) #headerBackupExport,
html:not(.stik-mobile-layout) #headerBackupImport,
html:not(.stik-mobile-layout) #headerVersionButton{
  display:none!important;
}

.desktop-more-button{
  width:42px;
  height:42px;
  min-width:42px;
  display:grid;
  place-items:center;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--soft-line,var(--line));
  border-radius:11px;
  background:var(--panel-soft);
  color:var(--text);
  font:950 10px/1 inherit;
  letter-spacing:.08em;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}

.desktop-more-button>span{
  font-size:18px;
  line-height:1;
  letter-spacing:.06em;
  transform:translateY(-2px);
}

.desktop-more-button:hover,
.desktop-more-button:focus-visible,
.desktop-more-button[aria-expanded="true"]{
  border-color:color-mix(in srgb,var(--command-red) 58%,var(--line));
  background:color-mix(in srgb,var(--panel-soft) 86%,var(--command-red) 14%);
  color:var(--text);
  outline:none;
  transform:translateY(-1px);
}

.desktop-more-button:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--command-red) 18%,transparent);
}

.desktop-more-panel{
  position:absolute;
  z-index:420;
  top:calc(100% + 9px);
  right:0;
  width:min(360px,calc(100vw - 32px));
  max-height:calc(100dvh - var(--hz-header-h,94px) - 24px);
  display:grid;
  gap:12px;
  overflow:auto;
  overscroll-behavior:contain;
  padding:14px;
  border:1px solid color-mix(in srgb,var(--line) 82%,var(--command-red) 18%);
  border-radius:17px;
  background:color-mix(in srgb,var(--panel) 97%,#020711 3%);
  box-shadow:0 24px 58px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035);
  transform-origin:top right;
  animation:desktop-more-enter .15s ease-out both;
}

.desktop-more-panel[hidden]{display:none!important}

.desktop-more-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:1px 2px 4px;
}

.desktop-more-head strong{
  font-size:13px;
  letter-spacing:.02em;
}

.desktop-more-head span{
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.desktop-more-group{
  display:grid;
  gap:6px;
}

.desktop-more-group h3{
  margin:0;
  padding:0 3px;
  color:var(--muted);
  font-size:7.5px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.desktop-more-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

.desktop-more-action{
  min-width:0;
  min-height:52px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:11px;
  background:color-mix(in srgb,var(--panel-soft) 93%,transparent);
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease,transform .14s ease;
}

.desktop-more-action.wide{grid-column:1/-1}

.desktop-more-action>i{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:color-mix(in srgb,var(--command-red) 11%,var(--panel));
  color:color-mix(in srgb,var(--command-red) 76%,#fff);
  font-size:14px;
  font-style:normal;
  font-weight:950;
}

.desktop-more-action>span{
  min-width:0;
  display:grid;
  gap:2px;
}

.desktop-more-action strong{
  overflow:hidden;
  color:var(--text);
  font-size:9.5px;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.desktop-more-action small{
  overflow:hidden;
  color:var(--muted);
  font-size:7.5px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.desktop-more-action:hover,
.desktop-more-action:focus-visible{
  border-color:color-mix(in srgb,var(--command-red) 44%,var(--line));
  background:color-mix(in srgb,var(--panel-soft) 87%,var(--command-red) 13%);
  outline:none;
  transform:translateY(-1px);
}

.desktop-more-action:focus-visible{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--command-red) 22%,transparent);
}

body.view-only .desktop-more-shell,
body.trial-mode .desktop-more-shell,
body.play-mode .desktop-more-shell{
  display:none!important;
}

@media(min-width:761px) and (max-width:1260px){
  html:not(.stik-mobile-layout) .header-tools{flex-wrap:nowrap!important}
  html:not(.stik-mobile-layout) .header-tools .search-wrap{
    width:clamp(180px,28vw,340px)!important;
    min-width:180px!important;
  }
  .desktop-more-button{
    width:40px;
    min-width:40px;
    height:40px;
    padding:0;
  }
}

@keyframes desktop-more-enter{
  from{opacity:0;transform:translateY(-6px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .desktop-more-panel{animation:none!important}
  .desktop-more-button,.desktop-more-action{transition:none!important}
}
