/* ====================================================================
   Friends — Logged-out marketing page widget styles
   Tokens come from styles.css (theme-light / theme-dark)
   ==================================================================== */

/* Decorative illustration gradient stops (marketing avatars / network nodes /
   share-cover / trophy). Static in both themes like the practice_history --ph-v*
   cover palette — defined as their own props so the gradients tokenize cleanly
   (the audit strips a single hex right after `--name:`). */
.mv-root {
  --frlo-g-indigo: #7C7CF5; --frlo-g-cyan: #22D3EE; --frlo-g-green: #34D399;
  --frlo-g-teal: #0EA5C5;   --frlo-g-amber: #FBBF24; --frlo-g-pink: #F472B6;
  --frlo-g-purple: #A78BFA; --frlo-g-orange: #FDBA74;
}

/* ---------- Shared activity row ---------- */
.frlo-act-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background .15s, border-color .15s;
}
.frlo-act-row.you {
  background: var(--accent-soft);
  border-color: rgba(85, 88, 224, 0.20);
}
.theme-dark .frlo-act-row.you {
  border-color: rgba(124, 124, 245, 0.30);
}

.frlo-act-ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--frlo-g-indigo), var(--frlo-g-cyan));
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
.frlo-act-ava.sm {
  width: 24px; height: 24px;
  font-size: 10px;
  border-width: 1.5px;
}
.frlo-act-ava.t-done     { background: linear-gradient(135deg, var(--frlo-g-green), var(--frlo-g-teal)); }
.frlo-act-ava.t-practice { background: linear-gradient(135deg, var(--frlo-g-amber), var(--frlo-g-pink)); }
.frlo-act-ava.t-started  { background: linear-gradient(135deg, var(--frlo-g-purple), var(--frlo-g-indigo)); }

.frlo-act-body { flex: 1; min-width: 0; }
.frlo-act-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-2);
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.frlo-act-line strong {
  color: var(--text-1);
  font-weight: 600;
}
.frlo-act-act { color: var(--text-2); }
.frlo-act-ref {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}
.frlo-act-when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

.frlo-act-pip {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.frlo-act-pip.t-done     { background: var(--success-soft); color: var(--success); }
.frlo-act-pip.t-practice { background: var(--warning-soft); color: var(--warning); }
.frlo-act-pip.t-started  { background: var(--accent-soft);  color: var(--accent); }

/* ====================================================================
   1. HERO — Activity Feed Card
   ==================================================================== */
.frlo-feed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  position: relative;
}
.frlo-feed-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.frlo-feed-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.frlo-feed-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
  animation: frlo-pulse 1.8s ease-in-out infinite;
}
@keyframes frlo-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.75; }
}
.frlo-feed-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.frlo-feed-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.frlo-feed-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-3);
}
.frlo-feed-foot-l {
  display: inline-flex; align-items: center; gap: 8px;
}
.frlo-feed-foot-r {
  color: var(--accent);
  font-weight: 500;
}
.frlo-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 2px var(--success-soft);
}

/* ====================================================================
   2. SHARED COLLECTIONS — Card
   ==================================================================== */
.frlo-shared-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}

.frlo-shared-notif {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(85, 88, 224, 0.20);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
  position: relative;
}
.theme-dark .frlo-shared-notif { border-color: rgba(124, 124, 245, 0.30); }
.frlo-shared-badge {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.frlo-shared-coll {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.frlo-shared-cover {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--frlo-g-orange), var(--frlo-g-pink));
  color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(244,114,182,0.45);
}
.frlo-shared-coll-info { flex: 1; min-width: 0; }
.frlo-shared-coll-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.frlo-shared-coll-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  color: var(--text-3);
}
.frlo-shared-by { color: var(--text-2); font-weight: 500; }
.frlo-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
}
.frlo-shared-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.frlo-shared-verses {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--sp-4);
}
.frlo-vchip {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--text-2);
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.frlo-vchip.more {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--text-3);
  font-size: 11px;
}

.frlo-import-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  border: 0;
  background: var(--accent);
  color: white;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: filter .15s;
}
.frlo-import-btn:hover { filter: brightness(1.08); }
.frlo-import-btn svg { transform: rotate(90deg); }

