/* The version number a content item declares, and the popover naming the
   release behind it. Plain CSS, not Tailwind: the panel is built by
   version_popover_controller.js, and every stylesheet here ships on every page
   (the layout's stylesheet_link_tag :app takes the lot). */

.version-link {
  color: var(--color-gray-800, #1e2939);
  text-decoration: underline dotted;
  text-decoration-color: var(--color-gray-400, #9ca3af);
  text-underline-offset: 2px;
  cursor: help;
}

.version-link:hover { text-decoration-color: var(--color-gray-700, #374151); }

/* [popover] renders in the top layer, so the panel is never clipped by the
   overflow-x-auto that wraps every index table. The UA stylesheet centres it in
   the viewport (inset: 0; margin: auto); these two lines hand placement back to
   the controller, which puts it under whichever number was clicked. */
.version-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 50;
  width: max-content;
  max-width: 20rem;
  padding: 0.75rem;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--color-surface, #fff);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
  font-size: 0.8125rem;
  color: var(--color-gray-600, #4b5563);
}

.version-popover-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-900, #111827);
}

.version-popover-products {
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
}

.version-popover-products li { padding: 0.0625rem 0; }

.version-popover-released {
  margin: 0.375rem 0 0;
  color: var(--color-gray-500, #6b7280);
}

.version-popover-link {
  display: inline-block;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-gray-100, #f3f4f6);
  width: 100%;
  color: var(--color-blue-600, #2563eb);
  text-decoration: none;
}

.version-popover-link:hover { text-decoration: underline; }