/* Pleat — component stylesheet (pleat.css). Load after tokens.css.
   Layers: base (native elements) < components < variants (variant, appearance, size) < utilities.
   Anything you write outside these layers wins without !important. */
@layer pleat.base, pleat.components, pleat.variants, pleat.utilities;

/* ───────────────────────── base: native elements ───────────────────────── */
@layer pleat.base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
  html[data-theme$="dark"] { color-scheme: dark; }
  html[data-theme$="auto"] { color-scheme: light dark; }
  body {
    margin: 0;
    font-family: var(--font-pleat-sans);
    font-size: var(--pl-font-size-m);
    line-height: 1.6;
    color: var(--pl-color-text-normal);
    background: var(--pl-color-surface-default);
    -webkit-font-smoothing: antialiased;
  }
  :where(h1, h2, h3, h4, h5, h6) { margin: 0 0 var(--pl-space-s); color: var(--pl-color-text-normal); text-wrap: balance; }
  :where(h1) { font-size: var(--pl-font-size-3xl); line-height: 1.15; font-weight: var(--pl-font-weight-bold); letter-spacing: -0.015em; }
  :where(h2) { font-size: var(--pl-font-size-2xl); line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
  :where(h3) { font-size: var(--pl-font-size-xl); line-height: 1.3; font-weight: var(--pl-font-weight-semibold); }
  :where(h4) { font-size: var(--pl-font-size-l); line-height: 1.4; font-weight: var(--pl-font-weight-semibold); }
  :where(h5, h6) { font-size: var(--pl-font-size-m); line-height: 1.5; font-weight: var(--pl-font-weight-semibold); }
  :where(p, ul, ol, dl, blockquote, pre, table, figure) { margin: 0 0 var(--pl-space-m); }
  :where(p) { text-wrap: pretty; }
  :where(ul, ol) { padding-inline-start: 1.5em; }
  :where(li + li) { margin-top: var(--pl-space-2xs); }
  :where(a) { color: var(--pl-color-text-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  :where(a:hover) { text-decoration-thickness: 2px; }
  :where(small) { font-size: var(--pl-font-size-s); }
  :where(strong, b) { font-weight: var(--pl-font-weight-semibold); }
  :where(mark) { background: var(--pl-color-warning-fill-normal); color: var(--pl-color-warning-on-normal); padding: 0 0.15em; border-radius: 2px; }
  :where(code, kbd, samp, pre) { font-family: var(--font-pleat-mono); font-size: 0.875em; }
  :where(:not(pre) > code) {
    padding: 0.1em 0.35em; border-radius: var(--pl-radius-s);
    background: var(--pl-color-surface-lowered); border: var(--pl-border-width-s) solid var(--pl-color-surface-border);
  }
  :where(kbd) {
    padding: 0.1em 0.4em; border-radius: var(--pl-radius-s);
    background: var(--pl-color-surface-raised);
    border: var(--pl-border-width-s) solid var(--pl-color-neutral-border-normal);
    border-bottom-width: 2px;
  }
  :where(pre) {
    padding: var(--pl-space-m); overflow-x: auto; line-height: 1.5;
    background: var(--pl-color-surface-lowered); border: var(--pl-border-width-s) solid var(--pl-color-surface-border);
    border-radius: var(--pl-radius-m);
  }
  :where(blockquote) {
    margin-inline: 0; padding-inline-start: var(--pl-space-m);
    border-inline-start: var(--pl-border-width-l) solid var(--pl-color-neutral-border-normal);
    color: var(--pl-color-text-quiet); font-size: var(--pl-font-size-l);
  }
  :where(hr) { border: 0; border-top: var(--pl-border-width-s) solid var(--pl-color-surface-border); margin: var(--pl-space-l) 0; }
  :where(img, svg, video, canvas) { max-width: 100%; }
  :where(img, video) { height: auto; }
  :where(table) { width: 100%; border-collapse: collapse; font-size: var(--pl-font-size-s); font-variant-numeric: tabular-nums; }
  :where(th, td) { padding: var(--pl-space-xs) var(--pl-space-s); text-align: start; border-bottom: var(--pl-border-width-s) solid var(--pl-color-surface-border); }
  :where(th) { font-weight: var(--pl-font-weight-semibold); color: var(--pl-color-text-normal); }
  :where(thead th) { background: var(--pl-color-surface-lowered); }
  :where(caption) { caption-side: bottom; padding-top: var(--pl-space-xs); color: var(--pl-color-text-quiet); font-size: var(--pl-font-size-xs); text-align: start; }
  ::selection { background: var(--pl-color-brand-fill-normal); color: var(--pl-color-brand-on-normal); }
  :where(a, button, input, select, textarea, summary, [tabindex], .pl-tab):focus-visible {
    outline: var(--pl-border-width-m) solid var(--pl-color-focus);
    outline-offset: 2px;
  }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  }
}

/* ───────────────────────── components ───────────────────────── */
@layer pleat.components {

  /* shared: every component reads its colours from --pl-v-* (variant) and --pl-a-* (appearance),
     and its dimensions from --pl-size-* (size). The variants layer swaps them. */
  .pl-button, .pl-badge, .pl-tag, .pl-callout {
    --pl-v-fill-loud: var(--pl-color-neutral-fill-loud);
    --pl-v-fill-normal: var(--pl-color-neutral-fill-normal);
    --pl-v-fill-quiet: var(--pl-color-neutral-fill-quiet);
    --pl-v-border-loud: var(--pl-color-neutral-border-loud);
    --pl-v-border-normal: var(--pl-color-neutral-border-normal);
    --pl-v-border-quiet: var(--pl-color-neutral-border-quiet);
    --pl-v-on-loud: var(--pl-color-neutral-on-loud);
    --pl-v-on-normal: var(--pl-color-neutral-on-normal);
    --pl-v-on-quiet: var(--pl-color-neutral-on-quiet);
    /* accent appearance by default */
    --pl-a-bg: var(--pl-v-fill-loud);
    --pl-a-fg: var(--pl-v-on-loud);
    --pl-a-border: var(--pl-v-fill-loud);
    --pl-a-bg-hover: color-mix(in oklab, var(--pl-v-fill-loud), var(--pl-v-on-loud) 14%);
  }
  .pl-button, .pl-input, .pl-select, .pl-input-group, .pl-segmented {
    --pl-size-h: var(--pl-control-height-m);
    --pl-size-fs: var(--pl-font-size-s);
    --pl-size-px: var(--pl-space-m);
  }

  /* Button */
  .pl-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--pl-space-xs);
    min-height: var(--pl-size-h); padding: 0 var(--pl-size-px);
    font: var(--pl-font-weight-semibold) var(--pl-size-fs)/1.2 var(--font-pleat-sans);
    color: var(--pl-a-fg); background: var(--pl-a-bg);
    border: var(--pl-border-width-s) solid var(--pl-a-border); border-radius: var(--pl-radius-m);
    text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
    transition: background-color var(--pl-duration-fast), border-color var(--pl-duration-fast), color var(--pl-duration-fast), transform var(--pl-duration-fast);

    &:hover { background: var(--pl-a-bg-hover); }
    &:active { transform: translateY(1px); }
    &:is(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; transform: none; pointer-events: none; }
    > svg, > .pl-icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }
    &.pl-icon-only { width: var(--pl-size-h); padding: 0; }
    &.pl-loading {
      position: relative; color: transparent; pointer-events: none; opacity: 1;

      &::after {
        content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: var(--pl-radius-circle);
        border: 2px solid var(--pl-a-fg); border-right-color: transparent; animation: pl-spin 0.7s linear infinite;
      }
    }
    .pl-caret { width: 0.9em; height: 0.9em; margin-inline-end: calc(var(--pl-space-2xs) * -1); }
  }

  /* Button group */
  .pl-button-group {
    display: inline-flex; flex-wrap: nowrap; isolation: isolate;

    > .pl-button {
      position: relative;

      &:hover, &:focus-visible { z-index: 1; }
      &:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: calc(var(--pl-border-width-s) * -1); }
      &:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
      &.pl-accent:not(:first-child),
      &:not([class*="pl-outlined"], .pl-plain, .pl-filled):not(:first-child) { box-shadow: inset 1px 0 0 color-mix(in oklab, var(--pl-a-fg) 30%, transparent); }
    }
  }

  /* Copy button */
  .pl-copy-button {
    .pl-copied-icon { display: none; }

    &[data-state="copied"] {
      .pl-copy-icon { display: none; }
      .pl-copied-icon { display: inline; color: var(--pl-color-success-on-quiet); }
      &.pl-accent .pl-copied-icon { color: inherit; }
    }
  }

  /* Dropdown (details + menu) */
  .pl-dropdown {
    position: relative; display: inline-block;

    > summary {
      list-style: none;

      &::-webkit-details-marker { display: none; }
      .pl-caret { transition: transform var(--pl-duration-normal); }
    }
    &[open] > summary .pl-caret { transform: rotate(180deg); }
    > .pl-menu { position: absolute; z-index: var(--pl-z-dropdown); top: calc(100% + var(--pl-space-2xs)); inset-inline-start: 0; }
    &.pl-end > .pl-menu { inset-inline-start: auto; inset-inline-end: 0; }
    &.pl-top > .pl-menu { top: auto; bottom: calc(100% + var(--pl-space-2xs)); }
    &[open] > .pl-menu { animation: pl-pop var(--pl-duration-normal) ease-out; }
  }
  .pl-menu {
    min-width: 12rem; padding: var(--pl-space-2xs); margin: 0;
    background: var(--pl-color-surface-raised); color: var(--pl-color-text-normal);
    border: var(--pl-border-width-s) solid var(--pl-color-surface-border); border-radius: var(--pl-radius-m);
    box-shadow: var(--pl-shadow-m); font-size: var(--pl-font-size-s);

    .pl-item {
      display: flex; align-items: center; gap: var(--pl-space-xs); width: 100%;
      padding: var(--pl-space-xs) var(--pl-space-s); border: 0; border-radius: var(--pl-radius-s);
      background: none; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer;

      &:hover, &:focus-visible { background: var(--pl-color-neutral-fill-quiet); outline: none; }
      &:focus-visible { box-shadow: inset 0 0 0 var(--pl-border-width-m) var(--pl-color-focus); }
      > svg { width: 1.1em; height: 1.1em; color: var(--pl-color-text-quiet); flex-shrink: 0; }
      .pl-meta { margin-inline-start: auto; color: var(--pl-color-text-quiet); font-size: var(--pl-font-size-xs); }
      &.pl-danger, &.pl-danger > svg { color: var(--pl-color-danger-on-quiet); }
      &.pl-danger:hover { background: var(--pl-color-danger-fill-quiet); }
      &:is(:disabled, [aria-disabled="true"]) { opacity: 0.5; pointer-events: none; }
    }
    .pl-heading { padding: var(--pl-space-xs) var(--pl-space-s) var(--pl-space-2xs); font-size: var(--pl-font-size-xs); font-weight: var(--pl-font-weight-semibold); color: var(--pl-color-text-quiet); }
    > hr { margin: var(--pl-space-2xs) 0; border: 0; border-top: var(--pl-border-width-s) solid var(--pl-color-surface-border); }
  }

  /* Callout */
  .pl-callout {
    --pl-v-fill-loud: var(--pl-color-brand-fill-loud);
    --pl-v-fill-normal: var(--pl-color-brand-fill-normal);
    --pl-v-fill-quiet: var(--pl-color-brand-fill-quiet);
    --pl-v-border-loud: var(--pl-color-brand-border-loud);
    --pl-v-border-normal: var(--pl-color-brand-border-normal);
    --pl-v-border-quiet: var(--pl-color-brand-border-quiet);
    --pl-v-on-loud: var(--pl-color-brand-on-loud);
    --pl-v-on-normal: var(--pl-color-brand-on-normal);
    --pl-v-on-quiet: var(--pl-color-brand-on-quiet);
    --pl-a-bg: var(--pl-v-fill-quiet);
    --pl-a-fg: var(--pl-color-text-normal);
    --pl-a-border: var(--pl-v-border-quiet);
    --pl-a-icon: var(--pl-v-on-quiet);
    display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--pl-space-s);
    padding: var(--pl-space-m); border-radius: var(--pl-radius-m);
    background: var(--pl-a-bg); color: var(--pl-a-fg); border: var(--pl-border-width-s) solid var(--pl-a-border);
    font-size: var(--pl-font-size-s); line-height: 1.5;

    > svg, > .pl-icon { width: 1.25rem; height: 1.25rem; color: var(--pl-a-icon, currentColor); margin-top: 0.05rem; }
    > :not(svg, .pl-icon, .pl-dismiss) { grid-column: 2; min-width: 0; }
    > :not(svg, .pl-icon):first-child { grid-column: 1 / 3; }
    :where(p, ul, ol):last-child { margin-bottom: 0; }
    strong:first-child { display: block; margin-bottom: var(--pl-space-3xs); }
    > .pl-dismiss {
      grid-column: 3; grid-row: 1; margin: calc(var(--pl-space-2xs) * -1); padding: var(--pl-space-2xs); background: none; border: 0; border-radius: var(--pl-radius-s); color: inherit; cursor: pointer; line-height: 0;

      &:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
      svg { width: 1rem; height: 1rem; }
    }
  }

  /* Badge */
  .pl-badge {
    --pl-v-fill-loud: var(--pl-color-brand-fill-loud);
    --pl-v-fill-normal: var(--pl-color-brand-fill-normal);
    --pl-v-fill-quiet: var(--pl-color-brand-fill-quiet);
    --pl-v-border-loud: var(--pl-color-brand-border-loud);
    --pl-v-border-normal: var(--pl-color-brand-border-normal);
    --pl-v-border-quiet: var(--pl-color-brand-border-quiet);
    --pl-v-on-loud: var(--pl-color-brand-on-loud);
    --pl-v-on-normal: var(--pl-color-brand-on-normal);
    --pl-v-on-quiet: var(--pl-color-brand-on-quiet);
    display: inline-flex; align-items: center; gap: var(--pl-space-2xs);
    padding: 0.15em 0.55em; border-radius: var(--pl-radius-s);
    font: var(--pl-font-weight-semibold) var(--pl-font-size-xs)/1.3 var(--font-pleat-sans); letter-spacing: 0.01em;
    color: var(--pl-a-fg); background: var(--pl-a-bg); border: var(--pl-border-width-s) solid var(--pl-a-border);
    white-space: nowrap; vertical-align: 0.1em;

    > svg { width: 1em; height: 1em; }
    &.pl-pulse { animation: pl-pulse 1.6s ease-out infinite; }
    &.pl-dot { width: 0.625rem; height: 0.625rem; padding: 0; border-radius: var(--pl-radius-circle); }
  }

  /* Tag */
  .pl-tag {
    --pl-a-bg: var(--pl-v-fill-quiet);
    --pl-a-fg: var(--pl-v-on-quiet);
    --pl-a-border: var(--pl-v-border-normal);
    --pl-a-bg-hover: var(--pl-v-fill-normal);
    display: inline-flex; align-items: center; gap: var(--pl-space-2xs);
    min-height: 1.75rem; padding: 0 var(--pl-space-xs);
    font-size: var(--pl-font-size-s); font-weight: var(--pl-font-weight-medium); line-height: 1.2;
    color: var(--pl-a-fg); background: var(--pl-a-bg); border: var(--pl-border-width-s) solid var(--pl-a-border);
    border-radius: var(--pl-radius-s); white-space: nowrap; text-decoration: none;

    &:is(a):hover { background: var(--pl-a-bg-hover); }
    &.pl-small { min-height: 1.375rem; font-size: var(--pl-font-size-xs); }
    &.pl-large { min-height: 2.25rem; padding: 0 var(--pl-space-s); font-size: var(--pl-font-size-m); }
    > .pl-remove {
      display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-inline-end: -0.2em; padding: 0;
      border: 0; border-radius: var(--pl-radius-s); background: none; color: inherit; cursor: pointer; opacity: 0.8;

      &:hover { opacity: 1; background: color-mix(in oklab, currentColor 14%, transparent); }
      svg { width: 0.85em; height: 0.85em; }
    }
  }

  /* Spinner */
  .pl-spinner {
    display: inline-block; width: var(--size, 1.25em); height: var(--size, 1.25em); flex-shrink: 0;
    border: var(--track-width, 0.15em) solid var(--pl-color-neutral-fill-normal); border-top-color: var(--indicator, var(--pl-color-brand-fill-loud));
    border-radius: var(--pl-radius-circle); animation: pl-spin 0.75s linear infinite; vertical-align: -0.2em;
  }

  /* Progress bar (native <progress>) */
  .pl-progress-bar {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--height, 0.5rem);
    border: 0; border-radius: var(--pl-radius-pill); overflow: hidden;
    background: var(--pl-color-neutral-fill-normal); color: var(--indicator, var(--pl-color-brand-fill-loud));

    &::-webkit-progress-bar { background: transparent; }
    &::-webkit-progress-value { background: var(--indicator, var(--pl-color-brand-fill-loud)); border-radius: var(--pl-radius-pill); transition: width var(--pl-duration-slow); }
    &::-moz-progress-bar { background: var(--indicator, var(--pl-color-brand-fill-loud)); border-radius: var(--pl-radius-pill); }
    &:indeterminate {
      background:
        linear-gradient(90deg, transparent 0 35%, var(--indicator, var(--pl-color-brand-fill-loud)) 35% 65%, transparent 65%) 0 0 / 200% 100% no-repeat,
        var(--pl-color-neutral-fill-normal);
      animation: pl-slide 1.4s ease-in-out infinite;

      &::-moz-progress-bar { background: transparent; }
    }
  }
  .pl-progress-label {
    display: flex; justify-content: space-between; margin-bottom: var(--pl-space-2xs); font-size: var(--pl-font-size-s); color: var(--pl-color-text-quiet);

    > :first-child { color: var(--pl-color-text-normal); font-weight: var(--pl-font-weight-medium); }
  }

  /* Progress ring */
  .pl-progress-ring {
    --_pct: calc(var(--value, 0) * 1%);
    display: inline-grid; place-items: center; width: var(--size, 4rem); aspect-ratio: 1; position: relative;
    font-size: calc(var(--size, 4rem) * 0.22); font-weight: var(--pl-font-weight-semibold); font-variant-numeric: tabular-nums; color: var(--pl-color-text-normal);

    &::before {
      content: ""; position: absolute; inset: 0; border-radius: var(--pl-radius-circle);
      background: conic-gradient(var(--indicator, var(--pl-color-brand-fill-loud)) var(--_pct), var(--pl-color-neutral-fill-normal) 0);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--track-width, 0.375rem)), #000 calc(100% - var(--track-width, 0.375rem) + 0.5px));
      mask: radial-gradient(farthest-side, transparent calc(100% - var(--track-width, 0.375rem)), #000 calc(100% - var(--track-width, 0.375rem) + 0.5px));
    }
  }

  /* Skeleton */
  .pl-skeleton {
    display: block; height: var(--height, 1rem); border-radius: var(--pl-radius-s);
    background: linear-gradient(90deg, var(--pl-color-neutral-fill-normal) 0 40%, var(--pl-color-neutral-fill-quiet) 50%, var(--pl-color-neutral-fill-normal) 60% 100%) 0 0 / 300% 100%;
    animation: pl-shimmer 1.6s linear infinite;

    &.pl-text { height: 0.8em; margin: 0.4em 0; }
    &.pl-circle { width: var(--size, 2.5rem); height: var(--size, 2.5rem); border-radius: var(--pl-radius-circle); }
    &.pl-pulse { animation: pl-fade 1.6s ease-in-out infinite; background: var(--pl-color-neutral-fill-normal); }
  }

  /* Tooltip */
  .pl-tooltip {
    position: relative; display: inline-flex;

    > .pl-content {
      position: absolute; z-index: var(--pl-z-tooltip); left: 50%; bottom: calc(100% + var(--pl-space-xs));
      width: max-content; max-width: 16rem; padding: var(--pl-space-2xs) var(--pl-space-xs);
      font-size: var(--pl-font-size-xs); font-weight: var(--pl-font-weight-medium); line-height: 1.4; text-align: center;
      color: var(--pl-color-neutral-on-loud); background: var(--pl-color-neutral-fill-loud);
      border-radius: var(--pl-radius-s); box-shadow: var(--pl-shadow-m);
      opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px);
      transition: opacity var(--pl-duration-normal), transform var(--pl-duration-normal), visibility var(--pl-duration-normal);

      &::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--pl-color-neutral-fill-loud); }
    }
    &:is(:hover, :focus-within):not([data-dismissed]) > .pl-content { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 150ms; }
    &.pl-bottom {
      > .pl-content {
        bottom: auto; top: calc(100% + var(--pl-space-xs)); transform: translate(-50%, -4px);

        &::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--pl-color-neutral-fill-loud); }
      }
      &:is(:hover, :focus-within):not([data-dismissed]) > .pl-content { transform: translate(-50%, 0); }
    }
  }

  /* Field: label + control + hint/error */
  .pl-field { display: grid; gap: var(--pl-space-2xs); align-content: start; min-width: 0; }
  .pl-label {
    font-size: var(--pl-font-size-s); font-weight: var(--pl-font-weight-medium); color: var(--pl-color-text-normal);

    &.pl-required::after, .pl-field.pl-required > &::after { content: " *"; color: var(--pl-color-danger-on-quiet); }
  }
  .pl-hint { font-size: var(--pl-font-size-xs); color: var(--pl-color-text-quiet); }
  .pl-error-text {
    display: flex; gap: var(--pl-space-2xs); align-items: flex-start; font-size: var(--pl-font-size-xs); font-weight: var(--pl-font-weight-medium); color: var(--pl-color-danger-on-quiet);

    > svg { width: 1.1em; height: 1.1em; flex-shrink: 0; margin-top: 0.15em; }
  }
  /* Rails wraps invalid fields in .field_with_errors: let it vanish from layout and colour what it wraps */
  .field_with_errors { display: contents; }

  /* Input, textarea, select share one look */
  .pl-input, .pl-textarea, .pl-select, .pl-input-group,
  .pl-form :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="hidden"], [type="color"], [type="file"]), textarea, select) {
    width: 100%; min-height: var(--pl-size-h, var(--pl-control-height-m)); padding: 0 var(--pl-space-s);
    font: var(--pl-size-fs, var(--pl-font-size-s))/1.4 var(--font-pleat-sans); color: var(--pl-color-text-normal);
    background: var(--pl-color-surface-raised);
    border: var(--pl-border-width-s) solid var(--pl-color-neutral-border-loud); border-radius: var(--pl-radius-m);
    transition: border-color var(--pl-duration-fast), box-shadow var(--pl-duration-fast);
  }
  .pl-textarea, .pl-form :where(textarea) { min-height: 5.5rem; padding: var(--pl-space-xs) var(--pl-space-s); resize: vertical; line-height: 1.5; }
  .pl-textarea.pl-autosize { field-sizing: content; }
  .pl-input::placeholder, .pl-textarea::placeholder, .pl-input-group input::placeholder, .pl-form :where(input, textarea)::placeholder { color: var(--pl-color-text-quiet); opacity: 1; }
  :is(.pl-input, .pl-textarea, .pl-select, .pl-input-group):hover { border-color: var(--pl-color-text-quiet); }
  :is(.pl-input, .pl-textarea, .pl-select):focus, .pl-input-group:focus-within,
  .pl-form :where(input, textarea, select):focus {
    outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: -1px; border-color: var(--pl-color-focus);
  }
  :is(.pl-input, .pl-textarea):is(:disabled, [readonly]), .pl-select:disabled { background: var(--pl-color-surface-lowered); }
  :is(.pl-input, .pl-textarea, .pl-select):disabled { opacity: 0.6; cursor: not-allowed; }
  :is(.pl-input, .pl-textarea, .pl-select)[aria-invalid="true"], .pl-input-group:has([aria-invalid="true"]),
  .pl-field.pl-invalid :is(.pl-input, .pl-textarea, .pl-select, .pl-input-group),
  .field_with_errors :is(.pl-input, .pl-textarea, .pl-select, input, textarea, select) {
    border-color: var(--pl-color-danger-border-loud);
  }
  .pl-input[type="file"] {
    padding: 0; line-height: calc(var(--pl-control-height-m) - 2px);

    &::file-selector-button {
      height: 100%; margin-inline-end: var(--pl-space-s); padding: 0 var(--pl-space-s); border: 0;
      border-inline-end: var(--pl-border-width-s) solid var(--pl-color-neutral-border-normal);
      background: var(--pl-color-neutral-fill-quiet); color: var(--pl-color-text-normal); font: inherit; font-weight: var(--pl-font-weight-medium); cursor: pointer;
    }
  }

  /* Input group: affixes inside the control */
  .pl-input-group {
    display: flex; align-items: center; gap: var(--pl-space-xs); padding: 0 var(--pl-space-s); cursor: text;

    > input { flex: 1; min-width: 0; height: calc(var(--pl-size-h) - 2px); padding: 0; border: 0; background: none; font: inherit; color: inherit; outline: none; }
    > :is(svg, .pl-icon) { width: 1.1em; height: 1.1em; color: var(--pl-color-text-quiet); flex-shrink: 0; }
    > .pl-affix { color: var(--pl-color-text-quiet); white-space: nowrap; }
    > .pl-button { min-height: calc(var(--pl-size-h) - 0.5rem); margin-inline-end: calc(var(--pl-space-xs) * -1); padding: 0 var(--pl-space-xs); }
  }

  /* Select (native) */
  .pl-select, .pl-form :where(select:not([multiple])) {
    -webkit-appearance: none; appearance: none; padding-inline-end: 2.25rem; cursor: pointer;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--pl-color-text-quiet) 50%),
      linear-gradient(135deg, var(--pl-color-text-quiet) 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) 50%, calc(100% - 0.75rem) 50%;
    background-size: 0.3rem 0.3rem; background-repeat: no-repeat;
  }
  .pl-select[multiple] { padding: var(--pl-space-2xs); background-image: none; }

  /* Checkbox + radio */
  .pl-check {
    display: inline-flex; align-items: flex-start; gap: var(--pl-space-xs); font-size: var(--pl-font-size-s); line-height: 1.4; cursor: pointer;

    > input { margin-top: 0.1em; }
    .pl-hint { display: block; }
    &:is(div) { cursor: default; > input, label { cursor: pointer; } }
  }
  .pl-checkbox, .pl-radio, .pl-form :where(input[type="checkbox"]:not(.pl-switch), input[type="radio"]) {
    -webkit-appearance: none; appearance: none; flex-shrink: 0; display: inline-grid; place-content: center;
    width: 1.125rem; height: 1.125rem; margin: 0;
    background: var(--pl-color-surface-raised); border: var(--pl-border-width-s) solid var(--pl-color-neutral-border-loud);
    border-radius: var(--pl-radius-s); cursor: pointer; vertical-align: -0.2em;
    transition: background-color var(--pl-duration-fast), border-color var(--pl-duration-fast);
  }
  .pl-radio, .pl-form :where(input[type="radio"]) { border-radius: var(--pl-radius-circle); }
  .pl-checkbox::before, .pl-form :where(input[type="checkbox"]:not(.pl-switch))::before {
    content: ""; width: 0.7rem; height: 0.7rem; background: var(--pl-color-brand-on-loud); transform: scale(0);
    clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 69%);
    transition: transform var(--pl-duration-fast);
  }
  .pl-radio::before, .pl-form :where(input[type="radio"])::before {
    content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--pl-radius-circle); background: var(--pl-color-brand-on-loud);
    transform: scale(0); transition: transform var(--pl-duration-fast);
  }
  :is(.pl-checkbox, .pl-radio):is(:checked, :indeterminate), .pl-form :where(input[type="checkbox"]:not(.pl-switch), input[type="radio"]):is(:checked, :indeterminate) {
    background: var(--pl-color-brand-fill-loud); border-color: var(--pl-color-brand-fill-loud);
  }
  :is(.pl-checkbox, .pl-radio):checked::before, .pl-form :where(input[type="checkbox"]:not(.pl-switch), input[type="radio"]):checked::before { transform: scale(1); }
  .pl-checkbox:indeterminate::before { clip-path: none; height: 2px; width: 0.6rem; transform: scale(1); }
  .pl-checkbox, .pl-radio {
    &:disabled { opacity: 0.5; cursor: not-allowed; }
    &[aria-invalid="true"] { border-color: var(--pl-color-danger-border-loud); }
  }

  /* Radio group (fieldset) */
  .pl-radio-group {
    display: grid; gap: var(--pl-space-xs); margin: 0; padding: 0; border: 0; min-width: 0;

    > legend { padding: 0; margin-bottom: var(--pl-space-xs); font-size: var(--pl-font-size-s); font-weight: var(--pl-font-weight-medium); }
    &.pl-horizontal { display: flex; flex-wrap: wrap; gap: var(--pl-space-xs) var(--pl-space-l); }
  }

  /* Segmented control: radio buttons that look like a button group */
  .pl-segmented {
    display: inline-flex; padding: 3px; gap: 2px; margin: 0; min-width: 0;
    background: var(--pl-color-surface-lowered); border: var(--pl-border-width-s) solid var(--pl-color-neutral-border-loud); border-radius: var(--pl-radius-m);

    > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    > label { position: relative; display: inline-flex; }
    input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
    span {
      display: inline-flex; align-items: center; gap: var(--pl-space-xs); min-height: calc(var(--pl-size-h) - 8px); padding: 0 var(--pl-space-s);
      font-size: var(--pl-size-fs); font-weight: var(--pl-font-weight-medium); color: var(--pl-color-text-quiet);
      border-radius: calc(var(--pl-radius-m) - 3px); transition: background-color var(--pl-duration-fast), color var(--pl-duration-fast);
    }
    label:hover span { color: var(--pl-color-text-normal); }
    input:checked + span { background: var(--pl-color-surface-raised); color: var(--pl-color-text-normal); box-shadow: var(--pl-shadow-s), 0 0 0 var(--pl-border-width-s) var(--pl-color-surface-border); }
    input:focus-visible + span { outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: 1px; }
  }

  /* Switch: <input type="checkbox" role="switch" class="pl-switch"> */
  .pl-switch {
    -webkit-appearance: none; appearance: none; flex-shrink: 0; position: relative; margin: 0;
    width: 2.25rem; height: 1.25rem; border-radius: var(--pl-radius-pill); cursor: pointer; vertical-align: -0.3em;
    background: var(--pl-color-neutral-fill-normal); border: var(--pl-border-width-s) solid var(--pl-color-neutral-border-loud);
    transition: background-color var(--pl-duration-normal), border-color var(--pl-duration-normal);

    &::before {
      content: ""; position: absolute; top: 1px; left: 1px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px);
      border-radius: var(--pl-radius-circle); background: var(--pl-color-neutral-border-loud);
      transition: transform var(--pl-duration-normal), background-color var(--pl-duration-normal);
    }
    &:checked { background: var(--pl-color-brand-fill-loud); border-color: var(--pl-color-brand-fill-loud); }
    &:checked::before { transform: translateX(1rem); background: var(--pl-color-brand-on-loud); }
    &:disabled { opacity: 0.5; cursor: not-allowed; }
    &.pl-small {
      width: 1.75rem; height: 1rem;

      &::before { width: calc(1rem - 4px); height: calc(1rem - 4px); }
      &:checked::before { transform: translateX(0.75rem); }
    }
    &.pl-large {
      width: 2.75rem; height: 1.5rem;

      &::before { width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); }
      &:checked::before { transform: translateX(1.25rem); }
    }
  }

  /* Slider (native range). --value (0–100) paints the filled track; pleat.js keeps it in sync. */
  .pl-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 1.25rem; margin: 0; background: none; cursor: pointer;
    --_fill: calc(var(--value, 50) * 1%);

    &::-webkit-slider-runnable-track {
      height: 0.375rem; border-radius: var(--pl-radius-pill);
      background: linear-gradient(to right, var(--pl-color-brand-fill-loud) var(--_fill), var(--pl-color-neutral-fill-normal) var(--_fill));
    }
    &::-moz-range-track { height: 0.375rem; border-radius: var(--pl-radius-pill); background: var(--pl-color-neutral-fill-normal); }
    &::-moz-range-progress { height: 0.375rem; border-radius: var(--pl-radius-pill); background: var(--pl-color-brand-fill-loud); }
    &::-webkit-slider-thumb {
      -webkit-appearance: none; width: 1.125rem; height: 1.125rem; margin-top: -0.375rem; border-radius: var(--pl-radius-circle);
      background: var(--pl-color-surface-raised); border: 2px solid var(--pl-color-brand-fill-loud); box-shadow: var(--pl-shadow-s);
    }
    &::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: var(--pl-radius-circle); background: var(--pl-color-surface-raised); border: 2px solid var(--pl-color-brand-fill-loud); }
    &:focus-visible { outline: none; }
    &:focus-visible::-webkit-slider-thumb { outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: 2px; }
    &:focus-visible::-moz-range-thumb { outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: 2px; }
    &:disabled { opacity: 0.5; cursor: not-allowed; }
  }

  /* Rating */
  .pl-rating, .pl-rating-display {
    --_star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");
  }
  .pl-rating {
    display: inline-flex; gap: 2px; margin: 0; padding: 0; border: 0; font-size: var(--size, 1.5rem);

    > legend, > label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    > label { width: 1em; height: 1em; cursor: pointer; background: var(--pl-color-neutral-border-normal); -webkit-mask: var(--_star) center / contain no-repeat; mask: var(--_star) center / contain no-repeat; transition: background-color var(--pl-duration-fast), transform var(--pl-duration-fast); }
    > input:checked + label, > label:has(~ input:checked) { background: var(--pl-color-warning-fill-loud); }
    &:has(> label:hover) > label { background: var(--pl-color-neutral-border-normal); }
    &:has(> label:hover) > label:is(:hover, :has(~ label:hover)) { background: var(--pl-color-warning-fill-loud); }
    > label:hover { transform: scale(1.12); }
    > input:focus-visible + label { outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: 2px; -webkit-mask: none; mask: none; border-radius: var(--pl-radius-s); background: none; box-shadow: inset 0 0 0 100px var(--pl-color-warning-fill-loud); }
  }
  .pl-rating-display {
    display: inline-block; width: calc(var(--max, 5) * 1em); height: 1em; font-size: var(--size, 1.125rem); vertical-align: -0.15em;
    background: linear-gradient(to right, var(--pl-color-warning-fill-loud) calc(var(--value, 0) / var(--max, 5) * 100%), var(--pl-color-neutral-border-normal) 0);
    -webkit-mask: var(--_star) 0 0 / 1em 1em repeat-x; mask: var(--_star) 0 0 / 1em 1em repeat-x;
  }

  /* Card */
  .pl-card {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: var(--pl-color-surface-raised); color: var(--pl-color-text-normal);
    border: var(--pl-border-width-s) solid var(--pl-color-surface-border); border-radius: var(--pl-radius-l); box-shadow: var(--pl-shadow-s);

    > .pl-media { display: block; width: 100%; aspect-ratio: var(--aspect, 16 / 9); object-fit: cover; }
    > :is(.pl-header, .pl-body, .pl-footer) { padding: var(--pl-space-l); }
    > .pl-header {
      display: flex; align-items: center; justify-content: space-between; gap: var(--pl-space-s); padding-bottom: var(--pl-space-m); border-bottom: var(--pl-border-width-s) solid var(--pl-color-surface-border);

      :where(h1, h2, h3, h4, h5, h6) { margin: 0; font-size: var(--pl-font-size-l); }
    }
    > .pl-body {
      flex: 1;

      > :last-child { margin-bottom: 0; }
    }
    > .pl-footer { display: flex; align-items: center; gap: var(--pl-space-xs); padding-top: var(--pl-space-m); border-top: var(--pl-border-width-s) solid var(--pl-color-surface-border); background: var(--pl-color-surface-default); }
    &.pl-plain { box-shadow: none; }
    &.pl-filled { background: var(--pl-color-surface-lowered); box-shadow: none; }
    &.pl-interactive {
      position: relative; transition: box-shadow var(--pl-duration-normal), transform var(--pl-duration-normal);

      &:hover { box-shadow: var(--pl-shadow-m); transform: translateY(-2px); }
      :where(.pl-link) { color: inherit; text-decoration: none; }
      :where(.pl-link)::after { content: ""; position: absolute; inset: 0; }
    }
  }

  /* Details */
  .pl-details {
    border: var(--pl-border-width-s) solid var(--pl-color-surface-border); border-radius: var(--pl-radius-m); background: var(--pl-color-surface-raised);

    > summary {
      display: flex; align-items: center; justify-content: space-between; gap: var(--pl-space-s);
      padding: var(--pl-space-s) var(--pl-space-m); list-style: none; cursor: pointer; font-weight: var(--pl-font-weight-medium); border-radius: inherit;

      &::-webkit-details-marker { display: none; }
      &::after {
        content: ""; flex-shrink: 0; width: 0.5rem; height: 0.5rem; margin: -0.25rem 0.25rem 0 0;
        border: solid var(--pl-color-text-quiet); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--pl-duration-normal);
      }
      &:hover { background: var(--pl-color-neutral-fill-quiet); }
    }
    &[open] > summary::after { transform: rotate(225deg); margin-top: 0.25rem; }
    > .pl-body {
      padding: 0 var(--pl-space-m) var(--pl-space-m); color: var(--pl-color-text-normal);

      > :last-child { margin-bottom: 0; }
    }
    &.pl-plain {
      border: 0; border-bottom: var(--pl-border-width-s) solid var(--pl-color-surface-border); border-radius: 0; background: none;

      > summary { padding-inline: 0; }
      > summary:hover { background: none; color: var(--pl-color-text-link); }
      > .pl-body { padding-inline: 0; }
    }
  }
  .pl-details-group { display: grid; gap: var(--pl-space-xs); }

  /* Dialog + drawer (native <dialog>); parts may sit inside a <form method="dialog"> */
  .pl-dialog, .pl-drawer {
    padding: 0; border: var(--pl-border-width-s) solid var(--pl-color-surface-border);
    background: var(--pl-color-surface-raised); color: var(--pl-color-text-normal); box-shadow: var(--pl-shadow-l);

    &::backdrop { background: var(--pl-color-overlay, rgba(16, 20, 24, 0.45)); }
    &[open]::backdrop { animation: pl-fade-in var(--pl-duration-slow) ease-out; }
    &, > form {
      > .pl-header {
        display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pl-space-s); padding: var(--pl-space-l) var(--pl-space-l) 0;

        :where(h1, h2, h3, h4) { margin: 0; font-size: var(--pl-font-size-l); }
      }
      > .pl-body {
        padding: var(--pl-space-m) var(--pl-space-l); overflow-y: auto; flex: 1;

        > :last-child { margin-bottom: 0; }
      }
      > .pl-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--pl-space-xs); padding: 0 var(--pl-space-l) var(--pl-space-l); }
    }
    .pl-close {
      display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin: -0.25rem -0.5rem 0 0; padding: 0; flex-shrink: 0;
      border: 0; border-radius: var(--pl-radius-m); background: none; color: var(--pl-color-text-quiet); cursor: pointer;

      &:hover { background: var(--pl-color-neutral-fill-quiet); color: var(--pl-color-text-normal); }
      svg { width: 1.125rem; height: 1.125rem; }
    }
  }
  .pl-dialog {
    width: min(var(--width, 32rem), calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); border-radius: var(--pl-radius-l);

    &[open] { display: flex; flex-direction: column; animation: pl-dialog-in var(--pl-duration-slow) cubic-bezier(0.2, 0.9, 0.3, 1); }
  }
  .pl-drawer {
    --_size: var(--size, min(26rem, 90vw));
    position: fixed; margin: 0; max-width: none; max-height: none; border-radius: 0;
    inset: 0 0 0 auto; width: var(--_size); height: 100dvh; border-block: 0; border-inline-end: 0;

    &[open] { display: flex; flex-direction: column; animation: pl-drawer-end var(--pl-duration-slow) cubic-bezier(0.2, 0.9, 0.3, 1); }
    &.pl-start {
      inset: 0 auto 0 0; border-inline-start: 0; border-inline-end-width: var(--pl-border-width-s);

      &[open] { animation-name: pl-drawer-start; }
    }
    &.pl-bottom {
      inset: auto 0 0 0; width: 100vw; height: var(--size, auto); max-height: 85dvh; border: 0; border-top: var(--pl-border-width-s) solid var(--pl-color-surface-border); border-radius: var(--pl-radius-l) var(--pl-radius-l) 0 0;

      &[open] { animation-name: pl-drawer-bottom; }
    }
    &.pl-top {
      inset: 0 0 auto 0; width: 100vw; height: var(--size, auto); max-height: 85dvh; border: 0; border-bottom: var(--pl-border-width-s) solid var(--pl-color-surface-border);

      &[open] { animation-name: pl-drawer-top; }
    }
    &.pl-contained { position: absolute; height: 100%; }
  }

  /* Tab group */
  .pl-tab-group {
    display: flex; flex-direction: column; min-width: 0;

    &.pl-pills {
      .pl-tab-list { border: 0; gap: var(--pl-space-2xs); }
      .pl-tab {
        border-radius: var(--pl-radius-pill); padding: var(--pl-space-xs) var(--pl-space-s);

        &:is([aria-selected="true"], [aria-current="page"]) { background: var(--pl-color-brand-fill-normal); color: var(--pl-color-brand-on-normal); }
        &::after { display: none; }
      }
    }
  }
  .pl-tab-list { display: flex; gap: var(--pl-space-2xs); overflow-x: auto; border-bottom: var(--pl-border-width-s) solid var(--pl-color-surface-border); scrollbar-width: none; }
  .pl-tab {
    position: relative; display: inline-flex; align-items: center; gap: var(--pl-space-xs); padding: var(--pl-space-s) var(--pl-space-s);
    border: 0; background: none; font: var(--pl-font-weight-medium) var(--pl-font-size-s)/1.2 var(--font-pleat-sans); color: var(--pl-color-text-quiet);
    white-space: nowrap; text-decoration: none; cursor: pointer; border-radius: var(--pl-radius-s) var(--pl-radius-s) 0 0;

    &:hover { color: var(--pl-color-text-normal); }
    &:is([aria-selected="true"], [aria-current="page"]) {
      color: var(--pl-color-text-normal);

      &::after {
        content: ""; position: absolute; left: var(--pl-space-xs); right: var(--pl-space-xs); bottom: calc(var(--pl-border-width-s) * -1);
        height: var(--pl-border-width-m); border-radius: 2px 2px 0 0; background: var(--pl-color-brand-fill-loud);
      }
    }
    &:focus-visible { outline-offset: -2px; }
    .pl-badge { font-size: var(--pl-font-size-2xs); }
  }
  .pl-tab-panel {
    padding: var(--pl-space-m) 0;

    > :last-child { margin-bottom: 0; }
  }

  /* Divider */
  .pl-divider {
    border: 0; border-top: var(--width, var(--pl-border-width-s)) solid var(--color, var(--pl-color-surface-border)); margin: var(--spacing, var(--pl-space-m)) 0;

    &.pl-vertical { display: inline-block; align-self: stretch; height: auto; min-height: 1em; border-top: 0; border-inline-start: var(--width, var(--pl-border-width-s)) solid var(--color, var(--pl-color-surface-border)); margin: 0 var(--spacing, var(--pl-space-xs)); }
  }
  .pl-divider-label {
    display: flex; align-items: center; gap: var(--pl-space-s); margin: var(--spacing, var(--pl-space-m)) 0; color: var(--pl-color-text-quiet); font-size: var(--pl-font-size-xs); font-weight: var(--pl-font-weight-medium);

    &::before, &::after { content: ""; flex: 1; border-top: var(--pl-border-width-s) solid var(--pl-color-surface-border); }
  }

  /* Breadcrumb */
  .pl-breadcrumb {
    ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pl-space-2xs) var(--pl-space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--pl-font-size-s); }
    li { display: inline-flex; align-items: center; gap: var(--pl-space-xs); margin: 0; }
    li + li::before { content: "/"; color: var(--pl-color-neutral-border-loud); }
    a {
      color: var(--pl-color-text-quiet); text-decoration: none; display: inline-flex; align-items: center; gap: var(--pl-space-2xs);

      &:hover { color: var(--pl-color-text-link); text-decoration: underline; }
    }
    [aria-current="page"] { color: var(--pl-color-text-normal); font-weight: var(--pl-font-weight-medium); }
    svg { width: 1em; height: 1em; }
  }

  /* Avatar */
  .pl-avatar {
    display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; position: relative;
    width: var(--size, 2.5rem); height: var(--size, 2.5rem); border-radius: var(--pl-radius-circle);
    background: var(--pl-color-neutral-fill-normal); color: var(--pl-color-neutral-on-normal);
    font-size: calc(var(--size, 2.5rem) * 0.4); font-weight: var(--pl-font-weight-semibold); line-height: 1; text-transform: uppercase; user-select: none;

    > img { width: 100%; height: 100%; object-fit: cover; }
    > svg { width: 60%; height: 60%; }
    &.pl-rounded { border-radius: var(--pl-radius-m); }
    &.pl-square { border-radius: 0; }
    &.pl-brand { background: var(--pl-color-brand-fill-normal); color: var(--pl-color-brand-on-normal); }
  }
  .pl-avatar-group {
    display: inline-flex;

    > .pl-avatar { box-shadow: 0 0 0 2px var(--pl-color-surface-default); }
    > .pl-avatar + .pl-avatar { margin-inline-start: calc(var(--size, 2.5rem) * -0.22); }
  }

  /* Icon: size + alignment for inline SVG from any set */
  .pl-icon {
    display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em;

    &.pl-small { font-size: 0.875em; }
    &.pl-large { font-size: 1.5em; }
  }

  /* Relative time */
  .pl-relative-time { font-variant-numeric: tabular-nums; white-space: nowrap; }

  @keyframes pl-spin { to { transform: rotate(360deg); } }
  @keyframes pl-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
  @keyframes pl-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--pl-a-bg) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.5rem transparent; } }
  @keyframes pl-slide { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
  @keyframes pl-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
  @keyframes pl-fade { 50% { opacity: 0.5; } }
  @keyframes pl-fade-in { from { opacity: 0; } }
  @keyframes pl-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
  @keyframes pl-drawer-end { from { transform: translateX(100%); } }
  @keyframes pl-drawer-start { from { transform: translateX(-100%); } }
  @keyframes pl-drawer-bottom { from { transform: translateY(100%); } }
  @keyframes pl-drawer-top { from { transform: translateY(-100%); } }
}

