/*! MorphCSS Community 0.1.0-alpha.1 | Copyright (c) 2026 Jacek Kukulski | MorphCSS Community License 1.0 */
@layer morph.reset, morph.tokens, morph.base, morph.layout, morph.components, morph.context, morph.states, morph.motion, morph.utilities, app;

@layer morph.reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
  body { margin: 0; min-block-size: 100dvh; }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
  img, picture, video { block-size: auto; }
  button, input, optgroup, textarea, select { font: inherit; color: inherit; }
  textarea { resize: vertical; }
  audio, iframe, embed, object { max-inline-size: 100%; }
  button, [role="button"] { touch-action: manipulation; }
  :target { scroll-margin-block: 5rem; }
}

@layer morph.tokens {
  :root {
    --m-p-white: oklch(100% 0 0);
    --m-p-black: oklch(0% 0 0);
    --m-p-gray-0: oklch(99% .004 250);
    --m-p-gray-1: oklch(96% .006 250);
    --m-p-gray-2: oklch(90% .010 250);
    --m-p-gray-4: oklch(70% .016 250);
    --m-p-gray-6: oklch(48% .020 250);
    --m-p-gray-8: oklch(26% .018 250);
    --m-p-gray-9: oklch(18% .016 250);
    --m-p-brand: oklch(62% .18 245);
    --m-p-danger: oklch(60% .20 28);
    --m-p-success: oklch(61% .15 150);

    --m-p-space-0: 0;
    --m-p-space-1: .25rem;
    --m-p-space-2: .5rem;
    --m-p-space-3: .75rem;
    --m-p-space-4: 1rem;
    --m-p-space-5: 1.5rem;
    --m-p-space-6: 2rem;
    --m-p-space-7: 3rem;
    --m-p-space-8: 4rem;

    --m-p-radius-1: .35rem;
    --m-p-radius-2: .65rem;
    --m-p-radius-3: 1rem;
    --m-p-radius-pill: 999px;

    --m-p-shadow-1: 0 1px 2px oklch(0% 0 0 / .08), 0 8px 24px oklch(0% 0 0 / .06);
    --m-p-shadow-2: 0 2px 8px oklch(0% 0 0 / .10), 0 18px 48px oklch(0% 0 0 / .10);
  }
}

