/* Optional: import after kern-base.css in the same Tailwind CSS entry. */
/* Components — reusable across projects */
/* Padding rhythm (Tailwind spacing units):
   Buttons / pagination: px-4 py-2; small px-3 py-1; extra-small px-2.
   Text fields / menu rows: px-3 py-2; small fields py-1, with the same text inset.
   Compact content panels: p-4; choice cards / dialogs: p-6 (dialogs p-8 on desktop).
   Marketing cards retain their roomier responsive padding below.
   Insets for embedded controls, icon-only buttons and underline tabs are intentional. */
/* ---------------------------------------------------------- */

@layer components {
  /* Container dimensions include padding and follow Tailwind's width scale. */
  .k-container { @apply w-full max-w-7xl mx-auto px-6 md:px-12; }
  .k-container-sm { @apply max-w-3xl; }
  .k-container-lg { @apply max-w-360; }
  .k-container-stretch-below-tablet { @apply max-md:px-0 max-md:mb-0; }
  .k-container-stretch-below-small-desktop { @apply max-lg:px-0 max-lg:mb-0; }

  /* Responsive marketing header: centered desktop navigation, mobile menu panel.
     Without JS the mobile links remain visible and the toggle stays hidden. */
  .k-header { @apply relative z-20 bg-canvas; --k-header-control-height: calc(var(--spacing) * 8); }
  .k-header-inner { @apply grid min-h-20 grid-cols-[auto_1fr] items-center gap-8 py-4 lg:min-h-24 lg:grid-cols-[1fr_auto_1fr] lg:gap-12 lg:py-6; }
  .k-header-brand { @apply w-fit text-2xl font-semibold tracking-2xs; }
  .k-header-panel { @apply order-3 col-span-2 grid gap-6 py-6 lg:order-none lg:col-span-1 lg:py-0; }
  .k-header-nav { @apply flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-center; }
  .k-header-link {
    @apply flex items-center rounded-control px-3 py-3 text-subhead-lg font-medium lg:py-2 lg:text-sm;
    &:hover, &[data-current="true"] { @apply bg-surface; }
  }
  /* Native disclosures provide navigation dropdowns, not application menus. */
  .k-header-dropdown { @apply w-full lg:w-auto; }
  .k-header-dropdown > summary {
    @apply w-full justify-between gap-2 lg:w-auto;
    list-style: none;
    &::-webkit-details-marker { display: none; }
  }
  .k-header-dropdown-icon { @apply size-4 shrink-0; }
  .k-header-dropdown[open] > summary .k-header-dropdown-icon { transform: rotate(180deg); }
  /* Control the native content wrapper ourselves. This avoids retaining an
     out-of-flow panel in a content-visibility-skipped details subtree. */
  .k-header-dropdown::details-content { content-visibility: visible; }
  .k-header-dropdown:not([open])::details-content { display: none; }
  .k-header-dropdown:not([open]) > .k-header-submenu {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: static;
    translate: none;
    transform: none;
  }
  .k-header-submenu {
    @apply grid gap-6 pb-4 lg:grid-cols-2 lg:gap-8 lg:rounded-card lg:border lg:border-line lg:bg-canvas lg:p-8 lg:shadow-lg;
    &:has(> :only-child) { @apply lg:max-w-sm lg:grid-cols-1; }
  }
  .k-header-dropdown[open] > .k-header-submenu {
    @apply lg:absolute lg:left-1/2 lg:top-full lg:z-40 lg:-mt-2 lg:w-[calc(100%-3rem)] lg:max-w-3xl lg:-translate-x-1/2;
    &:has(> :only-child) { @apply lg:max-w-sm; }
  }
  .k-header-submenu-group { @apply grid content-start; }
  .k-header-submenu-list { @apply grid gap-1; }
  .k-header-submenu-heading { @apply mb-2 px-3 text-xs text-muted font-normal; }
  .k-header-submenu-link {
    @apply grid gap-1 rounded-control px-3 py-2 text-sm;
    &:hover { @apply bg-surface; }
  }
  .k-header-actions { @apply flex items-center justify-self-end gap-1 lg:order-3 lg:gap-3; }
  .k-header .k-header-desktop-action { @apply hidden lg:inline-flex; }
  .k-header .k-header-mobile-action { @apply w-full lg:hidden; }
  .k-header .k-header-toggle { @apply hidden; }
  .k-header-actions :is([data-k-theme-toggle], .k-header-toggle) {
    width: var(--k-header-control-height);
    height: var(--k-header-control-height);
    min-height: var(--k-header-control-height);
    @apply p-0;
  }
  .k-header-menu-icon { @apply inline-flex size-5 shrink-0; }
  .k-header-menu-icon svg { @apply size-full; }
  .k-header-menu-icon svg > path { transform-box: fill-box; transform-origin: center; }
  .k-header-toggle[aria-expanded="true"] .k-header-menu-icon svg {
    & > path:nth-child(2) { opacity: 0; transform: scaleX(0); }
    & > path:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    & > path:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  }
  @media (width < 64rem) {
    /* Preserve the visible button size, with separate 44px touch targets. */
    .k-header-actions :is([data-k-theme-toggle], .k-header-toggle) {
      margin-inline: 6px;
      &::before {
        content: "";
        position: absolute;
        width: max(44px, 100%);
        height: max(44px, 100%);
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
      }
    }
    .k-header[data-k-header-ready] {
      & .k-header-toggle { @apply inline-flex; }
      & .k-header-nav { @apply gap-0; }
      & .k-header-nav > * + * { @apply border-t border-line; }
      & .k-header-link {
        @apply rounded-none bg-transparent px-0 py-4 underline-offset-2;
        &:hover { @apply bg-transparent underline decoration-1; }
        &[data-current="true"] { @apply bg-transparent underline; }
      }
      & .k-header-panel {
        @apply fixed inset-x-0 bottom-0 z-50 flex flex-col gap-6 overflow-y-auto overscroll-contain bg-canvas px-6 pb-8 pt-4 md:px-12;
        top: var(--k-header-bar-height, 5rem);
      }
      &[data-k-header-open="false"] .k-header-panel { display: none; }
      &[data-k-header-open="true"] {
        @apply fixed inset-x-0 top-0 z-50 h-dvh bg-transparent;
        width: var(--k-header-viewport-width, 100%);
        & .k-header-inner { @apply relative z-50 bg-canvas; }
        & .k-header-mobile-action { @apply mt-auto shrink-0; }
      }
    }
  }

  /* Site footer: logo, flexible link columns, and an optional closing row. */
  .k-footer { @apply w-full py-12 lg:py-16; }
  .k-footer-inner {
    @apply grid items-start gap-12 lg:grid-cols-5;
    &:has(> .k-footer-columns > :nth-child(3):last-child) {
      & > :first-child { @apply lg:col-span-2; }
      & > .k-footer-columns { @apply lg:col-span-3; }
    }
    &:has(> .k-footer-columns > :nth-child(2):last-child) {
      & > :first-child { @apply lg:col-span-3; }
      & > .k-footer-columns { @apply lg:col-span-2; }
    }
    &:has(> .k-footer-columns > :only-child) {
      & > :first-child { @apply lg:col-span-4; }
      & > .k-footer-columns { @apply lg:col-span-1; }
    }
  }
  .k-footer-brand { @apply inline-flex w-fit; }
  .k-footer-columns {
    @apply grid grid-cols-2 gap-x-8 gap-y-10 sm:gap-x-12 lg:col-span-4 lg:grid-cols-subgrid;
    &:has(> :only-child) { @apply max-lg:grid-cols-1; }
  }
  .k-footer-column { @apply grid min-w-0 content-start gap-8; }
  .k-footer-group { @apply grid gap-4; }
  .k-footer-links { @apply grid gap-3; }
  .k-footer-link {
    @apply inline-block underline-offset-2;
    &:hover { @apply underline decoration-1; }
  }
  .k-footer-bottom {
    @apply mt-12 flex flex-col gap-4 lg:mt-16 sm:flex-row sm:items-center sm:justify-between;
  }
  .k-footer-legal { @apply flex flex-wrap gap-x-6 gap-y-2; }

  /* Non-interactive status message; visibility is controlled by kern.js. */
  .k-toast {
    @apply pointer-events-none fixed bottom-6 left-1/2 z-30 max-w-[90vw] -translate-x-1/2 translate-y-5 rounded-control bg-ink px-4 py-3 text-sm text-canvas opacity-0;
    overflow-wrap: anywhere;
    transition: opacity var(--k-motion-duration-sm), translate var(--k-motion-duration-sm);
    &[data-visible="true"] { @apply translate-y-0 opacity-100; }
    @media (prefers-reduced-motion: reduce) { transition: none; }
  }

  /* Standalone navigation links inherit their surrounding text size and color.
     Use native text-* utilities for sizing; no button padding or minimum height. */
  .k-link {
    @apply inline-flex items-center gap-2 rounded-badge font-medium underline underline-offset-2 hover:decoration-2 transition-colors duration-(--k-motion-duration-sm);
    color: inherit;
    & > svg { @apply size-4 shrink-0; }
    @media (prefers-reduced-motion: reduce) { transition: none; }
  }
  .k-link-subtle {
    @apply no-underline;
    &:hover { @apply underline decoration-1; }
  }

  .k-button {
    @apply relative inline-flex min-h-10 items-center justify-center gap-2 rounded-control border border-transparent bg-surface px-4 py-2 text-sm font-medium transition-colors duration-(--k-motion-duration-sm) ease-standard;
    &:hover:not(:disabled) { @apply bg-line; }
    &:disabled { @apply cursor-not-allowed opacity-40; }
    @media (prefers-reduced-motion: reduce) { transition: none; }
  }
  .k-button-primary {
    @apply border-action bg-action text-on-action;
    &:hover:not(:disabled) { opacity: 0.85; background: var(--k-action); }
  }
  .k-button-sm { @apply min-h-8 px-3 py-1 text-sm; }
  .k-button-xs, .k-button-group-xs > .k-button { @apply min-h-7 gap-1.5 px-2 py-1 text-xs font-medium; }
  .k-button-outline {
    @apply border-line-strong bg-transparent;
    &:hover:not(:disabled) { @apply bg-surface; }
  }
  .k-button-ghost {
    @apply bg-transparent;
    &:hover:not(:disabled) { @apply bg-surface; }
  }
  .k-button-link {
    @apply bg-transparent underline underline-offset-2;
    &:hover:not(:disabled) { @apply bg-transparent; text-decoration-thickness: 2px; }
  }
  .k-button > svg { @apply size-4 shrink-0; }
  .k-button-xs > svg, .k-button-group-xs > .k-button > svg { @apply size-3.5; }
  .k-button-icon {
    @apply w-10 shrink-0 px-0 py-0;
    aspect-ratio: 1;
    &.k-button-sm { @apply w-8; }
    &.k-button-xs { @apply w-7; }
  }
  .k-button[aria-busy="true"]:disabled { opacity: 0.7; cursor: wait; }
  .k-button-badge {
    @apply absolute min-w-5 rounded-full border-2 border-canvas bg-action px-1 text-xs font-medium text-on-action;
    line-height: 1rem;
    inset-block-start: 0;
    inset-inline-end: 0;
    transform: translate(50%, -50%);
    &:dir(rtl) { transform: translate(-50%, -50%); }
  }
  .k-button-toggle[aria-pressed="true"] {
    @apply border-action bg-action text-on-action;
    &:hover:not(:disabled) { background: var(--k-action); opacity: 0.85; }
  }
  .k-button-group {
    @apply inline-flex items-stretch;
    & > .k-button { @apply rounded-none; }
    & > .k-button:first-child { border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control); }
    & > .k-button:last-child { border-start-end-radius: var(--radius-control); border-end-end-radius: var(--radius-control); }
    & > .k-button + .k-button { margin-inline-start: -1px; }
    & > .k-button:focus-visible { z-index: 1; }
  }
  .k-button-group-xs {
    & > .k-button-icon { @apply w-7 px-0 py-0; }
  }
  .k-button-xs > :is(.k-badge, .k-kbd),
  .k-button-group-xs > .k-button > :is(.k-badge, .k-kbd) {
    @apply h-4.5 min-h-4.5 text-xs font-medium leading-none;
  }

  /* Shared segmented appearance for button selection and tabs. */
  .k-segmented-control {
    @apply inline-flex items-center rounded-control bg-surface p-1 text-sm font-medium;
    & > label { @apply relative cursor-pointer; }
    & input { @apply sr-only; }
    & > label > span, & > button {
      @apply flex min-h-8 items-center justify-center gap-2 border border-transparent px-4 py-1 transition-colors duration-(--k-motion-duration-sm);
    }
    & > label > span, & > button { border-radius: inherit; }
    & > label { border-radius: inherit; }
    & input:checked + span, & > button[aria-selected="true"], & > button[aria-pressed="true"] { @apply border-line bg-canvas; }
    & input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
    & > button { @apply cursor-pointer; }
    & > button > svg, & > label > span > svg { @apply size-4 shrink-0; }
    & > button:disabled { @apply cursor-not-allowed opacity-40; }
    & label:has(input:disabled) { @apply cursor-not-allowed opacity-40; }
    @media (prefers-reduced-motion: reduce) {
      & > label > span, & > button { transition: none; }
    }
  }

  .k-segmented-control-sm {
    @apply p-0.5 text-xs;
    & > label > span, & > button { @apply min-h-7 px-3 py-0.5; }
  }

  .k-segmented-control-underline {
    @apply gap-6 rounded-none bg-transparent p-0;
    & > button, & > label > span {
      @apply relative rounded-none border-0 bg-transparent px-0 pt-3 pb-2;
      &::after {
        content: "";
        @apply absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-transparent;
      }
    }
    & > button[aria-selected="true"], & > button[aria-pressed="true"], & input:checked + span {
      @apply border-0 bg-transparent;
      &::after { @apply bg-ink; }
    }
    &.k-segmented-control-sm {
      @apply gap-3 p-0;
      & > button, & > label > span { @apply px-0 py-2; }
    }
  }

  .k-segmented-control[aria-orientation="vertical"] {
    @apply flex-col items-stretch gap-1;
    & > button, & > label > span { @apply justify-start px-3; }
    &.k-segmented-control-underline {
      @apply gap-0 border-b-0;
      border-inline-end: 1px solid var(--color-line);
      & > button, & > label > span {
        @apply px-4;
        &::after {
          inset-inline-start: auto;
          inset-inline-end: 0;
          @apply inset-y-0 h-auto w-0.5;
        }
      }
    }
  }

  /* Native checkbox semantics and keyboard behavior, styled as a switch. */
  .k-switch {
    @apply relative inline-flex cursor-pointer items-center gap-3 text-sm;
    &:has(> .k-switch-content) { @apply items-start; }
    & > input { @apply sr-only; }
    & > .k-switch-track {
      @apply relative h-5 w-8 shrink-0 rounded-full bg-neutral-300 transition-colors duration-(--k-motion-duration-sm) dark:bg-neutral-600;
      &::after {
        content: "";
        @apply absolute top-0.5 size-4 rounded-full bg-white transition-transform duration-(--k-motion-duration-sm);
        inset-inline-start: calc(var(--spacing) * 0.5);
      }
    }
    & > input:checked + .k-switch-track {
      @apply bg-action;
      &::after { @apply translate-x-3 bg-on-action; }
    }
    & > input:focus-visible + .k-switch-track { outline: 2px solid var(--color-focus); outline-offset: 2px; }
    &:dir(rtl) > input:checked + .k-switch-track::after { @apply -translate-x-3; }
    & > input[aria-invalid="true"] + .k-switch-track { @apply ring-1 ring-red-600 dark:ring-red-400; }
    &:has(> input:disabled) { @apply cursor-not-allowed; }
    & > input:disabled ~ :not(.k-switch-track) { @apply opacity-40; }
    & > input:disabled + .k-switch-track {
      @apply bg-neutral-300 dark:bg-neutral-700;
      &::after { @apply bg-neutral-100 dark:bg-neutral-500; }
    }
    @media (prefers-reduced-motion: reduce) {
      & > .k-switch-track, & > .k-switch-track::after { transition: none; }
    }
    @media (forced-colors: active) {
      & > .k-switch-track { background: Canvas; border: 1px solid CanvasText; }
      & > .k-switch-track::after { background: CanvasText; }
      & > input:checked + .k-switch-track { background: Highlight; }
      & > input:checked + .k-switch-track::after { background: HighlightText; }
      & > input:disabled + .k-switch-track::after { background: GrayText; }
    }
  }
  .k-switch-sm {
    & > .k-switch-track {
      @apply h-4 w-7;
      &::after { @apply size-3; }
    }
    & > input:checked + .k-switch-track {
      &::after { @apply translate-x-3; }
    }
    &:dir(rtl) > input:checked + .k-switch-track::after { @apply -translate-x-3; }
  }
  .k-switch-lg {
    & > .k-switch-track {
      @apply h-6 w-10;
      &::after { @apply size-5; }
    }
    & > input:checked + .k-switch-track::after { @apply translate-x-4; }
    &:dir(rtl) > input:checked + .k-switch-track::after { @apply -translate-x-4; }
  }
  .k-switch-content { @apply grid min-w-0 flex-1 gap-1; }
  .k-switch-label { @apply text-sm font-medium; }
  .k-switch-description { @apply text-sm leading-base; }
  .k-switch-card {
    @apply flex w-full items-start rounded-card border border-line p-6 transition-colors duration-(--k-motion-duration-sm) ease-standard;
    & > .k-switch-track { @apply order-last; }
    &:where(:hover):not(:has(> input:disabled)) { @apply border-line-strong; }
    &:has(> input:checked) { @apply border-action bg-surface; }
    &:has(> input[aria-invalid="true"]) { @apply border-red-600 dark:border-red-400; }
    @media (prefers-reduced-motion: reduce) { transition: none; }
  }
  /* Native checkbox semantics; a decorative box mirrors checked/mixed state. */
  .k-checkbox {
    @apply relative inline-flex cursor-pointer items-start gap-3 text-sm;
    & > input { @apply sr-only; }
    & > .k-checkbox-control {
      @apply relative mt-0.5 size-4 shrink-0 rounded-badge border border-line-strong bg-canvas;
      &::after {
        content: "";
        @apply absolute inset-0;
        background-color: var(--color-on-action);
        mask: url("../icons/check-checkbox.svg") center / 12px 12px no-repeat;
        opacity: 0;
      }
    }
    & > input:checked + .k-checkbox-control,
    & > input:indeterminate + .k-checkbox-control {
      @apply border-action bg-action;
      &::after { opacity: 1; }
    }
    & > input:indeterminate + .k-checkbox-control::after {
      mask-image: url("../icons/minus-checkbox.svg");
    }
    & > input:focus-visible + .k-checkbox-control {
      outline: 2px solid var(--color-focus);
      outline-offset: 2px;
    }
    &:has(> input:disabled) { @apply cursor-not-allowed opacity-40; }
    & > input[aria-invalid="true"] + .k-checkbox-control { @apply border-red-600 dark:border-red-400; }
    @media (forced-colors: active) {
      & > .k-checkbox-control { border-color: CanvasText; background: Canvas; }
      & > input:checked + .k-checkbox-control,
      & > input:indeterminate + .k-checkbox-control {
        background: Highlight;
        border-color: Highlight;
        &::after { background-color: HighlightText; }
      }
    }
  }
  .k-checkbox-content { @apply grid gap-1; }
  .k-checkbox-label { @apply text-sm font-medium; }
  .k-checkbox-description { @apply text-sm leading-base; }
  .k-checkbox-error { @apply text-sm text-red-700 dark:text-red-400; }
  .k-checkbox-card {
    @apply flex rounded-card border border-line p-6;
    &:has(> input:checked) { @apply border-action bg-surface; }
  }

  /* Native radio inputs retain exclusive selection, arrow keys, and submission. */
  .k-radio {
    @apply mt-0.5 size-4 shrink-0 cursor-pointer appearance-none rounded-full border border-line-strong bg-canvas outline-offset-2;
    &:checked {
      @apply border-action;
      background-image: radial-gradient(circle, var(--k-action) 0 40%, transparent 45%);
    }
    &:disabled { @apply cursor-not-allowed; }
    &[aria-invalid="true"] { @apply border-red-600 dark:border-red-400; }
    @media (forced-colors: active) {
      appearance: auto;
      background: none;
      border: none;
      accent-color: Highlight;
    }
  }
  .k-radio-option {
    @apply flex cursor-pointer items-start gap-3 text-sm;
    &:has(> .k-radio:disabled) { @apply cursor-not-allowed opacity-40; }
  }
  .k-radio-content { @apply grid min-w-0 flex-1 gap-1; }
  .k-radio-label { @apply text-sm font-medium; }
  .k-radio-description { @apply text-sm leading-base; }

  /* Option rhythm: 12px simple rows, 16px when rows have supporting copy. */
  .k-checkbox-group, .k-radio-group, .k-switch-group {
    @apply grid gap-3;
    & > legend { @apply mb-6 text-sm font-medium; }
    &:has(> label :is(.k-checkbox-description, .k-radio-description, .k-switch-description)) {
      @apply gap-4;
    }
  }
  .k-radio-card {
    @apply rounded-card border border-line p-6 transition-colors duration-(--k-motion-duration-sm) ease-standard;
    &:where(:hover):not(:has(> .k-radio:disabled)) { @apply border-line-strong; }
    &:has(> .k-radio:checked) { @apply border-action bg-surface; }
    &:has(> .k-radio[aria-invalid="true"]) { @apply border-red-600 dark:border-red-400; }
    @media (prefers-reduced-motion: reduce) { transition: none; }
  }

  /* Shared native text-field styling; single-line inputs match the 40px button. */
  .k-input, .k-textarea {
    @apply h-10 w-full min-w-0 rounded-control border border-control bg-canvas px-3 py-2 text-sm tracking-sm placeholder:text-muted outline-offset-2 transition-colors duration-(--k-motion-duration-sm) ease-standard;
    color: inherit;
    &:where(:hover:not(:disabled), :focus:not(:disabled)) {
      @apply border-line-strong;
    }
    @media (prefers-reduced-motion: reduce) { transition: none; }
    &:disabled { @apply cursor-not-allowed bg-surface opacity-40; }
    &[readonly] { @apply bg-surface; }
    &[aria-invalid="true"] { @apply border-red-600 dark:border-red-400; }
    &[type="file"] {
      @apply cursor-pointer overflow-hidden p-0.75 pe-3 leading-8;
      /* 3px outer inset + 9px button padding matches the 12px text inset. */
      &::file-selector-button {
        @apply me-3 h-8 cursor-pointer rounded-badge border-0 px-2.25 py-0 text-sm leading-8 font-medium;
        color: inherit;
        font-family: inherit;
        vertical-align: top;
      }
      &:hover:not(:disabled)::file-selector-button { @apply bg-canvas; }
      &:disabled, &:disabled::file-selector-button { @apply cursor-not-allowed; }
    }
  }
  .k-input-sm {
    @apply h-8 px-3 py-1;
    &[type="file"] {
      @apply leading-6;
      &::file-selector-button { @apply h-6 leading-6; }
    }
  }
  /* Two-line minimum; content sizing is progressive enhancement.
     Browsers without field-sizing retain the native rows and resize handle. */
  .k-textarea {
    @apply h-auto resize-y;
    min-block-size: calc(2lh + var(--spacing) * 4 + 2px);
    field-sizing: content;
  }

  /* Wrap a native select in k-select-wrapper for the decorative Lucide chevron.
     Multiple selects and listboxes omit the chevron and size to their rows. */
  .k-select-wrapper {
    @apply relative w-full min-w-0;
    &:has(> .k-select:not([multiple]):is(:not([size]), [size="1"]))::after {
      content: "";
      @apply pointer-events-none absolute top-1/2 size-4 -translate-y-1/2;
      inset-inline-end: calc(var(--spacing) * 3);
      background-color: currentColor;
      mask: url("../icons/chevron-down.svg") center / contain no-repeat;
    }
    &:has(> .k-select:disabled)::after { opacity: 0.4; }
    @media (forced-colors: active) { &::after { display: none; } }
  }
  .k-select {
    @apply h-10 w-full min-w-0 cursor-pointer appearance-none rounded-control border border-control bg-canvas ps-3 pe-10 py-2 text-sm tracking-sm outline-offset-2 transition-colors duration-(--k-motion-duration-sm) ease-standard;
    color: inherit;
    &:where(:hover:not(:disabled), :focus:not(:disabled)) { @apply border-line-strong; }
    &:disabled { @apply cursor-not-allowed bg-surface opacity-40; }
    &[aria-invalid="true"] { @apply border-red-600 dark:border-red-400; }
    & > option, & > optgroup { @apply bg-canvas; color: inherit; }
    &[multiple], &[size]:not([size="1"]) { @apply h-auto min-h-10 px-3; }
    @media (prefers-reduced-motion: reduce) { transition: none; }
    @media (forced-colors: active) { appearance: auto; }
  }
  .k-select-sm { @apply h-8 py-1; }

  /* Composite field: one border and focus ring around a native input and addons. */
  .k-input-group {
    @apply flex min-h-10 w-full min-w-0 flex-wrap items-center rounded-control border border-control bg-canvas text-sm tracking-sm transition-colors duration-(--k-motion-duration-sm) ease-standard;
    &:where(:hover, :focus-within):not(:has(> .k-input:disabled)) { @apply border-line-strong; }
    &:has(> .k-input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
    &:has(> .k-input[aria-invalid="true"]) { @apply border-red-600 dark:border-red-400; }
    &:has(> .k-input:disabled) { @apply cursor-not-allowed bg-surface opacity-40; }
    &:has(> .k-input[readonly]) { @apply bg-surface; }
    & > .k-input {
      @apply order-1 h-9.5 w-0 flex-1 self-stretch border-0 bg-transparent;
      border-radius: inherit;
      &:focus-visible { outline: none; animation: none; }
      &:disabled { opacity: 1; }
    }
    &:has(> .k-input-group-addon:not(.k-input-group-addon-end):not(.k-input-group-addon-block-start):not(.k-input-group-addon-block-end)) > .k-input { @apply ps-2; }
    &:has(> .k-input-group-addon-end) > .k-input { @apply pe-2; }
    & > textarea.k-input { @apply h-auto min-h-24 resize-y py-2; }
    @media (prefers-reduced-motion: reduce) { transition: none; }
  }
  .k-input-group-addon {
    @apply order-0 flex shrink-0 items-center gap-2 ps-3;
    & > svg { @apply size-4 shrink-0; }
    &:not(.k-input-group-addon-block-start):not(.k-input-group-addon-block-end):has(> button) { @apply ps-0.75; }
  }
  .k-input-group-addon-end {
    @apply order-2 ps-0 pe-3;
    &:has(> button) { @apply pe-0.75; }
  }
  .k-input-group-addon-block-start {
    @apply order-first w-full border-b border-line px-3 py-2;
  }
  .k-input-group-addon-block-end {
    @apply order-last w-full flex-wrap gap-3 border-t border-line px-3 py-2;
  }
  .k-input-group-sm {
    @apply min-h-8;
    & > .k-input { @apply h-7.5 py-1; }
  }

  .k-card { @apply rounded-card bg-surface p-8 sm:p-10; }
  /* Compact labels and statuses; use native links/buttons for interactive badges. */
  .k-badge {
    @apply inline-flex min-h-7 w-fit items-center justify-center gap-1.5 whitespace-nowrap rounded-full border border-transparent bg-action px-3 py-0.5 text-sm font-medium text-on-action;
    &:where(a, button) { @apply transition-colors duration-(--k-motion-duration-sm); }
    &:where(a, button):hover { opacity: 0.85; }
    &:disabled { @apply cursor-not-allowed opacity-40; }
    & > svg { @apply size-3.5 shrink-0; }
    @media (prefers-reduced-motion: reduce) { transition: none; }
  }
  .k-badge-secondary { @apply bg-surface text-inherit; }
  .k-badge-destructive { @apply bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300; }
  .k-badge-outline { @apply border-line-strong bg-transparent text-inherit; }
  .k-badge-ghost {
    @apply bg-transparent text-inherit;
    &:where(a, button):hover { @apply bg-surface; opacity: 1; }
  }
  .k-badge-link {
    @apply bg-transparent text-inherit underline underline-offset-2;
    &:where(a, button):hover { text-decoration-thickness: 2px; opacity: 1; }
  }
  .k-badge-sm {
    @apply min-h-5 gap-1 px-2 py-0 text-xs;
    line-height: 1.25;
    & > svg { @apply size-3; }
  }

  /* Native modal dialogs provide focus containment and an inert background. */
  .k-dialog {
    @apply m-auto w-[calc(100%-2rem)] max-w-lg rounded-card bg-canvas p-6 sm:p-8;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    color: inherit;
    box-shadow: 0 24px 80px rgb(0 0 0 / 18%);
    &::backdrop { background: rgb(0 0 0 / 45%); }
  }
  .k-dialog-content { @apply grid gap-6; }
  .k-dialog-header { @apply grid gap-3; }
  .k-dialog-media {
    @apply flex size-10 items-center justify-center rounded-control bg-surface;
    & > svg { @apply size-5; }
  }
  .k-dialog-title { @apply text-subhead-xl; overflow-wrap: anywhere; }
  .k-dialog-description { @apply text-base leading-lg; overflow-wrap: anywhere; }
  .k-dialog-footer { @apply flex flex-col-reverse gap-3 sm:flex-row sm:justify-end; }
  .k-button-destructive {
    @apply border-red-600 bg-red-600 text-white;
    &:hover:not(:disabled) { @apply bg-red-700; }
  }

  /* Inline callout: icon, title, description and action are all optional.
     Use role="status" for updates and role="alert" for urgent errors. */
  .k-alert {
    @apply grid min-w-0 grid-cols-1 gap-x-3 gap-y-2 rounded-card border border-line bg-canvas p-4 text-sm;
    &:has(> .k-alert-icon) {
      grid-template-columns: 1.25rem minmax(0, 1fr);
      & > :where(.k-alert-title, .k-alert-description, .k-alert-action) { grid-column: 2; }
    }
    @media (min-width: 40rem) {
      &:has(> .k-alert-action) {
        grid-template-columns: minmax(0, 1fr) auto;
        & > .k-alert-action { grid-column: 2; grid-row: 1 / span 2; margin-block-start: 0; }
      }
      &:has(> .k-alert-icon):has(> .k-alert-action) {
        grid-template-columns: 1.25rem minmax(0, 1fr) auto;
        & > .k-alert-action { grid-column: 3; }
      }
    }
  }
  .k-alert-icon { @apply col-start-1 row-start-1 row-span-2 size-5 shrink-0 self-start; }
  .k-alert-title { @apply col-start-1 min-w-0 text-sm font-medium leading-base; overflow-wrap: anywhere; }
  .k-alert-description {
    @apply col-start-1 min-w-0 text-sm leading-base;
    overflow-wrap: anywhere;
    & > * + * { @apply mt-2; }
    & :where(ul, ol) { @apply list-outside pl-5; }
    & ul { list-style-type: disc; }
    & ol { list-style-type: decimal; }
    & a { @apply underline underline-offset-2 hover:decoration-2; }
  }
  .k-alert-action { @apply col-start-1 row-start-3 mt-2 self-start justify-self-start; }
  .k-alert-destructive { @apply border-red-200 text-red-700 dark:border-red-900 dark:text-red-400; }
  .k-alert-success { @apply border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-300; }
  .k-alert-warning { @apply border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-300; }

  /* Floating action menu; JS manages keyboard focus, dismissal and placement. */
  .k-dropdown {
    @apply fixed z-50 m-0 min-w-48 max-w-[calc(100vw-1rem)] overflow-y-auto rounded-card border border-line bg-canvas p-1 text-sm shadow-lg;
    color: inherit;
    inset: auto;
    &[hidden] { display: none; }
  }
  .k-popover {
    @apply fixed z-50 m-0 grid w-80 max-w-[calc(100vw-1rem)] gap-4 overflow-y-auto rounded-card border border-line bg-canvas p-4 text-sm shadow-lg;
    color: inherit;
    inset: auto;
    &[hidden] { display: none; }
  }
  .k-tooltip {
    @apply fixed z-50 m-0 flex w-max max-w-[min(20rem,calc(100vw-1rem))] items-center gap-2 overflow-visible rounded-control border-0 bg-ink px-3 py-2 text-sm text-canvas shadow-md;
    inset: auto;
    overflow-wrap: anywhere;
    &[hidden] { display: none; }
    &::before {
      content: "";
      @apply pointer-events-none absolute size-2 rounded-[1px];
      background: inherit;
      transform: translate(-50%, -50%) rotate(45deg);
    }
    &[data-k-side="top"]::before { left: var(--k-tooltip-arrow-x, 50%); top: 100%; }
    &[data-k-side="bottom"]::before { left: var(--k-tooltip-arrow-x, 50%); top: 0; }
    &[data-k-side="left"]::before { left: 100%; top: var(--k-tooltip-arrow-y, 50%); }
    &[data-k-side="right"]::before { left: 0; top: var(--k-tooltip-arrow-y, 50%); }
    &:has(> .k-kbd) { @apply py-1.5 pe-1.5; }
    & > .k-kbd { @apply bg-canvas/15 text-inherit; }
    @media (forced-colors: active) { border: 1px solid CanvasText; }
  }

  .k-popover-header { @apply grid gap-2; }
  .k-popover-title { @apply text-sm font-medium; }
  .k-popover-description { @apply text-sm; }

  .k-dropdown-item {
    @apply flex min-h-8 w-full cursor-pointer items-center gap-3 rounded-control px-3 py-1 text-start text-sm;
    &:hover:not(:disabled):not([aria-disabled="true"]), &:focus-visible { @apply bg-surface; }
    &:disabled, &[aria-disabled="true"] { @apply cursor-not-allowed opacity-40; }
    & > svg { @apply size-4 shrink-0; }
  }

  /* Independent reveal panel; native hidden removes collapsed content from navigation. */
  .k-collapsible[hidden] { display: none; }
  .k-collapsible-content { @apply grid gap-4; }

  /* Native disclosure with a borderless question row and inline chevron. */
  .k-disclosure {
    & > summary {
      @apply flex w-fit max-w-full cursor-pointer items-center gap-5 py-2 text-subhead-xl rounded-control outline-offset-4;
      list-style: none;
      &::-webkit-details-marker { display: none; }
    }
    & > summary .k-disclosure-icon {
      @apply size-5 shrink-0 transition-transform duration-(--k-motion-duration-sm);
    }
    &[open] > summary .k-disclosure-icon { transform: rotate(180deg); }
    & > .k-disclosure-content { @apply mt-4 mb-12 text-base leading-lg; }
    @media (prefers-reduced-motion: reduce) {
      & > summary .k-disclosure-icon { transition: none; }
    }
  }

  .k-disclosure-arrow-right {
    & > summary { @apply w-full justify-between; }
    & > summary .k-disclosure-icon { margin-inline-start: auto; }
  }

  .k-disclosure-sm {
    & > summary { @apply gap-3 py-4 text-sm font-medium outline-offset-2; }
    & > summary:hover { @apply underline underline-offset-2; }
    & > summary .k-disclosure-icon { @apply size-4; }
    & > .k-disclosure-content { @apply mt-0 mb-6 text-sm leading-lg; }
  }

  /* Item rows are presentational; use an anchor for a whole-row link, or
     place independent controls in actions. Never nest controls in an anchor. */
  .k-item {
    @apply flex w-full min-w-0 flex-wrap items-center gap-4 rounded-control p-4 text-sm;
    &:where(a, button) {
      @apply text-start transition-colors duration-(--k-motion-duration-sm);
      &:hover { @apply bg-surface; }
      @media (prefers-reduced-motion: reduce) { transition: none; }
    }
  }
  .k-item-media {
    @apply flex shrink-0 items-center justify-center;
    & > svg { @apply size-5; }
  }
  .k-item-media-icon { @apply size-10 rounded-control bg-surface; }
  .k-item-media-image {
    @apply size-10 overflow-hidden rounded-control;
    & > img { @apply size-full object-cover; }
  }
  .k-item-content { @apply grid min-w-0 flex-1 gap-1; overflow-wrap: anywhere; }
  .k-item-title { @apply flex flex-wrap items-center gap-2 text-sm font-medium; }
  .k-item-description { @apply text-sm; }
  .k-item-actions {
    @apply flex shrink-0 flex-wrap items-center gap-2;
    & > svg { @apply size-4; }
  }
  .k-item-header, .k-item-footer { @apply flex w-full flex-wrap items-center justify-between gap-2; }
  .k-item-sm {
    @apply gap-3 p-3;
    & > .k-item-media-icon { @apply size-8; }
    & > .k-item-media > svg { @apply size-4; }
  }
  .k-item-xs {
    @apply gap-3 px-3 py-2;
    & > .k-item-content { @apply gap-0.5; }
    & > .k-item-media-icon { @apply size-6; }
    & > .k-item-media > svg { @apply size-4; }
  }
  .k-dropdown-item > .k-item-xs { @apply p-0; }

  /* Keyboard hints are presentational, not interactive shortcut bindings. */
  .k-kbd {
    @apply inline-flex h-5 min-w-5 shrink-0 items-center justify-center whitespace-nowrap rounded-badge border-none bg-surface px-2 align-middle font-mono text-xs font-medium leading-none;
    border-bottom-width: 2px;
    & > svg { @apply size-3.5; }
  }
  .k-kbd-group { @apply inline-flex items-center gap-1 align-middle whitespace-nowrap; }

  /* Native page links; the application supplies URLs and the current page. */
  .k-pagination { @apply flex flex-wrap items-center gap-1; }
  .k-pagination-item {
    @apply relative inline-flex min-h-10 min-w-10 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent bg-transparent px-4 py-2 text-sm font-medium transition-colors duration-(--k-motion-duration-sm) ease-standard;
    color: inherit;
    /* Unselected items match ghost buttons; the current page matches outline. */
    &[aria-current="page"] { @apply border-line-strong; }
    &:hover:not(:disabled):not([aria-disabled="true"]) { @apply bg-surface; }
    &:has(> svg:only-child) { @apply w-10 px-0 py-0; aspect-ratio: 1; }
    &[aria-disabled="true"], &:disabled { @apply cursor-not-allowed opacity-40; }
    & > svg { @apply size-4 shrink-0; }
    @media (prefers-reduced-motion: reduce) { transition: none; }
  }
  .k-pagination-ellipsis {
    @apply inline-flex min-h-10 min-w-10 shrink-0 items-center justify-center;
    & > svg { @apply size-4; }
  }
  .k-pagination-sm {
    & > .k-pagination-item { @apply min-h-8 min-w-8 px-3 py-1; }
    & > .k-pagination-item:has(> svg:only-child) { @apply w-8 px-0 py-0; }
    & > .k-pagination-ellipsis { @apply min-h-8 min-w-8; }
  }

  /* Native progress semantics; omit value when the amount completed is unknown.
     Height and fill color can be overridden with Tailwind h-* / text-* utilities. */
  .k-progress {
    @apply block h-2 w-full overflow-hidden rounded-full border-0 bg-surface align-middle;
    appearance: none;
    &::-webkit-progress-bar { background: var(--k-surface); border-radius: inherit; }
    &::-webkit-progress-value { background: currentColor; border-radius: inherit; transition: width var(--k-motion-duration-base) var(--ease-standard); }
    &::-moz-progress-bar { background: currentColor; border-radius: inherit; }
    &:not([value]) {
      background-image: linear-gradient(currentColor, currentColor);
      background-size: 40% 100%;
      background-repeat: no-repeat;
      background-position: 50% 0;
      &::-webkit-progress-bar { background: transparent; }
      &::-webkit-progress-value { background: transparent; }
      &::-moz-progress-bar { background: transparent; }
    }
    @media (prefers-reduced-motion: reduce) {
      &::-webkit-progress-value { transition: none; }
    }
    @media (forced-colors: active) {
      forced-color-adjust: none;
      color: Highlight;
      background-color: Canvas;
      outline: 1px solid CanvasText;
      &::-webkit-progress-bar { background: Canvas; }
      &:not([value])::-webkit-progress-bar { background: transparent; }
    }
  }

  /* Native range controls. Inline --k-slider-value supplies the initial fill;
     kern.js updates it and optional data-k-slider-value readouts on input. */
  .k-slider {
    @apply block h-6 w-full cursor-pointer appearance-none rounded-control bg-transparent;
    --k-slider-direction: to right;
    --k-slider-track: linear-gradient(var(--k-slider-direction), var(--k-action) 0 var(--k-slider-value, 50%), var(--k-line) var(--k-slider-value, 50%) 100%);
    &:dir(rtl) { --k-slider-direction: to left; }
    &::-webkit-slider-runnable-track { @apply h-1.5 w-full rounded-full; background: var(--k-slider-track); }
    &::-webkit-slider-thumb {
      @apply size-4 appearance-none rounded-full border border-action bg-canvas;
      margin-top: -5px;
    }
    &::-moz-range-track { @apply h-1.5 w-full rounded-full; background: var(--k-slider-track); }
    &::-moz-range-progress { background: transparent; }
    &::-moz-range-thumb { @apply size-4 rounded-full border border-action bg-canvas; box-sizing: border-box; }
    &:disabled { @apply cursor-not-allowed opacity-40; }
    @media (forced-colors: active) { appearance: auto; --k-slider-track: CanvasText; }
  }
  .k-slider-vertical {
    @apply h-48 w-6;
    writing-mode: vertical-lr;
    direction: rtl;
    &, &:dir(rtl) { --k-slider-direction: to top; }
    &::-webkit-slider-runnable-track { @apply h-full w-1.5; }
    &::-webkit-slider-thumb { margin-top: 0; margin-left: -5px; }
    &::-moz-range-track { @apply h-full w-1.5; }
  }
  .k-slider-range {
    @apply relative h-6 w-full;
    touch-action: pan-y;
    --k-slider-direction: to right;
    &:dir(rtl) { --k-slider-direction: to left; }
    &::before {
      content: "";
      @apply pointer-events-none absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full;
      background: linear-gradient(var(--k-slider-direction), var(--k-line) 0 var(--k-slider-min, 25%), var(--k-action) var(--k-slider-min, 25%) var(--k-slider-max, 75%), var(--k-line) var(--k-slider-max, 75%) 100%);
    }
    & > .k-slider {
      @apply pointer-events-none absolute inset-0;
      --k-slider-track: transparent;
      &::-webkit-slider-thumb { pointer-events: auto; }
      &::-moz-range-thumb { pointer-events: auto; }
      &:focus-visible { z-index: 1; }
    }
    @media (forced-colors: active) {
      @apply grid h-auto gap-3;
      &::before { display: none; }
      & > .k-slider { @apply pointer-events-auto static; --k-slider-track: CanvasText; }
    }
  }

  /* Native table semantics; keep headers scoped and label the scroll region.
     Use utility classes for alignment, column widths, and striped rows. */
  .k-table-container { @apply relative w-full min-w-0 overflow-x-auto; }
  .k-table {
    @apply w-full border-collapse text-sm;
    caption-side: bottom;
    & > caption { @apply py-4 text-sm text-muted; }
  }
  .k-table-header > .k-table-row { @apply border-b border-line; }
  .k-table-body > .k-table-row {
    @apply border-b border-line transition-colors duration-(--k-motion-duration-sm) ease-standard;
    &:last-child { @apply border-b-0; }
    &:hover, &:has(input[type="checkbox"]:checked) { @apply bg-surface; }
    @media (prefers-reduced-motion: reduce) { transition: none; }
  }
  .k-table-footer { @apply border-t border-line bg-surface font-medium; }
  .k-table-head { @apply px-3 py-3 text-start align-middle font-medium whitespace-nowrap; }
  .k-table-cell { @apply px-3 py-3 text-start align-middle; }
  .k-table-sm {
    & :is(.k-table-head, .k-table-cell) { @apply px-2 py-1.5; }
  }
  .k-table-lg {
    & :is(.k-table-head, .k-table-cell) { @apply px-4 py-4; }
  }

  /* Decorative loading shapes: size with Tailwind utilities and hide from AT.
     Put a readable loading label and aria-busy on the content container. */
  .k-skeleton {
    @apply block rounded-control bg-line;
    @media (forced-colors: active) { background-color: GrayText; }
  }

  /* Use hr for a thematic break; decorative dividers should be aria-hidden.
     A vertical role="separator" also needs aria-orientation="vertical". */
  .k-separator {
    @apply m-0 block h-px w-full shrink-0 border-0 bg-line;
    @media (forced-colors: active) { background-color: CanvasText; }
  }
  .k-separator-horizontal { @apply h-px w-full self-auto; }
  .k-separator-vertical { @apply h-auto w-px self-stretch; }

  /* Section rhythm: 1rem content, 2rem cards, 3rem text rows, 4rem text columns.
     Card padding: 2rem mobile; standard 2.5rem, large 3 → 4rem, XL 4 → 5rem.
     Section padding: 4rem mobile, 6rem desktop. Tailwind spacing utilities
     remain available for composition and responsive overrides. */
  .k-section { @apply py-16 lg:py-24; }
  .k-layout { @apply grid grid-cols-1 gap-8; }
  .k-layout > * { min-width: 0; }
  .k-layout-text { @apply gap-x-16 gap-y-12; }
  .k-cell-stack { @apply grid gap-8; }
  .k-card-lg { @apply p-8 sm:p-12 lg:p-16; }
  .k-card-xl { @apply p-8 sm:p-16 lg:p-20; }
}