/* ═══════════════════════════════════════════════════════════════════════════
   Go Well — long-form prose / "kitchen sink" stylesheet.
   Opt-in via `extra_css: ["/css/prose.css"]` on any page that renders long-form
   editorial content (blog posts, in-depth service prose, poetry reflections).
   Everything is scoped under `.prose` so it never leaks into component sections.

   Visual language matches the teal/sage Material-3 system (tokens.css):
   Fraunces display headings (#11345), Hanken Grotesk body, generous reading rhythm,
   ~68ch measure, teal accents on markers / links / quotes.
   WCAG 2.2 AA: body + muted text clear 4.5:1 on surface; links underlined.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container ──────────────────────────────────────────────────────────────
   Comfortable reading measure. Drop `.prose` straight into a `.wrap.narrow`
   or use on its own — `max-width` caps the line length either way. */
.prose {
  max-width: 68ch;
  margin-inline: auto;
  color: var(--on-surface);
  font-size: var(--step-0);
  line-height: 1.7;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child  { margin-bottom: 0; }

/* ── Headings ───────────────────────────────────────────────────────────────
   Top margin opens space *above* a heading that follows body copy; the global
   base.css rules set the family/colour, we tune rhythm + scale for reading. */
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 { font-family: var(--font-head); color: var(--text-heading); line-height: 1.2;
  scroll-margin-top: 6rem; }

.prose h2 { font-size: var(--step-2); font-weight: 500; letter-spacing: -.01em;
  margin: 2.4em 0 .7em; padding-bottom: .35em; border-bottom: 1px solid var(--outline-variant); }
.prose h3 { font-size: var(--step-1); font-weight: 500; margin: 2em 0 .6em; }
.prose h4 { font-size: var(--step-0); font-weight: 600; font-family: var(--font-sans);
  margin: 1.8em 0 .5em; }
.prose h5 { font-size: var(--step--1); font-weight: 700; font-family: var(--font-sans);
  text-transform: uppercase; letter-spacing: .08em; color: var(--primary);
  margin: 1.8em 0 .5em; }
.prose h6 { font-size: var(--step--1); font-weight: 600; font-family: var(--font-sans);
  color: var(--on-surface-variant); margin: 1.6em 0 .5em; }

/* Eyebrow / kicker above a title (reuse the sitewide token) */
.prose .eyebrow { margin-bottom: .4rem; }

/* ── Paragraphs ─────────────────────────────────────────────────────────── */
.prose p { margin: 0 0 1.25em; }

/* Lead / standfirst — the opening summary paragraph (BLUF) */
.prose .lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-surface-variant);
  font-weight: 400;
  margin-bottom: 1.5em;
}

/* Drop a soft section break between thoughts */
.prose hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--outline-variant) 20%, var(--outline-variant) 80%, transparent);
  margin: 2.5em 0;
}

/* ── Inline elements ────────────────────────────────────────────────────── */
.prose a {
  color: var(--on-primary-container);
  text-decoration: underline;
  text-decoration-color: var(--primary-dim);
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
.prose a:hover { color: var(--primary); text-decoration-color: currentColor; }
.prose strong { font-weight: 700; color: var(--text-heading); }
.prose em { color: var(--primary); font-style: italic; }
.prose mark { background: var(--success-soft); color: var(--on-primary-container);
  padding: .05em .25em; border-radius: .25em; }
.prose small { font-size: var(--step--1); color: var(--on-surface-variant); }
.prose abbr[title] { text-decoration: underline dotted; text-underline-offset: .2em;
  cursor: help; }
.prose sub, .prose sup { font-size: .72em; line-height: 0; }
.prose kbd {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82em; background: var(--surface-highest); color: var(--on-surface);
  border: 1px solid var(--outline-variant); border-bottom-width: 2px;
  border-radius: .35em; padding: .12em .45em;
}

/* ── Lists ──────────────────────────────────────────────────────────────── */
.prose ul,
.prose ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.prose li { margin: 0 0 .5em; padding-left: .25em; }
.prose li::marker { color: var(--primary); font-weight: 600; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
  position: relative;
  padding-left: 1.6em;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: .25em;
  top: .62em;
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--primary-container);
  box-shadow: 0 0 0 3px var(--success-soft);
}
/* Nested lists — tighten + recolour the marker so depth reads clearly */
.prose li > ul,
.prose li > ol { margin: .5em 0 .25em; }
.prose li > ul > li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--primary-container); }