@layer morph.tokens {
  /*
   * Theme tokens are explicit and selector-driven.
   * `data-m-theme` is the resolved physical palette (light|dark).
   * `data-m-theme-preference` keeps the user's logical preference (auto|light|dark).
   */
  :root,
  :root[data-m-theme="light"] {
    --m-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --m-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --m-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --m-text-xs: clamp(.75rem, .73rem + .08cqi, .8rem);
    --m-text-sm: clamp(.875rem, .84rem + .12cqi, .95rem);
    --m-text-md: clamp(1rem, .96rem + .15cqi, 1.08rem);
    --m-text-lg: clamp(1.125rem, 1.04rem + .35cqi, 1.3rem);
    --m-text-xl: clamp(1.35rem, 1.16rem + .70cqi, 1.7rem);
    --m-text-2xl: clamp(1.7rem, 1.35rem + 1.25cqi, 2.35rem);
    --m-text-3xl: clamp(2.2rem, 1.55rem + 2.4cqi, 3.6rem);

    --m-weight-regular: 400;
    --m-weight-medium: 500;
    --m-weight-semibold: 600;
    --m-weight-bold: 700;
    --m-leading-tight: 1.1;
    --m-leading-snug: 1.3;
    --m-leading-body: 1.55;
    --m-leading-loose: 1.75;
    --m-line-body: var(--m-leading-body);
    --m-line-tight: var(--m-leading-tight);
    --m-tracking-tight: -.02em;
    --m-tracking-normal: 0;
    --m-tracking-wide: .04em;
    --m-measure: 68ch;
    --m-measure-narrow: 52ch;
    --m-underline-offset: .16em;
    --m-decoration-thickness: .08em;

    --m-surface: var(--m-p-gray-0);
    --m-surface-raised: var(--m-p-white);
    --m-surface-muted: var(--m-p-gray-1);
    --m-surface-sunken: color-mix(in oklch, var(--m-p-gray-1), var(--m-p-gray-2) 32%);
    --m-content: var(--m-p-gray-9);
    --m-content-muted: var(--m-p-gray-6);
    --m-border: var(--m-p-gray-2);
    --m-border-strong: color-mix(in oklch, var(--m-p-gray-6), var(--m-p-gray-2) 45%);
    --m-action: oklch(52% .18 245);
    --m-action-hover: oklch(47% .18 245);
    --m-action-content: var(--m-p-white);
    --m-link: color-mix(in oklch, var(--m-action), var(--m-content) 12%);
    --m-danger: oklch(50% .19 28);
    --m-success: var(--m-p-success);
    --m-warning: oklch(60% .14 75);
    --m-focus: color-mix(in oklch, var(--m-action), var(--m-p-white) 10%);
    --m-backdrop: oklch(0% 0 0 / .42);
    --m-theme-canvas-accent: color-mix(in oklch, var(--m-action), transparent 92%);

    --m-space-0: 0;
    --m-space-1: clamp(.25rem, .20rem + .15cqi, .38rem);
    --m-space-2: clamp(.5rem, .42rem + .25cqi, .68rem);
    --m-space-3: clamp(.75rem, .60rem + .45cqi, 1rem);
    --m-space-4: clamp(1rem, .82rem + .65cqi, 1.4rem);
    --m-space-5: clamp(1.4rem, 1.05rem + 1.1cqi, 2rem);
    --m-space-6: clamp(2rem, 1.5rem + 1.8cqi, 3rem);
    --m-space-7: clamp(3rem, 2.1rem + 3cqi, 4.5rem);
    --m-space-8: clamp(4rem, 2.8rem + 4cqi, 6rem);
    --m-space: var(--m-space-3);

    --m-radius-sm: var(--m-p-radius-1);
    --m-radius: var(--m-p-radius-2);
    --m-radius-lg: var(--m-p-radius-3);
    --m-radius-pill: var(--m-p-radius-pill);
    --m-shadow-raised: var(--m-p-shadow-1);
    --m-shadow-overlay: var(--m-p-shadow-2);
    --m-border-width: 1px;
    --m-border-style: solid;
    --m-opacity-muted: .68;
    --m-control-min: 2.75rem;
    --m-focus-width: 2px;
    --m-focus-offset: 2px;

    --m-motion-fast: 120ms;
    --m-motion-normal: 220ms;
    --m-motion-slow: 360ms;
    --m-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --m-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --m-ease-exit: cubic-bezier(.4, 0, 1, 1);
  }

  :root[data-m-theme="dark"] {
    --m-surface: oklch(16% .014 250);
    --m-surface-raised: oklch(21% .016 250);
    --m-surface-muted: oklch(26% .018 250);
    --m-surface-sunken: oklch(13% .012 250);
    --m-content: oklch(96% .006 250);
    --m-content-muted: oklch(74% .018 250);
    --m-border: oklch(36% .018 250);
    --m-border-strong: oklch(52% .020 250);
    --m-action: oklch(70% .17 245);
    --m-action-hover: oklch(75% .16 245);
    --m-action-content: oklch(15% .018 250);
    --m-link: oklch(78% .12 245);
    --m-danger: oklch(70% .17 28);
    --m-success: oklch(72% .14 150);
    --m-warning: oklch(78% .14 85);
    --m-focus: oklch(82% .13 245);
    --m-backdrop: oklch(0% 0 0 / .66);
    --m-theme-canvas-accent: color-mix(in oklch, var(--m-action), transparent 93%);
    --m-shadow-raised: 0 1px 2px oklch(0% 0 0 / .34), 0 12px 30px oklch(0% 0 0 / .24);
  }

  /* CSS-only fallback if the early boot script is omitted. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-m-theme]) {
      --m-surface: oklch(16% .014 250);
      --m-surface-raised: oklch(21% .016 250);
      --m-surface-muted: oklch(26% .018 250);
      --m-surface-sunken: oklch(13% .012 250);
      --m-content: oklch(96% .006 250);
      --m-content-muted: oklch(74% .018 250);
      --m-border: oklch(36% .018 250);
      --m-border-strong: oklch(52% .020 250);
      --m-action: oklch(70% .17 245);
      --m-action-hover: oklch(75% .16 245);
      --m-action-content: oklch(15% .018 250);
      --m-link: oklch(78% .12 245);
      --m-danger: oklch(70% .17 28);
      --m-success: oklch(72% .14 150);
      --m-warning: oklch(78% .14 85);
      --m-focus: oklch(82% .13 245);
      --m-backdrop: oklch(0% 0 0 / .66);
      --m-theme-canvas-accent: color-mix(in oklch, var(--m-action), transparent 93%);
      --m-shadow-raised: 0 1px 2px oklch(0% 0 0 / .34), 0 12px 30px oklch(0% 0 0 / .24);
    }
  }
}

/* MorphCSS Community theme layer | Copyright (c) 2026 Jacek Kukulski
 * License: MorphCSS Community License 1.0 for distributed CSS.
 * Version: 0.1.0-alpha.1; CSS-only selectors, independent of Full navigation/theme widgets.
 */
@layer morph.tokens {
  /* Community default: no remote font request and no installed Inter preference.
   * Applications may opt in to self-hosted Inter via their app-layer token override. */
  :root,
  :root[data-m-theme="light"] {
    --m-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  :root,
  :root[data-m-theme-preference="auto"] {
    --m-theme-preference: auto;
  }

  :root[data-m-theme-preference="light"] { --m-theme-preference: light; }
  :root[data-m-theme-preference="dark"] { --m-theme-preference: dark; }

  :root[data-m-theme="light"] {
    color-scheme: light;
    --m-theme-resolved: light;
  }

  :root[data-m-theme="dark"] {
    color-scheme: dark;
    --m-theme-resolved: dark;
  }
}

@layer morph.motion {
  :root[data-m-theme-transition="ready"] :where(body, .m-card__frame) {
    transition-property: background-color, color, border-color, box-shadow, fill, stroke;
    transition-duration: var(--m-motion-normal);
    transition-timing-function: var(--m-ease-standard);
  }

  @media (prefers-reduced-motion: reduce) {
    :root[data-m-theme-transition="ready"] :where(body, .m-card__frame) {
      transition-duration: 0s;
    }
  }
}

@layer morph.base {
  :root {
    color-scheme: light dark;
    font-family: var(--m-font-sans);
    line-height: var(--m-line-body);
    color: var(--m-content);
    background: var(--m-surface);
    text-rendering: optimizeLegibility;
  }

  body { background: var(--m-surface); color: var(--m-content); }
  a { color: var(--m-link); text-underline-offset: var(--m-underline-offset); }
  :where(p, li) { overflow-wrap: break-word; }
  :focus-visible { outline: var(--m-focus-width) solid var(--m-focus); outline-offset: var(--m-focus-offset); }
  [hidden] { display: none !important; }
}

/* MorphCSS Community accessibility layer | Copyright (c) 2026 Jacek Kukulski
 * License: proprietary private source; distributed under MorphCSS Community License 1.0.
 * Version: 0.1.0-alpha.1; supported CSS-only components only.
 */
@layer morph.base {
  :where(button, [href], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--m-focus-width) solid var(--m-focus);
    outline-offset: var(--m-focus-offset);
  }

  @media (forced-colors: active) {
    :root {
      --m-focus: Highlight;
      --m-border: CanvasText;
      --m-action: ButtonFace;
      --m-action-content: ButtonText;
    }

    .m-button,
    .m-card__frame {
      forced-color-adjust: auto;
      border-color: CanvasText;
    }

    :focus-visible { outline-color: Highlight; }
  }
}

@layer morph.base {
  .m-type-display,
  .m-type-heading,
  .m-type-title,
  .m-type-body,
  .m-type-label,
  .m-type-caption,
  .m-type-code { margin-block: 0; }

  .m-type-display {
    font-family: var(--m-font-sans);
    font-size: var(--m-text-3xl);
    line-height: var(--m-leading-tight);
    font-weight: var(--m-weight-bold);
    letter-spacing: var(--m-tracking-tight);
    text-wrap: balance;
  }

  .m-type-heading {
    font-family: var(--m-font-sans);
    font-size: var(--m-text-2xl);
    line-height: var(--m-leading-tight);
    font-weight: var(--m-weight-bold);
    letter-spacing: var(--m-tracking-tight);
    text-wrap: balance;
  }

  .m-type-title {
    font-family: var(--m-font-sans);
    font-size: var(--m-text-lg);
    line-height: var(--m-leading-snug);
    font-weight: var(--m-weight-semibold);
    text-wrap: balance;
  }

  .m-type-body {
    font-family: var(--m-font-sans);
    font-size: var(--m-text-md);
    line-height: var(--m-leading-body);
    font-weight: var(--m-weight-regular);
    text-wrap: pretty;
  }

  .m-type-label {
    font-family: var(--m-font-sans);
    font-size: var(--m-text-sm);
    line-height: var(--m-leading-snug);
    font-weight: var(--m-weight-semibold);
  }

  .m-type-caption {
    font-family: var(--m-font-sans);
    font-size: var(--m-text-xs);
    line-height: var(--m-leading-body);
    color: var(--m-content-muted);
  }

  .m-type-code {
    font-family: var(--m-font-mono);
    font-size: .9375em;
    font-variant-numeric: tabular-nums;
  }
}

@layer morph.utilities {
  .m-font-sans { font-family: var(--m-font-sans); }
  .m-font-serif { font-family: var(--m-font-serif); }
  .m-font-mono { font-family: var(--m-font-mono); }
  .m-italic { font-style: italic; }
  .m-not-italic { font-style: normal; }
  .m-weight-regular { font-weight: var(--m-weight-regular); }
  .m-weight-medium { font-weight: var(--m-weight-medium); }
  .m-weight-semibold { font-weight: var(--m-weight-semibold); }
  .m-weight-bold { font-weight: var(--m-weight-bold); }
  .m-text-start { text-align: start; }
  .m-text-center { text-align: center; }
  .m-text-end { text-align: end; }
  .m-text-justify { text-align: justify; }
  .m-uppercase { text-transform: uppercase; }
  .m-lowercase { text-transform: lowercase; }
  .m-capitalize { text-transform: capitalize; }
  .m-no-transform { text-transform: none; }
  .m-underline { text-decoration-line: underline; text-underline-offset: var(--m-underline-offset); text-decoration-thickness: var(--m-decoration-thickness); }
  .m-line-through { text-decoration-line: line-through; }
  .m-no-decoration { text-decoration: none; }
  .m-wrap { white-space: normal; }
  .m-nowrap { white-space: nowrap; }
  .m-balance { text-wrap: balance; }
  .m-pretty { text-wrap: pretty; }
  .m-break-words { overflow-wrap: anywhere; }
  .m-break-all { word-break: break-all; }
  .m-hyphens-auto { hyphens: auto; }
  .m-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-clamp-1, .m-clamp-2, .m-clamp-3, .m-clamp-4 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
  .m-clamp-1 { -webkit-line-clamp: 1; }
  .m-clamp-2 { -webkit-line-clamp: 2; }
  .m-clamp-3 { -webkit-line-clamp: 3; }
  .m-clamp-4 { -webkit-line-clamp: 4; }
  .m-num-tabular { font-variant-numeric: tabular-nums; }
  .m-num-proportional { font-variant-numeric: proportional-nums; }
  .m-num-lining { font-variant-numeric: lining-nums; }
  .m-num-oldstyle { font-variant-numeric: oldstyle-nums; }
  .m-num-slashed-zero { font-variant-numeric: slashed-zero; }
  .m-list-disc { list-style-type: disc; }
  .m-list-decimal { list-style-type: decimal; }
  .m-list-none { list-style-type: none; }
  .m-list-inside { list-style-position: inside; }
  .m-list-outside { list-style-position: outside; }
}

@layer morph.utilities {
  /* Intentional spacing primitives: values come from tokens/custom properties, not class-name arithmetic. */
  .m-pad { padding: var(--m-pad, var(--m-space-3)); }
  .m-pad-block { padding-block: var(--m-pad-block, var(--m-pad, var(--m-space-3))); }
  .m-pad-inline { padding-inline: var(--m-pad-inline, var(--m-pad, var(--m-space-3))); }
  .m-margin { margin: var(--m-margin, 0); }
  .m-margin-block { margin-block: var(--m-margin-block, var(--m-margin, 0)); }
  .m-margin-inline { margin-inline: var(--m-margin-inline, var(--m-margin, 0)); }
  .m-margin-inline-auto { margin-inline: auto; }
}

@layer morph.utilities {
  .m-surface { background: var(--m-surface); color: var(--m-content); }
  .m-surface-raised { background: var(--m-surface-raised); color: var(--m-content); }
  .m-surface-muted { background: var(--m-surface-muted); color: var(--m-content); }
  .m-surface-sunken { background: var(--m-surface-sunken); color: var(--m-content); }
  .m-border { border: var(--m-border-width) var(--m-border-style) var(--m-border); }
  .m-border-strong { border-color: var(--m-border-strong); }
  .m-rounded { border-radius: var(--m-radius); }
  .m-rounded-sm { border-radius: var(--m-radius-sm); }
  .m-rounded-lg { border-radius: var(--m-radius-lg); }
  .m-rounded-pill { border-radius: var(--m-radius-pill); }
  .m-shadow { box-shadow: var(--m-shadow-raised); }
  .m-opacity-muted { opacity: var(--m-opacity-muted); }
}

@layer morph.utilities {
  /* Low-level visual escape hatches. Semantic surface/radius/shadow utilities are preferred. */
  .m-background {
    background-color: var(--m-background-color, transparent);
    background-image: var(--m-background-image, none);
    background-position: var(--m-background-position, center);
    background-repeat: var(--m-background-repeat, no-repeat);
    background-size: var(--m-background-size, cover);
    background-clip: var(--m-background-clip, border-box);
  }

  .m-outline {
    outline-width: var(--m-outline-width, var(--m-focus-width));
    outline-style: var(--m-outline-style, solid);
    outline-color: var(--m-outline-color, currentColor);
    outline-offset: var(--m-outline-offset, var(--m-focus-offset));
  }

  .m-effect {
    opacity: var(--m-effect-opacity, 1);
    box-shadow: var(--m-effect-shadow, none);
  }

  .m-transform {
    transform: var(--m-transform, none);
    transform-origin: var(--m-transform-origin, center);
  }
}

@layer morph.utilities {
  .m-select-none { user-select: none; }
  .m-select-text { user-select: text; }
  .m-pointer-none { pointer-events: none; }
  .m-resize-block { resize: vertical; }
  .m-resize-none { resize: none; }
  .m-scroll-stable { scrollbar-gutter: stable; }
  .m-scroll-smooth { scroll-behavior: smooth; }
  .m-touch-manipulation { touch-action: manipulation; }
  .m-scroll-mt { scroll-margin-block-start: var(--m-scroll-margin, var(--m-space-4)); }
  .m-scroll-pt { scroll-padding-block-start: var(--m-scroll-padding, var(--m-space-4)); }

  @media (prefers-reduced-motion: reduce) {
    .m-scroll-smooth { scroll-behavior: auto; }
  }

  @supports (resize: block) {
    .m-resize-block { resize: block; }
  }

  @supports (field-sizing: content) {
    .m-field-sizing-content { field-sizing: content; }
  }
}

@layer morph.layout {
  .m-stack { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--m-stack-gap, var(--m-space)); }
  .m-stack > * { margin-block: 0; }
}

