/*
  Neumo component theme
  Copy this file with components.odin. Override any --ui-* token after import.
*/

:root {
  color-scheme: dark;
  --ui-canvas: #02080d;
  --ui-surface: #07141c;
  --ui-surface-raised: #0a1b24;
  --ui-text: #fff3e3;
  --ui-text-muted: #c8b9a8;
  --ui-text-soft: #91877e;
  --ui-accent: #e98339;
  --ui-accent-strong: #f5c190;
  --ui-danger: #ef7066;
  --ui-success: #51c59b;
  --ui-warning: #efb45d;
  --ui-info: #69a9d2;
  --ui-rose: #df7fa0;
  --ui-border: rgba(252, 219, 172, 0.1);
  --ui-shadow-dark: rgba(0, 7, 12, 0.86);
  --ui-shadow-light: rgba(14, 39, 51, 0.68);
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;
  --ui-space-xs: 0.375rem;
  --ui-space-sm: 0.625rem;
  --ui-space-md: 1rem;
  --ui-space-lg: 1.5rem;
  --ui-space-xl: 2rem;
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-focus: 0 0 0 3px rgba(245, 193, 144, 0.28);
  --ui-shadow-raised: 8px 8px 18px var(--ui-shadow-dark), -7px -7px 16px var(--ui-shadow-light);
  --ui-shadow-inset: inset 4px 4px 9px var(--ui-shadow-dark), inset -4px -4px 9px var(--ui-shadow-light);
}

.ui-surface,
.ui-button,
.ui-icon-tile,
.ui-badge,
.ui-alert,
.ui-field {
  box-sizing: border-box;
  font-family: var(--ui-font);
}

.ui-surface {
  min-width: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  color: var(--ui-text);
  background: var(--ui-surface);
}

.ui-surface--raised {
  box-shadow: var(--ui-shadow-raised);
}

.ui-surface--inset {
  background: var(--ui-canvas);
  box-shadow: var(--ui-shadow-inset);
}

.ui-surface--flat {
  background: var(--ui-surface-raised);
  box-shadow: none;
}

.ui-surface--pad-none { padding: 0; }
.ui-surface--pad-small { padding: var(--ui-space-md); }
.ui-surface--pad-medium { padding: var(--ui-space-lg); }
.ui-surface--pad-large { padding: var(--ui-space-xl); }

.ui-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ui-cluster {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
}

.ui-stack--extra-small,
.ui-cluster--extra-small { gap: var(--ui-space-xs); }
.ui-stack--small,
.ui-cluster--small { gap: var(--ui-space-sm); }
.ui-stack--medium,
.ui-cluster--medium { gap: var(--ui-space-md); }
.ui-stack--large,
.ui-cluster--large { gap: var(--ui-space-lg); }
.ui-stack--extra-large,
.ui-cluster--extra-large { gap: var(--ui-space-xl); }

.ui-button {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-raised);
  font: 700 0.9rem/1 var(--ui-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.ui-button--small {
  min-height: 2.25rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--ui-radius-sm);
  font-size: 0.8rem;
}

.ui-button--medium {
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
}

.ui-button--large {
  min-height: 3.25rem;
  padding: 0.9rem 1.35rem;
  font-size: 1rem;
}

.ui-button--icon {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
}

.ui-button--primary {
  border-color: rgba(252, 219, 172, 0.3);
  color: var(--ui-canvas);
  background: linear-gradient(145deg, var(--ui-accent-strong), var(--ui-accent));
  box-shadow: 7px 7px 16px var(--ui-shadow-dark), -5px -5px 14px rgba(245, 193, 144, 0.12);
}

.ui-button--secondary {
  color: var(--ui-accent-strong);
}

.ui-button--ghost {
  border-color: transparent;
  color: var(--ui-text-muted);
  background: transparent;
  box-shadow: none;
}

.ui-button--danger {
  border-color: rgba(239, 112, 102, 0.26);
  color: #fff4f2;
  background: color-mix(in srgb, var(--ui-danger) 22%, var(--ui-surface));
}

.ui-button:hover:not(:disabled) {
  color: var(--ui-accent-strong);
  transform: translateY(-1px);
}

