/*
 * Optikos tokens. Three layers, all custom properties:
 *   1. primitives   --op-blue-500            (raw palette, never used by components)
 *   2. semantic     --op-color-primary       (what themes change)
 *   3. component    --op-button-bg           (declared by each component, falls back to a semantic token)
 * Everything lives in @layer optikos so unlayered user CSS always wins without !important.
 * Scope a theme with data-op-theme="dark" (several allowed: "dark compact") on any element.
 */
@layer optikos {
  :root,
  [data-op-theme~='light'] {
    /* primitives */
    --op-gray-0: #ffffff;
    --op-gray-50: #f8fafc;
    --op-gray-100: #f1f5f9;
    --op-gray-200: #e2e8f0;
    --op-gray-300: #cbd5e1;
    --op-gray-400: #94a3b8;
    --op-gray-500: #64748b;
    --op-gray-600: #475569;
    --op-gray-700: #334155;
    --op-gray-800: #1e293b;
    --op-gray-900: #0f172a;
    --op-blue-50: #eff6ff;
    --op-blue-100: #dbeafe;
    --op-blue-500: #3b82f6;
    --op-blue-600: #2563eb;
    --op-blue-700: #1d4ed8;
    --op-red-50: #fef2f2;
    --op-red-500: #ef4444;
    --op-red-600: #dc2626;
    --op-red-700: #b91c1c;
    --op-green-50: #f0fdf4;
    --op-green-600: #16a34a;
    --op-green-700: #15803d;
    --op-amber-50: #fffbeb;
    --op-amber-600: #d97706;
    --op-amber-700: #b45309;

    /* semantic colors: steel blue on cool grey, made for long sessions in grids and forms */
    --op-color-bg: #edf0f4;
    --op-color-surface: var(--op-gray-0);
    --op-color-surface-2: #f3f5f8;
    --op-color-fg: #1b2430;
    --op-color-fg-muted: #5b6676; /* keeps 4.5:1 on surface-2 */
    --op-color-border: #d8dee6;
    --op-color-border-strong: #a9b3c1;
    --op-color-hover: #eaeff6;
    --op-color-selected: #d9e6f7;
    --op-color-primary: #1f4e8c;
    --op-color-primary-hover: #173d6f;
    --op-color-primary-fg: var(--op-gray-0);
    --op-color-primary-soft: #e4edf8;
    --op-color-danger: #b3261e;
    --op-color-danger-hover: #8f1d17;
    --op-color-danger-fg: var(--op-gray-0);
    --op-color-danger-soft: #fbe4e2;
    --op-color-success: #1e7a4d;
    --op-color-success-soft: #dff2e8;
    --op-color-warning: #9a5b00;
    --op-color-warning-soft: #fcecc9;
    --op-color-info: #1f5fa8;
    --op-color-info-soft: #dfeaf8;

    /* categorical series colors (charts, avatars): distinct for color-blind eyes, 3:1 or more on the surface; the first one, unless a theme sets it, is its primary */
    --op-chart-2: #b45309;
    --op-chart-3: #1e7a4d;
    --op-chart-4: #7e3fa8;
    --op-chart-5: #0e7490;
    --op-chart-6: #b3261e;
    --op-chart-7: #8a6d00;
    --op-chart-8: #5b6676;
    --op-color-focus: #2f7bd6;
    --op-color-disabled-fg: #9aa4b2;
    --op-color-disabled-bg: #eef1f5;
    --op-color-overlay: rgb(16 24 38 / 0.5);
    --op-color-inverse-bg: #14213a;
    --op-color-inverse-fg: #eaf0fa;

    /* typography */
    --op-font-family: 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
    --op-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --op-font-size: 0.9375rem;
    --op-font-size-sm: 0.8125rem;
    --op-font-size-lg: 1.0625rem;
    --op-font-size-xl: 1.3125rem;
    --op-line-height: 1.45;
    --op-font-weight: 400;
    --op-font-weight-medium: 500;
    --op-font-weight-bold: 600;

    /* spacing, density, shape: comfortable, small radii, hairline borders */
    --op-space-1: 0.25rem;
    --op-space-2: 0.5rem;
    --op-space-3: 0.875rem;
    --op-space-4: 1.125rem;
    --op-space-5: 1.5rem;
    --op-space-6: 2.25rem;
    --op-control-height: 2.375rem;
    --op-control-padding-x: 0.875rem;
    --op-row-height: 2.75rem;
    --op-border-width: 1px;
    --op-radius-sm: 0.1875rem;
    --op-radius: 0.25rem;
    --op-radius-lg: 0.375rem;
    --op-radius-pill: 62.5rem;
    --op-focus-width: 2px;
    --op-focus-offset: 1px;
    --op-icon-size: 1.3em;
    --op-icon-stroke: 1.75;

    /* elevation and motion: flat at rest, shadows only on what floats */
    --op-shadow-sm: none;
    --op-shadow: 0 2px 6px rgb(16 24 38 / 0.14);
    --op-shadow-lg: 0 10px 28px rgb(16 24 38 / 0.28);
    --op-duration: 90ms;

    /* scrollbars follow the theme: thin, thumb from the strong border, track transparent */
    --op-scrollbar-width: thin;
    --op-scrollbar-size: 0.5rem;
    --op-scrollbar-thumb: var(--op-color-border-strong);
    --op-scrollbar-track: transparent;
    --op-easing: ease-out;
    --op-z-layer: 1000;
  }

  /* The light look's component colors (a navy sidebar, a tinted grid header). Literal values, and not on :root under
     another theme, so a theme that does not set them keeps the component defaults. dark.css sets its own. */
  :root:not([data-op-theme]),
  [data-op-theme~='light'],
  [data-op-theme='compact'] {
    --op-navmenu-item-height: 2.5rem;
    --op-navmenu-bg: #14213a;
    --op-navmenu-fg: #d5ddeb;
    --op-navmenu-group-fg: #8195b4;
    --op-navmenu-item-hover-bg: #1d2f52;
    --op-navmenu-active-bg: #203c6a;
    --op-navmenu-active-fg: #ffffff;
    --op-navmenu-active-bar: #5ea6f5;
    --op-navmenu-badge-bg: #5ea6f5;
    --op-navmenu-badge-fg: #0a1730;
    --op-grid-header-bg: #e6ebf1;
    --op-grid-header-fg: #2a3547;
    --op-field-label-weight: 600;
  }

  @media (prefers-reduced-motion: reduce) {
    :root,
    [data-op-theme] {
      --op-duration: 0.01ms;
    }
  }

  /* inherited: every scroll area below a themed element (and the global layer) picks it up */
  :root,
  [data-op-theme] {
    scrollbar-width: var(--op-scrollbar-width);
    scrollbar-color: var(--op-scrollbar-thumb) var(--op-scrollbar-track);
  }
  /* browsers without scrollbar-color (older Safari) */
  @supports not (scrollbar-color: auto) {
    :root ::-webkit-scrollbar,
    [data-op-theme] ::-webkit-scrollbar {
      inline-size: var(--op-scrollbar-size);
      block-size: var(--op-scrollbar-size);
    }
    :root ::-webkit-scrollbar-thumb,
    [data-op-theme] ::-webkit-scrollbar-thumb {
      background: var(--op-scrollbar-thumb);
      border-radius: var(--op-radius-pill);
    }
    :root ::-webkit-scrollbar-track,
    [data-op-theme] ::-webkit-scrollbar-track {
      background: var(--op-scrollbar-track);
    }
  }

  /* Base look for any themed subtree, so a scoped theme repaints its background and text. */
  [data-op-theme] {
    color: var(--op-color-fg);
    background: var(--op-color-bg);
    font-family: var(--op-font-family);
    font-size: var(--op-font-size);
    line-height: var(--op-line-height);
  }
  :where(.op-layout, .op-component, .op-field, .op-panel, .op-container, .op-layer *) {
    box-sizing: border-box;
  }
}

@layer optikos {
  :root {
    --op-spinner-size: 1.5rem;
    --op-spinner-stroke: 2px;
  }

  /* every Optikos element gets the themed font; zero specificity, so any component rule overrides it */
  :where([class^='op-'], [class*=' op-']) {
    font-family: var(--op-font-family);
    font-size: var(--op-font-size);
  }
  .op-component,
  .op-container {
    color: var(--op-color-fg);
  }

  /* loading mask (Component.setLoading) */
  .is-loading {
    position: relative;
  }
  .op-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--op-space-2);
    background: var(--op-mask-bg, color-mix(in srgb, var(--op-color-surface) 70%, transparent));
    color: var(--op-color-fg);
  }

  .op-spinner {
    display: inline-block;
    box-sizing: border-box;
    width: var(--op-spinner-size);
    height: var(--op-spinner-size);
    border: var(--op-spinner-stroke) solid var(--op-color-border-strong);
    border-top-color: var(--op-spinner-color, var(--op-color-primary));
    border-radius: 50%;
    animation: op-spin 700ms linear infinite;
  }
  @keyframes op-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .op-spinner {
      animation-duration: 2s;
    }
  }

  /* virtual lists (core/virtual.ts) */
  .op-virtual {
    position: relative;
    inline-size: 100%;
  }
  .op-sr-only {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* floating layer */
  .op-layer {
    position: fixed;
    inset: 0;
    z-index: var(--op-z-layer);
    pointer-events: none;
    font-family: var(--op-font-family);
    font-size: var(--op-font-size);
    line-height: var(--op-line-height);
    color: var(--op-color-fg);
  }
  .op-layer > * {
    pointer-events: auto;
  }

  :where(.op-component, .op-field, .op-container) :focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }

  /* print: the page, not the application chrome (Grid has printGrid for what its virtual list does not render) */
  @media print {
    .op-no-print,
    .op-layer,
    .op-navmenu,
    .op-formactions,
    .op-pagination,
    .op-toast,
    .op-mask,
    .op-tabs__list,
    .op-viewport > .op-toolbar,
    .op-button {
      display: none !important;
    }
    .op-viewport,
    .op-viewport > *,
    .op-panel,
    .op-form {
      position: static !important;
      overflow: visible !important;
      block-size: auto !important;
      box-shadow: none !important;
    }
    .op-field,
    .op-panel,
    .op-fieldset {
      break-inside: avoid;
    }
    .op-field__control input,
    .op-field__control textarea {
      border-color: transparent;
      background: none;
      padding-inline: 0;
    }
  }
}

@layer optikos {
  :root {
    --op-field-label-width: 8rem;
  }

  .op-field {
    --_label-fg: var(--op-field-label-fg, var(--op-color-fg));
    display: flex;
    flex-direction: column;
    gap: var(--op-field-gap, var(--op-space-1));
    font-family: var(--op-font-family);
    font-size: var(--op-font-size);
    color: var(--op-color-fg);
    min-width: 0;
  }
  .op-field__label {
    color: var(--_label-fg);
    font-size: var(--op-field-label-size, var(--op-font-size));
    font-weight: var(--op-field-label-weight, var(--op-font-weight-medium));
  }
  .op-field.is-required > .op-field__label::after {
    content: ' *';
    color: var(--op-color-danger);
  }
  .op-field__control {
    min-width: 0;
  }
  .op-field__help {
    color: var(--op-field-help-fg, var(--op-color-fg-muted));
    font-size: var(--op-font-size-sm);
  }
  .op-field__error {
    color: var(--op-field-error-fg, var(--op-color-danger));
    font-size: var(--op-font-size-sm);
  }
  .op-field__error:empty {
    display: none;
  }
  /* stableSize: the error line is always reserved, so a field does not grow when it becomes invalid */
  .op-field.op-stable > .op-field__error:empty {
    display: block;
    min-block-size: calc(var(--op-font-size-sm) * var(--op-line-height));
  }
  .op-field--label-left {
    display: grid;
    grid-template-columns: var(--op-field-label-width) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--op-space-3);
  }
  .op-field--label-left > .op-field__label {
    padding-block: var(--op-space-2);
    grid-column: 1;
  }
  .op-field--label-left > .op-field__control,
  .op-field--label-left > .op-field__help,
  .op-field--label-left > .op-field__error {
    grid-column: 2;
  }
  .op-field.is-disabled {
    color: var(--op-color-disabled-fg);
  }
}

@layer optikos {
  [hidden] {
    display: none !important;
  }
  .op-layout {
    box-sizing: border-box;
  }
  .op-layout-fit {
    display: flex;
    flex-direction: column;
  }
  .op-layout-fit > * {
    flex: 1;
    min-width: 0;
    min-height: 0;
  }
  .op-layout-hbox,
  .op-layout-vbox {
    display: flex;
    gap: var(--op-layout-gap, var(--op-space-2));
    align-items: var(--op-layout-align, stretch);
    justify-content: var(--op-layout-justify, flex-start);
    flex-wrap: var(--op-layout-wrap, nowrap);
  }
  .op-layout-hbox {
    flex-direction: row;
  }
  .op-layout-vbox {
    flex-direction: column;
  }
  .op-layout-hbox > *,
  .op-layout-vbox > * {
    min-width: 0;
    min-height: 0;
  }
  /* a column keeps its children at their natural height (the container scrolls or clips instead of squashing them);
     a child that sets `flex` (e.g. a grid with flex: 1) still grows and shrinks as asked */
  .op-layout-vbox > * {
    flex-shrink: 0;
  }
  /* content that is taller than its column scrolls inside it; it never spills over what comes next */
  .op-layout-vbox {
    overflow: auto;
  }
  .op-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--op-layout-columns, 1), minmax(0, 1fr));
    gap: var(--op-layout-gap, var(--op-space-2));
  }
  .op-layout-border {
    display: grid;
    grid-template-areas: 'north north north' 'west center east' 'south south south';
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--op-layout-gap, 0);
  }
  .op-layout-border > * {
    min-width: 0;
    min-height: 0;
  }
  .op-layout-hbox.op-layout-stack.is-narrow {
    flex-direction: column;
  }
  /* stacked children take their natural height (a `flex: 1` meant for the row would squash them in a column) */
  .op-layout-hbox.op-layout-stack.is-narrow > * {
    flex: 0 0 auto !important;
  }
  .op-layout-grid.is-narrow {
    grid-template-columns: minmax(0, 1fr);
  }
  .op-layout-grid.is-narrow > * {
    grid-column: auto !important;
  }

  /* narrow border layout: one column; west/east become drawers sliding over the center */
  :root {
    --op-region-drawer-width: 20rem;
    --op-region-drawer-z: 3;
  }
  .op-layout-border {
    position: relative;
  }
  .op-layout-border.is-narrow {
    grid-template-areas: 'north' 'center' 'south';
    grid-template-columns: minmax(0, 1fr);
  }
  .op-layout-border.is-narrow > [data-region='west'],
  .op-layout-border.is-narrow > [data-region='east'] {
    position: absolute;
    inset-block: 0;
    z-index: var(--op-region-drawer-z);
    inline-size: min(var(--op-region-drawer-width), 100%) !important;
    visibility: hidden;
    transition: transform var(--op-duration) var(--op-easing), visibility var(--op-duration);
    box-shadow: var(--op-shadow-lg);
  }
  .op-layout-border.is-narrow > [data-region='west'] {
    inset-inline-start: 0;
    transform: translateX(-100%);
  }
  .op-layout-border.is-narrow > [data-region='east'] {
    inset-inline-end: 0;
    transform: translateX(100%);
  }
  .op-layout-border.is-narrow > [data-region].is-open {
    visibility: visible;
    transform: none;
  }
  .op-layout-border.is-narrow.has-open-region::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: calc(var(--op-region-drawer-z) - 1);
    background: var(--op-color-overlay);
  }
}

@layer optikos {
  :root {
    --op-avatar-size: 2.25rem;
    --op-avatar-dot: 0.625rem;
    --op-avatar-size-sm: 1.5rem;
    --op-avatar-size-lg: 3rem;
    --op-avatar-size-xl: 4.5rem;
    --op-avatar-ring: 2px;
  }
  .op-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--op-avatar-size);
    block-size: var(--op-avatar-size);
    background: var(--op-avatar-c, var(--op-chart-1, var(--op-color-primary)));
    color: var(--op-color-surface);
    font-family: var(--op-font-family);
    font-size: calc(var(--op-avatar-size) * 0.4);
    font-weight: 600;
    line-height: 1;
    user-select: none;
  }
  .op-avatar--circle {
    border-radius: 50%;
  }
  .op-avatar--square {
    border-radius: var(--op-avatar-radius, var(--op-radius));
  }
  .op-avatar--sm {
    --op-avatar-size: var(--op-avatar-size-sm);
  }
  .op-avatar--lg {
    --op-avatar-size: var(--op-avatar-size-lg);
  }
  .op-avatar--xl {
    --op-avatar-size: var(--op-avatar-size-xl);
  }
  .op-avatar__img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
  .op-avatar__status {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: var(--op-avatar-dot);
    block-size: var(--op-avatar-dot);
    border-radius: 50%;
    background: var(--op-color-fg-muted);
    box-shadow: 0 0 0 var(--op-avatar-ring) var(--op-color-surface);
  }
  .op-avatar__status.is-online {
    background: var(--op-color-success);
  }
  .op-avatar__status.is-away {
    background: var(--op-color-warning);
  }
  .op-avatar__status.is-busy {
    background: var(--op-color-danger);
  }
}

@layer optikos {
  :root {
    --op-badge-dot-size: 0.5rem;
    --op-badge-height: 1.5em;
    --op-badge-icon-size: 1em;
  }
  .op-badge {
    --_fg: var(--op-color-fg);
    --_bg: var(--op-color-surface-2);
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-1);
    padding: 0 var(--op-badge-padding-x, var(--op-space-2));
    min-block-size: var(--op-badge-height);
    box-sizing: border-box;
    color: var(--op-badge-fg, var(--_fg));
    background: var(--op-badge-bg, var(--_bg));
    border-radius: var(--op-badge-radius, var(--op-radius-pill));
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-badge-font-weight, var(--op-font-weight-bold));
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }
  .op-badge--primary { --_fg: var(--op-color-primary-text, var(--op-color-primary)); --_bg: var(--op-color-primary-soft); }
  .op-badge--success { --_fg: var(--op-color-success); --_bg: var(--op-color-success-soft); }
  .op-badge--warning { --_fg: var(--op-color-warning); --_bg: var(--op-color-warning-soft); }
  .op-badge--danger { --_fg: var(--op-color-danger); --_bg: var(--op-color-danger-soft); }
  .op-badge--info { --_fg: var(--op-color-info); --_bg: var(--op-color-info-soft); }
  .op-badge__dot {
    inline-size: var(--op-badge-dot-size);
    block-size: var(--op-badge-dot-size);
    border-radius: 50%;
    background: currentColor;
  }
  .op-badge .op-icon {
    --op-icon-size: var(--op-badge-icon-size);
  }
}

@layer optikos {
  :root {
    --op-button-spinner-size: 1em;
    --op-button-primary-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.25);
  }

  .op-button {
    --_bg: var(--op-button-bg, var(--op-color-surface));
    --_fg: var(--op-button-fg, var(--op-color-fg));
    --_border: var(--op-button-border, var(--op-color-border-strong));
    --_hover: var(--op-button-hover-bg, var(--op-color-hover));
    --_active: var(--op-button-active-bg, var(--op-color-selected));
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    min-block-size: var(--op-button-height, var(--op-control-height));
    padding: var(--op-button-padding-y, 0) var(--op-button-padding-x, var(--op-control-padding-x));
    font: inherit;
    font-weight: var(--op-button-font-weight, var(--op-font-weight-medium));
    color: var(--_fg);
    background: var(--_bg);
    border: var(--op-border-width) solid var(--_border);
    border-radius: var(--op-button-radius, var(--op-radius));
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background var(--op-duration) var(--op-easing), border-color var(--op-duration) var(--op-easing), transform var(--op-motion-press-duration, 100ms) var(--op-motion-ease-out, ease-out);
  }
  .op-button:hover:not(:disabled) {
    background: var(--_hover);
  }
  .op-button:active:not(:disabled),
  .op-button.is-pressed {
    background: var(--_active);
  }
  .op-button:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  /* normal face and loading face occupy the same grid cell */
  .op-button__face,
  .op-button__busy {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--op-button-gap, var(--op-space-2));
  }
  .op-button--icon-right .op-button__face {
    flex-direction: row-reverse;
  }
  .op-button__busy {
    visibility: hidden;
  }
  .op-button.is-loading .op-button__busy {
    visibility: visible;
  }
  .op-button.is-loading .op-button__face {
    visibility: hidden;
  }
  /* stableSize: false → only the active face takes space, the button fits its content */
  .op-button:not(.op-stable) .op-button__busy,
  .op-button:not(.op-stable).is-loading .op-button__face {
    display: none;
  }
  .op-button:not(.op-stable).is-loading .op-button__busy {
    display: inline-flex;
  }

  .op-button--primary {
    --_bg: var(--op-button-primary-bg, var(--op-color-primary));
    --_fg: var(--op-button-primary-fg, var(--op-color-primary-fg));
    --_border: var(--op-button-primary-bg, var(--op-color-primary));
    --_hover: var(--op-button-primary-hover-bg, var(--op-color-primary-hover));
    --_active: var(--op-button-primary-hover-bg, var(--op-color-primary-hover));
    box-shadow: var(--op-button-primary-shadow);
  }
  .op-button--danger {
    --_bg: var(--op-button-danger-bg, var(--op-color-danger));
    --_fg: var(--op-button-danger-fg, var(--op-color-danger-fg));
    --_border: var(--op-button-danger-bg, var(--op-color-danger));
    --_hover: var(--op-button-danger-hover-bg, var(--op-color-danger-hover));
    --_active: var(--op-button-danger-hover-bg, var(--op-color-danger-hover));
  }
  .op-button--ghost {
    --_bg: transparent;
    --_border: transparent;
  }

  .op-button:disabled {
    cursor: not-allowed;
    color: var(--op-color-disabled-fg);
    background: var(--op-color-disabled-bg);
    border-color: var(--op-color-border);
  }
  .op-button.is-loading {
    cursor: progress;
  }
  .op-button__spinner {
    --op-spinner-size: var(--op-button-spinner-size);
    --op-spinner-color: currentColor;
  }
}