@layer morph.layout {
  /* Low-level escape hatch. Prefer m-stack/m-cluster/m-switcher for common intent. */
  .m-flex {
    display: flex;
    flex-direction: var(--m-flex-direction, row);
    flex-wrap: var(--m-flex-wrap, nowrap);
    gap: var(--m-flex-gap, var(--m-space-3));
    justify-content: var(--m-flex-justify, flex-start);
    align-items: var(--m-flex-align, stretch);
  }
  .m-flex > * {
    flex-basis: var(--m-flex-item-basis, auto);
    flex-grow: var(--m-flex-item-grow, 0);
    flex-shrink: var(--m-flex-item-shrink, 1);
    order: var(--m-flex-item-order, 0);
    min-inline-size: 0;
  }
}

@layer morph.layout {
  .m-cluster {
    display: flex;
    flex-wrap: var(--m-cluster-wrap, wrap);
    align-items: var(--m-cluster-align, center);
    justify-content: var(--m-cluster-justify, flex-start);
    gap: var(--m-cluster-gap, var(--m-space));
  }
}

@layer morph.layout {
  .m-grid {
    display: grid;
    grid-template-columns: var(--m-grid-columns, repeat(auto-fit, minmax(min(100%, var(--m-grid-min, 16rem)), 1fr)));
    grid-template-rows: var(--m-grid-rows, none);
    grid-auto-flow: var(--m-grid-flow, row);
    grid-auto-columns: var(--m-grid-auto-columns, auto);
    grid-auto-rows: var(--m-grid-auto-rows, auto);
    gap: var(--m-grid-gap, var(--m-space-4));
    justify-content: var(--m-grid-justify, normal);
    justify-items: var(--m-grid-justify-items, stretch);
    align-content: var(--m-grid-align-content, normal);
    align-items: var(--m-grid-align-items, stretch);
  }

  .m-grid-item {
    grid-column: var(--m-grid-column, auto);
    grid-row: var(--m-grid-row, auto);
    justify-self: var(--m-grid-justify-self, auto);
    align-self: var(--m-grid-align-self, auto);
    place-self: var(--m-grid-place-self, auto);
  }
}

