/* Journey Cards tab on the dashboard (js/journey-cards/dashboard-tab.js). */

.jc-tab { display: flex; flex-direction: column; gap: 2rem; padding: 0.5rem 0 1rem; }

.jc-tab-head { text-align: center; }
.jc-tab-eyebrow {
  font-size: 0.8rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: #6699cc; font-weight: 700; margin-bottom: 0.35rem;
}
.jc-tab-title { margin: 0; font-size: clamp(1.4rem, 3.6vw, 2.1rem); line-height: 1.2; }
.jc-num { color: #e9c46a; }
.jc-tab-sub { margin: 0.5rem 0 0; color: var(--wn-text-muted, rgba(255,255,255,0.7)); }

/* Opens the progress pop-up; styled like the homepage breadcrumb pill that opens the TOC */
.jc-progress-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 0.9rem;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(102, 153, 204, 0.6);
}
.jc-progress-pill:hover { background: rgba(102, 153, 204, 0.2); border-color: #6699cc; }

/* Draw call-to-action */
.jc-draw {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.25rem 1.5rem; border-radius: 12px;
  background: linear-gradient(135deg, rgba(233,196,106,0.10), rgba(102,153,204,0.08));
  border: 1px solid rgba(233,196,106,0.35);
}
.jc-draw-card { display: flex; flex-shrink: 0; }
.jc-draw-card svg {
  width: 54px; height: 80px; padding: 8px 4px; box-sizing: border-box;
  background: #0b1430; border: 1px solid rgba(233,196,106,0.6); border-radius: 8px;
}
.jc-draw-card svg + svg { margin-left: -22px; transform: rotate(6deg) translateY(4px); }
.jc-draw-card svg:first-child { transform: rotate(-6deg) translateY(4px); }
.jc-draw-text p { margin: 0 0 0.75rem; }
.jc-tab-btn {
  display: inline-block; padding: 0.55rem 1.2rem; border-radius: 999px;
  border: 1px solid rgba(233,196,106,0.6); background: rgba(233,196,106,0.08);
  color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.jc-tab-btn.primary { background: #e9c46a; color: #1a1406; border-color: #e9c46a; }
.jc-tab-btn:disabled { opacity: 0.55; cursor: default; }
.jc-tab-btn:not(:disabled):hover { filter: brightness(1.08); }

/* Section headings */
.jc-tab-h3 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 0.75rem; font-size: 1.15rem;
}
.jc-tab-h3-note { font-size: 0.9rem; font-weight: 400; color: var(--wn-text-muted, rgba(255,255,255,0.7)); }

/* Element mix */
.jc-elements { display: grid; gap: 0.45rem; }
.jc-el-row { display: grid; grid-template-columns: 7.5rem 1fr 3rem; align-items: center; gap: 0.75rem; }
.jc-el-name { white-space: nowrap; }
.jc-el-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.jc-el-bar span { display: block; height: 100%; border-radius: 999px; }
.jc-el-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--wn-text-muted, rgba(255,255,255,0.7)); }