@layer optikos {
  .op-chip {
    display: inline-flex;
    align-items: center;
    max-inline-size: 100%;
    box-sizing: border-box;
    min-block-size: var(--op-chip-height, calc(var(--op-control-height) * 0.8));
    color: var(--op-chip-fg, var(--op-color-fg));
    background: var(--op-chip-bg, var(--op-color-surface));
    border: var(--op-border-width) solid var(--op-chip-border, var(--op-color-border-strong));
    border-radius: var(--op-chip-radius, var(--op-radius-pill));
    font-size: var(--op-font-size-sm);
    vertical-align: middle;
  }
  .op-chip__main,
  .op-chip__remove {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-1);
    padding: 0 var(--op-space-3);
    min-block-size: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: inherit;
    font: inherit;
    cursor: pointer;
  }
  .op-chip__main {
    min-inline-size: 0;
  }
  .op-chip__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-chip__remove {
    padding-inline: var(--op-space-1) var(--op-space-2);
    color: var(--op-color-fg-muted);
  }
  .op-chip__remove:hover:not(:disabled) {
    color: var(--op-color-danger);
  }
  .op-chip__main:focus-visible,
  .op-chip__remove:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: calc(var(--op-focus-width) * -1);
  }
  .op-chip:hover:not(.is-disabled) {
    border-color: var(--op-chip-hover-border, var(--op-color-primary));
  }
  .op-chip.is-selected {
    color: var(--op-chip-selected-fg, var(--op-color-primary-text, var(--op-color-primary)));
    background: var(--op-chip-selected-bg, var(--op-color-primary-soft));
    border-color: var(--op-chip-selected-border, var(--op-color-primary));
  }
  .op-chip.is-disabled {
    color: var(--op-color-disabled-fg);
    border-color: var(--op-color-border);
  }
  .op-chip.is-disabled button {
    cursor: default;
  }
}

@layer optikos {
  :root {
    --op-codeviewer-font-size: 0.8125rem;
    --op-codeviewer-line-height: 1.6;
    --op-codeviewer-tab-size: 2;
    --op-codeviewer-gutter-gap: 1.25rem;
    --op-codeviewer-max-height: 32rem;
  }
  .op-codeviewer {
    overflow: hidden;
    color: var(--op-codeviewer-fg, var(--op-color-fg));
    background: var(--op-codeviewer-bg, var(--op-color-surface-2));
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-radius-lg);
  }
  .op-codeviewer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--op-space-2);
    min-block-size: var(--op-control-height);
    padding-inline: var(--op-space-3) var(--op-space-1);
    color: var(--op-color-fg-muted);
    border-block-end: var(--op-border-width) solid var(--op-color-border);
    font-size: var(--op-font-size-sm);
  }
  .op-codeviewer__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-codeviewer__pre {
    margin: 0;
    padding: var(--op-space-3) var(--op-space-4);
    max-block-size: var(--op-codeviewer-max-height);
    overflow: auto;
    font-family: var(--op-font-mono);
    font-size: var(--op-codeviewer-font-size);
    line-height: var(--op-codeviewer-line-height);
    tab-size: var(--op-codeviewer-tab-size);
  }
  .op-codeviewer__pre:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: calc(var(--op-focus-width) * -1);
  }
  /* the global op-* rule would give lines and tokens the base font: everything inside the code keeps the mono one */
  .op-codeviewer__pre * {
    font-family: inherit;
    font-size: inherit;
  }
  /* lines stretch to the widest one, so a marked line is marked across the whole scroll width */
  .op-codeviewer__code {
    display: block;
    min-inline-size: 100%;
    inline-size: max-content;
    font: inherit;
  }
  .op-codeviewer.is-wrapped .op-codeviewer__code {
    inline-size: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .op-codeviewer__line {
    position: relative;
    display: block;
    margin-inline: calc(var(--op-space-4) * -1);
    padding-inline: var(--op-space-4);
  }
  .op-codeviewer__line.is-marked {
    background: var(--op-codeviewer-mark-bg, var(--op-color-selected));
    box-shadow: inset calc(var(--op-border-width) * 3) 0 0 var(--op-color-primary);
  }
  /* line numbers: a CSS counter in the gutter, never part of the text (selection and screen readers skip it) */
  .op-codeviewer.has-numbers .op-codeviewer__line {
    padding-inline-start: calc(var(--op-space-4) + var(--op-codeviewer-gutter, 2ch) + var(--op-codeviewer-gutter-gap));
  }
  .op-codeviewer.has-numbers .op-codeviewer__line::before {
    counter-increment: op-codeline;
    content: counter(op-codeline);
    position: absolute;
    inset-inline-start: var(--op-space-4);
    inline-size: var(--op-codeviewer-gutter, 2ch);
    color: var(--op-codeviewer-gutter-fg, var(--op-color-fg-muted));
    text-align: end;
    user-select: none;
  }
  /* syntax colors are pulled towards the text color, so they keep their contrast in every theme */
  .op-codeviewer__tok--keyword {
    color: var(--op-codeviewer-keyword, color-mix(in srgb, var(--op-color-primary) 80%, var(--op-color-fg)));
    font-weight: var(--op-font-weight-bold);
  }
  .op-codeviewer__tok--string {
    color: var(--op-codeviewer-string, color-mix(in srgb, var(--op-color-success) 70%, var(--op-color-fg)));
  }
  .op-codeviewer__tok--comment {
    color: var(--op-codeviewer-comment, var(--op-color-fg-muted));
    font-style: italic;
  }
  .op-codeviewer__tok--number {
    color: var(--op-codeviewer-number, color-mix(in srgb, var(--op-color-warning) 65%, var(--op-color-fg)));
  }
  .op-codeviewer__tok--property,
  .op-codeviewer__tok--attr {
    color: var(--op-codeviewer-property, color-mix(in srgb, var(--op-color-info) 70%, var(--op-color-fg)));
  }
  .op-codeviewer__tok--tag {
    color: var(--op-codeviewer-tag, color-mix(in srgb, var(--op-color-danger) 70%, var(--op-color-fg)));
  }
}

@layer optikos {
  .op-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--op-icon-size);
    block-size: var(--op-icon-size);
    line-height: 1;
  }
  .op-icon > svg {
    inline-size: 100%;
    block-size: 100%;
    stroke-width: var(--op-icon-stroke);
  }
}

@layer optikos {
  :root {
    --op-image-icon-size: 2em;
  }
  .op-image {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--op-image-bg, var(--op-color-surface-2));
    color: var(--op-color-fg-muted);
    min-inline-size: 0;
  }
  .op-image--rounded {
    border-radius: var(--op-image-radius, var(--op-radius));
  }
  .op-image__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--op-image-icon-size);
  }
  .op-image__img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    transition: opacity var(--op-duration) var(--op-easing);
  }
  .op-image.has-image .op-image__img {
    opacity: 1;
  }
  .op-image--cover .op-image__img {
    object-fit: cover;
  }
  .op-image--contain .op-image__img {
    object-fit: contain;
  }
  @media (prefers-reduced-motion: reduce) {
    .op-image__img {
      transition: none;
    }
  }
}

@layer optikos {
  .op-imagecanvas {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--op-imagecanvas-bg, var(--op-color-surface-2));
    border-radius: var(--op-imagecanvas-radius, var(--op-radius));
    font-family: var(--op-font-family);
  }
  .op-imagecanvas__stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
  }
  .op-imagecanvas.is-zoomed .op-imagecanvas__stage {
    cursor: grab;
  }
  .op-imagecanvas.is-dragging .op-imagecanvas__stage {
    cursor: grabbing;
  }
  .op-imagecanvas__stage:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: calc(var(--op-focus-width) * -1);
  }
  .op-imagecanvas__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    user-select: none;
    transition: transform var(--op-duration) var(--op-easing);
  }
  .op-imagecanvas.is-dragging .op-imagecanvas__img {
    transition: none;
  }
  .op-imagecanvas.is-error .op-imagecanvas__img {
    visibility: hidden;
  }
  .op-imagecanvas__status {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--op-space-3);
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
    text-align: center;
    pointer-events: none;
  }
  .op-imagecanvas__tools {
    position: absolute;
    inset-block-end: var(--op-space-2);
    inset-inline-end: var(--op-space-2);
    display: flex;
    gap: var(--op-border-width);
    overflow: hidden;
    border-radius: var(--op-radius);
    box-shadow: var(--op-shadow);
  }
  .op-imagecanvas__tool {
    display: inline-flex;
    padding: var(--op-space-2);
    color: var(--op-imagecanvas-tools-fg, var(--op-color-fg));
    background: var(--op-imagecanvas-tools-bg, var(--op-color-surface));
    border: 0;
    cursor: pointer;
  }
  .op-imagecanvas__tool:hover {
    background: var(--op-color-primary-soft);
  }
  .op-imagecanvas__tool:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: calc(var(--op-focus-width) * -1);
  }
}

@layer optikos {
  :root {
    --op-label-image-size: 1.5em;
  }
  .op-label {
    color: var(--op-label-fg, var(--op-color-fg));
  }
  .op-label--muted {
    color: var(--op-label-muted-fg, var(--op-color-fg-muted));
  }
  .op-label--title {
    font-size: var(--op-label-title-size, var(--op-font-size-lg));
    font-weight: var(--op-label-title-weight, var(--op-font-weight-bold));
  }
  .op-label--media {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-2);
  }
  .op-label__image {
    block-size: var(--op-label-image-size);
    inline-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
  }
}

@layer optikos {
  :root {
    --op-chart-line-width: 2px;
    --op-chart-font-size: 0.75rem;
    --op-chart-area-opacity: 0.18;
    --op-chart-tip-width: 11rem;
    --op-chart-swatch: 0.625rem;
    --op-chart-total-size: 1.125rem;
    --op-chart-bar-radius: 2px;
  }
  .op-chart {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-2);
    min-inline-size: 0;
    font-family: var(--op-font-family);
    color: var(--op-chart-fg, var(--op-color-fg));
  }
  .op-chart__plot {
    position: relative;
  }
  .op-chart__svg {
    display: block;
    inline-size: 100%;
    overflow: visible;
    touch-action: pan-y;
  }
  .op-chart__svg:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-chart__grid line {
    stroke: var(--op-chart-grid, var(--op-color-border));
    stroke-width: var(--op-border-width);
  }
  .op-chart__grid .op-chart__axis {
    stroke: var(--op-color-border-strong);
  }
  .op-chart__tick,
  .op-chart__empty {
    fill: var(--op-color-fg-muted);
    font-size: var(--op-chart-font-size);
  }
  .op-chart__total {
    fill: var(--op-chart-fg, var(--op-color-fg));
    font-size: var(--op-chart-total-size);
    font-weight: 600;
  }
  .op-chart__series {
    --op-chart-c: var(--op-chart-1, var(--op-color-primary));
  }
  .op-chart__bar {
    fill: var(--op-chart-c);
  }
  .op-chart__line {
    fill: none;
    stroke: var(--op-chart-c);
    stroke-width: var(--op-chart-line-width);
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .op-chart__area {
    fill: var(--op-chart-c);
    fill-opacity: var(--op-chart-area-opacity);
    stroke: none;
  }
  .op-chart__dot {
    fill: var(--op-color-surface);
    stroke: var(--op-chart-c);
    stroke-width: var(--op-chart-line-width);
  }
  .op-chart--sparkline .op-chart__dot {
    fill: var(--op-chart-c);
  }
  .op-chart__slice {
    fill: var(--op-chart-c);
    stroke: var(--op-color-surface);
    stroke-width: var(--op-chart-line-width);
    transition: opacity var(--op-duration) var(--op-easing);
  }
  .op-chart__svg:has(.is-active) .op-chart__slice:not(.is-active) {
    opacity: 0.55;
  }
  .op-chart__hit {
    fill: transparent;
  }
  .op-chart__guide {
    stroke: var(--op-color-border-strong);
    stroke-width: var(--op-border-width);
    visibility: hidden;
  }
  .op-chart__guide.is-on {
    visibility: visible;
  }
  .op-chart__tip {
    position: absolute;
    inset-block-start: 0;
    z-index: 1;
    inline-size: max-content;
    max-inline-size: var(--op-chart-tip-width);
    padding: var(--op-space-2) var(--op-space-3);
    transform: translateX(var(--op-space-3));
    background: var(--op-color-surface);
    color: var(--op-color-fg);
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-radius);
    box-shadow: var(--op-shadow);
    font-size: var(--op-chart-font-size);
    pointer-events: none;
  }
  .op-chart__tip.is-left {
    transform: translateX(calc(-100% - var(--op-space-3)));
  }
  .op-chart__tip-head {
    font-weight: 600;
    margin-block-end: var(--op-space-1);
  }
  .op-chart__tip-row {
    display: flex;
    align-items: center;
    gap: var(--op-space-2);
  }
  .op-chart__tip-row b {
    margin-inline-start: auto;
    padding-inline-start: var(--op-space-3);
    font-variant-numeric: tabular-nums;
  }
  .op-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-1) var(--op-space-3);
  }
  .op-chart__key {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-2);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--op-chart-font-size);
    color: var(--op-color-fg);
    cursor: pointer;
  }
  .op-chart__key.is-off {
    color: var(--op-color-fg-muted);
    text-decoration: line-through;
  }
  .op-chart__key:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-chart__swatch {
    inline-size: var(--op-chart-swatch);
    block-size: var(--op-chart-swatch);
    border-radius: var(--op-chart-bar-radius);
    background: var(--op-chart-c);
    flex: none;
  }
  .op-chart__key.is-off .op-chart__swatch {
    opacity: 0.35;
  }
  @media (prefers-reduced-motion: reduce) {
    .op-chart__slice {
      transition: none;
    }
  }
}

@layer optikos {
  :root {
    --op-stat-value-size: 1.75rem;
    --op-stat-spark-width: 6rem;
  }
  .op-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--op-space-1);
    padding: var(--op-space-4);
    background: var(--op-stat-bg, var(--op-color-surface));
    color: var(--op-color-fg);
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-stat-radius, var(--op-radius));
    font-family: var(--op-font-family);
    min-inline-size: 0;
  }
  .op-stat__label {
    display: flex;
    align-items: center;
    gap: var(--op-space-2);
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
  .op-stat__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--op-space-2);
  }
  .op-stat__value {
    font-size: var(--op-stat-value-size);
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .op-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-1);
    font-size: var(--op-font-size-sm);
    font-weight: 600;
  }
  .op-stat__delta.is-good {
    color: var(--op-color-success);
  }
  .op-stat__delta.is-bad {
    color: var(--op-color-danger);
  }
  .op-stat__delta.is-flat {
    color: var(--op-color-fg-muted);
  }
  .op-stat__caption {
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
  .op-stat__spark {
    position: absolute;
    inset-block-end: var(--op-space-3);
    inset-inline-end: var(--op-space-4);
    inline-size: var(--op-stat-spark-width);
  }
  .op-stat.is-interactive {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--op-duration) var(--op-easing), border-color var(--op-duration) var(--op-easing);
  }
  .op-stat.is-interactive:hover {
    background: var(--op-stat-hover-bg, var(--op-color-hover));
    border-color: var(--op-color-border-strong);
  }
  .op-stat.is-interactive:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
}

@layer optikos {
  :root {
    --op-chat-max-width: 75%;
    --op-chat-input-max-height: 8rem;
    --op-chat-dot-size: 0.4rem;
    --op-chat-reply-bg: rgb(0 0 0 / 0.07);
  }
  .op-chat {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 0;
    color: var(--op-color-fg);
    background: var(--op-chat-bg, var(--op-color-bg));
  }
  .op-chat__log {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--op-chat-gap, var(--op-space-1));
    min-block-size: 0;
    padding: var(--op-space-3) var(--op-space-4);
    overflow: auto;
  }
  .op-chat__log:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: calc(var(--op-focus-width) * -1);
  }
  .op-chat__empty {
    margin: auto;
    color: var(--op-color-fg-muted);
  }
  .op-chat__empty[hidden] {
    display: none;
  }
  .op-chat__day {
    display: flex;
    justify-content: center;
    margin-block: var(--op-space-3);
  }
  .op-chat__day > span {
    padding: var(--op-space-1) var(--op-space-3);
    color: var(--op-chat-day-fg, var(--op-color-fg-muted));
    background: var(--op-chat-day-bg, var(--op-color-surface-2));
    border-radius: var(--op-radius);
    font-size: var(--op-font-size-sm);
  }
  .op-chat__msg {
    display: flex;
    max-inline-size: 100%;
  }
  .op-chat__msg.is-me {
    justify-content: flex-end;
  }
  .op-chat__msg.is-first {
    margin-block-start: var(--op-space-2);
  }
  .op-chat__bubble {
    box-sizing: border-box;
    max-inline-size: var(--op-chat-max-width);
    padding: var(--op-space-2) var(--op-space-3);
    overflow-wrap: anywhere;
    color: var(--op-chat-bubble-them-fg, var(--op-color-fg));
    background: var(--op-chat-bubble-them-bg, var(--op-color-surface));
    border-radius: var(--op-chat-bubble-radius, var(--op-radius-lg));
    box-shadow: var(--op-chat-bubble-shadow, var(--op-shadow-sm));
  }
  .op-chat__msg.is-me .op-chat__bubble {
    color: var(--op-chat-bubble-me-fg, var(--op-color-primary-fg));
    background: var(--op-chat-bubble-me-bg, var(--op-color-primary));
  }
  /* inside a run the corners next to the neighbour are squared, like a stack of bubbles */
  .op-chat__msg.is-them:not(.is-first) .op-chat__bubble {
    border-start-start-radius: var(--op-radius-sm);
  }
  .op-chat__msg.is-them:not(.is-last) .op-chat__bubble {
    border-end-start-radius: var(--op-radius-sm);
  }
  .op-chat__msg.is-me:not(.is-first) .op-chat__bubble {
    border-start-end-radius: var(--op-radius-sm);
  }
  .op-chat__msg.is-me:not(.is-last) .op-chat__bubble {
    border-end-end-radius: var(--op-radius-sm);
  }
  .op-chat__author {
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-font-weight-bold);
  }
  .op-chat__author[hidden] {
    display: none;
  }
  .op-chat__reply {
    margin-block-end: var(--op-space-1);
    padding: var(--op-space-1) var(--op-space-2);
    border-inline-start: var(--op-space-1) solid currentColor;
    border-radius: var(--op-radius-sm);
    background: var(--op-chat-reply-bg);
    font-size: var(--op-font-size-sm);
    opacity: 0.85;
  }
  .op-chat__reply strong {
    display: block;
  }
  .op-chat__code {
    padding: 0 var(--op-space-1);
    font-family: var(--op-font-mono);
    background: var(--op-chat-reply-bg);
    border-radius: var(--op-radius-sm);
  }
  .op-chat__meta {
    display: inline-flex;
    float: inline-end;
    align-items: center;
    gap: var(--op-space-1);
    margin-inline-start: var(--op-space-3);
    margin-block-start: var(--op-space-2);
    font-size: var(--op-font-size-sm);
  }
  .op-chat__status {
    display: inline-flex;
  }
  .op-chat__status .op-icon:nth-child(2) {
    margin-inline-start: calc(var(--op-icon-size) * -0.6);
  }
  .op-chat__status.is-read {
    color: var(--op-chat-read-fg, var(--op-color-info));
    opacity: 1;
  }
  .op-chat__status.is-error {
    color: var(--op-color-danger);
  }
  .op-chat__status.is-sending::before {
    content: '…';
  }
  .op-chat__typing {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--op-space-2);
    padding: var(--op-space-2) var(--op-space-3);
    color: var(--op-color-fg-muted);
    background: var(--op-chat-bubble-them-bg, var(--op-color-surface));
    border-radius: var(--op-chat-bubble-radius, var(--op-radius-lg));
    font-size: var(--op-font-size-sm);
  }
  .op-chat__typing[hidden] {
    display: none;
  }
  .op-chat__dots {
    display: inline-flex;
    gap: var(--op-space-1);
  }
  .op-chat__dots i {
    inline-size: var(--op-chat-dot-size);
    block-size: var(--op-chat-dot-size);
    background: currentColor;
    border-radius: var(--op-radius-pill);
    animation: op-chat-dot calc(var(--op-duration) * 10) infinite ease-in-out both;
  }
  .op-chat__dots i:nth-child(2) {
    animation-delay: calc(var(--op-duration) * 1.5);
  }
  .op-chat__dots i:nth-child(3) {
    animation-delay: calc(var(--op-duration) * 3);
  }
  @keyframes op-chat-dot {
    0%,
    80%,
    100% {
      opacity: 0.25;
    }
    40% {
      opacity: 1;
    }
  }
  .op-chat__suggestions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: var(--op-space-2);
    padding: var(--op-space-2) var(--op-space-4) 0;
  }
  .op-chat__suggestions[hidden] {
    display: none;
  }
  .op-chat__chip {
    padding: var(--op-space-1) var(--op-space-3);
    font: inherit;
    color: var(--op-chat-chip-fg, var(--op-color-primary));
    background: var(--op-chat-chip-bg, var(--op-color-surface));
    border: var(--op-border-width) solid var(--op-chat-chip-border, var(--op-color-primary));
    border-radius: var(--op-radius-pill);
    cursor: pointer;
  }
  .op-chat__chip:hover:not(:disabled) {
    background: var(--op-color-primary-soft);
  }
  .op-chat__chip:disabled {
    color: var(--op-color-disabled-fg);
    border-color: var(--op-color-border);
    cursor: not-allowed;
  }
  .op-chat__composer {
    display: flex;
    flex: none;
    align-items: flex-end;
    gap: var(--op-space-2);
    padding: var(--op-space-3) var(--op-space-4);
    background: var(--op-chat-composer-bg, var(--op-color-surface));
    border-block-start: var(--op-border-width) solid var(--op-color-border);
  }
  .op-chat__input {
    flex: 1;
    box-sizing: border-box;
    min-block-size: var(--op-control-height);
    max-block-size: var(--op-chat-input-max-height);
    padding: var(--op-space-2) var(--op-control-padding-x);
    font: inherit;
    color: var(--op-color-fg);
    background: var(--op-chat-input-bg, var(--op-color-surface));
    border: var(--op-border-width) solid var(--op-color-border-strong);
    border-radius: var(--op-chat-input-radius, var(--op-radius));
    resize: none;
  }
  .op-chat__input:focus {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: 0;
  }
  .op-chat.is-readonly .op-chat__composer {
    display: none;
  }
}

