/* HDI Frontend 0.12.0 component CSS, subset for the Pi maps.
 *
 * Source: design_system-hdi/public/design_system/static/hdi-frontend-0.12.0/
 * (compiled from hdi-frontend). Vendored so the kiosk stays offline and
 * does not load Tailwind preflight or the portal sidebar layout
 * (.hdi-main-wrapper lg:pl-72, .hdi-footer sidebar padding).
 *
 * Markup should use these class names (hdi-button, hdi-checkboxes, hdi-card,
 * hdi-tabs, hdi-search-form, hdi-input, hdi-link, …). Page CSS may compact
 * them for a workstation glance; it should not re-skin the components.
 */

:root, :host {
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --spacing: 0.25rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-snug: 1.375;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --color-hdi-indigo: rgb(72 49 144);
  --tw-border-style: solid;
  --tw-shadow: 0 0 #0000;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-outline-style: solid;
}

/* HDI light / dark tokens (hdi-frontend 0.12.0). --depth: 0 turns off the
   daisyUI coloured drop-shadow on .hdi-button; form fields keep their
   4px primary/20 focus ring from the component CSS. */
:root, [data-theme="light"] {
  color-scheme: light;
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0 0);
  --color-base-300: oklch(95% 0 0);
  --color-base-content: oklch(21% 0.006 285.885);
  --color-primary: rgb(67 45 246);
  --color-primary-content: #ffffff;
  --color-secondary: rgb(83 86 101);
  --color-secondary-content: #ffffff;
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-error: rgb(178 30 21);
  --color-error-content: #ffffff;
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
  --hdi-icon-magnifying-glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --color-base-100: oklch(25.33% 0.016 252.42);
    --color-base-200: oklch(23.26% 0.014 253.1);
    --color-base-300: oklch(21.15% 0.012 254.09);
    --color-base-content: oklch(97.807% 0.029 256.847);
    --color-primary: rgb(148 136 246);
    --color-primary-content: black;
    --color-secondary: rgb(153 161 175);
    --color-secondary-content: black;
    --color-error: rgb(219 123 131);
    --color-error-content: black;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-base-100: oklch(25.33% 0.016 252.42);
  --color-base-200: oklch(23.26% 0.014 253.1);
  --color-base-300: oklch(21.15% 0.012 254.09);
  --color-base-content: oklch(97.807% 0.029 256.847);
  --color-primary: rgb(148 136 246);
  --color-primary-content: black;
  --color-secondary: rgb(153 161 175);
  --color-secondary-content: black;
  --color-error: rgb(219 123 131);
  --color-error-content: black;
}

.hdi-button {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: calc(0.25rem * 1.5);
  text-align: center;
  vertical-align: middle;
  outline-offset: 2px;
  webkit-user-select: none;
  user-select: none;
  padding-inline: var(--btn-p);
  color: var(--btn-fg);
  --tw-prose-links: var(--btn-fg);
  height: var(--size);
  font-size: var(--fontsize, 0.875rem);
  font-weight: 600;
  outline-color: var(--btn-color, var(--color-base-content));
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 0.2s;
  border-start-start-radius: var(--join-ss, var(--radius-field));
  border-start-end-radius: var(--join-se, var(--radius-field));
  border-end-start-radius: var(--join-es, var(--radius-field));
  border-end-end-radius: var(--join-ee, var(--radius-field));
  background-color: var(--btn-bg);
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--btn-noise);
  border-width: var(--border);
  border-style: solid;
  border-color: var(--btn-border);
  text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
  box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
  --size: calc(var(--size-field, 0.25rem) * 10);
  --btn-bg: var(--btn-color, var(--color-base-200));
  --btn-fg: var(--color-base-content);
  --btn-p: 1rem;
  --btn-border: var(--btn-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
  }
  --btn-shadow: 0 3px 2px -2px var(--btn-bg),
    0 4px 3px -2px var(--btn-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
    0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
  }
  --btn-noise: var(--fx-noise);
  .prose & {
    text-decoration-line: none;
  }
  @media (hover: hover) {
    &:hover {
      --btn-bg: var(--btn-color, var(--color-base-200));
      @supports (color: color-mix(in lab, red, red)) {
        --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
      }
    }
  }
  &.btn-active {
    --btn-bg: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
    }
    --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
    isolation: isolate;
  }
  &:focus-visible {
    outline-width: 2px;
    outline-style: solid;
  }
  &:active:not(.btn-active) {
    translate: 0 0.5px;
    --btn-bg: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
    }
    --btn-border: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
    }
    --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
  }
  &:is(:disabled, [disabled], .btn-disabled) {
    &:not(.btn-link, .btn-ghost) {
      background-color: var(--color-base-content);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
      }
      box-shadow: none;
    }
    pointer-events: none;
    --btn-border: #0000;
    --btn-noise: none;
    --btn-fg: var(--color-base-content);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
    }
    @media (hover: hover) {
      &:hover {
        pointer-events: none;
        background-color: var(--color-neutral);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
        }
        --btn-border: #0000;
        --btn-fg: var(--color-base-content);
        @supports (color: color-mix(in lab, red, red)) {
          --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
        }
      }
    }
  }
  &:is(input[type="checkbox"], input[type="radio"]) {
    appearance: none;
    &::after {
      content: attr(aria-label);
    }
  }
  &:where(input:checked:not(.filter .btn)) {
    --btn-color: var(--color-primary);
    --btn-fg: var(--color-primary-content);
    isolation: isolate;
  }
  margin-top: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 4);
  max-width: 100%;
  min-width: 120px;
  text-wrap: wrap;
  --btn-color: var(--color-primary);
  --btn-fg: var(--color-primary-content);
  @media (width >= 40rem) {
    min-width: calc(var(--spacing) * 0);
  }
}

