/*
 * pergalino.ch
 *
 * The tokens below are a COPY of the ones in apps/web/src/styles.css, taken 2026-09-05, not an
 * import. That is deliberate. The site has no build step, so there is nothing to resolve an
 * import with, and a marketing page drifting a shade from the app is acceptable in a way that
 * a drift inside the app is not. Do not "fix" this by wiring up a bundler: the whole site is a
 * few tens of kilobytes and the absence of a build is the feature.
 *
 * `light-dark()` with `color-scheme: light dark` is the app's own mechanism: each colour is one
 * declaration covering both themes, and there is no media query and no toggle. The site has no
 * theme switch on purpose, since a switch needs storage and storage needs a sentence in the
 * privacy page, for nothing a visitor asked for.
 */

:root {
  color-scheme: light dark;

  --bg: light-dark(#ffffff, #101216);
  --bg-soft: light-dark(#f7f8fa, #15181e);
  --bg-inset: light-dark(#eceef3, #1e222b);
  --bg-elevated: light-dark(#ffffff, #1a1e26);

  --fg: light-dark(#14161c, #e7eaf0);
  --fg-muted: light-dark(#646b7a, #99a1b0);

  --border: light-dark(#e4e7ee, #262b35);
  --border-strong: light-dark(#d2d7e2, #363d4a);

  --accent: light-dark(#4f52e5, #8b8cff);
  --accent-fg: light-dark(#ffffff, #0c0e13);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --ring: color-mix(in srgb, var(--accent) 45%, transparent);

  --pass: light-dark(#147d4a, #4ecb8c);
  --fail: light-dark(#cf3a37, #ff8b85);

  --syntax-code: light-dark(#b3305e, #ff9ec4);
  --syntax-keyword: light-dark(#7c3aed, #c4a5ff);
  --syntax-string: light-dark(#0f7a63, #6fd6bb);

  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --shadow-sm: light-dark(0 1px 2px rgb(16 20 32 / 0.07), 0 1px 2px rgb(0 0 0 / 0.4));
  --shadow-md: light-dark(0 4px 16px -4px rgb(16 20 32 / 0.14), 0 4px 16px -4px rgb(0 0 0 / 0.6));

  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  --measure: 34rem;
  --wide: 64rem;
  --gutter: 1.25rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.6 var(--font-ui);
  /* Every heading below sets its own size; this is the body copy baseline. */
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
}

/* A visible focus ring everywhere, because the form is the point of the page and a keyboard
   user who cannot see where they are cannot fill it in. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img,
svg {
  max-width: 100%;
}

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow {
  max-width: var(--measure);
}

section {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
}

.section-soft {
  background: var(--bg-soft);
  border-block: 1px solid var(--border);
}

/* ---------------------------------------------------------------- header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 640;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
}

.wordmark img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.header-link {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  text-decoration: none;
}

.header-link:hover {
  color: var(--fg);
  text-decoration: underline;
}

/* ---------------------------------------------------------------- hero */

.chip {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 560;
}

.hero h1 {
  margin-top: 1rem;
  font-size: clamp(2rem, 1.35rem + 3.2vw, 3.25rem);
  font-weight: 680;
}

.hero .lede {
  margin-top: 1rem;
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  color: var(--fg-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.button {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-fg);
  font: inherit;
  font-weight: 580;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.button:hover {
  filter: brightness(1.06);
}

.button:disabled {
  opacity: 0.55;
  cursor: default;
  filter: none;
}

.text-link {
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

/* The two panes: the file on the left, the app's rendering of it on the right. Pure HTML and
   CSS, no screenshot, so there is no image to load, nothing to go stale when the UI moves,
   and no layout shift. */
.panes {
  display: grid;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.pane {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.pane-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--fg-muted);
  font-size: 0.8125rem;
}

.pane-body {
  padding: 0.85rem;
  /* Wide content scrolls inside its own box rather than widening the page. */
  overflow-x: auto;
}

.pane-body pre {
  margin: 0;
  font: 0.8125rem/1.6 var(--font-mono);
  white-space: pre;
}

.tok-key {
  color: var(--syntax-keyword);
}
.tok-str {
  color: var(--syntax-string);
}
.tok-link {
  color: var(--accent);
}
.tok-tag {
  color: var(--syntax-code);
}
.tok-dim {
  color: var(--fg-muted);
}

/* The rendered side. Enough to be recognisable as the same note, not a reimplementation. */
.render h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}

.render .props {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0 0 0.85rem;
  padding: 0 0 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}

.render .props dt {
  color: var(--fg-muted);
}

.render .props dd {
  margin: 0;
}

.render p {
  font-size: 0.9375rem;
}

.render .wikilink {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
}

.render .tag {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8125rem;
}

.render .task {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.9375rem;
}

.render .box {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 0.15rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
}

.render .due {
  margin-left: auto;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--bg-inset);
  color: var(--fg-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.caption {
  margin-top: 0.85rem;
  color: var(--fg-muted);
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------- claim + features */

.section-head {
  max-width: 40rem;
}

.section-head h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  font-weight: 660;
}

.section-head p {
  margin-top: 0.75rem;
  color: var(--fg-muted);
}

.grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.card h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.card h3 svg {
  flex: none;
  color: var(--accent);
}

.card p {
  margin-top: 0.5rem;
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

.card code {
  padding: 0.05em 0.35em;
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  color: var(--syntax-code);
  font: 0.85em/1 var(--font-mono);
}

/* ---------------------------------------------------------------- the honest list */

.plain-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.1rem;
  max-width: 44rem;
}

.plain-list li {
  padding-left: 1.1rem;
  border-left: 2px solid var(--border-strong);
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

.plain-list strong {
  display: block;
  color: var(--fg);
  font-weight: 600;
}

/* ---------------------------------------------------------------- the form */

.form-card {
  max-width: 32rem;
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-weight: 580;
  font-size: 0.9375rem;
}

.field input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--fg);
  /* 16px minimum, or mobile Safari zooms the page on focus and never zooms back. */
  font: 1rem/1.4 var(--font-ui);
}

.field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.help {
  color: var(--fg-muted);
  font-size: 0.875rem;
}

.turnstile {
  margin-top: 1rem;
  /* Reserves the widget's own height so its arrival does not push the button down.
     Cloudflare renders it at 65px; the min-height holds that space from first paint. */
  min-height: 65px;
}

.form-card .button {
  margin-top: 1rem;
  width: 100%;
}

/* Present and empty from first paint, so filling it in shifts nothing below. */
.status {
  min-height: 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
}

.status[data-tone='error'] {
  color: var(--fail);
}

.status[data-tone='ok'] {
  color: var(--pass);
}

.done {
  font-size: 1rem;
}

.done strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.125rem;
}

.fineprint {
  max-width: 32rem;
  margin-top: 1rem;
  color: var(--fg-muted);
  font-size: 0.875rem;
}

[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 0.875rem;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------- prose (privacy) */

.prose {
  max-width: 40rem;
}

.prose h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
}

.prose h2 {
  margin-top: 2rem;
  font-size: 1.1875rem;
}

.prose p,
.prose ul {
  margin-top: 0.75rem;
  color: var(--fg-muted);
}

.prose li + li {
  margin-top: 0.35rem;
}

.prose .updated {
  margin-top: 2.5rem;
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------- wide */

@media (min-width: 52rem) {
  .panes {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}