@layer morph.layout {
  .m-center { inline-size: min(100% - 2 * var(--m-center-gutter, var(--m-space-4)), var(--m-center-max, 72rem)); margin-inline: auto; }
}

@layer morph.components {
  .m-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-block-size: 2.75rem;
    padding: .58em .95em;
    border: 1px solid transparent;
    border-radius: var(--m-radius);
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--m-motion-fast) var(--m-ease-standard), border-color var(--m-motion-fast) var(--m-ease-standard), transform var(--m-motion-fast) var(--m-ease-standard);
  }
  .m-button[data-m-intent="primary"] { background: var(--m-action); color: var(--m-action-content); }
  @media (hover: hover) and (pointer: fine) {
    .m-button[data-m-intent="primary"]:hover { background: var(--m-action-hover); }
    .m-button[data-m-intent="neutral"]:hover { background: var(--m-surface-muted); }
  }
  .m-button[data-m-intent="neutral"] { background: var(--m-surface-raised); color: var(--m-content); border-color: var(--m-border); }
  .m-button:active { transform: translateY(1px); }
  .m-button:disabled, .m-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
  @media (prefers-reduced-motion: reduce) { .m-button { transition: none; } }
}

@layer morph.components {
  .m-link {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    color: var(--m-link);
    font-weight: 600;
    text-underline-offset: .18em;
    text-decoration-thickness: .08em;
  }
  .m-link[data-m-intent="quiet"] { color: var(--m-content-muted); }
  .m-link[data-m-intent="plain"] { color: inherit; text-decoration: none; }
  @media (hover: hover) and (pointer: fine) {
    .m-link:hover { text-decoration-thickness: .12em; }
    .m-link[data-m-intent="plain"]:hover { color: var(--m-link); text-decoration: underline; }
  }
}