.hdi-button--secondary {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: calc(0.25rem * 1.5);
  text-align: center;
  vertical-align: middle;
  outline-offset: 2px;
  webkit-user-select: none;
  user-select: none;
  padding-inline: var(--btn-p);
  color: var(--btn-fg);
  --tw-prose-links: var(--btn-fg);
  height: var(--size);
  font-size: var(--fontsize, 0.875rem);
  font-weight: 600;
  outline-color: var(--btn-color, var(--color-base-content));
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 0.2s;
  border-start-start-radius: var(--join-ss, var(--radius-field));
  border-start-end-radius: var(--join-se, var(--radius-field));
  border-end-start-radius: var(--join-es, var(--radius-field));
  border-end-end-radius: var(--join-ee, var(--radius-field));
  background-color: var(--btn-bg);
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--btn-noise);
  border-width: var(--border);
  border-style: solid;
  border-color: var(--btn-border);
  text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
  box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
  --size: calc(var(--size-field, 0.25rem) * 10);
  --btn-bg: var(--btn-color, var(--color-base-200));
  --btn-fg: var(--color-base-content);
  --btn-p: 1rem;
  --btn-border: var(--btn-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
  }
  --btn-shadow: 0 3px 2px -2px var(--btn-bg),
    0 4px 3px -2px var(--btn-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
    0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
  }
  --btn-noise: var(--fx-noise);
  .prose & {
    text-decoration-line: none;
  }
  @media (hover: hover) {
    &:hover {
      --btn-bg: var(--btn-color, var(--color-base-200));
      @supports (color: color-mix(in lab, red, red)) {
        --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
      }
    }
  }
  &.btn-active {
    --btn-bg: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
    }
    --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
    isolation: isolate;
  }
  &:focus-visible {
    outline-width: 2px;
    outline-style: solid;
  }
  &:active:not(.btn-active) {
    translate: 0 0.5px;
    --btn-bg: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
    }
    --btn-border: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
    }
    --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
  }
  &:is(:disabled, [disabled], .btn-disabled) {
    &:not(.btn-link, .btn-ghost) {
      background-color: var(--color-base-content);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
      }
      box-shadow: none;
    }
    pointer-events: none;
    --btn-border: #0000;
    --btn-noise: none;
    --btn-fg: var(--color-base-content);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
    }
    @media (hover: hover) {
      &:hover {
        pointer-events: none;
        background-color: var(--color-neutral);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
        }
        --btn-border: #0000;
        --btn-fg: var(--color-base-content);
        @supports (color: color-mix(in lab, red, red)) {
          --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
        }
      }
    }
  }
  &:is(input[type="checkbox"], input[type="radio"]) {
    appearance: none;
    &::after {
      content: attr(aria-label);
    }
  }
  &:where(input:checked:not(.filter .btn)) {
    --btn-color: var(--color-primary);
    --btn-fg: var(--color-primary-content);
    isolation: isolate;
  }
  --btn-color: var(--color-secondary);
  --btn-fg: var(--color-secondary-content);
}

