/* Project classes that are not Tailwind.
 *
 * tailwind.min.css is a hand-curated subset of real Tailwind output; it is
 * not edited by hand and holds only genuine Tailwind utility classes. Every
 * class this project invents itself belongs here instead, so that
 * "is this class defined anywhere?" has exactly two files to look in --
 * which is what tests/js/tailwind-classes.test.js checks on every run.
 *
 * Loaded sitewide from templates/_eikhart/_layout.twig, next to Tailwind.
 */

/* ── Moved out of _layout.twig's inline <style> ─────────────────────────
   Same rules, same effect; they were inline only because there was no
   shared file for them to live in. */

/* Alpine hides x-cloak elements until it has initialised. */
[x-cloak] { display: none !important; }

/* Not in this Tailwind subset, and used across many templates. */
.whitespace-nowrap { white-space: nowrap; }

/* Footnote markers in article content (verbb/footnotes output). The rule
   used to read "sup.footnote a"; the class only ever appears on a <sup>, so
   the tag qualifier said nothing the class did not already say. */
.footnote a { color: #3b82f6; text-decoration: none; padding: 0 2px; margin-left: 1px; background: #eff6ff; border-radius: 2px; }
.footnote a:hover { text-decoration: underline; }

#content { overflow-wrap: break-word; word-break: break-word; }

/* ── Trueroot (templates/trueroot/) ─────────────────────────────────────
   trueroot.ai runs on this stylesheet and on _eikhart/_layout.twig since
   1 October 2026; before that it was a separate Pico CSS design. These are
   the pieces the Tailwind subset has no class for and that every trueroot
   page shares. Pieces only one page needs (the bloom drawing, the rings on
   results, the source tables) stay in that page's own <style> block. */

/* Small label above a heading. */
.tr-kicker { display: inline-block; margin-bottom: .75rem; font-size: .875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

/* Headings that run to a full sentence need more air than the line-height
   of 1 Tailwind gives its large sizes. */
.tr-heading { line-height: 1.1; letter-spacing: -.02em; }

/* <mark> inside a heading: the eikhart blue gradient as text colour. */
.tr-heading mark { background: linear-gradient(98.24deg, #56c1e3, #5b6af0); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Two columns from md up (three with tr-cols-3), one on a phone. The
   subset has no md:grid-cols-2 and no gap above 4. */
.tr-cols { display: grid; gap: 2rem; }
@media (min-width: 768px) {
	.tr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tr-cols.tr-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Text that arrives as HTML from a translation string, styled the way
   macro.text() styles content. Tailwind's reset takes list markers and
   margins away, so they are put back here. */
.tr-prose > * + * { margin-top: 1rem; }
.tr-prose ul { list-style: disc; padding-left: 1.5rem; }
.tr-prose ol { list-style: decimal; padding-left: 1.5rem; }
.tr-prose li + li { margin-top: .6rem; }
.tr-prose li::marker { font-weight: 700; }
.tr-prose strong { font-weight: 700; }
.tr-prose a { color: #3b82f6; text-decoration: underline; }
.tr-prose a:visited { color: #8b5cf6; }
.tr-prose a:hover { text-decoration: none; }
.tr-prose h3 { margin-top: 2.5rem; font-family: Outfit, ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 1.875rem; line-height: 1.2; }

/* The yes / no / don't know buttons of the check on the trueroot home.
   aria-pressed carries the state; the page's script sets it. */
.tr-choice[aria-pressed="true"] { background-image: linear-gradient(98.24deg, #cee9c1, #83c8de); border-color: #374151; }

/* ── JavaScript hooks ───────────────────────────────────────────────────
   These carry no styling on purpose: they exist so JS can find an element
   (querySelector/closest). They are declared here rather than left
   undefined so that every class in the markup resolves to something a
   reader -- and the class checker -- can find. Removing one breaks
   behaviour, not appearance.

   .gap-results-section   report.twig      runGapFor() scroll target
   .share-panel           article.twig     share panel container
   .share-url-input       article.twig     copy-to-clipboard input
   .copy-success-msg      article.twig     copy-to-clipboard confirmation
   .toc-link              article.twig     table-of-contents links */
.gap-results-section,
.share-panel,
.share-url-input,
.copy-success-msg,
.toc-link { /* hook only */ }