@layer pmx.foundation, pmx.plugins, pmx.theme;
@layer pmx.foundation {
:root {
  color-scheme: light dark;
}

:root[data-pmx-scheme="light"] {
  color-scheme: light;
}

:root[data-pmx-scheme="dark"] {
  color-scheme: dark;
}

:root {
  --pmx-default-light-color-bg: oklch(0.985 0.003 250);
  --pmx-default-light-color-fg: oklch(0.22 0.01 250);
  --pmx-default-light-color-muted: oklch(0.48 0.02 250);
  --pmx-default-light-color-surface: oklch(0.96 0.01 250);
  --pmx-default-light-color-link: oklch(0.48 0.16 255);
  --pmx-default-light-color-accent: oklch(0.54 0.18 255);
  --pmx-default-light-color-danger: oklch(0.54 0.2 25);
  --pmx-default-light-color-border: oklch(0.86 0.02 250);
  --pmx-default-light-color-focus: oklch(0.54 0.18 255);
  --pmx-default-light-color-success: oklch(0.52 0.14 150);
  --pmx-default-light-color-warning: oklch(0.6 0.14 70);
  --pmx-default-dark-color-bg: oklch(0.165 0.008 255);
  --pmx-default-dark-color-fg: oklch(0.94 0.005 255);
  --pmx-default-dark-color-muted: oklch(0.72 0.012 255);
  --pmx-default-dark-color-surface: oklch(0.21 0.01 255);
  --pmx-default-dark-color-link: oklch(0.76 0.13 250);
  --pmx-default-dark-color-accent: oklch(0.72 0.16 250);
  --pmx-default-dark-color-danger: oklch(0.72 0.18 25);
  --pmx-default-dark-color-border: oklch(0.3 0.012 255);
  --pmx-default-dark-color-focus: oklch(0.76 0.13 250);
  --pmx-default-dark-color-success: oklch(0.78 0.14 150);
  --pmx-default-dark-color-warning: oklch(0.82 0.14 80);

  --pmx-color-bg: light-dark(
    var(--pmx-default-light-color-bg),
    var(--pmx-default-dark-color-bg)
  );
  --pmx-color-fg: light-dark(
    var(--pmx-default-light-color-fg),
    var(--pmx-default-dark-color-fg)
  );
  --pmx-color-muted: light-dark(
    var(--pmx-default-light-color-muted),
    var(--pmx-default-dark-color-muted)
  );
  --pmx-color-surface: light-dark(
    var(--pmx-default-light-color-surface),
    var(--pmx-default-dark-color-surface)
  );
  --pmx-color-link: light-dark(
    var(--pmx-default-light-color-link),
    var(--pmx-default-dark-color-link)
  );
  --pmx-color-accent: light-dark(
    var(--pmx-default-light-color-accent),
    var(--pmx-default-dark-color-accent)
  );
  --pmx-color-danger: light-dark(
    var(--pmx-default-light-color-danger),
    var(--pmx-default-dark-color-danger)
  );
  --pmx-color-border: light-dark(
    var(--pmx-default-light-color-border),
    var(--pmx-default-dark-color-border)
  );
  --pmx-color-focus: light-dark(
    var(--pmx-default-light-color-focus),
    var(--pmx-default-dark-color-focus)
  );
  --pmx-color-success: light-dark(
    var(--pmx-default-light-color-success),
    var(--pmx-default-dark-color-success)
  );
  --pmx-color-warning: light-dark(
    var(--pmx-default-light-color-warning),
    var(--pmx-default-dark-color-warning)
  );
  /* Text on accent fills. */
  --pmx-color-on-accent: var(--pmx-color-bg);
  --pmx-color-on-danger: var(--pmx-color-bg);
  /* Control edges: fields and outline buttons, at least 3:1 against the page. */
  --pmx-color-border-strong: color-mix(
    in oklch,
    var(--pmx-color-fg) 54%,
    var(--pmx-color-bg)
  );
  /* Subtle fill for hovered and highlighted rows. */
  --pmx-color-hover: color-mix(in oklch, var(--pmx-color-fg) 7%, transparent);

  --pmx-font-body: ui-sans-serif, system-ui, sans-serif;
  --pmx-font-heading: var(--pmx-font-body);
  --pmx-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --pmx-prose-size: 1rem;
  --pmx-prose-leading: 1.6;
  --pmx-prose-flow: 1em;
  --pmx-prose-gutter: 1.75rem;
  /* Headings step by this ratio from the body size on wide screens: h4 is one
     step, h1 four. Narrow screens use a gentler ratio derived from it. */
  --pmx-prose-scale: 1.25;
  --_pmx-prose-ratio: var(--pmx-prose-scale);
  --pmx-prose-h3: calc(1em * var(--_pmx-prose-ratio) * var(--_pmx-prose-ratio));
  --pmx-prose-h2: calc(
    1em * var(--_pmx-prose-ratio) * var(--_pmx-prose-ratio) *
      var(--_pmx-prose-ratio)
  );
  --pmx-prose-h1: calc(
    1em * var(--_pmx-prose-ratio) * var(--_pmx-prose-ratio) *
      var(--_pmx-prose-ratio) * var(--_pmx-prose-ratio)
  );
  --pmx-radius-sm: 0.25rem;
  --pmx-radius-md: 0.35rem;
  --pmx-radius-lg: 0.5rem;
  --pmx-radius-xl: 0.75rem;
  --pmx-radius-2xl: 1rem;
  --pmx-radius-3xl: 1.5rem;
  --pmx-radius-4xl: 2rem;
  --pmx-radius-full: 9999px;
  --pmx-radius: var(--pmx-radius-lg);
  /* About 85 characters of body text per line. */
  --pmx-document-measure: 68ch;
  --pmx-wide-measure: 80rem;

  /* Shared viewport chrome contract. Runtime-measured chrome updates insets. */
  --pmx-viewport-inset-block-start: 0px;
  --pmx-viewport-inset-block-end: 0px;
  --pmx-viewport-gutter-block-start: max(1rem, env(safe-area-inset-top, 0px));
  --pmx-viewport-gutter-block-end: max(1rem, env(safe-area-inset-bottom, 0px));
  --pmx-scroll-offset-block-start: calc(
    var(--pmx-viewport-inset-block-start) +
      var(--pmx-viewport-gutter-block-start)
  );
  --pmx-sticky-block-start: var(--pmx-scroll-offset-block-start);
  --pmx-sticky-block-end: calc(
    var(--pmx-viewport-inset-block-end) + var(--pmx-viewport-gutter-block-end)
  );
  --pmx-sticky-max-block-size: max(
    0px,
    calc(100dvh - var(--pmx-sticky-block-start) - var(--pmx-sticky-block-end))
  );

  --pmx-default-light-code-bg: oklch(0.955 0.01 250);
  --pmx-default-light-code-fg: oklch(0.22 0.01 250);
  --pmx-default-light-code-comment: oklch(0.48 0.02 250);
  --pmx-default-light-code-keyword: oklch(0.47 0.16 255);
  --pmx-default-light-code-string: oklch(0.43 0.12 145);
  --pmx-default-light-code-punctuation: oklch(0.42 0.02 250);
  --pmx-default-dark-code-bg: oklch(0.2 0.01 255);
  --pmx-default-dark-code-fg: oklch(0.92 0.005 255);
  --pmx-default-dark-code-comment: oklch(0.7 0.012 255);
  --pmx-default-dark-code-keyword: oklch(0.78 0.13 255);
  --pmx-default-dark-code-string: oklch(0.78 0.12 145);
  --pmx-default-dark-code-punctuation: oklch(0.78 0.01 255);
  --pmx-code-bg: light-dark(
    var(--pmx-default-light-code-bg),
    var(--pmx-default-dark-code-bg)
  );
  --pmx-code-fg: light-dark(
    var(--pmx-default-light-code-fg),
    var(--pmx-default-dark-code-fg)
  );
  --pmx-code-comment: light-dark(
    var(--pmx-default-light-code-comment),
    var(--pmx-default-dark-code-comment)
  );
  --pmx-code-keyword: light-dark(
    var(--pmx-default-light-code-keyword),
    var(--pmx-default-dark-code-keyword)
  );
  --pmx-code-string: light-dark(
    var(--pmx-default-light-code-string),
    var(--pmx-default-dark-code-string)
  );
  --pmx-code-punctuation: light-dark(
    var(--pmx-default-light-code-punctuation),
    var(--pmx-default-dark-code-punctuation)
  );

  /* Shadows follow a compact Tailwind-like elevation scale. One color drives
     the scale so themes retune it, and dark schemes get the depth they need. */
  --pmx-shadow-color: light-dark(
    oklch(0.2 0.02 250 / 0.1),
    oklch(0 0 0 / 0.45)
  );
  --pmx-shadow-2xs: 0 1px var(--pmx-shadow-color);
  --pmx-shadow-xs: 0 1px 2px 0 var(--pmx-shadow-color);
  --pmx-shadow-sm:
    0 1px 3px 0 var(--pmx-shadow-color), 0 1px 2px -1px var(--pmx-shadow-color);
  --pmx-shadow-md:
    0 4px 6px -1px var(--pmx-shadow-color),
    0 2px 4px -2px var(--pmx-shadow-color);
  --pmx-shadow-lg:
    0 10px 15px -3px var(--pmx-shadow-color),
    0 4px 6px -4px var(--pmx-shadow-color);
  --pmx-shadow-xl:
    0 20px 25px -5px var(--pmx-shadow-color),
    0 8px 10px -6px var(--pmx-shadow-color);
  --pmx-shadow-2xl: 0 25px 50px -12px var(--pmx-shadow-color);
  --pmx-shadow: var(--pmx-shadow-sm);

  /* Material: frosted-glass fills. Thickness is how much sits behind shows through. */
  --pmx-material-ultra-thin: color-mix(
    in oklch,
    var(--pmx-color-bg) 42%,
    transparent
  );
  --pmx-material-thin: color-mix(
    in oklch,
    var(--pmx-color-bg) 56%,
    transparent
  );
  --pmx-material-regular: color-mix(
    in oklch,
    var(--pmx-color-bg) 72%,
    transparent
  );
  --pmx-material-thick: color-mix(
    in oklch,
    var(--pmx-color-bg) 86%,
    transparent
  );
  --pmx-material-ultra-thick: color-mix(
    in oklch,
    var(--pmx-color-bg) 96%,
    transparent
  );
  --pmx-material: var(--pmx-material-regular);
  --pmx-material-filter: blur(1.25rem) saturate(1.8);
}

@media (max-width: 47.99rem) {
  :root {
    --_pmx-prose-ratio: calc(1 + (var(--pmx-prose-scale) - 1) * 0.8);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --pmx-material-ultra-thin: color-mix(
      in oklch,
      var(--pmx-color-bg) 88%,
      transparent
    );
    --pmx-material-thin: color-mix(
      in oklch,
      var(--pmx-color-bg) 92%,
      transparent
    );
    --pmx-material-regular: var(--pmx-color-bg);
    --pmx-material-thick: var(--pmx-color-bg);
    --pmx-material-ultra-thick: var(--pmx-color-bg);
    --pmx-material-filter: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Quiet native scrollbars, including nested code and navigation panes. */
:where(*) {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--pmx-color-muted) 65%, transparent) transparent;
}

html {
  scroll-padding-block-start: var(--pmx-scroll-offset-block-start);
  scroll-padding-block-end: var(--pmx-sticky-block-end);
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--pmx-color-bg);
  color: var(--pmx-color-fg);
  font-family: var(--pmx-font-body);
  font-size: var(--pmx-prose-size);
  line-height: var(--pmx-prose-leading);
}