/* Friends collection */
.jc-friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.75rem; }
.jc-friend {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 0.6rem 0.4rem; border-radius: 10px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
a.jc-friend:hover { border-color: rgba(233,196,106,0.6); background: rgba(233,196,106,0.06); }
.jc-friend img { width: 100%; max-width: 76px; aspect-ratio: 1; object-fit: contain; }
.jc-friend-name { font-size: 0.8rem; text-align: center; line-height: 1.2; }
.jc-friend-count {
  position: absolute; top: 6px; right: 6px; font-size: 0.7rem; padding: 1px 6px; border-radius: 999px;
  background: rgba(233,196,106,0.9); color: #1a1406; font-weight: 700;
}
/* Not met yet: a dark silhouette */
.jc-friend.unmet img { filter: brightness(0) invert(0.25); opacity: 0.55; }
.jc-friend.unmet .jc-friend-name { color: rgba(255,255,255,0.35); }

/* Progress table (look from /css/toc-table.css) */
.jc-progress-hint { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-left: auto; }
.jc-scn-row td { background: rgba(102,153,204,0.06); }
.jc-caret { display: inline-block; width: 1em; color: #6699cc; }
.jc-scn-status { margin-left: 0.75rem; color: rgba(255,255,255,0.65); display: inline-flex; align-items: center; gap: 4px; }
.jc-resume { margin-left: 0.75rem; color: #6699cc; }
.jc-resume:hover, .jc-friend-link:hover { color: #fff; }
.jc-friend-link { color: #e9c46a; text-decoration: none; }

@media (max-width: 600px) {
  .jc-draw { flex-direction: column; text-align: center; }
  .jc-el-row { grid-template-columns: 6.5rem 1fr 2.5rem; }
  .jc-friends { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .jc-progress-hint { display: none; }
}

.jc-preview-note { display: inline-block; margin-left: 0.75rem; font-size: 0.8rem; color: rgba(255,255,255,0.5); }

/* The draw overlay (content: /css/journey-cards-draw.css) */
body.jc-draw-open { overflow: hidden; }
.jc-draw-overlay {
  position: fixed; inset: 0; z-index: 9600; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 20%, #13204a 0%, #050a1a 70%);
  padding: 3.5rem 1rem 2rem;
}
.jc-draw-inner { max-width: 980px; margin: 0 auto; }
.jc-draw-close {
  position: fixed; top: 14px; right: 18px; z-index: 1;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3); border-radius: 50%;
  width: 40px; height: 40px; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.jc-draw-close:hover { border-color: #e9c46a; color: #e9c46a; }
.jc-draw-status {
  text-align: center; margin-top: 18vh; font-size: 1.25rem; color: #e9c46a;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
}

/* "Your Journey Cards" shelf: one row per purchased set */
.jc-shelf { display: grid; gap: 0.6rem; }
.jc-shelf-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: 0.8rem 1rem; border-radius: 10px; cursor: pointer; text-align: left;
  font: inherit; color: #fff; background: rgba(233, 196, 106, 0.06); border: 1px solid rgba(233, 196, 106, 0.3);
}
.jc-shelf-item:hover { border-color: #e9c46a; background: rgba(233, 196, 106, 0.12); }
.jc-shelf-date { font-size: 0.85rem; color: rgba(255,255,255,0.6); white-space: nowrap; }
.jc-shelf-names { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; }
.jc-shelf-kind { font-size: 0.8rem; color: #e9c46a; white-space: nowrap; }

/* Checkout step over the revealed cards */
.jc-paywall {
  /* above the sticky unlock bar (z 3) and everything else in the draw overlay */
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(5, 10, 26, 0.72);
}
.jc-paywall-card {
  max-height: 92vh; overflow-y: auto;
  max-width: 520px; width: 100%; padding: 1.6rem 1.6rem 1.2rem; border-radius: 16px; text-align: center;
  background: linear-gradient(175deg, #182544, #0e1830); border: 1px solid rgba(233, 196, 106, 0.55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.jc-paywall-card h3 { margin: 0.2rem 0 0.9rem; font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; }
.jc-paywall-card ul { text-align: left; margin: 0 0 1.2rem; padding-left: 1.2rem; color: rgba(255,255,255,0.85); line-height: 1.5; }
.jc-paywall-card .jc-tab-btn { width: 100%; padding: 0.75rem 1rem; font-size: 1.05rem; }
.jc-link-btn { display: block; margin: 0.6rem auto 0; background: none; border: none; color: rgba(255,255,255,0.6); font: inherit; cursor: pointer; }
.jc-link-btn:hover { color: #fff; }
.jc-paywall-fine { margin: 0.9rem 0 0; font-size: 0.75rem; color: rgba(255,255,255,0.45); }
.jc-paywall-msg { margin: 0.6rem 0 0; color: #ffb4a8; font-size: 0.9rem; }

@media (max-width: 600px) {
  .jc-shelf-item { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* Friends peeking up from behind the checkout card (same peek-in as the questions in draw.js) */
.jc-paywall-stack { position: relative; max-width: 520px; width: 100%; padding-top: 70px; }
.jc-paywall-stack .jc-paywall-card { position: relative; z-index: 1; }
.jc-paywall-peek {
  position: absolute; top: 0; height: 110px; width: auto; z-index: 0;
  animation: jc-paywall-peek-in 0.7s cubic-bezier(.2,.8,.3,1.2) both;
}
.jc-paywall-peek.right { right: 36px; transform: rotate(8deg); animation-delay: 0.15s; }
.jc-paywall-peek.left { left: 36px; transform: rotate(-8deg); animation-delay: 0.45s; }
@keyframes jc-paywall-peek-in { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 600px) { .jc-paywall-peek { height: 88px; } }

.jc-sealed {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 1rem; padding: 6px 14px; border-radius: 999px;
  font-size: 0.9rem; color: #e9c46a; background: rgba(233,196,106,0.1); border: 1px dashed rgba(233,196,106,0.6);
}
.jc-sealed-icon { animation: jc-sealed-wobble 2.8s ease-in-out infinite; display: inline-block; }
@keyframes jc-sealed-wobble { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
.jc-support { margin: 0 0 0.9rem; font-size: 0.9rem; color: rgba(255,255,255,0.75); }
.jc-owned-line { margin: 0 0 0.9rem; padding: 0.6rem 0.8rem; border-radius: 10px; font-size: 0.9rem; color: #f3ead2;
  background: rgba(233,196,106,0.1); border: 1px solid rgba(233,196,106,0.35); }
.jc-owned-line .jc-link-btn { display: inline; margin: 0 0 0 4px; color: #e9c46a; text-decoration: underline; padding: 0; }