/* ============================================================================
   prose.css — long-form text rendered from Markdown (MarkdownExtension):
   the news post (/news/{slug}) and the legal documents (/legal/{slug}).
   Load it after the kit, on every page that renders |markdown.

   Also loaded by the admin news form (templates/admin/pages/news_form.html.twig)
   for its Markdown preview, a .news-post-content box — hence every rule is
   written as :is(.prose, .news-post-content), and only tokens the admin
   defines too are used (motion and a few others carry a fallback). Keep
   both names. The admin does NOT load the public kit (components.css), so
   this file styles everything the filter emits on its own: the admonitions
   and tables keep their Markdown classes (.admonition, .md-table — the
   admin's own .md-body preview styles read them too) and mirror the kit
   .notice / .table look (components.css sections 21 / 22) with the same
   tone tokens instead of borrowing the kit classes.

   Covers what the filter emits: h2–h6[id] (# → h2), p, br, strong/em/u/del,
   ul/ol (nested), blockquote, hr, inline code, pre>code, img, a,
   .site-link(--yt|--fb|--ig|--x|--gh|--ls|…) with __icon/__badge,
   .spoiler(.revealed — the kit toggles it, main.js), .admonition--info|tip|
   success|warning|error|note with __title/__body, .md-table-wrap > .md-table
   (td[data-label]), .md-subtext, .md-spacer. Flow spacing: every block
   after another gets 1.1em; headings get more above and less below.

   Variant .prose--post (the news post, and the admin news preview): the
   compact reading look — body text a step quieter at 1rem / 1.6, bright
   headings with the accent bar on h3, tighter lists, a tinted quote, the
   diamond section break. The legal documents keep the base look.

   Contents
     1. Base flow, headings, text, lists, quote, code, images
     2. Platform links, spoilers
     3. Admonitions (the .notice look)
     4. Tables (the .table look; labelled rows on phones)
     5. Variant .prose--post
   ========================================================================== */


/* ── 1. Base ─────────────────────────────────────────────────────────────── */
:is(.prose, .news-post-content) {
  color: var(--text-1);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  :is(.prose, .news-post-content) { font-size: 1rem; line-height: 1.7; }
}
:is(.prose, .news-post-content) > * { margin: 0; }
:is(.prose, .news-post-content) > * + * { margin-top: 1.1em; }