:where([data-pmx-sticky-header]) {
  position: sticky;
  z-index: 10;
  inset-block-start: 0;
}

.pmx-document {
  max-width: var(--pmx-document-measure);
  margin-inline: auto;
  padding-block: 1.5rem 3rem;
  padding-inline: max(1rem, var(--pmx-prose-gutter));
}

.pmx-document > * + * {
  margin-block-start: var(--pmx-prose-flow);
}

.pmx-document > [data-pmx-block]:not(:last-of-type) {
  padding-block-end: var(--pmx-prose-flow);
  border-block-end: 1px solid var(--pmx-color-border);
}

.pmx-error {
  margin-block: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pmx-color-danger);
  border-radius: var(--pmx-radius);
  background: color-mix(
    in oklch,
    var(--pmx-color-danger) 8%,
    var(--pmx-color-bg)
  );
  color: var(--pmx-color-fg);
}

.pmx-error strong {
  color: var(--pmx-color-danger);
}

.pmx-error button {
  display: block;
  margin-block-start: 0.75rem;
}

/* links */

.pmx-link:where(:not(.pmx-button)) {
  color: var(--pmx-color-link);
  text-decoration: none;
}

.pmx-link:where(:not(.pmx-button)):hover {
  text-decoration: underline;
}

.pmx-link-external:where(:not(.pmx-button)) {
  color: var(--pmx-color-link);
  text-decoration: none;
}