@layer optikos {
  /* the editor fills the cell: no label, no error line, the row height */
  .op-grid__cell.is-editing {
    position: relative;
    padding-block: 0;
    padding-inline: var(--op-grid-editor-inset, var(--op-space-1));
    overflow: visible;
  }
  .op-grid__editor {
    inline-size: 100%;
  }
  .op-grid__editor .op-textfield__input {
    min-block-size: 0;
    block-size: calc(var(--op-grid-row-height, var(--op-row-height)) - 2 * var(--op-space-1));
  }
  .op-grid__editor.is-invalid .op-textfield__input {
    border-color: var(--op-color-danger);
  }
  .op-grid__editor .op-field__error {
    position: absolute;
    z-index: 1;
    inset-block-start: 100%;
    padding: var(--op-space-1) var(--op-space-2);
    color: var(--op-color-danger-fg);
    background: var(--op-color-danger);
    border-radius: var(--op-radius-sm);
    font-size: var(--op-font-size-sm);
    white-space: nowrap;
  }
  .op-grid__editor .op-field__error:empty {
    display: none;
  }
}

@layer optikos {
  .op-columntotals {
    display: grid;
    grid-template-columns: var(--op-grid-cols);
    box-sizing: border-box;
    flex: none;
    overflow: hidden;
    min-block-size: var(--op-grid-row-height, var(--op-row-height));
    border-block-start: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
    background: var(--op-grid-total-bg, var(--op-color-surface-2));
    font-weight: var(--op-font-weight-bold);
  }
  .op-columntotals[hidden] {
    display: none;
  }
  .op-columntotals__cell {
    display: flex;
    align-items: center;
    gap: var(--op-space-2);
    min-inline-size: 0;
    padding-inline: var(--op-grid-cell-padding-x, var(--op-control-padding-x));
    overflow: hidden;
    white-space: nowrap;
  }
  .op-columntotals__cell--right { justify-content: flex-end; }
  .op-columntotals__cell--center { justify-content: center; }
  .op-columntotals__op {
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-font-weight-normal, normal);
  }
  .op-columntotals__btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin-inline-start: auto;
    padding: var(--op-space-1);
    border: 0;
    border-radius: var(--op-radius-sm);
    background: transparent;
    color: var(--op-color-fg-muted);
    cursor: pointer;
  }
  .op-columntotals__btn:hover {
    background: var(--op-color-hover);
    color: var(--op-color-fg);
  }
  .op-columntotals__btn:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-columntotals--top {
    border-block-start: 0;
    border-block-end: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
  }
}

@layer optikos {
  :root {
    --op-dataview-item-width: 10rem;
    --op-dataview-gap: var(--op-space-3);
    --op-dataview-ring-width: 0.1875rem;
  }
  .op-dataview {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-3);
    min-inline-size: 0;
    min-block-size: 0;
    overflow: auto;
  }
  .op-dataview__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--op-dataview-item-width), 1fr));
    /* every row is as tall as the tallest card, so rows line up whatever each card's text does */
    grid-auto-rows: 1fr;
    gap: var(--op-dataview-gap);
    padding: var(--op-space-1);
  }
  .op-dataview__item {
    position: relative;
    min-inline-size: 0;
    border-radius: var(--op-dataview-item-radius, var(--op-radius));
    display: flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
  }
  /* the card fills its cell: a short card stretches to the row instead of leaving a gap under it */
  .op-dataview__item > * {
    flex: 1;
    min-block-size: 0;
  }
  .op-dataview__item:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-dataview__item.is-selected {
    box-shadow: 0 0 0 var(--op-dataview-ring-width) var(--op-dataview-selected-ring, var(--op-color-primary));
  }
  .op-dataview__empty {
    padding: var(--op-space-6);
    color: var(--op-color-fg-muted);
    text-align: center;
  }
  .op-dataview__empty[hidden] {
    display: none;
  }
  .op-dataview__pager {
    flex: none;
    padding: var(--op-space-2);
  }
}

@layer optikos {
  .op-exportbar {
    display: flex;
    flex: none;
    gap: var(--op-space-1);
    margin-inline-start: auto;
    padding-inline: var(--op-space-2);
  }
}

@layer optikos {
  :root {
    --op-filterbuilder-gap: var(--op-space-2);
    --op-filterbuilder-group-padding: var(--op-space-3);
    --op-filterbuilder-value-width: 8rem;
    --op-filterbuilder-value-max-width: 18rem;
    --op-filterbuilder-chips-max-height: 6rem;
    --op-filterbuilder-nested-bg: var(--op-color-surface-2);
  }
  .op-filterbuilder {
    display: flex;
    flex-direction: column;
    gap: var(--op-filterbuilder-gap);
    min-inline-size: 0;
  }
  .op-filterbuilder__group {
    display: flex;
    flex-direction: column;
    gap: var(--op-filterbuilder-gap);
  }
  .op-filterbuilder__group.is-nested {
    padding: var(--op-filterbuilder-group-padding);
    background: var(--op-filterbuilder-nested-bg);
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-radius);
  }
  .op-filterbuilder__head,
  .op-filterbuilder__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--op-filterbuilder-gap);
  }
  .op-filterbuilder__value {
    flex: 1 1 var(--op-filterbuilder-value-width);
    min-inline-size: 0;
    max-inline-size: var(--op-filterbuilder-value-max-width);
  }
  /* a validation message hangs below the field instead of making the row taller (and the controls beside it jump) */
  .op-filterbuilder__value {
    position: relative;
  }
  .op-filterbuilder__value > .op-field__error {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 1;
    margin: 0;
    white-space: nowrap;
    font-size: var(--op-font-size-sm);
  }
  .op-filterbuilder__row:has(.op-field__error:not(:empty)) {
    margin-block-end: var(--op-space-4);
  }
  .op-filterbuilder__to {
    color: var(--op-color-fg-muted);
  }
  .op-filterbuilder__none {
    color: var(--op-color-fg-muted);
  }
  .op-filterbuilder__select {
    min-block-size: var(--op-control-height);
    padding-inline: var(--op-control-padding-x);
    font: inherit;
    color: var(--op-color-fg);
    background: var(--op-color-surface);
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-radius);
  }
  .op-filterbuilder__select:focus-visible,
  .op-filterbuilder__remove:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: 0;
  }
  .op-filterbuilder__remove {
    display: inline-flex;
    padding: var(--op-space-1);
    color: var(--op-color-fg-muted);
    background: transparent;
    border: 0;
    border-radius: var(--op-radius-sm);
    cursor: pointer;
  }
  .op-filterbuilder__remove:hover {
    color: var(--op-color-danger);
    background: var(--op-color-hover);
  }
  .op-filterbuilder__foot {
    display: flex;
    justify-content: flex-end;
  }
  .op-filterbuilder__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-1);
    max-block-size: var(--op-filterbuilder-chips-max-height);
    overflow: auto;
  }
  .op-filterbuilder__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--op-space-1) var(--op-space-3);
    color: var(--op-color-fg);
    background: var(--op-color-surface);
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-radius-pill);
    cursor: pointer;
  }
  .op-filterbuilder__chip:hover {
    background: var(--op-color-hover);
  }
  .op-filterbuilder__chip:has(:checked) {
    color: var(--op-filterbuilder-chip-on-fg, var(--op-color-primary));
    background: var(--op-color-primary-soft);
    border-color: var(--op-color-primary);
  }
  .op-filterbuilder__chip:has(:focus-visible) {
    outline: var(--op-focus-width) solid var(--op-color-focus);
  }
  .op-filterbuilder__chipbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
}

@layer optikos {
  :root {
    --op-grid-colmenu-width: 14rem;
    --op-grid-colmenu-height: 20rem;
    --op-grid-drop-width: 0.1875rem;
    --op-grid-resizer-width: 0.5rem;
    --op-grid-group-tracking: 0.05em;
    --op-grid-action-size: 2rem;
    --op-grid-action-gap: var(--op-space-1);
    --op-grid-action-idle-opacity: 0.45;
    --op-grid-action-disabled-opacity: 0.3;
    --op-grid-selected-bar-width: 0.125rem;
    --op-grid-lock-shadow-size: 0.375rem;
  }
  .op-grid {
    --_border: var(--op-grid-border, var(--op-color-border));
    display: flex;
    flex-direction: column;
    position: relative;
    min-inline-size: 0;
    min-block-size: 0;
    color: var(--op-grid-fg, var(--op-color-fg));
    background: var(--op-grid-bg, var(--op-color-surface));
    border: var(--op-border-width) solid var(--_border);
    border-radius: var(--op-grid-radius, var(--op-radius));
    overflow: hidden;
  }
  /* header + rows: the focusable role=grid part, between the bulk bar and the pager */
  .op-grid__table {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    position: relative;
    min-inline-size: 0;
    min-block-size: 0;
  }
  .op-grid__table:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: calc(var(--op-focus-width) * -1);
  }
  .op-grid__header {
    position: relative;
    flex: none;
    overflow: hidden;
    color: var(--op-grid-header-fg, var(--op-color-fg));
    background: var(--op-grid-header-bg, var(--op-color-surface-2));
    border-block-end: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
    font-weight: var(--op-font-weight-bold);
  }
  .op-grid__row {
    display: grid;
    grid-template-columns: var(--op-grid-cols);
    box-sizing: border-box;
    min-inline-size: var(--op-grid-min-width);
  }
  .op-grid__header-row {
    min-block-size: var(--op-grid-row-height, var(--op-row-height));
  }
  .op-grid__viewport {
    flex: 1;
    min-block-size: 0;
    overflow: auto;
  }
  .op-grid__body-row {
    border-block-end: var(--op-border-width) solid var(--_border);
    cursor: default;
  }
  .op-grid__body-row:hover {
    background: var(--op-grid-row-hover-bg, var(--op-color-hover));
  }
  .op-grid--striped .op-grid__body-row.is-odd {
    background: var(--op-grid-row-stripe-bg, var(--op-color-surface-2));
  }
  .op-grid__body-row.is-selected {
    background: var(--op-grid-row-selected-bg, var(--op-color-selected));
    box-shadow: inset var(--op-grid-selected-bar-width) 0 0 var(--op-grid-selected-bar, var(--op-color-primary));
  }
  .op-grid__body-row.is-active {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: calc(var(--op-focus-width) * -1);
  }
  .op-grid__cell {
    display: flex;
    align-items: center;
    min-inline-size: 0;
    padding-inline: var(--op-grid-cell-padding-x, var(--op-control-padding-x));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-grid__cell--right {
    justify-content: flex-end;
    text-align: end;
  }
  .op-grid__cell--center {
    justify-content: center;
  }
  .op-grid__sort {
    text-transform: inherit;
    letter-spacing: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-1);
    padding: 0;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .op-grid__arrow {
    display: inline-flex;
    opacity: 0;
    transition: transform var(--op-duration) var(--op-easing);
  }
  .op-grid__hcell.is-sortable:hover .op-grid__arrow {
    opacity: 0.4;
  }
  .op-grid__hcell.is-sorted-asc .op-grid__arrow,
  .op-grid__hcell.is-sorted-desc .op-grid__arrow {
    opacity: 1;
  }
  .op-grid__hcell.is-sorted-desc .op-grid__arrow {
    transform: rotate(180deg);
  }
  .op-grid__empty {
    padding: var(--op-space-5);
    text-align: center;
    color: var(--op-color-fg-muted);
  }
  .op-grid__pager {
    flex: none;
    padding: var(--op-space-2);
    border-block-start: var(--op-border-width) solid var(--_border);
  }
  .op-grid__footer {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-block-start: var(--op-border-width) solid var(--_border);
  }
  .op-grid__footer .op-grid__pager {
    flex: 1 1 auto;
    border-block-start: 0;
  }
  .op-grid .op-virtual {
    min-inline-size: var(--op-grid-min-width);
  }
  .op-grid__check {
    margin: 0;
    accent-color: var(--op-grid-check-accent, var(--op-color-primary));
    cursor: pointer;
  }
  /* the checkbox and action columns are narrow: the frame gives them their own padding instead of the text-cell one */
  .op-grid__selcell,
  .op-grid__actcell {
    padding-inline: var(--op-grid-action-gap);
  }
  .op-grid__actcell {
    justify-content: flex-end;
    gap: var(--op-grid-action-gap);
  }
  .op-grid__actbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-inline-size: var(--op-grid-action-size);
    block-size: var(--op-grid-action-size);
    padding: var(--op-space-1);
    font: inherit;
    font-size: var(--op-font-size-sm);
    color: var(--op-color-fg-muted);
    background: transparent;
    border: 0;
    border-radius: var(--op-radius-sm);
    cursor: pointer;
  }
  .op-grid__actbtn:hover {
    color: var(--op-color-fg);
    background: var(--op-color-hover);
  }
  .op-grid__bar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--op-space-2);
    min-block-size: var(--op-grid-row-height, var(--op-row-height));
    padding-inline: var(--op-space-2);
    background: var(--op-grid-bar-bg, var(--op-color-surface));
    border-block-end: var(--op-border-width) solid var(--_border);
  }
  .op-grid__bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--op-space-2);
  }
  .op-grid__bulk[hidden] {
    display: none;
  }
  .op-grid__count {
    font-weight: var(--op-font-weight-bold);
  }
  .op-grid__bar > .op-button {
    margin-inline-start: auto;
  }
  .op-grid__colmenu {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-2);
    min-inline-size: var(--op-grid-colmenu-width);
    max-block-size: var(--op-grid-colmenu-height);
    padding: var(--op-space-2);
  }
  .op-grid__collist {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  .op-grid__colitem {
    display: flex;
    align-items: center;
    gap: var(--op-space-2);
    padding: var(--op-space-1) var(--op-space-2);
    border-radius: var(--op-radius-sm);
    cursor: pointer;
  }
  .op-grid__colitem:hover {
    background: var(--op-color-hover);
  }
  .op-grid__colitem[hidden],
  .op-grid__colempty[hidden] {
    display: none;
  }
  .op-grid__colempty {
    padding: var(--op-space-2);
    color: var(--op-color-fg-muted);
    text-align: center;
  }
  /* visible mode: always there, dimmed until the row is hovered, active or selected */
  .op-grid--actions-visible .op-grid__actbtn {
    opacity: var(--op-grid-action-idle-opacity);
  }
  .op-grid--actions-visible .op-grid__body-row:hover .op-grid__actbtn,
  .op-grid--actions-visible .op-grid__body-row.is-active .op-grid__actbtn,
  .op-grid--actions-visible .op-grid__body-row.is-selected .op-grid__actbtn,
  .op-grid--actions-visible .op-grid__actbtn:focus-visible {
    opacity: 1;
  }
  .op-grid__actbtn.is-danger:hover {
    color: var(--op-color-danger);
  }
  .op-grid__actbtn:disabled {
    opacity: var(--op-grid-action-disabled-opacity);
    cursor: not-allowed;
  }
  /* column drag: grab cursor, a ghost label under the pointer and a bar where the column will land */
  .op-grid--reorderable .op-grid__hcell.is-reorderable {
    cursor: grab;
    user-select: none;
    touch-action: none;
  }
  .op-grid__hcell {
    position: relative;
  }
  /* resize handle: a thin strip on the header's end edge; a hairline shows on hover and while dragging */
  .op-grid__resizer {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: var(--op-grid-resizer-width);
    cursor: col-resize;
    touch-action: none;
    z-index: 1;
  }
  .op-grid__resizer::after {
    content: '';
    position: absolute;
    inset-block: 25%;
    inset-inline-end: 0;
    inline-size: var(--op-border-width);
    background: var(--op-color-border-strong);
  }
  .op-grid__resizer:hover::after,
  .op-grid.is-resizing .op-grid__resizer:hover::after {
    inset-block: 0;
    inline-size: var(--op-grid-drop-width);
    background: var(--op-color-primary);
  }
  .op-grid.is-resizing {
    cursor: col-resize;
    user-select: none;
  }
  .op-grid__hcell.is-dragging-col {
    opacity: 0.4;
  }
  .op-grid__ghost {
    position: fixed;
    z-index: var(--op-z-layer);
    padding: var(--op-space-1) var(--op-space-3);
    color: var(--op-color-fg);
    background: var(--op-color-surface);
    border: var(--op-border-width) solid var(--op-color-primary);
    border-radius: var(--op-radius);
    box-shadow: var(--op-shadow);
    pointer-events: none;
    transform: translate(var(--op-space-2), var(--op-space-2));
    font-weight: var(--op-font-weight-bold);
    white-space: nowrap;
  }
  .op-grid__drop {
    position: absolute;
    inset-block: 0;
    inline-size: var(--op-grid-drop-width);
    margin-inline-start: calc(var(--op-grid-drop-width) / -2);
    background: var(--op-color-primary);
    pointer-events: none;
  }
  /* group band over the header */
  .op-grid__group-row {
    min-block-size: 0;
  }
  .op-grid__gcell {
    padding: var(--op-space-1) var(--op-grid-cell-padding-x, var(--op-control-padding-x));
    overflow: hidden;
    color: var(--op-grid-group-fg, var(--op-color-fg-muted));
    background: var(--op-grid-group-bg, var(--op-color-surface-2));
    border-block-end: var(--op-border-width) solid var(--_border);
    border-inline-end: var(--op-border-width) solid var(--_border);
    font-size: var(--op-font-size-sm);
    letter-spacing: var(--op-grid-group-tracking);
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .op-grid__gcell.is-empty {
    background: transparent;
    border-inline-end-color: transparent;
  }
  /* column menu: group chips and sections */
  .op-grid__colchips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-1);
  }
  .op-grid__colchips[hidden],
  .op-grid__colgroup[hidden] {
    display: none;
  }
  .op-grid__colchip {
    padding: 0 var(--op-space-3);
    font: inherit;
    font-size: var(--op-font-size-sm);
    color: var(--op-color-fg-muted);
    background: transparent;
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-radius-pill);
    cursor: pointer;
  }
  .op-grid__colchip.is-on {
    color: var(--op-color-primary-fg);
    background: var(--op-color-primary);
    border-color: var(--op-color-primary);
  }
  .op-grid__colgroup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--op-space-2);
    padding: var(--op-space-1) var(--op-space-2);
    margin-block-start: var(--op-space-1);
    color: var(--op-color-fg-muted);
    border-block-end: var(--op-border-width) solid var(--op-color-border);
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-font-weight-bold);
    text-transform: uppercase;
  }
  .op-grid__colgroup label {
    display: flex;
    align-items: center;
    gap: var(--op-space-2);
    cursor: pointer;
  }
  .op-grid__colgroup ~ .op-grid__colitem {
    padding-inline-start: var(--op-space-4);
  }

  /* locked columns: body cells stick, header cells are shifted by the scroll (the header scrolls by script, not natively) */
  .op-grid__cell.is-locked {
    z-index: 1;
    background: var(--op-grid-bg, var(--op-color-surface));
  }
  .op-grid__body-row .is-locked-start {
    position: sticky;
    inset-inline-start: var(--_lock);
  }
  .op-grid__body-row .is-locked-end {
    position: sticky;
    inset-inline-end: var(--_lock);
  }
  .op-grid__hcell.is-locked {
    position: relative;
    background: var(--op-grid-header-bg, var(--op-color-surface-2));
  }
  .op-grid__hcell.is-locked-start {
    inset-inline-start: var(--op-grid-scroll-x);
  }
  .op-grid__hcell.is-locked-end {
    inset-inline-start: calc(-1 * var(--op-grid-scroll-end));
  }
  .op-grid__body-row:hover .is-locked {
    background: var(--op-grid-row-hover-bg, var(--op-color-hover));
  }
  .op-grid--striped .op-grid__body-row.is-odd .is-locked {
    background: var(--op-grid-row-stripe-bg, var(--op-color-surface-2));
  }
  .op-grid__body-row.is-selected .is-locked {
    background: var(--op-grid-row-selected-bg, var(--op-color-selected));
  }
  .op-grid.is-scrolled-start .is-lock-edge.is-locked-start {
    box-shadow: var(--op-grid-lock-shadow-size) 0 var(--op-grid-lock-shadow-size) calc(-1 * var(--op-grid-lock-shadow-size)) var(--op-color-border-strong);
  }
  .op-grid.is-scrolled-end .is-lock-edge.is-locked-end {
    box-shadow: calc(-1 * var(--op-grid-lock-shadow-size)) 0 var(--op-grid-lock-shadow-size) calc(-1 * var(--op-grid-lock-shadow-size)) var(--op-color-border-strong);
  }
}