.hdi-button--warning {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: calc(0.25rem * 1.5);
  text-align: center;
  vertical-align: middle;
  outline-offset: 2px;
  webkit-user-select: none;
  user-select: none;
  padding-inline: var(--btn-p);
  color: var(--btn-fg);
  --tw-prose-links: var(--btn-fg);
  height: var(--size);
  font-size: var(--fontsize, 0.875rem);
  font-weight: 600;
  outline-color: var(--btn-color, var(--color-base-content));
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 0.2s;
  border-start-start-radius: var(--join-ss, var(--radius-field));
  border-start-end-radius: var(--join-se, var(--radius-field));
  border-end-start-radius: var(--join-es, var(--radius-field));
  border-end-end-radius: var(--join-ee, var(--radius-field));
  background-color: var(--btn-bg);
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--btn-noise);
  border-width: var(--border);
  border-style: solid;
  border-color: var(--btn-border);
  text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
  box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
  --size: calc(var(--size-field, 0.25rem) * 10);
  --btn-bg: var(--btn-color, var(--color-base-200));
  --btn-fg: var(--color-base-content);
  --btn-p: 1rem;
  --btn-border: var(--btn-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
  }
  --btn-shadow: 0 3px 2px -2px var(--btn-bg),
    0 4px 3px -2px var(--btn-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
    0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
  }
  --btn-noise: var(--fx-noise);
  .prose & {
    text-decoration-line: none;
  }
  @media (hover: hover) {
    &:hover {
      --btn-bg: var(--btn-color, var(--color-base-200));
      @supports (color: color-mix(in lab, red, red)) {
        --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
      }
    }
  }
  &.btn-active {
    --btn-bg: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
    }
    --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
    isolation: isolate;
  }
  &:focus-visible {
    outline-width: 2px;
    outline-style: solid;
  }
  &:active:not(.btn-active) {
    translate: 0 0.5px;
    --btn-bg: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
    }
    --btn-border: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
    }
    --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
  }
  &:is(:disabled, [disabled], .btn-disabled) {
    &:not(.btn-link, .btn-ghost) {
      background-color: var(--color-base-content);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
      }
      box-shadow: none;
    }
    pointer-events: none;
    --btn-border: #0000;
    --btn-noise: none;
    --btn-fg: var(--color-base-content);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
    }
    @media (hover: hover) {
      &:hover {
        pointer-events: none;
        background-color: var(--color-neutral);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
        }
        --btn-border: #0000;
        --btn-fg: var(--color-base-content);
        @supports (color: color-mix(in lab, red, red)) {
          --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
        }
      }
    }
  }
  &:is(input[type="checkbox"], input[type="radio"]) {
    appearance: none;
    &::after {
      content: attr(aria-label);
    }
  }
  &:where(input:checked:not(.filter .btn)) {
    --btn-color: var(--color-primary);
    --btn-fg: var(--color-primary-content);
    isolation: isolate;
  }
  --btn-color: var(--color-error);
  --btn-fg: var(--color-error-content);
}

.hdi-button--reverse {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: calc(0.25rem * 1.5);
  text-align: center;
  vertical-align: middle;
  outline-offset: 2px;
  webkit-user-select: none;
  user-select: none;
  padding-inline: var(--btn-p);
  color: var(--btn-fg);
  --tw-prose-links: var(--btn-fg);
  height: var(--size);
  font-size: var(--fontsize, 0.875rem);
  font-weight: 600;
  outline-color: var(--btn-color, var(--color-base-content));
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 0.2s;
  border-start-start-radius: var(--join-ss, var(--radius-field));
  border-start-end-radius: var(--join-se, var(--radius-field));
  border-end-start-radius: var(--join-es, var(--radius-field));
  border-end-end-radius: var(--join-ee, var(--radius-field));
  background-color: var(--btn-bg);
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--btn-noise);
  border-width: var(--border);
  border-style: solid;
  border-color: var(--btn-border);
  text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
  box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
  --size: calc(var(--size-field, 0.25rem) * 10);
  --btn-bg: var(--btn-color, var(--color-base-200));
  --btn-fg: var(--color-base-content);
  --btn-p: 1rem;
  --btn-border: var(--btn-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
  }
  --btn-shadow: 0 3px 2px -2px var(--btn-bg),
    0 4px 3px -2px var(--btn-bg);
  @supports (color: color-mix(in lab, red, red)) {
    --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
    0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
  }
  --btn-noise: var(--fx-noise);
  .prose & {
    text-decoration-line: none;
  }
  @media (hover: hover) {
    &:hover {
      --btn-bg: var(--btn-color, var(--color-base-200));
      @supports (color: color-mix(in lab, red, red)) {
        --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
      }
    }
  }
  &.btn-active {
    --btn-bg: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
    }
    --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
    isolation: isolate;
  }
  &:focus-visible {
    outline-width: 2px;
    outline-style: solid;
  }
  &:active:not(.btn-active) {
    translate: 0 0.5px;
    --btn-bg: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
    }
    --btn-border: var(--btn-color, var(--color-base-200));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
    }
    --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
  }
  &:is(:disabled, [disabled], .btn-disabled) {
    &:not(.btn-link, .btn-ghost) {
      background-color: var(--color-base-content);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
      }
      box-shadow: none;
    }
    pointer-events: none;
    --btn-border: #0000;
    --btn-noise: none;
    --btn-fg: var(--color-base-content);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
    }
    @media (hover: hover) {
      &:hover {
        pointer-events: none;
        background-color: var(--color-neutral);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
        }
        --btn-border: #0000;
        --btn-fg: var(--color-base-content);
        @supports (color: color-mix(in lab, red, red)) {
          --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
        }
      }
    }
  }
  &:is(input[type="checkbox"], input[type="radio"]) {
    appearance: none;
    &::after {
      content: attr(aria-label);
    }
  }
  &:where(input:checked:not(.filter .btn)) {
    --btn-color: var(--color-primary);
    --btn-fg: var(--color-primary-content);
    isolation: isolate;
  }
  background-color: var(--color-gray-50);
  color: var(--color-primary);
}

