/*
 * formal-ai Desktop download page (issue #347).
 *
 * Adapted from the konard/vk-bot-desktop reference stylesheet, retargeted to
 * formal-ai's own palette so the page is visually consistent with the chat app
 * (same light #eef2f1 / #1e252b and dark #181a1b / #ece7df surfaces, same
 * #175f4f accent). Theme is driven by the `data-theme` attribute that the chat
 * app and download.js both set on <html>, so a visitor's choice is shared.
 */

:root {
  color-scheme: light;
  --bg: #eef2f1;
  --surface: #fbfcfd;
  --surface-strong: #e6ece9;
  --text: #1e252b;
  --muted: #5d6965;
  --line: #d6dde1;
  --accent: #175f4f;
  --accent-strong: #0f4a3d;
  --on-accent: #ffffff;
  --warm: #c0492f;
  --shadow: 0 18px 44px rgba(29, 36, 34, 0.12);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181a1b;
  --surface: #202322;
  --surface-strong: #2b302e;
  --text: #ece7df;
  --muted: #a7b1ab;
  --line: #343a3d;
  --accent: #2c8f71;
  --accent-strong: #4fc3a0;
  --on-accent: #ffffff;
  --warm: #f08b70;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

/*
 * Before download.js sets an explicit data-theme (and for the <noscript>
 * fallback), follow the OS preference so the first paint matches the chat app.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #181a1b;
    --surface: #202322;
    --surface-strong: #2b302e;
    --text: #ece7df;
    --muted: #a7b1ab;
    --line: #343a3d;
    --accent: #2c8f71;
    --accent-strong: #4fc3a0;
    --warm: #f08b70;
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  }
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background: var(--bg);
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.page-shell {
  display: block;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

/* --- Top bar: brand + language/theme switchers ---------------------------- */

.download-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 8px;
}

.brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 850;
  text-decoration: none;
}

.brand-mark {
  color: var(--accent);
  font-size: 1.1rem;
}

.topbar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.locale-switch,
.theme-switch,
.os-tabs {
  display: inline-flex;
  width: fit-content;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.locale-switch button,
.theme-switch button,
.os-tabs button {
  min-width: 44px;
  border: 0;
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.locale-switch button.active,
.theme-switch button.active,
.os-tabs button.active {
  color: var(--surface);
  background: var(--text);
}

.locale-switch button:focus-visible,
.theme-switch button:focus-visible,
.os-tabs button:focus-visible,
.primary-download:focus-visible,
.download-primary-card:focus-visible,
.download-chip:focus-visible,
.support-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Hero ------------------------------------------------------------------ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: 44px;
  align-items: center;
  padding: 28px 0 48px;
}

.hero-copy {
  display: grid;
  gap: 20px;
}

.eyebrow {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  max-width: 12ch;
  font-size: 3.7rem;
  line-height: 0.98;
}

.summary {
  max-width: 34rem;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.55;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--muted);
}

.status-row strong {
  color: var(--text);
}

.download-panel {
  display: grid;
  gap: 14px;
  max-width: 440px;
}

.primary-download {
  display: grid;
  gap: 4px;
  min-height: 78px;
  justify-content: start;
  align-content: center;
  border-radius: 8px;
  padding: 17px 20px;
  color: var(--on-accent);
  background: var(--accent);
  text-decoration: none;
  box-shadow: var(--shadow);
}

.primary-download:hover {
  background: var(--accent-strong);
}

.primary-download span {
  font-size: 0.9rem;
  font-weight: 750;
}

.primary-download strong {
  font-size: 1.25rem;
}

.primary-download em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 700;
}

.primary-download.empty {
  color: var(--text);
  background: var(--surface-strong);
  box-shadow: none;
}

.support-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--muted);
}