/* ───────────────────────── variants · appearances · sizes ───────────────────────── */
@layer pleat.variants {
  .pl-brand, .pl-neutral, .pl-success, .pl-warning, .pl-danger {
    --pl-v-fill-loud: var(--_v-fill-loud); --pl-v-fill-normal: var(--_v-fill-normal); --pl-v-fill-quiet: var(--_v-fill-quiet);
    --pl-v-border-loud: var(--_v-border-loud); --pl-v-border-normal: var(--_v-border-normal); --pl-v-border-quiet: var(--_v-border-quiet);
    --pl-v-on-loud: var(--_v-on-loud); --pl-v-on-normal: var(--_v-on-normal); --pl-v-on-quiet: var(--_v-on-quiet);
  }
  .pl-brand { --_v-fill-loud: var(--pl-color-brand-fill-loud); --_v-fill-normal: var(--pl-color-brand-fill-normal); --_v-fill-quiet: var(--pl-color-brand-fill-quiet); --_v-border-loud: var(--pl-color-brand-border-loud); --_v-border-normal: var(--pl-color-brand-border-normal); --_v-border-quiet: var(--pl-color-brand-border-quiet); --_v-on-loud: var(--pl-color-brand-on-loud); --_v-on-normal: var(--pl-color-brand-on-normal); --_v-on-quiet: var(--pl-color-brand-on-quiet); }
  .pl-neutral { --_v-fill-loud: var(--pl-color-neutral-fill-loud); --_v-fill-normal: var(--pl-color-neutral-fill-normal); --_v-fill-quiet: var(--pl-color-neutral-fill-quiet); --_v-border-loud: var(--pl-color-neutral-border-loud); --_v-border-normal: var(--pl-color-neutral-border-normal); --_v-border-quiet: var(--pl-color-neutral-border-quiet); --_v-on-loud: var(--pl-color-neutral-on-loud); --_v-on-normal: var(--pl-color-neutral-on-normal); --_v-on-quiet: var(--pl-color-neutral-on-quiet); }
  .pl-success { --_v-fill-loud: var(--pl-color-success-fill-loud); --_v-fill-normal: var(--pl-color-success-fill-normal); --_v-fill-quiet: var(--pl-color-success-fill-quiet); --_v-border-loud: var(--pl-color-success-border-loud); --_v-border-normal: var(--pl-color-success-border-normal); --_v-border-quiet: var(--pl-color-success-border-quiet); --_v-on-loud: var(--pl-color-success-on-loud); --_v-on-normal: var(--pl-color-success-on-normal); --_v-on-quiet: var(--pl-color-success-on-quiet); }
  .pl-warning { --_v-fill-loud: var(--pl-color-warning-fill-loud); --_v-fill-normal: var(--pl-color-warning-fill-normal); --_v-fill-quiet: var(--pl-color-warning-fill-quiet); --_v-border-loud: var(--pl-color-warning-border-loud); --_v-border-normal: var(--pl-color-warning-border-normal); --_v-border-quiet: var(--pl-color-warning-border-quiet); --_v-on-loud: var(--pl-color-warning-on-loud); --_v-on-normal: var(--pl-color-warning-on-normal); --_v-on-quiet: var(--pl-color-warning-on-quiet); }
  .pl-danger { --_v-fill-loud: var(--pl-color-danger-fill-loud); --_v-fill-normal: var(--pl-color-danger-fill-normal); --_v-fill-quiet: var(--pl-color-danger-fill-quiet); --_v-border-loud: var(--pl-color-danger-border-loud); --_v-border-normal: var(--pl-color-danger-border-normal); --_v-border-quiet: var(--pl-color-danger-border-quiet); --_v-on-loud: var(--pl-color-danger-on-loud); --_v-on-normal: var(--pl-color-danger-on-normal); --_v-on-quiet: var(--pl-color-danger-on-quiet); }

  .pl-button, .pl-badge, .pl-tag, .pl-callout {
    &.pl-accent {
      --pl-a-bg: var(--pl-v-fill-loud); --pl-a-fg: var(--pl-v-on-loud); --pl-a-border: var(--pl-v-fill-loud); --pl-a-icon: var(--pl-v-on-loud);
      --pl-a-bg-hover: color-mix(in oklab, var(--pl-v-fill-loud), var(--pl-v-on-loud) 14%);
    }
    &.pl-filled {
      --pl-a-bg: var(--pl-v-fill-normal); --pl-a-fg: var(--pl-v-on-normal); --pl-a-border: var(--pl-v-fill-normal); --pl-a-icon: var(--pl-v-on-normal);
      --pl-a-bg-hover: color-mix(in oklab, var(--pl-v-fill-normal), var(--pl-v-on-normal) 10%);
    }
    &.pl-filled-outlined {
      --pl-a-bg: var(--pl-v-fill-quiet); --pl-a-fg: var(--pl-v-on-quiet); --pl-a-border: var(--pl-v-border-normal); --pl-a-icon: var(--pl-v-on-quiet);
      --pl-a-bg-hover: var(--pl-v-fill-normal);
    }
    &.pl-outlined {
      --pl-a-bg: transparent; --pl-a-fg: var(--pl-v-on-quiet); --pl-a-border: var(--pl-v-border-loud); --pl-a-icon: var(--pl-v-on-quiet);
      --pl-a-bg-hover: var(--pl-v-fill-quiet);
    }
    &.pl-plain {
      --pl-a-bg: transparent; --pl-a-fg: var(--pl-v-on-quiet); --pl-a-border: transparent; --pl-a-icon: var(--pl-v-on-quiet);
      --pl-a-bg-hover: var(--pl-v-fill-quiet);
    }
  }
  /* neutral outlined/plain read as ordinary text, not grey-tinted */
  :is(.pl-button, .pl-tag):not(.pl-brand, .pl-success, .pl-warning, .pl-danger):is(.pl-outlined, .pl-plain, .pl-filled-outlined) { --pl-a-fg: var(--pl-color-text-normal); }
  .pl-callout {
    &.pl-accent { --pl-a-fg: var(--pl-v-on-loud); }
    &.pl-filled { --pl-a-fg: var(--pl-v-on-normal); }
    &.pl-plain { padding-inline: 0; }
  }

  .pl-button, .pl-input, .pl-select, .pl-input-group, .pl-segmented {
    &.pl-small { --pl-size-h: var(--pl-control-height-s); --pl-size-fs: var(--pl-font-size-xs); --pl-size-px: var(--pl-space-s); }
    &.pl-large { --pl-size-h: var(--pl-control-height-l); --pl-size-fs: var(--pl-font-size-m); --pl-size-px: var(--pl-space-l); }
  }
  .pl-badge.pl-large { font-size: var(--pl-font-size-s); }
  .pl-pill {
    border-radius: var(--pl-radius-pill);

    .pl-button-group > &.pl-button {
      &:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
      &:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
    }
    &.pl-button.pl-icon-only { border-radius: var(--pl-radius-circle); }
  }
}

