/* ============================================================
   RANGELIGHT — Component styles
   Styling for the reusable primitives. Shipped via styles.css so
   both the bundled React components and plain-HTML usages share one
   source of truth. Warm at rest; teal glow ONLY on interaction.
   ============================================================ */

/* ---- Button ---- */
.rl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--rl-font-display);font-weight:600;font-size:16px;line-height:1;
  padding:14px 26px;border:1.5px solid transparent;border-radius:var(--rl-radius);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:box-shadow .3s var(--rl-ease),filter .3s var(--rl-ease),
             transform .18s var(--rl-ease),border-color .3s var(--rl-ease),
             background .3s var(--rl-ease),color .3s var(--rl-ease);
}
.rl-btn:focus-visible{outline:none;box-shadow:var(--rl-glow-teal)}
.rl-btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.rl-btn:active{transform:translateY(1px)}
.rl-btn--sm{padding:9px 16px;font-size:14px}
.rl-btn--lg{padding:17px 34px;font-size:18px}
.rl-btn--primary{background:var(--rl-grad-warm);color:var(--rl-amber-ink)}
.rl-btn--primary:hover{box-shadow:var(--rl-glow-teal);filter:brightness(1.05)}
.rl-btn--secondary{background:transparent;color:var(--rl-bone);border-color:rgba(245,165,35,.40)}
.rl-btn--secondary:hover{border-color:rgba(111,196,210,.6);box-shadow:var(--rl-glow-teal-sm)}
.rl-btn--ghost{background:transparent;color:var(--rl-dim)}
.rl-btn--ghost:hover{color:var(--rl-bone);background:var(--rl-smoke-3)}
.rl-btn__icon{display:inline-flex;width:1.1em;height:1.1em}
.rl-btn__icon svg{width:100%;height:100%}

/* ---- CitationChip ---- */
.rl-citechip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--rl-font-mono);font-size:13px;line-height:1;
  color:var(--rl-amber);background:var(--surface-cite);
  border:1px solid rgba(245,165,35,.27);border-radius:var(--rl-radius-pill);
  padding:6px 13px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:box-shadow .3s var(--rl-ease),border-color .3s var(--rl-ease),
             color .3s var(--rl-ease),background .3s var(--rl-ease);
}
.rl-citechip:hover,.rl-citechip:focus-visible{
  outline:none;color:var(--rl-amber-soft);
  border-color:rgba(111,196,210,.55);box-shadow:var(--rl-glow-teal);
}
.rl-citechip__d{color:var(--rl-amber);font-size:9px;transform:translateY(.5px)}
.rl-citechip:hover .rl-citechip__d{color:var(--rl-teal-lite)}
.rl-citechip--ghost{background:transparent;border-color:var(--rl-line-2)}
.rl-citechip__src{color:var(--rl-faint);font-size:11px}

/* ---- Badge ---- */
.rl-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--rl-font-display);font-weight:600;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  line-height:1;padding:5px 10px;border-radius:var(--rl-radius-pill);
  border:1px solid transparent;
}
.rl-badge__dot{width:6px;height:6px;border-radius:50%}
.rl-badge--neutral{color:var(--rl-dim);background:var(--rl-smoke-3);border-color:var(--rl-line-2)}
.rl-badge--warm{color:var(--rl-amber);background:rgba(245,165,35,.08);border-color:rgba(245,165,35,.3)}
.rl-badge--success{color:#9CC399;background:rgba(111,163,107,.1);border-color:rgba(111,163,107,.32)}
.rl-badge--warning{color:var(--rl-warning);background:rgba(232,163,60,.1);border-color:rgba(232,163,60,.32)}
.rl-badge--danger{color:#E0917A;background:rgba(201,96,63,.12);border-color:rgba(201,96,63,.34)}

/* ---- Card ---- */
.rl-card{
  position:relative;background:var(--surface-raised);
  border:1px solid var(--border);border-radius:var(--rl-radius-lg);
  padding:var(--rl-space-6);box-shadow:var(--rl-shadow);
  transition:box-shadow .3s var(--rl-ease),border-color .3s var(--rl-ease),transform .3s var(--rl-ease);
}
.rl-card--interactive{cursor:pointer}
.rl-card--interactive:hover{border-color:rgba(245,165,35,.3);box-shadow:var(--rl-shadow-lg)}
.rl-card--interactive:focus-visible{outline:none;box-shadow:var(--rl-glow-teal)}
.rl-card--lit::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  border-radius:var(--rl-radius-lg) var(--rl-radius-lg) 0 0;
  background:var(--rl-grad-warm);opacity:.8}

/* ---- Input / field ---- */
.rl-field{display:flex;flex-direction:column;gap:8px}
.rl-field__label{font-family:var(--rl-font-body);font-size:14px;font-weight:600;color:var(--rl-bone)}
.rl-field__hint{font-family:var(--rl-font-body);font-size:13px;color:var(--rl-faint)}
.rl-input{
  font-family:var(--rl-font-body);font-size:16px;color:var(--rl-bone);
  background:var(--rl-smoke-2);border:1.5px solid var(--rl-line-2);
  border-radius:var(--rl-radius);padding:14px 16px;width:100%;
  box-sizing:border-box;min-height:52px;
  transition:border-color .3s var(--rl-ease),box-shadow .3s var(--rl-ease),background .3s var(--rl-ease);
}
.rl-input::placeholder{color:var(--rl-faint)}
.rl-input:hover{border-color:rgba(245,165,35,.4)}
.rl-input:focus,.rl-input:focus-visible{
  outline:none;border-color:rgba(111,196,210,.6);
  box-shadow:var(--rl-glow-teal);background:var(--rl-smoke-3);
}
.rl-input[aria-invalid="true"]{border-color:var(--rl-danger)}
.rl-input[disabled]{opacity:.5;cursor:not-allowed}

/* ---- EmailCapture ---- */
.rl-capture{display:flex;flex-direction:column;gap:14px;max-width:480px}
.rl-capture__row{display:flex;gap:10px;align-items:stretch}
.rl-capture__row .rl-input{min-width:0}
.rl-capture__row .rl-btn{flex:none}
.rl-capture__note{font-family:var(--rl-font-body);font-size:13px;color:var(--rl-faint);line-height:1.5;margin:0}
.rl-capture__ok{display:flex;gap:12px;align-items:flex-start;
  background:rgba(245,165,35,.06);border:1px solid rgba(245,165,35,.28);
  border-radius:var(--rl-radius);padding:16px 18px}
.rl-capture__ok .d{color:var(--rl-amber);font-size:13px;font-family:var(--rl-font-mono);margin-top:2px}
.rl-capture__ok h4{font-family:var(--rl-font-display);font-weight:600;font-size:16px;color:var(--rl-bone);margin:0 0 4px}
.rl-capture__ok p{font-family:var(--rl-font-body);font-size:14px;color:var(--rl-dim);margin:0;line-height:1.5;max-width:none}
@media (max-width:520px){.rl-capture__row{flex-direction:column}}

/* ---- Logo lockup ---- */
.rl-lockup{display:inline-flex;align-items:center;gap:.42em;line-height:1}
.rl-lockup__glyph{display:block;width:auto;object-fit:contain;filter:drop-shadow(0 0 10px rgba(245,165,35,.25))}
.rl-lockup__word{font-family:var(--rl-font-logo);font-weight:300;
  letter-spacing:.30em;text-transform:uppercase;color:var(--rl-bone);padding-left:.08em}