.pmx-link-external:where(:not(.pmx-button)):hover {
  text-decoration: underline;
}

.pmx-link-new-tab::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-inline-start: 0.2em;
  background: currentColor;
  vertical-align: 0.05em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='m10 14 11-11'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='m10 14 11-11'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

:where(
  .pmx-material-ultra-thin,
  .pmx-material-thin,
  .pmx-material-regular,
  .pmx-material-thick,
  .pmx-material-ultra-thick
) {
  backdrop-filter: var(--pmx-material-filter);
}

:where(.pmx-material-ultra-thin) {
  background: var(--pmx-material-ultra-thin);
}

:where(.pmx-material-thin) {
  background: var(--pmx-material-thin);
}

:where(.pmx-material-regular) {
  background: var(--pmx-material);
}

:where(.pmx-material-thick) {
  background: var(--pmx-material-thick);
}

:where(.pmx-material-ultra-thick) {
  background: var(--pmx-material-ultra-thick);
}


/* Shared opt-in native and React controls. Behavior belongs to the owner. */
/* Repeated control taps should activate controls, while pinch zoom stays available. */
:where(
  button,
  a[href],
  input,
  select,
  textarea,
  summary,
  .pmx-button,
  [role~="button"],
  [role~="link"],
  [role~="tab"],
  [role~="switch"],
  [role~="checkbox"],
  [role~="radio"],
  [role~="menuitem"],
  [role~="menuitemcheckbox"],
  [role~="menuitemradio"],
  [role~="option"],
  [role~="combobox"],
  [role~="spinbutton"],
  [role~="slider"],
  [role~="treeitem"]
) {
  touch-action: manipulation;
}

@media (any-pointer: coarse) {
  /* A readable input size also avoids Safari's focus zoom. */
  input:not(
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="hidden"],
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="image"],
    [type="color"]
  ),
  textarea,
  select {
    font-size: max(16px, 1rem);
  }
}

