/* Wikipedia context menu + modal
   Z-indices sit below the CRT scanlines (9999) and vignette (9998)
   in style.css, so both elements inherit the site's CRT treatment. */

/* ── Context menu ─────────────────────────────────────────────── */
.wiki-menu {
  display: none;
  position: fixed;
  z-index: 9990;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-family: vtFont, "Courier New", monospace;
  font-size: 0.85em;
  letter-spacing: 0.06em;
  min-width: 160px;
}

.wiki-menu__item {
  display: block;
  width: 100%;
  padding: 0.4em 0.8em;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #000;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: 1.4;
  cursor: pointer;
  color: #000;
}

.wiki-menu__item:last-child { border-bottom: none; }

.wiki-menu__item:hover,
.wiki-menu__item:focus-visible {
  background: #000;
  color: #fff;
  outline: none;
}

/* ── Backdrop ─────────────────────────────────────────────────── */
.wiki-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9980;
  background: rgba(0, 0, 0, 0.65);
  align-items: center;
  justify-content: center;
  padding: 1em;
}

/* ── Modal panel ──────────────────────────────────────────────── */
.wiki-modal {
  background: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-family: vtFont, "Courier New", monospace;
  font-size: 1em;
  line-height: 1.2;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

/* Title bar — exact same pinstripe pattern as __bar widget headers */
.wiki-modal__bar {
  background: #fff;
  color: #000;
  border-bottom: 2px solid #000;
  font-size: 0.85em;
  line-height: 1.6em;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0 0.5em;
  flex-shrink: 0;
}

.wiki-modal__bar::before,
.wiki-modal__bar::after {
  content: "";
  flex: 1;
  min-width: 0;
  height: 0.45em;
  background: repeating-linear-gradient(
    to bottom,
    #000 0 1px,
    transparent 1px 3px
  );
}

/* Scrollable body — overflow: auto creates a BFC that contains the float */
.wiki-modal__body {
  padding: 0.8em 0.9em;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Thumbnail floated right, contained by the BFC above.
   Canvas variant gets pixelated rendering so dither dots stay crisp. */
canvas.wiki-thumb {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.wiki-thumb {
  float: right;
  max-width: 110px;
  max-height: 130px;
  width: auto;
  height: auto;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  margin: 0 0 0.6em 0.8em;
  display: block;
}

.wiki-extract {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.3;
  word-break: break-word;
}

.wiki-extract + .wiki-extract { margin-top: 0.5em; }

/* Loading and error states */
.wiki-loading,
.wiki-status {
  margin: 0;
  padding: 1.2em 0;
  text-align: center;
  letter-spacing: 0.06em;
  font-size: 0.9em;
}

.wiki-loading i { font-style: normal; will-change: opacity; }
.wiki-loading i:nth-of-type(1) { animation: wiki-dot-1 1.2s linear infinite; }
.wiki-loading i:nth-of-type(2) { animation: wiki-dot-2 1.2s linear infinite; }
.wiki-loading i:nth-of-type(3) { animation: wiki-dot-3 1.2s linear infinite; }

@keyframes wiki-dot-1 {
  0%, 24%   { opacity: 0; }
  25%, 100% { opacity: 1; }
}
@keyframes wiki-dot-2 {
  0%, 49%   { opacity: 0; }
  50%, 100% { opacity: 1; }
}
@keyframes wiki-dot-3 {
  0%, 74%   { opacity: 0; }
  75%, 100% { opacity: 1; }
}

/* Footer row — same pattern as .__more links in other widgets */
.wiki-modal__more,
.wiki-modal__close {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #000;
  border-top: 2px solid #000;
  padding: 0.4em 0.8em;
  font-family: vtFont, "Courier New", monospace;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}

.wiki-modal__more:hover,
.wiki-modal__more:focus-visible,
.wiki-modal__close:hover,
.wiki-modal__close:focus-visible {
  background: #000;
  color: #fff;
  text-decoration: none;
  outline: none;
}