/* 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; }
  /* Any element can carry a theme, so native widgets inside it (date pickers, scrollbars) follow its scheme */
  [data-theme] { color-scheme: light; }
  [data-theme$="dark"] { color-scheme: dark; }
  [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; }
    /* Loading indicators must keep showing activity, so they get a gentle alternative instead of freezing. These sit
       here because important declarations in an earlier layer beat those in later ones. */
    .pl-spinner, .pl-button.pl-loading::after { animation-duration: 1.5s !important; animation-iteration-count: infinite !important; }
    .pl-skeleton { animation: pl-fade 2.4s ease-in-out infinite !important; }
    /* The indeterminate bar pulses in place, with its band centred, instead of sliding. */
    .pl-progress-bar:indeterminate { animation: pl-fade 2.4s ease-in-out infinite !important; background-position: 50% 0, 0 0 !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-color-picker {
    --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);
    position: relative; 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; }
    /* a badge sits on the top-end corner, ringed in the surface colour so it reads as separate. It is sized
       from the button's font so it scales with the button, and tucked in so it overhangs only slightly. */
    > .pl-badge {
      --pl-badge-ring: 0 0 0 2px var(--pl-color-surface-default);
      position: absolute; z-index: 2; inset-block-start: 0.4em; inset-inline-end: 0.4em; translate: 50% -50%;
      justify-content: center; min-inline-size: calc(1.5em + 2 * var(--pl-border-width-s)); padding: 0.1em 0.45em;
      font-size: 0.7em; box-shadow: var(--pl-badge-ring); pointer-events: none;

      &.pl-dot { min-inline-size: 0; }
      &:dir(rtl) { translate: -50% -50%; }
    }
    &.pl-loading {
      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; }
    }
  }

  /* Filter list */
  .pl-filter-list {
    display: flex; flex-direction: column; gap: var(--pl-space-s);

    > .pl-filter-items { display: flex; flex-direction: column; gap: var(--pl-space-2xs); margin: 0; padding: 0; list-style: none; }
    > .pl-filter-empty { margin: 0; color: var(--pl-color-text-quiet); font-size: var(--pl-font-size-s); }
  }

  /* 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;
      translate: var(--_shift, 0px) 0;
    }
    &.pl-end > .pl-menu { inset-inline-start: auto; inset-inline-end: 0; }
    /* data-pl-flip: pleat.js moved the menu to the trigger's other side to keep it on screen; --_shift nudges it in */
    &:is(.pl-top:not([data-pl-flip]), [data-pl-flip]:not(.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); }
      /* Forced colors drop box-shadows, so draw the focus ring as an outline */
      @media (forced-colors: active) {
        &:focus-visible { outline: var(--pl-border-width-m) solid Highlight; outline-offset: calc(var(--pl-border-width-m) * -1); }
      }
      > 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;

    /* The icon is placed on the first line box; translate nudges it down to the lowercase text's visual centre, which
       sits about 0.1em below the line box's centre */
    > svg, > .pl-icon { width: 1.25rem; height: 1.25rem; color: var(--pl-a-icon, currentColor); margin-top: 0.05rem; translate: 0 0.1em; }
    > :not(svg, .pl-icon, .pl-dismiss, .pl-actions) { 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; }
    /* Also when something else (a button, say) follows the last paragraph or list */
    :where(p, ul, ol):not(:has(~ :where(p, ul, ol))) { margin-bottom: 0; }
    strong:first-child { display: block; margin-bottom: var(--pl-space-3xs); }
    > .pl-actions { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pl-space-xs); }
    /* With actions, the icon, message and actions share a centre line; the callout is a container so the actions can
       drop below the message when it is narrow (see the @container rule after Toast) */
    &:has(> .pl-actions) {
      align-items: center; container-type: inline-size;

      > svg, > .pl-icon { margin-top: 0; }
    }
    &:has(> .pl-actions):has(> .pl-dismiss) { grid-template-columns: auto 1fr auto auto; }
    > .pl-dismiss {
      grid-column: -2; 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; }
    }
  }

  /* Toast: a fixed stack of callouts; the region ignores the pointer so only the toasts block clicks */
  .pl-toast {
    position: fixed; z-index: var(--pl-z-toast); inset-block-start: var(--pl-space-m); inset-inline-end: var(--pl-space-m);
    display: flex; flex-direction: column; gap: var(--pl-space-s);
    width: min(24rem, calc(100vw - 2 * var(--pl-space-m))); pointer-events: none;

    &:is(.pl-top-start, .pl-bottom-start) { inset-inline: var(--pl-space-m) auto; }
    &:is(.pl-top-center, .pl-bottom-center) { inset-inline: 0; margin-inline: auto; }
    &:is(.pl-bottom-start, .pl-bottom-center, .pl-bottom-end) { inset-block: auto var(--pl-space-m); --pl-toast-offset: 8px; }
    .pl-callout {
      pointer-events: auto; box-shadow: var(--pl-shadow-l);
      animation: pl-toast-in var(--pl-duration-slow) cubic-bezier(0.2, 0.9, 0.3, 1);

      &[data-state="closing"] { animation: pl-toast-out var(--pl-duration-normal) ease-in forwards; }
    }
    @media (prefers-reduced-motion: reduce) {
      .pl-callout, .pl-callout[data-state="closing"] { animation: none; }
    }
  }
  @container (max-width: 30rem) {
    .pl-callout:has(> .pl-actions) {
      > * { align-self: start; }
      > svg, > .pl-icon { margin-top: 0.05rem; }
      > :not(svg, .pl-icon, .pl-dismiss, .pl-actions) { grid-column-end: 4; }
      > .pl-actions { grid-column: 2 / 4; grid-row: 2; }
      > :not(svg, .pl-icon):first-child ~ .pl-actions { grid-column-start: 1; }
    }
  }

  /* 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));
    }
  }

  /* Sparkline: server-drawn inline SVG in the variant's loud fill (brand by default). The stroke doesn't scale, so the
     line stays crisp when CSS stretches the chart. */
  .pl-sparkline {
    --pl-v-fill-loud: var(--pl-color-brand-fill-loud);
    display: inline-block; flex-shrink: 0; overflow: visible; color: var(--pl-v-fill-loud); vertical-align: middle;

    > polyline { fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
    > polygon { fill: currentColor; fill-opacity: 0.2; }
    > rect { fill: currentColor; }
  }

  /* 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);
      /* display: none while hidden so the tip never widens a scroll container; allow-discrete keeps the fade */
      display: none; opacity: 0; pointer-events: none; translate: calc(-50% + var(--_shift, 0px)) 0; transform: translateY(4px);
      transition: opacity var(--pl-duration-normal), transform var(--pl-duration-normal), display var(--pl-duration-normal) allow-discrete;

      /* the arrow undoes --_shift (set by pleat.js to keep the tip on screen), so it still points at the trigger */
      &::after {
        content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; translate: calc(-1 * var(--_shift, 0px)) 0;
        border: 5px solid transparent; border-top-color: var(--pl-color-neutral-fill-loud);
      }
    }
    &:is(:hover, :focus-within):not([data-dismissed]) > .pl-content {
      display: block; opacity: 1; transform: none; transition-delay: 150ms;

      @starting-style { opacity: 0; transform: translateY(4px); }
    }
    /* below the trigger: .pl-bottom, or above-by-default flipped by pleat.js (data-pl-flip) to stay on screen */
    &:is(.pl-bottom:not([data-pl-flip]), [data-pl-flip]:not(.pl-bottom)) {
      > .pl-content {
        bottom: auto; top: calc(100% + var(--pl-space-xs)); transform: translateY(-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: none;

        @starting-style { transform: translateY(-4px); }
      }
    }
    /* Anchor to the trigger's start or end edge, for triggers near a container edge */
    &:is(.pl-start, .pl-end) > .pl-content {
      left: auto; translate: var(--_shift, 0px) 0;

      &::after { left: auto; margin-left: 0; }
    }
    &.pl-start > .pl-content {
      inset-inline-start: 0;

      &::after { inset-inline-start: var(--pl-space-s); }
    }
    &.pl-end > .pl-content {
      inset-inline-end: 0;

      &::after { inset-inline-end: var(--pl-space-s); }
    }
  }

  /* Popover (native [popover] in the top layer, anchored to its [popovertarget] trigger; pleat.js positions it
     where CSS anchor positioning is unsupported) */
  .pl-popover {
    --_side: block-start;
    --_span: span-all;
    display: contents;

    > .pl-panel {
      position: fixed; inset: auto; margin: 0; overflow: visible;
      width: max-content; max-width: min(20rem, calc(100vw - 2 * var(--pl-space-s)));
      padding: var(--pl-space-s) var(--pl-space-m);
      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); line-height: 1.5;

      &:popover-open { animation: pl-pop var(--pl-duration-normal) ease-out; }
      &:focus-visible { outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: 2px; }
      :where(p, ul, ol):last-child { margin-bottom: 0; }
    }
    &.pl-bottom { --_side: block-end; }
    &.pl-start { --_span: span-inline-end; }
    &.pl-end { --_span: span-inline-start; }

    @supports (position-area: block-start) {
      > .pl-panel { position-area: var(--_side) var(--_span); position-try-fallbacks: flip-block; margin-block-end: var(--pl-space-xs); }
      &.pl-bottom > .pl-panel { margin-block: var(--pl-space-xs) 0; }
    }

    /* Arrow points at the trigger from the panel's default side; it doesn't follow an automatic flip */
    &.pl-arrow > .pl-panel::before {
      content: ""; position: absolute; top: 100%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
      background: inherit; border: inherit; border-width: 0 var(--pl-border-width-s) var(--pl-border-width-s) 0; rotate: 45deg;
    }
    &.pl-arrow.pl-bottom > .pl-panel::before { top: auto; bottom: 100%; margin: 0 0 -5px -5px; rotate: 225deg; }
    &.pl-arrow:is(.pl-start, .pl-end) > .pl-panel::before { left: auto; margin-inline: 0; }
    &.pl-arrow.pl-start > .pl-panel::before { inset-inline-start: var(--pl-space-m); }
    &.pl-arrow.pl-end > .pl-panel::before { inset-inline-end: var(--pl-space-m); }
  }

  /* 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; }
  }
  /* The live region stays in the tree when empty; cancel the grid gap it would otherwise add */
  .pl-field-errors {
    display: grid; gap: var(--pl-space-2xs);

    .pl-field > &:empty { margin-block-start: calc(-1 * var(--pl-space-2xs)); }
  }
  /* 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;
    }
  }

  /* File input: a drop zone around a native file input. Without pleat.js the input shows as is; once pleat.js marks
     the root [data-pl-ready] the input turns invisible over the whole zone and .pl-browse + the file list take over. */
  .pl-file-input {
    display: grid; gap: var(--pl-space-xs); min-width: 0; font-size: var(--pl-font-size-s);

    &.pl-small { font-size: var(--pl-font-size-xs); }
    &.pl-large { font-size: var(--pl-font-size-m); }
  }
  .pl-drop-zone {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--pl-space-xs);
    padding: var(--pl-space-m); color: var(--pl-color-text-quiet); text-align: center;
    background: var(--pl-color-surface-raised); border: var(--pl-border-width-m) dashed var(--pl-color-neutral-border-loud); border-radius: var(--pl-radius-m);
    transition: border-color var(--pl-duration-fast), background-color var(--pl-duration-fast);

    > .pl-icon { width: 1.25em; height: 1.25em; }
    > :is(.pl-browse, .pl-drop-label) { display: none; }
    .pl-file-input[data-pl-ready] & {
      > :is(.pl-browse, .pl-drop-label) { display: revert; }
      > .pl-browse { display: inline-flex; }
      > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
      > input::file-selector-button { cursor: pointer; }
      &:hover, &[data-dragging] { border-color: var(--pl-color-brand-border-loud); }
      &[data-dragging] { background: var(--pl-color-brand-fill-quiet); }
      &:has(input:focus-visible) { outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: 2px; }
    }
    &:has(input:disabled) { opacity: 0.6; pointer-events: none; }
    &:has(input[aria-invalid="true"]), .pl-field.pl-invalid & { border-color: var(--pl-color-danger-border-loud); }
  }
  .pl-file-list {
    display: grid; gap: var(--pl-space-2xs); margin: 0; padding: 0; list-style: none;

    > li {
      display: flex; align-items: center; gap: var(--pl-space-xs); min-width: 0; padding: var(--pl-space-2xs) var(--pl-space-xs);
      background: var(--pl-color-surface-lowered); border-radius: var(--pl-radius-s);
    }
    .pl-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pl-file-size { color: var(--pl-color-text-quiet); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pl-remove {
      display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; padding: 0; flex-shrink: 0;
      border: 0; border-radius: var(--pl-radius-s); background: none; color: var(--pl-color-text-quiet); cursor: pointer;

      &:hover { color: var(--pl-color-text-normal); background: var(--pl-color-neutral-fill-quiet); }
      svg { width: 1em; height: 1em; }
    }
  }

  /* Date picker: month grid; a range is tinted between its filled ends */
  .pl-date-picker {
    display: inline-grid; gap: var(--pl-space-xs); padding: var(--pl-space-s); font-size: var(--pl-font-size-s);
    background: var(--pl-color-surface-raised); border: var(--pl-border-width-s) solid var(--pl-color-surface-border); border-radius: var(--pl-radius-m);

    > .pl-header { display: flex; align-items: center; justify-content: space-between; gap: var(--pl-space-xs); }
    .pl-month { font-weight: 600; }
    table { border-collapse: separate; border-spacing: 0; }
    th { padding: 0 0 var(--pl-space-2xs); color: var(--pl-color-text-quiet); font-size: var(--pl-font-size-xs); font-weight: inherit; text-align: center; }
    td { padding: 1px 0; text-align: center; }
    td > button {
      width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--pl-radius-s);
      background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;

      &:hover { background: var(--pl-color-neutral-fill-quiet); }
      &[aria-current="date"] { font-weight: 600; box-shadow: inset 0 0 0 var(--pl-border-width-s) var(--pl-color-neutral-border-loud); }
      &[aria-disabled="true"] { background: none; color: var(--pl-color-text-quiet); opacity: 0.5; cursor: not-allowed; }
    }
    td:is(.pl-range-start, .pl-in-range, .pl-range-end) { background: var(--pl-color-brand-fill-quiet); }
    td.pl-range-start { border-start-start-radius: var(--pl-radius-s); border-end-start-radius: var(--pl-radius-s); }
    td.pl-range-end { border-start-end-radius: var(--pl-radius-s); border-end-end-radius: var(--pl-radius-s); }
    td.pl-in-range > button { color: var(--pl-color-brand-on-quiet); }
    td[aria-selected="true"]:not(.pl-in-range) > button { background: var(--pl-color-brand-fill-loud); color: var(--pl-color-brand-on-loud); }
  }

  /* 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; min-height: 0; height: calc(var(--pl-size-h) - 2px); padding: 0; border: 0; background: none; font: inherit; color: inherit; outline: none; }
    > input:focus { outline: none; }
    > :is(svg, .pl-icon), > .pl-affix > :is(svg, .pl-icon) { width: 1.1em; height: 1.1em; color: var(--pl-color-text-quiet); flex-shrink: 0; }
    > .pl-affix { display: inline-flex; align-items: center; color: var(--pl-color-text-quiet); white-space: nowrap; }
    &.pl-pill { padding-inline: var(--pl-size-px); }
    > .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); }
  }

  /* Tag input: an input group that wraps its tags. Until pleat.js marks it [data-pl-ready] the tags stay hidden and
     the entry is a plain comma-separated field. */
  .pl-tag-input {
    flex-wrap: wrap; gap: var(--pl-space-2xs); padding-block: 0.1875rem;

    > [data-pl-tag-entry] { flex: 1 0 6rem; height: calc(var(--pl-size-h) - 2px - 0.375rem); }
    &:not([data-pl-ready]) > .pl-tag { display: none; }
    &[data-pl-ready]:has(> .pl-tag) { padding-inline-start: var(--pl-space-2xs); }
    &:has(> [data-pl-tag-entry]:disabled) { opacity: 0.6; cursor: not-allowed; background: var(--pl-color-surface-lowered); }
  }

  /* Combobox: a text input over a filterable listbox popup, shown once pleat.js marks it [data-pl-ready] */
  .pl-combobox {
    position: relative;

    > .pl-combobox-popup {
      position: absolute; z-index: var(--pl-z-dropdown); top: calc(100% + var(--pl-space-2xs)); inset-inline: 0;
      max-height: 16rem; overflow-y: auto;
    }
    > .pl-combobox-popup > ul { margin: 0; padding: 0; list-style: none; }
    > .pl-combobox-popup .pl-filter-empty { margin: 0; padding: var(--pl-space-xs) var(--pl-space-s); color: var(--pl-color-text-quiet); }
    [role="option"][data-pl-active] { background: var(--pl-color-neutral-fill-quiet); box-shadow: inset 0 0 0 var(--pl-border-width-m) var(--pl-color-focus); }
    @media (forced-colors: active) {
      [role="option"][data-pl-active] { outline: var(--pl-border-width-m) solid Highlight; outline-offset: calc(var(--pl-border-width-m) * -1); }
    }
    [role="option"][aria-selected="true"] { font-weight: var(--pl-font-weight-semibold); }
    &[data-pl-flip] > .pl-combobox-popup { top: auto; bottom: calc(100% + var(--pl-space-2xs)); }
    &:not([data-pl-ready]) > .pl-combobox-popup { display: none; }
  }

  /* Number input: stepper buttons either side replace the native spinners */
  .pl-number-input {
    padding: 0 var(--pl-space-2xs);

    > input { text-align: center; -moz-appearance: textfield; appearance: textfield; }
    > input::-webkit-inner-spin-button, > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    > .pl-button { width: calc(var(--pl-size-h) - 0.5rem); margin: 0; padding: 0; }
    &:has(> input:disabled) { opacity: 0.6; cursor: not-allowed; background: var(--pl-color-surface-lowered); }
  }

  /* Date + time inputs: native pickers, with the picker indicator redrawn as a Lucide icon in the text colour */
  .pl-input:is([type="date"], [type="time"], [type="datetime-local"]) {
    --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    font-variant-numeric: tabular-nums;

    &[type="time"] { --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
    &::-webkit-date-and-time-value { text-align: start; }
    &::-webkit-calendar-picker-indicator {
      width: 1.1em; height: 1.1em; padding: 0; cursor: pointer; background: var(--pl-color-text-quiet);
      -webkit-mask: var(--_icon) center / contain no-repeat; mask: var(--_icon) center / contain no-repeat;
    }
    &:hover::-webkit-calendar-picker-indicator { background: var(--pl-color-text-normal); }
    &:disabled::-webkit-calendar-picker-indicator { cursor: not-allowed; }
  }

  /* Known date: separate day, month and year fields in a fieldset */
  .pl-known-date {
    margin: 0; padding: 0; border: 0;

    > legend { padding: 0; margin-bottom: var(--pl-space-2xs); }
  }
  .pl-known-date-parts {
    display: flex; flex-wrap: wrap; gap: var(--pl-space-s);

    .pl-label { font-weight: var(--pl-font-weight-normal); }
    .pl-input { width: calc(3ch + var(--pl-space-s) * 2); font-variant-numeric: tabular-nums; }
    .pl-known-date-year .pl-input { width: calc(5ch + var(--pl-space-s) * 2); }
  }

  /* Color picker: a native color input drawn as a swatch, an optional hex field and preset swatches (radios) */
  .pl-color-picker {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--pl-space-xs);

    > .pl-input { width: 7.5em; font-family: var(--font-pleat-mono); text-transform: lowercase; }
    &:has(> .pl-swatch:disabled) { opacity: 0.6; }
    &:has(> .pl-swatch:disabled) > * { opacity: 1; cursor: not-allowed; }
  }
  .pl-swatch {
    -webkit-appearance: none; appearance: none; flex-shrink: 0; width: var(--pl-size-h); height: var(--pl-size-h); padding: 3px;
    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);
    cursor: pointer; transition: border-color var(--pl-duration-fast);

    &::-webkit-color-swatch-wrapper { padding: 0; }
    &::-webkit-color-swatch { border: 0; border-radius: calc(var(--pl-radius-m) - 3px); }
    &::-moz-color-swatch { border: 0; border-radius: calc(var(--pl-radius-m) - 3px); }
    &:hover { border-color: var(--pl-color-text-quiet); }
    &:focus-visible { outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: 2px; }
    &[aria-invalid="true"], .pl-field.pl-invalid & { border-color: var(--pl-color-danger-border-loud); }
  }
  .pl-swatches {
    display: flex; flex-wrap: wrap; gap: var(--pl-space-2xs);

    > [role="radio"] {
      width: calc(var(--pl-size-h) * 0.75); height: calc(var(--pl-size-h) * 0.75); padding: 0; cursor: pointer;
      background: var(--color); border: var(--pl-border-width-s) solid color-mix(in oklab, var(--color), var(--pl-color-text-normal) 25%);
      border-radius: var(--pl-radius-s);

      &[aria-checked="true"] { outline: var(--pl-border-width-m) solid var(--pl-color-text-normal); outline-offset: 2px; }
      &:focus-visible { outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: 2px; }
    }
  }

  /* 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;
  }

  /* OTP input: one real input; pleat.js adds aria-hidden .pl-segments after it that mirror its value */
  .pl-otp-input {
    display: inline-grid; gap: var(--pl-space-2xs); justify-items: start; min-width: 0;

    > input {
      width: calc(var(--length, 6) * 1.6ch + 2 * var(--pl-space-s) + 2px); font-family: var(--font-pleat-mono); letter-spacing: 0.6ch;
    }
    > input, > .pl-segments { grid-area: 2 / 1; }
    > .pl-segments { display: flex; gap: var(--pl-space-xs); pointer-events: none; }
    > .pl-segments > span {
      display: grid; place-items: center; width: 2.5rem; height: var(--pl-control-height-l);
      font-size: var(--pl-font-size-l); font-weight: var(--pl-font-weight-semibold); 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);
    }
    &:has(> .pl-segments) > input {
      &, &:hover, &:focus { width: 0; min-width: 100%; height: auto; min-height: 0; align-self: stretch; padding: 0; color: transparent; caret-color: transparent; background: none; border-color: transparent; outline: none; }
      &::selection { background: transparent; }
    }
    > input:hover ~ .pl-segments > span { border-color: var(--pl-color-text-quiet); }
    > input:focus ~ .pl-segments > .pl-active { outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: -1px; border-color: var(--pl-color-focus); }
    > input[aria-invalid="true"] ~ .pl-segments > span, .pl-field.pl-invalid & > .pl-segments > span { border-color: var(--pl-color-danger-border-loud); }
    > input:disabled ~ .pl-segments { opacity: 0.6; }
    > input:is(:disabled, [readonly]) ~ .pl-segments > span { background: var(--pl-color-surface-lowered); }
  }

  /* 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; justify-content: flex-end; flex-wrap: wrap; 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); }

  /* Tree: nested lists of rows, each level indented behind a guide line under its parent's caret. Navigation trees
     open with details/summary; selectable trees (role=tree) hide the group of a collapsed treeitem. */
  .pl-tree {
    font-size: var(--pl-font-size-s);

    &:is(ul), ul { list-style: none; margin: 0; padding: 0; }
    li ul { margin-inline-start: calc(var(--pl-space-xs) + 0.5rem); padding-inline-start: var(--pl-space-2xs); border-inline-start: var(--pl-border-width-s) solid var(--pl-color-surface-border); }
    [aria-expanded="false"] > [role="group"] { display: none; }
    [role="treeitem"] { outline: none; }
    .pl-tree-row {
      display: flex; align-items: center; gap: var(--pl-space-2xs); padding: var(--pl-space-3xs) var(--pl-space-xs); border-radius: var(--pl-radius-s);
      color: var(--pl-color-text-normal); text-decoration: none; list-style: none; cursor: pointer;

      &::-webkit-details-marker { display: none; }
      &:hover { background: var(--pl-color-neutral-fill-quiet); }
      &:is(span) { cursor: default; }
      &:is(span):hover { background: none; }
      &[aria-disabled="true"] { color: var(--pl-color-text-quiet); }
      &:is([aria-current="page"], :has(> [aria-current="page"])) { font-weight: var(--pl-font-weight-semibold); }
      > .pl-caret { flex-shrink: 0; width: 1rem; height: 1rem; color: var(--pl-color-text-quiet); transition: rotate var(--pl-duration-normal); }
      > .pl-label { min-width: 0; overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
      &:dir(rtl) > .pl-caret { scale: -1 1; }
    }
    :is(details[open] > summary, [aria-expanded="true"] > .pl-tree-row) > .pl-caret { rotate: 90deg; }
    :is(details[open] > summary, [aria-expanded="true"] > .pl-tree-row):dir(rtl) > .pl-caret { rotate: -90deg; }
    [aria-selected="true"] > .pl-tree-row { background: var(--pl-color-brand-fill-quiet); color: var(--pl-color-brand-on-quiet); }
    [aria-disabled="true"] > .pl-tree-row { color: var(--pl-color-text-quiet); cursor: default; }
    [role="treeitem"]:focus-visible > .pl-tree-row { box-shadow: inset 0 0 0 var(--pl-border-width-m) var(--pl-color-focus); }
    @media (forced-colors: active) {
      [role="treeitem"]:focus-visible > .pl-tree-row { outline: var(--pl-border-width-m) solid Highlight; outline-offset: calc(var(--pl-border-width-m) * -1); }
    }
  }

  /* Dialog + drawer (native <dialog>); parts may sit inside a <form method="dialog"> */
  .pl-dialog, .pl-drawer {
    /* set when closed too, so the content keeps its layout while the closing transition holds display: flex */
    flex-direction: column; 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; }
    /* Closing reverses the opening animation, only where `overlay` can keep the dialog in the top layer until the
       transition ends; elsewhere it would drop out of place mid-fade, so it closes instantly */
    @supports (overlay: auto) {
      transition:
        opacity var(--pl-duration-normal) ease-in, transform var(--pl-duration-normal) ease-in,
        display var(--pl-duration-normal) allow-discrete, overlay var(--pl-duration-normal) allow-discrete;

      &::backdrop {
        transition:
          opacity var(--pl-duration-normal) ease-in,
          display var(--pl-duration-normal) allow-discrete, overlay var(--pl-duration-normal) allow-discrete;
      }
      &:not([open])::backdrop { opacity: 0; }
    }
    &, > 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 {
        /* min-height lets the body shrink and scroll; position keeps absolute children (e.g. live regions) clipped */
        position: relative; min-height: 0; 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; animation: pl-dialog-in var(--pl-duration-slow) cubic-bezier(0.2, 0.9, 0.3, 1); }
    @supports (overlay: auto) {
      &:not([open]) { opacity: 0; transform: translateY(8px) scale(0.97); }
    }
  }
  .pl-drawer {
    --_size: var(--size, min(26rem, 90vw));
    --_hidden: translateX(100%);
    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; animation: pl-drawer-in var(--pl-duration-slow) cubic-bezier(0.2, 0.9, 0.3, 1); }
    @supports (overlay: auto) {
      &:not([open]) { transform: var(--_hidden); }
    }
    &.pl-start {
      --_hidden: translateX(-100%);
      inset: 0 auto 0 0; border-inline-start: 0; border-inline-end-width: var(--pl-border-width-s);
    }
    &.pl-bottom {
      --_hidden: translateY(100%);
      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;
    }
    &.pl-top {
      --_hidden: translateY(-100%);
      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);
    }
    &.pl-contained { position: absolute; height: 100%; }
  }

  /* Page: application shell. The navigation is a start drawer that sits in the grid as a sidebar until pleat.js
     sets data-pl-view="mobile" below data-pl-mobile-breakpoint; then it opens from .pl-navigation-toggle */
  .pl-page {
    --_header-height: var(--header-height, 3.5rem);
    display: grid; min-height: 100dvh; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header header" "navigation main aside" "footer footer footer";

    > .pl-skip-link {
      position: fixed; z-index: var(--pl-z-tooltip); top: var(--pl-space-xs); inset-inline-start: var(--pl-space-xs); padding: var(--pl-space-xs) var(--pl-space-s);
      border-radius: var(--pl-radius-m); background: var(--pl-color-surface-raised); color: var(--pl-color-text-link); box-shadow: var(--pl-shadow-m);
      transform: translateY(calc(-100% - var(--pl-space-m)));

      &:focus { transform: none; }
    }
    > .pl-header {
      grid-area: header; display: flex; align-items: center; gap: var(--pl-space-s); min-height: var(--_header-height); padding: 0 var(--pl-space-l);
      border-bottom: var(--pl-border-width-s) solid var(--pl-color-surface-border); background: var(--pl-color-surface-default);
    }
    > .pl-navigation {
      grid-area: navigation; display: flex; flex-direction: column; position: static; inset: auto; width: var(--navigation-width, 16rem); height: auto;
      border: 0; border-inline-end: var(--pl-border-width-s) solid var(--pl-color-surface-border); background: none; color: inherit; box-shadow: none;

      > .pl-header { display: none; }
      > .pl-body { padding: var(--pl-space-m); }
    }
    > .pl-main { grid-area: main; min-width: 0; padding: var(--pl-space-l); outline: 0; }
    > .pl-aside { grid-area: aside; width: var(--aside-width, 18rem); padding: var(--pl-space-l); border-inline-start: var(--pl-border-width-s) solid var(--pl-color-surface-border); }
    > .pl-footer { grid-area: footer; padding: var(--pl-space-m) var(--pl-space-l); border-top: var(--pl-border-width-s) solid var(--pl-color-surface-border); color: var(--pl-color-text-quiet); }
    &.pl-sticky-header > .pl-header { position: sticky; top: 0; z-index: var(--pl-z-dropdown); }
    &.pl-sticky-header :target { scroll-margin-top: calc(var(--_header-height) + var(--pl-space-s)); }
    &:not([data-pl-view="mobile"]) {
      /* a sidebar here, so it stays in place rather than taking the closed drawer's position */
      > .pl-navigation { transform: none; transition: none; }
      &.pl-sticky-navigation > .pl-navigation, &.pl-sticky-aside > .pl-aside {
        --_top: 0px;
        position: sticky; top: var(--_top); align-self: start; max-height: calc(100dvh - var(--_top)); overflow-y: auto;
      }
      &.pl-sticky-header > :is(.pl-navigation, .pl-aside) { --_top: var(--_header-height); }
    }
    &:not([data-pl-view="mobile"]) .pl-navigation-toggle, &:not(:has(> .pl-navigation)) .pl-navigation-toggle { display: none; }
    &[data-pl-view="mobile"] {
      grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "aside" "footer"; grid-template-rows: auto 1fr auto auto;

      > .pl-header { padding-inline: var(--pl-space-s) var(--pl-space-m); }
      > .pl-navigation {
        display: none; position: fixed; inset: 0 auto 0 0; width: var(--size, min(20rem, 85vw)); height: 100dvh;
        border-inline-end: 0; background: var(--pl-color-surface-raised); box-shadow: var(--pl-shadow-l);

        &[open] { display: flex; }
        > .pl-header { display: flex; }
        > .pl-body { text-align: var(--text-align, center); }
      }
      > .pl-main { padding: var(--pl-space-m); }
      > .pl-aside { width: auto; padding: var(--pl-space-m); border-inline-start: 0; border-top: var(--pl-border-width-s) solid var(--pl-color-surface-border); }
    }
  }

  /* Toolbar: page or section header, a title on one side and actions on the other; wraps when tight */
  .pl-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap, var(--pl-space-s));

    > .pl-title { min-width: 0; margin: 0; font-size: var(--pl-font-size-xl); overflow-wrap: anywhere; }
    > .pl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pl-space-xs); margin-inline-start: auto; }
    &.pl-raised {
      padding: var(--pl-space-s) var(--pl-space-m); background: var(--pl-color-surface-raised);
      border: var(--pl-border-width-s) solid var(--pl-color-surface-border); border-radius: var(--pl-radius-m); box-shadow: var(--pl-shadow-s);
    }
  }

  /* 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; }
  }

  /* Scroller: a focusable scroll region whose edges fade where more content is hidden. Scroll-driven animations
     show the fades; elsewhere pleat.js sets data-pl-more-start / data-pl-more-end on the wrapper. --color is the
     surface the fade blends into, --size its depth. */
  .pl-scroller {
    --_from: left; --_to: right;
    position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; timeline-scope: --pl-scroller;

    &:dir(rtl) { --_from: right; --_to: left; }
    &.pl-vertical { --_from: top; --_to: bottom; }
    &::before, &::after {
      content: ""; position: absolute; z-index: 1; inset-block: 0; width: var(--size, var(--pl-space-l)); opacity: 0; pointer-events: none;
      transition: opacity 0.15s; background: linear-gradient(to var(--_to), var(--color, var(--pl-color-surface-default)), transparent);
    }
    &::before { inset-inline-start: 0; }
    &::after { inset-inline-end: 0; background: linear-gradient(to var(--_from), var(--color, var(--pl-color-surface-default)), transparent); }
    &.pl-vertical::before, &.pl-vertical::after { inset-inline: 0; inset-block: auto; width: auto; height: var(--size, var(--pl-space-l)); }
    &.pl-vertical::before { top: 0; }
    &.pl-vertical::after { bottom: 0; }
    &[data-pl-more-start]::before, &[data-pl-more-end]::after { opacity: 1; }

    > .pl-scroller-content {
      flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-timeline: --pl-scroller inline;

      > :last-child { margin-bottom: 0; }
      /* a TabNav inside lets the scroller do the scrolling, keeping its rule under every tab */
      > .pl-tab-list { min-width: max-content; overflow: visible; }
    }
    &.pl-vertical > .pl-scroller-content { overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: auto; scroll-timeline: --pl-scroller block; }
  }
  @supports (timeline-scope: --pl-scroller) and (animation-timeline: --pl-scroller) {
    .pl-scroller {
      &::before, &::after { transition: none; animation: pl-scroller-fade linear both; animation-timeline: --pl-scroller; }
      &::before { animation-range: 0 var(--size, var(--pl-space-l)); }
      &::after { animation-direction: reverse; animation-range: calc(100% - var(--size, var(--pl-space-l))) 100%; }
    }
  }
  @keyframes pl-scroller-fade { from { opacity: 0; } to { opacity: 1; } }

  /* Table: <table class="pl-table [pl-striped] [pl-bordered] [pl-compact] [pl-sticky-header]">; th/td.pl-numeric align
     numbers to the end. Sortable headers hold a.pl-sort and carry aria-sort when sorted; td.pl-select holds the row
     checkbox. In a Scroller the region scrolls both ways and --max-height bounds it so a sticky header can stick. */
  .pl-table {
    margin: 0;

    th, td { vertical-align: middle; }
    caption { caption-side: top; padding: 0 0 var(--pl-space-xs); color: var(--pl-color-text-normal); font-size: var(--pl-font-size-m); font-weight: var(--pl-font-weight-semibold); }
    thead th { white-space: nowrap; }
    tbody tr:hover { background: var(--pl-color-surface-lowered); }
    tbody tr:has(.pl-select input:checked) { background: var(--pl-color-brand-fill-quiet); }
    .pl-numeric { text-align: end; font-variant-numeric: tabular-nums; }
    .pl-select { width: 1px; padding-inline-end: 0; }
    .pl-select .pl-checkbox { display: block; }
    .pl-empty { padding: var(--pl-space-xl) var(--pl-space-s); text-align: center; color: var(--pl-color-text-quiet); }
    .pl-sort {
      display: inline-flex; align-items: center; gap: var(--pl-space-2xs); color: inherit; text-decoration: none;

      &:hover { color: var(--pl-color-text-link); }
    }
    .pl-sort-icon { width: 1em; height: 1em; opacity: 0; transition: opacity 0.15s, rotate 0.15s; }
    .pl-sort:is(:hover, :focus-visible) .pl-sort-icon { opacity: 0.5; }
    [aria-sort] .pl-sort-icon { opacity: 1; }
    [aria-sort="ascending"] .pl-sort-icon { rotate: 180deg; }
    &.pl-striped tbody tr:nth-child(even):not(:hover, :has(.pl-select input:checked)) { background: var(--pl-color-surface-lowered); }
    &.pl-bordered :is(th, td) { border: var(--pl-border-width-s) solid var(--pl-color-surface-border); }
    &.pl-compact :is(th, td) { padding: var(--pl-space-3xs) var(--pl-space-xs); }
    &.pl-sticky-header thead th { position: sticky; top: 0; z-index: 1; }
  }
  .pl-scroller > .pl-scroller-content:has(> .pl-table) { overflow: auto; max-height: var(--max-height, none); }

  /* Carousel: a scroll-snap track of slides that scrolls by touch, trackpad or scrollbar without JS. pleat.js shows
     the controls row (autoplay button, previous/next, a dot per page) and hides the scrollbar. --slides-per-page sets
     how many slides show at once, --gap the space between them. */
  .pl-carousel {
    --_per-page: var(--slides-per-page, 1); --_gap: var(--gap, var(--pl-space-m));
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; row-gap: var(--pl-space-s); min-width: 0;

    > .pl-carousel-track {
      grid-column: 1 / -1; display: grid; grid-auto-flow: column; gap: var(--_gap);
      grid-auto-columns: calc((100% - (var(--_per-page) - 1) * var(--_gap)) / var(--_per-page));
      overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;

      > .pl-carousel-item { min-width: 0; scroll-snap-align: start; }
    }
    > .pl-carousel-play { grid-row: 2; grid-column: 1; justify-self: start; }
    > .pl-carousel-nav { grid-row: 2; grid-column: 2; display: flex; align-items: center; gap: var(--pl-space-xs); }
    &:not([data-pl-ready]) > :is(.pl-carousel-play, .pl-carousel-nav) { display: none; }
    &[data-pl-ready] > .pl-carousel-track { scrollbar-width: none; &::-webkit-scrollbar { display: none; } }
    &[data-pl-paused] > .pl-carousel-play > .pl-icon:first-child,
    &:not([data-pl-paused]) > .pl-carousel-play > .pl-icon:last-child { display: none; }

    .pl-carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pl-space-2xs); }
    .pl-carousel-dot {
      inline-size: 0.625rem; block-size: 0.625rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
      background: var(--pl-color-neutral-fill-normal);

      &:hover { background: var(--pl-color-neutral-fill-loud); }
      &[aria-current="true"] { background: var(--pl-color-brand-fill-loud); }
    }
  }
  @media (forced-colors: active) {
    .pl-carousel .pl-carousel-dot { border: 1px solid ButtonText; &[aria-current="true"] { background: Highlight; } }
  }

  /* 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)); }
  }
  /* Split panel: two panels either side of a draggable separator; --position (a percentage) sizes the start panel.
     The handle is a thin line with a wider invisible hit area. */
  .pl-split-panel {
    display: grid; grid-template-columns: minmax(0, var(--position, 50%)) auto minmax(0, 1fr);

    > .pl-panel { min-width: 0; min-height: 0; overflow: auto; }
    > .pl-handle {
      position: relative; width: var(--pl-border-width-m); background: var(--pl-color-surface-border); cursor: col-resize; touch-action: none;

      &::before { content: ""; position: absolute; inset: 0 calc(var(--pl-space-xs) * -1); }
      &:hover, &[data-dragging] { background: var(--pl-color-brand-fill-loud); }
      &:focus-visible { outline-offset: 0; }
    }
    &.pl-vertical {
      grid-template-columns: none; grid-template-rows: minmax(0, var(--position, 50%)) auto minmax(0, 1fr);

      > .pl-handle { width: auto; height: var(--pl-border-width-m); cursor: row-resize; }
      > .pl-handle::before { inset: calc(var(--pl-space-xs) * -1) 0; }
    }
    &:has(> .pl-handle[data-dragging]) { user-select: none; }
  }
  /* Comparison: the before item is stacked over the after item and clipped to --position from the inline start. A
     transparent range input covers both, so dragging anywhere or pressing arrows moves the divider. */
  .pl-comparison {
    position: relative; display: grid; overflow: hidden; isolation: isolate;

    > .pl-before, > .pl-after { grid-area: 1 / 1; min-width: 0; }
    > :is(.pl-before, .pl-after) > :is(img, picture, video, svg, canvas) { display: block; width: 100%; height: 100%; object-fit: cover; }
    > .pl-before { z-index: 1; clip-path: inset(0 calc(100% - var(--position, 50%)) 0 0); }
    &:dir(rtl) > .pl-before { clip-path: inset(0 0 0 calc(100% - var(--position, 50%))); }
    > .pl-handle {
      position: absolute; z-index: 2; inset-block: 0; inset-inline-start: var(--position, 50%); width: var(--pl-border-width-m); margin-inline-start: calc(var(--pl-border-width-m) / -2); background: var(--pl-color-surface-raised); box-shadow: var(--pl-shadow-s); pointer-events: none;

      &::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--pl-space-l); height: var(--pl-space-l); translate: -50% -50%; border: var(--pl-border-width-m) solid var(--pl-color-surface-raised); border-radius: var(--pl-radius-circle); background: var(--pl-color-text-normal); box-shadow: var(--pl-shadow-s); }
    }
    > input {
      position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; appearance: none; cursor: ew-resize; touch-action: pan-y;

      &::-webkit-slider-thumb { appearance: none; width: 1px; height: 100%; }
      &::-moz-range-thumb { width: 1px; height: 100%; border: 0; }
    }
    &:has(> input:focus-visible) > .pl-handle::after { outline: var(--pl-border-width-m) solid var(--pl-color-focus); outline-offset: 2px; }
  }

  .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); }
    :is(a, [aria-current="page"]) { display: inline-flex; align-items: center; gap: var(--pl-space-2xs); }
    a {
      color: var(--pl-color-text-quiet); text-decoration: none;

      &: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; }
  }

  /* Pagination: <nav class="pl-pagination"> of buttons; the current page carries aria-current="page" */
  .pl-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--pl-space-2xs);

    .pl-ellipsis { padding: 0 var(--pl-space-2xs); color: var(--pl-color-text-quiet); }
  }

  /* Stepper: <nav class="pl-stepper [pl-vertical]"><ol> of li.pl-step.pl-completed|.pl-current|.pl-upcoming, the current
     one aria-current="step". Horizontal steps share the width, joined by a line between markers; in a narrow container
     only the current step keeps its visible title. */
  .pl-stepper {
    --marker: 2rem;
    container-type: inline-size;

    ol { display: flex; margin: 0; padding: 0; list-style: none; }
    .pl-step { position: relative; flex: 1 1 0; min-width: 0; margin: 0; }
    .pl-step:not(:last-child)::after {
      content: ""; position: absolute; top: calc(var(--marker) / 2 - var(--pl-border-width-m) / 2); height: var(--pl-border-width-m);
      inset-inline: calc(50% + var(--marker) / 2 + var(--pl-space-2xs)) calc(-50% + var(--marker) / 2 + var(--pl-space-2xs));
      background: var(--pl-color-neutral-border-normal);
    }
    .pl-completed:not(:last-child)::after { background: var(--pl-color-brand-fill-loud); }
    .pl-step-target { display: flex; flex-direction: column; align-items: center; gap: var(--pl-space-xs); color: inherit; text-align: center; text-decoration: none; }
    a.pl-step-target:hover .pl-step-title { color: var(--pl-color-text-link); text-decoration: underline; }
    .pl-step-marker {
      display: inline-grid; place-items: center; flex-shrink: 0; width: var(--marker); height: var(--marker); box-sizing: border-box;
      border: var(--pl-border-width-m) solid var(--pl-color-neutral-border-normal); border-radius: var(--pl-radius-circle);
      background: var(--pl-color-surface-default); color: var(--pl-color-text-quiet); font-size: var(--pl-font-size-s); font-weight: var(--pl-font-weight-semibold); line-height: 1;
    }
    .pl-step-body { display: flex; flex-direction: column; gap: var(--pl-space-3xs); min-width: 0; overflow-wrap: anywhere; }
    .pl-step-title { color: var(--pl-color-text-quiet); font-size: var(--pl-font-size-s); font-weight: var(--pl-font-weight-medium); }
    .pl-step-description { color: var(--pl-color-text-quiet); font-size: var(--pl-font-size-xs); }
    .pl-completed .pl-step-marker { border-color: var(--pl-color-brand-fill-loud); background: var(--pl-color-brand-fill-loud); color: var(--pl-color-brand-on-loud); }
    .pl-completed .pl-step-title { color: var(--pl-color-text-normal); }
    .pl-current .pl-step-marker { border-color: var(--pl-color-brand-fill-loud); background: var(--pl-color-brand-fill-quiet); color: var(--pl-color-brand-on-quiet); }
    .pl-current .pl-step-title { color: var(--pl-color-text-normal); font-weight: var(--pl-font-weight-semibold); }

    &.pl-vertical {
      ol { flex-direction: column; }
      .pl-step { flex: none; }
      .pl-step:not(:last-child) { padding-bottom: var(--pl-space-l); }
      .pl-step:not(:last-child)::after {
        top: calc(var(--marker) + var(--pl-space-2xs)); bottom: var(--pl-space-2xs); height: auto; width: var(--pl-border-width-m);
        inset-inline: calc(var(--marker) / 2 - var(--pl-border-width-m) / 2) auto;
      }
      .pl-step-target { flex-direction: row; align-items: flex-start; gap: var(--pl-space-s); text-align: start; }
      .pl-step-body { padding-top: calc((var(--marker) - 1lh) / 2); }
    }
  }
  @container (max-width: 36rem) {
    .pl-stepper:not(.pl-vertical) {
      .pl-step:not(.pl-current) .pl-step-body, .pl-step-description { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    }
  }

  /* 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); }
  }

  /* Animated image: a GIF or WEBP that pleat.js can pause. While [data-pl-paused] an aria-hidden canvas holding the
     first frame covers the image (which stays in place for its alt text); until the frame is drawn the image is
     hidden. The play/pause button sits in the end corner. */
  .pl-animated-image {
    position: relative; display: inline-block; max-width: 100%; vertical-align: middle;

    /* natural size unless the wrapper is given a width */
    > img { display: block; width: 100%; height: auto; }
    > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
    &[data-pl-paused] > canvas { display: block; }
    &[data-pl-paused]:not(:has(> canvas)) > img { opacity: 0; }
    > .pl-animated-image-toggle {
      position: absolute; inset-block-end: var(--pl-space-xs); inset-inline-end: var(--pl-space-xs); z-index: 1;
      border-radius: var(--pl-radius-circle); box-shadow: var(--pl-shadow-s);
    }
    .pl-pause-icon { display: none; }
    &:not([data-pl-paused]) {
      .pl-play-icon { display: none; }
      .pl-pause-icon { display: inline-block; }
    }
  }

  /* Zoomable frame: an iframe drawn at --zoom. The iframe is laid out at 100% / --zoom and scaled back to fill the
     frame, so zooming out shows more of the page and zooming in shows less, which the iframe scrolls to pan. 16:9
     unless the frame is given a height. The zoom buttons sit in the end corner. */
  .pl-zoomable-frame {
    position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
    border: var(--pl-border-width-s) solid var(--pl-color-surface-border); border-radius: var(--pl-radius-m);
    background: var(--pl-color-surface-default);

    /* physical edges to match the transform origin in either direction */
    > iframe {
      position: absolute; top: 0; left: 0; width: calc(100% / var(--zoom, 1)); height: calc(100% / var(--zoom, 1));
      border: 0; transform: scale(var(--zoom, 1)); transform-origin: 0 0;
    }
    &.pl-non-interactive > iframe { pointer-events: none; user-select: none; }
    > .pl-zoomable-frame-controls {
      position: absolute; inset-block-end: var(--pl-space-xs); inset-inline-end: var(--pl-space-xs); z-index: 1;
      border-radius: var(--pl-radius-m); box-shadow: var(--pl-shadow-s);
    }
  }

  /* 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; }
  }

  /* QR code: dark modules on a light ground in every theme, since many scanners can't read inverted codes */
  .pl-qr-code {
    display: block; max-width: 100%; height: auto; color: var(--fill, #000);

    > .pl-background { fill: var(--background, #fff); }
  }

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

  /* Format bytes, date, number */
  .pl-format-bytes, .pl-format-number { 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: var(--pl-badge-ring, 0 0 transparent), 0 0 0 0 color-mix(in oklab, var(--pl-a-bg) 60%, transparent); } 70%, 100% { box-shadow: var(--pl-badge-ring, 0 0 transparent), 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-toast-in { from { opacity: 0; transform: translateY(var(--pl-toast-offset, -8px)) scale(0.97); } }
  @keyframes pl-toast-out { to { opacity: 0; transform: scale(0.95); } }
  @keyframes pl-drawer-in { from { transform: var(--_hidden); } }
}

/* ───────────────────────── 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-color-picker {
    &.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; }
}