:root {
  --pmx-control-size: 2.5rem;
  --pmx-augmented-control-size: 3rem;
  --pmx-control-size-sm: 2.25rem;
  --pmx-control-radius: var(--pmx-radius-full);
  --pmx-control-icon-size: 1.2rem;
  --pmx-control-icon-stroke: 1.75;
  --pmx-island-background: color-mix(
    in oklch,
    var(--pmx-color-surface) 84%,
    transparent
  );
  --pmx-island-border: var(--pmx-color-border);
  --pmx-island-radius: 1.75rem;
  --pmx-island-shadow: var(--pmx-shadow-lg);
  --pmx-island-blur: 20px;
  --pmx-dialog-radius: var(--pmx-island-radius);
  --pmx-dialog-shadow: var(--pmx-shadow-xl);
  --pmx-dialog-backdrop: rgb(0 0 0 / 44%);
  --pmx-motion-duration: 160ms;
  --pmx-motion-ease: ease-out;
}

:where(.pmx-button) {
  --_pmx-button-bg: var(--pmx-color-accent);
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-block-size: var(--pmx-control-size);
  padding: 0.375rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--pmx-control-radius);
  color: var(--pmx-color-on-accent);
  background: var(--_pmx-button-bg);
  font: 600 0.875rem/1.25 var(--pmx-font-body);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: var(--pmx-motion-duration);
  transition-timing-function: var(--pmx-motion-ease);
}
:where(.pmx-button[data-variant="outline"]) {
  color: var(--pmx-color-fg);
  border-color: var(--pmx-color-border-strong);
  --_pmx-button-bg: transparent;
}
:where(.pmx-button[data-variant="floating"]) {
  color: var(--pmx-color-fg);
}
:where(.pmx-button[data-variant="floating"]) {
  --_pmx-button-bg: var(--pmx-island-background);
  border-color: var(--pmx-island-border);
  box-shadow: var(--pmx-island-shadow);
  -webkit-backdrop-filter: blur(var(--pmx-island-blur));
  backdrop-filter: blur(var(--pmx-island-blur));
}
:where(.pmx-button[data-variant="ghost"]) {
  color: var(--pmx-color-fg);
  --_pmx-button-bg: transparent;
}
:where(.pmx-button[data-variant="danger"]) {
  color: var(--pmx-color-on-danger);
  --_pmx-button-bg: var(--pmx-color-danger);
}
:where(.pmx-button:not(:disabled):not([aria-disabled="true"])):hover {
  background: color-mix(
    in oklch,
    var(--pmx-color-fg) 6%,
    var(--_pmx-button-bg)
  );
  text-decoration: none;
}
:where(
  .pmx-button:is(
      [data-variant="ghost"],
      [data-variant="outline"],
      [data-variant="floating"]
    ):not(:disabled):not([aria-disabled="true"])
):hover,
:where(.pmx-button[aria-pressed="true"], .pmx-button[data-pressed]) {
  color: var(--pmx-color-accent);
  background: color-mix(
    in oklch,
    var(--pmx-color-accent) 10%,
    var(--pmx-color-surface)
  );
}
:where(.pmx-button):focus-visible {
  outline: 2px solid var(--pmx-color-focus);
  outline-offset: 2px;
}
:where(.pmx-button):disabled,
:where(.pmx-button[aria-disabled="true"]) {
  opacity: 0.42;
  cursor: default;
}
:where(.pmx-button[data-size="sm"]) {
  min-block-size: var(--pmx-control-size-sm);
}
:where(.pmx-button[data-shape="icon"]) {
  inline-size: var(--pmx-control-size);
  block-size: var(--pmx-control-size);
  padding: 0;
}
:where(.pmx-button[data-shape="icon"][data-size="sm"]) {
  inline-size: var(--pmx-control-size-sm);
  block-size: var(--pmx-control-size-sm);
}
:where(.pmx-button) svg {
  inline-size: var(--pmx-control-icon-size);
  block-size: var(--pmx-control-icon-size);
  stroke-width: var(--pmx-control-icon-stroke);
  flex: none;
}
:where(.pmx-button[hidden]) {
  display: none;
}

:where(.pmx-island, .pmx-dialog) {
  color: var(--pmx-color-fg);
  border: 1px solid var(--pmx-island-border);
  border-radius: var(--pmx-island-radius);
  background: var(--pmx-island-background);
  box-shadow: var(--pmx-island-shadow);
  -webkit-backdrop-filter: blur(var(--pmx-island-blur));
  backdrop-filter: blur(var(--pmx-island-blur));
}
:where(.pmx-island) {
  box-sizing: border-box;
  padding: 0.75rem 1rem;
}
:where(.pmx-dialog) {
  box-sizing: border-box;
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.25rem;
  overflow-y: auto;
  border-radius: var(--pmx-dialog-radius);
  box-shadow: var(--pmx-dialog-shadow);
}
:where(.pmx-dialog)::backdrop,
:where(.pmx-dialog-backdrop) {
  background: var(--pmx-dialog-backdrop);
}