/* Ordered lists keep native numerals, teal + bold via ::marker */
.prose ol { list-style: decimal; padding-left: 1.6em; }
.prose ol > li { padding-left: .35em; }

/* Definition list */
.prose dl { margin: 0 0 1.25em; }
.prose dt { font-weight: 700; color: var(--text-heading); margin-top: 1em; }
.prose dd { margin: .25em 0 0; padding-left: 1em; color: var(--on-surface-variant);
  border-left: 2px solid var(--outline-variant); }

/* Checklist / unstyled variant (add class="ticks" to a <ul>) */
.prose ul.ticks > li::before {
  content: "check";
  font-family: "Material Symbols Outlined";
  font-size: 1.1em;
  font-weight: 600;
  background: none;
  box-shadow: none;
  color: var(--primary);
  left: 0; top: .05em; width: auto; height: auto;
}

/* ── Blockquote ─────────────────────────────────────────────────────────── */
.prose blockquote {
  margin: 1.8em 0;
  padding: 1.1em 1.4em;
  border-left: 4px solid var(--primary);
  background: var(--secondary-container);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--on-secondary-container);
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
}
.prose blockquote p { margin: 0 0 .5em; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite {
  display: block;
  margin-top: .6em;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--secondary);
}
.prose blockquote cite::before { content: ""; }

/* Pull-quote — large, centred, no box (add class="pullquote") */
.prose blockquote.pullquote {
  border: 0; background: none; text-align: center;
  padding: 1em 0; max-width: 30ch; margin-inline: auto;
  color: var(--primary); font-size: var(--step-2);
}

/* ── Callout / note boxes ───────────────────────────────────────────────────
   <aside class="callout callout--tip"> … with an optional Material icon. */
.prose .callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  margin: 1.8em 0;
  padding: 1.1em 1.3em;
  border: 1px solid var(--outline-variant);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface-container);
}
.prose .callout > .material-symbols-outlined { color: var(--primary); margin-top: .1em; }
.prose .callout p:last-child { margin-bottom: 0; }
.prose .callout .callout-title { font-weight: 700; color: var(--text-heading);
  font-family: var(--font-sans); margin: 0 0 .3em; }
.prose .callout--tip     { border-left-color: var(--primary); background: var(--success-soft); }
.prose .callout--tip > .material-symbols-outlined { color: var(--primary); }
.prose .callout--note    { border-left-color: var(--secondary); background: var(--secondary-container);
  color: var(--on-secondary-container); }
.prose .callout--warning { border-left-color: var(--accent); background: #f7e9eb; }
.prose .callout--warning > .material-symbols-outlined { color: var(--accent); }

/* ── Code ───────────────────────────────────────────────────────────────── */
.prose code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--surface-highest);
  color: var(--on-primary-container);
  padding: .12em .4em;
  border-radius: .35em;
}
.prose pre {
  margin: 1.5em 0;
  padding: 1.1em 1.3em;
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: var(--step--1);
  line-height: 1.6;
}
.prose pre code { background: none; color: inherit; padding: 0; font-size: 1em; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.prose .table-scroll { overflow-x: auto; margin: 1.5em 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  margin: 1.5em 0;
}
.prose .table-scroll table { margin: 0; }
.prose caption { caption-side: bottom; margin-top: .6em; font-size: var(--step--1);
  color: var(--on-surface-variant); text-align: left; }
.prose th, .prose td { padding: .7em .9em; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--outline-variant); }
.prose thead th { background: var(--surface-container); color: var(--text-heading);
  font-family: var(--font-sans); font-weight: 700; border-bottom: 2px solid var(--primary-container); }
.prose tbody tr:nth-child(even) { background: var(--surface-low); }
.prose tbody tr:hover { background: var(--success-soft); }

/* ── Figures / media ────────────────────────────────────────────────────── */
.prose figure { margin: 1.8em 0; }
.prose figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  filter: grayscale(15%); }
.prose figcaption { margin-top: .6em; font-size: var(--step--1);
  color: var(--on-surface-variant); text-align: center; }

/* ── Responsive tightening ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .prose blockquote { font-size: var(--step-0); padding: .9em 1.1em; }
  .prose .callout { grid-template-columns: 1fr; gap: .4rem; }
  .prose h2 { margin-top: 1.8em; }
}