/* Konode website — self-contained, zero external requests (privacy-first).
   Tokens are documented in DESIGN.md. Don't introduce a value that isn't there. */

/* --------------------------------------------------------------- tokens -- */
/* Declared in tokens.css, which every page loads first. This file used to
   carry its own :root with eight values that disagreed with style.css. */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: #cdf0de; color: var(--fg); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; }
h1 { font-size: var(--fs-display); letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.1; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.35; }

a { color: var(--accent-solid); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration: none; }
code, kbd, pre, samp { font-family: var(--font-mono); }
strong { font-weight: 600; }
img, svg { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; border-radius: var(--r-sm); }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--fg); color: #fff; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); font-size: var(--fs-sm); text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--s-4); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
/* The gutter step-down lives in tokens.css, at 640px rather than the 480px
   this file used, so both stylesheets narrow at the same width. */

/* ---------- Header ---------- */
/* The header now lives in header.css, shared with the landing page. It is
   position:fixed, so the page content needs to clear it. */
body { padding-top: 96px; }

/* The footer still carries a brand lockup of its own. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3);
  letter-spacing: -0.02em; color: var(--fg); text-decoration: none;
}
.brand svg, .brand img { width: 26px; height: 26px; border-radius: 6px; flex: none; }

/* ---------- Footer ---------- */
footer.site { border-top: 1px solid var(--border); padding: var(--s-7) 0; }
footer.site .top {
  display: flex; flex-direction: column; gap: var(--s-5);
  justify-content: space-between; align-items: flex-start;
}
@media (min-width: 860px) { footer.site .top { flex-direction: row; align-items: center; } }
footer.site .about { margin-top: var(--s-2); max-width: 44ch; font-size: var(--fs-sm); color: var(--fg-subtle); }
footer.site .about b { font-weight: 400; color: var(--fg-muted); }
footer.site .links {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5);
  font-size: var(--fs-sm);
}
footer.site .links a { color: var(--fg-muted); text-decoration: none; }
footer.site .links a:hover { color: var(--fg); text-decoration: underline; }
footer.site .links .lic { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-subtle); }

/* ---------- Long-form pages (privacy, setup, troubleshooting, roadmap) ---------- */
/* The container itself carries the measure, so prose, code blocks and boxes
   all share one edge. Constraining the children instead left the black code
   blocks running out past the text they belonged to. The gutter is added on
   top so the text measure is a true --maxw-text rather than that minus the
   padding. */
main.doc { max-width: calc(var(--maxw-text) + 2 * var(--gutter)); }
/* The three-value shorthand here used to zero the horizontal padding that
   .wrap sets, so the text ran edge to edge on phones. Keep the gutter. */
.doc { padding: var(--s-8) var(--gutter) var(--s-9); }
.doc h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); letter-spacing: -0.025em; }
.doc .updated { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-subtle); }
.doc .lead { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.7; color: var(--fg-muted); }
.doc h2 { font-size: 1.5rem; letter-spacing: -0.015em; margin: var(--s-8) 0 var(--s-4); }
.doc h3 { font-size: var(--fs-h3); margin: var(--s-6) 0 var(--s-3); }
.doc p, .doc li { margin-bottom: var(--s-3); }
.doc ul, .doc ol { padding-left: 1.4em; margin-bottom: var(--s-4); }
.doc li::marker { color: var(--fg-subtle); }
.doc code { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 6px; font-size: var(--fs-sm); }
.steps { padding-left: 1.4em; }
.steps li { margin-bottom: var(--s-3); }
.steps li::marker { color: var(--fg-subtle); }
.doc .small { font-size: var(--fs-sm); }
.doc .muted { color: var(--fg-muted); }

.callout {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--r-sm);
  padding: var(--s-5); margin-bottom: var(--s-5);
}
.callout p:last-child { margin-bottom: 0; }

.toc { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-btn); padding: var(--s-5); margin: var(--s-7) 0; }
.toc h2 { font-size: var(--fs-sm); font-family: var(--font-body); margin: 0 0 var(--s-3); }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin-bottom: var(--s-2); }

.qa { border-top: 1px solid var(--border); margin-top: var(--s-6); }
.qa > div { padding: var(--s-6) 0; border-bottom: 1px solid var(--border); }
.qa h3 { margin-top: 0; }
.qa p:last-child { margin-bottom: 0; }

.rm { list-style: none; padding: 0; border-top: 1px solid var(--border); }
.rm > li { display: grid; gap: var(--s-2) var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--border); margin: 0; }
@media (min-width: 700px) { .rm > li { grid-template-columns: 9rem 1fr; align-items: baseline; } }
.rm h3 { margin: 0; }
.rm p { margin: 0; color: var(--fg-muted); }
/* An entry can need a second paragraph, or a list of caveats under one. */
.rm p + p, .rm p + ul { margin-top: var(--s-3); }
.rm ul { margin: 0; padding-left: 1.2em; }
.rm ul li { margin: 0 0 var(--s-1); color: var(--fg-muted); }
.rm ul li::marker { color: var(--fg-subtle); }

.rm .st { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; }
/* The release an entry landed in, under its badge. Grid blockifies .st, so a
   block child here is fine. Quieter than the badge: it is a footnote to the
   status, not a second status. */
.rm .st b {
  display: block; margin-top: var(--s-1);
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--fg-subtle);
}
.st-shipped { color: var(--accent-solid); }
.st-beta { color: var(--fg); }
.st-planned { color: var(--fg-subtle); }
/* "No" reads as the counterpart to "Shipped", so it gets the same treatment
   in the opposite colour rather than the neutral grey of "Planned". */
.st-no { color: var(--danger-text); }


/* ---------- Store status strip (generated into roadmap.html) ---------- */
/* A row per store. The version is the answer to "what do I get if I install
   now", so it is the element that reads first after the store name. */
.stores { list-style: none; margin: 0; padding: 0; }
.stores li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  padding: var(--s-2) 0;
}
.stores li + li { border-top: 1px solid var(--border); }
.stores a { flex: 1 1 12rem; }
.stores b {
  font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-sm);
  color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header, footer.site, .skip { display: none; }
  /* padding-top clears the fixed header on screen; in print there is none. */
  body { background: #fff; color: #000; padding-top: 0; }
  .doc { padding: 0; }
}