.hdi-button--disabled {
  pointer-events: none;
  opacity: 30%;
}

.hdi-button.hdi-button--disabled {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
}

.hdi-button--secondary.hdi-button--disabled {
  background-color: var(--color-secondary) !important;
  color: var(--color-secondary-content) !important;
}

.hdi-button--warning.hdi-button--disabled {
  background-color: var(--color-error) !important;
  color: var(--color-error-content) !important;
}

.hdi-button--reverse.hdi-button--disabled {
  background-color: var(--color-gray-50) !important;
  color: var(--color-primary) !important;
}

.hdi-button--wide {
  width: 100%;
  max-width: calc(0.25rem * 64);
}

.hdi-button--block {
  width: 100%;
}

.hdi-button--start {
  display: inline-flex;
  min-height: auto;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

.hdi-button__start-icon {
  margin-left: calc(var(--spacing) * 1);
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  flex-shrink: 0;
  align-self: center;
  vertical-align: middle;
  forced-color-adjust: auto;
  @media (width >= 40rem) {
    margin-left: calc(var(--spacing) * 2);
  }
}

.hdi-card {
  position: relative;
  margin-bottom: calc(var(--spacing) * 4);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-base-content);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-base-content) 15%, transparent);
  }
  background-color: var(--color-base-100);
}

.hdi-card__heading-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-base-content);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-base-content) 15%, transparent);
  }
  background-color: var(--color-base-200);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
}

.hdi-card__heading {
  margin: calc(var(--spacing) * 0);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-base-content);
}

.hdi-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 0);
}

.hdi-card__action {
  display: inline-block;
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
  border-color: var(--color-base-content);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
  }
  padding-inline: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  &:first-child {
    padding-left: calc(var(--spacing) * 0);
  }
  &:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
    padding-right: calc(var(--spacing) * 0);
  }
  &:only-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
    padding-right: calc(var(--spacing) * 0);
    padding-left: calc(var(--spacing) * 0);
  }
}

.hdi-card__content {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
}

.hdi-card__content > .hdi-summary-list {
  padding-block: calc(var(--spacing) * 0);
}

.hdi-card__content > .hdi-summary-list > .hdi-summary-list__row {
  padding-inline: calc(var(--spacing) * 0);
}

.hdi-card__content > .hdi-summary-list > .hdi-summary-list__row:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0px;
}

/* daisyUI alert, HDI tokens. A standing notice, not a toast. */
.hdi-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-field);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent);
  background-color: var(--color-base-200);
  color: var(--color-base-content);
  font-size: 0.875rem;
  line-height: 1.4;
}
.hdi-alert__icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}
.hdi-alert__body { min-width: 0; }
.hdi-alert__title {
  margin: 0;
  font-weight: 600;
}
.hdi-alert__body p { margin: 0; }
.hdi-alert__body p + p { margin-top: 0.15rem; }
.hdi-alert--warning {
  background-color: color-mix(in oklab, var(--color-error) 8%, var(--color-base-100));
  border-color: color-mix(in oklab, var(--color-error) 28%, transparent);
  color: var(--color-error);
}

/* daisyUI collapse, HDI tokens. JS toggles --open; not a click target here. */
.hdi-collapse-content { display: none; }
.hdi-collapse-open > .hdi-collapse-content,
.hdi-collapse-open .hdi-collapse-content { display: block; }

/* daisyUI table, HDI tokens. Compare several rows of the same kind. */
.hdi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
}
.hdi-table :where(th, td) {
  padding: 0.5rem 0.625rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
}
.hdi-table th {
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}
.hdi-table tbody tr:hover {
  background-color: var(--color-base-200);
}

/* daisyUI join, HDI tokens. Groups buttons so first/last share a radius. */
.hdi-join {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
}
.hdi-join--vertical { flex-direction: column; }
.hdi-join-item { border-radius: 0; }

/* daisyUI btn-square, HDI button. Icon-only control. */
.hdi-button--square {
  --btn-p: 0;
  width: var(--size);
  height: var(--size);
  min-width: var(--size);
  padding-inline: 0;
}