.ui-button--primary:hover:not(:disabled) {
  color: var(--ui-canvas);
  background: linear-gradient(145deg, #ffe5c1, var(--ui-accent));
}

.ui-button:active:not(:disabled) {
  box-shadow: var(--ui-shadow-inset);
  transform: translateY(0);
}

.ui-button:focus-visible,
.ui-field__control:focus-visible {
  outline: none;
  box-shadow: var(--ui-shadow-inset), var(--ui-focus);
}

.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
}

.ui-icon-tile {
  --ui-icon-tile-color: var(--ui-text-muted);
  display: inline-grid;
  width: clamp(7rem, 22vw, 9rem);
  aspect-ratio: 1;
  padding: 1.2rem 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: clamp(1.4rem, 4vw, 2rem);
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  color: var(--ui-icon-tile-color);
  background: linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface));
  box-shadow: 11px 11px 24px var(--ui-shadow-dark), -9px -9px 21px var(--ui-shadow-light);
  font: 750 1rem/1.1 var(--ui-font);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.ui-icon-tile--compact {
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0.65rem;
  gap: 0;
  font-size: 0.62rem;
  box-shadow: 4px 4px 9px var(--ui-shadow-dark), -3px -3px 7px var(--ui-shadow-light);
}

.ui-icon-tile--compact .ui-icon-tile__icon {
  width: 0.95rem;
  height: 0.95rem;
}

.ui-icon-tile--compact .ui-icon-tile__icon[data-ui-icon="custom"] {
  min-width: 0;
  font-size: 0.62rem;
  font-weight: 800;
}

.ui-icon-tile--compact.ui-icon-tile--danger {
  color: var(--ui-text);
}

.ui-icon-tile--compact.ui-icon-tile--danger .ui-icon-tile__icon {
  color: var(--ui-text);
}

.ui-icon-tile--compact.ui-icon-tile--danger:hover:not(:disabled) .ui-icon-tile__icon,
.ui-icon-tile--compact.ui-icon-tile--danger:focus-visible .ui-icon-tile__icon {
  color: var(--ui-danger);
}

.ui-icon-tile--neutral { --ui-icon-tile-color: var(--ui-text-muted); }
.ui-icon-tile--accent { --ui-icon-tile-color: var(--ui-accent-strong); }
.ui-icon-tile--info { --ui-icon-tile-color: var(--ui-info); }
.ui-icon-tile--success { --ui-icon-tile-color: var(--ui-success); }
.ui-icon-tile--warning { --ui-icon-tile-color: var(--ui-warning); }
.ui-icon-tile--danger { --ui-icon-tile-color: var(--ui-danger); }
.ui-icon-tile--rose { --ui-icon-tile-color: var(--ui-rose); }

.ui-icon-tile__icon {
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
  color: inherit;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--ui-icon-mask);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  transition: color 160ms ease;
}

.ui-icon-tile__icon[data-ui-icon="none"] {
  display: none;
}

.ui-icon-tile__icon[data-ui-icon="custom"] {
  display: grid;
  width: auto;
  min-width: 2.15rem;
  background: none;
  place-items: center;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

.ui-icon-tile__icon[data-ui-icon="moon"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

.ui-icon-tile__icon[data-ui-icon="bell"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}

.ui-icon-tile__icon[data-ui-icon="chart"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 20v-6M12 20V10M19 20V4'/%3E%3C/svg%3E");
}

.ui-icon-tile__icon[data-ui-icon="wifi"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01'/%3E%3C/svg%3E");
}

.ui-icon-tile__icon[data-ui-icon="alert"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}

.ui-icon-tile__icon[data-ui-icon="power"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18.36 6.64a9 9 0 1 1-12.73 0M12 2v10'/%3E%3C/svg%3E");
}

.ui-icon-tile__icon[data-ui-icon="cast"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6M2 20h.01'/%3E%3C/svg%3E");
}

.ui-icon-tile__icon[data-ui-icon="send"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
}

.ui-icon-tile__icon[data-ui-icon="phone"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.ui-icon-tile__icon[data-ui-icon="eye"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.75'/%3E%3C/svg%3E");
}

.ui-icon-tile[aria-pressed="true"] .ui-icon-tile__icon[data-ui-icon="eye"] {
  --ui-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 10.6a2 2 0 0 0 2.8 2.8M9.9 4.25A10.8 10.8 0 0 1 12 4c6 0 9.75 8 9.75 8a18 18 0 0 1-2.1 3.1M6.6 6.6C3.8 8.5 2.25 12 2.25 12S6 20 12 20a10.8 10.8 0 0 0 3.1-.45'/%3E%3C/svg%3E");
}

.ui-icon-tile__label {
  display: block;
  overflow-wrap: anywhere;
}

.ui-icon-tile:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ui-icon-tile-color) 28%, var(--ui-border));
  color: color-mix(in srgb, var(--ui-icon-tile-color) 82%, white);
  transform: translateY(-2px);
}

