/* CPIN Explorer theme, after the COBE site (cobe.vercel.app): white page, one electric blue,
   square corners, blue label tags with white pixel lettering, thin blue rules, soft motion.
   Reading text uses Geist Sans; Geist Pixel and Geist Mono carry labels, numbers and chrome. */

@font-face { font-family: "Geist"; src: url("../vendor/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../vendor/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Pixel"; src: url("../vendor/fonts/GeistPixel-Square.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Geist Pixel Line"; src: url("../vendor/fonts/GeistPixel-Line.woff2") format("woff2"); font-display: swap; }

:root {
  --font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-pixel: "Geist Pixel", "Geist Mono", ui-monospace, monospace;
  --font-display: "Geist Pixel Line", "Geist Pixel", ui-monospace, monospace;

  --bg: #ffffff;
  --surface: #ffffff;
  --sunken: #f6f7f9;
  --ink: #171d24;                          /* COBE body: lab(13 -1.8 -7) */
  --ink-2: #66717c;                        /* COBE secondary: lab(48 -2 -7) */
  --ink-3: #9aa3ad;
  --line: #e4e7eb;
  --line-strong: #cfd4da;
  --blue: #2a3cf5;
  --blue: lab(36 55.64 -107.68);           /* COBE's blue */
  --blue-ink: #ffffff;
  --blue-wash: color-mix(in oklab, var(--blue) 7%, var(--bg));
  --blue-line: color-mix(in oklab, var(--blue) 35%, var(--bg));

  /* Redline: never colour alone. Insertions are COBE blue and underlined; deletions red and struck through. */
  --ins: var(--blue);
  --ins-wash: color-mix(in oklab, var(--blue) 10%, var(--bg));
  --del: #c2262e;
  --del-wash: color-mix(in oklab, #e0434b 12%, var(--bg));

  --focus: var(--blue);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms;
  --t: 280ms;
  --t-slow: 520ms;

  /* Half the height of a capital letter. A mark beside a line of capitals or digits (a dot, a flag, a
     tick box) stands on their baseline and is then moved to their middle: up by this, less half its own
     height. .355em is Geist's and Geist Mono's (Geist Pixel's is .361em); where the browser has the cap
     unit (below) it is read from the font in use. */
  --half-cap: .355em;

  /* Fluid sizing: 16px on a 1080p laptop, ~21px on a 4K monitor, 15px on a phone. */
  font-size: clamp(15px, 0.42vw + 8.6px, 22px);
  color-scheme: light;
}
@supports (width: 1cap) { :root { --half-cap: .5cap; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0c10; --surface: #10131a; --sunken: #151922;
    --ink: #e7eaf0; --ink-2: #9aa4b2; --ink-3: #6b7480;
    --line: #232834; --line-strong: #323949;
    --blue: #6b7cff; --blue: lab(58 38 -82);
    --ins: var(--blue); --ins-wash: color-mix(in oklab, var(--blue) 22%, var(--bg));
    --del: #ff7b81; --del-wash: color-mix(in oklab, #e0434b 22%, var(--bg));
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0c10; --surface: #10131a; --sunken: #151922;
  --ink: #e7eaf0; --ink-2: #9aa4b2; --ink-3: #6b7480;
  --line: #232834; --line-strong: #323949;
  --blue: #6b7cff; --blue: lab(58 38 -82);
  --ins: var(--blue); --ins-wash: color-mix(in oklab, var(--blue) 22%, var(--bg));
  --del: #ff7b81; --del-wash: color-mix(in oklab, #e0434b 22%, var(--bg));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-text); line-height: 1.55; letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in oklab, var(--blue) 22%, transparent); }

/* --- Components --------------------------------------------------------------------------- */

/* One-line labels in boxes (tags, buttons, chips) are set with no leading (line-height: normal). A taller
   line carries leading above and below the letters, and browsers round the upper share down to a whole
   pixel, which lifts the letters by up to a pixel in their box. With none, the line is the font's own
   height, and centring it centres the capitals (Geist's ascent less its descent is its cap height). */

/* Blue label tag, as on the COBE globe ("TOKYO"). As tall as a 1em line with .72em of padding. */
.tag {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-pixel); font-size: .72rem; line-height: normal; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  height: 1.72em; padding: 0 .55em; background: var(--blue); color: var(--blue-ink);
}
/* A tag set on the baseline of a line of bigger words (a row whose words may run to more lines: the tag
   keeps to the first). Its capitals are shorter than theirs, so it is raised by half the difference to be
   level with them: .722em is the height of its own capitals, .71 of --words (the words' font size, set by
   the row) the height of theirs. Used as: position: relative; top: var(--rise). */
.tag { --rise: calc((.722em - .71 * var(--words, 1em)) / 2); }
.tag--outline { background: var(--bg); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.tag--muted { background: var(--sunken); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }

/* Small uppercase section label ("USAGE"). */
.eyebrow {
  font-family: var(--font-pixel); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); margin: 0;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 2.4rem; padding: 0 .85rem; border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--surface); color: var(--ink); cursor: pointer;
  font-family: var(--font-mono); font-size: .8rem; line-height: normal; letter-spacing: .02em;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn:hover { border-color: var(--blue); color: var(--blue); }
.btn--primary { background: var(--blue); border-color: var(--blue); color: var(--blue-ink); }
.btn--primary:hover { color: var(--blue-ink); filter: brightness(1.08); }
kbd {
  font-family: var(--font-mono); font-size: .7em; padding: .1em .4em; border: 1px solid var(--line-strong);
  color: var(--ink-2); background: var(--sunken);
}

/* Big pixel numerals (counts, the odometer date). */
.numeral { font-family: var(--font-pixel); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .08em; color: var(--blue); }

/* Entrance: things pop in (scale, fade and de-blur), never jump. */
@keyframes pop-in { from { opacity: 0; transform: translateY(.35rem) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.pop-in { animation: pop-in var(--t) var(--ease) both; }

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