@layer optikos {
  .op-print-sheet {
    display: none;
  }
  @media print {
    html.op-printing body > *:not(.op-print-sheet) {
      display: none !important;
    }
    html.op-printing .op-print-sheet {
      display: block;
      font-family: var(--op-font-family);
      color: var(--op-color-fg);
    }
    .op-print-sheet table {
      inline-size: 100%;
      border-collapse: collapse;
      font-size: var(--op-font-size-sm);
    }
    .op-print-sheet thead {
      display: table-header-group;
    }
    .op-print-sheet tr {
      break-inside: avoid;
    }
    .op-print-sheet th,
    .op-print-sheet td {
      padding: var(--op-space-1) var(--op-space-2);
      border-block-end: var(--op-border-width) solid var(--op-color-border);
      text-align: start;
    }
    .op-print-sheet th {
      border-block-end-color: var(--op-color-fg);
    }
  }
}

@layer optikos {
  .op-grid__row--group {
    display: flex;
    background: var(--op-grid-group-bg, var(--op-color-surface-2));
    font-weight: var(--op-font-weight-bold);
    cursor: pointer;
  }
  .op-grid__row--group .op-grid__cell {
    flex: none;
  }
  .op-grid__row--group .op-grid__cell.is-group-label {
    flex: 1;
    gap: var(--op-space-2);
  }
  .op-grid__row--group .op-grid__cell:not(.is-group-label):not(.op-grid__selcell) {
    display: none;
  }
  .op-grid__twist {
    display: inline-flex;
    transition: transform var(--op-duration) var(--op-easing);
  }
  .op-grid__row--group[aria-expanded='false'] .op-grid__twist {
    transform: rotate(-90deg);
  }
  .op-grid__group-count {
    color: var(--op-color-fg-muted);
    font-weight: normal;
  }
  .op-grid__row--total {
    font-weight: var(--op-font-weight-bold);
    background: var(--op-grid-total-bg, var(--op-color-surface-2));
    cursor: default;
  }
  .op-grid__row--total.is-grand-total {
    border-block-start: var(--op-border-width) solid var(--op-color-border-strong);
  }
  .op-grid__row--total:hover {
    background: var(--op-grid-total-bg, var(--op-color-surface-2));
  }
  .op-grid__body-row.is-grouped > .op-grid__cell:first-child:not(.op-grid__selcell),
  .op-grid__body-row.is-grouped > .op-grid__selcell + .op-grid__cell {
    padding-inline-start: calc(var(--op-grid-cell-padding-x, var(--op-control-padding-x)) + var(--op-grid-indent, var(--op-space-4)));
  }
  @media (prefers-reduced-motion: reduce) {
    .op-grid__twist {
      transition: none;
    }
  }
  .op-groupcontrols {
    display: flex;
    flex: none;
    gap: var(--op-space-1);
    margin-inline-start: auto;
    padding-inline: var(--op-space-2);
  }
}

@layer optikos {
  .op-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--op-pagination-gap, var(--op-space-1));
    color: var(--op-color-fg);
  }
  .op-pagination__btn.is-current {
    color: var(--op-color-primary-fg);
    background: var(--op-color-primary);
  }
  .op-pagination__gap {
    padding-inline: var(--op-space-1);
    color: var(--op-color-fg-muted);
  }
  .op-pagination__info {
    margin-inline-start: auto;
    padding-inline-start: var(--op-space-3);
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
}

@layer optikos {
  :root {
    --op-quicksearch-width: 14rem;
  }
  .op-quicksearch__group {
    display: flex;
    flex: none;
    padding-inline: var(--op-space-2);
  }
  .op-quicksearch {
    inline-size: var(--op-quicksearch-width);
  }
}

@layer optikos {
  .op-grid__body-row.is-row-editing {
    z-index: 2;
    background: var(--op-grid-row-selected-bg, var(--op-color-selected));
  }
  .op-grid__rowbar {
    position: absolute;
    z-index: 1;
    inset-block-start: 100%;
    inset-inline-start: var(--op-grid-scroll-x);
    display: flex;
    gap: var(--op-space-2);
    padding: var(--op-space-2);
    background: var(--op-color-surface);
    border: var(--op-border-width) solid var(--op-color-border-strong);
    border-block-start: 0;
    border-end-start-radius: var(--op-radius);
    border-end-end-radius: var(--op-radius);
    box-shadow: var(--op-shadow);
  }
  .op-grid__rowbtn {
    padding: var(--op-space-1) var(--op-space-3);
    color: var(--op-color-fg);
    background: var(--op-color-surface);
    border: var(--op-border-width) solid var(--op-color-border-strong);
    border-radius: var(--op-radius);
    font: inherit;
    cursor: pointer;
  }
  .op-grid__rowbtn.is-primary {
    color: var(--op-color-primary-fg);
    background: var(--op-color-primary);
    border-color: var(--op-color-primary);
  }
  .op-grid__rowbtn:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
}

@layer optikos {
  :root {
    --op-searchgrid-gap: var(--op-space-3);
    --op-searchgrid-filters-padding: 0;
    --op-searchgrid-field-width: 12rem;
    --op-searchgrid-grid-min-height: 12rem;
  }
  .op-searchgrid {
    display: flex;
    flex-direction: column;
    gap: var(--op-searchgrid-gap);
    block-size: 100%;
    min-block-size: 0;
  }
  .op-searchgrid__filters {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--op-searchgrid-gap);
    padding: var(--op-searchgrid-filters-padding);
    background: var(--op-searchgrid-filters-bg, transparent);
  }
  .op-searchgrid__filters > .op-field {
    flex: 1 1 var(--op-searchgrid-field-width);
    min-inline-size: 0;
  }
  .op-searchgrid__buttons {
    display: flex;
    gap: var(--op-space-2);
    margin-inline-start: auto;
  }
  .op-searchgrid > .op-grid {
    flex: 1;
    min-block-size: var(--op-searchgrid-grid-min-height);
  }
}

@layer optikos {
  .op-table {
    inline-size: 100%;
    border-collapse: collapse;
    color: var(--op-color-fg);
    font-size: var(--op-font-size);
  }
  .op-table caption {
    padding: var(--op-space-2);
    text-align: start;
    color: var(--op-color-fg-muted);
  }
  .op-table th,
  .op-table td {
    padding: var(--op-table-cell-padding-y, var(--op-space-2)) var(--op-table-cell-padding-x, var(--op-space-3));
    text-align: start;
    border-block-end: var(--op-border-width) solid var(--op-table-border, var(--op-color-border));
  }
  .op-table th {
    background: var(--op-table-header-bg, var(--op-color-surface-2));
    font-weight: var(--op-font-weight-bold);
  }
  .op-table--striped tbody tr:nth-child(even) {
    background: var(--op-table-stripe-bg, var(--op-color-surface-2));
  }
  .op-table .op-table__cell--right {
    text-align: end;
  }
  .op-table .op-table__cell--center {
    text-align: center;
  }
  .op-table__empty td {
    text-align: center;
    color: var(--op-color-fg-muted);
  }
}

@layer optikos {
  :root {
    --op-timeentry-handle: 0.5rem;
    --op-timeentry-cursor: 0.125rem;
    --op-timeentry-grip: 0.125rem;
  }
  .op-timeline--entry .op-timeline__lane {
    cursor: crosshair;
    border-radius: var(--op-radius);
  }
  .op-timeline--entry .op-timeline__lane:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-timeline--entry .op-timeline__track {
    touch-action: pan-y;
  }
  .op-timeline--entry .op-timeline__bar {
    cursor: grab;
    touch-action: none;
    user-select: none;
  }
  .op-timeline--entry .op-timeline__bar.is-dragging {
    cursor: grabbing;
    z-index: 1;
    box-shadow: var(--op-shadow);
  }
  .op-timeline--entry .op-timeline__bar.is-locked {
    cursor: not-allowed;
    opacity: 0.6;
  }
  .op-timeline--entry .op-timeline__bar.is-invalid,
  .op-timeentry__ghost.is-invalid {
    --op-timeline-c: var(--op-color-danger);
  }
  .is-time-dragging {
    user-select: none;
  }
  .op-timeentry__handle {
    position: absolute;
    inset-block: 0;
    inline-size: var(--op-timeentry-handle);
    cursor: ew-resize;
  }
  .op-timeentry__handle--start { inset-inline-start: 0; }
  .op-timeentry__handle--end { inset-inline-end: 0; }
  .op-timeentry__handle::after {
    content: '';
    position: absolute;
    inset-block: 25%;
    inset-inline-start: 40%;
    inline-size: var(--op-timeentry-grip);
    border-radius: var(--op-timeentry-grip);
    background: currentColor;
    opacity: 0.6;
  }
  .op-timeentry__ghost {
    --op-timeline-c: var(--op-color-primary);
    position: absolute;
    inset-block: 0;
    border: var(--op-border-width) dashed var(--op-timeline-c);
    border-radius: var(--op-radius);
    background: color-mix(in srgb, var(--op-timeline-c) 25%, transparent);
    pointer-events: none;
  }
  .op-timeentry__cursor {
    position: absolute;
    inset-block: 0;
    inline-size: var(--op-timeentry-cursor);
    background: var(--op-color-focus);
    pointer-events: none;
  }
  .op-timeentry__lane.is-under .op-timeline__lane-name { color: var(--op-color-warning); }
  .op-timeentry__lane.is-met .op-timeline__lane-name { color: var(--op-color-success); }
  .op-timeentry__lane.is-over .op-timeline__lane-name { color: var(--op-color-danger); }
  .op-timeentry__grand {
    display: flex;
    justify-content: space-between;
    gap: var(--op-space-3);
    padding: var(--op-space-2);
    border-block-start: var(--op-border-width) solid var(--op-color-border-strong);
    font-size: var(--op-font-size-sm);
  }

  .op-timeline--vertical.op-timeline--entry .op-timeline__track {
    touch-action: auto;
  }
  .op-timeline--vertical .op-timeentry__handle {
    inset-block: auto;
    inset-inline: 0;
    inline-size: auto;
    block-size: var(--op-timeentry-handle);
    cursor: ns-resize;
  }
  .op-timeline--vertical .op-timeentry__handle--start { inset-block-start: 0; }
  .op-timeline--vertical .op-timeentry__handle--end { inset-block-end: 0; }
  .op-timeline--vertical .op-timeentry__handle::after {
    inset-block: 40% auto;
    inset-inline: 25%;
    inline-size: auto;
    block-size: var(--op-timeentry-grip);
  }
  .op-timeline--vertical .op-timeentry__ghost {
    inset-block: auto;
    inset-inline: 0;
  }
  .op-timeline--vertical .op-timeentry__cursor {
    inset-block: auto;
    inset-inline: 0;
    inline-size: auto;
    block-size: var(--op-timeentry-cursor);
  }
  .op-timeline--vertical .op-timeentry__grand {
    grid-column: 1 / -1;
  }
}

@layer optikos {
  :root {
    --op-timeline-marker: 0.875rem;
    --op-timeline-when-width: 8rem;
    --op-timeline-lane-width: 8rem;
    --op-timeline-axis-width: 4rem;
    --op-timeline-height: 32rem;
    --op-timeline-bar-height: 1.75rem;
    --op-timeline-line: 2px;
  }
  .op-timeline {
    font-family: var(--op-font-family);
    color: var(--op-color-fg);
    min-inline-size: 0;
  }
  .op-timeline--list {
    display: flex;
    flex-direction: column;
  }
  .op-timeline__item {
    --op-timeline-c: var(--op-color-border-strong);
    display: grid;
    grid-template-columns: var(--op-timeline-when-width) var(--op-timeline-marker) 1fr;
    gap: var(--op-space-3);
    padding-block-end: var(--op-space-4);
    border-radius: var(--op-radius);
  }
  .op-timeline__item:focus-visible,
  .op-timeline__bar:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-timeline__item.is-success { --op-timeline-c: var(--op-color-success); }
  .op-timeline__item.is-warning { --op-timeline-c: var(--op-color-warning); }
  .op-timeline__item.is-danger { --op-timeline-c: var(--op-color-danger); }
  .op-timeline__item.is-info { --op-timeline-c: var(--op-color-info); }
  .op-timeline__when {
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
    text-align: end;
    padding-block-start: var(--op-space-1);
  }
  .op-timeline__marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--op-timeline-marker);
    block-size: var(--op-timeline-marker);
    margin-block-start: var(--op-space-1);
    border-radius: 50%;
    background: var(--op-timeline-c);
    color: var(--op-color-surface);
    font-size: var(--op-font-size-sm);
  }
  .op-timeline__marker::after {
    content: '';
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: calc(50% - var(--op-timeline-line) / 2);
    block-size: calc(100% + var(--op-space-5));
    inline-size: var(--op-timeline-line);
    background: var(--op-color-border);
  }
  .op-timeline__item:last-child .op-timeline__marker::after {
    display: none;
  }
  .op-timeline__title {
    font-weight: 600;
  }
  .op-timeline__text {
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }

  .op-timeline__axis,
  .op-timeline__lane,
  .op-timeline__nowrow {
    display: grid;
    grid-template-columns: var(--op-timeline-lane-width) 1fr;
    gap: var(--op-space-2);
    align-items: center;
  }
  .op-timeline__lane {
    border-block-start: var(--op-border-width) solid var(--op-color-border);
    padding-block: var(--op-space-1);
  }
  .op-timeline__lane-name {
    font-size: var(--op-font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-timeline__track {
    position: relative;
    block-size: var(--op-timeline-bar-height);
  }
  .op-timeline__axis .op-timeline__track {
    block-size: auto;
    min-block-size: var(--op-space-4);
  }
  .op-timeline__tick {
    position: absolute;
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
    white-space: nowrap;
  }
  .op-timeline__bar {
    --op-timeline-c: var(--op-color-primary);
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;
    gap: var(--op-space-1);
    padding-inline: var(--op-space-2);
    overflow: hidden;
    background: var(--op-timeline-c);
    color: var(--op-color-primary-fg);
    border-radius: var(--op-radius);
    font-size: var(--op-font-size-sm);
    cursor: pointer;
  }
  .op-timeline__bar.is-success { --op-timeline-c: var(--op-color-success); color: var(--op-color-surface); }
  .op-timeline__bar.is-warning { --op-timeline-c: var(--op-color-warning); color: var(--op-color-surface); }
  .op-timeline__bar.is-danger { --op-timeline-c: var(--op-color-danger); color: var(--op-color-danger-fg); }
  .op-timeline__bar.is-info { --op-timeline-c: var(--op-color-info); color: var(--op-color-surface); }
  .op-timeline__bar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-timeline__nowrow {
    block-size: 0;
  }
  .op-timeline__now {
    position: absolute;
    inset-block: calc(-1 * var(--op-space-6)) 0;
    inline-size: var(--op-timeline-line);
    background: var(--op-color-danger);
    pointer-events: none;
  }

  .op-timeline--vertical.op-timeline--range {
    display: grid;
    gap: var(--op-space-2);
  }
  .op-timeline--vertical .op-timeline__axis,
  .op-timeline--vertical .op-timeline__lane {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-block-start: 0;
    border-inline-start: var(--op-border-width) solid var(--op-color-border);
    padding-block: 0;
    padding-inline: var(--op-space-1);
    min-inline-size: 0;
  }
  .op-timeline--vertical .op-timeline__axis {
    border-inline-start: 0;
  }
  .op-timeline--vertical .op-timeline__lane-name {
    text-align: center;
    padding-block-end: var(--op-space-1);
  }
  .op-timeline--vertical .op-timeline__track,
  .op-timeline--vertical .op-timeline__axis .op-timeline__track {
    block-size: var(--op-timeline-height);
  }
  .op-timeline--vertical .op-timeline__tick {
    inset-inline-start: 0;
    transform: translateY(-50%);
  }
  .op-timeline--vertical .op-timeline__bar {
    inset-block: auto;
    inset-inline: 0;
    align-items: flex-start;
    padding-block: var(--op-space-1);
  }
  .op-timeline--vertical .op-timeline__now {
    inset-block: auto;
    inset-inline: 0;
    inline-size: auto;
    block-size: var(--op-timeline-line);
  }
}

@layer optikos {
  :root {
    --op-tree-indent: 1.25rem;
    --op-tree-check-size: 1rem;
    --op-tree-check-icon-size: 0.8em;
  }
  .op-tree {
    display: block;
    min-inline-size: 0;
    overflow: auto;
    color: var(--op-tree-fg, var(--op-color-fg));
    background: var(--op-tree-bg, transparent);
  }
  .op-tree__root,
  .op-tree__group {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .op-tree__item {
    display: flex;
    align-items: center;
    gap: var(--op-space-2);
    box-sizing: border-box;
    min-block-size: var(--op-tree-item-height, var(--op-row-height));
    padding-inline: var(--op-space-1) var(--op-space-3);
    padding-inline-start: calc(var(--op-space-1) + var(--_level, 0) * var(--op-tree-indent));
    border-radius: var(--op-radius-sm);
    cursor: pointer;
    user-select: none;
  }
  .op-tree__item:hover:not(.is-disabled) {
    background: var(--op-tree-hover-bg, var(--op-color-hover));
  }
  .op-tree__item:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: calc(var(--op-focus-width) * -1);
  }
  .op-tree__item.is-selected {
    color: var(--op-tree-selected-fg, var(--op-color-fg));
    background: var(--op-tree-selected-bg, var(--op-color-selected));
  }
  .op-tree__item.is-disabled {
    color: var(--op-color-disabled-fg);
    cursor: default;
  }
  .op-tree__toggle {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--op-tree-indent);
    color: var(--op-color-fg-muted);
  }
  .op-tree__toggle .op-icon {
    transition: transform var(--op-duration) var(--op-easing);
  }
  .op-tree__item.is-expanded > .op-tree__toggle .op-icon {
    transform: rotate(90deg);
  }
  .op-tree__spinner {
    --op-spinner-size: var(--op-tree-check-size);
  }
  .op-tree__check {
    display: inline-grid;
    place-items: center;
    flex: none;
    box-sizing: border-box;
    inline-size: var(--op-tree-check-size);
    block-size: var(--op-tree-check-size);
    border: var(--op-border-width) solid var(--op-color-border-strong);
    border-radius: var(--op-radius-sm);
    background: var(--op-color-surface);
    --op-icon-size: var(--op-tree-check-icon-size);
  }
  .op-tree__check.is-checked,
  .op-tree__check.is-mixed {
    color: var(--op-color-primary-fg);
    background: var(--op-color-primary);
    border-color: var(--op-color-primary);
  }
  .op-tree__icon {
    display: inline-flex;
    color: var(--op-tree-icon-fg, var(--op-color-fg-muted));
  }
  .op-tree__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-tree__empty {
    padding: var(--op-space-3);
    color: var(--op-color-fg-muted);
  }
}