@layer morph.components {
  .m-badge {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    max-inline-size: 100%;
    min-block-size: 1.6rem;
    padding: .2em .55em;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-pill);
    background: var(--m-surface-muted);
    color: var(--m-content);
    font-size: .82em;
    font-weight: 700;
    line-height: 1.15;
  }
  .m-badge[data-m-intent="success"] { border-color: color-mix(in oklch, var(--m-success), var(--m-border) 45%); background: color-mix(in oklch, var(--m-success), transparent 88%); }
  .m-badge[data-m-intent="danger"] { border-color: color-mix(in oklch, var(--m-danger), var(--m-border) 45%); background: color-mix(in oklch, var(--m-danger), transparent 90%); }
  .m-badge[data-m-intent="primary"] { border-color: color-mix(in oklch, var(--m-action), var(--m-border) 45%); background: color-mix(in oklch, var(--m-action), transparent 90%); }
}

@layer morph.components {
  /*
   * Card has two independent adaptive axes:
   * 1) representation = how much content the card can afford;
   * 2) layout = how that content is geometrically arranged.
   *
   * The boundary owns local size. Runtime resolves semantic state, CSS owns
   * presentation. Without runtime the safe fallback is a complete stacked card.
   */
  .m-card {
    container: m-card / inline-size;
    min-inline-size: 0;
    color: var(--m-content);
  }

  .m-card__frame {
    --m-card-padding: var(--m-space-4);
    --m-card-gap: var(--m-space-3);
    --m-card-media-col: .95fr;
    --m-card-content-col: 1.35fr;
    --m-card-thumb: clamp(5.5rem, 18cqi, 7.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "body" "actions";
    gap: var(--m-card-gap);
    padding: var(--m-card-padding);
    background: var(--m-surface-raised);
    border: 1px solid var(--m-border);
    border-radius: var(--m-card-radius, var(--m-radius));
    min-inline-size: 0;
  }

  .m-card__media {
    grid-area: media;
    min-inline-size: 0;
    overflow: clip;
    border-radius: calc(var(--m-card-radius, var(--m-radius)) * .75);
    aspect-ratio: 16 / 9;
  }

  .m-card__media > :is(img, picture, video) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .m-card__body { grid-area: body; min-inline-size: 0; }
  .m-card__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-space-2);
    align-items: center;
  }

  .m-card__title {
    margin: 0;
    font-size: clamp(1.05rem, .95rem + 1cqi, 1.65rem);
    line-height: var(--m-line-tight);
    overflow-wrap: anywhere;
  }

  .m-card__meta { color: var(--m-content-muted); font-size: .9em; }
}