@media (pointer: coarse) {
  :where(.pmx-button) {
    min-block-size: max(44px, var(--pmx-control-size));
  }
  :where(.pmx-button[data-shape="icon"]) {
    min-inline-size: max(44px, var(--pmx-control-size));
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --pmx-motion-duration: 0ms;
  }
  :where(.pmx-button) {
    transition: none;
  }
}

/* Native fields are shared by Input and authored literate components. */
:where(.pmx-field) {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
  margin-block: 1rem;
  font: 500 1rem/1.5 var(--pmx-font-body);
}
:where(
  input:not(
    [type="checkbox"],
    [type="radio"],
    [type="range"],
    [type="hidden"],
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="image"],
    [type="color"],
    [type="file"]
  ),
  textarea,
  select
) {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: max(44px, 2.75rem);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--pmx-color-border-strong);
  border-radius: var(--pmx-radius-md, 0.5rem);
  background: var(--pmx-color-surface);
  color: var(--pmx-color-fg);
  font: 400 1rem/1.55 var(--pmx-font-body);
  transition:
    border-color 120ms ease-out,
    box-shadow 120ms ease-out;

  &:hover:not(:disabled, [readonly], [aria-invalid="true"], :user-invalid) {
    border-color: color-mix(
      in oklch,
      var(--pmx-color-fg) 72%,
      var(--pmx-color-bg)
    );
  }
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}
:where(textarea) {
  min-block-size: 8rem;
  resize: vertical;
}
:where(select:not([multiple])) {
  padding-inline-end: 2rem;
}
:where(input, textarea)::placeholder {
  color: var(--pmx-color-muted);
  opacity: 1;
}
:where(input, textarea, select):focus-visible {
  outline: 2px solid var(--pmx-color-focus);
  outline-offset: 3px;
}
:where(input, textarea, select):is([aria-invalid="true"], :user-invalid) {
  border-color: var(--pmx-color-danger);
}
:where(input, textarea)[readonly] {
  background: var(--pmx-color-bg);
}
:where(input[type="checkbox"], input[type="radio"]) {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  accent-color: var(--pmx-color-accent);
}
:where(input[type="range"]) {
  inline-size: 100%;
  min-block-size: 44px;
  margin: 0;
  accent-color: var(--pmx-color-accent);
}
:where(input[type="file"], input[type="color"]) {
  max-inline-size: 100%;
  min-block-size: 44px;
  color: var(--pmx-color-fg);
  font: inherit;
}
:where(input[type="file"])::file-selector-button {
  min-block-size: 44px;
  margin-inline-end: 0.75rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--pmx-color-border);
  border-radius: var(--pmx-radius-md, 0.5rem);
  background: var(--pmx-color-surface);
  color: var(--pmx-color-fg);
  font: inherit;
  cursor: pointer;
}
:where(.pmx-field small, .pmx-field .pmx-field-hint) {
  color: var(--pmx-color-muted);
  font-size: 0.875rem;
  font-weight: 400;
}
:where(.pmx-field .pmx-field-error) {
  color: var(--pmx-color-danger);
}
:where(.input-option) {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-block-size: 2.75rem;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  margin-block: 0.35rem;
  border: 1px solid var(--pmx-color-border);
  border-radius: var(--pmx-radius-md, 0.5rem);
  cursor: pointer;
  font: 400 1rem/1.5 var(--pmx-font-body);
}
:where(.input-option):has(:checked) {
  background: color-mix(
    in oklch,
    var(--pmx-color-accent) 8%,
    var(--pmx-color-surface)
  );
  border-color: var(--pmx-color-accent);
}
:where(.input-option input) {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0.2rem 0 0;
  flex: none;
  accent-color: var(--pmx-color-accent);
}
:where(.input-option):has(:focus-visible) {
  outline: 2px solid var(--pmx-color-focus);
  outline-offset: 3px;
}
:where(.input-option):has(:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}
:where(.input-submit) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1.25rem;
}
:where(.input-submit-status) {
  margin: 0;
  color: var(--pmx-color-muted);
  font-size: 0.875rem;
}
:where(.pmx-state-tools) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
:where(.pmx-state-tools > p, .pmx-state-tools > output) {
  flex-basis: 100%;
}
:where(.pmx-state-tools .pmx-field) {
  margin: 0;
}
:where(.pmx-completion-progress[aria-busy="true"] .pmx-progress-count) {
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  :where(input, textarea, select) {
    transition: none;
  }
}
:where(.pmx-fieldset) {
  border: 0;
  padding: 0;
  margin: 1rem 0;
  min-inline-size: 0;
}
:where(.pmx-fieldset > legend) {
  padding: 0;
  margin-block-end: 0.5rem;
  font-weight: 500;
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  :where(.pmx-island, .pmx-dialog, .pmx-button[data-variant="floating"]) {
    background: var(--pmx-color-surface);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :where(.pmx-island, .pmx-dialog, .pmx-button[data-variant="floating"]) {
    background: var(--pmx-color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* One primary action and an adjacent chooser, with independent focus targets. */
:where(.pmx-split-control) {
  display: inline-flex;
  align-items: stretch;
  max-inline-size: 100%;
  vertical-align: middle;
}
:where(.pmx-split-control > .pmx-button:first-child) {
  min-inline-size: 0;
  flex: 0 1 auto;
}
:where(
  .pmx-split-control:has(> button:not([hidden])) > .pmx-button:first-child
) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
:where(.pmx-split-control > button:not([hidden])) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: -1px;
  block-size: auto;
  flex: none;
}
:where(.pmx-split-control > .pmx-button:focus-visible) {
  position: relative;
  z-index: 1;
}

:where(.pmx-split-control > button[hidden]) {
  display: none;
}

/* Shared native-modal scroll ownership; plugin dialogs supply content layout. */
:root.pmx-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Source identity shared by opening headers and previews. */
.pmx-source-identity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.pmx-source-identity-title {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pmx-source-identity-type {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}
.pmx-source-identity-type[hidden] {
  display: none;
}
.pmx-source-identity-type svg {
  flex: none;
}
.pmx-source-identity-image {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 3px;
  object-fit: cover;
}

.pmx-load-feedback {
  position: fixed;
  z-index: 1000;
  inset-inline: 1rem;
  inset-block-end: 1rem;
  margin-inline: auto;
  inline-size: fit-content;
  max-inline-size: calc(100% - 2rem);
  padding: 0.75rem 1rem;
  border: 1px solid var(--pmx-color-border, ButtonBorder);
  border-radius: var(--pmx-radius-md, 0.5rem);
  background: var(--pmx-color-surface, Canvas);
  color: var(--pmx-color-fg, CanvasText);
  font: inherit;
}

[aria-busy="true"].pmx-button {
  cursor: progress;
}


/* Opt-in progress and task presentation; plugins own state and interaction. */
:root {
  --pmx-progress-meter-width: 100%;
  --pmx-progress-meter-height: 0.375rem;
  --pmx-task-status-size: 1.125rem;
  --pmx-task-row-gap: 0.625rem;
}
:where(.pmx-progress) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  inline-size: 100%;
  min-inline-size: 0;
  color: var(--pmx-color-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}
:where(.pmx-progress) > .pmx-progress-count {
  flex: none;
}
:where(.pmx-progress-count) {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--pmx-color-muted);
}
:where(.pmx-progress) progress {
  appearance: none;
  border: 0;
  inline-size: var(--pmx-progress-meter-width);
  min-inline-size: 0;
  flex-shrink: 1;
  max-inline-size: 100%;
  block-size: var(--pmx-progress-meter-height);
  border-radius: var(--pmx-radius-full);
  overflow: hidden;
  background: var(--pmx-color-border);
  color: var(--pmx-color-accent);
}
:where(.pmx-progress) progress::-webkit-progress-bar {
  background: var(--pmx-color-border);
}
:where(.pmx-progress) progress::-webkit-progress-value {
  background: var(--pmx-color-accent);
  border-radius: var(--pmx-radius-full);
}
:where(.pmx-progress) progress::-moz-progress-bar {
  background: var(--pmx-color-accent);
  border-radius: var(--pmx-radius-full);
}
:where(.pmx-task-row) {
  display: flex;
  align-items: flex-start;
  gap: var(--pmx-task-row-gap);
  min-block-size: 2.75rem;
  padding-block: 0.5rem;
  box-sizing: border-box;
  line-height: 1.5;
}
/* One silhouette for read-only status and native task checkboxes. */
:where(.pmx-task-status, .pmx-task-row input[type="checkbox"], .task-list-item-checkbox) {
  appearance: none;
  font: inherit;
  display: inline-grid;
  place-content: center;
  flex: none;
  box-sizing: border-box;
  inline-size: var(--pmx-task-status-size);
  block-size: var(--pmx-task-status-size);
  margin: calc((1.5em - var(--pmx-task-status-size)) / 2) 0 0;
  border: 1.5px solid color-mix(in oklch, var(--pmx-color-fg) 50%, var(--pmx-color-bg));
  border-radius: 0.3rem;
  background: transparent;
  color: var(--pmx-color-on-accent);
  vertical-align: middle;
}
:where(.pmx-task-status[data-state="complete"], .pmx-task-row input:checked, .task-list-item-checkbox:checked) {
  border-color: var(--pmx-color-accent);
  background: var(--pmx-color-accent);
}
:where(.pmx-task-status[data-state="complete"], .pmx-task-row input:checked, .task-list-item-checkbox:checked)::after {
  content: "";
  inline-size: 0.25rem;
  block-size: 0.5rem;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-0.0625rem) rotate(45deg);
}
:where(.pmx-task-row input[type="checkbox"]:not(:disabled)) {
  cursor: pointer;
}
:where(label.pmx-task-row) {
  cursor: pointer;
  touch-action: manipulation;
}
:where(.pmx-task-row) :is(input, a):focus-visible {
  outline: 2px solid var(--pmx-color-focus);
  outline-offset: 3px;
}
:where(.pmx-task-row input:disabled) {
  opacity: 0.5;
  cursor: default;
}
@media (forced-colors: active) {
  :where(.pmx-task-row input[type="checkbox"], .task-list-item-checkbox) {
    appearance: auto;
  }
  :where(.pmx-task-row input, .task-list-item-checkbox)::after {
    content: none;
  }
  :where(.pmx-task-status) {
    border-color: CanvasText;
    color: CanvasText;
  }
}


@scope (.pmx-prose) to ([data-pmx-prose="off"]) {
  :where(code:not(pre code)) {
    overflow-wrap: anywhere;
  }

  :where(:scope) {
    color: var(--pmx-color-fg);
    line-height: var(--pmx-prose-leading);

    /* Larger headings get proportionally more room above them. */
    > :where(h1, .pmx-heading.level-h1) {
      margin-block: calc(var(--pmx-prose-flow) * 2) calc(var(--pmx-prose-flow) * 0.75);
    }
    > :where(h2, .pmx-heading.level-h2) {
      margin-block: calc(var(--pmx-prose-flow) * 2.25) calc(var(--pmx-prose-flow) * 0.6);
    }
    > :where(h3, .pmx-heading.level-h3) {
      margin-block: calc(var(--pmx-prose-flow) * 1.75) calc(var(--pmx-prose-flow) * 0.5);
    }
    > :where(h4, h5, h6, .pmx-heading.level-h4, .pmx-heading.level-h5, .pmx-heading.level-h6) {
      margin-block: calc(var(--pmx-prose-flow) * 1.5) calc(var(--pmx-prose-flow) * 0.4);
    }

    > :where(h1, h2, h3, h4, h5, h6),
    > :where(.pmx-heading) > :where(h1, h2, h3, h4, h5, h6) {
      color: var(--pmx-color-fg);
      font-family: var(--pmx-font-heading);
      font-weight: 700;
      line-height: 1.25;
      text-wrap: balance;
      scroll-margin-block-start: 0;
    }

    /* Tighter leading and tracking as headings grow. */
    > :where(h1),
    > :where(.pmx-heading.level-h1) > h1 {
      line-height: 1.1;
      letter-spacing: -0.022em;
    }
    > :where(h2),
    > :where(.pmx-heading.level-h2) > h2 {
      line-height: 1.15;
      letter-spacing: -0.016em;
    }
    > :where(h3),
    > :where(.pmx-heading.level-h3) > h3 {
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    /* The paragraph after the title introduces the page. */
    > :where(.pmx-heading.level-h1 + p, h1 + p) {
      font-size: 1.125em;
      line-height: 1.5;
    }

    > :where(.pmx-heading) {
      position: relative;
    }

    > :where(.pmx-heading) > :where(h1, h2, h3, h4, h5, h6) {
      min-inline-size: 0;
      margin: 0;
      cursor: pointer;
      transition: color 120ms ease-out;
    }

    :where(h1, h2, h3, h4, h5, h6) > a[href] {
      &,
      &:hover {
        color: inherit;
        font-weight: inherit;
        text-decoration: none;
      }
    }

    > :where(h1),
    > :where(.pmx-heading.level-h1) > h1 {
      font-size: var(--pmx-prose-h1);
    }
    > :where(h2),
    > :where(.pmx-heading.level-h2) > h2 {
      font-size: var(--pmx-prose-h2);
    }
    > :where(h3),
    > :where(.pmx-heading.level-h3) > h3 {
      font-size: var(--pmx-prose-h3);
    }
    > :where(h4),
    > :where(.pmx-heading.level-h4) > h4 {
      font-size: calc(1em * var(--_pmx-prose-ratio));
    }
    > :where(h5, h6),
    > :where(.pmx-heading.level-h5) > h5,
    > :where(.pmx-heading.level-h6) > h6 {
      font-size: 1em;
    }

    .pmx-heading-anchor {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    :where(.pmx-heading:hover, .pmx-heading:focus-within)
      > :where(h1, h2, h3, h4, h5, h6) {
      color: var(--pmx-color-link);
    }

    .pmx-heading:has(> .pmx-heading-anchor:focus-visible)
      > :where(h1, h2, h3, h4, h5, h6) {
      outline: 2px solid var(--pmx-color-focus);
      outline-offset: 2px;
      border-radius: var(--pmx-radius-sm);
    }

    > :where(p, ul, ol, blockquote, pre, table, figure, hr, .pmx-code-block) {
      margin-block: var(--pmx-prose-flow);
    }

    :where(ul, ol) {
      padding-inline-start: 1.5em;
    }

    :where(ul) {
      list-style-type: disc;

      :where(ul) {
        list-style-type: circle;

        :where(ul) {
          list-style-type: square;
        }
      }
    }

    :where(ol) {
      list-style-type: decimal;
    }

    > :where(ul, ol) :where(ul, ol) {
      margin-block: 0.35em;
    }

    :where(li) {
      margin-block: 0.3em;

      &::marker {
        color: var(--pmx-color-muted);
      }
    }

    > :where(ul:has(> li.task-list-item), ol:has(> li.task-list-item)) {
      padding-inline-start: 0;
    }

    :where(li.task-list-item) {
      position: relative;
      margin-block: 0.4em;
      padding-inline-start: 1.6em;
      list-style: none;

      &::marker {
        content: "";
      }
    }

    :where(li.task-list-item > .task-list-item-checkbox:first-child) {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: calc((1lh - var(--pmx-task-status-size)) / 2);
      inline-size: var(--pmx-task-status-size);
      block-size: var(--pmx-task-status-size);
      margin: 0;
      accent-color: var(--pmx-color-accent);
      opacity: 1;
    }

    :where(li.task-list-item > p) {
      margin-block: 0.45em;
    }

    :where(li.task-list-item > p:first-of-type) {
      margin-block-start: 0;
    }

    :where(li.task-list-item > p:last-of-type) {
      margin-block-end: 0;
    }

    :where(blockquote) {
      margin-inline: 0;
      border: 0;
      color: var(--pmx-color-muted);
      padding-inline-start: 1em;
    }

    :where(table) {
      display: block;
      inline-size: 100%;
      max-inline-size: 100%;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      -webkit-overflow-scrolling: touch;
      border-collapse: collapse;
    }

    :where(th, td) {
      padding: 0.55em 0.7em;
      border-bottom: 1px solid var(--pmx-color-border);
      vertical-align: top;
    }

    :where(th) {
      font-weight: 650;
      text-align: start;
      white-space: nowrap;
    }

    :where(tr > :first-child) {
      position: sticky;
      inset-inline-start: 0;
      z-index: 1;
      background: var(--pmx-color-bg);
      border-inline-end: 1px solid var(--pmx-color-border);
    }

    :where(thead tr > :first-child) {
      z-index: 2;
    }

    @media (max-width: 40rem) {
      :where(tr > :first-child) {
        min-inline-size: 8rem;
      }

      :where(tr > :not(:first-child)) {
        min-inline-size: 12rem;
      }
    }

    > :where(hr) {
      border: 0;
      border-block-start: 1px solid var(--pmx-color-border);
    }

    :where(a:not(.pmx-button)) {
      color: var(--pmx-color-link);
      text-decoration-line: underline;
      text-decoration-color: color-mix(
        in srgb,
        var(--pmx-color-link) 45%,
        transparent
      );
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.16em;

      &:hover {
        text-decoration-color: currentColor;
      }
    }

    :where(mark) {
      background: color-mix(in oklch, var(--pmx-color-accent) 88%, transparent);
      color: inherit;
    }

    :where(figcaption) {
      color: var(--pmx-color-muted);
      font-size: 0.92em;
    }

    :where(img) {
      max-inline-size: 100%;
      height: auto;
      border-radius: var(--pmx-radius);
    }

    :where(code) {
      font-family: var(--pmx-font-mono);
      font-size: 0.92em;
      background: var(--pmx-code-bg);
      color: var(--pmx-code-fg);
      border: 1px solid var(--pmx-color-border);
      border-radius: calc(var(--pmx-radius) * 0.65);
      padding: 0.08em 0.3em;
    }

    :where(pre, .pmx-code-block) :where(code) {
      font-size: 0.9em;
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
    }
  }

  /* Last, so no element rule above adds space outside a Block. */
  :where(:scope) > :where(:first-child) {
    margin-block-start: 0;
  }

  :where(:scope) > :where(:last-child) {
    margin-block-end: 0;
  }
}


:root {
  --pmx-view-transition-duration: 220ms;
  --pmx-view-transition-easing: ease;
  --pmx-view-transition-distance: 1.25rem;
}

@keyframes pmx-view-out-forward {
  to {
    opacity: 0;
    transform: translateX(calc(-1 * var(--pmx-view-transition-distance)));
  }
}

@keyframes pmx-view-in-forward {
  from {
    opacity: 0;
    transform: translateX(var(--pmx-view-transition-distance));
  }
}

@keyframes pmx-view-out-back {
  to {
    opacity: 0;
    transform: translateX(var(--pmx-view-transition-distance));
  }
}

@keyframes pmx-view-in-back {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--pmx-view-transition-distance)));
  }
}

html:active-view-transition-type(pmx-forward) ::view-transition-old(root),
html:active-view-transition-type(pmx-forward) ::view-transition-new(root),
html:active-view-transition-type(pmx-back) ::view-transition-old(root),
html:active-view-transition-type(pmx-back) ::view-transition-new(root) {
  mix-blend-mode: normal;
}

html:active-view-transition-type(pmx-forward) ::view-transition-old(root) {
  animation: var(--pmx-view-transition-duration)
    var(--pmx-view-transition-easing) both pmx-view-out-forward;
}

html:active-view-transition-type(pmx-forward) ::view-transition-new(root) {
  animation: var(--pmx-view-transition-duration)
    var(--pmx-view-transition-easing) both pmx-view-in-forward;
}

html:active-view-transition-type(pmx-back) ::view-transition-old(root) {
  animation: var(--pmx-view-transition-duration)
    var(--pmx-view-transition-easing) both pmx-view-out-back;
}

html:active-view-transition-type(pmx-back) ::view-transition-new(root) {
  animation: var(--pmx-view-transition-duration)
    var(--pmx-view-transition-easing) both pmx-view-in-back;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
}