/*
  Visitron's site wears the application's own palette, so the page and the
  window look like one thing. Ported from SymDiary's site. The tokens are
  copied from frontend/src/theme.css; dark is plain :root and light is the
  override, because the window opens dark and the button moves it. --raised
  and --shadow are the site's own: the window has no raised button or drop
  shadow to borrow them from.

  Every path here is relative. The site is served from a sub-path at
  ernster.dev/Visitron/, so a leading slash would reach for the portfolio's
  root and find nothing.
*/

:root {
  color-scheme: dark;

  --bg: #14171c;
  --surface: #1e2229;
  --raised: #242a33;
  --text: #e6e9ed;
  --muted: #a3adb9;
  --border: #3a414c;
  --accent: #6aa6ff;
  --on-accent: #0b1320;
  --ring: #34d399;
  --shadow: rgba(0, 0, 0, 0.45);
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg: #f4f6f8;
  --surface: #ffffff;
  --raised: #eef1f5;
  --text: #1b1f24;
  --muted: #535c68;
  --border: #c9d0d8;
  --accent: #1a5fc8;
  --on-accent: #ffffff;
  --ring: #047857;
  --shadow: rgba(16, 24, 40, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

a {
  color: var(--accent);
}

.wrap {
  width: min(1080px, 92vw);
  margin: 0 auto;
}

/* The bar ------------------------------------------------------------ */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.bar .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
}

.mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--text);
}

.mark img {
  width: 34px;
  height: 34px;
}

.bar nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.bar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
}

.bar nav a:hover,
.bar nav a:focus-visible {
  color: var(--text);
  outline: none;
}

.toggle {
  background: none;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 3px;
  cursor: pointer;
  line-height: 0;
}

.toggle img {
  width: 26px;
  height: 26px;
}

.toggle:hover,
.toggle:focus-visible {
  border-color: var(--ring);
  outline: none;
}

/* Buttons ------------------------------------------------------------ */

.button {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 12px;
  font-weight: 620;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.12s ease;
}

.button.primary {
  background: var(--accent);
  color: var(--on-accent);
}

.button.plain {
  background: var(--raised);
  color: var(--text);
  border-color: var(--border);
}

.button:hover,
.button:focus-visible {
  border-color: var(--ring);
  outline: none;
  transform: translateY(-1px);
}

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

.hero {
  padding: 86px 0 54px;
}

/* The icon carries the product's face, so it opens the page at a size worth
   looking at rather than as a favicon nobody notices. It is drawn well inside
   the master's own resolution, so it stays crisp on a high-density screen. */
.hero .icon {
  width: 128px;
  height: 128px;
  margin-bottom: 26px;
  filter: drop-shadow(0 12px 26px var(--shadow));
}

.hero h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.hero .lead {
  font-size: clamp(1.1rem, 2.1vw, 1.32rem);
  color: var(--muted);
  max-width: 44ch;
  margin: 0 0 32px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.under {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* The version in the pill is stamped from VERSION by stamp_version.py, so the
   pill is shown from the start rather than waiting on a request. */
.pill {
  display: block;
  margin-bottom: 18px;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
  width: fit-content;
}

.shot {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 44px var(--shadow);
  background: var(--surface);
}

/* The frame hugs the screenshot, so a column wider than the image never shows
   a band of the frame's own ground beside it; on a narrower one it shrinks. */
.shot.wide {
  margin-top: 54px;
  width: fit-content;
  max-width: 100%;
}

figure {
  margin: 0;
}

figcaption {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 12px;
  text-align: center;
}

/* Sections ----------------------------------------------------------- */

section {
  padding: 70px 0;
  border-top: 1px solid var(--border);
}

/* A page that opens on a section rather than the hero already has the bar's
   rule above it, so the section does not draw a second one. */
main > section:first-child {
  border-top: 0;
}

section h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

section .intro {
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 40px;
  font-size: 1.06rem;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.step .number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.step h3 {
  margin: 0 0 8px;
  font-size: 1.18rem;
}

.step p {
  color: var(--muted);
  margin: 0 0 18px;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 46px;
  align-items: center;
}

.sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 28px;
  font-family: 'Consolas', 'SF Mono', 'Menlo', monospace;
  font-size: 0.92rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--text);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 26px;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.card .platform {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 66ch;
}

.plain-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: var(--muted);
}

.plain-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.66em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.plain-list li strong {
  color: var(--text);
  font-weight: 620;
}

.note {
  margin-top: 30px;
  padding: 18px 22px;
  border-left: 3px solid var(--border);
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 66ch;
}

/* The download section, in the house shape --------------------------- */

.eyebrow {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 12px;
}

/* The version here is stamped from VERSION by stamp_version.py, the one place
   a version is written by hand. */
.dl-version {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
}

.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

/* A column, so every card's parts line up across the row however much each one
   has to say. The buttons sat at three different heights when the cards were
   laid out as prose with a button dropped at the end of it. */
.dl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dl-card .ico {
  font-size: 30px;
}

.dl-card h3 {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 600;
}

.dl-card .req {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

/* One button per card and all three the same: the platform is the choice, so
   nothing about the button should suggest one of them is the recommended way
   in. It sits directly under the requirements line, at the same height in
   every card, because what follows it is allowed to differ in length. */
.dl-card .primary {
  display: inline-block;
  margin: 14px auto 4px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.dl-card .primary:hover,
.dl-card .primary:focus-visible {
  border-color: var(--ring);
  outline: none;
}

.dl-card .meta {
  color: var(--muted);
  font-size: 12.5px;
  min-height: 1.2em;
  margin: 0;
}

.dl-card .how {
  color: var(--muted);
  font-size: 13px;
  margin: 8px 0 0;
}

.dl-card code {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--text);
}

.dl-links {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 18px 0 0;
}

.dl-links a {
  color: var(--accent);
  text-decoration: none;
}

.dl-links a:hover,
.dl-links a:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* The donate button carries its artwork before its label. The mark is sized in
   em against the button's own type, so the two stay in proportion; at one line
   box it could not be read, so it takes 2.7 times that and the button is
   deliberately taller than a text-only one. It is scaled by height alone and
   keeps its own width. display: block drops the inline descender space that
   would otherwise add a stray couple of pixels under the picture. */
.btn-donate {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.btn-donate img {
  display: block;
  height: 2.7em;
  width: auto;
}

.donate-words {
  margin-bottom: 22px;
}

/* A feature section's picture and its words share a row; the picture keeps its
   own width rather than stretching, so a window shot is never blown up past
   the size it was taken at. */
.split figure.shot {
  width: 100%;
}

footer {
  border-top: 1px solid var(--border);
  padding: 44px 0 60px;
  color: var(--muted);
  font-size: 0.93rem;
}

footer p {
  max-width: 70ch;
}

footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 22px;
}

@media (max-width: 720px) {
  .hero {
    padding: 54px 0 36px;
  }

  .bar nav {
    gap: 14px;
  }

  .bar nav a.hide-small {
    display: none;
  }
}