/* Shared styles for tokenize.rs: the index, the paper pages, and the gallery. */

:root {
  --bg: #0a0b0e;
  --fg: #e9ebf0;
  --muted: #8a92a2;
  --card: #101218;
  --card-hi: #161923;
  --border: #1d212b;
  --border-hi: #2b3140;
  --accent: #e8a33d;
  --accent-hi: #f2b862;

  /* Token highlight hues, cycled by token index — the palette every
     tokenizer visualisation uses, and the basis for the whole site. */
  --t0: 110 168 255;
  --t1: 92 200 160;
  --t2: 232 163 61;
  --t3: 214 130 190;
  --t4: 150 140 240;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  display: flex;
  justify-content: center;
  padding: 44px 24px 64px;
  -webkit-font-smoothing: antialiased;
}
main { width: 100%; max-width: 660px; }
::selection { background: rgb(var(--t0) / 0.32); }
a { color: var(--accent); }

/* ---------- token chips ---------- */
/* One span per token; the hue cycles with the token index. Backgrounds are
   transparent until something (a hover, or the index page's switch) turns
   them on, so text never shifts when the segmentation is revealed. */
.seg span {
  border-radius: 3px;
  padding: 1px 0;
  white-space: pre-wrap;
  background: transparent;
  transition: background 0.18s;
}
.seg span.k0 { --tn: var(--t0); }
.seg span.k1 { --tn: var(--t1); }
.seg span.k2 { --tn: var(--t2); }
.seg span.k3 { --tn: var(--t3); }
.seg span.k4 { --tn: var(--t4); }
h1.seg:hover span { background: rgb(var(--tn) / 0.22); }

/* ---------- site bar ---------- */
.sitebar { display: flex; align-items: center; gap: 12px; margin: 0 0 30px; }
.mark {
  display: inline-flex;
  gap: 2px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
}
.mark span { padding: 3px 6px; border-radius: 5px; }
.mark .c0 { background: rgb(var(--t0) / 0.2); }
.mark .c1 { background: rgb(var(--t1) / 0.2); }
.mark .c2 { background: rgb(var(--t2) / 0.2); }
.mark:hover .c0 { background: rgb(var(--t0) / 0.34); }
.mark:hover .c1 { background: rgb(var(--t1) / 0.34); }
.mark:hover .c2 { background: rgb(var(--t2) / 0.34); }

/* ---------- paper header ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 12px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
}
h1 {
  font-size: clamp(26px, 5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 10px;
}
.authors { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.award {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  background: rgb(var(--t2) / 0.16);
  box-shadow: inset 0 0 0 1px rgb(var(--t2) / 0.45);
  border-radius: 999px;
  padding: 3px 12px;
  margin: -8px 0 22px;
}

/* ---------- buttons ---------- */
.cta {
  display: inline-block;
  background: var(--accent);
  color: #17130a;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14.5px;
  transition: background 0.15s, transform 0.05s;
}
.cta:hover { background: var(--accent-hi); }
.cta:active { transform: translateY(1px); }
.cta.secondary {
  background: transparent;
  color: var(--fg);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border-hi);
}
.cta.secondary:hover { background: var(--card-hi); }

/* ---------- prose ---------- */
.body { margin: 30px 0; }
.body h2 {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 26px 0 8px;
}
.body p { margin: 0 0 14px; }
.lead { font-size: 18px; line-height: 1.55; }
figure {
  margin: 24px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border);
  padding: 14px;
}
figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
figure figcaption {
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
}
.body ul { margin: 0; padding-left: 20px; }
.body li { margin: 0 0 6px; }
.body code, code {
  font-family: var(--mono);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.88em;
}

/* ---------- tables ---------- */
table.examples {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  font-size: 14px;
}
table.examples th,
table.examples td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.examples th {
  font-family: var(--mono);
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
table.examples td code { overflow-wrap: anywhere; }
table.examples td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
table.examples th.num { text-align: right; }
table.examples .origin {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.footnotes { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.footnotes p { margin: 0 0 4px; }
.bottom {
  border-top: 1px solid var(--border);
  margin-top: 34px;
  padding-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}