/* ===== GLOBAL MENU (shared) — expandable single-window dropdown ===== */

.global-menu{
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 9999;

  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #aaff01;
}

/* one container that expands in width on hover/focus */
.gm-wrap{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;

  width: fit-content;
  max-width: 44px;     /* closed width */
  overflow: hidden;    /* clips dropdown while collapsed */

  border: 1px solid #aaff01;
  background: rgba(10, 10, 10, 0.70);
  border-radius: 10px;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: max-width 0.22s ease;
}

/* expand */
.gm-wrap:hover,
.gm-wrap:focus-within{
  max-width: 360px;
}

/* trigger button — fixed square, so icon can be truly centered */
.gm-trigger{
  appearance: none;
  -webkit-appearance: none;

  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;
  border-radius: 10px;

  display: grid;
  place-items: center;

  color: #aaff01;
  cursor: default;

  opacity: 0.78;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.gm-trigger:hover{
  opacity: 1;
  transform: translateX(-2px);
  background: rgba(170,255,1,0.06);
}

.gm-trigger:focus-visible{
  outline: none;
}

/* icon — no extra line box */
.gm-icon{
  font-size: 26px;
  line-height: 1;
  display: block;
  transform: translateY(0.5px); /* оптическая компенсация (очень лёгкая) */
}

/* dropdown panel */
.gm-panel{
  display: flex;
  flex-direction: column;

  width: max-content;

  max-height: 0;
  padding: 0 12px;
  gap: 0;
  overflow: hidden;

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.12s ease,
    max-height 0.22s ease,
    padding 0.22s ease,
    gap 0.22s ease;
}

/* open state */
.gm-wrap:hover .gm-panel,
.gm-wrap:focus-within .gm-panel{
  max-height: 520px;
  padding: 6px 18px 10px 12px;
  gap: 6px;

  opacity: 1;
  pointer-events: auto;
}

/* items */
.gm-item{
  display: flex;
  align-items: baseline;
  gap: 10px;

  white-space: nowrap;

  padding: 6px 0;
  border-bottom: 1px solid rgba(170,255,1,0.25);

  color: #aaff01;
  text-decoration: none;

  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;

  opacity: 0.85;
  transition: transform 0.15s ease, opacity 0.15s ease, border-bottom-color 0.15s ease;
}

.gm-item:visited{ color:#aaff01; }

.gm-item:hover{
  opacity: 1;
  transform: translateX(6px);
  border-bottom-color: rgba(170,255,1,0.65);
}

.gm-num{
  opacity: 0.6;
  min-width: 26px;
}

/* separator */
.gm-sep{
  height: 1px;
  margin: 6px 0 2px 0;
  background: rgba(170,255,1,0.18);
}

/* mobile */
@media (max-width: 420px){
  .global-menu{ top: 10px; left: 10px; }
  .gm-wrap{ max-width: 44px; }
  .gm-wrap:hover,
  .gm-wrap:focus-within{ max-width: 320px; }
}

/* active page highlight */
.gm-item.is-active{
  opacity: 1;
  transform: none;
  border-bottom-color: rgba(170,255,1,0.95);
}

.gm-item.is-active .gm-num{
  opacity: 1;
}

.gm-item.is-active::before{
  content: "▸";
  opacity: 0.9;
  margin-right: 2px;
}

/* prevent page-wide styles from affecting the menu */
.global-menu, .global-menu *{
  box-sizing: border-box;
}

.global-menu .gm-item{
  margin: 0;
  padding-left: 0;
  padding-right: 6px;
}

.global-menu .gm-item:hover{
  padding-left: 0;
  padding-right: 6px;
}

/* ===== Responsive base (global) ===== */
*{ box-sizing: border-box; }
html, body { width:100%; max-width:100%; }
img, video, canvas { max-width:100%; height:auto; display:block; }
pre, code { white-space: pre-wrap; word-break: break-word; }
:where(h1,h2,h3,p){ max-width: 100%; }

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

@media (max-width: 700px){
  body{ overflow-x: hidden; }

  .container{
    width: min(1100px, 100% - 24px);
  }

  .nav, .nav-buttons, .page-nav, .pagination{
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
}

@media (max-width: 420px){
  body{ font-size: 15px; }
}