@layer morph.states {
  /* Representation controls information density only. */
  .m-card[data-m-resolved-representation="minimal"] .m-card__frame {
    --m-card-padding: var(--m-space-2);
    --m-card-gap: var(--m-space-1);
  }

  .m-card[data-m-resolved-representation="minimal"] :is(.m-card__media, .m-card__summary, .m-card__actions > [data-m-priority="low"]) {
    display: none;
  }

  .m-card[data-m-resolved-representation="compact"] .m-card__frame {
    --m-card-padding: var(--m-space-3);
    --m-card-gap: var(--m-space-2);
  }

  .m-card[data-m-resolved-representation="compact"] :is(.m-card__summary, .m-card__actions > [data-m-priority="low"]) {
    display: none;
  }

  .m-card[data-m-resolved-representation="compact"] .m-card__title {
    font-size: clamp(1rem, .92rem + .7cqi, 1.25rem);
  }

  .m-card[data-m-resolved-representation="regular"] .m-card__frame {
    --m-card-padding: var(--m-space-4);
    --m-card-gap: var(--m-space-3);
  }

  .m-card[data-m-resolved-representation="expanded"] .m-card__frame {
    --m-card-padding: var(--m-space-4);
    --m-card-gap: var(--m-space-3);
    --m-card-media-col: .95fr;
    --m-card-content-col: 1.35fr;
  }

  .m-card[data-m-resolved-representation="immersive"] .m-card__frame {
    --m-card-padding: var(--m-space-5);
    --m-card-gap: var(--m-space-4);
    --m-card-media-col: 1.05fr;
    --m-card-content-col: 1.4fr;
  }

  /* Layout controls geometry only. */
  .m-card[data-m-resolved-layout="stacked"] .m-card__frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "body" "actions";
    align-items: stretch;
  }

  .m-card[data-m-resolved-layout="stacked"] .m-card__media {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
  }

  .m-card[data-m-resolved-layout="inline"] .m-card__frame {
    grid-template-columns: minmax(0, var(--m-card-thumb)) minmax(0, 1fr);
    grid-template-areas: "media body" "media actions";
    align-items: start;
  }

  .m-card[data-m-resolved-layout="inline"] .m-card__media {
    inline-size: 100%;
    aspect-ratio: 1;
    align-self: start;
  }

  .m-card[data-m-resolved-layout="split"] .m-card__frame {
    grid-template-columns: minmax(12rem, var(--m-card-media-col)) minmax(0, var(--m-card-content-col));
    grid-template-areas: "media body" "media actions";
    align-items: start;
  }

  .m-card[data-m-resolved-layout="split"] .m-card__media {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 10rem;
    aspect-ratio: auto;
    align-self: stretch;
  }
}

