/* ============================================================
   SPARK JOBS - Phone (uses the REAL app screenshot + live swipe)
   The screenshot supplies the exact chrome (status bar, header,
   search, filters, buttons, nav). A real interactive swipe deck
   is layered precisely over the job-card region.
   ============================================================ */

/* ---------- Device ---------- */
.device{
  position:relative;width:min(332px,82vw);padding:11px;border-radius:46px;
  background:linear-gradient(150deg,#2a3730,#0a1611 55%,#161f19);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.05),
    inset 0 2px 4px rgba(255,255,255,.12),
    0 2px 6px rgba(0,0,0,.4),
    0 46px 84px -24px rgba(6,42,24,.55),
    0 20px 40px -18px rgba(6,42,24,.4);
}
.device::before{content:"";position:absolute;left:-3px;top:150px;width:3px;height:70px;border-radius:2px;background:#1a2620}
.device::after{content:"";position:absolute;right:-3px;top:128px;width:3px;height:44px;border-radius:2px;background:#1a2620}
.device__screen{
  position:relative;width:100%;aspect-ratio:1080/2197;border-radius:38px;overflow:hidden;
  background:#ECEEEA;
}
/* The real app screenshot */
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;user-select:none;-webkit-user-drag:none}

/* ---------- Swipe deck overlaid on the card region (stops ABOVE the app's Skip/Back/Interested buttons) ---------- */
.shot-deck{position:absolute;left:3.5%;right:3.5%;top:28.5%;bottom:22.5%;z-index:2}
.shot-deck.is-empty .deck__empty{opacity:1;pointer-events:auto}
.deck__empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;padding:18px;opacity:0;transition:opacity .35s;pointer-events:none;
  background:#fff;border-radius:22px;box-shadow:0 12px 26px rgba(15,45,28,.2)}
.deck__empty .big{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--green-400),var(--amber-500));display:grid;place-items:center;color:#fff}
.deck__empty .big svg{width:28px;height:28px}
.deck__empty h4{font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:1rem;color:var(--navy)}
.deck__empty p{font-family:'Poppins',system-ui,sans-serif;font-size:.76rem;color:var(--slate-500);max-width:22ch}
.deck__reset{font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:.78rem;color:#fff;background:var(--green-500);padding:.5em 1.2em;border-radius:var(--r-pill)}

.jobcard{
  position:absolute;inset:0;background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 16px 34px -12px rgba(15,45,28,.32),0 4px 12px rgba(15,45,28,.12);
  display:flex;flex-direction:column;transform-origin:center center;
  font-family:'Poppins',system-ui,sans-serif;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;
}
.jobcard.is-dragging{cursor:grabbing}
.jobcard:not(.is-dragging){transition:transform .5s var(--ease-spring),opacity .4s}
.jobcard__img{position:relative;height:40%;min-height:78px;background-size:cover;background-position:center;flex:none}
.match{position:absolute;top:9px;right:9px;z-index:3;width:46px;height:46px;border-radius:50%;
  border:4px solid var(--green-bright);background:rgba(14,26,18,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.14) inset}
.match__pct{font-weight:700;font-size:.82rem;line-height:1;letter-spacing:-.02em}
.match__lbl{font-size:.46rem;font-weight:500;opacity:.94}

.jobcard__body{flex:1;padding:9px 11px 9px;display:flex;flex-direction:column;min-height:0}
.jobcard__body > *{flex:none}
.jobcard__top{display:flex;gap:8px;align-items:flex-start}
.jobcard__logo{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.jobcard__title{font-weight:700;font-size:.8rem;line-height:1.1;color:var(--navy);letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jobcard__co{font-size:.66rem;font-weight:600;color:#42506a;margin-top:1px}
.jobcard__meta{display:flex;align-items:center;gap:10px;margin-top:6px}
.jobcard__meta .loc{display:inline-flex;align-items:center;gap:3px;font-size:.66rem;font-weight:500;color:#6b7280}
.jobcard__meta .loc svg{width:11px;height:11px}
.jobcard__meta .pay{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;color:var(--green-600)}
.jobcard__meta .pay .dot{width:5px;height:5px;border-radius:50%;background:var(--green-400)}
.jobcard__tags{margin-top:6px}
.jobcard .tag{font-weight:600;font-size:.62rem;padding:.28em .7em;border-radius:var(--r-pill)}
.jobcard .tag--blue{background:var(--blue-bg);color:var(--blue)}
.jobcard__desc{margin-top:6px;font-size:.64rem;color:var(--slate-500);line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jobcard__stats{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px;
  border-top:1px solid #eef1ed;font-size:.62rem;font-weight:500;color:var(--slate-500)}
.jobcard__stats .rec{color:var(--green-600);font-weight:700}

/* Swipe stamps */
.stamp{position:absolute;top:12px;z-index:4;font-weight:800;font-size:.95rem;letter-spacing:.02em;
  padding:.08em .4em;border-radius:9px;border:3px solid;opacity:0;transition:opacity .06s}
.stamp--like{left:12px;color:var(--green-bright);border-color:var(--green-bright);transform:rotate(-13deg)}
.stamp--nope{right:12px;color:var(--red);border-color:var(--red);transform:rotate(13deg)}

/* Transparent hit targets over the screenshot's Skip / Back / Interested buttons */
.shot-hit{position:absolute;top:79%;height:9%;width:17%;background:transparent;border:none;cursor:pointer;
  border-radius:50%;z-index:4;-webkit-tap-highlight-color:transparent}
.shot-hit:active{background:rgba(0,0,0,.06)}
.shot-hit--skip{left:13.5%}
.shot-hit--back{left:41%}
.shot-hit--like{left:67.5%}

/* Match toast overlay */
.app-toast{position:absolute;left:8%;right:8%;top:70%;z-index:6;
  background:#fff;border-radius:14px;padding:9px 12px;display:flex;align-items:center;gap:9px;
  box-shadow:0 14px 34px -8px rgba(15,45,28,.34);border:1px solid rgba(20,40,28,.06);
  transform:translateY(140%);opacity:0;transition:transform .5s var(--ease-spring),opacity .3s;pointer-events:none;
  font-family:'Poppins',system-ui,sans-serif}
.app-toast.is-show{transform:none;opacity:1}
.app-toast__ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--green-400),var(--green-600))}
.app-toast__ic svg{width:17px;height:17px}
.app-toast b{font-weight:700;font-size:.76rem;color:var(--navy);display:block;line-height:1.1}
.app-toast span{font-size:.64rem;color:var(--slate-500)}

/* Demo cursor for idle auto-swipe */
.demo-cursor{position:absolute;z-index:7;width:22px;height:22px;pointer-events:none;opacity:0;
  transition:opacity .3s;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.demo-cursor.is-show{opacity:1}
.demo-cursor svg{width:100%;height:100%}