/* daisyUI swap, HDI tokens. Two faces; .hdi-swap-active shows --on. */
.hdi-swap {
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
}
.hdi-button.hdi-swap { display: inline-grid; }
.hdi-swap > * {
  grid-row-start: 1;
  grid-column-start: 1;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 0.2s;
}
.hdi-swap .hdi-swap-on { opacity: 0; }
.hdi-swap.hdi-swap-active .hdi-swap-off { opacity: 0; }
.hdi-swap.hdi-swap-active .hdi-swap-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hdi-swap > * { transition: none; }
}

/* daisyUI range, HDI tokens. Thumb colour is currentColor. */
.hdi-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.5rem;
  cursor: pointer;
  background: transparent;
  --range-thumb: 1.25rem;
  --range-track: 0.375rem;
}
.hdi-range::-webkit-slider-runnable-track {
  height: var(--range-track);
  width: 100%;
  background: color-mix(in oklab, currentColor 22%, transparent);
  border-radius: var(--radius-field);
}
.hdi-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--range-thumb);
  height: var(--range-thumb);
  margin-top: calc(var(--range-track) / 2 - var(--range-thumb) / 2);
  border: 0;
  border-radius: 50%;
  background: currentColor;
}
.hdi-range::-moz-range-track {
  height: var(--range-track);
  background: color-mix(in oklab, currentColor 22%, transparent);
  border-radius: var(--radius-field);
}
.hdi-range::-moz-range-thumb {
  width: var(--range-thumb);
  height: var(--range-thumb);
  border: 0;
  border-radius: 50%;
  background: currentColor;
}

/* daisyUI list, HDI tokens. Rows of the same kind with an action. */
.hdi-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: inherit;
}
.hdi-list-row {
  --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, 1fr) auto;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: var(--list-grid-cols);
  align-items: center;
  gap: 0.75rem;
  position: relative;
  padding: 0.5rem 0;
  word-break: break-word;
}
.hdi-list-row:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
}
.hdi-list-col-grow { min-width: 0; overflow: hidden; }
.hdi-list-row:has(.hdi-list-col-grow:nth-child(3)) {
  --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, 1fr) auto;
}

.hdi-checkboxes {
  margin-top: calc(var(--spacing) * 2);
  display: block;
}

.hdi-checkboxes__item {
  position: relative;
  margin-bottom: calc(var(--spacing) * 1);
  display: flex;
  flex-direction: column;
  padding: calc(var(--spacing) * 1);
  padding-left: calc(var(--spacing) * 8);
}

.hdi-checkboxes__item:last-child {
  margin-bottom: calc(var(--spacing) * 0);
}

.hdi-checkboxes__input {
  border: var(--border) solid var(--input-color, var(--color-base-content));
  @supports (color: color-mix(in lab, red, red)) {
    border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
  }
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  appearance: none;
  border-radius: var(--radius-selector);
  padding: calc(0.25rem * 1);
  vertical-align: middle;
  color: var(--color-base-content);
  box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000;
  transition: background-color 0.2s, box-shadow 0.2s;
  --size: calc(var(--size-selector, 0.25rem) * 6);
  width: var(--size);
  height: var(--size);
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--fx-noise);
  &:before {
    --tw-content: "";
    content: var(--tw-content);
    display: block;
    width: 100%;
    height: 100%;
    rotate: 45deg;
    background-color: currentColor;
    opacity: 0%;
    transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;
    transition-delay: 0.1s;
    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
    box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
    font-size: 1rem;
    line-height: 0.75;
  }
  &:focus-visible {
    outline: 2px solid var(--input-color, currentColor);
    outline-offset: 2px;
  }
  &:checked, &[aria-checked="true"] {
    background-color: var(--input-color, #0000);
    box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
    &:before {
      clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
      opacity: 100%;
    }
    @media (forced-colors: active) {
      &:before {
        rotate: 0deg;
        background-color: transparent;
        --tw-content: "✔︎";
        clip-path: none;
      }
    }
    @media print {
      &:before {
        rotate: 0deg;
        background-color: transparent;
        --tw-content: "✔︎";
        clip-path: none;
      }
    }
  }
  &:indeterminate {
    &:before {
      rotate: 0deg;
      opacity: 100%;
      translate: 0 -35%;
      clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
    }
  }
  &:disabled {
    cursor: not-allowed;
    opacity: 20%;
  }
  position: absolute;
  left: calc(var(--spacing) * 1);
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-gray-300);
  background-color: var(--color-base-100);
  color: var(--color-primary-content);
  --input-color: var(--color-primary);
  &:focus {
    border-color: var(--color-primary);
  }
  &:focus {
    outline-style: var(--tw-outline-style);
    outline-width: 4px;
  }
  &:focus {
    outline-offset: 0px;
  }
  &:focus {
    outline-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }
}