@layer optikos {
  :root {
    --op-grid-indent: 1.25rem;
    --op-grid-expander-size: 1.25rem;
  }
  .op-grid--tree .op-grid__cell:has(> .op-grid__expander) {
    padding-inline-start: calc(var(--op-grid-cell-padding-x, var(--op-control-padding-x)) + var(--_depth, 0) * var(--op-grid-indent));
  }
  .op-grid__expander {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--op-grid-expander-size);
    block-size: var(--op-grid-expander-size);
    margin-inline-end: var(--op-space-1);
    color: var(--op-color-fg-muted);
    cursor: pointer;
    transition: transform var(--op-duration) var(--op-easing);
  }
  .op-grid__body-row[aria-expanded='false'] .op-grid__expander:not(.is-leaf) {
    transform: rotate(-90deg);
  }
  .op-grid__expander.is-leaf {
    cursor: default;
  }
  .op-grid__expander.is-loading {
    cursor: progress;
  }
  @media (prefers-reduced-motion: reduce) {
    .op-grid__expander {
      transition: none;
    }
  }
}

@layer optikos {
  :root {
    --op-calendar-day-size: 2.25rem;
  }
  .op-calendar {
    box-sizing: border-box;
    padding: var(--op-calendar-padding, var(--op-space-2));
    color: var(--op-color-fg);
    background: var(--op-calendar-bg, var(--op-color-surface));
  }
  .op-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--op-space-1);
    margin-block-end: var(--op-space-2);
  }
  .op-calendar__nav,
  .op-calendar__title,
  .op-calendar__month {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--op-radius);
    cursor: pointer;
  }
  .op-calendar__nav {
    display: inline-flex;
    padding: var(--op-space-2);
  }
  .op-calendar__title {
    flex: 1;
    padding: var(--op-space-2);
    font-weight: var(--op-font-weight-bold);
    text-transform: capitalize;
  }
  .op-calendar__nav:hover,
  .op-calendar__title:hover,
  .op-calendar__month:hover {
    background: var(--op-color-hover);
  }
  .op-calendar__grid {
    border-collapse: collapse;
  }
  .op-calendar__dow {
    padding-block-end: var(--op-space-1);
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-font-weight-medium);
    color: var(--op-color-fg-muted);
    text-transform: capitalize;
  }
  .op-calendar__day {
    box-sizing: border-box;
    inline-size: var(--op-calendar-day-size);
    block-size: var(--op-calendar-day-size);
    padding: 0;
    text-align: center;
    border-radius: var(--op-radius);
    cursor: pointer;
  }
  .op-calendar__day:hover {
    background: var(--op-calendar-day-hover-bg, var(--op-color-hover));
  }
  .op-calendar__day.is-outside {
    color: var(--op-calendar-outside-fg, var(--op-color-fg-muted));
  }
  .op-calendar__day.is-today {
    box-shadow: inset 0 0 0 var(--op-border-width) var(--op-calendar-today-border, var(--op-color-primary));
  }
  .op-calendar__day.is-selected,
  .op-calendar__month.is-selected {
    color: var(--op-calendar-day-selected-fg, var(--op-color-primary-fg));
    background: var(--op-calendar-day-selected-bg, var(--op-color-primary));
  }
  .op-calendar__day.is-in-range {
    color: var(--op-calendar-range-fg, var(--op-color-fg));
    background: var(--op-calendar-range-bg, var(--op-color-selected));
    border-radius: 0;
  }
  .op-calendar__day.is-range-start {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  .op-calendar__day.is-range-end {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  .op-calendar__day.is-disabled {
    color: var(--op-color-disabled-fg);
    background: transparent;
    cursor: not-allowed;
    text-decoration: line-through;
  }
  .op-calendar__day:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: 0;
  }
  .op-calendar__months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--op-space-1);
  }
  .op-calendar__month {
    padding: var(--op-space-3) var(--op-space-2);
    text-transform: capitalize;
  }
}

@layer optikos {
  :root {
    --op-alert-accent: 0.25rem;
    --op-alert-icon-offset: 0.125em;
  }
  .op-alert {
    --_tone: var(--op-color-info);
    --_soft: var(--op-color-info-soft);
    display: flex;
    align-items: flex-start;
    gap: var(--op-space-3);
    padding: var(--op-space-3) var(--op-space-4);
    color: var(--op-alert-fg, var(--op-color-fg));
    background: var(--op-alert-bg, var(--_soft));
    border: var(--op-border-width) solid var(--_tone);
    border-inline-start-width: var(--op-alert-accent);
    border-radius: var(--op-alert-radius, var(--op-radius));
    font-family: var(--op-font-family);
    min-inline-size: 0;
  }
  .op-alert--success { --_tone: var(--op-color-success); --_soft: var(--op-color-success-soft); }
  .op-alert--warning { --_tone: var(--op-color-warning); --_soft: var(--op-color-warning-soft); }
  .op-alert--danger { --_tone: var(--op-color-danger); --_soft: var(--op-color-danger-soft); }
  .op-alert[hidden] {
    display: none;
  }
  .op-alert__icon {
    display: inline-flex;
    flex: none;
    margin-block-start: var(--op-alert-icon-offset);
    color: var(--_tone);
  }
  .op-alert__body {
    flex: 1;
    min-inline-size: 0;
  }
  .op-alert__title {
    font-weight: var(--op-font-weight-bold);
  }
  .op-alert__text {
    overflow-wrap: anywhere;
  }
  .op-alert__close {
    display: inline-flex;
    flex: none;
    padding: var(--op-space-1);
    color: inherit;
    background: none;
    border: 0;
    border-radius: var(--op-radius-sm);
    cursor: pointer;
  }
  .op-alert__close:hover {
    background: color-mix(in srgb, var(--_tone) 15%, transparent);
  }
  .op-alert__close:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
}

@layer optikos {
  :root {
    --op-checkbox-size: 1.125rem;
  }
  .op-checkbox__label {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-2);
    min-block-size: var(--op-control-height);
    cursor: pointer;
  }
  .op-checkbox__input {
    position: absolute;
    opacity: 0;
    inline-size: 0;
    block-size: 0;
  }
  .op-checkbox__box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    inline-size: var(--op-checkbox-size);
    block-size: var(--op-checkbox-size);
    color: var(--op-checkbox-checked-fg, var(--op-color-primary-fg));
    background: var(--op-checkbox-bg, var(--op-color-surface));
    border: var(--op-border-width) solid var(--op-checkbox-border, var(--op-color-border-strong));
    border-radius: var(--op-checkbox-radius, var(--op-radius-sm));
    transition: background var(--op-duration) var(--op-easing);
  }
  .op-checkbox__box .op-icon {
    font-size: var(--op-checkbox-size);
    visibility: hidden;
  }
  .op-checkbox__dash {
    position: absolute;
    inset-inline: 25%;
    block-size: var(--op-icon-stroke);
    background: currentColor;
    visibility: hidden;
  }
  .op-checkbox.is-checked .op-checkbox__box,
  .op-checkbox.is-indeterminate .op-checkbox__box {
    background: var(--op-checkbox-checked-bg, var(--op-color-primary));
    border-color: var(--op-checkbox-checked-bg, var(--op-color-primary));
  }
  .op-checkbox.is-checked .op-checkbox__box .op-icon,
  .op-checkbox.is-indeterminate .op-checkbox__dash {
    visibility: visible;
  }
  .op-checkbox__input:focus-visible + .op-checkbox__box {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-checkbox.is-invalid .op-checkbox__box {
    border-color: var(--op-field-invalid-border, var(--op-color-danger));
  }
  .op-checkbox.is-disabled .op-checkbox__label {
    cursor: not-allowed;
    color: var(--op-color-disabled-fg);
  }
}

@layer optikos {
  .op-checkboxgroup__options {
    display: flex;
    flex-direction: column;
    gap: var(--op-checkboxgroup-gap, var(--op-space-1));
  }
  .op-checkboxgroup__options--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--op-checkboxgroup-gap, var(--op-space-4));
  }
}

@layer optikos {
  .op-datetimefield__parts {
    display: flex;
    gap: var(--op-datetimefield-gap, var(--op-space-2));
  }
  .op-datetimefield__parts > .op-field {
    margin: 0;
  }
  .op-datetimefield__parts > .op-field:first-child {
    flex: 1 1 60%;
  }
  .op-datetimefield__parts > .op-field:last-child {
    flex: 1 1 40%;
  }
}

@layer optikos {
  :root {
    --op-dial-spacing: 0.75rem;
    --op-dial-item-spacing: 3.5rem;
    --op-dial-height: 3.75rem;
    --op-dial-size: 13rem;
    --op-dial-readout-size: 2.75rem;
    --op-dial-readout-size-circle: 2rem;
    --op-dial-roll-duration: 380ms;
    --op-dial-tick-height: 0.75rem;
    --op-dial-major-height: 1.375rem;
    --op-dial-needle-width: 0.1875rem;
    --op-dial-label-gap: 0.25rem;
    --op-dial-ring-inset: 0.5rem;
    --op-dial-hub: 0.625rem;
    --op-dial-digit-height: 1em; /* one line of the readout: a reel moves by this per digit */
  }
  .op-dial {
    --_sp: var(--op-dial-spacing);
  }
  .op-dial--list {
    --_sp: var(--op-dial-item-spacing);
  }
  .op-dial__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--op-space-2);
  }

  /* the readout: digits roll like an odometer (each reel is the column 0–9, moved by --d) */
  .op-dial__readout {
    display: flex;
    justify-content: center;
    min-block-size: var(--op-dial-digit-height);
    color: var(--op-dial-readout-fg, var(--op-color-fg));
    font-size: var(--op-dial-readout-size);
    font-weight: var(--op-font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: pre;
  }
  .op-dial__digit,
  .op-dial__reel {
    font-size: inherit; /* the global op-* rule would reset them to the base size */
  }
  .op-dial__digit {
    display: inline-block;
    block-size: var(--op-dial-digit-height);
    overflow: hidden;
  }
  .op-dial__reel {
    display: flex;
    flex-direction: column;
    transform: translateY(calc(var(--d, 0) * -10%));
    transition: transform var(--op-dial-roll-duration) var(--op-motion-ease-out);
  }
  .op-dial__reel > span {
    display: block;
    block-size: var(--op-dial-digit-height);
  }

  /* the face: a flat ruler sliding under a fixed needle */
  .op-dial__face {
    position: relative;
    inline-size: 100%;
    block-size: var(--op-dial-height);
    border-radius: var(--op-radius);
    cursor: grab;
    touch-action: none;
    user-select: none;
  }
  .op-dial__face:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-dial.is-dragging .op-dial__face {
    cursor: grabbing;
  }
  .op-dial__window {
    position: absolute;
    inset: 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  }
  .op-dial__tape {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    /* --pos (set by the component) is the item under the needle, fractional while dragging */
    transform: translateX(calc(var(--pos, 0) * -1 * var(--_sp)));
    transition: transform var(--op-dial-roll-duration) var(--op-motion-ease-out);
  }
  .op-dial.is-dragging .op-dial__tape {
    transition: none;
  }
  .op-dial.is-gliding .op-dial__tape {
    transition-timing-function: var(--op-motion-ease-out);
  }
  .op-dial__tick {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(var(--i) * var(--_sp));
    inline-size: var(--op-border-width);
    block-size: var(--op-dial-tick-height);
    background: var(--op-dial-tick-fg, var(--op-color-border-strong));
    transform: translateX(-50%);
  }
  .op-dial__tick.is-major {
    inline-size: calc(var(--op-border-width) * 2);
    block-size: var(--op-dial-major-height);
    background: var(--op-dial-major-fg, var(--op-color-fg-muted));
  }
  .op-dial__tick-label {
    position: absolute;
    inset-block-start: calc(100% + var(--op-dial-label-gap));
    inset-inline-start: 50%;
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
    white-space: nowrap;
    transform: translateX(-50%);
    transition: color var(--op-duration) var(--op-easing);
  }
  .op-dial__tick.is-current .op-dial__tick-label {
    color: var(--op-color-primary-text, var(--op-color-primary));
    font-weight: var(--op-font-weight-bold);
  }
  .op-dial__needle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: var(--op-dial-needle-width);
    block-size: calc(var(--op-dial-major-height) + var(--op-space-1));
    background: var(--op-dial-needle, var(--op-color-primary));
    border-radius: var(--op-radius-pill);
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* circle: a clock face, the ticks around the ring and a hand from the center */
  .op-dial--circle .op-dial__face {
    inline-size: var(--op-dial-size);
    block-size: var(--op-dial-size);
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: 50%;
  }
  .op-dial--circle .op-dial__window {
    overflow: visible;
    mask-image: none;
  }
  .op-dial--circle .op-dial__tape {
    inset: 0;
    transform: none;
    transition: none;
  }
  .op-dial--circle .op-dial__tick {
    inset-block-start: var(--op-dial-ring-inset);
    inset-inline-start: 50%;
    transform-origin: 50% calc(var(--op-dial-size) / 2 - var(--op-dial-ring-inset) - var(--op-border-width));
    transform: translateX(-50%) rotate(var(--a));
  }
  .op-dial--circle .op-dial__tick-label {
    transform: translateX(-50%) rotate(calc(var(--a) * -1));
  }
  .op-dial--circle .op-dial__needle {
    inset-block-start: auto;
    inset-block-end: 50%;
    block-size: calc(var(--op-dial-size) / 2 - var(--op-dial-ring-inset) - var(--op-dial-major-height) - var(--op-space-5) - var(--op-space-2));
    transform-origin: 50% 100%;
    transition: transform var(--op-dial-roll-duration) var(--op-motion-ease-out);
  }
  .op-dial--circle.is-dragging .op-dial__needle {
    transition: none;
  }
  /* the hub the hand turns on */
  .op-dial--circle .op-dial__needle::after {
    content: '';
    position: absolute;
    inset-block-end: calc(var(--op-dial-hub) / -2);
    inset-inline-start: 50%;
    inline-size: var(--op-dial-hub);
    block-size: var(--op-dial-hub);
    background: inherit;
    border-radius: 50%;
    transform: translateX(-50%);
  }
  .op-dial--circle .op-dial__readout {
    font-size: var(--op-dial-readout-size-circle);
  }

  .op-dial.is-disabled .op-dial__face {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .op-dial.is-readonly .op-dial__face {
    cursor: default;
  }
  .op-motion-off .op-dial__reel,
  .op-motion-off .op-dial__tape,
  .op-motion-off .op-dial__needle {
    transition: none;
  }
}

@layer optikos {
  :root {
    --op-imagefield-thumb-size: 4rem;
    --op-imagefield-remove-icon: 0.875rem;
  }
  .op-imagefield__box {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-2);
  }
  .op-imagefield__picker {
    display: none;
  }
  .op-imagefield__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--op-space-2);
    padding: var(--op-space-4);
    min-block-size: calc(var(--op-imagefield-thumb-size) * 1.5);
    box-sizing: border-box;
    color: var(--op-color-fg-muted);
    background: var(--op-imagefield-zone-bg, var(--op-color-surface));
    border: var(--op-border-width) dashed var(--op-imagefield-zone-border, var(--op-color-border-strong));
    border-radius: var(--op-imagefield-radius, var(--op-radius));
    font: inherit;
    font-size: var(--op-font-size-sm);
    text-align: center;
    cursor: pointer;
  }
  .op-imagefield__zone[hidden] {
    display: none;
  }
  .op-imagefield__zone:hover:not(:disabled),
  .op-imagefield.is-dragover .op-imagefield__zone {
    background: var(--op-imagefield-zone-hover-bg, var(--op-color-primary-soft));
    border-color: var(--op-color-primary);
  }
  .op-imagefield__zone:focus-visible,
  .op-imagefield__remove:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-imagefield__zone:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
  .op-imagefield.is-invalid .op-imagefield__zone {
    border-color: var(--op-color-danger);
  }
  .op-imagefield__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-2);
  }
  .op-imagefield__list:empty {
    display: none;
  }
  .op-imagefield__item {
    position: relative;
    inline-size: var(--op-imagefield-thumb-size);
  }
  .op-imagefield__img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--op-color-surface-2, var(--op-color-bg));
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-imagefield-radius, var(--op-radius));
  }
  .op-imagefield__name {
    display: block;
    overflow: hidden;
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-imagefield__remove {
    position: absolute;
    inset-block-start: var(--op-space-1);
    inset-inline-end: var(--op-space-1);
    display: inline-flex;
    padding: var(--op-space-1);
    color: var(--op-color-fg);
    background: var(--op-color-surface);
    border: var(--op-border-width) solid var(--op-color-border-strong);
    border-radius: 50%;
    cursor: pointer;
  }
  .op-imagefield__remove[hidden] {
    display: none;
  }
  .op-imagefield__remove:hover:not(:disabled) {
    color: var(--op-color-danger);
  }
  .op-imagefield__remove .op-icon {
    inline-size: var(--op-imagefield-remove-icon);
    block-size: var(--op-imagefield-remove-icon);
  }
}

@layer optikos {
  :root {
    --op-listbox-max-height: 15rem;
  }
  .op-listbox {
    position: relative;
    box-sizing: border-box;
    max-block-size: var(--op-listbox-max-height);
    overflow: auto;
    background: var(--op-listbox-bg, var(--op-color-surface));
    color: var(--op-color-fg);
  }
  .op-listbox__item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: var(--op-listbox-item-padding-y, 0) var(--op-listbox-item-padding-x, var(--op-control-padding-x));
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .op-listbox__item.is-active {
    background: var(--op-listbox-item-active-bg, var(--op-color-hover));
  }
  .op-listbox__item.is-selected {
    color: var(--op-listbox-item-selected-fg, var(--op-color-primary));
    font-weight: var(--op-font-weight-bold);
  }
  .op-listbox__item.is-disabled {
    color: var(--op-color-disabled-fg);
    cursor: not-allowed;
  }
  .op-listbox__mark {
    color: inherit;
    background: var(--op-color-primary-soft);
    font-weight: var(--op-font-weight-bold);
  }
  .op-listbox__hint {
    margin-inline-start: auto;
    padding-inline-start: var(--op-space-3);
    color: var(--op-listbox-hint-fg, var(--op-color-fg-muted));
    font-size: var(--op-font-size-sm);
    font-weight: normal;
  }
  .op-listbox__empty {
    padding: var(--op-space-3);
    color: var(--op-listbox-empty-fg, var(--op-color-fg-muted));
  }
}

@layer optikos {
  .op-picker__trigger {
    position: absolute;
    inset-inline-end: var(--op-space-1);
    display: inline-flex;
    padding: var(--op-space-1);
    color: var(--op-picker-arrow-fg, var(--op-color-fg-muted));
    background: transparent;
    border: 0;
    border-radius: var(--op-radius-sm);
    cursor: pointer;
    transition: transform var(--op-duration) var(--op-easing);
  }
  .op-picker.is-open .op-picker__trigger {
    transform: rotate(180deg);
  }
  .op-picker:has(.op-picker__trigger) .op-textfield__input {
    padding-inline-end: calc(var(--op-icon-size) + var(--op-space-3));
  }
  .op-picker.is-readonly .op-textfield__input,
  .op-select .op-textfield__input {
    cursor: pointer;
    text-overflow: ellipsis;
  }
  /* stableSize: room for the spinner is always there, so the text does not shift when a search starts */
  .op-suggest.op-stable .op-textfield__input {
    padding-inline-end: calc(var(--op-icon-size) + var(--op-space-3));
  }
  .op-picker.is-searching .op-picker__spinner {
    display: inline-block;
  }
  .op-picker__spinner {
    --op-spinner-size: var(--op-icon-size);
    position: absolute;
    inset-inline-end: var(--op-space-2);
    display: none;
  }
  .op-picker__trigger:disabled {
    cursor: not-allowed;
  }
  .op-suggest__icon {
    position: absolute;
    inset-inline-start: var(--op-space-2);
    display: inline-flex;
    align-items: center;
    height: 100%;
    color: var(--op-picker-arrow-fg, var(--op-color-fg-muted));
    pointer-events: none;
  }
  .op-textfield__wrap.has-icon .op-textfield__input {
    padding-inline-start: calc(var(--op-icon-size) + var(--op-space-3));
  }
  /* the lookup's magnifier button sits where the arrow would; the spinner moves left of it */
  .op-lookup .op-picker__spinner {
    inset-inline-end: calc(var(--op-icon-size) + var(--op-space-4));
  }
  .op-lookup.op-stable .op-textfield__input {
    padding-inline-end: calc(var(--op-icon-size) * 2 + var(--op-space-5));
  }
  /* showValue: the record's id as a badge at the start of the field */
  .op-picker__id {
    position: absolute;
    inset-inline-start: var(--op-space-2);
    inset-block: 50% auto;
    transform: translateY(-50%);
    padding: 0 var(--op-space-2);
    color: var(--op-picker-id-fg, var(--op-color-fg-muted));
    background: var(--op-picker-id-bg, var(--op-color-surface-2));
    border-radius: var(--op-radius-pill);
    font-size: var(--op-font-size-sm);
    pointer-events: none;
  }
  .op-picker__id[hidden] {
    display: none;
  }
  .op-textfield__wrap.has-id .op-textfield__input {
    padding-inline-start: calc(var(--op-picker-id-width) + var(--op-space-4));
  }
  .op-textfield__wrap.has-id.has-icon .op-picker__id {
    inset-inline-start: calc(var(--op-icon-size) + var(--op-space-3));
  }
  .op-textfield__wrap.has-id.has-icon .op-textfield__input {
    padding-inline-start: calc(var(--op-icon-size) + var(--op-picker-id-width) + var(--op-space-5));
  }
}

