:root {
  color-scheme: dark;
  
  /* 
     OKLCH COLOR CALCULATIONS
     L = Lightness (0-100%)
     C = Chroma (0-0.37, 0 = gray)
     H = Hue (0-360)
     
     The Luminance Hierarchy:
     - Graph nodes are WHITE. They are the signal.
     - Prose is light gray. It is human context.
     - UI is mid gray. It should be invisible.
     - Meta is dark gray. Barely there.
     
     --spread controls the range (0 = flat gray, 1 = full contrast)
  */

  /* === CONTROL === */
  --spread: 1;  /* 0 to 1: controls luminance range */
  --base: 50%;  /* Center point when spread=0 */

  /* === THE VOID === */
  --bg: oklch(0% 0 0);
  --panel: oklch(6% 0 0);
  --border: oklch(18% 0 0);

  /* === THE LUMINANCE STACK === */
  /* Target values at full spread */
  --L-signal-target: 100;  /* Pure white: scores, the output */
  --L-graph-target: 88;    /* Off-white: slugs, addresses */
  --L-prose-target: 68;    /* Light: human reasoning */
  --L-ui-target: 42;       /* Mid: headers, navigation */
  --L-meta-target: 26;     /* Dark: timestamps, counts */
  --L-base: 50;
  
  /* Computed: base + (target - base) * spread */
  --signal: oklch(calc(var(--L-base) * 1% + (var(--L-signal-target) - var(--L-base)) * var(--spread) * 1%) 0 0);
  --graph: oklch(calc(var(--L-base) * 1% + (var(--L-graph-target) - var(--L-base)) * var(--spread) * 1%) 0 0);
  --prose: oklch(calc(var(--L-base) * 1% + (var(--L-prose-target) - var(--L-base)) * var(--spread) * 1%) 0 0);
  --ui: oklch(calc(var(--L-base) * 1% + (var(--L-ui-target) - var(--L-base)) * var(--spread) * 1%) 0 0);
  --meta: oklch(calc(var(--L-base) * 1% + (var(--L-meta-target) - var(--L-base)) * var(--spread) * 1%) 0 0);
  
  /* Links: Purple (the only chroma in the system) */
  --link: oklch(58% 0.18 280);
  --link-visited: oklch(42% 0.14 270);
  --link-hover: oklch(72% 0.22 285);
  
  /* Default text inherits prose level */
  --fg: var(--prose);
  
  /* Typography */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --serif: ui-serif, Iowan Old Style, Palatino, Georgia, serif;
  
  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.1rem;
}

body {
  font-family: var(--sans);
  font-size: var(--text-base);
  max-width: 880px;
  margin: 24px auto;
  padding: 0 16px;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
  padding-bottom: 100px;
}

/* ============================================
   LAYER 1: THE GRAPH (White)
   These are the NODES. The things that exist.
   #tags, :aspects, /items, @actors
   ============================================ */
code, .slug, .address {
  font-family: var(--mono);
  color: var(--graph);
}

.vote-items {
  font-family: var(--mono);
  color: var(--graph);
}

/* ============================================
   LAYER 2: PROSE (Light Gray)
   Human reasoning, vote bodies, explanations.
   ============================================ */
.prose, .vote-body {
  font-family: var(--serif);
  color: var(--prose);
  line-height: 1.6;
  font-size: var(--text-base);
  max-width: 65ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============================================
   LAYER 3: UI / SCAFFOLDING (Mid Gray)
   Headers, navigation labels. Structural.
   ============================================ */

/* Breadcrumb navigation */
.breadcrumb {
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--meta);
  margin-bottom: 16px;
}
.breadcrumb a {
  color: var(--graph);
  text-decoration: none;
  cursor: pointer;
}
.breadcrumb a:hover {
  color: var(--link-hover);
}
.breadcrumb a.bc-current {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

h1 {
  color: var(--ui);
  font-weight: 400;
  font-size: var(--text-lg);
  margin: 0 0 12px 0;
}

h2 {
  color: var(--ui);
  font-weight: 400;
  font-size: var(--text-sm);
  margin: 16px 0 8px 0;
  text-transform: lowercase;
}

h3 {
  color: var(--meta);
  font-weight: 400;
  font-size: var(--text-xs);
  margin: 12px 0 4px 0;
  text-transform: lowercase;
}

h1 .slug, h2 .slug {
  color: var(--graph);
}

/* ============================================
   LAYER 4: META (Dark Gray)
   Timestamps, counts, secondary info.
   ============================================ */
.muted { color: var(--ui); }
.faint { color: var(--meta); }
.vote-meta { color: var(--meta); font-size: var(--text-xs); }
.ratio-label { color: var(--meta); font-size: var(--text-xs); font-family: var(--mono); margin-bottom: 4px; }

/* ============================================
   LINKS: The only color in the system
   ============================================ */
a {
  text-decoration: none;
  color: var(--link);
  transition: color 0.1s;
}
a:visited { color: var(--link-visited); }
a:hover { 
  text-decoration: underline; 
  color: var(--link-hover);
}

/* ============================================
   COMPONENTS
   ============================================ */
.row { display: flex; justify-content: space-between; gap: 16px; }

pre {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow-x: auto;
  background: var(--panel);
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--graph);
}