.frlo-shared-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-3);
  display: flex; align-items: center; justify-content: space-between;
}

/* ====================================================================
   3. ENCOURAGEMENT — Card
   ==================================================================== */
.frlo-enc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.frlo-enc-post {
  display: flex; gap: var(--sp-3);
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.frlo-enc-post-body { flex: 1; min-width: 0; }
.frlo-enc-line {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px;
  color: var(--text-2);
  flex-wrap: wrap;
}
.frlo-enc-line strong { color: var(--text-1); font-weight: 600; }
.frlo-enc-verse {
  margin-top: var(--sp-3);
  padding: 10px 12px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--text-1);
  line-height: 1.45;
}
.frlo-enc-react {
  display: flex; gap: 8px;
  margin-top: var(--sp-3);
}
.frlo-react-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s;
}
.frlo-react-btn:hover { color: var(--text-2); border-color: var(--border-strong); }
.frlo-react-btn.liked {
  color: var(--danger);
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.20);
}
.theme-dark .frlo-react-btn.liked {
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.25);
  color: var(--danger);
}
.frlo-heart {
  font-size: 13px;
  line-height: 1;
}

.frlo-enc-replies {
  margin-top: var(--sp-4);
  padding-left: var(--sp-6);
  border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.frlo-enc-reply {
  display: flex; gap: 10px;
  align-items: flex-start;
}
.frlo-enc-reply > div:last-child { flex: 1; min-width: 0; }
.frlo-enc-reply-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 2px;
}
.frlo-enc-reply-line strong { color: var(--text-1); font-weight: 600; }
.frlo-enc-reply-when {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.frlo-enc-reply-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}
.frlo-enc-reply-text.typing {
  color: var(--text-3);
  font-style: italic;
  display: inline-flex; align-items: center; gap: 8px;
}
.frlo-typing {
  display: inline-flex; align-items: center; gap: 3px;
}
.frlo-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: frlo-typing 1.4s ease-in-out infinite;
}
.frlo-typing span:nth-child(2) { animation-delay: 0.2s; }
.frlo-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes frlo-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* ====================================================================
   4. CHALLENGES — Card
   ==================================================================== */
.frlo-chal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.frlo-chal-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--sp-5);
}
.frlo-chal-trophy {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--frlo-g-amber), var(--frlo-g-pink));
  color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(244,114,182,0.40);
}
.frlo-chal-name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.frlo-chal-sub {
  font-size: 12px;
  color: var(--text-3);
}
.frlo-chal-active {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--success-soft);
  color: var(--success);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.frlo-chal-progress-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.frlo-chal-day {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.frlo-chal-day strong {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 2px;
}
.frlo-chal-pct {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.frlo-chal-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.frlo-chal-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--brand));
  border-radius: var(--radius-pill);
}

.frlo-chal-board {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}
.frlo-chal-board-h {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.frlo-chal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-1);
}
.frlo-chal-row + .frlo-chal-row { border-top: 1px solid var(--border); }
.frlo-chal-rank {
  width: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-align: center;
}
.frlo-chal-row.gold .frlo-chal-rank { color: var(--warning); }
.frlo-chal-row.silver .frlo-chal-rank { color: var(--text-3); }
.theme-dark .frlo-chal-row.silver .frlo-chal-rank { color: var(--text-2); }
.frlo-chal-row-name {
  flex: 1; min-width: 0;
  font-weight: 500;
}
.frlo-chal-row-medal {
  color: var(--warning);
  display: inline-flex;
}
.frlo-chal-row-v {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
}

/* ====================================================================
   5. FIND FRIENDS — Network Card
   ==================================================================== */
.frlo-net-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.frlo-net-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.frlo-net-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}
.frlo-net-title svg { color: var(--accent); }
.frlo-net-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}

