/* Chaos Map base: fonts and element defaults for every page.
   Element rules join PathMX's foundation layer, beneath component styles
   (pmx.plugins), so each literate component owns its own internals.
   Anything a component draws carries data-cm-ui and is left alone here. */
@import "/illustrations.css";

@font-face { font-family: Editor; src: url("/fonts/Editor-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Editor; src: url("/fonts/Editor-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Editor; src: url("/fonts/Editor-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Editor; src: url("/fonts/Editor-Italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: Editor; src: url("/fonts/Editor-BoldItalic.woff2") format("woff2"); font-style: italic; font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/google/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/google/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Shared authored controls and the native controls in the Site Map. */
:is(.cm-button, a.pmx-button[data-pmx-link="button"]):not([hidden]) {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cm-space-2);
  inline-size: auto;
  block-size: auto;
  min-inline-size: var(--cm-button-target);
  min-block-size: var(--cm-button-target);
  padding: var(--cm-space-1) var(--cm-space-2);
  border: var(--cm-button-border);
  border-radius: var(--cm-button-radius);
  background: var(--cm-button-fill);
  color: var(--pmx-color-muted);
  font: var(--cm-weight-heading) var(--cm-text-label)/var(--cm-leading-label) var(--cm-font-label);
  letter-spacing: var(--cm-tracking-label);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--pmx-motion-duration) var(--pmx-motion-ease);

  &:is(a, .cm-button)[data-variant="outline"] { background: transparent; }
  &:active:not(:disabled, [aria-disabled="true"]) { background: var(--cm-button-hover); color: var(--pmx-color-fg); }
  &:focus-visible { outline: 2px solid var(--pmx-color-focus); outline-offset: var(--cm-space-1); }
  &:is(:disabled, [aria-disabled="true"]) { opacity: .5; cursor: default; }
  & svg { inline-size: var(--cm-button-icon-size); block-size: var(--cm-button-icon-size); flex: none; }

  @media (hover: hover) {
    &:hover:not(:disabled, [aria-disabled="true"]) { background: var(--cm-button-hover); color: var(--pmx-color-fg); }
  }
  @media (prefers-reduced-motion: reduce) { transition: none; }
}

/* A button that leads on from a Guide entry (a land's tour, say) is drawn in the
   accent colour with an arrow, so it stands out from the text above it. It sits
   here, beside the shared rule, because that rule is outside the layers. */
.cm-entry .cm-entry-copy a.pmx-button[data-pmx-link="button"]:not([hidden]) {
  margin-top: var(--cm-space-4);
  gap: .6em;
  padding-inline: var(--cm-space-4);
  border: 1px solid color-mix(in srgb, var(--pmx-color-accent) 65%, transparent);
  background: color-mix(in srgb, var(--pmx-color-accent) 10%, transparent);
  color: var(--pmx-color-accent);

  &::after { content: "→"; font-family: var(--pmx-font-heading); font-size: 1.15em; line-height: 1; transition: translate .15s ease; }
  &:is(:hover, :focus-visible, :active) { border-color: var(--pmx-color-accent); background: color-mix(in srgb, var(--pmx-color-accent) 18%, transparent); color: var(--pmx-color-accent); }
  &:hover::after { translate: .2em 0; }
  @media (prefers-reduced-motion: reduce) { &::after { transition: none; } }
}

@layer pmx.foundation {
  body { margin: 0; background: var(--pmx-color-bg); color: var(--pmx-color-fg); -webkit-font-smoothing: antialiased; }

  /* Headings: Editor at regular weight; size carries the hierarchy. */
  .pmx-prose :is(h1, h2, h3, h4, h5, h6) { font-family: var(--pmx-font-heading); font-weight: var(--cm-weight-heading); text-wrap: balance; }
  .pmx-prose h1 { font-size: var(--cm-text-title); line-height: var(--cm-leading-display); letter-spacing: var(--cm-tracking-display); }
  .pmx-prose h2 { font-size: var(--cm-text-term); line-height: var(--cm-leading-heading); letter-spacing: var(--cm-tracking-heading); }
  .pmx-prose h3 { font-size: var(--cm-text-definition); line-height: var(--cm-leading-heading); }
  .pmx-prose h4 { font-size: var(--cm-text-body); line-height: var(--cm-leading-heading); }
  .pmx-prose :is(h5, h6) { font-size: var(--cm-text-body); line-height: var(--cm-leading-heading); }

  /* Links: a faint drawn underline that follows wrapped lines. */
  .pmx-prose a:not([data-cm-ui], .pmx-button, [data-pmx-link], .pmx-heading-anchor) {
    color: var(--pmx-color-fg);
    text-decoration: none;
    background: var(--cm-mark-underline) left bottom / var(--cm-mark-underline-size) repeat-x;
    padding-bottom: .06em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .pmx-prose a:not([data-cm-ui], .pmx-button, [data-pmx-link], .pmx-heading-anchor):hover { color: var(--pmx-color-muted); }
  :is(a, button):focus-visible { outline: 2px solid var(--pmx-color-focus); outline-offset: 4px; }

  /* Media */
  .pmx-prose img { max-width: 100%; height: auto; }
  .cm-illustration-link { display: block; }
  .pmx-prose figure { margin: var(--cm-space-6) auto; }
  .pmx-prose figcaption { margin-top: var(--cm-space-2); font-size: .9rem; font-style: italic; color: var(--pmx-color-muted); text-align: center; }
  .pmx-prose blockquote { margin-inline: 0; padding-inline-start: var(--cm-space-5); border-inline-start: 1px solid var(--pmx-color-border-strong); font-style: italic; }
  .pmx-prose iframe { width: 100%; border: 0; }
  .pmx-prose iframe[src*="youtube"] { aspect-ratio: 16 / 9; height: auto; }

  /* Classes authored in the canonical Mental Maps essays. */
  .edition-illustration { background: var(--cm-paper); }
  .essay-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cm-space-2); margin-block: var(--cm-space-5); }
  .essay-gallery img { width: 100%; margin: 0; }
  @media (max-width: 32rem) { .essay-gallery { grid-template-columns: 1fr; } }

  /* Footnote markers that open an annotation. */
  .pmx-prose a[href^="/annotations/"] { vertical-align: super; font: .7em var(--cm-font-label); line-height: 0; margin-inline: .15em; background: none; text-decoration: underline; text-underline-offset: .15em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Inline reading links share one active treatment for pointer and keyboard.
   Component controls and image links retain their own focus treatments. */
.pmx-prose a:not([data-cm-ui], .pmx-button, [data-pmx-link], .pmx-heading-anchor):not(:has(img)):is(:hover, :active, :focus-visible, [aria-describedby~="pmx-source-preview-description"]) {
  outline: none;
  color: var(--pmx-color-link);
  background-color: color-mix(in srgb, var(--pmx-color-link) 9%, transparent);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}