/* Shared Klar palette. Choice is independent of language and widget design. */
:root {
  --ui-preference-height: 56px;
  --ui-page: #f7f8f7;
  --ui-surface: #ffffff;
  --ui-soft: #f1f3f2;
  --ui-selected: #eeeaf9;
  --ui-text: #242b2f;
  --ui-muted: #58636b;
  --ui-border: #d6dcdf;
  --ui-input-border: #7d8992;
  --ui-accent-bg: var(--ui-selected);
  --ui-accent: #5c46b8;
  --ui-on-accent: #ffffff;
  --ui-focus: #6546bc;
  --ui-success: #2b6245;
  --ui-success-bg: #e8f3ed;
  --ui-danger: #a52d38;
  --ui-danger-bg: #fbecee;
  --ui-warning: #805400;
  --ui-warning-bg: #fff3d9;
  --ui-info: #285d86;
  --ui-info-bg: #eaf2fa;
  --ui-overlay: #17202780;
  --ui-shadow: 0 10px 34px #14242d14;
  --ui-solid: #242b2f;
  --ui-on-solid: #ffffff;
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --line: var(--ui-border);
  --soft: var(--ui-soft);
  --purple: var(--ui-accent);
  --violet: var(--ui-accent);
  --green: var(--ui-success);
  color-scheme: light;
}
:root[data-appearance="dark"] {
  --ui-page: #161a1e;
  --ui-surface: #1e2429;
  --ui-soft: #272f35;
  --ui-selected: #39334d;
  --ui-text: #e8edef;
  --ui-muted: #b5c0c7;
  --ui-border: #424e57;
  --ui-input-border: #81919d;
  --ui-accent: #c0acff;
  --ui-on-accent: #201b2b;
  --ui-focus: #c0acff;
  --ui-success: #9dd8b5;
  --ui-success-bg: #253a2f;
  --ui-danger: #ffb1b8;
  --ui-danger-bg: #462b32;
  --ui-warning: #f5cd86;
  --ui-warning-bg: #3e3524;
  --ui-info: #aad4fa;
  --ui-info-bg: #25394b;
  --ui-overlay: #050a10b8;
  --ui-shadow: 0 10px 34px #00000040;
  --ui-solid: #e8edef;
  --ui-on-solid: #1e2429;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]):not([data-appearance="dark"]) {
    --ui-page: #161a1e;
    --ui-surface: #1e2429;
    --ui-soft: #272f35;
    --ui-selected: #39334d;
    --ui-text: #e8edef;
    --ui-muted: #b5c0c7;
    --ui-border: #424e57;
    --ui-input-border: #81919d;
    --ui-accent: #c0acff;
    --ui-on-accent: #201b2b;
    --ui-focus: #c0acff;
    --ui-success: #9dd8b5;
    --ui-success-bg: #253a2f;
    --ui-danger: #ffb1b8;
    --ui-danger-bg: #462b32;
    --ui-warning: #f5cd86;
    --ui-warning-bg: #3e3524;
    --ui-info: #aad4fa;
    --ui-info-bg: #25394b;
    --ui-overlay: #050a10b8;
    --ui-shadow: 0 10px 34px #00000040;
    --ui-solid: #e8edef;
    --ui-on-solid: #1e2429;
    color-scheme: dark;
  }
}
:root
  :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
  scroll-margin-block: clamp(8px, 10vh, 100px);
}
:root :is(input, select, textarea) {
  color: var(--ui-text);
}
:root :is(input, textarea)::placeholder {
  color: var(--ui-muted);
  opacity: 1;
}
.interface-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.interface-skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-180%);
  padding: 12px 18px;
  border: 2px solid var(--ui-focus);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 16px;
  font-weight: 600;
}
.interface-skip-link:focus {
  transform: translateY(0);
}
.interface-main-target {
  min-width: 0;
}
.portal-appearance-control {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  font:
    13px/1.4 system-ui,
    sans-serif;
  color: var(--ui-text);
}
.portal-appearance-control select {
  font: inherit;
  min-height: 36px;
  max-width: 180px;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--ui-input-border);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
@media (pointer: coarse) {
  :root :is(button, select, summary) {
    min-height: 44px;
  }
  .portal-appearance-control select {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (forced-colors: active) {
  :root :is(button, input, select, textarea) {
    border: 1px solid ButtonText !important;
  }
  :root
    :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight !important;
  }
  .interface-icon {
    forced-color-adjust: auto;
  }
}