/* Availability picker: three big tiles (Available / On hold / Sold) used in the edit form and the watch panel. */
.avail { gap: var(--s2); }
.avail__help { margin: 0; }
.avail__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }

.avail__opt {
  --tone: var(--ok);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 64px;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.avail__opt--hold { --tone: var(--hold); }
.avail__opt--sold { --tone: var(--sold); }

.avail__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.avail__head { display: inline-flex; align-items: center; gap: 8px; }
.avail__dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }
.avail__name { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.avail__sub { font-size: 11px; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--muted); }

.avail__opt:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.avail__opt:has(input:checked) {
  border-color: var(--tone);
  background: color-mix(in srgb, var(--tone) 14%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--tone);
}
.avail__opt:has(input:checked) .avail__dot { animation: avail-pulse 1.8s ease-in-out infinite; }
.avail__opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.avail__opt:has(input:disabled) { opacity: 0.55; cursor: progress; }

@keyframes avail-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 6%, transparent); }
}

.avail--quick { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.avail--quick > legend { padding: 0 var(--s2); }

@media (max-width: 460px) {
  .avail__sub { display: none; }
  .avail__opt { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .avail__opt, .avail__opt:hover { transition: none; transform: none; }
  .avail__opt:has(input:checked) .avail__dot { animation: none; }
}