@layer morph.states {
  /*
   * First-paint adaptive fallback. Auto cards get the same space-only geometry
   * from native container queries before runtime materializes semantic state.
   * This keeps the initial layout useful and prevents JS from being required
   * for the first responsive paint.
   */
  @container m-card (max-width: 287.99px) {
    .m-card[data-m-adaptive][data-m-representation="auto"]:not([data-m-runtime="ready"]) .m-card__frame {
      --m-card-padding: var(--m-space-2);
      --m-card-gap: var(--m-space-1);
    }
    .m-card[data-m-adaptive][data-m-representation="auto"]:not([data-m-runtime="ready"]) :is(.m-card__media, .m-card__summary, .m-card__actions > [data-m-priority="low"]) { display: none; }
  }

  @container m-card (min-width: 288px) and (max-width: 447.99px) {
    .m-card[data-m-adaptive][data-m-representation="auto"]:not([data-m-runtime="ready"]) .m-card__frame {
      --m-card-padding: var(--m-space-3);
      --m-card-gap: var(--m-space-2);
    }
    .m-card[data-m-adaptive][data-m-representation="auto"]:not([data-m-runtime="ready"]) :is(.m-card__summary, .m-card__actions > [data-m-priority="low"]) { display: none; }
    .m-card[data-m-adaptive][data-m-representation="auto"]:not([data-m-runtime="ready"]) .m-card__title { font-size: clamp(1rem, .92rem + .7cqi, 1.25rem); }
  }

  @container m-card (min-width: 560px) and (max-width: 703.99px) {
    .m-card[data-m-adaptive][data-m-layout="auto"]:not([data-m-runtime="ready"]) .m-card__frame {
      grid-template-columns: minmax(0, var(--m-card-thumb)) minmax(0, 1fr);
      grid-template-areas: "media body" "media actions";
      align-items: start;
    }
    .m-card[data-m-adaptive][data-m-layout="auto"]:not([data-m-runtime="ready"]) .m-card__media {
      inline-size: 100%;
      aspect-ratio: 1;
      align-self: start;
    }
  }

  @container m-card (min-width: 704px) {
    .m-card[data-m-adaptive][data-m-layout="auto"]:not([data-m-runtime="ready"]) .m-card__frame {
      grid-template-columns: minmax(12rem, var(--m-card-media-col)) minmax(0, var(--m-card-content-col));
      grid-template-areas: "media body" "media actions";
      align-items: start;
    }
    .m-card[data-m-adaptive][data-m-layout="auto"]:not([data-m-runtime="ready"]) .m-card__media {
      inline-size: 100%;
      block-size: 100%;
      min-block-size: 10rem;
      aspect-ratio: auto;
      align-self: stretch;
    }
  }

  @container m-card (min-width: 960px) {
    .m-card[data-m-adaptive][data-m-representation="auto"]:not([data-m-runtime="ready"]) .m-card__frame {
      --m-card-padding: var(--m-space-5);
      --m-card-gap: var(--m-space-4);
      --m-card-media-col: 1.05fr;
      --m-card-content-col: 1.4fr;
    }
  }
}