/* Headings */
:is(.prose, .news-post-content) :is(h2, h3, h4, h5, h6) {
  color: var(--text-strong);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--head-h, 4rem) + 1.5rem);
}
:is(.prose, .news-post-content) h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); letter-spacing: -0.02em; }
:is(.prose, .news-post-content) h3 { font-size: 1.3125rem; }
:is(.prose, .news-post-content) h4 { font-size: 1.0625rem; }
:is(.prose, .news-post-content) :is(h5, h6) {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
:is(.prose, .news-post-content) > * + :is(h2, h3) { margin-top: 2.2em; }
:is(.prose, .news-post-content) > * + :is(h4, h5, h6) { margin-top: 1.8em; }
:is(.prose, .news-post-content) > :is(h2, h3, h4, h5, h6) + * { margin-top: 0.65em; }
:is(.prose, .news-post-content) > :first-child { margin-top: 0; }

/* Text */
:is(.prose, .news-post-content) p { text-wrap: pretty; }
:is(.prose, .news-post-content) p:empty { display: none; }
:is(.prose, .news-post-content) :is(strong, b) { color: var(--text-strong); font-weight: 600; }
:is(.prose, .news-post-content) u { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:is(.prose, .news-post-content) del { color: var(--text-3); }
:is(.prose, .news-post-content) a:not(.site-link) {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast, 160ms) ease, text-decoration-color var(--dur-fast, 160ms) ease;
}
:is(.prose, .news-post-content) a:not(.site-link):hover {
  color: var(--accent-300);
  text-decoration-color: currentColor;
}
:is(.prose, .news-post-content) > .md-subtext {
  margin-top: 0.5em;
  color: var(--text-2);
  font-size: 0.8125rem;
  line-height: 1.55;
}
/* Each extra blank line in the text is one empty line of text on the page
   (the   inside gives it the line's height), as in the editor. */
:is(.prose, .news-post-content) > .md-spacer { margin: 0; }

/* Lists */
:is(.prose, .news-post-content) :is(ul, ol) { margin: 0; padding-left: 1.4em; }
:is(.prose, .news-post-content) > p + :is(ul, ol) { margin-top: 0.6em; }
:is(.prose, .news-post-content) li + li { margin-top: 0.35em; }
/* an item the author set off with a blank line */
:is(.prose, .news-post-content) li.md-gap { margin-top: 1.1em; }
:is(.prose, .news-post-content) li > :is(ul, ol) { margin-top: 0.35em; }
:is(.prose, .news-post-content) li::marker { color: var(--accent-400); }
:is(.prose, .news-post-content) ol > li::marker {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.875em;
}
:is(.prose, .news-post-content) li > ul { list-style-type: circle; }

/* Quote, rule */
:is(.prose, .news-post-content) blockquote {
  margin: 0;
  padding: 0.125em 0 0.125em 1.25em;
  color: var(--text-2);
  border-left: 2px solid var(--accent-line);
}
:is(.prose, .news-post-content) blockquote > * + * { margin-top: 0.75em; }
:is(.prose, .news-post-content) > blockquote,
:is(.prose, .news-post-content) > .admonition,
:is(.prose, .news-post-content) > .md-table-wrap,
:is(.prose, .news-post-content) > pre { margin-block: 1.6em; }
:is(.prose, .news-post-content) > :is(blockquote, .admonition, .md-table-wrap, pre):first-child { margin-top: 0; }
:is(.prose, .news-post-content) hr {
  height: 0;
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Code */
:is(.prose, .news-post-content) code {
  padding: 0.125em 0.375em;
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 0.85em;
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}
:is(.prose, .news-post-content) pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  background-color: var(--bg-deep, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--highlight-top);
  font-size: 0.875rem;
  line-height: 1.65;
}
:is(.prose, .news-post-content) pre code {
  padding: 0;
  color: var(--text-1);
  font-size: inherit;
  background: none;
  border: 0;
}

/* Images (inline in a paragraph) */
:is(.prose, .news-post-content) img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.4em auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
/* A kit video facade inside the text (Help Center articles): its thumbnail
   is laid out by the kit (.video__thumb), not as an inline image. */
:is(.prose, .news-post-content) .video img {
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* ── 2. Platform links, spoilers ─────────────────────────────────────────
   Platform links: a pill with the brand icon; its hue only on hover. */
:is(.prose, .news-post-content) .site-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.0625em 0.6em;
  color: var(--text-1);
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: baseline;
  text-decoration: none;
  background-color: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  transition: color var(--dur-fast, 160ms) ease, border-color var(--dur-fast, 160ms) ease;
}
:is(.prose, .news-post-content) .site-link:hover { color: var(--text-strong); border-color: var(--line-hover); }
:is(.prose, .news-post-content) .site-link__icon {
  width: 0.95em;
  height: 0.95em;
  color: var(--text-2);
  transition: color var(--dur-fast, 160ms) ease;
}
:is(.prose, .news-post-content) .site-link--ls .site-link__icon,
:is(.prose, .news-post-content) .site-link:hover .site-link__icon { color: var(--accent-400); }
:is(.prose, .news-post-content) .site-link--yt:hover .site-link__icon { color: var(--brand-youtube, var(--danger)); }
:is(.prose, .news-post-content) .site-link--ig:hover .site-link__icon { color: var(--brand-instagram, var(--cat-pink)); }
:is(.prose, .news-post-content) .site-link--tt:hover .site-link__icon { color: var(--text-strong); }

/* Spoiler ||text||: covered until clicked (main.js toggles .revealed). */
:is(.prose, .news-post-content) .spoiler {
  padding: 0 0.25em;
  border-radius: var(--radius-xs);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-color var(--dur-fast, 160ms) ease, color var(--dur-fast, 160ms) ease;
}
:is(.prose, .news-post-content) .spoiler:not(.revealed) {
  color: transparent;
  background-color: var(--surface-3);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
:is(.prose, .news-post-content) .spoiler:not(.revealed) * {
  color: transparent;
  text-decoration-color: transparent;
  visibility: hidden;
}
:is(.prose, .news-post-content) .spoiler:not(.revealed):hover { background-color: var(--accent-soft-hover); }
:is(.prose, .news-post-content) .spoiler:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
}
:is(.prose, .news-post-content) .spoiler.revealed { background-color: var(--surface-active); }

/* ── 3. Admonitions > [!TYPE] ────────────────────────────────────────────
   The kit .notice look (same fill, edge, radius, padding; tone tokens as
   in components.css section 41), one tone per type: tip = accent (the
   default), info = teal, success, warning, error = danger, note = muted. */
/* Every type is the same box: only the tone changes, and the fill and the
   border are mixed from it in the same proportions, so no type reads
   heavier (or larger) than another. */
:is(.prose, .news-post-content) .admonition {
  --tone: var(--accent-text);
  padding: 1rem 1.25rem;
  background-color: color-mix(in srgb, var(--tone) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  border-radius: var(--radius-md);
}
:is(.prose, .news-post-content) .admonition--tip     { --tone: var(--accent-text); }
:is(.prose, .news-post-content) .admonition--info    { --tone: var(--teal-text); }
:is(.prose, .news-post-content) .admonition--success { --tone: var(--success-text); }
:is(.prose, .news-post-content) .admonition--warning { --tone: var(--warning-text); }
:is(.prose, .news-post-content) .admonition--error   { --tone: var(--danger-text); }
:is(.prose, .news-post-content) .admonition--note    { --tone: var(--text-2); }
:is(.prose, .news-post-content) .admonition__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  color: var(--tone);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* The icon centres on the capitals, not on the line box (whose middle sits
   lower, room for descenders an uppercase label never has): the label is
   trimmed to cap height; the row keeps its height through min-height. */
:is(.prose, .news-post-content) .admonition__title { min-height: 1.4em; }
:is(.prose, .news-post-content) .admonition__title svg { flex: none; width: 1.1em; height: 1.1em; }
:is(.prose, .news-post-content) .admonition__title > span { text-box: trim-both cap alphabetic; }
:is(.prose, .news-post-content) .admonition__body { font-size: 0.9375em; line-height: 1.7; }
:is(.prose, .news-post-content) .admonition__body > * { margin: 0; }
:is(.prose, .news-post-content) .admonition__body > * + * { margin-top: 0.75em; }

/* ── 4. Tables ───────────────────────────────────────────────────────────
   The kit .table look: a framed, scrollable table; stacked label/value
   rows on phones (every cell carries data-label, MarkdownExtension). */
:is(.prose, .news-post-content) .md-table-wrap {
  overflow-x: auto;
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--highlight-top);
}
:is(.prose, .news-post-content) .md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
}
:is(.prose, .news-post-content) .md-table :is(th, td) {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
:is(.prose, .news-post-content) .md-table th {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--surface-hover);
  border-bottom-color: var(--line-strong);
}
:is(.prose, .news-post-content) .md-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) {
  :is(.prose, .news-post-content) .md-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  :is(.prose, .news-post-content) .md-table,
  :is(.prose, .news-post-content) .md-table tbody,
  :is(.prose, .news-post-content) .md-table tr,
  :is(.prose, .news-post-content) .md-table td { display: block; width: 100%; }
  :is(.prose, .news-post-content) .md-table tr {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  :is(.prose, .news-post-content) .md-table tbody tr:last-child { border-bottom: 0; }
  /* Label column on the left (absolutely placed, so a cell holding text
     and inline elements stays one flowing block on the right). */
  :is(.prose, .news-post-content) .md-table td {
    position: relative;
    padding: 0.25rem 0 0.25rem 7.75rem;
    border: 0;
    /* The filter writes text-align inline on aligned columns. */
    text-align: left !important;
  }
  :is(.prose, .news-post-content) .md-table td::before {
    content: attr(data-label);
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    line-height: calc(0.9375rem * 1.55); /* one line of the cell text */
    text-transform: uppercase;
  }
}


/* ── 5. Variant .prose--post ─────────────────────────────────────────────
   The news post (and the admin news preview, .news-post-content): compact
   and calm — body text a step quieter (text-2) at 1rem / 1.6, bold and
   headings bright, so structure reads at a glance; every section heading
   (## renders as h3 in posts, # as h2) carries the accent bar or a
   hairline; lists and quotes sit tight to their text. Rules the base
   already sets the same way (links, bold) are not repeated. */
:is(.prose--post, .news-post-content) {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.6;
}
:is(.prose--post, .news-post-content) > * + * { margin-top: 1em; }
/* italics keep the text's colour: style only, never brightness */

/* Headings: bright, clearly bigger than text, with room above. */
:is(.prose--post, .news-post-content) :is(h2, h3, h4) { color: var(--text-strong); line-height: 1.3; letter-spacing: -0.015em; }
:is(.prose--post, .news-post-content) h2 {
  padding-bottom: 0.5em;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--line);
}
:is(.prose--post, .news-post-content) h3 {
  position: relative;
  padding-left: 0.85rem;
  font-size: 1.25rem;
}
:is(.prose--post, .news-post-content) h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  border-radius: var(--radius-full);
  background-color: var(--accent-500);
}
:is(.prose--post, .news-post-content) h4 { font-size: 1.0625rem; color: var(--text-1); }
:is(.prose--post, .news-post-content) > * + h2 { margin-top: 2em; }
:is(.prose--post, .news-post-content) > * + h3 { margin-top: 1.9em; }
:is(.prose--post, .news-post-content) > * + h4 { margin-top: 1.6em; }
:is(.prose--post, .news-post-content) > :is(h2, h3, h4) + * { margin-top: 0.65em; }

