/* ==========================================================================
   static/css/redeem.css - agent:redeem (TASK 8)

   The "redeem a gift code for credit" popup, built in JavaScript by
   static/js/redeem.js. Load AFTER main.css.

   RELATIONSHIP TO main.css (ui:design-system)
   main.css is the only home of the --acher-* tokens and of the shared components
   this popup is assembled from: .acher-card, .acher-input (+ .is-code,
   .is-invalid), .acher-label, .acher-btn-primary, .acher-btn-ghost. This file
   redeclares NOTHING and overrides NOTHING from it - it adds only what has no rule
   there: the overlay, the panel's own layout, the close affordance, the feedback
   line and the Turnstile slot.

   The panel carries main.css's own .acher-card.is-static, which is exactly the
   modifier that neutralises the card's hover lift and glow - a dialog must not move
   under the cursor. That is why there is no :hover override below.

   NO HEX LITERAL APPEARS BELOW. Every colour is a --acher-* token composed through
   the local aliases in :root, each with a literal fallback so the popup still looks
   right if main.css fails to load (the fallbacks mirror main.css's own values and
   are the ONLY place a literal is allowed, exactly as static/css/search.css does).

   RESPONSIVE: works at 375px and up. The panel is width:min(28rem, 100% - 2rem),
   the actions row stacks below 26rem, and every tap target is >= 40px (the buttons
   get an explicit min-height because .acher-btn-* is sized for a desktop row).

   MOTION: the entry transition is opacity + a 6px lift, and it is switched off
   entirely under prefers-reduced-motion. Green :focus-visible rings are inherited
   from main.css and are never removed.
   ========================================================================== */

