/* Shared Markata-Go presentation treatment. It is intentionally scoped to
   browser previews and slides, not the editor or application chrome. */
.markata-theme {
  --markata-surface: var(--markata-panel, var(--panel));
  --markata-text: var(--markata-ink, var(--ink));
  --markata-accent-color: var(--markata-accent, var(--accent));
  position: relative;
  isolation: isolate;
  background: var(--markata-bg, var(--bg));
  color: var(--markata-text);
}

.markata-theme::before,
.markata-theme::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: '';
}

.markata-theme::before {
  background-image: var(--markata-texture-image, none);
  background-size: var(--markata-texture-size, auto);
  background-repeat: var(--markata-texture-repeat, repeat);
  opacity: var(--markata-texture-opacity, 0);
}

.markata-theme::after {
  background-image: var(--markata-motif-image, none);
  background-position: var(--markata-motif-row-offset, 0%) 0;
  background-repeat: repeat;
  background-size: var(--markata-motif-pattern-size, var(--markata-motif-size, 78px));
  opacity: calc(var(--markata-motif-scatter, 0%) * .01);
  transform: translateY(var(--markata-motif-gap, 0));
}

.markata-theme > * { position: relative; z-index: 4; }
.markata-theme .document {
  /* The document is a reading surface. Keep it separate from the motif and
     texture layers so those layers do not turn the surface into a tiled grid. */
  width: min(100%, var(--markata-surface-width, 1000px));
  max-width: var(--markata-surface-width, 1000px);
  margin-inline: auto;
  flex: 1 1 0;
  position: relative;
  background-color: color-mix(in srgb, var(--markata-surface, var(--panel)) var(--markata-surface-opacity, 94%), transparent);
}
/* Quiet means texture remains outside the reading surface.  Use an opaque
   surface here so the motif or page background cannot leak through it. */
.markata-theme[data-markata-texture-scope="quiet"] .document {
  background-color: var(--markata-surface, var(--panel));
}
.markata-theme .document > * { position: relative; z-index: 1; }
.markata-theme .document-heading,
.markata-theme h1,
.markata-theme h2,
.markata-theme h3,
.markata-theme h4,
.markata-theme h5,
.markata-theme h6 {
  color: var(--markata-text);
  font-family: var(--markata-heading-font, var(--preview-heading-font, var(--sans)));
  letter-spacing: -.035em;
  text-wrap: balance;
}

.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h1,
.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h2,
.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h3,
.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h4,
.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h5,
.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h6 {
  /* Heading borders and backgrounds must remain intact; wear belongs only to
     the word spans below. */
  background-image: none;
  background-color: transparent !important;
  color: var(--markata-text);
  -webkit-text-fill-color: var(--markata-text);
}

.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) .markata-heading-wear {
  display: inline-block;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  vertical-align: baseline;
  -webkit-mask-image: var(--markata-heading-texture-image, none);
  -webkit-mask-size: var(--markata-heading-texture-size, 1.8em 1.8em);
  -webkit-mask-position: var(--markata-heading-texture-position, 0 0);
  -webkit-mask-repeat: var(--markata-heading-texture-repeat, repeat);
  -webkit-mask-mode: alpha;
  mask-image: var(--markata-heading-texture-image, none);
  mask-size: var(--markata-heading-texture-size, 1.8em 1.8em);
  mask-position: var(--markata-heading-texture-position, 0 0);
  mask-repeat: var(--markata-heading-texture-repeat, repeat);
  mask-mode: alpha;
}

.markata-theme .markata-heading-wear-last {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) :is(h1, h2, h3, h4, h5, h6) mark {
  -webkit-text-fill-color: var(--markata-bg, var(--bg));
  color: var(--markata-bg, var(--bg));
  text-shadow: 0 0 0 var(--markata-bg, var(--bg));
}

.markata-theme p,
.markata-theme li,
.markata-theme blockquote,
.markata-theme table { max-width: var(--content-width, 68ch); }
.markata-theme { font-family: var(--markata-body-font, var(--preview-font, var(--sans))); }
.markata-theme a { color: var(--markata-accent-color); text-decoration-color: color-mix(in srgb, var(--markata-accent-color) 60%, transparent); }
.markata-theme blockquote { border-left: 3px solid var(--markata-accent-color); padding-left: 1.2em; color: color-mix(in srgb, var(--markata-text) 78%, var(--markata-bg)); }
.markata-theme pre,
.markata-theme code { font-family: var(--preview-code-font, var(--mono)); }
.markata-theme pre { border: 1px solid var(--markata-line, var(--line)); border-radius: var(--markata-radius, var(--radius)); background: var(--markata-surface); box-shadow: var(--markata-shadow, none); }
.markata-theme mark { background: var(--markata-accent-color); color: var(--markata-accent-ink, var(--accent-ink)); }
.markata-theme .admonition,
.markata-theme .markdown-container,
.markata-theme details { border-radius: var(--markata-radius, var(--radius)); border-color: var(--markata-line, var(--line)); background: color-mix(in srgb, var(--markata-surface) 88%, var(--markata-accent-color)); }

/* The motif sits over the quiet surface only when the configured layer says so.
   The URL form supports the canonical block-w SVG; the glyph form is a safe
   fallback for generated themes that do not ship an asset. */
.markata-theme[data-markata-motif="block-w"]::after { content: ''; opacity: 1; }
.markata-theme[data-markata-motif-layer="under"]::after { z-index: 0; }
.markata-theme[data-markata-motif-layer="over"]::after { z-index: 2; }
.markata-theme[data-markata-texture-scope="headings"]::before,
.markata-theme[data-markata-texture="none"]::before { display: none; }
.markata-theme[data-markata-texture-scope="all"]::before { z-index: 0; }
.markata-theme[data-markata-texture-scope="all"][data-markata-motif-layer="over"]::after { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .markata-theme::before,
  .markata-theme::after { transform: none; }
}