/*!
 * Udaan, © 2026 Shoolini University. All rights reserved.
 * Designed & built in-house by Divya Mohan · AI Product Developer · Shoolini Online.
 * Portfolio https://dmj.one/work/ · Proprietary & confidential, see /COPYRIGHT.
 * SPDX-License-Identifier: LicenseRef-Shoolini-Proprietary
 */
/* ============================================================
   Udaan, relevance styles, the MONEY/WHY surfaces.

   Aesthetic: a "boarding pass to a real career". The ribbon reads
   like a destination ticket, the pay is a struck gold seal (the
   one thing the eye lands on), the rise narrative is a climbing
   runway gauge. Reuses the app's :root tokens so it inherits both
   light and dark themes for free. No fonts, no colours invented
   outside the existing palette. Honours prefers-reduced-motion.
   ============================================================ */

/* ---- the MONEY ribbon (boarding-pass destination ticket) ---- */
.rel-ribbon {
  position: relative;
  margin: 18px 0;
  padding: 18px 20px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg, 16px);
  background:
    radial-gradient(120% 80% at 100% 0%, var(--accent-soft) 0%, transparent 55%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* the perforated stub edge of a boarding pass, left rail */
.rel-ribbon::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(var(--accent), var(--accent-warm));
}
/* a faint ticket-notch on the right, pure decoration */
.rel-ribbon::after {
  content: "";
  position: absolute;
  right: -9px; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-2);
}

.rel-dest {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.rel-dest-eyebrow {
  flex-basis: 100%;
  font: 600 11px/1.3 'Inter', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rel-dest-role {
  font: 600 14px/1.3 'Inter', system-ui, sans-serif;
  color: var(--ink-soft);
}
/* the struck gold seal, the single number the eye should catch */
.rel-dest-pay {
  margin-left: auto;
  font: 800 22px/1 'Space Grotesk', system-ui, sans-serif;
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
  white-space: nowrap;
}

.rel-framing {
  margin: 6px 0 12px;
  font: 400 14px/1.55 'Inter', system-ui, sans-serif;
  color: var(--ink);
}

.rel-co-head {
  font: 600 11px/1.3 'Inter', system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.rel-co-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rel-co {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  background: var(--bg);
  min-width: 0;
}
.rel-co-name {
  font: 700 13px/1.2 'Space Grotesk', system-ui, sans-serif;
  color: var(--ink);
}
.rel-co-role {
  font: 400 11px/1.3 'Inter', system-ui, sans-serif;
  color: var(--ink-soft);
}
.rel-co-pay {
  font: 700 12px/1.3 'Inter', system-ui, sans-serif;
  color: var(--ok);
}
/* the source line, present but quiet, this is provenance not decoration */
.rel-co-src {
  font: 400 10px/1.3 'Inter', system-ui, sans-serif;
  color: var(--ink-faint);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rel-rounds {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rel-round {
  position: relative;
  padding-left: 18px;
  font: 400 12.5px/1.45 'Inter', system-ui, sans-serif;
  color: var(--ink-soft);
}
.rel-round::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.rel-note {
  margin: 4px 0 8px;
  font: 400 12.5px/1.5 'Inter', system-ui, sans-serif;
  color: var(--ink-soft);
}
/* the provenance line is the load-bearing honesty element, so it uses
   --ink-soft (clears WCAG AA 4.5:1) rather than the fainter --ink-faint the
   app uses elsewhere for purely decorative small text. */
.rel-src {
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font: 400 11px/1.45 'Inter', system-ui, sans-serif;
  color: var(--ink-soft);
}

/* ---- the RISE narrative (climbing runway gauge) ---- */
.rel-rise {
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  background:
    linear-gradient(0deg, var(--accent-soft) 0%, transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}
.rel-rise-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 12px;
}
.rel-rise-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.rel-rise-line {
  margin: 0 0 6px;
  font: 500 14.5px/1.5 'Inter', system-ui, sans-serif;
  color: var(--ink);
}
.rel-rise-goal {
  margin: 0;
  font: 400 12.5px/1.5 'Inter', system-ui, sans-serif;
  color: var(--ink-soft);
}
.rel-rise-goal strong { color: var(--accent); font-weight: 800; }

/* ---- STORIES (honest invitation + real cards) ---- */
.rel-stories { margin: 18px 0; }
.rel-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.rel-story {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.rel-story-q {
  margin: 0 0 12px;
  font: 400 15px/1.55 'Inter', system-ui, sans-serif;
  color: var(--ink);
  position: relative;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
}
.rel-story-by { display: flex; flex-direction: column; gap: 2px; }
.rel-story-who {
  font: 700 13px/1.3 'Space Grotesk', system-ui, sans-serif;
  color: var(--ink);
}
.rel-story-at {
  font: 400 12px/1.3 'Inter', system-ui, sans-serif;
  color: var(--ink-soft);
}
.rel-stories-foot {
  margin: 12px 0 0;
  font: 400 11px/1.4 'Inter', system-ui, sans-serif;
  color: var(--ink-faint);
}

/* the honest empty / invitation state */
.rel-stories-empty .rel-invite {
  text-align: center;
  padding: 28px 22px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg, 16px);
  background:
    radial-gradient(80% 120% at 50% 0%, var(--accent-soft) 0%, transparent 60%),
    var(--surface);
}
.rel-invite-mark {
  font-size: 30px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}
.rel-invite-h {
  margin: 0 0 8px;
  font: 800 22px/1.2 'Space Grotesk', system-ui, sans-serif;
  color: var(--ink);
}
.rel-invite-p {
  margin: 0 auto;
  max-width: 56ch;
  font: 400 14px/1.6 'Inter', system-ui, sans-serif;
  color: var(--ink-soft);
}

/* ---- responsive ---- */
@media (max-width: 560px) {
  .rel-dest-pay { margin-left: 0; flex-basis: 100%; text-align: center; }
  .rel-co-src { max-width: 100%; white-space: normal; }
}

/* ---- accessibility: reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .rel-rise-fill { transition: none; }
}