/* Island design system — physical depth tiers + optimistic-UI states.
 *
 * Three depth tiers convey priority by elevation:
 *   .uz-raised    — important actions / primary cards; lifted off the page
 *   .uz-flat      — normal cards / secondary actions; level with the page
 *   .uz-recessed  — lowest priority / inert containers; sunken into the page
 *
 * Two optimistic-UI states ride on top:
 *   .uz-pending   — action sent to backend; awaiting response
 *   .uz-failed    — backend rejected the action; pulse + ring
 *
 * Plus a banner utility for top-of-page error messages.
 *
 * Loaded after Tailwind so the utility classes can compose with bg-,
 * text-, border- helpers without ordering pain.
 */

/* ── DEPTH ────────────────────────────────────────────────────────── */

.uz-raised {
  /* Solid bg one shade lighter than the page (zinc-800/950) so the
   * card pops against bg-zinc-950 without the alpha-blend bleed that
   * caused the original tiles to disappear into the page. */
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%), rgb(39, 39, 42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 24px -10px rgba(0, 0, 0, 0.7),
    0 2px 8px -2px rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
}

.uz-flat {
  /* Solid zinc-900 — sits flush with the page but distinct enough
   * that a 1px border defines it. */
  background: rgb(24, 24, 27);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border-radius: 0.5rem;
}

.uz-recessed {
  /* Darker than the surrounding panel — clearly sunken inside a
   * .uz-flat. Inset shadow + darker bg + hairline border read as
   * "lower than" without needing borrowed lighting. */
  background: rgb(9, 9, 11);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6) inset,
    0 -1px 0 rgba(255, 255, 255, 0.03) inset;
  border-radius: 0.5rem;
}

/* ── BUTTON DEPTH ─────────────────────────────────────────────────── */

.uz-btn-raised {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%), rgba(63, 63, 70, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 2px 6px rgba(0, 0, 0, 0.35);
  border-radius: 0.375rem;
  transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease;
}
.uz-btn-raised:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%), rgba(82, 82, 91, 0.85);
}
.uz-btn-raised:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.25) inset,
    0 1px 2px rgba(0, 0, 0, 0.25);
}

.uz-btn-flat {
  background: rgba(63, 63, 70, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.375rem;
  transition: background 120ms ease;
}
.uz-btn-flat:hover {
  background: rgba(82, 82, 91, 0.55);
}

.uz-btn-recessed {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset;
  border-radius: 0.375rem;
  transition: background 120ms ease;
}
.uz-btn-recessed:hover {
  background: rgba(0, 0, 0, 0.45);
}

/* Coloured raised variants — these override the neutral gradient. */
.uz-btn-raised.uz-btn--emerald {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.20) 0%, rgba(16, 185, 129, 0.08) 100%);
  border-color: rgba(16, 185, 129, 0.4);
  color: rgb(110, 231, 183);
}
.uz-btn-raised.uz-btn--emerald:hover {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.30) 0%, rgba(16, 185, 129, 0.12) 100%);
}

.uz-btn-raised.uz-btn--amber {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.20) 0%, rgba(217, 119, 6, 0.08) 100%);
  border-color: rgba(217, 119, 6, 0.4);
  color: rgb(252, 211, 77);
}
.uz-btn-raised.uz-btn--amber:hover {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.30) 0%, rgba(217, 119, 6, 0.12) 100%);
}

.uz-btn-raised.uz-btn--rose {
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.22) 0%, rgba(225, 29, 72, 0.08) 100%);
  border-color: rgba(225, 29, 72, 0.45);
  color: rgb(253, 164, 175);
}
.uz-btn-raised.uz-btn--rose:hover {
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.32) 0%, rgba(225, 29, 72, 0.12) 100%);
}

.uz-btn-raised.uz-btn--sky {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.20) 0%, rgba(14, 165, 233, 0.08) 100%);
  border-color: rgba(14, 165, 233, 0.4);
  color: rgb(125, 211, 252);
}
.uz-btn-raised.uz-btn--sky:hover {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.30) 0%, rgba(14, 165, 233, 0.12) 100%);
}

/* ── OPTIMISTIC UI STATES ─────────────────────────────────────────── */

/* In-flight — added immediately on click via JS.add_class.
 * Server processes; success clears the class via natural re-render.
 */
.uz-pending {
  position: relative;
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}
.uz-pending::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: -0.4375rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: uz-spin 0.6s linear infinite;
  opacity: 0.6;
}
@keyframes uz-spin {
  to { transform: rotate(360deg); }
}

/* Failed — server pushed back a failure. Pulses a red ring around the
 * action for ~3 seconds, then fades. JS hook clears it on next click.
 */
.uz-failed {
  position: relative;
  animation: uz-failed-pulse 1.8s ease-out 1;
  outline: 2px solid rgba(225, 29, 72, 0.6);
  outline-offset: 2px;
  border-radius: inherit;
}
@keyframes uz-failed-pulse {
  0%   { outline-color: rgba(225, 29, 72, 0.9); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.45); }
  50%  { outline-color: rgba(225, 29, 72, 0.7); box-shadow: 0 0 0 6px rgba(225, 29, 72, 0); }
  100% { outline-color: rgba(225, 29, 72, 0.6); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

/* Top-of-content error banner — slides in, sticky for 6 seconds, fades. */
.uz-banner-error {
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.15) 0%, rgba(225, 29, 72, 0.05) 100%);
  border: 1px solid rgba(225, 29, 72, 0.35);
  color: rgb(253, 164, 175);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: uz-banner-in 220ms ease-out 1;
}
@keyframes uz-banner-in {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── SYNTAX HIGHLIGHTING ──────────────────────────────────────────
 * Colours target a dark-mode terminal palette. Used by the merchant
 * developer playground's HighlightCode JS hook.
 */
.uz-json-key  { color: rgb(125, 211, 252); }
.uz-json-str  { color: rgb(134, 239, 172); }
.uz-json-num  { color: rgb(252, 211, 77); }
.uz-json-bool { color: rgb(240, 171, 252); font-weight: 600; }
.uz-json-null { color: rgb(148, 163, 184); font-style: italic; }