/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* The jumped-to row sits clear of the top bar rather than under it, and says
   so for a moment — an instant jump with no acknowledgement reads as the link
   having done nothing. */
[id^="standing_"] {
  scroll-margin-top: 5rem;
}

[id^="standing_"]:target {
  animation: found-you 1.6s ease-out;
}

@keyframes found-you {
  0%, 40% { background-color: rgb(224 168 51 / 0.28); }
  100% { background-color: transparent; }
}

/* The real input for a six-digit code, once its boxes are drawn.
   See-through and stretched over them: still focusable, still the thing that
   submits, still where a phone's one-time-code autofill delivers its text —
   just not the thing you look at. Transparent rather than hidden, because
   opacity:0 and visibility:hidden both take a real control out of the
   accessibility tree and out of reach of anything looking for a visible field.
   Defined here rather than as utility classes added from JavaScript, which
   Tailwind cannot see and therefore may never generate. */
.code-field-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-color: transparent;
  color: transparent;
  caret-color: transparent;
}

.code-field-overlay:focus {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

/* The lit element during a guided tour.
   The dim is a single enormous box-shadow with a hole where this element sits,
   so the outline has to be an `outline` rather than a ring: Tailwind implements
   `ring-*` as a box-shadow, and the inline shadow that does the dimming
   replaces it — the highlight silently disappeared while the dim still worked. */
.tour-spotlight {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-radius: 0.75rem;
}

/* A horizontally scrolling strip that says so.
   The coach bar scrolls within itself so the page never scrolls sideways; the
   last item then sits cut off at the edge, which reads as broken rather than as
   scrollable. These fades are painted by the scroll-hint controller marking the
   strip, so with no JavaScript there is simply no fade and the strip still
   scrolls. The colour matches the bar it sits on rather than the page, so the
   fade reads as the strip continuing rather than as a shadow. */
[data-scrolls-forward],
[data-scrolls-back] {
  -webkit-mask-image: var(--scroll-hint-mask);
  mask-image: var(--scroll-hint-mask);
}

[data-scrolls-forward] {
  --scroll-hint-mask: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
}

[data-scrolls-back] {
  --scroll-hint-mask: linear-gradient(to right, transparent 0, #000 2rem);
}

[data-scrolls-back][data-scrolls-forward] {
  --scroll-hint-mask: linear-gradient(
    to right,
    transparent 0,
    #000 2rem,
    #000 calc(100% - 2rem),
    transparent 100%
  );
}