/* virtsync store — base stylesheet (loaded on every page).
 * Served at /static/base.css: by nginx from disk in production, by the app's own
 * /static handler in dev (make dev) / when nginx isn't in front.
 *
 * Design intent (audience = sysadmins / infra engineers): restrained, text-first,
 * "serious tool" not "SaaS template". Dark by default (this audience lives in
 * terminals); a light variant tracks the OS setting. The code/demo block is a
 * first-class element — it does the selling. It's a plain <pre> on a slightly
 * different background, not fake window chrome.
 *
 * Scope: normalisation, the shell from base.html (header/footer/brand column),
 * global typography, and everything the home page (index.html) renders — the
 * demo block, the pricing tiers and the buttons. Pages that need more pull in
 * their own stylesheet via base.html's {% block head %} (forms.css, admin.css).
 *
 * Two sections only:
 *   1. NORMALISATION — cross-browser reset; no site styling.
 *   2. SITE          — everything virtsync-specific.
 */

/* ── 1. NORMALISATION ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg {
  display: block;
  max-width: 100%;
}
input, button {
  font: inherit;
  color: inherit;
}

/* ── 2. SITE ────────────────────────────────────────────────────────────────── */

/* Design tokens. Dark is the default; the light block below only overrides what
 * changes (the terminal deliberately stays dark in light mode). */
:root {
  --bg: #111;
  --surface: #112;
  --surface-2: #122;
  --border: #233;
  --fg: #eee;
  --muted: #9ab;
  --accent: #59f;
  --accent-hover: #7af;
  --on-accent: #012;
  --term-bg: #111;
  --term-fg: #dde;
  --ok: #2f2;
  --slow: #f00;
  --radius: 10px;
  --wrap: 64rem;              /* the one shared column (~1024px) */
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #eff;
    --surface: #fff;
    --surface-2: #eee;
    --border: #dee;
    --fg: #223;
    --muted: #567;
    --accent: #26e;
    --accent-hover: #25d;
    --on-accent: #fff;
  }
}

/* The original virtsync title face (Fertigo Pro Regular, exljbris). */
@font-face {
  font-family: 'Fertigo Pro';
  src: url(/static/fonts/fertigo-pro-regular.woff) format('woff'),
       url(/static/fonts/fertigo-pro-regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.3rem;
  color: var(--fg);
  background: var(--bg);
}

/* Layout: full-bleed header/footer, one centred column. `100% - 2rem` keeps a
 * gutter on narrow screens; `%` (not vw) is the containing block, so no sideways
 * shift when a scrollbar appears. .wrap is used by the header, <main> and footer. */
.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
header .wrap { padding-block: .9rem; }
.brand {
  font-family: 'Fertigo Pro', Georgia, serif;
  color: var(--fg);
  font-weight: normal;
  font-size: 3rem;
}
.brand:hover { text-decoration: none; }
main { padding-block: 2.5rem 3.5rem; }
footer {
  border-top: 1px solid var(--border);
  margin-top: 3rem;
}
footer .wrap { padding-block: 1.5rem; }
footer small { color: var(--muted); }

/* Typography. */
h1 {
  font-size: 1.6rem;
  margin-bottom: .4rem;
  letter-spacing: -.02em;
}
h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 .6rem;
  letter-spacing: -.01em;
}
h3 {
  font-size: 1.3rem;
  margin-bottom: .5rem;
}
p {
  color: var(--muted);
  margin: .5rem 0;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Inline code + the demo block (monospace, always dark). `.terminal` is just a
 * <pre> that floats slightly; the prompt/ok/slow spans colour the transcript. */
code, pre {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}
code {
  background: var(--surface-2);
  padding: .12rem .38rem;
  border-radius: 5px;
  font-size: 1.3rem;
}
pre {
  background: var(--term-bg);
  color: var(--term-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: 1.3rem;
  line-height: 1.5;
}
pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}
.terminal {
  margin: 1.6rem 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.prompt {
  color: var(--accent);
  user-select: none;
}
.ok { color: var(--ok); }
.slow { color: var(--slow); }

/* Pricing tiers — equal-height cards; the CTA is pinned to the bottom (margin-top
 * auto on the last child) so the three buttons line up. */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}
.tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
}
.tier.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.tier .price {
  color: var(--fg);
  font-size: 2rem;
  font-weight: 700;
  margin: .1rem 0 .4rem;
}
.tier .price small {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
}
.tier p { margin: .2rem 0 1rem; }
.tier > :last-child { margin-top: auto; }
/* In a card the form is the CTA: no chrome. */
.tier form {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.tier form button { margin-bottom: 0; }
@media (max-width: 40rem) {
  .tiers { grid-template-columns: 1fr; }
}

/* Inputs + buttons. Home-page primitives (the free-tier email field, every CTA);
 * standalone-form chrome (card, labels, radios) lives in forms.css. */
form > input, form > button { margin: .55rem 0; }
input {
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .55rem .65rem;
  width: 100%;
  margin-top: .3rem;
}
input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
button, .button, .button-outline, .button-disabled {
  display: inline-block;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border-radius: 7px;
  padding: .6rem 1.1rem;
  width: 100%;
}
button, .button {
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
}
button:hover, .button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  text-decoration: none;
}
.button-outline {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border);
}
.button-outline:hover {
  border-color: var(--accent);
  text-decoration: none;
}
/* A placeholder in the Subscribe slot when SUBSCRIPTION_BUTTON=DISABLE: greyed
 * out and inert (not a link, no hover), same size so the card doesn't reflow. */
.button-disabled {
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: default;
}