/* The project page in the design language of qdd99.github.io (src/styles/global.css): its ink
   and link tokens, the system sans, the Caveat accent for the title, and links that grow an
   underline on hover. Interactive choices are links. The two question colours
   are the paper's blue and orange; they only shade words and underline the chosen question. Data
   (the messages, the articles and their neighbours) is set in the monospace; prose in the sans. */

:root {
  color-scheme: light;
  --page: #ffffff;
  --ink: oklch(0.29 0.01 80);
  --link: oklch(0.50 0.15 250);
  --link-hover: oklch(0.40 0.17 250);
  --rule: rgba(0, 0, 0, 0.08);
  --q-first: #2a78d6;
  --q-second: #eb6834;
  --sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

.hand { font-family: "Caveat", cursive; }

.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 180ms cubic-bezier(.4, 0, .2, 1), text-decoration-color 180ms cubic-bezier(.4, 0, .2, 1);
}
.link:hover { color: var(--link-hover); text-decoration-color: var(--link-hover); }

main { max-width: 48rem; margin: 0 auto; padding: 88px 16px 112px; }

/* ---- title -------------------------------------------------------------------------------- */

.title h1 { margin: 0; font-size: 56px; font-weight: 500; line-height: 1.1; }
.full-title { margin: 6px 0 0; font-size: 18px; font-weight: 600; }
.authors { margin: 10px 0 0; }
.links { margin: 10px 0 0; display: flex; gap: 12px; }

/* ---- prose -------------------------------------------------------------------------------- */

section { margin-top: 32px; }
h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
section p { margin: 0 0 14px; }

/* ---- figures ------------------------------------------------------------------------------ */

figure { margin: 36px 0 0; }
figcaption { margin-top: 12px; font-size: 14px; }

.reader, .explorer { --q: var(--q-first); }
.reader[data-question="intent"], .explorer[data-question="location"] { --q: var(--q-second); }

/* a choice: a label, then options that look like links; the chosen one is ink, underlined */
.choice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 6px; }
.choice-label { min-width: 5.5rem; font-weight: 600; }
.choice .link[aria-pressed="true"] {
  color: var(--ink);
  cursor: default;
  text-decoration-color: var(--choice-colour, var(--ink));
  text-decoration-thickness: 2px;
}

.message { margin: 22px 0 0; font: 20px/1.9 var(--mono); }

/* each word's shade mixes the question's colour into the page by --t, log2(1 + r) for r its weight
   over an even share of the text (page.js, shade); mixing in OKLab makes equal steps look equal */
.token {
  padding: 0.04em 0.06em;
  border-radius: 2px;
  background: color-mix(in oklab, var(--q) calc(var(--t, 0) * 100%), var(--page));
  transition: background-color 0.45s ease, color 0.45s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.token.deep { color: #fff; }
.token.joins { padding-right: 0; }
.token.joined { padding-left: 0; }

.pager { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; font-variant-numeric: tabular-nums; }
.pager .link { font-size: 18px; line-height: 1; }

.tooltip {
  position: fixed;
  z-index: 60;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--page);
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
}
.tooltip.visible { opacity: 1; }

/* ---- the explorer ------------------------------------------------------------------------- */

.article-labels { margin: 22px 0 0; font-weight: 600; }
.article-text { margin: 4px 0 0; padding-left: 14px; border-left: 2px solid var(--rule); font: 13.5px/1.8 var(--mono); }
.article-text .asked { font-style: italic; }
.more { margin: 6px 0 0 16px; font-size: 14px; }

.neighbours-title { margin: 20px 0 6px; font-weight: 600; }
.neighbours { margin: 0; padding-left: 20px; }
.neighbours li { margin-top: 10px; }
.neighbours .labels { display: block; font-size: 14px; }
.neighbours .labels .hit {
  text-decoration: underline;
  text-decoration-color: var(--q);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.neighbours .snippet { display: block; font: 13px/1.6 var(--mono); }

/* ---- how it works: the three steps -------------------------------------------------------- */

.steps { margin: 0 0 14px; padding-left: 20px; }
.steps li { margin-top: 12px; }
.steps li > p { margin: 0; }

/* ---- citation ----------------------------------------------------------------------------- */

.bibtex { margin: 0; overflow-x: auto; font: 13px/1.6 var(--mono); }

@media (max-width: 640px) {
  main { padding: 64px 16px 88px; }
  .title h1 { font-size: 46px; }
  .message { font-size: 17px; }
  .choice-label { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .token { transition: none; }
  html { scroll-behavior: auto; }
}