/* The plugin pages, /trance/, /retro/ and /galvanic/ (trance.php, retro.php, galvanic.php): layout on top of format.css, which
   gives the hero, sections, splits and cards. The demo is the plugin's own browser build in a frame
   (assets/<slug>/demo/), dark whatever the site's theme, so it sits on a dark band. */

.wl-fonts-pending :is(.plugin-presets h3) { visibility: hidden; }

.plugin-fine { color: var(--slate); font-size: 0.95rem; margin: 16px 0 0; }

.plugin-page kbd { font: 600 0.8em/1 var(--mono); padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-2); }

/* the frame is as wide as the editor wants (1200 px) and no wider; it sizes its height from the
   page inside (assets/plugin.js), which starts from the editor's aspect plus the deck under it */
.plugin-stage { width: min(1240px, 100% - 2 * var(--gutter)); margin: 22px auto 0; }
.plugin-demo {
  display: block; width: 100%; border: 0; border-radius: 12px; background: #07071a;
  height: calc((min(1240px, 100vw - 2 * var(--gutter))) * 760 / 1200 + 168px);
  box-shadow: 0 18px 50px rgba(7, 7, 26, 0.28), 0 0 0 1px rgba(150, 140, 255, 0.16);
}
.plugin-note { color: var(--slate); font-size: 0.9rem; margin: 12px 0 0; }

.plugin-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.plugin-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 18px; margin-top: 8px; }
.plugin-presets h3 {
  --display: "Anybody", "Anybody 700 105", "Instrument Sans", system-ui, sans-serif;
  font: 700 1.05rem/1.2 var(--display);
  font-variation-settings: "wdth" 105;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--amber);
}
.plugin-presets h3 span { font: 500 0.75rem/1 var(--mono); color: var(--slate); margin-left: 4px; }
.plugin-presets ul { list-style: none; margin: 0; padding: 0; }
.plugin-presets li { margin: 5px 0; font-size: 0.93rem; color: var(--slate); }

.plugin-steps li { color: var(--ink); }

/* galvanic: a minute of the editor on video, and the genome strand by strand */
.plugin-video { display: block; width: 100%; max-width: 1080px; margin: 18px auto 0; border-radius: 12px; background: #09070f;
  aspect-ratio: 1920 / 1216; box-shadow: 0 18px 50px rgba(7, 7, 26, 0.28), 0 0 0 1px rgba(150, 140, 255, 0.16); }
.wl-fonts-pending :is(.plugin-genes h3) { visibility: hidden; }
.plugin-genes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 22px; margin-top: 8px; }
.plugin-genes h3 {
  --display: "Anybody", "Anybody 700 105", "Instrument Sans", system-ui, sans-serif;
  font: 700 1.05rem/1.2 var(--display); font-variation-settings: "wdth" 105;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--strand, var(--amber));
}
.plugin-genes .strand-source { --strand: #e39a0b; }
.plugin-genes .strand-flesh { --strand: #e0446a; }
.plugin-genes .strand-nerve { --strand: #1d9fd8; }
.plugin-genes .strand-aura { --strand: #8a63e0; }
.plugin-genes ul { list-style: none; margin: 0; padding: 0; }
.plugin-genes li { margin: 6px 0; font-size: 0.93rem; color: var(--slate); }
.plugin-genes li b { color: var(--ink); font-weight: 600; margin-right: 4px; }

@media (max-width: 900px) {
  .plugin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plugin-genes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plugin-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .plugin-cards { grid-template-columns: minmax(0, 1fr); }
  .plugin-genes { grid-template-columns: minmax(0, 1fr); }
  .plugin-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plugin-demo { border-radius: 8px; }
}