@import url('./tokens/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/effects.css');
@import url('./tokens/layout.css');
@import url('./tokens/gradients.css');
@import url('./tokens/utilities.css');

a { color: var(--text-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.nodi-focus:focus-visible,
.nodi-focus:has(:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.nodi-focus-field:has(> input:focus-visible),
.nodi-focus-field:has(> textarea:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.nodi-cb:has(> input:focus-visible) > .nodi-cb-box {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.nodi-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@keyframes nodi-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes nodi-spin { to { transform: rotate(360deg); } }
@keyframes nodi-fip-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (hover: hover) {
  
  .nodi-fip-tab:hover .nodi-fip-title { color: var(--text-strong) !important; }
}

.nodi-fip-clock {
  animation-name: nodi-fip-timer;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.nodi-fip-paused .nodi-fip-clock { animation-play-state: paused; }

.nodi-index-cell:focus-within { background: var(--index-cell-hover); }
.nodi-index-cell:focus-within .nodi-index-arrow { transform: translateX(3px); }

@media (hover: hover) {
  .nodi-index-cell:hover { background: var(--index-cell-hover); }
  .nodi-index-cell:hover .nodi-index-arrow { transform: translateX(3px); }
}

.nodi-spinner { animation: nodi-spin 620ms linear infinite; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
  .nodi-segmented-thumb,
  .nodi-segmented-ghost { transition: opacity var(--dur-fast) var(--ease-standard) !important; }
  .nodi-segmented-fill { transition: none !important; --seg-press: 1 !important; --seg-stretch: 1 !important; }
  [role="menu"] { animation: none !important; }
  
  .nodi-fip-clock { animation: none !important; }
}

@media (hover: none) {
  .nodi-promptrow-arrow { opacity: 1 !important; }
}