.hdi-checkboxes__label {
  margin-left: calc(var(--spacing) * 1);
  width: 100%;
  cursor: pointer;
  overflow-wrap: break-word;
  display: inline !important;
}

.hdi-checkboxes__hint {
  margin-bottom: calc(var(--spacing) * 0) !important;
  margin-left: calc(var(--spacing) * 1);
  display: block;
  --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
}

.hdi-checkboxes__input:disabled + .hdi-checkboxes__label {
  cursor: default;
  opacity: 30%;
}

.hdi-fieldset {
  margin-block: calc(var(--spacing) * 2);
  display: grid;
  gap: calc(0.25rem * 1.5);
  padding-block: calc(0.25rem * 1);
  font-size: 0.75rem;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  row-gap: calc(var(--spacing) * 1);
  /* Dummy app never shows a box here: Tailwind preflight zeroes the
     browser fieldset groove. This file ships without preflight. */
  border: 0;
  min-inline-size: 0;
}

.hdi-fieldset__legend {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.hdi-fieldset__legend--xl, .hdi-fieldset__legend--l, .hdi-fieldset__legend--m {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

.hdi-fieldset__legend--xl {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
}

.hdi-fieldset__legend--l {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}

.hdi-fieldset__legend--m {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}

.hdi-fieldset__legend--s {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

.hdi-fieldset__heading {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  overflow-wrap: break-word;
}

.hdi-fieldset__legend + .hdi-hint {
  margin-top: calc(var(--spacing) * 0);
  row-gap: calc(var(--spacing) * 0.5);
}

.hdi-form-group {
  clear: both;
  margin-bottom: calc(var(--spacing) * 2);
}

.hdi-form-group:last-of-type {
  margin-bottom: calc(var(--spacing) * 0);
}

.hdi-form-group--error {
  display: flex;
  flex-direction: column;
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  --tw-border-style: solid;
  border-style: solid;
  border-color: var(--color-error);
  padding-left: calc(var(--spacing) * 3);
}

.hdi-form-group--error .hdi-form-group {
  border-style: var(--tw-border-style);
  border-width: 0px;
  padding: calc(var(--spacing) * 0);
}

.hdi-footer-container {
  display: grid;
  width: 100%;
  grid-auto-flow: row;
  place-items: start;
  column-gap: calc(0.25rem * 4);
  row-gap: calc(0.25rem * 10);
  font-size: 0.875rem;
  line-height: 1.25rem;
  & > * {
    display: grid;
    place-items: start;
    gap: calc(0.25rem * 2);
  }
  &.footer-center {
    grid-auto-flow: column dense;
    place-items: center;
    text-align: center;
    & > * {
      place-items: center;
    }
  }
  background-color: var(--color-hdi-indigo);
  padding-top: calc(var(--spacing) * 5);
  color: var(--color-base-content);
  @media (width >= 40rem) {
    grid-auto-flow: column;
    &.footer-center {
      grid-auto-flow: row dense;
    }
  }
}

.hdi-footer__list {
  margin-bottom: calc(var(--spacing) * 5);
  list-style-type: none;
  padding-left: calc(var(--spacing) * 0);
}

.hdi-footer__list-item {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  @media (width >= 64rem) {
    float: none;
  }
  @media (width >= 64rem) {
    margin-right: calc(var(--spacing) * 0);
  }
}

.hdi-footer__list-item-link, .hdi-footer__list-item-link:visited {
  color: var(--color-neutral-content);
}

.hdi-footer__copyright {
  margin-bottom: calc(var(--spacing) * 0);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
  color: var(--color-neutral-content);
}

.hdi-hint {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-base-content);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  }
}

.hdi-input {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-gray-300);
  background-color: var(--color-base-100);
  padding-block: calc(var(--spacing) * 1.5);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &::placeholder {
    color: var(--color-gray-400);
  }
  &:focus {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  &:focus {
    border-color: var(--color-primary);
  }
  &:focus {
    outline-style: var(--tw-outline-style);
    outline-width: 4px;
  }
  &:focus {
    outline-offset: 0px;
  }
  &:focus {
    outline-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }
  @media (width >= 40rem) {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  @media (width >= 40rem) {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
}

.hdi-input--width-30 {
  max-width: 29.5em;
}

.hdi-input--width-20 {
  max-width: 20.5em;
}

.hdi-input--width-10 {
  max-width: 11.5em;
}

.hdi-input--width-5 {
  max-width: 5.5em;
}

.hdi-input--width-4 {
  max-width: 4.5em;
}

.hdi-input--width-3 {
  max-width: 3.75em;
}

.hdi-input--width-2 {
  max-width: 3.25em;
}

.hdi-input__wrapper {
  display: block;
  @media (width >= 40rem) {
    display: flex;
  }
  .hdi-input {
    flex: auto;
  }
  .hdi-input:focus {
    z-index: 1;
  }
}

.hdi-input--error {
  border-style: var(--tw-border-style);
  border-width: 3px;
  border-color: var(--color-error);
}

.hdi-input:last-child {
  margin-bottom: calc(var(--spacing) * 0);
}

.hdi-label {
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.hdi-label--xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}

.hdi-label--l {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}

.hdi-label--m {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}

.hdi-label--s {
  margin-top: calc(var(--spacing) * 0);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.hdi-label-wrapper {
  margin: calc(var(--spacing) * 0);
}

.hdi-label + .hdi-hint {
  margin-top: calc(var(--spacing) * 0);
}

.hdi-label--xl + .hdi-hint, .hdi-label--l + .hdi-hint, .hdi-label--m + .hdi-hint {
  row-gap: calc(var(--spacing) * 0.5);
}

.hdi-link {
  cursor: pointer;
  text-decoration-line: underline;
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  @media (hover: hover) {
    &:hover {
      color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-primary) 80%, #000);
      }
    }
  }
  text-decoration-line: none;
  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}

.hdi-search-form {
  position: relative;
  display: flex;
  border-radius: var(--radius-md);
}

.hdi-search__input {
  grid-column-start: 1;
  grid-row-start: 1;
  border-radius: 0 !important;
  border-top-left-radius: var(--radius-md) !important;
  border-bottom-left-radius: var(--radius-md) !important;
  padding-right: calc(var(--spacing) * 3);
}

.hdi-search__submit {
  grid-column-start: 2;
  grid-row-start: 1;
  display: inline-flex;
  align-items: center;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-left-style: var(--tw-border-style);
  border-left-width: 0px;
  border-color: var(--color-gray-300);
  background-color: var(--color-base-100);
  padding-inline: calc(var(--spacing) * 3);
  color: var(--color-gray-500);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50);
    }
  }
}