.support-links a {
  font-weight: 700;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

/* --- Hero media: faux app window + preview screenshot --------------------- */

.hero-media {
  position: relative;
}

.window-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.window-titlebar {
  display: grid;
  grid-template-columns: 92px 1fr 92px;
  min-height: 36px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 12px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.window-title {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-lights,
.window-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.traffic-lights span,
.window-actions span {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(29, 36, 34, 0.2);
}

.traffic-lights span {
  border-radius: 50%;
}

.traffic-lights span:nth-child(1) {
  background: #f26b5f;
}

.traffic-lights span:nth-child(2) {
  background: #f3bf4f;
}

.traffic-lights span:nth-child(3) {
  background: #61c454;
}

.window-actions {
  justify-content: end;
}

.window-actions span {
  border-radius: 2px;
  background: transparent;
}

.hero-media.macos .window-actions,
.hero-media.linux .window-actions {
  visibility: hidden;
}

.hero-media.windows .traffic-lights {
  visibility: hidden;
}

.hero-media.windows .window-titlebar {
  min-height: 34px;
  color: #ffffff;
  background: #1f5fbf;
}

.hero-media.windows .window-actions span {
  border-color: rgba(255, 255, 255, 0.72);
}

.hero-media.linux .window-titlebar {
  color: #ffffff;
  background: #343033;
}

.hero-media.linux .traffic-lights {
  order: 3;
  justify-content: end;
}

.hero-media.linux .traffic-lights span {
  background: #f28c35;
}

/* The generated preview screenshot is hidden until it loads (.has-preview);
 * until then a CSS faux-transcript stands in so the page never shows a broken
 * image and screenshots taken before binaries exist still look intentional. */
.window-preview {
  display: none;
  width: 100%;
  min-height: 340px;
  object-fit: cover;
  background: var(--surface-strong);
}

.window-frame.has-preview .window-preview {
  display: block;
}

.window-frame.has-preview .window-placeholder {
  display: none;
}

.window-placeholder {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 340px;
  padding: 26px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(23, 95, 79, 0.08), transparent 60%),
    var(--surface);
}

.ph-line {
  height: 40px;
  border-radius: 12px;
  background: var(--surface-strong);
}

.ph-line.ph-assistant {
  width: 72%;
  border: 1px solid var(--line);
}

.ph-line.ph-user {
  width: 58%;
  margin-left: auto;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}

.ph-line.short {
  height: 26px;
  width: 40%;
}

.ph-line.ph-user.short {
  margin-left: auto;
}

/* --- All downloads --------------------------------------------------------- */

.downloads {
  display: grid;
  gap: 24px;
  padding: 34px 0 56px;
  border-top: 1px solid var(--line);
}

.downloads h2,
.install-macos h2,
.verification h2,
.agent-callout h2 {
  margin-top: 6px;
  font-size: 2rem;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.download-group {
  display: grid;
  gap: 10px;
  align-content: start;
}

.download-group h3 {
  font-size: 1rem;
}

.download-family {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.download-primary-card {
  display: grid;
  gap: 4px;
  min-height: 82px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px 16px;
  background: var(--surface);
  text-decoration: none;
}

.download-primary-card:hover {
  border-color: var(--accent);
}

.download-primary-card.unavailable {
  color: var(--muted);
  background: var(--surface-strong);
}

.download-primary-card span {
  font-weight: 800;
}

.download-primary-card code {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.78rem;
}

.download-secondary-list {
  display: grid;
  min-width: 96px;
  gap: 8px;
}

.download-chip {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.download-chip:hover {
  border-color: var(--accent);
}

.download-chip.unavailable {
  color: var(--muted);
  background: var(--surface-strong);
}

.verify-note {
  color: var(--muted);
}

/* --- In-process agent callout --------------------------------------------- */

.agent-callout {
  display: grid;
  gap: 12px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  background: var(--surface);
}

.agent-callout p {
  max-width: 60rem;
  color: var(--muted);
  line-height: 1.5;
}

/* --- macOS Gatekeeper + verification --------------------------------------- */

.install-macos,
.verification {
  display: grid;
  gap: 16px;
  padding: 34px 0 28px;
  border-top: 1px solid var(--line);
}

.verification {
  padding-bottom: 64px;
}

.install-macos-why,
.install-macos-footer {
  color: var(--muted);
  line-height: 1.45;
}

.install-macos-grid,
.verification-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.install-macos details,
.verification details {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--surface);
}

.install-macos summary,
.verification summary {
  cursor: pointer;
  font-weight: 850;
}

.install-macos ol,
.verification ol {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.45;
}

/* Issue #479: macOS Gatekeeper screenshots inside the System Settings steps.
   The PNGs are transparent with a baked-in drop shadow, so they need no border
   or background — they float over the surface like a real macOS dialog. */
.install-macos-screenshots {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  justify-items: center;
}

.install-macos-screenshots img {
  display: block;
  max-width: 100%;
  height: auto;
}

.install-macos-screenshots figcaption {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.verification p {
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.verification-tool {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.verification-tool p {
  margin: 0;
}

.verification-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.verification-inputs label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.verification-inputs input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  color: var(--text);
  background: var(--surface-strong);
  font: inherit;
}

.verification-result {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: var(--surface-strong);
  font-weight: 800;
}

.verification-result.match {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.verification-result.mismatch,
.verification-result.missing {
  border-color: var(--warm);
  color: var(--warm);
}

.command-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.command-list div {
  display: grid;
  gap: 5px;
}

.command-list strong {
  font-size: 0.82rem;
}

.command-list code {
  display: block;
  overflow-wrap: anywhere;
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--surface-strong);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.4;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 860px) {
  .page-shell {
    width: min(100% - 24px, 720px);
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 12px 0 32px;
  }

  h1 {
    max-width: 14ch;
    font-size: 2.7rem;
  }

  .hero-copy {
    gap: 14px;
  }

  .hero-media {
    order: -1;
  }

  .window-preview {
    aspect-ratio: 16 / 10;
    min-height: 0;
    max-height: 240px;
  }

  .window-placeholder {
    min-height: 0;
  }

  .download-grid {
    grid-template-columns: 1fr;
  }

  .install-macos-grid,
  .verification-grid,
  .verification-inputs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .os-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .os-tabs button {
    min-width: 0;
    padding-inline: 8px;
  }

  .download-family {
    grid-template-columns: 1fr;
  }

  .download-secondary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
