/* Klaviero static pages · one hand-written stylesheet, no framework.
   Same palette and rules as the app: hairline borders only, no gradients, no
   drop shadows, no glow. Monospace for numbers, thin uppercase sans for tiny
   labels. The accent colour marks the active or primary thing, never decoration.
   Source lives at tools/seo/assets/page.css and is copied into public/p/ by
   tools/seo/build-pages.mjs. Editing the copy in public/p/ gets overwritten. */

:root {
  --bg: #05060f;
  --panel: #0b0d18;
  --cyan: #00e5ff;
  --magenta: #ff2fd6;
  --text: #e9eef8;
  --dim: #8a94ac;
  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-soft: rgba(255, 255, 255, 0.06);
  --mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --sans: "Helvetica Neue", -apple-system, Helvetica, Arial, sans-serif;
}

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

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  /* the app locks scrolling; these pages must not */
  overflow-x: hidden;
}

/* ---------- shell ---------- */

.p-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 24px;
  border-bottom: 1px solid var(--hairline);
}
.p-logo {
  font-family: var(--mono); font-size: 13px; letter-spacing: 3.5px;
  color: var(--text); text-decoration: none;
}
.p-nav nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.p-nav nav a {
  font-family: var(--sans); font-weight: 500; font-size: 10.5px;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
}
.p-nav nav a:hover { color: var(--text); }
.p-nav nav a.p-cta {
  color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, 0.4);
  padding: 7px 15px;
}
.p-nav nav a.p-cta:hover { background: rgba(0, 229, 255, 0.09); color: var(--cyan); }

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 44px 24px 72px;
}

/* ---------- type ---------- */

h1 {
  font-size: 2rem; line-height: 1.22; font-weight: 500;
  letter-spacing: -0.4px; margin-bottom: 26px;
}
h2 {
  font-size: 1.16rem; line-height: 1.35; font-weight: 500;
  letter-spacing: -0.1px;
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline-soft);
}
h3 {
  font-size: 0.98rem; font-weight: 500; margin: 26px 0 8px;
}
p { margin-bottom: 17px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: #fff; }

a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(0, 229, 255, 0.3); }
a:hover { border-bottom-color: var(--cyan); }

ul, ol { margin: 0 0 17px 1.1rem; }
li { margin-bottom: 7px; }

/* the lede under an h1 */
.p-lede { font-size: 1.06rem; color: var(--text); }

/* the browser-support line. Every page carries one, above the fold. */
.p-warn {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--magenta);
  padding: 14px 17px;
  margin: 26px 0;
  font-size: 0.93rem;
  color: var(--dim);
}
.p-warn strong { color: var(--text); font-weight: 500; }

/* the "Checked on <date>" stamp on comparison pages */
.p-checked {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--dim);
  margin-bottom: 24px;
}

/* ---------- numbers ---------- */

/* key/value spec block: piece pages, scoring summaries */
.p-spec {
  border: 1px solid var(--hairline);
  margin: 24px 0;
}
.p-spec div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--hairline-soft);
}
.p-spec div:last-child { border-bottom: 0; }
.p-spec dt, .p-spec .k {
  font-family: var(--sans); font-weight: 500; font-size: 10px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--dim);
  flex: none;
}
.p-spec dd, .p-spec .v {
  font-family: var(--mono); font-size: 13.5px; color: var(--text);
  text-align: right;
}

/* tables always scroll inside their own box · the page body never does */
.p-scroll { overflow-x: auto; margin: 24px 0; border: 1px solid var(--hairline); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
caption { text-align: left; padding: 11px 14px; color: var(--dim); font-size: 12px; border-bottom: 1px solid var(--hairline); }
th {
  font-family: var(--sans); font-weight: 500; font-size: 9.5px;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim);
  text-align: left; padding: 10px 13px; white-space: nowrap;
  border-bottom: 1px solid var(--hairline);
}
td { padding: 8px 13px; border-bottom: 1px solid var(--hairline-soft); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { font-family: var(--mono); text-align: right; }
td.piece { white-space: normal; min-width: 15rem; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.022); }
.p-free {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  color: var(--cyan);
}

/* sortable header buttons on /pieces · progressive enhancement, the table is
   already complete in the HTML before this does anything */
th button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
th button:hover { color: var(--text); }
th[aria-sort] button { color: var(--cyan); }

figure { margin: 26px 0; }
figure svg, figure img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); }
figcaption { font-size: 12.5px; color: var(--dim); margin-top: 9px; }

blockquote {
  border-left: 2px solid var(--hairline);
  padding-left: 17px; margin: 22px 0;
  color: var(--text);
}
blockquote cite { display: block; margin-top: 8px; font-size: 12.5px; color: var(--dim); font-style: normal; }

/* ---------- calls to action ---------- */

.p-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 34px 0 0; }
.p-btn {
  font-family: var(--mono); font-size: 13px; letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--cyan); text-decoration: none;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.4);
  padding: 13px 26px;
}
.p-btn:hover { background: rgba(0, 229, 255, 0.14); border-bottom-color: rgba(0, 229, 255, 0.4); }
.p-btn.ghost { color: var(--dim); background: none; border-color: var(--hairline); }
.p-btn.ghost:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }

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

.p-foot {
  border-top: 1px solid var(--hairline);
  padding: 26px 24px 44px;
  font-size: 13px; color: var(--dim);
}
.p-foot > * { max-width: 46rem; margin: 0 auto; }
.p-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 15px; }
.p-foot nav a { color: var(--dim); border-bottom-color: var(--hairline); }
.p-foot nav a:hover { color: var(--text); }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 1.6rem; }
  main { padding: 32px 18px 56px; }
  .p-nav { padding: 14px 18px; }
  .p-spec div { flex-direction: column; gap: 2px; }
  .p-spec dd, .p-spec .v { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}