.hdi-search__submit::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  mask: var(--hdi-icon-magnifying-glass) no-repeat center / contain;
}

.hdi-icon__search {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  color: var(--color-gray-400);
}

.hdi-select {
  border: var(--border) solid #0000;
  position: relative;
  display: inline-flex;
  flex-shrink: 1;
  appearance: none;
  align-items: center;
  gap: calc(0.25rem * 1.5);
  background-color: var(--color-base-100);
  padding-inline-start: calc(0.25rem * 4);
  padding-inline-end: calc(0.25rem * 7);
  vertical-align: middle;
  width: clamp(3rem, 20rem, 100%);
  height: var(--size);
  font-size: 0.875rem;
  border-start-start-radius: var(--join-ss, var(--radius-field));
  border-start-end-radius: var(--join-se, var(--radius-field));
  border-end-start-radius: var(--join-es, var(--radius-field));
  border-end-end-radius: var(--join-ee, var(--radius-field));
  background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
  background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
  }
  border-color: var(--input-color);
  --input-color: var(--color-base-content);
  @supports (color: color-mix(in lab, red, red)) {
    --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
  }
  --size: calc(var(--size-field, 0.25rem) * 10);
  [dir="rtl"] & {
    background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
  }
  select {
    margin-inline-start: calc(0.25rem * -4);
    margin-inline-end: calc(0.25rem * -7);
    width: calc(100% + 2.75rem);
    appearance: none;
    padding-inline-start: calc(0.25rem * 4);
    padding-inline-end: calc(0.25rem * 7);
    height: calc(100% - 2px);
    background: inherit;
    border-radius: inherit;
    border-style: none;
    &:focus, &:focus-within {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  &:focus, &:focus-within {
    --input-color: var(--color-base-content);
    box-shadow: 0 1px var(--input-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
    }
    outline: 2px solid var(--input-color);
    outline-offset: 2px;
  }
  &:has(> select[disabled]), &:is(:disabled, [disabled]) {
    cursor: not-allowed;
    border-color: var(--color-base-200);
    background-color: var(--color-base-200);
    color: var(--color-base-content);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
    }
    &::placeholder {
      color: var(--color-base-content);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
      }
    }
  }
  &:has(> select[disabled]) > select[disabled] {
    cursor: not-allowed;
  }
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  cursor: pointer;
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-gray-300);
  background-color: var(--color-base-100);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  &, &:focus, &:focus-within {
    --input-color: var(--color-primary);
  }
  &:focus {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  &:focus {
    border-color: var(--color-primary);
  }
  &:focus {
    outline-style: var(--tw-outline-style);
    outline-width: 4px;
  }
  &:focus {
    outline-offset: 0px;
  }
  &:focus {
    outline-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }
}

