/*
 * Reversible micro-detail polish, layered after interaction-polish.css.
 * No content or layout structure changes.
 * Rollback: remove its <link> from frontend/index.html and delete this file.
 */

::selection {
  background: color-mix(in srgb, var(--theme-accent, #6d858f) 28%, transparent);
  color: var(--theme-ink, #252c30);
}

/* Keep metric-heavy surfaces visually steady while values update. */
:is(
  .results-table,
  .job-task-table,
  .nested-table,
  .score-pill,
  .score-metric,
  .rank-badge,
  .snapshot-stats,
  .overview-grid,
  .task-progress,
  .mono
) {
  font-variant-numeric: tabular-nums;
}

/* Active navigation gets a small theme-colored anchor. */
.figma-top-nav .top-nav .tab.active {
  position: relative;
}

.figma-top-nav .top-nav .tab.active::after {
  position: absolute;
  right: 12px;
  bottom: 3px;
  left: 12px;
  height: 2px;
  border-radius: 999px;
  background: var(--theme-accent, #6d858f);
  opacity: 0.58;
  content: "";
  animation: micro-nav-line-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Metric chips gain crisp hover feedback without changing their dimensions. */
:is(.score-pill, .rank-badge, .suite-chip, .stage-chip, .cache-chip, .binding-pill) {
  transition: border-color 170ms ease, box-shadow 190ms ease, filter 170ms ease, transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

tr:hover :is(.score-pill, .rank-badge, .suite-chip, .stage-chip, .cache-chip),
.active-job-card:hover :is(.suite-chip, .stage-chip) {
  filter: saturate(1.06);
  transform: translateY(-1px);
}

tr:hover .score-pill {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-accent, #6d858f) 13%, transparent);
}

/* Leaderboard rows use a classic full-row hover shadow without a left accent. */
:is(#public, #multimodel, #coding, #home) .leaderboard-table tbody tr {
  position: relative;
  z-index: 0;
  transition: background-color 150ms ease, box-shadow 180ms ease;
}

:is(#public, #multimodel, #coding, #home) .leaderboard-table tbody tr:hover {
  z-index: 1;
  background: var(--polish-hover, rgba(109, 133, 143, 0.08)) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-ink, #252c30) 14%, transparent) !important;
}

/* Expandable rows communicate state more clearly. */
details > summary {
  border-radius: 6px;
}

details > summary:hover {
  background: color-mix(in srgb, var(--theme-accent-soft, #e5ecef) 44%, transparent);
}

details[open] > summary {
  color: var(--theme-strong, #30393e);
}

.private-score-item[open],
.result-failure[open],
.task-error-detail[open],
.error-text[open],
.column-selector[open] {
  border-color: var(--theme-line-strong, #bcc8ce) !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--theme-ink, #252c30) 5%, transparent);
}

.private-score-item[open] summary::before {
  color: var(--theme-accent, #6d858f);
}

/* Empty areas read as intentional states rather than unfinished surfaces. */
.empty-state,
.active-jobs-empty,
.private-score-empty,
.home-preview-empty {
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #6d858f) 7%, transparent), transparent 58%),
    color-mix(in srgb, var(--theme-surface-soft, #f2f4f4) 48%, transparent);
  transition: border-color 190ms ease, background-color 190ms ease;
}

.empty-state:hover,
.active-jobs-empty:hover {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #6d858f) 11%, transparent), transparent 62%),
    color-mix(in srgb, var(--theme-surface-soft, #f2f4f4) 64%, transparent);
}

/* Give selected controls a subtle inset confirmation. */
:is(
  .preview-tabs button.active,
  .board-switch .tab.active,
  .active-job-card.selected
) {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-accent, #6d858f) 20%, transparent),
    0 4px 12px color-mix(in srgb, var(--theme-ink, #252c30) 5%, transparent) !important;
}

/* Hero buttons and primary actions feel slightly more tactile. */
:is(.hero-actions, .actions, .integration-test-actions, .integration-complete-actions) button:not(:disabled):hover {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-ink, #252c30) 10%, transparent);
}

:is(.hero-actions, .actions, .integration-test-actions, .integration-complete-actions) button:not(:disabled):active {
  box-shadow: 0 3px 8px color-mix(in srgb, var(--theme-ink, #252c30) 8%, transparent);
}

/* Small icon movement reinforces the action direction. */
.preview-open-button:hover .icon-chart-column,
.hero-actions button:hover .icon-play,
.access-cta:hover .icon-circle-plus,
.guide-hero-button:hover .icon-gauge {
  transform: scale(1.08) rotate(-3deg);
}

.hero-actions button:hover .icon-mail,
.guide-hero-button:hover .icon-mail {
  transform: translateY(-1px) rotate(2deg);
}

.track-card:hover .track-card-icon {
  transform: scale(1.08) rotate(-2deg);
}

/* Keep links editorial at rest and clear on intent. */
.dataset-card-actions a,
.guide-card a {
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.dataset-card-actions a:hover,
.guide-card a:hover {
  text-decoration-color: color-mix(in srgb, var(--theme-accent, #6d858f) 70%, transparent);
}

/* Review decisions stand out only when the row is being inspected. */
#publicationReviewPanel .review-table tbody tr:hover .review-actions {
  filter: saturate(1.05);
}

#publicationReviewPanel .review-decision-meta small {
  line-height: 1.45;
}

/* A faint edge cue makes horizontally scrollable tables easier to recognize. */
:is(.leaderboard-main-section, .subdataset-detail-table, .preview-table-wrap, .private-table-wrap, .review-table-wrap) {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--theme-ink, #252c30) 4%, transparent), transparent 8px),
    linear-gradient(to left, color-mix(in srgb, var(--theme-ink, #252c30) 4%, transparent), transparent 8px);
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 8px 100%;
}

/* Shared product page-map cards used by the API Guide and Home exploration. */
:is(#api-guide, #home .explore-section) .guide-page-map {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 16px;
}

:is(#api-guide, #home .explore-section) .guide-page-map article {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: stretch;
  gap: 10px;
  min-height: 174px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--theme-line, #d5dcdf) 84%, transparent);
  border-radius: 14px;
  padding: 18px 19px 17px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--theme-accent, #6d858f) 12%, transparent), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-surface, #fff) 98%, transparent), color-mix(in srgb, var(--theme-surface-soft, #f2f4f4) 72%, transparent));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 72%, transparent) inset;
  outline: none;
}

:is(#api-guide, #home .explore-section) .guide-page-map article::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--theme-accent, #6d858f), color-mix(in srgb, var(--theme-accent, #6d858f) 18%, transparent));
  opacity: 0.42;
  content: "";
  transition: opacity 190ms ease;
}

:is(#api-guide, #home .explore-section) .page-map-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:is(#api-guide, #home .explore-section) .page-map-card-icon {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #6d858f) 22%, transparent);
  border-radius: 10px;
  background-color: var(--theme-accent, #6d858f);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--theme-accent, #6d858f) 14%, transparent);
  color: #fff;
}

:is(#api-guide, #home .explore-section) .page-map-card-icon .button-icon {
  width: 16px;
  min-width: 16px;
  height: 16px;
}

:is(#api-guide, #home .explore-section) .page-map-card-index {
  color: color-mix(in srgb, var(--theme-muted, #6f797e) 72%, transparent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
}

:is(#api-guide, #home .explore-section) .guide-page-map h3 {
  color: var(--theme-ink, #252c30);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -0.01em;
}

:is(#api-guide, #home .explore-section) .guide-page-map p {
  color: var(--theme-muted, #6f797e);
  line-height: 1.5;
}

:is(#api-guide, #home .explore-section) .page-map-card-action {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  justify-content: flex-start;
  gap: 7px;
  color: var(--theme-strong, #30393e);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

:is(#api-guide, #home .explore-section) .page-map-card-action i {
  font-style: normal;
  transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

:is(#api-guide, #home .explore-section) .guide-page-map article:hover,
:is(#api-guide, #home .explore-section) .guide-page-map article:focus-visible {
  border-color: color-mix(in srgb, var(--theme-accent, #6d858f) 48%, var(--theme-line, #d5dcdf)) !important;
  box-shadow: 0 13px 30px color-mix(in srgb, var(--theme-ink, #252c30) 11%, transparent) !important;
}

:is(#api-guide, #home .explore-section) .guide-page-map article:hover::before,
:is(#api-guide, #home .explore-section) .guide-page-map article:focus-visible::before {
  opacity: 0.9;
}

:is(#api-guide, #home .explore-section) .guide-page-map article:hover .page-map-card-action i,
:is(#api-guide, #home .explore-section) .guide-page-map article:focus-visible .page-map-card-action i {
  transform: translateX(4px);
}

:is(#api-guide, #home .explore-section) .guide-page-map article:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-accent, #6d858f) 24%, transparent);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  :is(#api-guide, #home .explore-section) .guide-page-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  :is(#api-guide, #home .explore-section) .guide-page-map {
    grid-template-columns: 1fr;
  }
}

@keyframes micro-nav-line-in {
  from { opacity: 0; transform: scaleX(0.35); }
  to { opacity: 0.58; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .figma-top-nav .top-nav .tab.active::after {
    animation: none;
  }

  :is(
    .score-pill,
    .rank-badge,
    .suite-chip,
    .stage-chip,
    .cache-chip,
    .binding-pill,
    .empty-state,
    .active-jobs-empty
  ) {
    transition-duration: 1ms !important;
  }
}