table { width: 100%; border-collapse: collapse; }
td, th { padding: 4px 0; border-bottom: 1px solid var(--border); }
th { text-align: left; color: var(--meta); font-weight: normal; font-size: var(--text-xs); }

ul { 
  padding-left: 1.2em; 
  border-left: 1px solid var(--border);
  margin: 8px 0;
}
li { margin: 4px 0; }

/* Ranking list */
ol.ranking {
  padding-left: 0;
  margin: 0;
  list-style: none;
  counter-reset: rank;
}
ol.ranking li {
  margin: 2px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  counter-increment: rank;
}
ol.ranking li::before {
  content: counter(rank) ".";
  color: var(--meta);
  font-family: var(--mono);
  font-size: var(--text-lg);
  min-width: 2em;
}

/* Ranking list variant for "meat" (block cards, still numbered) */
ol.ranking.meat li {
  display: block;
  position: relative;
  padding-left: 2.4em; /* room for marker */
}
ol.ranking.meat li::before {
  position: absolute;
  left: 0;
  top: 0;
  min-width: auto;
}
.score {
  color: var(--signal);
  font-family: var(--mono);
  font-size: var(--text-lg);
  font-weight: 500;
  margin-left: auto;
}

/* Item links in rankings */
.item-link {
  color: var(--graph);
  cursor: pointer;
}
.item-link code {
  /* `code` has its own color, so force it to follow the link state */
  color: inherit;
}
.item-link:visited {
  color: var(--graph);
}
.item-link:hover {
  /* Subtle darkening (less bright) to indicate hover without screaming */
  color: var(--ui);
  text-decoration: none;
}

summary {
  cursor: pointer;
}

/* Item card (expanded view) */
.item-card {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px;
  margin: 8px 0;
}

.item-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  width: 100%;
  box-sizing: border-box;
}

.item-card-header code {
  color: var(--signal);
  font-size: var(--text-lg);
}

.item-card-body {
  font-family: var(--serif);
  color: var(--prose);
  font-size: var(--text-base);
  line-height: 1.6;
  margin-top: 8px;
  white-space: pre-wrap;
  width: 100%;
  box-sizing: border-box;
}

.vote {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px;
  margin: 8px 0;
  background: var(--panel);
}

.vote-header {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.vote-left, .vote-right {
  font-family: var(--mono);
  color: var(--graph);
  font-size: var(--text-sm);
}

.vote-ratio {
  font-family: var(--mono);
  color: var(--signal);
  font-size: var(--text-lg);
  font-weight: 500;
}

.vote-body { margin-top: 8px; }

.vote-meta {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--meta);
}

.ratio-bar {
  display: flex;
  height: 3px;
  border-radius: 1px;
  overflow: hidden;
  background: var(--border);
}
.ratio-left { background: oklch(50% 0 0); }
.ratio-right { background: oklch(22% 0 0); }

.component {
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px 8px;
  margin: 4px 0;
  background: var(--panel);
}

.component-header {
  color: var(--meta);
  font-family: var(--mono);
  font-size: var(--text-xs);
  margin-bottom: 4px;
}

.component.unsorted {
  border-style: dotted;
  background: transparent;
}

.component ul {
  margin: 0;
  padding-left: 1em;
  border-left: none;
}


/* ============================================
   CONTROLS
   ============================================ */
#controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: var(--text-xs);
  z-index: 9999;
}

#theme-switcher {
  color: var(--meta);
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: 2px;
  background: var(--panel);
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
  user-select: none;
  cursor: pointer;
}
#theme-switcher:hover {
  opacity: 1.0;
  color: var(--graph);
}

#spread-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--meta);
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: 2px;
  background: var(--panel);
  opacity: 0.4;
  transition: opacity 0.15s;
}
#spread-control:hover {
  opacity: 1.0;
}

#spread-slider {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  cursor: pointer;
}
#spread-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--ui);
  border-radius: 50%;
  cursor: pointer;
}
#spread-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--ui);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}