.ui-icon-tile--compact.ui-icon-tile--danger:hover:not(:disabled),
.ui-icon-tile--compact.ui-icon-tile--danger:focus-visible {
  color: var(--ui-danger);
}

.ui-icon-tile:active:not(:disabled),
.ui-icon-tile[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--ui-icon-tile-color) 32%, var(--ui-border));
  background: var(--ui-canvas);
  box-shadow: var(--ui-shadow-inset), 0 0 20px color-mix(in srgb, var(--ui-icon-tile-color) 10%, transparent);
  transform: translateY(0);
}

.ui-icon-tile:focus-visible {
  outline: none;
  box-shadow: var(--ui-shadow-raised), var(--ui-focus);
}

.ui-icon-tile[aria-pressed="true"]:focus-visible {
  box-shadow: var(--ui-shadow-inset), var(--ui-focus);
}

.ui-icon-tile:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ui-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 1.75rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  align-items: center;
  gap: 0.35rem;
  color: var(--ui-text-muted);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-inset);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
}

.ui-badge--accent { color: var(--ui-accent-strong); }
.ui-badge--success { color: var(--ui-success); }
.ui-badge--warning { color: var(--ui-warning); }
.ui-badge--danger { color: var(--ui-danger); }

.ui-alert {
  --ui-alert-tone: var(--ui-text-muted);
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--ui-alert-tone) 26%, transparent);
  border-left: 0.25rem solid var(--ui-alert-tone);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-alert-tone) 8%, var(--ui-surface));
  box-shadow: var(--ui-shadow-inset);
  line-height: 1.5;
}

.ui-alert--accent { --ui-alert-tone: var(--ui-accent); }
.ui-alert--success { --ui-alert-tone: var(--ui-success); }
.ui-alert--warning { --ui-alert-tone: var(--ui-warning); }
.ui-alert--danger { --ui-alert-tone: var(--ui-danger); }

.ui-field {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-sm);
  color: var(--ui-text);
}

.ui-field__label {
  width: fit-content;
  color: var(--ui-text-muted);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.015em;
}

.ui-field__control {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.9rem;
  padding: 0.78rem 0.95rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  outline: none;
  color: var(--ui-text);
  background: var(--ui-canvas);
  box-shadow: var(--ui-shadow-inset);
  font: 400 0.95rem/1.4 var(--ui-font);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ui-field__control::placeholder {
  color: var(--ui-text-soft);
  opacity: 1;
}

.ui-field__control:hover:not(:disabled) {
  border-color: rgba(252, 219, 172, 0.2);
}

.ui-field__control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-field__control--textarea {
  min-height: 7rem;
  resize: vertical;
}

.ui-field__help,
.ui-field__error {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
}

.ui-field__help { color: var(--ui-text-soft); }
.ui-field__error { color: var(--ui-danger); }

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  .ui-icon-tile,
  .ui-field__control {
    transition: none;
  }
}

@media (forced-colors: active) {
  .ui-surface,
  .ui-button,
  .ui-icon-tile,
  .ui-badge,
  .ui-alert,
  .ui-field__control {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}

/* Application language navigation. Uses native links to update the document locale. */
.language-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  grid-column: 1 / -1;
  margin-bottom: .75rem;
}
.language-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .4rem .85rem;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
}
.language-link[aria-current="true"] { box-shadow: inset 2px 2px 4px #0005, inset -2px -2px 4px #fff1; }
.language-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }