/* Hand-written, Tailwind-style atomic utilities.
   Only the classes used by the templates are defined — no build step. */

:root {
  --bg: #0e0f12;
  --surface: #16181d;
  --border: #23262e;
  --border-soft: #2c3038;
  --text: #e7e9ee;
  --muted: #9aa0ac;
  --text-soft: #cdd2db;
  --accent: #7aa2ff;
  color-scheme: dark;
}

/* ---- base / reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "PingFang SC", "Hiragino Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }

/* ---- layout ---- */
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-5xl { max-width: 64rem; }
.w-full { width: 100%; }
.flex { display: flex; }
.inline-block { display: inline-block; }
.flex-wrap { flex-wrap: wrap; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }

/* ---- spacing ---- */
.p-4 { padding: 1rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.mt-2 { margin-top: 0.5rem; }

/* ---- typography ---- */
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 1.2; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.04em; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.text-start { text-align: start; }
.text-end { text-align: end; }

/* ---- color ---- */
.text-muted { color: var(--muted); }
.text-soft { color: var(--text-soft); }
.text-accent { color: var(--accent); }

/* ---- borders ---- */
.rounded-full { border-radius: 9999px; }
.border { border: 1px solid var(--border-soft); }
.border-b { border-bottom: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }

/* ---- components (Tailwind @apply-style composites) ---- */
.chip {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 9999px;
  color: var(--text-soft);
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

.link:hover { text-decoration: underline; }

/* ---- ranked list (replaces table markup) ---- */
.list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.list-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.625rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
.list-rank {
  flex: 0 0 auto;
  min-width: 2.5ch;
  text-align: end;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.list-main { flex: 1 1 auto; min-width: 0; }
.list-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* ---- external-link icon (inline, beside the label) ---- */
.ext {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0.4rem;
  vertical-align: -0.15em;
  color: var(--accent);
}
.ext:hover { color: var(--text); }
.ext-off { color: var(--border-soft); cursor: not-allowed; }

h1 { font-size: 1.5rem; line-height: 1.2; margin: 0.4em 0; }