.board-nav-item {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.board-nav-item .board-link {
  flex: 1;
  min-width: 0;
  width: auto;
  padding-inline: 8px;
  gap: 6px;
}
.board-pin {
  flex-shrink: 0;
}
.board-nav-item .board-pin {
  width: 28px;
  height: 32px;
  padding: 6px;
}
.board-pin svg {
  width: 16px;
  height: 16px;
}
.board-pin[aria-pressed='true'] {
  color: var(--accent);
  background: var(--accent-soft);
}
.board-pin[aria-pressed='true'] svg {
  fill: currentColor;
  fill-opacity: 0.18;
}
.board-heading {
  flex-wrap: wrap;
}
.leave-board {
  color: var(--red);
  min-height: 36px;
}
.leave-board:hover {
  color: var(--red);
  background: var(--red-bg);
  border-radius: 8px;
}
#successorField {
  margin-top: 16px;
}
@media (max-width: 839px) {
  .board-nav-item {
    flex-shrink: 0;
    max-width: 260px;
  }
}
@media (pointer: coarse) {
  .board-nav-item .board-pin {
    width: 44px;
    height: 44px;
  }
  .leave-board {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  body,
  .sidebar,
  .topbar,
  .garden-banner,
  .zone-column,
  .task-footer,
  .size-tag,
  .status-badge {
    transition:
      background-color 200ms,
      color 180ms,
      border-color 180ms;
  }
  .task-card {
    transition:
      background-color 200ms,
      border-color 180ms,
      transform 180ms,
      box-shadow 180ms;
  }
  .auth-screen:not([hidden]) .auth-story-copy,
  .auth-screen:not([hidden]) .auth-form-wrap,
  .empty-state:not([hidden]),
  .error-banner:not([hidden]) {
    animation: content-arrive 260ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  button,
  .board-link,
  .stat-symbol,
  .palette-preview i {
    transition:
      background-color 180ms,
      color 180ms,
      border-color 180ms,
      transform 180ms,
      box-shadow 180ms;
  }
  button:active:not(:disabled) {
    transform: translateY(1px) scale(0.98);
  }
  .board-pin[aria-pressed='true'] svg {
    animation: pin-set 240ms ease-out;
  }
  #refresh:disabled svg {
    animation: refresh-turn 900ms linear infinite;
  }
  .progress-track > div {
    transition: width 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  dialog {
    opacity: 0;
    translate: 0 10px;
    transition:
      opacity 180ms,
      translate 180ms,
      display 180ms allow-discrete,
      overlay 180ms allow-discrete;
  }
  dialog[open] {
    opacity: 1;
    translate: 0 0;
  }
  dialog::backdrop {
    opacity: 0;
    transition:
      opacity 180ms,
      display 180ms allow-discrete,
      overlay 180ms allow-discrete;
  }
  dialog[open]::backdrop {
    opacity: 1;
  }
  @starting-style {
    dialog[open] {
      opacity: 0;
      translate: 0 10px;
    }
    dialog[open]::backdrop {
      opacity: 0;
    }
  }
  @keyframes content-arrive {
    from {
      opacity: 0;
      translate: 0 8px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
  @keyframes pin-set {
    50% {
      transform: rotate(-18deg) scale(1.15);
    }
  }
  @keyframes refresh-turn {
    to {
      transform: rotate(360deg);
    }
  }
}