.frlo-net-stage {
  position: relative;
  width: 100%;
  height: 260px;
  background:
    radial-gradient(circle at center, var(--accent-soft) 0%, transparent 55%),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
.frlo-net-you {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--frlo-g-indigo), var(--frlo-g-cyan));
  color: white;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 3px var(--accent), 0 8px 24px -8px rgba(85,88,224,0.50);
  z-index: 3;
}
.frlo-net-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 130px; height: 130px;
  border-radius: 50%;
  border: 1px dashed var(--border-strong);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.frlo-net-orbit.outer {
  width: 220px; height: 220px;
  opacity: 0.55;
}

.frlo-net-node {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--surface);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.25);
  z-index: 2;
}
.frlo-net-node.t-done     { background: linear-gradient(135deg, var(--frlo-g-green), var(--frlo-g-teal)); }
.frlo-net-node.t-practice { background: linear-gradient(135deg, var(--frlo-g-amber), var(--frlo-g-pink)); }
.frlo-net-node.t-started  { background: linear-gradient(135deg, var(--frlo-g-purple), var(--frlo-g-indigo)); }
/* Inner ring (4 nodes) */
.frlo-net-node.n1 { top: calc(50% - 84px); left: 50%; transform: translateX(-50%); }
.frlo-net-node.n2 { top: 50%; left: calc(50% + 65px); transform: translateY(-50%); }
.frlo-net-node.n3 { top: calc(50% + 65px); left: 50%; transform: translateX(-50%); }
.frlo-net-node.n4 { top: 50%; left: calc(50% - 84px); transform: translateY(-50%); }
/* Outer ring (4 nodes), smaller */
.frlo-net-node.n5,
.frlo-net-node.n6,
.frlo-net-node.n7,
.frlo-net-node.n8 {
  width: 30px; height: 30px;
  font-size: 11px;
  opacity: 0.95;
}
.frlo-net-node.n5 { top: calc(50% - 88px); left: calc(50% + 88px); }
.frlo-net-node.n6 { top: calc(50% + 88px); left: calc(50% + 88px); }
.frlo-net-node.n7 { top: calc(50% + 88px); left: calc(50% - 118px); }
.frlo-net-node.n8 { top: calc(50% - 88px); left: calc(50% - 118px); }

.frlo-net-options {
  display: flex; flex-direction: column; gap: 8px;
}
.frlo-net-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.frlo-net-opt-ic {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.frlo-net-opt-t {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 1px;
}
.frlo-net-opt-d {
  font-size: 11.5px;
  color: var(--text-3);
}

/* ====================================================================
   Quick-stats strip + final CTA (yv-* — defined here; not in any live css)
   ==================================================================== */
.mv-root .yv-quickstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: var(--sp-10);
}
.mv-root .yv-qs { padding: 0 var(--sp-4); }
.mv-root .yv-qs:not(:last-child) { border-right: 1px solid var(--border); }
.mv-root .yv-qs-v {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-1);
  line-height: 1.05;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.mv-root .yv-qs-v .pl { font-size: 20px; color: var(--accent); }
.mv-root .yv-qs-l { font-size: 13px; color: var(--text-3); margin-top: 4px; }

.mv-root .yv-final-cta {
  text-align: center;
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-16) var(--sp-10);
  box-shadow: var(--shadow-card);
  margin: var(--sp-12) 0;
}
.mv-root .yv-final-cta h2 {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-1);
}
.mv-root .yv-final-cta h2 em { font-style: italic; font-weight: 500; color: var(--accent); }
.mv-root .yv-final-cta p { font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 520px; margin: var(--sp-4) auto 0; }
.mv-root .yv-final-cta-row { display: flex; justify-content: center; gap: 12px; margin-top: var(--sp-8); flex-wrap: wrap; }

@media (max-width: 760px) {
  /* collapse the shared two-column .split hero so it doesn't scroll sideways on phones */
  .mv-root .split, .mv-root .split.reverse { grid-template-columns: 1fr; }
  .mv-root .split.reverse > :first-child { order: 0; }
  .mv-root .yv-quickstats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
  .mv-root .yv-qs:nth-child(2) { border-right: 0; }
  .mv-root .yv-final-cta { padding: var(--sp-12) var(--sp-5); }
  .mv-root .yv-final-cta h2 { font-size: 34px; }
}