/*
  The comparison pages share one stylesheet.

  WHY THIS FILE EXISTS. The first two pages carried ~200 lines of identical inline CSS
  each. At nineteen sessions that is nineteen copies of the same thing, and a change to
  the type scale would mean nineteen edits. One file, one edit, and the browser caches it
  across the whole set.

  ONE VISUAL WORLD, PAINTED EXPLICITLY. Same decision as site/index.html: the app's own
  black, no light theme, and every colour written down rather than inherited, so the page
  holds whatever ground the browser puts behind it.
*/

:root {
  --bg: #000000;
  --surface: #121212;
  --raised: #1F1F1F;
  --ink: #F0F0F3;
  --body: #D2D2D2;
  --muted: #8A8A8A;
  --faint: #5E5E5E;
  --line: #2C2C2C;
  /* Verdict colours. These carry information on the maps, so they are not decoration. */
  --agree: #00F076;
  --twist: #FFCE00;
  --clash: #FF3A44;
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(720px, calc(100% - 40px)); margin-inline: auto; }

/* ---- header ---- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 28px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  letter-spacing: -0.01em;
}
header nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; }
header nav a { color: var(--muted); text-decoration: none; }
header nav a:hover, header nav a:focus-visible { color: var(--ink); }

/* ---- type ---- */

h1 {
  color: var(--ink);
  font-size: clamp(30px, 5.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 26px 0 0;
  text-wrap: balance;
}
.lede { font-size: clamp(18px, 2.4vw, 21px); margin-top: 22px; max-width: 34em; }

h2 {
  color: var(--ink);
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 52px 0 0;
  text-wrap: balance;
}
h3 { color: var(--ink); font-size: 18px; font-weight: 600; margin: 32px 0 0; }
p { margin: 16px 0 0; }
main a { color: var(--ink); }
b { color: var(--ink); font-weight: 500; }
main { padding-bottom: 8px; }

.eyebrow {
  color: var(--faint);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* ---- the map: verdict bands, where the colour is the information ---- */

.map { margin: 34px 0 0; border: 1px solid var(--line); background: var(--surface); }
.map-head { padding: 18px 20px 0; }
.map-head p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.map-head strong { color: var(--ink); font-weight: 600; }
.band { padding: 16px 20px; border-top: 1px solid var(--line); margin-top: 18px; }
.band .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.t-agree { color: var(--agree); }
.t-twist { color: var(--twist); }
.t-clash { color: var(--clash); }
.band ul { margin: 12px 0 0; padding-left: 20px; }
.band li { margin: 0 0 7px; font-size: 15.5px; }
.band li:last-child { margin-bottom: 0; }
.band li b { color: var(--ink); font-weight: 500; }

/* ---- the drawn figure: one per page, and it is the argument ---- */

.swap { margin: 34px 0 0; border: 1px solid var(--line); background: var(--surface); padding: 20px; }
.swap .eyebrow { margin-bottom: 6px; }
.swap-cap { color: var(--muted); font-size: 15px; margin: 8px 0 20px; }
.swap svg { display: block; width: 100%; height: auto; overflow: visible; }
.sw-lbl { fill: #F0F0F3; font-family: var(--font); font-size: 13px; font-weight: 500; }
.sw-sub { fill: #8A8A8A; font-family: var(--font); font-size: 11.5px; }

/* ---- the verdict, stated rather than hedged ---- */

.pull {
  margin: 34px 0 0;
  padding: 20px 22px;
  background: var(--surface);
  border-left: 2px solid var(--ink);
}
.pull p:first-child { margin-top: 0; color: var(--ink); font-weight: 500; }
.pull p:last-child { margin-bottom: 0; font-size: 15px; color: var(--muted); }

/* ---- chapter 4, held or given ---- */

.prompt {
  margin: 34px 0 0;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--raised);
}
.prompt .eyebrow { margin-bottom: 10px; }
.prompt p { color: var(--ink); font-size: 19px; margin: 0; text-wrap: balance; }

.held {
  margin: 40px 0 0;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--raised);
}
.held .eyebrow { margin-bottom: 10px; }
.held h3 { color: var(--ink); font-size: 19px; font-weight: 600; margin: 0; text-wrap: balance; }
.held p { color: var(--muted); font-size: 15.5px; margin: 12px 0 0; }

/* ---- store badges, copied from site/index.html so the set matches the landing page ---- */

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: var(--raised);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.badge:hover, .badge:focus-visible { border-color: var(--muted); background: #262626; }
.badge svg { flex: none; }
.badge .b-top { display: block; font-size: 11px; color: var(--muted); line-height: 1.2; }
.badge .b-main { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.cta-note { margin-top: 14px; color: var(--faint); font-size: 14px; }

/* ---- next read: what makes a set of pages a set ---- */

.next { margin: 56px 0 0; border-top: 1px solid var(--line); padding-top: 26px; }
.next-list { display: grid; gap: 2px; margin-top: 16px; }
.next-list a {
  display: block;
  padding: 14px 16px;
  background: var(--surface);
  color: var(--body);
  text-decoration: none;
  font-size: 15.5px;
}
.next-list a:hover, .next-list a:focus-visible { background: var(--raised); color: var(--ink); }
.next-list b { color: var(--ink); font-weight: 500; }

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  color: var(--faint);
  font-size: 14px;
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding-block: 26px 44px;
}
footer a { color: var(--muted); }

/* ---- where the disagreement starts ----

   One line under the lede, naming the branch at which the break happens. It exists because
   the answer VARIES across the set — Kant breaks at epistemology, Marx at ethics and a
   theory of history, Stoicism at metaphysics — and that variation is the strongest thing
   the comparisons have to say. It is deliberately not a four-column grid: utilitarianism
   has no metaphysics to speak of and Stoicism's politics is thin, so a full table would
   have padded cells and a reader who knows the subject would see it.

   The DIM tag (I / M1 / M2 / D1 / D2) is NOT printed here. It stays in the app, where the
   session can carry the objections that content/comparison-track.md requires alongside it.
*/
.starts {
  margin: 30px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 15.5px;
  color: var(--muted);
}
.starts b { color: var(--ink); font-weight: 600; }
.starts .lvl {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--clash);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 2px 7px;
  margin-right: 8px;
  vertical-align: 2px;
}