/*
 * What every page of gtdist.app shares: the app's tokens (apps/web/src/styles/tokens.css, design A+
 * «Точность»), the header on «chrome», the «sheet», the two kinds of buttons, the footer. The build
 * puts this file at the top of each page's styles (src/page.html — the placeholder BASE; the pages
 * of text — together with blog.css).
 */
:root {
  --chrome: #efeeea;
  --sheet: #fbfbf9;
  --ink: #111111;
  --ink-2: #5a5a57;
  --line: #d8d7d1;
  --line-2: #e4e3de;
  --signal: #c8102e;
  --button: #ffffff;
  --button-line: #cfcec8;
  --selected: #f1f0ec;
  --inverse: #111111;
  --inverse-ink: #ffffff;

  --font-text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Digits only, as in the app: counters, versions, time. */
  --font-num: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius-check: 4px;
  --radius-button: 10px;
  --radius-shot: 12px;
  --radius-sheet: 20px;

  --gutter: clamp(1.25rem, 4vw, 2rem);
  --pad: clamp(1.25rem, 3.4vw, 2.75rem);
  --mat-pad: clamp(0.75rem, 2.2vw, 1.5rem);
  --gap: clamp(1.75rem, 4.5vw, 3.5rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --chrome: #0e0e0d;
    --sheet: #181817;
    --ink: #f2f1ed;
    --ink-2: #a8a7a2;
    --line: #2c2c2a;
    --line-2: #2a2a28;
    --signal: #e5364b;
    --button: #1f1f1e;
    --button-line: #3a3a37;
    --selected: #232321;
    --inverse: #f2f1ed;
    --inverse-ink: #111111;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --chrome: #0e0e0d;
  --sheet: #181817;
  --ink: #f2f1ed;
  --ink-2: #a8a7a2;
  --line: #2c2c2a;
  --line-2: #2a2a28;
  --signal: #e5364b;
  --button: #1f1f1e;
  --button-line: #3a3a37;
  --selected: #232321;
  --inverse: #f2f1ed;
  --inverse-ink: #111111;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--chrome);
  color: var(--ink);
  font: 400 1.0625rem/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
}
p {
  text-wrap: pretty;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.nw {
  white-space: nowrap;
}
.hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.wrap {
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Header ---------- */
.top .wrap {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand svg {
  width: 1.875rem;
  height: 1.875rem;
}
.brand .tick {
  stroke: var(--signal);
}
.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}
.top nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.top nav a:hover {
  text-decoration: underline;
}

/* ---------- Buttons: the app's two kinds ---------- */
.btn {
  min-height: 3rem;
  padding: 0 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--button-line);
  border-radius: var(--radius-button);
  background: var(--button);
  color: var(--ink);
  font: 600 1rem/1.2 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover {
  background: var(--selected);
}
.btn-main {
  border-color: var(--inverse);
  background: var(--inverse);
  color: var(--inverse-ink);
}
.btn-main:hover {
  background: color-mix(in srgb, var(--inverse) 84%, var(--chrome));
}

/* ---------- The sheet ---------- */
.sheet {
  background: var(--sheet);
  border-radius: var(--radius-sheet);
  padding: var(--pad);
  padding-top: 0;
}

/* ---------- Footer (back on chrome) ---------- */
.foot {
  padding-block: 2rem 3rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.foot .wrap {
  display: grid;
  gap: 0.75rem;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--ink);
}
.foot p {
  margin: 0;
  max-width: 56em;
}

@media (max-width: 40rem) {
  .top nav .inside {
    display: none;
  }
  .sheet {
    margin-inline: calc(var(--gutter) * -1);
  }
  .foot nav {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}