@layer optikos {
  :root {
    --op-radio-size: 1.125rem;
  }
  .op-radiogroup__options {
    display: flex;
    flex-direction: column;
    gap: var(--op-radiogroup-gap, var(--op-space-1));
  }
  .op-radiogroup__options--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--op-radiogroup-gap, var(--op-space-4));
  }
  .op-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-2);
    min-block-size: var(--op-control-height);
    cursor: pointer;
  }
  .op-radio__input {
    position: absolute;
    opacity: 0;
    inline-size: 0;
    block-size: 0;
  }
  .op-radio__dot {
    flex: none;
    box-sizing: border-box;
    inline-size: var(--op-radio-size);
    block-size: var(--op-radio-size);
    background: var(--op-radio-bg, var(--op-color-surface));
    border: var(--op-border-width) solid var(--op-radio-border, var(--op-color-border-strong));
    border-radius: 50%;
  }
  .op-radio.is-checked .op-radio__dot {
    background: var(--op-radio-checked-bg, var(--op-color-primary));
    border-color: var(--op-radio-checked-bg, var(--op-color-primary));
    box-shadow: inset 0 0 0 var(--op-space-1) var(--op-radio-bg, var(--op-color-surface));
  }
  .op-radio__input:focus-visible + .op-radio__dot {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-radio:has(:disabled) {
    cursor: not-allowed;
    color: var(--op-color-disabled-fg);
  }
  .op-radiogroup.is-invalid .op-radio__dot {
    border-color: var(--op-field-invalid-border, var(--op-color-danger));
  }
}

@layer optikos {
  :root {
    --op-secret-mask-tracking: 0.1em;
  }
  .op-secret__box {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-1);
  }
  .op-secret .op-textfield__input {
    padding-inline-end: calc(var(--op-icon-size) + var(--op-space-5));
  }
  .op-secret__eye,
  .op-secret__replace,
  .op-secret__keep {
    font: inherit;
    cursor: pointer;
  }
  .op-secret__eye {
    position: absolute;
    inset-inline-end: var(--op-space-1);
    display: inline-flex;
    padding: var(--op-space-1);
    color: var(--op-color-fg-muted);
    background: transparent;
    border: 0;
    border-radius: var(--op-radius-sm);
  }
  .op-secret__eye:hover,
  .op-secret__eye[aria-pressed='true'] {
    color: var(--op-color-primary);
  }
  .op-secret__replace,
  .op-secret__keep {
    color: var(--op-color-primary);
    background: transparent;
    border: 0;
    text-decoration: underline;
  }
  .op-secret__replace {
    position: absolute;
    inset-inline-end: var(--op-space-3);
  }
  .op-secret__eye:focus-visible,
  .op-secret__replace:focus-visible,
  .op-secret__keep:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  /* saved: a mask where the value would be, and a field that looks closed (it opens through the warning) */
  .op-secret.is-stored .op-textfield__input {
    cursor: pointer;
    background: var(--op-color-surface-2);
  }
  .op-secret.is-stored .op-textfield__input::placeholder {
    color: var(--op-secret-mask-fg, var(--op-color-fg));
    letter-spacing: var(--op-secret-mask-tracking);
  }
  .op-secret__hint {
    display: flex;
    align-items: baseline;
    gap: var(--op-space-3);
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
  .op-secret__hint[hidden],
  .op-secret__note[hidden],
  .op-secret__keep[hidden],
  .op-secret__eye[hidden],
  .op-secret__replace[hidden] {
    display: none;
  }
}

@layer optikos {
  :root {
    --op-slider-track-height: 0.375rem;
    --op-slider-knob-size: 1.25rem;
    --op-slider-bubble-offset: 0.5rem;
  }
  .op-slider__box {
    padding-block: calc(var(--op-slider-knob-size) / 2 + var(--op-space-2)) var(--op-space-1);
    padding-inline: calc(var(--op-slider-knob-size) / 2);
  }
  .op-slider.has-bubble-always .op-slider__box {
    padding-block-start: calc(var(--op-slider-knob-size) + var(--op-space-4));
  }
  .op-slider__track {
    position: relative;
    block-size: var(--op-slider-track-height);
    background: var(--op-slider-track-bg, var(--op-color-border-strong));
    border-radius: var(--op-radius-pill);
    cursor: pointer;
    touch-action: none;
  }
  .op-slider__fill {
    position: absolute;
    inset-block: 0;
    background: var(--op-slider-fill-bg, var(--op-color-primary));
    border-radius: inherit;
  }
  .op-slider__knob {
    position: absolute;
    inset-block-start: 50%;
    inline-size: var(--op-slider-knob-size);
    block-size: var(--op-slider-knob-size);
    margin-inline-start: calc(var(--op-slider-knob-size) / -2);
    margin-block-start: calc(var(--op-slider-knob-size) / -2);
    box-sizing: border-box;
    background: var(--op-slider-knob-bg, var(--op-color-surface));
    border: calc(var(--op-border-width) * 2) solid var(--op-slider-knob-border, var(--op-color-primary));
    border-radius: 50%;
    box-shadow: var(--op-shadow-sm);
    cursor: grab;
    touch-action: none;
  }
  .op-slider.is-dragging .op-slider__knob {
    cursor: grabbing;
  }
  .op-slider__knob:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-slider__knob[aria-valuenow] {
    z-index: 1;
  }
  /* the bubble with the value: above the knob, while dragging or focused (or always / never) */
  .op-slider__bubble {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: calc(100% + var(--op-slider-bubble-offset));
    padding: 0 var(--op-space-2);
    color: var(--op-slider-bubble-fg, var(--op-color-inverse-fg));
    background: var(--op-slider-bubble-bg, var(--op-color-inverse-bg));
    border-radius: var(--op-radius-sm);
    font-size: var(--op-font-size-sm);
    white-space: nowrap;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
  }
  .op-slider.is-dragging .op-slider__bubble,
  .op-slider.is-focus-knob .op-slider__knob:focus-visible .op-slider__bubble,
  .op-slider.has-bubble-always .op-slider__bubble {
    opacity: 1;
  }
  .op-slider.has-bubble-never .op-slider__bubble {
    display: none;
  }
  .op-slider__mark {
    position: absolute;
    inset-block-start: 100%;
    inline-size: var(--op-border-width);
    block-size: var(--op-space-2);
    margin-block-start: var(--op-space-1);
    background: var(--op-color-border-strong);
  }
  .op-slider__mark-label {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
    white-space: nowrap;
    transform: translateX(-50%);
  }
  .op-slider__scale {
    display: flex;
    justify-content: space-between;
    margin-block-start: var(--op-space-3);
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
  .op-slider.is-disabled .op-slider__track,
  .op-slider.is-readonly .op-slider__track {
    cursor: not-allowed;
  }
  .op-slider.is-disabled {
    opacity: 0.6;
  }
}

@layer optikos {
  :root {
    --op-textarea-min-height: 4rem;
  }
  .op-textarea__input {
    min-block-size: var(--op-textarea-min-height);
    padding-block: var(--op-space-2);
    resize: vertical;
    line-height: var(--op-line-height);
  }
}

@layer optikos {
  .op-textfield {
    --_bg: var(--op-textfield-bg, var(--op-color-surface));
    --_border: var(--op-textfield-border, var(--op-color-border-strong));
  }
  .op-textfield__wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .op-textfield__input {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: var(--op-textfield-height, var(--op-control-height));
    padding: var(--op-textfield-padding-y, 0) var(--op-textfield-padding-x, var(--op-control-padding-x));
    font: inherit;
    color: var(--op-textfield-fg, var(--op-color-fg));
    background: var(--_bg);
    border: var(--op-border-width) solid var(--_border);
    border-radius: var(--op-textfield-radius, var(--op-radius));
    transition: border-color var(--op-duration) var(--op-easing);
  }
  .op-textfield__input::placeholder {
    color: var(--op-textfield-placeholder, var(--op-color-fg-muted));
  }
  .op-textfield__input:focus {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: 0;
    border-color: var(--op-textfield-border-focus, var(--op-color-focus));
  }
  .op-textfield.is-invalid .op-textfield__input {
    --_border: var(--op-field-invalid-border, var(--op-color-danger));
  }
  .op-textfield.is-readonly .op-textfield__input {
    background: var(--op-color-surface-2);
  }
  .op-textfield__input:disabled {
    color: var(--op-color-disabled-fg);
    background: var(--op-color-disabled-bg);
    cursor: not-allowed;
  }
  .op-textfield__clear {
    position: absolute;
    inset-inline-end: var(--op-space-1);
    display: none;
    padding: var(--op-space-1);
    color: var(--op-color-fg-muted);
    background: transparent;
    border: 0;
    border-radius: var(--op-radius-sm);
    cursor: pointer;
  }
  .op-textfield.has-value .op-textfield__clear {
    display: inline-flex;
  }
  .op-textfield__clear:hover {
    color: var(--op-color-fg);
  }
}

@layer optikos {
  :root {
    --op-toggle-width: 2.25rem;
    --op-toggle-height: 1.25rem;
    --op-toggle-knob-inset: 0.1875rem;
  }
  /* the checkbox box becomes a track; its knob is a pseudo-element that slides */
  .op-toggle .op-checkbox__box {
    inline-size: var(--op-toggle-width);
    block-size: var(--op-toggle-height);
    border-radius: var(--op-radius-pill);
    background: var(--op-toggle-track-bg, var(--op-color-border-strong));
    border-color: transparent;
    transition: background var(--op-duration) var(--op-easing);
  }
  .op-toggle .op-checkbox__box > * {
    display: none;
  }
  .op-toggle .op-checkbox__box::after {
    content: '';
    position: absolute;
    inset-block: var(--op-toggle-knob-inset);
    inset-inline-start: var(--op-toggle-knob-inset);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--op-toggle-knob-bg, var(--op-color-surface));
    box-shadow: var(--op-shadow-sm);
    transition: translate var(--op-duration) var(--op-easing);
  }
  .op-toggle.is-checked .op-checkbox__box {
    background: var(--op-toggle-on-bg, var(--op-color-primary));
  }
  .op-toggle.is-checked .op-checkbox__box::after {
    translate: calc(var(--op-toggle-width) - var(--op-toggle-height)) 0;
  }
  [dir='rtl'] .op-toggle.is-checked .op-checkbox__box::after {
    translate: calc((var(--op-toggle-width) - var(--op-toggle-height)) * -1) 0;
  }
}

@layer optikos {
  .op-fieldgroup__body {
    --op-layout-gap: var(--op-fieldgroup-gap, var(--op-space-2));
  }
  /* the fields share the row; each still has its label for screen readers, but only the group's label shows */
  .op-fieldgroup__body > .op-field {
    flex: 1 1 0;
    min-inline-size: 0;
  }
  .op-fieldgroup__body .op-field__label {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .op-fieldgroup__body .op-field__help,
  .op-fieldgroup__body .op-field__error,
  .op-fieldgroup__body .op-field.op-stable > .op-field__error:empty {
    display: none; /* the group has the one error line (and beats the reserved line of stableSize) */
  }
  .op-fieldgroup > .op-field__label {
    cursor: default;
  }
}

@layer optikos {
  .op-fieldlist__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--op-fieldlist-gap, var(--op-space-2));
  }
  .op-fieldlist__rows {
    display: flex;
    flex-direction: column;
    gap: var(--op-fieldlist-row-gap, var(--op-space-2));
    align-self: stretch;
  }
  .op-fieldlist__row {
    --op-layout-gap: var(--op-space-2);
  }
  .op-fieldlist__row > .op-field {
    flex: 1 1 0;
    min-inline-size: 0;
  }
  /* the labels read as a column header: shown on the first row, kept for screen readers on the others */
  .op-fieldlist__row:not(.is-first) .op-field__label {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .op-fieldlist__row:not(.is-first) .op-field__help {
    display: none;
  }
  .op-fieldlist__tools {
    display: flex;
    flex: none;
    gap: var(--op-space-1);
    align-self: flex-start;
    min-block-size: var(--op-control-height);
    align-items: center;
  }
  /* on the first row the tools line up with the inputs, under the labels */
  .op-fieldlist__row.is-first > .op-fieldlist__tools {
    margin-block-start: calc(var(--op-font-size) * var(--op-line-height) + var(--op-field-gap, var(--op-space-1)));
  }
  .op-fieldlist__tool,
  .op-fieldlist__add {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-1);
    color: var(--op-color-fg-muted);
    background: transparent;
    border: 0;
    border-radius: var(--op-radius-sm);
    font: inherit;
    cursor: pointer;
  }
  .op-fieldlist__tool {
    padding: var(--op-space-1);
  }
  .op-fieldlist__add {
    padding: var(--op-space-1) var(--op-space-2);
    color: var(--op-color-primary-text, var(--op-color-primary));
    font-weight: var(--op-font-weight-medium);
  }
  .op-fieldlist__tool:hover:not(:disabled),
  .op-fieldlist__add:hover:not(:disabled) {
    color: var(--op-color-fg);
    background: var(--op-color-hover);
  }
  .op-fieldlist__tool:disabled,
  .op-fieldlist__add:disabled {
    color: var(--op-color-disabled-fg);
    cursor: not-allowed;
  }
  .op-fieldlist__tool:focus-visible,
  .op-fieldlist__add:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-fieldlist__empty {
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
}

@layer optikos {
  .op-form {
    --op-layout-gap: var(--op-form-gap, var(--op-space-3));
  }
  .op-form__tab {
    padding: var(--op-form-tab-padding, var(--op-space-4));
  }
}

@layer optikos {
  .op-formactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--op-space-2) var(--op-space-3);
    padding: var(--op-formactions-padding, var(--op-space-3) 0 0);
    border-block-start: var(--op-border-width) solid var(--op-formactions-border, var(--op-color-border));
  }
  .op-formactions__status {
    flex: 1;
    min-inline-size: 0;
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
  .op-formactions__status:not(:empty)::before {
    content: '';
    display: inline-block;
    inline-size: var(--op-space-2);
    block-size: var(--op-space-2);
    margin-inline-end: var(--op-space-2);
    background: var(--op-color-warning);
    border-radius: 50%;
  }
  .op-formactions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-2);
    margin-inline-start: auto;
  }
  /* sticky: stays at the bottom of the scrolling area while the form scrolls under it */
  .op-formactions.is-sticky {
    position: sticky;
    inset-block-end: 0;
    z-index: 1;
    padding: var(--op-formactions-padding, var(--op-space-3));
    background: var(--op-formactions-bg, var(--op-color-surface));
    box-shadow: var(--op-shadow-sm);
  }
}

@layer optikos {
  .op-formerrors {
    padding: var(--op-space-3) var(--op-space-4);
    color: var(--op-formerrors-fg, var(--op-color-fg));
    background: var(--op-formerrors-bg, var(--op-color-danger-soft));
    border: var(--op-border-width) solid var(--op-formerrors-border, var(--op-color-danger));
    border-inline-start-width: calc(var(--op-border-width) * 4);
    border-radius: var(--op-radius);
  }
  .op-formerrors:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-formerrors__title {
    font-weight: var(--op-font-weight-bold);
  }
  .op-formerrors__list {
    margin: var(--op-space-2) 0 0;
    padding-inline-start: var(--op-space-4);
  }
  .op-formerrors__link {
    padding: 0;
    color: var(--op-color-danger);
    background: none;
    border: 0;
    font: inherit;
    text-align: start;
    text-decoration: underline;
    cursor: pointer;
  }
  .op-formerrors__link:hover {
    text-decoration-thickness: calc(var(--op-border-width) * 2);
  }
  .op-formerrors__link:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
    border-radius: var(--op-radius-sm);
  }
}

