/*
  SymChit's site wears the application's own palette, so the page and the
  window look like one thing. 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.

  Every path here is relative. The site is served from a sub-path while it is
  previewed at ernster.dev/SymChit/, 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%;
  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;
}

.pill {
  display: none;
  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);
}

.shot.wide {
  margin-top: 54px;
}

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);
}

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 is never written into the page; site.js fills this from the
   newest release. Until there is one it reads "Latest release", which is true
   and says nothing that could go stale. */
.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;
}

.donate {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.donate img {
  width: 96px;
  height: 96px;
}

.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;
  }
}