/* ---------------------------------------------------------------------------
   Long-form essays with popover citations.

   Scoped under .essay. The previous version of this file was written for a
   standalone page: it redefined :root tokens and styled bare body / a / h1 /
   h2 / hr, which would have overridden site.css and hardcoded dark. Nothing
   here declares a token the site already owns - it consumes --text, --muted,
   --panel, --border and --bg instead, so the theme toggle keeps working.

   The .cite-popover rules are deliberately NOT scoped: cite.js appends the
   popover to document.body, outside the article.
--------------------------------------------------------------------------- */

.essay {
  /* Dark is the site default; light overrides below, matching site.css. */
  --essay-accent: #7dd3fc;
  --essay-accent-soft: rgba(125, 211, 252, 0.10);
  --essay-accent-edge: rgba(125, 211, 252, 0.22);
  --essay-measure: 74ch;
}

html[data-theme="light"] .essay {
  --essay-accent: #1f6feb;
  --essay-accent-soft: rgba(31, 111, 235, 0.08);
  --essay-accent-edge: rgba(31, 111, 235, 0.22);
}

/* ---------- masthead ---------- */

.essay .essay-head {
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.essay .essay-head h1 {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
  margin: 0 0 10px;
}
.essay .byline {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}
.essay .byline .dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--muted);
  opacity: .55;
  display: inline-block;
}

/* ---------- body ---------- */

.essay .essay-body {
  max-width: var(--essay-measure);
  font-size: 18px;
  line-height: 1.65;
}
.essay .essay-body p { margin: 0 0 1.05em; }

.essay .essay-body h2 {
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.2;
  margin: 1.6em 0 .6em;
}

.essay .essay-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.2em 0 1.6em;
}

.essay blockquote {
  margin: 1.6em 0;
  padding: .2em 0 .2em 1em;
  border-left: 3px solid var(--essay-accent);
  color: var(--text);
}
.essay blockquote p { margin: .6em 0; }

/* ---------- inline citations ---------- */

.essay q { quotes: "\201C" "\201D" "\2018" "\2019"; }
.essay q::before { content: open-quote; }
.essay q::after  { content: close-quote; }

.essay q[cite] {
  padding: .05em .35em;
  margin: 0 .05em;
  border-radius: .55em;
  background: var(--essay-accent-soft);
  border: 1px solid var(--essay-accent-edge);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.essay q[cite]:hover { border-color: var(--essay-accent); }
.essay q[cite]:active { transform: translateY(1px); }
.essay q[cite].is-citable:focus-visible {
  outline: 2px solid var(--essay-accent);
  outline-offset: 2px;
}

/* ---------- works cited ---------- */

.essay .works { padding-left: 1.15em; margin: 0; max-width: var(--essay-measure); }
.essay .works li { margin: 0 0 .85em; color: var(--muted); }
.essay .works cite { color: var(--text); font-style: italic; }
.essay .works li[id] { scroll-margin-top: 90px; }

.essay .cite-target-flash {
  background: var(--essay-accent-soft);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--essay-accent-edge) inset;
  transition: background .2s ease;
}

/* ---------- popover (lives on <body>, so not scoped) ---------- */

.cite-popover {
  --cp-accent: #7dd3fc;
  position: absolute;
  z-index: 9999;
  width: min(420px, calc(100vw - 24px));
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
}
html[data-theme="light"] .cite-popover { --cp-accent: #1f6feb; }

.cite-popover[hidden] { display: none; }

.cite-popover__top {
  display: flex; gap: 10px;
  justify-content: space-between; align-items: start;
  margin-bottom: 6px;
}
.cite-popover__title {
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.cite-popover__close {
  appearance: none; border: 0; background: transparent;
  color: var(--muted); cursor: pointer;
  padding: 4px 6px; border-radius: 8px; line-height: 1;
  font-size: 16px;
}
.cite-popover__close:hover { background: var(--btn-bg); color: var(--text); }
.cite-popover__close:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }

.cite-popover__body { font-size: 14px; line-height: 1.45; color: var(--text); }

.cite-popover__actions {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.cite-popover__link { color: var(--cp-accent); text-decoration: none; }
.cite-popover__link:hover { text-decoration: underline; }

.cite-popover::before {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
  top: -6px;
  left: var(--caret-left, 18px);
}