/* styles for rendered markdown, see $lib/markup. the html is sanitised to a known
   set of tags and classes, so everything here is addressed by element */
@layer components {
	.markup {
		@apply typography-paragraph-regular text-foreground-default;
	}

	.markup > :first-child {
		@apply mt-0;
	}

	.markup > :last-child {
		@apply mb-0;
	}

	.markup h1,
	.markup h2,
	.markup h3,
	.markup h4,
	.markup h5,
	.markup h6 {
		@apply mt-6 mb-3 font-medium text-foreground-default;
	}

	.markup h1 {
		@apply border-b border-border-default pb-2 typography-heading-3;
	}

	.markup h2 {
		@apply border-b border-border-default pb-2 typography-heading-4;
	}

	.markup h3 {
		@apply typography-paragraph-large font-semibold;
	}

	.markup h4,
	.markup h5,
	.markup h6 {
		@apply typography-paragraph-regular font-semibold;
	}

	.markup a.anchor {
		@apply ml-2 text-foreground-placeholder no-underline opacity-0 transition-opacity;
	}

	.markup :hover > a.anchor,
	.markup a.anchor:focus-visible {
		@apply opacity-100;
	}

	.markup p,
	.markup blockquote,
	.markup ul,
	.markup ol,
	.markup pre,
	.markup table,
	.markup details {
		@apply my-3;
	}

	.markup a {
		@apply text-foreground-link-default underline hover:text-foreground-link-hover;
	}

	.markup a.mention {
		@apply font-medium no-underline hover:underline;
	}

	.markup strong {
		@apply font-semibold;
	}

	.markup ul,
	.markup ol {
		@apply pl-6;
	}

	.markup ul {
		@apply list-disc;
	}

	.markup ol {
		@apply list-decimal;
	}

	.markup li + li {
		@apply mt-1;
	}

	.markup li > ul,
	.markup li > ol {
		@apply my-1;
	}

	.markup dt {
		@apply mt-3 font-semibold;
	}

	.markup dd {
		@apply pl-6;
	}

	.markup blockquote {
		@apply border-l-2 border-border-strong pl-4 text-foreground-muted;
	}

	.markup code {
		@apply rounded bg-background-inset px-1 py-0.5 font-mono typography-monospace-small;
	}

	.markup pre {
		@apply overflow-x-auto rounded border border-border-default bg-background-inset p-3;
	}

	/* pre above already has the padding and background, inline code would double it */
	.markup pre code {
		@apply bg-transparent p-0 font-mono typography-monospace-small;
	}

	.markup kbd {
		@apply rounded border border-border-default bg-background-subtle px-1.5 py-0.5 font-mono typography-monospace-small;
	}

	.markup hr {
		@apply my-6 border-t border-border-default;
	}

	.markup img,
	.markup video {
		@apply inline-block max-w-full;
	}

	.markup table {
		@apply block w-max max-w-full border-collapse overflow-x-auto;
	}

	.markup th,
	.markup td {
		@apply border border-border-default px-3 py-1.5 text-left;
	}

	.markup th {
		@apply bg-background-subtle font-semibold;
	}

	.markup summary {
		@apply cursor-pointer font-medium;
	}

	.markup ul.task-list-container {
		@apply list-none pl-0;
	}

	/* only the outermost list gives up its indent, a nested one still steps in */
	.markup li > ul.task-list-container {
		@apply pl-6;
	}

	/* the checkbox and its label stay in the inline flow, so a nested list still
	   drops to its own line */
	.markup input[type="checkbox"] {
		@apply mr-1 translate-y-0.5;
	}

	/* a footnote you jump to lands mid screen rather than up against the top */
	.markup :is(a.footnote-anchor, li.footnote-item)[id] {
		scroll-margin-top: 48vh;
	}

	.markup sup.footnote-ref a {
		@apply no-underline hover:underline;
	}

	.markup hr.footnotes-sep {
		@apply mt-8;
	}

	.markup section.footnotes {
		@apply typography-paragraph-small text-foreground-muted;
	}

	/* github style alerts, `> [!NOTE]` and friends */
	.markup .markdown-alert {
		@apply my-3 border-l-2 border-border-default pl-4;
	}

	.markup .markdown-alert-title {
		@apply font-semibold;
	}

	.markup .markdown-alert > :last-child {
		@apply mb-0;
	}

	.markup .markdown-alert-note {
		@apply border-background-info-emphasis;
	}

	.markup .markdown-alert-note .markdown-alert-title {
		@apply text-foreground-info;
	}

	.markup .markdown-alert-tip {
		@apply border-background-success-emphasis;
	}

	.markup .markdown-alert-tip .markdown-alert-title {
		@apply text-foreground-success;
	}

	.markup .markdown-alert-important {
		@apply border-background-info-emphasis;
	}

	.markup .markdown-alert-important .markdown-alert-title {
		@apply text-foreground-info;
	}

	.markup .markdown-alert-warning {
		@apply border-background-warning-emphasis;
	}

	.markup .markdown-alert-warning .markdown-alert-title {
		@apply text-foreground-warning;
	}

	.markup .markdown-alert-caution {
		@apply border-background-danger-emphasis;
	}

	.markup .markdown-alert-caution .markdown-alert-title {
		@apply text-foreground-danger;
	}
}