/* One terminal window for every notice on every page. The page markup stays,
   and popup.js repeats it here, so a browser without JavaScript still shows it. */

.kb-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(0, 0, 0, 0.55);
}
.kb-popup-backdrop.is-leaving {
  animation: kb-popup-out 0.2s ease both;
}

.kb-popup-stack {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(32rem, calc(100vw - 2.4rem));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.kb-popup {
  pointer-events: auto;
  overflow: hidden;
  border: 1px solid var(--moss, #355b4d);
  border-radius: 10px;
  background: color-mix(in srgb, var(--pine-deep, #0b1b17) 92%, black);
  color: var(--paper, #e8eef9);
  box-shadow:
    0 0 0 1px rgba(103, 223, 177, 0.18),
    0 18px 50px rgba(0, 0, 0, 0.45);
  animation: kb-popup-in 0.22s ease-out both;
}

.kb-popup.is-leaving {
  animation: kb-popup-out 0.2s ease both;
}

.kb-popup-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--moss, #355b4d);
  background: color-mix(in srgb, var(--forest, #18332b) 75%, black);
}

.kb-popup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.kb-popup-dot-close {
  background: #ff5f57;
}
.kb-popup-dot-min {
  background: #febc2e;
}
.kb-popup-dot-max {
  background: #28c840;
}

.kb-popup-title {
  margin-left: 0.35rem;
  font: 600 0.72rem var(--mono, ui-monospace, monospace);
  letter-spacing: 0.03em;
  color: var(--sage-dim, #8da99a);
}

.kb-popup-x {
  margin-left: auto;
  padding: 0 0.35rem;
  border: 0;
  background: transparent;
  color: var(--sage-dim, #8da99a);
  font: 600 1rem var(--mono, ui-monospace, monospace);
  line-height: 1;
  cursor: pointer;
}
.kb-popup-x:hover,
.kb-popup-x:focus-visible {
  color: var(--paper, #e8eef9);
}

.kb-popup-body {
  margin: 0;
  padding: 0.85rem 1rem 0.7rem;
  font: 0.82rem/1.6 var(--mono, ui-monospace, monospace);
  color: var(--sage, #bbd2c7);
}
.kb-popup-body::before {
  content: "$ ";
  color: var(--brass, #67dfb1);
}
.kb-popup-error .kb-popup-body::before {
  content: "! ";
  color: var(--coral, #ff917e);
}
.kb-popup-warning .kb-popup-body::before {
  content: "? ";
  color: var(--amber, #f0c96d);
}

.kb-popup-footer {
  padding: 0 1rem 0.75rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.kb-popup-decline {
  padding: 0.35rem 1rem;
  border: 1px solid var(--moss, #355b4d);
  border-radius: 6px;
  background: transparent;
  color: var(--sage, #bbd2c7);
  font: 600 0.75rem var(--mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.kb-popup-decline:hover,
.kb-popup-decline:focus-visible {
  border-color: var(--sage, #bbd2c7);
  color: var(--paper, #e8eef9);
}

.kb-popup-ok {
  padding: 0.35rem 1rem;
  border: 1px solid var(--moss, #355b4d);
  border-radius: 6px;
  background: color-mix(in srgb, var(--forest, #18332b) 80%, black);
  color: var(--brass, #67dfb1);
  font: 600 0.75rem var(--mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}
.kb-popup-ok:hover,
.kb-popup-ok:focus-visible {
  border-color: var(--brass, #67dfb1);
  background: color-mix(in srgb, var(--brass, #67dfb1) 12%, transparent);
  color: var(--paper, #e8eef9);
}

/* The popup replaces the inline result. The class is added by script, so the
   notice stays readable when JavaScript does not run. */
.kb-popup-source {
  display: none;
}

@keyframes kb-popup-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes kb-popup-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 640px) {
  .kb-popup-stack {
    width: calc(100vw - 1.2rem);
  }
}