.hdi-select--error {
  border-style: var(--tw-border-style);
  border-width: 3px;
  border-color: var(--color-error);
}

.hdi-tabs {
  margin-bottom: calc(var(--spacing) * 4);
}

.hdi-tabs__title {
  display: none;
  text-align: center;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.hdi-tabs__list {
  margin-bottom: -1px;
  display: flex;
  flex-wrap: wrap;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-neutral-content);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-neutral-content) 40%, transparent);
  }
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.hdi-tabs__list-item {
  margin-inline-end: calc(var(--spacing) * 2);
  cursor: pointer;
  text-decoration-line: underline;
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  @media (hover: hover) {
    &:hover {
      color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-primary) 80%, #000);
      }
    }
  }
  text-decoration-line: none;
  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}

.hdi-tabs__tab {
  display: inline-block;
  cursor: pointer;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: var(--color-base-content);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  }
  padding: calc(var(--spacing) * 4);
  color: var(--color-base-content);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-neutral);
    }
  }
}

.hdi-tabs__tab--selected {
  margin-bottom: -1px;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-neutral-content);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-neutral-content) 40%, transparent);
  }
  border-bottom-color: transparent;
  background-color: var(--color-base-100);
  color: var(--color-primary);
  &:hover {
    @media (hover: hover) {
      color: var(--color-primary);
    }
  }
}

.hdi-tabs__panel {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-neutral-content);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-neutral-content) 40%, transparent);
  }
  background-color: var(--color-base-100);
  padding: calc(var(--spacing) * 4);
}

.hdi-tabs__panel--hidden {
  display: none;
}

.hdi-tabs__panel-content {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-base-content);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  }
}

.hdi-button-group {
  margin-bottom: calc(var(--spacing) * 6);
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }
  column-gap: calc(var(--spacing) * 4);
}

.hdi-width-container {
  margin-inline: auto;
  width: 100%;
  max-width: 100%;
}

.hdi-logo {
  height: calc(var(--spacing) * 8);
  width: auto;
}

h1.hdi-heading-xl {
  margin-bottom: calc(var(--spacing) * 8);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

h2.hdi-heading-l {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

h3.hdi-heading-m {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

h4.hdi-heading-s {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

h5.hdi-heading-xs, h6.hdi-heading-xs {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

h1.hdi-heading-xl + .hdi-button, h2.hdi-heading-l + .hdi-button, h3.hdi-heading-m + .hdi-button, h4.hdi-heading-s + .hdi-button, h5.hdi-heading-xs + .hdi-button, h6.hdi-heading-xs + .hdi-button {
  margin-top: calc(var(--spacing) * -2);
}

.hdi-caption-xl {
  margin-top: calc(var(--spacing) * 1);
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--color-primary);
}

.hdi-caption-l {
  margin-top: calc(var(--spacing) * 1);
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--color-primary);
}

.hdi-caption-m {
  margin-top: calc(var(--spacing) * 1);
  margin-bottom: calc(var(--spacing) * 1);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--color-primary);
}

.hdi-body-xl {
  margin-top: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}

.hdi-body-l {
  margin-top: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}

.hdi-body-m, .hdi-body {
  margin-top: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}

.hdi-body-s {
  margin-top: calc(var(--spacing) * 0);
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.hdi-body-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

.hdi-body-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

.hdi-body-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

/* daisyUI dropdown (details/summary), HDI tokens. Compact enough for a
   banner control; page CSS may shrink padding further. */
.hdi-dropdown {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}
.hdi-dropdown > summary {
  list-style: none;
  cursor: pointer;
}
.hdi-dropdown > summary::-webkit-details-marker {
  display: none;
}
.hdi-dropdown__chevron {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  opacity: 0.8;
  transition: transform 0.15s ease;
}
.hdi-dropdown[open] > summary .hdi-dropdown__chevron {
  transform: rotate(180deg);
}
.hdi-dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  min-width: max(100%, 9.5rem);
  background-color: var(--color-base-100);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent);
  border-radius: var(--radius-md, 0.375rem);
}
.hdi-dropdown__menu > li {
  margin: 0;
  padding: 0;
  display: block;
}
.hdi-dropdown__item {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: var(--radius-field, 0.25rem);
  background: transparent;
  color: var(--color-base-content);
  font: inherit;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.hdi-dropdown__item:hover,
.hdi-dropdown__item:focus-visible {
  background-color: var(--color-base-200);
}
.hdi-dropdown__item[aria-current="true"] {
  font-weight: var(--font-weight-semibold, 600);
}

.hdi-visually-hidden, .hdi-u-visually-hidden {
  &::before {
    content: "\00a0";
  }
  &::after {
    content: "\00a0";
  }
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}