/* Lists: tight to the paragraph before them, compact items. */
:is(.prose--post, .news-post-content) :is(ul, ol) { padding-left: 1.35em; }
:is(.prose--post, .news-post-content) > p + :is(ul, ol) { margin-top: 0.5em; }
:is(.prose--post, .news-post-content) li { padding-left: 0.2em; }
:is(.prose--post, .news-post-content) li + li { margin-top: 0.3em; }
:is(.prose--post, .news-post-content) ol > li::marker { font-weight: 600; }
:is(.prose--post, .news-post-content) li > :is(ul, ol) { margin-top: 0.3em; }

/* Quote: a tinted block with the accent rail. */
:is(.prose--post, .news-post-content) blockquote {
  padding: 0.85em 1.1em 0.85em 1.25em;
  color: var(--text-1);
  font-size: 1.0625rem;
  line-height: 1.6;
  background-color: var(--ambient-violet-soft, var(--accent-soft));   /* lighter than --accent-soft */
  border-left: 3px solid var(--accent-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
:is(.prose--post, .news-post-content) > blockquote { margin-block: 1.5em; }

/* Inline code / code blocks: a touch smaller in the quieter text. */
:is(.prose--post, .news-post-content) code { font-size: 0.8125em; }
:is(.prose--post, .news-post-content) pre { font-size: 0.8125rem; line-height: 1.6; }

/* Section break: a full-width hairline fading out at both ends, with a
   small accent diamond in the middle (a gap in the line for it, so no fill
   colour has to match the sheet). */
:is(.prose--post, .news-post-content) hr {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 2.25em 0;
  overflow: visible;
  border: 0;
  background:
    linear-gradient(90deg, transparent, var(--line-strong) 40%, var(--line-strong) calc(100% - 14px), transparent calc(100% - 14px)) left / 50% 100% no-repeat,
    linear-gradient(90deg, transparent 14px, var(--line-strong) 14px, var(--line-strong) 60%, transparent) right / 50% 100% no-repeat;
}
:is(.prose--post, .news-post-content) hr::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent-400);
  transform: translate(-50%, -50%) rotate(45deg);
}
:is(.prose--post, .news-post-content) img {
  margin-block: 0.75em;
  border-radius: var(--radius-lg);
}
:is(.prose--post, .news-post-content) .md-subtext { margin-top: 0.35em; color: var(--text-3); }
@media (max-width: 767px) {
  :is(.prose--post, .news-post-content) { font-size: 0.9375rem; }
  :is(.prose--post, .news-post-content) h2 { font-size: 1.3125rem; }
  :is(.prose--post, .news-post-content) h3 { font-size: 1.125rem; }
  :is(.prose--post, .news-post-content) blockquote { font-size: 1rem; }
}