@layer optikos {
  :root {
    --op-formsection-aside-width: 16rem;
    --op-formsection-gap: var(--op-space-6);
  }
  /* side by side when the section itself is wide enough: a container query, so it works inside any panel or window */
  .op-formsection {
    display: flow-root; /* holds the floated aside */
    container-type: inline-size;
    min-inline-size: 0;
  }
  .op-formsection__aside,
  .op-formsection__body {
    min-inline-size: 0;
  }
  .op-formsection__body {
    --op-layout-gap: var(--op-form-gap, var(--op-space-3));
    margin-block-start: var(--op-space-3);
  }
  .op-formsection__title {
    margin: 0;
    font-size: var(--op-font-size-lg);
    font-weight: var(--op-font-weight-bold);
  }
  .op-formsection__desc {
    margin: var(--op-space-1) 0 0;
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
  .op-formsection--divided + .op-formsection--divided {
    margin-block-start: var(--op-space-4);
    padding-block-start: var(--op-space-5);
    border-block-start: var(--op-border-width) solid var(--op-formsection-divider, var(--op-color-border));
  }
  @container (min-width: 40rem) {
    .op-formsection:not(.op-formsection--stacked) > .op-formsection__aside {
      float: inline-start;
      inline-size: var(--op-formsection-aside-width);
    }
    .op-formsection:not(.op-formsection--stacked) > .op-formsection__body {
      margin-block-start: 0;
      margin-inline-start: calc(var(--op-formsection-aside-width) + var(--op-formsection-gap));
    }
  }
}

@layer optikos {
  /* the field's control becomes a row: [prefix][input box][suffix], the inner corners squared off */
  .op-inputgroup__row {
    display: flex;
    align-items: stretch;
  }
  .op-inputgroup__row > :not(.op-inputgroup__affix) {
    flex: 1;
    min-inline-size: 0;
  }
  .op-inputgroup__affix {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-1);
    padding-inline: var(--op-control-padding-x);
    color: var(--op-inputgroup-affix-fg, var(--op-color-fg-muted));
    background: var(--op-inputgroup-affix-bg, var(--op-color-surface-2));
    border: var(--op-border-width) solid var(--op-textfield-border, var(--op-color-border-strong));
    white-space: nowrap;
  }
  .op-inputgroup__btn {
    color: var(--op-color-fg);
    font: inherit;
    font-weight: var(--op-font-weight-medium);
    cursor: pointer;
  }
  .op-inputgroup__btn:hover {
    background: var(--op-color-hover);
  }
  .op-inputgroup__btn:focus-visible {
    position: relative;
    z-index: 1;
    outline: var(--op-focus-width) solid var(--op-color-focus);
  }
  .op-inputgroup__affix--prefix {
    margin-inline-end: calc(var(--op-border-width) * -1);
    border-start-start-radius: var(--op-textfield-radius, var(--op-radius));
    border-end-start-radius: var(--op-textfield-radius, var(--op-radius));
  }
  .op-inputgroup__affix--suffix {
    margin-inline-start: calc(var(--op-border-width) * -1);
    border-start-end-radius: var(--op-textfield-radius, var(--op-radius));
    border-end-end-radius: var(--op-textfield-radius, var(--op-radius));
  }
  /* every text-based field (Select, DateField, NumberField...) draws its box on .op-textfield__input */
  .op-inputgroup .has-prefix .op-textfield__input {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  .op-inputgroup .has-suffix .op-textfield__input {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  .op-inputgroup .op-textfield__input:focus {
    position: relative;
    z-index: 1; /* the focus ring stays above the joined segments */
  }
}

@layer optikos {
  :root {
    --op-stepform-review-label-width: 9rem;
  }
  .op-stepform {
    display: flex;
    flex-direction: column;
    gap: var(--op-stepform-gap, var(--op-space-4));
    min-block-size: 0;
  }
  .op-stepform > .op-stepper {
    flex: none;
    padding-inline: var(--op-stepform-step-padding, var(--op-space-3));
  }
  .op-stepform__body {
    flex: 1;
    min-block-size: 0;
    overflow: auto;
  }
  .op-stepform__step {
    padding: var(--op-stepform-step-padding, var(--op-space-3));
  }
  .op-stepform > .op-stepform__footer {
    flex: none;
    border-block-end: 0;
    border-block-start: var(--op-border-width) solid var(--op-color-border);
  }
  .op-stepform__review-title {
    margin: var(--op-space-3) 0 var(--op-space-2);
    font-size: var(--op-font-size-lg);
    font-weight: var(--op-font-weight-bold);
  }
  .op-stepform__review-list {
    display: grid;
    grid-template-columns: minmax(var(--op-stepform-review-label-width), max-content) minmax(0, 1fr);
    gap: var(--op-space-1) var(--op-space-4);
    margin: 0;
  }
  .op-stepform__review-list dt {
    color: var(--op-color-fg-muted);
  }
  .op-stepform__review-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line; /* FieldList: one line per row */
  }
  /* a step's general message (its validate returned a string) */
  .op-stepform__note {
    margin-block-end: var(--op-space-3);
    padding: var(--op-space-2) var(--op-space-3);
    color: var(--op-color-danger);
    background: var(--op-color-danger-soft);
    border-radius: var(--op-radius);
    font-size: var(--op-font-size-sm);
  }
}

@layer optikos {
  :root {
    --op-carousel-dot-size: 0.5rem;
    --op-carousel-gap: 0rem;
  }
  .op-carousel {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-2);
    min-inline-size: 0;
    font-family: var(--op-font-family);
  }
  .op-carousel__viewport {
    position: relative;
  }
  .op-carousel__track {
    position: relative;
    display: flex;
    gap: var(--op-carousel-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: var(--op-carousel-radius, var(--op-radius));
  }
  .op-carousel__track::-webkit-scrollbar {
    display: none;
  }
  .op-carousel__track:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-carousel__track > * {
    flex: 0 0 calc((100% - (var(--op-carousel-per-view, 1) - 1) * var(--op-carousel-gap)) / var(--op-carousel-per-view, 1));
    min-inline-size: 0;
    scroll-snap-align: start;
  }
  .op-carousel__prev,
  .op-carousel__next {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    display: inline-flex;
    padding: var(--op-space-2);
    color: var(--op-carousel-arrow-fg, var(--op-color-fg));
    background: var(--op-carousel-arrow-bg, var(--op-color-surface));
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: 50%;
    box-shadow: var(--op-shadow);
    cursor: pointer;
  }
  .op-carousel__prev {
    inset-inline-start: var(--op-space-2);
  }
  .op-carousel__next {
    inset-inline-end: var(--op-space-2);
  }
  [dir='rtl'] .op-carousel__prev .op-icon,
  [dir='rtl'] .op-carousel__next .op-icon {
    scale: -1 1;
  }
  .op-carousel__prev:disabled,
  .op-carousel__next:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .op-carousel__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--op-space-1);
  }
  .op-carousel__footer:not(:has(:not([hidden]))) {
    display: none;
  }
  .op-carousel__caption {
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
    text-align: center;
  }
  .op-carousel__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--op-space-3);
  }
  .op-carousel__bar:not(:has(:not([hidden]))) {
    display: none;
  }
  .op-carousel--fade .op-carousel__track {
    display: grid;
    overflow: hidden;
    scroll-snap-type: none;
  }
  .op-carousel--fade .op-carousel__track > * {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--op-carousel-fade, 600ms) var(--op-easing), visibility 0s linear var(--op-carousel-fade, 600ms);
  }
  .op-carousel--fade .op-carousel__track > .is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--op-carousel-fade, 600ms) var(--op-easing);
  }
  .op-carousel--overlay {
    position: relative;
  }
  .op-carousel--overlay .op-carousel__footer {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--op-space-6) var(--op-space-3) var(--op-space-3);
    color: var(--op-carousel-overlay-fg, var(--op-color-surface));
    background: linear-gradient(transparent, var(--op-carousel-scrim, color-mix(in srgb, var(--op-color-fg) 65%, transparent)));
    border-end-start-radius: var(--op-carousel-radius, var(--op-radius));
    border-end-end-radius: var(--op-carousel-radius, var(--op-radius));
    pointer-events: none;
  }
  .op-carousel--overlay .op-carousel__footer > * {
    pointer-events: auto;
  }
  .op-carousel--overlay .op-carousel__caption,
  .op-carousel--overlay .op-carousel__toggle {
    color: inherit;
  }
  .op-carousel--overlay .op-carousel__dot {
    background: color-mix(in srgb, currentColor 45%, transparent);
  }
  .op-carousel--overlay .op-carousel__dot[aria-current] {
    background: currentColor;
  }
  .op-carousel__dots {
    display: flex;
    gap: var(--op-space-1);
  }
  .op-carousel__dot {
    inline-size: var(--op-carousel-dot-size);
    block-size: var(--op-carousel-dot-size);
    padding: 0;
    background: var(--op-carousel-dot-bg, var(--op-color-border-strong));
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }
  .op-carousel__dot[aria-current] {
    background: var(--op-carousel-dot-active-bg, var(--op-color-primary));
  }
  .op-carousel__toggle {
    display: inline-flex;
    padding: var(--op-space-1);
    color: var(--op-color-fg);
    background: none;
    border: 0;
    border-radius: var(--op-radius);
    cursor: pointer;
  }
  .op-carousel__prev:focus-visible,
  .op-carousel__next:focus-visible,
  .op-carousel__dot:focus-visible,
  .op-carousel__toggle:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-carousel__prev[hidden],
  .op-carousel__next[hidden],
  .op-carousel__toggle[hidden],
  .op-carousel__dots[hidden] {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .op-carousel__track {
      scroll-behavior: auto;
    }
    .op-carousel--fade .op-carousel__track > * {
      transition: none;
    }
  }
}

@layer optikos {
  .op-container {
    min-width: 0;
  }
}

@layer optikos {
  .op-fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: var(--op-fieldset-padding, var(--op-space-3));
    color: var(--op-color-fg);
    border: var(--op-border-width) solid var(--op-fieldset-border, var(--op-color-border));
    border-radius: var(--op-fieldset-radius, var(--op-radius));
  }
  .op-fieldset__legend {
    display: flex;
    align-items: center;
    gap: var(--op-space-1);
    padding-inline: var(--op-space-1);
    color: var(--op-fieldset-legend-fg, var(--op-color-fg));
    font-weight: var(--op-font-weight-bold);
  }
  .op-fieldset__toggle {
    display: inline-flex;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .op-fieldset.is-collapsed .op-fieldset__toggle .op-icon {
    transform: rotate(180deg);
  }
  .op-fieldset.is-collapsed {
    padding-block-end: 0;
  }
  .op-fieldset__desc {
    margin: 0 0 var(--op-space-3);
    padding-inline: var(--op-space-1);
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
  .op-fieldset__body {
    --op-layout-gap: var(--op-form-gap, var(--op-space-3));
  }
  /* line: no frame, a rule under the legend; plain: just the legend */
  .op-fieldset--line,
  .op-fieldset--plain {
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .op-fieldset--line > .op-fieldset__legend,
  .op-fieldset--plain > .op-fieldset__legend {
    inline-size: 100%;
    margin-block-end: var(--op-space-3);
    padding: 0;
  }
  .op-fieldset--line > .op-fieldset__legend {
    padding-block-end: var(--op-space-2);
    border-block-end: var(--op-border-width) solid var(--op-fieldset-border, var(--op-color-border));
  }
  .op-fieldset--line > .op-fieldset__desc,
  .op-fieldset--plain > .op-fieldset__desc {
    margin-block-start: calc(var(--op-space-2) * -1);
    padding: 0;
  }
  .op-fieldset--collapsible-title .op-fieldset__title,
  .op-fieldset__toggle + .op-fieldset__title {
    cursor: pointer;
    user-select: none;
  }
}

@layer optikos {
  .op-panel {
    --_bg: var(--op-panel-bg, var(--op-color-surface));
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    color: var(--op-panel-fg, var(--op-color-fg));
    background: var(--_bg);
    border: var(--op-border-width) solid var(--op-panel-border, var(--op-color-border));
    border-radius: var(--op-panel-radius, var(--op-radius));
    box-shadow: var(--op-panel-shadow, none);
    overflow: hidden;
  }
  .op-panel__header {
    display: flex;
    align-items: center;
    gap: var(--op-space-2);
    padding: var(--op-panel-header-padding, var(--op-space-2) var(--op-space-3));
    background: var(--op-panel-header-bg, var(--op-color-surface-2));
    color: var(--op-panel-header-fg, var(--op-color-fg));
    border-block-end: var(--op-border-width) solid var(--op-panel-header-border, var(--op-panel-border, var(--op-color-border-strong)));
    font-weight: var(--op-font-weight-bold);
  }
  .op-panel__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-panel--collapsible .op-panel__title {
    cursor: pointer;
  }
  .op-panel__tools {
    display: flex;
    gap: var(--op-space-1);
  }
  .op-panel__tool {
    display: inline-flex;
    padding: var(--op-space-1);
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: var(--op-radius-sm);
    cursor: pointer;
  }
  .op-panel__tool:hover {
    background: var(--op-color-hover);
  }
  .op-panel__tool:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: 0;
  }
  .op-panel.is-collapsed .op-panel__header {
    border-block-end: 0;
  }
  .op-panel.is-collapsed .op-panel__tool:first-child .op-icon {
    transform: rotate(180deg);
  }
  .op-panel__body {
    flex: 1;
    min-height: 0;
    padding: var(--op-panel-body-padding, var(--op-space-3));
    overflow: auto;
  }
  .op-panel__tbar,
  .op-panel__bbar,
  .op-panel__footer {
    border-block-end: var(--op-border-width) solid var(--op-color-border);
  }
  .op-panel__bbar,
  .op-panel__footer {
    border-block-end: 0;
    border-block-start: var(--op-border-width) solid var(--op-color-border);
  }
  /* the ↻ tool turns while the panel reloads */
  .op-panel.is-reloading > .op-panel__header .op-panel__tool svg {
    animation: op-spin 700ms linear infinite;
  }
  .op-motion-off .op-panel.is-reloading > .op-panel__header .op-panel__tool svg {
    animation: none;
  }
}

@layer optikos {
  .op-spacer--line {
    align-self: stretch;
    inline-size: var(--op-border-width);
    background: var(--op-spacer-line, var(--op-color-border));
  }
}

@layer optikos {
  .op-toolbar {
    --op-layout-gap: var(--op-toolbar-gap, var(--op-space-2));
    flex-wrap: wrap;
    padding: var(--op-toolbar-padding, var(--op-space-2));
    background: var(--op-toolbar-bg, var(--op-color-surface));
    border-block-end: var(--op-border-width) solid var(--op-toolbar-border, var(--op-color-border));
  }
  /* toolbar items keep their size and wrap to a new row instead of being squeezed or cut */
  .op-toolbar > * {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@layer optikos {
  .op-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    color: var(--op-viewport-fg, var(--op-color-fg));
    background: var(--op-viewport-bg, var(--op-color-bg));
  }
}

@layer optikos {
  :root {
    --op-breadcrumb-separator: '›';
  }
  .op-breadcrumb {
    color: var(--op-breadcrumb-fg, var(--op-color-fg-muted));
  }
  .op-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--op-breadcrumb-gap, var(--op-space-1));
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .op-breadcrumb__list > li + li::before {
    content: var(--op-breadcrumb-separator);
    margin-inline-end: var(--op-breadcrumb-gap, var(--op-space-1));
  }
  .op-breadcrumb__item,
  .op-breadcrumb__more,
  .op-breadcrumb__current {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-1);
    padding: var(--op-space-1);
    font: inherit;
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--op-radius-sm);
  }
  .op-breadcrumb__item,
  .op-breadcrumb__more {
    cursor: pointer;
  }
  .op-breadcrumb__item:hover,
  .op-breadcrumb__more:hover {
    color: var(--op-breadcrumb-hover-fg, var(--op-color-fg));
    background: var(--op-color-hover);
  }
  .op-breadcrumb__item:focus-visible,
  .op-breadcrumb__more:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: 0;
  }
  .op-breadcrumb__current {
    color: var(--op-breadcrumb-current-fg, var(--op-color-fg));
    font-weight: var(--op-font-weight-medium);
  }
}

@layer optikos {
  :root {
    --op-navmenu-rail-width: 3.5rem;
    --op-navmenu-indent: 1rem;
    --op-navmenu-group-tracking: 0.04em;
    --op-navmenu-badge-min-width: 1.25rem;
  }
  .op-navmenu {
    display: block;
    box-sizing: border-box;
    min-inline-size: 0;
    color: var(--op-navmenu-fg, var(--op-color-fg));
    background: var(--op-navmenu-bg, var(--op-color-surface));
    overflow: auto;
  }
  .op-navmenu__tree,
  .op-navmenu__group {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .op-navmenu__tree {
    padding: var(--op-space-2);
  }
  .op-navmenu__item {
    display: flex;
    align-items: center;
    gap: var(--op-space-3);
    box-sizing: border-box;
    min-block-size: var(--op-navmenu-item-height, var(--op-control-height));
    padding: 0 var(--op-space-3);
    padding-inline-start: calc(var(--op-space-3) + var(--_level, 0) * var(--op-navmenu-indent));
    border-radius: var(--op-radius);
    border-inline-start: var(--op-space-1) solid transparent;
    cursor: pointer;
    user-select: none;
  }
  .op-navmenu__item:hover:not(.is-disabled) {
    background: var(--op-navmenu-item-hover-bg, var(--op-color-hover));
  }
  .op-navmenu__item:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: calc(var(--op-focus-width) * -1);
  }
  .op-navmenu__item.is-active {
    color: var(--op-navmenu-active-fg, var(--op-color-primary));
    background: var(--op-navmenu-active-bg, var(--op-color-primary-soft));
    border-inline-start-color: var(--op-navmenu-active-bar, var(--op-color-primary));
    font-weight: var(--op-font-weight-bold);
  }
  .op-navmenu__item.is-disabled {
    color: var(--op-color-disabled-fg);
    cursor: not-allowed;
  }
  .op-navmenu__item.is-group {
    color: var(--op-navmenu-group-fg, var(--op-color-fg-muted));
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-font-weight-bold);
    letter-spacing: var(--op-navmenu-group-tracking);
    text-transform: uppercase;
  }
  .op-navmenu__icon {
    display: inline-flex;
    flex: none;
    inline-size: var(--op-icon-size);
  }
  .op-navmenu__text {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-navmenu__badge {
    flex: none;
    min-inline-size: var(--op-navmenu-badge-min-width);
    padding: 0 var(--op-space-2);
    color: var(--op-navmenu-badge-fg, var(--op-color-primary-fg));
    background: var(--op-navmenu-badge-bg, var(--op-color-primary));
    border-radius: var(--op-radius-pill);
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-font-weight-bold);
    text-align: center;
  }
  .op-navmenu__chevron {
    display: inline-flex;
    flex: none;
    transition: transform var(--op-duration) var(--op-easing);
  }
  .op-navmenu__item.is-group:not(.is-expanded) .op-navmenu__chevron {
    transform: rotate(-90deg);
  }
  /* rail: icons only; a group is just a thin rule between its neighbours */
  .op-navmenu.is-rail {
    inline-size: var(--op-navmenu-rail-width);
  }
  .op-navmenu.is-rail .op-navmenu__text,
  .op-navmenu.is-rail .op-navmenu__chevron {
    display: none;
  }
  .op-navmenu.is-rail .op-navmenu__item {
    justify-content: center;
    padding-inline: 0;
  }
  /* in the rail a group is an icon that opens a floating menu; it lights up when the active page is inside */
  .op-navmenu.is-rail .op-navmenu__item.is-group .op-navmenu__icon {
    font-weight: var(--op-font-weight-bold);
  }
  .op-navmenu.is-rail .op-navmenu__item.has-active,
  .op-navmenu.is-rail .op-navmenu__item[aria-expanded='true'] {
    color: var(--op-navmenu-active-fg, var(--op-color-primary));
    background: var(--op-navmenu-active-bg, var(--op-color-primary-soft));
  }
  .op-navmenu.is-rail .op-navmenu__badge {
    display: none;
  }
}

@layer optikos {
  :root {
    --op-stepper-marker-size: 1.75rem;
  }
  .op-stepper__list {
    display: flex;
    gap: var(--op-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .op-stepper__step {
    display: flex;
    flex: 1;
    min-inline-size: 0;
  }
  .op-stepper__step:last-child {
    flex: none;
  }
  /* the line to the next step: fills what is left after the text, level with the middle of the marker */
  .op-stepper__line {
    flex: 1;
    align-self: flex-start;
    min-inline-size: var(--op-space-3);
    margin-block-start: calc(var(--op-stepper-marker-size) / 2);
    margin-inline: var(--op-space-1) var(--op-space-2);
    block-size: var(--op-border-width);
    background: var(--op-stepper-line, var(--op-color-border-strong));
  }
  .op-stepper__step.is-done .op-stepper__line {
    background: var(--op-stepper-done-bg, var(--op-color-success));
  }
  .op-stepper__btn {
    display: flex;
    align-items: flex-start;
    gap: var(--op-space-2);
    min-inline-size: 0;
    padding: 0;
    font: inherit;
    color: var(--op-color-fg-muted);
    text-align: start;
    background: transparent;
    border: 0;
    border-radius: var(--op-radius);
    cursor: pointer;
  }
  .op-stepper__btn:disabled {
    cursor: default;
  }
  .op-stepper__btn:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: var(--op-focus-offset);
  }
  .op-stepper__marker {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--op-stepper-marker-size);
    block-size: var(--op-stepper-marker-size);
    background: var(--op-color-surface);
    border: var(--op-border-width) solid var(--op-stepper-line, var(--op-color-border-strong));
    border-radius: 50%;
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-font-weight-bold);
  }
  .op-stepper__text {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    padding-inline-end: var(--op-space-2);
    background: inherit;
  }
  .op-stepper__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-stepper__desc,
  .op-stepper__opt {
    font-size: var(--op-font-size-sm);
    color: var(--op-color-fg-muted);
  }
  .op-stepper__step.is-current .op-stepper__btn {
    color: var(--op-color-fg);
    font-weight: var(--op-font-weight-bold);
  }
  .op-stepper__step.is-current .op-stepper__marker {
    color: var(--op-color-primary-fg);
    background: var(--op-stepper-current-bg, var(--op-color-primary));
    border-color: var(--op-stepper-current-bg, var(--op-color-primary));
  }
  .op-stepper__step.is-done:not(.is-current) .op-stepper__marker {
    color: var(--op-color-success);
    border-color: var(--op-stepper-done-bg, var(--op-color-success));
  }
  .op-stepper__step.is-error .op-stepper__marker {
    color: var(--op-color-danger-fg);
    background: var(--op-stepper-error-bg, var(--op-color-danger));
    border-color: var(--op-stepper-error-bg, var(--op-color-danger));
  }
  .op-stepper__step.is-error .op-stepper__btn {
    color: var(--op-color-danger);
  }
  /* phones: only the current step shows its words; the others keep them for screen readers (the button's name) */
  @media (max-width: 40rem) {
    .op-stepper__step:not(.is-current) .op-stepper__text {
      position: absolute;
      inline-size: 0;
      block-size: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .op-stepper__step:not(.is-current) {
      flex: none;
    }
    .op-stepper__step:not(.is-current) .op-stepper__line {
      min-inline-size: var(--op-space-2);
    }
  }
}

@layer optikos {
  :root {
    --op-tabs-badge-min-width: 1.25em;
  }
  .op-tabs {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    color: var(--op-color-fg);
  }
  .op-tabs--left {
    flex-direction: row;
  }
  .op-tabs__bar {
    display: flex;
    flex: none;
    gap: var(--op-tabs-gap, var(--op-space-1));
    background: var(--op-tabs-bar-bg, var(--op-color-surface-2));
    border-block-end: var(--op-border-width) solid var(--op-color-border);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .op-tabs--left > .op-tabs__bar {
    flex-direction: column;
    border-block-end: 0;
    border-inline-end: var(--op-border-width) solid var(--op-color-border);
    overflow: visible;
  }
  .op-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-2);
    padding: var(--op-tabs-tab-padding-y, var(--op-space-2)) var(--op-tabs-tab-padding-x, var(--op-space-4));
    color: var(--op-tabs-tab-fg, var(--op-color-fg-muted));
    border-block-end: var(--op-space-1) solid transparent;
    margin-block-end: calc(var(--op-border-width) * -1);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
  }
  .op-tabs--left > .op-tabs__bar > .op-tabs__tab {
    border-block-end: 0;
    border-inline-end: var(--op-space-1) solid transparent;
    margin-block-end: 0;
    margin-inline-end: calc(var(--op-border-width) * -1);
  }
  .op-tabs__tab:hover {
    color: var(--op-color-fg);
  }
  .op-tabs__tab.is-active {
    color: var(--op-tabs-tab-active-fg, var(--op-color-primary));
    border-color: var(--op-tabs-tab-active-border, var(--op-color-primary));
    font-weight: var(--op-font-weight-bold);
  }
  .op-tabs__tab[aria-disabled='true'] {
    color: var(--op-color-disabled-fg);
    cursor: not-allowed;
  }
  .op-tabs__close,
  .op-tabs__reload {
    display: inline-flex;
    border-radius: var(--op-radius-sm);
  }
  .op-tabs__close:hover,
  .op-tabs__reload:hover {
    background: var(--op-color-hover);
  }
  /* the ↻ turns while the tab reloads */
  .op-tabs__tab.is-reloading .op-tabs__reload svg {
    animation: op-spin 700ms linear infinite;
  }
  .op-motion-off .op-tabs__tab.is-reloading .op-tabs__reload svg {
    animation: none;
  }
  .op-tabs__panels {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .op-tabs__panels > * {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }
  .op-tabs__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--op-tabs-badge-min-width);
    padding: 0 var(--op-space-1);
    color: var(--op-color-danger-fg);
    background: var(--op-color-danger);
    border-radius: var(--op-radius-pill);
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-font-weight-bold);
  }
  .op-tabs__tab.has-error {
    color: var(--op-color-danger);
  }
  .op-tabs__tab.is-dirty .op-tabs__title::after {
    content: '•';
    margin-inline-start: var(--op-space-1);
    color: var(--op-color-primary);
  }
}