:root {
  /* Local aliases with literal fallbacks. The --acher-* tokens themselves are
     NEVER redeclared here - main.css is their only home. */
  --rdm-surface: var(--acher-surface, #0f0f0f);
  --rdm-surface-2: var(--acher-surface-2, #141414);
  --rdm-border: var(--acher-border, #1a1a1a);
  --rdm-border-strong: var(--acher-border-strong, #2a2a2a);
  --rdm-primary: var(--acher-primary, #00ff41);
  --rdm-primary-soft: var(--acher-primary-soft, #7dff9b);
  --rdm-text: var(--acher-text, #e8e8e8);
  --rdm-muted: var(--acher-muted, #666666);
  --rdm-dim: var(--acher-dim, #9a9a9a);
  --rdm-danger: var(--acher-danger, #ff2d2d);
  --rdm-danger-soft: var(--acher-danger-soft, #ff8f8f);
  --rdm-warning: var(--acher-warning, #ffaa00);
  --rdm-rgb: var(--acher-primary-rgb, 0, 255, 65);
  --rdm-danger-rgb: var(--acher-danger-rgb, 255, 45, 45);

  --rdm-display: var(--acher-font-display, "Share Tech Mono", "JetBrains Mono", ui-monospace, monospace);
  --rdm-mono: var(--acher-font-mono, "JetBrains Mono", ui-monospace, monospace);

  --rdm-radius: var(--radius, 6px);
  --rdm-radius-sm: var(--radius-sm, 4px);
  --rdm-transition: var(--transition, 0.16s ease);
  --rdm-z: var(--z-modal, 900);

  /* Minimum comfortable tap target. Referenced, not repeated. */
  --rdm-tap: 40px;
}

/* ==========================================================================
   1. Overlay
   ========================================================================== */

/* [hidden] must win: the rule below gives the overlay a display value, and an
   attribute selector alone would lose to it on specificity. */
.redeem-overlay[hidden] {
  display: none !important;
}

.redeem-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--rdm-z);
  display: flex;
  align-items: center;
  justify-content: center;
  /* safe-area padding so the panel clears a notch / home indicator on a phone */
  padding: calc(var(--space-5, 1.25rem) + env(safe-area-inset-top, 0px))
           var(--space-4, 1rem)
           calc(var(--space-5, 1.25rem) + env(safe-area-inset-bottom, 0px));
  /* The overlay scrolls, not the page: a short viewport with the keyboard up must
     never produce a horizontally scrolling document. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.redeem-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay, rgba(3, 3, 3, 0.82));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Body scroll lock while the dialog is open (static/js/redeem.js toggles it). */
body.redeem-modal-open {
  overflow: hidden;
}

/* ==========================================================================
   2. Panel
   ========================================================================== */

.redeem-panel {
  position: relative;
  z-index: 1;
  /* min() keeps a 1rem gutter on a 375px phone and caps the width on desktop. */
  width: min(28rem, 100%);
  max-width: 100%;
  margin: auto;
  padding: var(--space-6, 1.5rem);
  background: var(--rdm-surface-2);
  border-color: var(--rdm-border-strong);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--rdm-transition), transform var(--rdm-transition);
}

.redeem-overlay.is-open .redeem-panel {
  opacity: 1;
  transform: translateY(0);
}

.redeem-panel:focus {
  outline: none;
}

/* ---- head ---------------------------------------------------------------- */

.redeem-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-2, 0.5rem);
}

.redeem-title {
  margin: 0;
  font-family: var(--rdm-display);
  font-size: var(--fs-md, 1.1rem);
  font-weight: 400;
  line-height: var(--lh-snug, 1.3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rdm-text);
}

.redeem-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  min-width: var(--rdm-tap);
  min-height: var(--rdm-tap);
  padding: 0 var(--space-2, 0.5rem);
  border: 1px solid transparent;
  border-radius: var(--rdm-radius-sm);
  background: transparent;
  color: var(--rdm-muted);
  font-family: var(--rdm-display);
  font-size: var(--fs-xs, 0.75rem);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color var(--rdm-transition), border-color var(--rdm-transition),
    background-color var(--rdm-transition);
}

.redeem-close:hover,
.redeem-close:focus-visible {
  border-color: var(--rdm-border-strong);
  background: rgba(var(--rdm-rgb), 0.06);
  color: var(--rdm-primary);
}

.redeem-close-key {
  padding: 0.1em 0.4em;
  border: 1px solid var(--rdm-border);
  border-radius: var(--rdm-radius-sm);
  font-size: 0.9em;
}

.redeem-close-glyph {
  font-size: 1.15em;
  line-height: 1;
}

/* The Esc chip is desktop nicety; on a phone there is no Esc key, so only the
   glyph stays and the target keeps its 40px. */
@media (max-width: 26rem) {
  .redeem-close-key {
    display: none;
  }
}

.redeem-intro {
  margin: 0 0 var(--space-5, 1.25rem);
  color: var(--rdm-dim);
  font-size: var(--fs-sm, 0.88rem);
  line-height: var(--lh-base, 1.6);
}

/* ==========================================================================
   3. Form
   ========================================================================== */

.redeem-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.redeem-label {
  margin: 0;
  color: var(--rdm-dim);
}

/* .acher-input.is-code already supplies the mono face, the uppercase transform and
   the letter spacing. Only the height is added, so the field is a comfortable tap
   target on a phone. */
.redeem-input {
  min-height: var(--rdm-tap);
}

/* ---- feedback ------------------------------------------------------------ */

.redeem-feedback[hidden] {
  display: none !important;
}

.redeem-feedback {
  margin: 0;
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--rdm-border-strong);
  border-left-width: 3px;
  border-radius: var(--rdm-radius-sm);
  background: var(--rdm-surface);
  color: var(--rdm-text);
  font-size: var(--fs-sm, 0.88rem);
  line-height: var(--lh-base, 1.6);
  /* A long server message must wrap, never widen the panel. */
  overflow-wrap: break-word;
}

.redeem-feedback.is-error {
  border-left-color: var(--rdm-danger);
  background: var(--tint-danger, rgba(255, 45, 45, 0.12));
  color: var(--rdm-danger-soft);
}

.redeem-feedback.is-success {
  border-left-color: var(--rdm-primary);
  background: var(--tint-success, rgba(0, 255, 65, 0.1));
  color: var(--rdm-primary-soft);
  font-family: var(--rdm-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Turnstile slot ------------------------------------------------------ */

.redeem-turnstile[hidden],
.redeem-turnstile-fallback[hidden] {
  display: none !important;
}

/* Turnstile's "flexible" size still has a 300px minimum width, which is wider
   than this panel's content box on the narrowest phones. It scrolls inside its own
   container so it can never push the page sideways. */
.redeem-turnstile {
  display: block;
  min-height: 4.2rem;
  max-width: 100%;
  overflow-x: auto;
}

.redeem-turnstile iframe {
  max-width: 100%;
}

.redeem-turnstile-fallback {
  margin: 0;
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--rdm-border-strong);
  border-left: 3px solid var(--rdm-warning);
  border-radius: var(--rdm-radius-sm);
  background: var(--rdm-surface);
  color: var(--rdm-dim);
  font-size: var(--fs-xs, 0.75rem);
  line-height: var(--lh-base, 1.6);
}

/* ---- actions ------------------------------------------------------------- */

.redeem-actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-2, 0.5rem);
}

/* .acher-btn-* is sized for a dense desktop row; a dialog's primary action needs a
   real tap target. min-height only - padding, colour and type stay main.css's. */
.redeem-actions .acher-btn-primary,
.redeem-actions .acher-btn-ghost {
  min-height: var(--rdm-tap);
}

.redeem-submit {
  flex: 1 1 auto;
}

.redeem-cancel {
  flex: 0 0 auto;
}

/* Under 26rem (416px) the two buttons stop fitting side by side without the labels
   crowding, so they stack - primary first, because it is the action. */
@media (max-width: 26rem) {
  .redeem-actions {
    flex-direction: column;
  }

  .redeem-cancel {
    order: 2;
  }

  .redeem-submit {
    order: 1;
  }
}

/* A very short viewport (a phone in landscape with the keyboard up) must scroll the
   overlay rather than clip the panel. */
@media (max-height: 30rem) {
  .redeem-overlay {
    align-items: flex-start;
  }

  .redeem-panel {
    margin: 0 auto;
    padding: var(--space-4, 1rem);
  }
}

/* ==========================================================================
   4. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .redeem-panel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .redeem-overlay.is-open .redeem-panel {
    transform: none;
  }

  .redeem-close {
    transition: none;
  }
}