/* Scrollbar colors follow the theme */
:root {
  --scroll-handle: rgba(22, 33, 58, 0.25);
  --scroll-handle-hover: rgba(22, 33, 58, 0.42);
  --scroll-handle-active: rgba(22, 33, 58, 0.58);
  --grid-line: rgba(22, 33, 58, 0.055);
}
.dark {
  --scroll-handle: rgba(255, 255, 255, 0.22);
  --scroll-handle-hover: rgba(255, 255, 255, 0.4);
  --scroll-handle-active: rgba(255, 255, 255, 0.55);
  --grid-line: rgba(255, 255, 255, 0.045);
}
.os-theme-app {
  --os-size: 9px;
  --os-padding-perpendicular: 2px;
  --os-padding-axis: 2px;
  --os-handle-border-radius: 999px;
  --os-handle-bg: var(--scroll-handle);
  --os-handle-bg-hover: var(--scroll-handle-hover);
  --os-handle-bg-active: var(--scroll-handle-active);
}

/* Ledger / graph-paper texture */
.grid-paper {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Numbers: tabular figures in the code face */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.toast-in { animation: toast-in 0.2s ease-out; }
.toast-out { opacity: 0; transform: translateX(16px); transition: opacity 0.2s, transform 0.2s; }

@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-panel { animation: drawer-in 0.18s ease-out; }

/* Hide number spinners */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Form controls share one look */
.field {
  width: 100%; height: 2rem; padding: 0 0.625rem; border-radius: 0.375rem;
  border: 1px solid rgb(214 211 209); background: #fff; font-size: 0.8125rem; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
textarea.field { height: auto; padding: 0.5rem 0.625rem; }
.field:focus { outline: none; border-color: #16213A; box-shadow: 0 0 0 3px rgba(22, 33, 58, .12); }
.dark .field { background: #0A0E15; border-color: #1F2837; }
.dark .field:focus { border-color: #E4B547; box-shadow: 0 0 0 3px rgba(228, 181, 71, .18); }
.field.invalid { border-color: rgb(225 29 72); }
select.field { appearance: none; padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center; }