@layer optikos {
  :root {
    --op-palette-width: 38rem;
    --op-palette-top: 12vh;
    --op-palette-max-height: 26rem;
  }
  .op-palette-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--op-palette-top) var(--op-space-3) var(--op-space-3);
    background: var(--op-backdrop-bg, var(--op-color-overlay));
  }
  .op-palette {
    display: flex;
    flex-direction: column;
    inline-size: min(var(--op-palette-width), 100%);
    max-block-size: 100%;
    color: var(--op-color-fg);
    background: var(--op-palette-bg, var(--op-color-surface));
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-palette-radius, var(--op-radius-lg));
    box-shadow: var(--op-shadow-lg);
    overflow: hidden;
  }
  .op-palette__search {
    display: flex;
    align-items: center;
    gap: var(--op-space-2);
    padding: var(--op-space-3) var(--op-space-4);
    color: var(--op-color-fg-muted);
    border-block-end: var(--op-border-width) solid var(--op-color-border);
  }
  .op-palette__crumb {
    flex: none;
    padding: 0 var(--op-space-2);
    color: var(--op-color-primary);
    background: var(--op-color-primary-soft);
    border-radius: var(--op-radius-sm);
    font-size: var(--op-font-size-sm);
    white-space: nowrap;
  }
  .op-palette__crumb[hidden],
  .op-palette__filters[hidden] {
    display: none;
  }
  .op-palette__input {
    flex: 1;
    min-inline-size: 0;
    padding: 0;
    font: inherit;
    font-size: var(--op-font-size-lg);
    color: var(--op-color-fg);
    background: transparent;
    border: 0;
    outline: none;
  }
  .op-palette__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-1);
    padding: var(--op-space-2) var(--op-space-4) 0;
  }
  .op-palette__chip {
    padding: 0 var(--op-space-3);
    font: inherit;
    font-size: var(--op-font-size-sm);
    color: var(--op-color-fg-muted);
    background: transparent;
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-radius-pill);
    cursor: pointer;
  }
  .op-palette__chip.is-on {
    color: var(--op-color-primary-fg);
    background: var(--op-color-primary);
    border-color: var(--op-color-primary);
  }
  .op-palette__chip:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
  }
  .op-palette__list {
    flex: 1;
    min-block-size: 0;
    max-block-size: var(--op-palette-max-height);
    padding: var(--op-space-2);
    overflow: auto;
  }
  .op-palette__group {
    padding: var(--op-space-2) var(--op-space-3) var(--op-space-1);
    color: var(--op-palette-group-fg, var(--op-color-fg-muted));
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-font-weight-bold);
  }
  .op-palette__item {
    display: flex;
    align-items: center;
    gap: var(--op-space-3);
    padding: var(--op-space-2) var(--op-space-3);
    border-radius: var(--op-radius);
    cursor: pointer;
  }
  .op-palette__item.is-active {
    background: var(--op-palette-item-active-bg, var(--op-color-hover));
  }
  .op-palette__item.is-disabled {
    color: var(--op-color-disabled-fg);
    cursor: not-allowed;
  }
  .op-palette__icon {
    display: inline-flex;
    flex: none;
    inline-size: var(--op-icon-size);
    color: var(--op-color-fg-muted);
  }
  .op-palette__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
  }
  .op-palette__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .op-palette__desc {
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
  .op-palette__mark {
    color: inherit;
    background: var(--op-color-primary-soft);
    font-weight: var(--op-font-weight-bold);
  }
  .op-palette__cat,
  .op-palette__kbd {
    flex: none;
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
  .op-palette__kbd {
    padding: 0 var(--op-space-2);
    font-family: var(--op-font-mono);
    background: var(--op-color-surface-2);
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-radius-sm);
  }
  .op-palette__more {
    display: inline-flex;
    color: var(--op-color-fg-muted);
  }
  .op-palette__empty {
    padding: var(--op-space-5);
    color: var(--op-color-fg-muted);
    text-align: center;
  }
  .op-palette__hint {
    padding: var(--op-space-2) var(--op-space-4);
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
    background: var(--op-color-surface-2);
    border-block-start: var(--op-border-width) solid var(--op-color-border);
  }
}

@layer optikos {
  .op-dropdown {
    position: fixed;
    box-sizing: border-box;
    max-inline-size: calc(100vw - var(--op-space-4));
    color: var(--op-dropdown-fg, var(--op-color-fg));
    background: var(--op-dropdown-bg, var(--op-color-surface));
    border: var(--op-border-width) solid var(--op-dropdown-border, var(--op-color-border));
    border-radius: var(--op-dropdown-radius, var(--op-radius));
    box-shadow: var(--op-dropdown-shadow, var(--op-shadow));
    overflow: hidden;
  }
}

@layer optikos {
  :root {
    --op-menu-min-width: 10rem;
    --op-menu-max-height: 22rem;
    --op-menu-group-tracking: 0.04em;
  }
  .op-menu {
    box-sizing: border-box;
    min-inline-size: var(--op-menu-min-width);
    padding: var(--op-menu-padding, var(--op-space-1));
    color: var(--op-color-fg);
    background: var(--op-menu-bg, var(--op-color-surface));
  }
  .op-menu__item {
    display: flex;
    align-items: center;
    gap: var(--op-space-2);
    min-block-size: var(--op-menu-item-height, var(--op-control-height));
    padding: 0 var(--op-menu-item-padding-x, var(--op-space-3)) 0 var(--op-space-2);
    border-radius: var(--op-radius-sm);
    cursor: pointer;
    outline: none;
  }
  .op-menu__item:hover,
  .op-menu__item:focus {
    background: var(--op-menu-item-hover-bg, var(--op-color-hover));
  }
  .op-menu__item[aria-disabled='true'] {
    color: var(--op-color-disabled-fg);
    cursor: not-allowed;
  }
  .op-menu__icon {
    display: inline-flex;
    inline-size: var(--op-icon-size);
  }
  .op-menu__text {
    flex: 1;
    white-space: nowrap;
  }
  .op-menu__arrow {
    display: inline-flex;
    color: var(--op-color-fg-muted);
  }
  .op-menu__sep {
    margin-block: var(--op-space-1);
    block-size: var(--op-border-width);
    background: var(--op-menu-sep, var(--op-color-border));
  }
  /* with search: the field on top, the items scroll under it */
  .op-menu__search {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: var(--op-control-height);
    margin-block-end: var(--op-space-1);
    padding: 0 var(--op-space-2);
    color: var(--op-color-fg);
    background: var(--op-color-surface);
    border: var(--op-border-width) solid var(--op-color-border-strong);
    border-radius: var(--op-radius-sm);
    font: inherit;
  }
  .op-menu__search:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
    outline-offset: calc(var(--op-focus-width) * -1);
  }
  .op-menu__list {
    max-block-size: var(--op-menu-max-height);
    overflow: auto;
  }
  .op-menu__empty {
    padding: var(--op-space-2) var(--op-space-3);
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
  }
  .op-menu.is-searching .op-menu__sep,
  .op-menu__group:not(:has(.op-menu__item:not([hidden]))) {
    display: none;
  }
  /* groups: a quiet header over the items that share it */
  .op-menu__group + .op-menu__group,
  .op-menu__item + .op-menu__group {
    margin-block-start: var(--op-space-1);
  }
  .op-menu__group-label {
    padding: var(--op-space-2) var(--op-space-3) var(--op-space-1) var(--op-space-2);
    color: var(--op-menu-group-fg, var(--op-color-fg-muted));
    font-size: var(--op-font-size-sm);
    font-weight: var(--op-font-weight-bold);
    letter-spacing: var(--op-menu-group-tracking);
    text-transform: uppercase;
  }
  .op-menu__badge {
    min-inline-size: var(--op-space-4);
    padding: 0 var(--op-space-1);
    color: var(--op-menu-badge-fg, var(--op-color-primary-fg));
    background: var(--op-menu-badge-bg, var(--op-color-primary));
    border-radius: var(--op-radius-pill);
    font-size: var(--op-font-size-sm);
    text-align: center;
  }
}

@layer optikos {
  .op-messagebox__icon {
    font-size: var(--op-font-size-xl);
    color: var(--op-color-primary);
  }
}

@layer optikos {
  .op-shortcuts {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-1);
    padding: var(--op-space-3) var(--op-space-4);
    font-family: var(--op-font-family);
  }
  .op-shortcuts__group {
    margin: var(--op-space-3) 0 var(--op-space-1);
    color: var(--op-color-fg-muted);
    font-size: var(--op-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
  }
  .op-shortcuts__group:first-child {
    margin-block-start: 0;
  }
  .op-shortcuts__row {
    display: flex;
    justify-content: space-between;
    gap: var(--op-space-4);
    padding-block: var(--op-space-1);
  }
  .op-shortcuts__kbd {
    padding: 0 var(--op-space-2);
    background: var(--op-color-surface-2);
    border: var(--op-border-width) solid var(--op-color-border);
    border-radius: var(--op-radius);
    font-family: inherit;
    font-size: var(--op-font-size-sm);
    white-space: nowrap;
  }
}

@layer optikos {
  :root {
    --op-toast-width: 22rem;
    --op-z-toast: 2;
  }
  .op-toast-region {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: var(--op-toast-gap, var(--op-space-2));
    padding: var(--op-space-4);
    max-inline-size: 100%;
    z-index: var(--op-z-toast);
    pointer-events: none;
  }
  .op-toast-region > * {
    pointer-events: auto;
  }
  .op-toast-region[data-pos^='top'] {
    inset-block-start: 0;
  }
  .op-toast-region[data-pos^='bottom'] {
    inset-block-end: 0;
  }
  .op-toast-region[data-pos$='right'] {
    inset-inline-end: 0;
  }
  .op-toast-region[data-pos$='left'] {
    inset-inline-start: 0;
  }
  .op-toast-region[data-pos='top'],
  .op-toast-region[data-pos='bottom'] {
    inset-inline: 0;
    align-items: center;
  }
  .op-toast {
    --_accent: var(--op-toast-accent-info, var(--op-color-info));
    display: flex;
    align-items: flex-start;
    gap: var(--op-space-2);
    box-sizing: border-box;
    inline-size: var(--op-toast-width);
    max-inline-size: 100%;
    padding: var(--op-space-3);
    color: var(--op-toast-fg, var(--op-color-fg));
    background: var(--op-toast-bg, var(--op-color-surface));
    border: var(--op-border-width) solid var(--op-color-border);
    border-inline-start: var(--op-space-1) solid var(--_accent);
    border-radius: var(--op-toast-radius, var(--op-radius));
    box-shadow: var(--op-toast-shadow, var(--op-shadow));
    animation: op-toast-in var(--op-duration) var(--op-easing);
  }
  .op-toast--success {
    --_accent: var(--op-toast-accent-success, var(--op-color-success));
  }
  .op-toast--warning {
    --_accent: var(--op-toast-accent-warning, var(--op-color-warning));
  }
  .op-toast--error {
    --_accent: var(--op-toast-accent-error, var(--op-color-danger));
  }
  .op-toast__icon {
    color: var(--_accent);
    display: inline-flex;
  }
  .op-toast__body {
    flex: 1;
    min-inline-size: 0;
  }
  .op-toast__title {
    font-weight: var(--op-font-weight-bold);
  }
  .op-toast__close {
    display: inline-flex;
    padding: var(--op-space-1);
    color: var(--op-color-fg-muted);
    background: transparent;
    border: 0;
    border-radius: var(--op-radius-sm);
    cursor: pointer;
  }
  .op-toast__close:hover {
    background: var(--op-color-hover);
  }
  @keyframes op-toast-in {
    from {
      opacity: 0;
      transform: translateY(calc(var(--op-space-2) * -1));
    }
  }
}

@layer optikos {
  :root {
    --op-tooltip-max-width: 20rem;
  }
  .op-tooltip {
    position: fixed;
    box-sizing: border-box;
    max-inline-size: var(--op-tooltip-max-width);
    padding: var(--op-tooltip-padding, var(--op-space-1) var(--op-space-2));
    color: var(--op-tooltip-fg, var(--op-color-inverse-fg));
    background: var(--op-tooltip-bg, var(--op-color-inverse-bg));
    border-radius: var(--op-tooltip-radius, var(--op-radius-sm));
    font-size: var(--op-tooltip-font-size, var(--op-font-size-sm));
    pointer-events: none;
    overflow-wrap: anywhere;
  }
}

@layer optikos {
  :root {
    --op-widget-width: 24rem;
    --op-widget-height: 26rem;
    --op-widget-wide: 36rem;
    --op-widget-offset: var(--op-space-4);
    --op-widget-grip: 0.5rem;
    --op-widget-corner: 1rem;
  }
  .op-widget {
    min-block-size: 0;
    background: var(--op-widget-bg, var(--op-color-surface));
    border-radius: var(--op-widget-radius, var(--op-radius-lg));
  }
  .op-widget.is-floating {
    --_from: translateX(0);
    position: fixed;
    box-shadow: var(--op-widget-shadow, var(--op-shadow-lg));
    opacity: 0;
    transform: var(--_from);
    transition: transform var(--op-duration) var(--op-easing), opacity var(--op-duration) var(--op-easing);
  }
  .op-widget.is-floating.is-open {
    opacity: 1;
    transform: none;
  }
  .op-widget.is-floating[hidden] {
    display: none;
  }
  /* sides: a column on the left/right, a bar (anchored to the end corner) on top/bottom */
  .op-widget--right.is-floating,
  .op-widget--left.is-floating {
    inset-block: var(--op-widget-offset);
    inline-size: var(--op-widget-size, var(--op-widget-width));
    max-inline-size: calc(100% - 2 * var(--op-widget-offset));
  }
  .op-widget--right.is-floating {
    inset-inline-end: var(--op-widget-offset);
    --_from: translateX(calc(100% + var(--op-widget-offset)));
  }
  .op-widget--left.is-floating {
    inset-inline-start: var(--op-widget-offset);
    --_from: translateX(calc(-100% - var(--op-widget-offset)));
  }
  .op-widget--top.is-floating,
  .op-widget--bottom.is-floating {
    inset-inline-end: var(--op-widget-offset);
    inline-size: min(var(--op-widget-wide), calc(100% - 2 * var(--op-widget-offset)));
    block-size: var(--op-widget-size, var(--op-widget-height));
    max-block-size: calc(100% - 2 * var(--op-widget-offset));
  }
  .op-widget--top.is-floating {
    inset-block-start: var(--op-widget-offset);
    --_from: translateY(calc(-100% - var(--op-widget-offset)));
  }
  .op-widget--bottom.is-floating {
    inset-block-end: var(--op-widget-offset);
    --_from: translateY(calc(100% + var(--op-widget-offset)));
  }
  .op-widget [aria-pressed='true'] {
    color: var(--op-color-primary);
    background: var(--op-color-primary-soft);
  }
  /* dragged: no longer tied to a side; the slide-in becomes a small rise */
  .op-widget.is-moved.is-floating {
    --_from: translateY(var(--op-space-3));
  }
  .op-widget__handle {
    cursor: grab;
    user-select: none;
    touch-action: none;
  }
  .op-widget.is-dragging .op-widget__handle {
    cursor: grabbing;
  }
  .op-widget.is-dragging {
    transition: none;
  }
  /* resize: an invisible strip on the inner edge (a line shows on hover/focus); a corner grip once the widget was moved */
  .op-widget__resize {
    position: absolute;
    z-index: 1;
    touch-action: none;
  }
  .op-widget--right .op-widget__resize,
  .op-widget--left .op-widget__resize {
    inset-block: 0;
    inline-size: var(--op-widget-grip);
    cursor: ew-resize;
  }
  .op-widget--right .op-widget__resize {
    inset-inline-start: calc(var(--op-widget-grip) / -2);
  }
  .op-widget--left .op-widget__resize {
    inset-inline-end: calc(var(--op-widget-grip) / -2);
  }
  .op-widget--top .op-widget__resize,
  .op-widget--bottom .op-widget__resize {
    inset-inline: 0;
    block-size: var(--op-widget-grip);
    cursor: ns-resize;
  }
  .op-widget--top .op-widget__resize {
    inset-block-end: calc(var(--op-widget-grip) / -2);
  }
  .op-widget--bottom .op-widget__resize {
    inset-block-start: calc(var(--op-widget-grip) / -2);
  }
  .op-widget__resize:hover,
  .op-widget__resize:focus-visible,
  .op-widget.is-resizing .op-widget__resize {
    background: linear-gradient(var(--op-color-primary), var(--op-color-primary)) center / var(--op-focus-width) 100% no-repeat;
    outline: none;
  }
  .op-widget--top .op-widget__resize:is(:hover, :focus-visible),
  .op-widget--bottom .op-widget__resize:is(:hover, :focus-visible),
  .op-widget--top.is-resizing .op-widget__resize,
  .op-widget--bottom.is-resizing .op-widget__resize {
    background-size: 100% var(--op-focus-width);
  }
  .op-widget.is-moved .op-widget__resize {
    inset: auto 0 0 auto;
    inline-size: var(--op-widget-corner);
    block-size: var(--op-widget-corner);
    background: linear-gradient(135deg, transparent 55%, var(--op-color-border-strong) 55% 62%, transparent 62% 75%, var(--op-color-border-strong) 75% 82%, transparent 82%);
    cursor: nwse-resize;
  }
  .op-widget.is-moved .op-widget__resize:focus-visible {
    outline: var(--op-focus-width) solid var(--op-color-focus);
  }
  .op-widget.is-resizing {
    transition: none;
    user-select: none;
  }
}

@layer optikos {
  :root {
    --op-window-width: 28rem;
    --op-window-max-height: 85dvh;
  }
  .op-window-backdrop {
    position: fixed;
    inset: 0;
    background: var(--op-backdrop-bg, var(--op-color-overlay));
  }
  /* mask: false — still modal (the page is inert and takes no clicks), just not dimmed */
  .op-window-backdrop.is-clear {
    background: transparent;
  }
  .op-window {
    position: fixed;
    inline-size: var(--op-window-width);
    max-inline-size: calc(100vw - var(--op-space-4));
    max-block-size: var(--op-window-max-height);
    background: var(--op-window-bg, var(--op-color-surface));
    border-radius: var(--op-window-radius, var(--op-radius-lg));
    box-shadow: var(--op-window-shadow, var(--op-shadow-lg));
  }
  .op-window:focus {
    outline: none;
  }
  .op-window__handle {
    cursor: grab;
    user-select: none;
    touch-action: none;
  }
  .op-window.is-dragging .op-window__handle {
    cursor: grabbing;
  }
}

@layer optikos {
  :root {
    --op-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --op-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --op-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --op-motion-press-scale: 0.97;
    --op-motion-press-duration: 100ms;
    --op-motion-popover-scale: 0.95;
    --op-motion-dropdown-duration: 200ms;
    --op-motion-exit-ratio: 0.8;
    --op-motion-stagger-step: 30ms;
    --op-motion-blur: 4px;
  }
  /* Rule 4: interactive things shrink a little under the finger. Rule 14: while held, only transform may animate. */
  .op-button:active:not(:disabled),
  .op-dataview__item:active,
  [data-op-press]:active {
    transform: scale(var(--op-motion-press-scale));
    transition-property: transform;
    transition-duration: var(--op-motion-press-duration);
    transition-timing-function: var(--op-motion-ease-out);
  }
  [data-op-press] {
    transition: transform var(--op-motion-press-duration) var(--op-motion-ease-out);
  }
  .op-dataview__item {
    transition: transform var(--op-motion-press-duration) var(--op-motion-ease-out), box-shadow var(--op-duration) var(--op-easing);
  }
}