/* Omarchy VM Manager page: the Nocturne content-page system (page.css) re-tinted with the
   manager's own Omarchy green, on a slightly green-cast night background. */

body.theme-omarchy {
  --color-bg: #12160f;
  --color-surface: #1c2218;
  --color-accent: #9ece6a;
  --color-accent-200: #dcf0c4;
  --color-accent-300: #c2e59c;
  --color-accent-400: #9ece6a;
  --color-accent-500: #7fae4c;
  --color-accent-900: #1f2a17;
  --color-neutral-800: #323b2c;
  --shadow-md: 0 0 0 1px #3d4836, 0 6px 18px rgba(0,0,0,0.55);
  background:
    radial-gradient(60% 40% at 80% 0%, color-mix(in srgb, var(--color-accent-400) 14%, transparent) 0%, transparent 70%),
    radial-gradient(50% 30% at 0% 30%, color-mix(in srgb, var(--color-accent-500) 7%, transparent) 0%, transparent 70%),
    var(--color-bg);
  background-repeat: no-repeat;
}
.theme-omarchy ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.theme-omarchy .btn-primary { color: var(--color-bg); background: var(--color-accent); border-color: var(--color-accent); }
.theme-omarchy .btn-primary:hover { color: var(--color-bg); background: var(--color-accent-300); }
.theme-omarchy .btn-ghost { color: var(--color-accent-300); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }
.theme-omarchy .btn-ghost:hover { color: var(--color-accent-200); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

/* Hero with the app icon. */
.ovm-hero-head { display: flex; align-items: center; gap: 20px; }
.ovm-hero-head img { width: 76px; height: 76px; flex: none; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)); }
.ovm-mark { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent-300); }

/* Screenshots of the real app. */
.ovm-shot { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ovm-shot img, .ovm-shot video {
  display: block; width: 100%; height: auto; border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 24px 60px rgba(0,0,0,0.55);
}
.ovm-shot figcaption { font-size: 13px; color: var(--color-neutral-400); }
.ovm-hero-shot { margin-top: clamp(40px, 6vh, 64px); }

/* The dev-vm pairing callout. */
.ovm-pair {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px 48px; align-items: center;
  padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-accent-900), var(--color-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.ovm-pair h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 12px; }
.ovm-pair p { color: var(--color-neutral-300); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.ovm-pair .actions { justify-content: flex-start; }

/* Status note and trademark credit. */
.ovm-status { font-size: 14px; line-height: 1.6; color: var(--color-neutral-300); max-width: 720px; text-wrap: pretty; }
.ovm-status strong { color: var(--color-accent-300); font-weight: 500; }
.ovm-credit { font-size: 12px; color: var(--color-neutral-400); max-width: 720px; }

/* The app tour and screenshot gallery. */
.ovm-tour { max-width: 880px; }
.ovm-shot a { display: block; border-radius: var(--radius-lg); }
.ovm-shot figcaption strong { color: var(--color-text); font-weight: 500; }
.ovm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 32px 24px; }
/* Column widths match the two images' aspect ratios, so they share a height. */
.ovm-byo-shots { display: grid; grid-template-columns: 2.24fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 640px) { .ovm-byo-shots { grid-template-columns: 1fr; } }