/* ───────────────────────── layout + utilities ───────────────────────── */
@layer pleat.utilities {
  .pl-stack {
    display: flex; flex-direction: column; gap: var(--gap, var(--pl-space-m));

    > * { margin-block: 0; }
  }
  .pl-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--pl-space-xs)); }
  .pl-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min-column-size, 16rem), 100%), 1fr)); gap: var(--gap, var(--pl-space-m));

    > .pl-span-grid { grid-column: 1 / -1; }
  }
  .pl-flank {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--pl-space-s));

    > :first-child { flex-basis: var(--flank-size, auto); flex-grow: 0; }
    > :last-child { flex-basis: var(--content-percentage, 50%); flex-grow: 999; min-width: 0; }
    &.pl-end {
      > :first-child { flex-basis: var(--content-percentage, 50%); flex-grow: 999; min-width: 0; }
      > :last-child { flex-basis: var(--flank-size, auto); flex-grow: 0; }
    }
  }
  .pl-split {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap, var(--pl-space-s));

    &.pl-column { flex-direction: column; align-items: stretch; }
  }
  .pl-frame {
    display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: var(--aspect-ratio, 16 / 9); border-radius: var(--radius, var(--pl-radius-m)); background: var(--pl-color-surface-lowered);

    > :is(img, video, iframe) { width: 100%; height: 100%; object-fit: cover; }
    &.pl-square { --aspect-ratio: 1; }
    &.pl-portrait { --aspect-ratio: 3 / 4; }
  }
  .pl-gap-0 { --gap: 0; } .pl-gap-3xs { --gap: var(--pl-space-3xs); } .pl-gap-2xs { --gap: var(--pl-space-2xs); }
  .pl-gap-xs { --gap: var(--pl-space-xs); } .pl-gap-s { --gap: var(--pl-space-s); } .pl-gap-m { --gap: var(--pl-space-m); }
  .pl-gap-l { --gap: var(--pl-space-l); } .pl-gap-xl { --gap: var(--pl-space-xl); } .pl-gap-2xl { --gap: var(--pl-space-2xl); } .pl-gap-3xl { --gap: var(--pl-space-3xl); }
  .pl-align-items-start { align-items: flex-start; } .pl-align-items-center { align-items: center; }
  .pl-align-items-end { align-items: flex-end; } .pl-align-items-stretch { align-items: stretch; } .pl-align-items-baseline { align-items: baseline; }
  .pl-justify-start { justify-content: flex-start; } .pl-justify-center { justify-content: center; } .pl-justify-end { justify-content: flex-end; } .pl-justify-between { justify-content: space-between; }
  .pl-text-quiet { color: var(--pl-color-text-quiet); }
  .pl-text-center { text-align: center; }
  .pl-surface-raised { background: var(--pl-color-surface-raised); }
  .pl-surface-lowered { background: var(--pl-color-surface-lowered); }
  .pl-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .pl-prose { max-width: 68ch; }
}