/* =================================================================
   Modals · glossary floating window + keyboard shortcuts popover
================================================================= */

/* ===== Glossary Window ===== */
.glossary-window {
  position: fixed;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow:
    0 28px 80px rgba(10, 15, 30, 0.22),
    0 6px 18px rgba(10, 15, 30, 0.1);
  width:  clamp(300px, 28vw, 560px);
  height: clamp(240px, 36vh, 440px);
  min-width: 260px; min-height: 180px;
  max-width: 92vw;  max-height: 92vh;
  display: flex; flex-direction: column;
  z-index: 100; overflow: hidden;
  border-radius: 2px;
  animation: gwIn .2s ease-out;
  font-size: var(--fs-md);
}
@keyframes gwIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.glossary-window .gw-head {
  flex-shrink: 0;
  height: calc(var(--fs-md) * 2.8);
  padding: 0 12px 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--paper);
  cursor: move; user-select: none; gap: 10px;
}
.glossary-window .gw-head::after {
  /* Visual hint for click-to-maximize */
  content: "⤢";
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 253, 247, 0.35);
  margin-left: 4px;
  transition: color .2s;
}
.glossary-window:hover .gw-head::after { color: rgba(255, 253, 247, 0.7); }
.glossary-window.gw-maximized .gw-head::after { content: "⤡"; }

/* Smooth transition when toggling maximize / restore */
.glossary-window.gw-transitioning {
  transition:
    left   .26s cubic-bezier(.2, .7, .2, 1),
    top    .26s cubic-bezier(.2, .7, .2, 1),
    width  .26s cubic-bezier(.2, .7, .2, 1),
    height .26s cubic-bezier(.2, .7, .2, 1);
}

/* When maximized, hide the corner resize grip — the whole rect is owned by toggle */
.glossary-window.gw-maximized .gw-resize { opacity: 0; pointer-events: none; }

/* Maximized mode — content legibility: larger typography + generous spacing */
.glossary-window.gw-maximized .gw-body {
  padding: var(--sp-6) var(--sp-7) var(--sp-7);
  font-size: var(--fs-lg);
  line-height: 1.8;
  max-width: 72ch;
  margin: 0 auto;
}
.glossary-window.gw-maximized .gw-body h4 {
  font-size: var(--fs-h3);
  letter-spacing: -0.022em;
  margin-bottom: 4px;
}
.glossary-window.gw-maximized .gw-body .gw-en {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.glossary-window.gw-maximized .gw-body p { margin: 0 0 var(--sp-3); }
.glossary-window.gw-maximized .gw-head {
  height: calc(var(--fs-md) * 3.2);
}
.glossary-window.gw-maximized .gw-head .gw-term {
  font-size: var(--fs-md);
}
.glossary-window .gw-tag {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 253, 247, 0.65); flex-shrink: 0;
}
.glossary-window .gw-term {
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-sm); letter-spacing: -0.005em;
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.glossary-window .gw-close {
  width: 22px; height: 22px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 253, 247, 0.7);
  border-radius: 2px;
  transition: background .15s, color .15s;
}
.glossary-window .gw-close:hover {
  background: rgba(255, 253, 247, 0.12);
  color: var(--paper);
}
.glossary-window .gw-body {
  flex: 1;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  overflow-y: auto;
  font-size: var(--fs-md); line-height: 1.75;
  color: var(--ink-2); cursor: text;
}
.glossary-window .gw-body h4 {
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-xl); line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0 0 2px; color: var(--ink);
}
.glossary-window .gw-en {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-3); display: block;
}
.glossary-window .gw-body p { margin: 0 0 10px; }
.glossary-window .gw-body p:last-child { margin: 0; }
.glossary-window .gw-body b { color: var(--blue-deep); font-weight: 700; }

.glossary-window .gw-resize {
  position: absolute; right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg,
      transparent 0 55%,
      var(--muted) 55% 62%,
      transparent 62% 72%,
      var(--muted) 72% 79%,
      transparent 79%);
  opacity: 0.6;
}
.glossary-window .gw-resize:hover { opacity: 1; }

/* ===== Keyboard Shortcuts Popover ===== */
.shortcuts-popover {
  position: fixed;
  bottom: calc(var(--script-h) + 12px);
  right: 20px;
  width: clamp(320px, 30vw, 480px);
  max-height: min(70vh, 520px);
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow:
    0 28px 80px rgba(10, 15, 30, 0.22),
    0 6px 18px rgba(10, 15, 30, 0.1);
  z-index: 40;
  display: flex; flex-direction: column;
  animation: gwIn .2s ease-out;
  transition: bottom .3s cubic-bezier(.2,.7,.2,1);
}
.stage.script-collapsed ~ .shortcuts-popover { bottom: calc(var(--script-bar-h) + 12px); }
.stage.script-hidden    ~ .shortcuts-popover { bottom: 12px; }
.shortcuts-popover[hidden] { display: none; }

.shortcuts-popover .sp-head {
  flex-shrink: 0;
  height: calc(var(--fs-md) * 2.4);
  padding: 0 12px 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--paper); gap: 10px;
}
.shortcuts-popover .sp-label {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 253, 247, 0.85);
}
.shortcuts-popover .sp-close {
  width: 22px; height: 22px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  color: rgba(255, 253, 247, 0.7);
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
.shortcuts-popover .sp-close:hover {
  background: rgba(255, 253, 247, 0.12);
  color: var(--paper);
}
.shortcuts-popover .sp-close svg { width: 14px; height: 14px; }
.shortcuts-popover .sp-body {
  overflow-y: auto; flex: 1;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sp-section { display: flex; flex-direction: column; gap: 6px; }
.sp-section-title {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.sp-row {
  display: grid; grid-template-columns: 7.5em 1fr;
  align-items: center; gap: var(--sp-3);
  padding: 5px 0; font-size: var(--fs-sm);
}
.sp-row .sp-keys { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sp-row .sp-desc { color: var(--ink-2); }
.sp-row kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 2px 7px;
  border: 1px solid var(--ink-2); border-bottom-width: 2px;
  border-radius: 4px; background: var(--bg);
  color: var(--ink); font-family: var(--mono);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0;
}