/* app/assets/stylesheets/ui/overview.css */
/* Role tabs on the public Overview page (role_tour_controller.js). */

.role-tab {
  @apply px-4 py-2 rounded-lg text-sm font-medium text-teal-50 transition-colors cursor-pointer;
}

.role-tab:hover {
  @apply bg-white/10 text-white;
}

.role-tab:focus-visible {
  @apply outline-none ring-2 ring-white ring-offset-2 ring-offset-teal-800;
}

.role-tab-active,
.role-tab-active:hover {
  @apply bg-white text-teal-800 shadow-sm;
}

/* Click-to-enlarge images (image_zoom_controller.js). Hover hints that the
   image opens: paper sheets straighten and lift like a picked-up page,
   screenshots lift slightly. Motion is dropped for reduced-motion users. */
.zoomable {
  @apply transition duration-300 ease-out;
}

.zoomable:focus-visible {
  @apply outline-none ring-2 ring-offset-4 ring-teal-500;
}

.zoomable-paper:hover,
.zoomable-paper:focus-visible {
  @apply rotate-0 -translate-y-1;
}

.zoomable-paper:hover img {
  @apply shadow-2xl;
}

.zoomable-screen:hover,
.zoomable-screen:focus-visible {
  @apply -translate-y-0.5;
}

.zoom-hint {
  @apply absolute bottom-3 right-3 inline-flex items-center gap-1 rounded-full bg-gray-900/75 px-2.5 py-1
         text-xs font-medium text-white opacity-0 transition-opacity duration-200;
}

.zoomable:hover .zoom-hint,
.zoomable:focus-visible .zoom-hint {
  @apply opacity-100;
}

/* Touch screens can't hover, so the hint is always shown there and says
   "Tap"; mouse users see "Click" on hover/focus. */
.zoom-hint-tap { display: none; }

@media (hover: none) {
  .zoom-hint { opacity: 1; }
  .zoom-hint-click { display: none; }
  .zoom-hint-tap { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .zoomable { transition: none; }
  .zoomable-paper:hover,
  .zoomable-paper:focus-visible,
  .zoomable-screen:hover,
  .zoomable-screen:focus-visible { transform: none; }
}

/* Enlarge dialog: image scaled to fit the viewport, dark backdrop. */
.zoom-dialog {
  @apply m-auto max-w-[95vw] max-h-[95vh] bg-transparent p-0 overflow-visible;
}

.zoom-dialog::backdrop {
  @apply bg-gray-950/85;
}

.zoom-dialog-image {
  @apply block max-w-[92vw] max-h-[85vh] w-auto h-auto rounded-md bg-white shadow-2xl;
}

.zoom-dialog-close {
  @apply fixed top-4 right-4 inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/90 text-gray-900
         shadow-lg cursor-pointer hover:bg-white;
}

.zoom-dialog-close:focus-visible {
  @apply outline-none ring-2 ring-white ring-offset-2 ring-offset-gray-900;
}

/* Open/close motion for the enlarge dialog. The dialog fades (it can't be
   scaled itself: a transform would re-anchor the fixed close button), the
   image grows from 92%. Opening is slower (320ms, the [open] rules) than
   closing (220ms, the base rules): a transition takes the timing of the state
   it's heading to. allow-discrete keeps the dialog on screen while it fades
   out. Browsers without @starting-style just open instantly. */
.zoom-dialog {
  opacity: 0;
  transition: opacity 220ms ease-in, overlay 220ms allow-discrete, display 220ms allow-discrete;
}

.zoom-dialog[open] {
  opacity: 1;
  transition: opacity 320ms ease-out, overlay 320ms allow-discrete, display 320ms allow-discrete;
}

.zoom-dialog::backdrop {
  opacity: 0;
  transition: opacity 220ms ease-in, overlay 220ms allow-discrete, display 220ms allow-discrete;
}

.zoom-dialog[open]::backdrop {
  opacity: 1;
  transition: opacity 320ms ease-out, overlay 320ms allow-discrete, display 320ms allow-discrete;
}

.zoom-dialog .zoom-dialog-image {
  scale: 0.92;
  transition: scale 220ms ease-in;
}

.zoom-dialog[open] .zoom-dialog-image {
  scale: 1;
  transition: scale 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@starting-style {
  .zoom-dialog[open] { opacity: 0; }
  .zoom-dialog[open]::backdrop { opacity: 0; }
  .zoom-dialog[open] .zoom-dialog-image { scale: 0.92; }
}

/* Role tabs: the newly shown panel fades in and settles up by a few pixels,
   so switching roles reads as a change of view, not a flash. */
[data-role-tour-target="panel"] {
  transition: opacity 350ms ease-out, translate 350ms ease-out;
}

/* The outgoing view fades and lifts slightly before the new one comes in
   (timing matches LEAVE_MS in role_tour_controller.js). */
[data-role-tour-target="panel"].role-panel-leaving {
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 180ms ease-in, translate 180ms ease-in;
}

@starting-style {
  [data-role-tour-target="panel"]:not([hidden]) {
    opacity: 0;
    translate: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zoom-dialog .zoom-dialog-image,
  .zoom-dialog[open] .zoom-dialog-image { transition: none; scale: 1; }
  [data-role-tour-target="panel"],
  [data-role-tour-target="panel"].role-panel-leaving { transition: opacity 120ms linear; translate: none; }
}