/* The developer credit pill.
   ---------------------------------------------------------------------------
   Its own stylesheet on purpose: layouts/auth.blade.php carries its own token
   set inline and never loads panel.css, so rules living there would mean either
   a second copy of this or coupling the sign-in screens to the panel's
   stylesheet. One file, linked by all three shells, keeps it to one copy.

   Logical properties throughout - the whole UI flips to RTL in Arabic, and the
   sheen sweeps from the reading edge in both directions. */

.credit {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .34em .85em;
  border-radius: 999px;
  border: 1px solid var(--cr-bd);
  background: var(--cr-bg);
  color: var(--cr-fg);
  font-family: var(--ff, inherit);
  font-size: .75rem;
  line-height: 1.55;
  white-space: nowrap;
  text-decoration: none;
  /* isolate: keeps the sheen's negative z-index inside the pill instead of
     letting it slide behind whatever the pill is sitting on. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* The sheen. z-index:-1 puts it above the pill's own background but below its
   inline content, so it can never dim a letter. */
.credit::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 55%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-18deg);
  background: linear-gradient(105deg, transparent, var(--cr-sheen), transparent);
}

.credit:hover {
  transform: translateY(-1px);
  border-color: var(--cr-bd-hover);
  box-shadow: 0 6px 18px -8px var(--cr-glow);
}

.credit:hover::before {
  animation: credit-sheen .85s ease-out;
}

@keyframes credit-sheen {
  0%   { opacity: 0; inset-inline-start: -60%; }
  18%  { opacity: 1; }
  100% { opacity: 0; inset-inline-start: 120%; }
}

.credit:focus-visible {
  outline: 2px solid var(--cr-ring);
  outline-offset: 2px;
}

/* The name: brighter than the sentence around it, and its own bidi island so
   the dot in "Root.ps" stays put inside an Arabic line. */
.credit .cr-name {
  position: relative;
  color: var(--cr-name);
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
}

/* An underline that grows under the name only, not under the whole sentence. */
.credit .cr-name::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -.14em;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width .22s ease;
}

.credit:hover .cr-name::after { width: 100%; }

/* Two beats, then a long rest. A pulse that never stops pulls the eye off the
   page it is sitting under. */
.credit .cr-heart {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: var(--cr-heart);
  transform-origin: center;
  animation: credit-beat 4.4s ease-in-out infinite;
}

@keyframes credit-beat {
  0%, 100% { transform: scale(1); }
  5%       { transform: scale(1.18); }
  11%      { transform: scale(1); }
  17%      { transform: scale(1.13); }
  23%      { transform: scale(1); }
  /* 23%-100% is stillness, deliberately. */
}

.credit .cr-ext {
  width: .85em;
  height: .85em;
  flex: 0 0 auto;
  opacity: .55;
  transition: opacity .18s ease;
}

.credit:hover .cr-ext { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .credit,
  .credit .cr-ext,
  .credit .cr-name::after { transition: none; }
  .credit .cr-heart { animation: none; }
  .credit:hover { transform: none; }
  .credit:hover::before { animation: none; }
}

/* ---------------------------------------------------------------------------
   Tones. One complete set of custom properties per tone, in one place each.
   partials/credit.blade.php picks between them with a static map, so every
   class name below appears literally in the source of both files.

   No new colours are introduced: the fixed tones pin the values panel.css
   already defines for its dark and light palettes.
   --------------------------------------------------------------------------- */

/* Follows whatever palette the surrounding shell has. Uses only tokens that
   exist in BOTH panel.css and the sign-in layout's own :root. */
.credit-auto {
  --cr-fg: var(--mut);
  --cr-name: var(--fg);
  --cr-heart: var(--err);
  --cr-bd: var(--line);
  --cr-bd-hover: var(--acc);
  --cr-bg: color-mix(in srgb, var(--fg) 4%, transparent);
  --cr-sheen: color-mix(in srgb, var(--fg) 13%, transparent);
  --cr-glow: color-mix(in srgb, var(--acc) 55%, transparent);
  --cr-ring: var(--acc);
}

/* For a white or near-white surface. */
.credit-light {
  --cr-fg: #6b7688;
  --cr-name: #171b24;
  --cr-heart: #ff6b6b;
  --cr-bd: #e4e8f0;
  --cr-bd-hover: #6a5cf0;
  --cr-bg: rgba(23, 27, 36, .035);
  --cr-sheen: rgba(23, 27, 36, .10);
  --cr-glow: rgba(106, 92, 240, .55);
  --cr-ring: #6a5cf0;
}

/* For a dark footer or a dark screen. */
.credit-dark {
  --cr-fg: #7b8494;
  --cr-name: #e9ecf2;
  --cr-heart: #ff6b6b;
  --cr-bd: #232a37;
  --cr-bd-hover: #7c6cff;
  --cr-bg: rgba(233, 236, 242, .05);
  --cr-sheen: rgba(233, 236, 242, .14);
  --cr-glow: rgba(124, 108, 255, .55);
  --cr-ring: #9b8dff;
}

/* For a saturated accent panel, where the pill has to read against the brand
   colour rather than against a neutral. */
.credit-accent {
  --cr-fg: rgba(255, 255, 255, .78);
  --cr-name: #fff;
  --cr-heart: #fff;
  --cr-bd: rgba(255, 255, 255, .28);
  --cr-bd-hover: rgba(255, 255, 255, .65);
  --cr-bg: rgba(255, 255, 255, .12);
  --cr-sheen: rgba(255, 255, 255, .30);
  --cr-glow: rgba(255, 255, 255, .45);
  --cr-ring: #fff;
}

/* ---------------------------------------------------------------------------
   Where each shell puts it.
   --------------------------------------------------------------------------- */

/* Panel and admin: a slim footer under the content, never in the sidebar. */
.app-credit {
  margin-block-start: 30px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--line);
  text-align: center;
}

/* Sign-in screens: once, under the language row. */
.auth-credit {
  margin-block-start: 18px;
  text-align: center;
}

/* Landing page: opposite end of the bottom bar from the copyright, stacking
   under it once there is no longer room for both on one line. */
.land-credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .land-credit { justify-content: center; }
}