/* Styles every popup's page shares (loaded by index.html). Each popup's own are in
   popups/<id>/popup.css, loaded when it first opens. The popup itself (backdrop, window, how it
   opens) is designed in library-design's popup editor; this is only what's inside the window.
   Scope rules under .popup-content (all popups) or .popup-<id> (one).

   Pages here read like an ordinary indie web page (the old j031.dev: Ariadne palette, Share Tech
   Mono, panels with gradient title bars), sitting on the pixel art rather than melting into it.
   From the popup editor: --popup-ink, --popup-link, --popup-font, --popup-size, and --px (one
   backdrop pixel on screen). For phone-sized screens use @container popups (max-width: 640px). */
.popup-content {
  --bg: #040e0d; --pattern: #152a26; --panel: #0a1816; --well: #040e0d; --ink: #f5e2c5; --muted: #d8c5aa;
  --accent: #3dd1b0; --edge: #7f7060; --shadow: #040e0d; --bar: #7ad9a8; --bar-end: #3dd1b0; --bar-text: #040e0d;
  --body-font: 'Share Tech Mono', 'Courier New', monospace;
}
.popup-content:has(> .popup-flow > .panel) .popup-flow { min-height: 100%; display: flex; flex-direction: column; }
.popup-content .panel {
  flex: 1; box-sizing: border-box; display: flex; flex-direction: column;
  color: var(--ink); font: 15px/1.5 var(--body-font);
  background: var(--panel); border: 3px double var(--edge); box-shadow: inset 0 0 0 2px var(--shadow);
}
.popup-content .panel .titlebar {
  margin: 2px; padding: 3px 8px; min-height: 22px; color: var(--bar-text); font-size: 0.875rem; font-weight: bold; line-height: 1.4;
  background: linear-gradient(90deg, var(--bar), var(--bar-end));
  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); border-bottom: 1px solid var(--shadow);
}
.popup-content .panel-body { padding: 10px 12px 14px; }
.popup-content .panel h2 { font-size: 1.3rem; margin: 0 0 10px; line-height: 1.3; }
.popup-content .panel p { margin: 0 0 10px; }
.popup-content .panel a { color: var(--accent); text-underline-offset: 3px; }
.popup-content .panel a:hover { color: var(--ink); }
.popup-content .panel ::selection { color: var(--well); background: var(--accent); }
.popup-content .panel :is(input, textarea, button) { font: inherit; color: var(--ink); }
.popup-content .panel :is(input, textarea) { background: var(--well); border: 1px inset var(--edge); padding: 3px 6px; }
.popup-content .panel button { background: var(--panel); border: 2px outset var(--edge); padding: 1px 10px; cursor: pointer; }
.popup-content .micro { font-size: 0.75rem; color: var(--muted); }