/*
 * Reversible interaction polish.
 * This file intentionally changes no content or layout structure.
 * Rollback: remove its <link> from frontend/index.html and delete this file.
 */

:root {
  --polish-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --polish-shadow: 0 12px 30px color-mix(in srgb, var(--theme-ink, #252c30) 9%, transparent);
  --polish-shadow-soft: 0 7px 18px color-mix(in srgb, var(--theme-ink, #252c30) 6%, transparent);
  --polish-focus: color-mix(in srgb, var(--theme-accent, #6d858f) 34%, transparent);
  --polish-hover: color-mix(in srgb, var(--theme-accent-soft, #e5ecef) 42%, var(--theme-surface, #fffefa));
}

/* Controls: clearer hover, press, and keyboard feedback. */
button,
a,
[role="button"],
input,
select,
textarea,
summary {
  transition:
    color 170ms ease,
    background-color 170ms ease,
    border-color 170ms ease,
    box-shadow 210ms ease,
    opacity 170ms ease,
    transform 210ms var(--polish-ease);
}

button:not(:disabled):hover,
[role="button"]:not([aria-disabled="true"]):hover {
  transform: translateY(-1px);
}

button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: translateY(0) scale(0.985);
  transition-duration: 70ms;
}

:is(button, a, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--theme-accent, #6d858f) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--polish-focus) !important;
}

button:disabled {
  cursor: not-allowed;
  transform: none !important;
}

/* Navigation remains visually identical at rest, but feels more responsive. */
.figma-top-nav .figma-brand,
.figma-top-nav .top-nav .tab,
.theme-toggle,
.access-cta,
.access-exit-button {
  will-change: transform;
}

.figma-top-nav .figma-brand:hover {
  transform: translateY(-1px);
}

.figma-top-nav .top-nav .tab:not(.active):hover .nav-icon,
.button-with-icon:hover .button-icon {
  transform: scale(1.08);
}

.button-icon {
  transition: opacity 170ms ease, transform 220ms var(--polish-ease);
}

.theme-menu {
  transform-origin: top right;
  animation: polish-menu-in 180ms var(--polish-ease) both;
}

.theme-menu button:hover .theme-swatches {
  transform: scale(1.04);
  box-shadow: var(--polish-shadow-soft);
}

.theme-swatches {
  transition: transform 220ms var(--polish-ease), box-shadow 220ms ease;
}

/* Small entrance cue when moving between product pages. */
.view.active > * {
  animation: polish-content-in 300ms var(--polish-ease) both;
}

.view.active > *:nth-child(2) { animation-delay: 30ms; }
.view.active > *:nth-child(3) { animation-delay: 55ms; }
.view.active > *:nth-child(n+4) { animation-delay: 75ms; }

/* Cards gain depth only on interaction, preserving the existing flat style. */
:is(
  .track-card,
  .route-grid article,
  .flow-grid article,
  .dataset-card-grid article,
  .guide-page-map article,
  .eligibility-grid article,
  .rule-card-grid article
) {
  transition:
    border-color 210ms ease,
    background-color 210ms ease,
    box-shadow 240ms ease,
    transform 240ms var(--polish-ease) !important;
}

:is(
  .track-card,
  .route-grid article,
  .dataset-card-grid article,
  .guide-page-map article,
  .eligibility-grid article,
  .rule-card-grid article
):hover {
  border-color: var(--theme-line-strong, #bcc8ce) !important;
  box-shadow: var(--polish-shadow-soft) !important;
  transform: translateY(-3px);
}

.route-grid article[data-view],
.guide-page-map article[data-view] {
  cursor: pointer;
}

.route-grid article[data-view]:active,
.guide-page-map article[data-view]:active,
.track-card:active {
  transform: translateY(-1px) scale(0.995);
}

.track-card button:hover {
  transform: translateX(2px) !important;
}

.dataset-card-actions a:hover {
  color: var(--theme-strong, #30393e);
  letter-spacing: 0.01em;
}

/* Tables: improve scan feedback without changing row height or column widths. */
.results-table tbody tr,
.job-task-table tbody tr,
.nested-table tbody tr {
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.results-table tbody tr:hover,
.job-task-table tbody tr:hover,
.nested-table tbody tr:hover {
  background: var(--polish-hover) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--theme-accent, #6d858f) 58%, transparent);
}

.results-table tbody tr:hover .version-link,
.results-table tbody tr:hover .text-strong {
  color: var(--theme-strong, #30393e);
}

.leaderboard-header-sort:hover .leaderboard-head-label {
  color: var(--theme-strong, #30393e);
}

.leaderboard-sort-arrows i {
  transition: color 150ms ease, opacity 150ms ease, transform 180ms var(--polish-ease);
}

.leaderboard-header-sort:hover .leaderboard-sort-arrows i {
  opacity: 0.72;
  transform: scale(1.08);
}

.leaderboard-overall-track i,
.task-progress-bar i,
.active-job-progress i,
.integration-live-progress i,
.arena-rank-bar i {
  position: relative;
  overflow: hidden;
  transition: width 420ms var(--polish-ease), filter 180ms ease;
}

.results-table tbody tr:hover .leaderboard-overall-track i,
.active-job-card:hover .active-job-progress i {
  filter: saturate(1.18) brightness(1.04);
}

/* Form and selection feedback. */
:is(input, select, textarea):hover:not(:disabled):not(:focus) {
  border-color: var(--theme-line-strong, #bcc8ce);
}

.dataset-item,
.dataset-toggle,
.active-job-card,
.private-score-item,
.column-selector {
  transition:
    border-color 190ms ease,
    background-color 190ms ease,
    box-shadow 220ms ease,
    transform 220ms var(--polish-ease);
}

.dataset-item:hover,
.active-job-card:hover {
  box-shadow: var(--polish-shadow-soft);
}

.dataset-toggle:not(.active):hover {
  border-color: var(--theme-line-strong, #bcc8ce) !important;
  background: var(--theme-surface-soft, #f2f4f4) !important;
}

.dataset-item:has(input:checked) {
  box-shadow: 0 0 0 3px var(--polish-focus) !important;
}

/* Status and review actions get a restrained live-state cue. */
.status-badge {
  transition: filter 170ms ease, box-shadow 170ms ease, transform 170ms var(--polish-ease);
}

tr:hover .status-badge,
.active-job-card:hover .status-badge {
  filter: saturate(1.08);
  transform: scale(1.025);
}

#publicationReviewPanel .status-pending {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent, #6d858f) 22%, transparent);
  animation: polish-pending-pulse 2.8s ease-out infinite;
}

.review-actions button:hover {
  box-shadow: var(--polish-shadow-soft);
}

/* Dialogs feel attached to the action that opened them. */
.access-dialog,
.integration-test-dialog {
  animation: polish-dialog-in 240ms var(--polish-ease) both;
}

.access-dialog-backdrop,
.integration-test-backdrop {
  animation: polish-backdrop-in 180ms ease both;
}

/* Horizontal areas retain their dimensions while becoming easier to discover. */
:is(.preview-table-wrap, .leaderboard-main-section, .subdataset-detail-table, .private-table-wrap, .review-table-wrap) {
  scrollbar-color: var(--theme-line-strong, #bcc8ce) transparent;
  scrollbar-width: thin;
}

:is(.preview-table-wrap, .leaderboard-main-section, .subdataset-detail-table, .private-table-wrap, .review-table-wrap)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

:is(.preview-table-wrap, .leaderboard-main-section, .subdataset-detail-table, .private-table-wrap, .review-table-wrap)::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--theme-line-strong, #bcc8ce);
  background-clip: padding-box;
}

@keyframes polish-content-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes polish-menu-in {
  from { opacity: 0; transform: translateY(-5px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes polish-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes polish-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes polish-pending-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent, #6d858f) 25%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

@media (hover: none) {
  button:not(:disabled):hover,
  [role="button"]:not([aria-disabled="true"]):hover,
  :is(
    .track-card,
    .route-grid article,
    .dataset-card-grid article,
    .guide-page-map article,
    .eligibility-grid article,
    .rule-card-grid article
  ):hover {
    transform: none;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .view.active > *,
  .theme-menu,
  .access-dialog,
  .integration-test-dialog,
  .access-dialog-backdrop,
  .integration-test-backdrop,
  #publicationReviewPanel .status-pending {
    animation: none !important;
  }

  button,
  a,
  [role="button"],
  input,
  select,
  textarea,
  summary,
  .button-icon,
  .results-table tbody tr,
  .job-task-table tbody tr,
  .nested-table tbody tr {
    transition-duration: 1ms !important;
  }
}