@layer morph.components {
  .m-form { display: grid; gap: var(--m-space-4); }
  .m-field { display: grid; gap: var(--m-space-1); min-inline-size: 0; }
  .m-field__label, .m-field > label { font-weight: 650; }
  .m-field__help { color: var(--m-content-muted); font-size: .9em; }
  .m-field__error { color: var(--m-danger); font-size: .9em; font-weight: 650; }

  .m-control {
    inline-size: 100%;
    min-block-size: var(--m-control-min);
    padding-block: var(--m-control-padding-block, .62rem);
    padding-inline: var(--m-control-padding-inline, .75rem);
    border: var(--m-border-width) var(--m-border-style) var(--m-control-border, var(--m-border));
    border-radius: var(--m-control-radius, var(--m-radius));
    background: var(--m-control-surface, var(--m-surface-raised));
    color: var(--m-content);
    box-shadow: var(--m-control-shadow, inset 0 1px 0 color-mix(in oklch, var(--m-content), transparent 96%));
    font: inherit;
    line-height: 1.25;
    transition: border-color var(--m-motion-fast) var(--m-ease-standard), box-shadow var(--m-motion-fast) var(--m-ease-standard), background-color var(--m-motion-fast) var(--m-ease-standard);
  }
  .m-control:hover:not(:disabled):not([readonly]) { border-color: var(--m-border-strong); }
  .m-control:focus-visible {
    border-color: var(--m-action);
    outline: var(--m-focus-width) solid var(--m-focus);
    outline-offset: var(--m-focus-offset);
    box-shadow: var(--m-control-shadow-focus, 0 0 0 1px var(--m-action));
  }
  textarea.m-control { min-block-size: 7rem; resize: vertical; }
  select.m-control { cursor: pointer; color-scheme: light dark; }
  .m-control::placeholder { color: var(--m-content-muted); opacity: 1; }
  .m-control[readonly] { background: var(--m-surface-muted); color: var(--m-content-muted); cursor: default; }
  .m-control[aria-invalid="true"], .m-field[data-m-state="error"] .m-control { border-color: var(--m-danger); }
  .m-control[aria-invalid="true"]:focus-visible, .m-field[data-m-state="error"] .m-control:focus-visible { outline-color: var(--m-danger); box-shadow: 0 0 0 1px var(--m-danger); }
  .m-control:disabled { background: var(--m-surface-sunken); color: var(--m-content-muted); cursor: not-allowed; opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .m-control { transition-duration: 0s; }
  }

  @media (forced-colors: active) {
    .m-control, .m-control:hover, .m-control:focus-visible {
      background: Field;
      color: FieldText;
      border-color: ButtonText;
      box-shadow: none;
      forced-color-adjust: auto;
    }
    .m-control:focus-visible { outline-color: Highlight; }
    .m-control:disabled { color: GrayText; border-color: GrayText; }
  }
}