/* Dashboard Styles for get-gifted.com — Glass-inspired minimal dark UI */

:root {
  /* Dashboard v5 palette — slate-950 base + warm orange→pink→violet brand gradient.
     Update these tokens together; individual dashboard components reference them.
     New token names (--panel*, --grad, --gold*, --violet*, --text2, --muted, --soft)
     are the canonical set per design_handoff_dashboard/README.md.
     Legacy aliases (--card, --surface, --accent*, --gradient-*, --text-secondary,
     --text-muted, --radius-md/lg/xl, --shadow*, --border-hover, --border-accent)
     are retained so the existing 951-line stylesheet keeps rendering while the
     redesign rolls out in stages. */

  /* Base surfaces (slate-950 family) */
  --bg: #020617;
  --panel: #0f172a;
  --panel2: #111827;
  --panel3: #111a30;
  --panel4: #1e293b;
  --bg-raised: #0b1220;

  /* Borders */
  --border: rgba(148, 163, 184, 0.12);
  --border2: rgba(148, 163, 184, 0.28);

  /* Brand gradient — matches app icon (warm orange → pink → purple) */
  --grad: linear-gradient(135deg, #fbbf24 0%, #fb923c 30%, #ec4899 65%, #a855f7 100%);

  /* Gradient stop colors */
  --gold: #f97316;
  --gold2: #fb923c;
  --goldfade: rgba(249, 115, 22, 0.13);
  --goldfade2: rgba(249, 115, 22, 0.28);
  --violet: #8b5cf6;
  --violet2: #a78bfa;

  /* Text */
  --text: #f9fafb;
  --text2: #cbd5e1;
  --muted: #94a3b8;
  --soft: #64748b;

  /* Status */
  --rescue: #ef4444;
  --status: #4ade80;

  /* Radius */
  --radius: 18px;
  --radius-sm: 10px;

  /* Legacy aliases — still consumed by unmigrated surfaces
     (recommendations/show, btn-auth, product-card, etc). */
  --card: var(--panel);
  --surface: var(--panel2);
  --accent: var(--gold);
  --gradient-primary: var(--grad);
  --gradient-primary-soft: radial-gradient(circle at 20% 0%, #fde68a, #fb923c 40%, #a855f7 100%);
  --gradient-heading: var(--grad);
  --text-secondary: var(--text2);
  --text-muted: var(--muted);
  --border-hover: var(--border2);
  --border-accent: var(--goldfade2);
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-lg: 0 8px 32px rgba(2, 6, 23, 0.7);
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.35);

  /* Import-icon palette (v6 mock) */
  --fb: #4a9eff;
  --fbfade: rgba(74, 158, 255, 0.14);
  --sage: #6db38a;
  --sagefade: rgba(109, 179, 138, 0.14);
}

* { box-sizing: border-box; }

.dashboard-body {
  margin: 0;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at top left, #111827 0, #020617 55%, #000 100%);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Fixed backdrop on larger viewports only — mobile/iOS gets scroll jank
   and partial support with background-attachment: fixed. */
@media (min-width: 900px) and (hover: hover) {
  .dashboard-body { background-attachment: fixed; }
}

button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* ==================== TOP BAR ==================== */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  margin: 0 -24px 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.statusPill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

.statusPill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.85);
  animation: sglow 2.5s ease-in-out infinite;
}

@keyframes sglow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 8px;
}

.brand-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow:
    0 4px 20px rgba(236, 72, 153, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Shared brand-mark image — fills any logo container with rounded corners. */
.brand-mark-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.brand-text { line-height: 1.15; }
.brand-text .name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }
.brand-text .tag { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-top: 1px; }

.tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
  margin-left: 12px;
}

.tab {
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  border: none;
  transition: color 0.15s, background 0.15s;
}

.tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

.tab.active {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  height: 36px;
  min-width: 36px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: border-color 0.15s, color 0.15s;
}

.icon-btn:hover { border-color: var(--border-hover); color: var(--text); }

.avatar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
}

.avatar-btn:hover { border-color: var(--border-hover); }

.avatar-label { display: flex; flex-direction: column; line-height: 1.1; }
.avatar-label .user { font-size: 12px; font-weight: 600; color: var(--text); }
.avatar-label .email { font-size: 11px; color: var(--text-muted); }

.avatar-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-primary-soft);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #020617;
  flex: 0 0 auto;
}

/* Guest auth buttons in header */
.btn-auth {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-auth:hover { border-color: var(--border-hover); color: var(--text); }
.btn-auth.primary {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #020617;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
}
.btn-auth.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .statusPill::before { animation: none; }
}

/* ==================== LAYOUT ==================== */
.top-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  margin-bottom: 24px;
  align-items: stretch;
}

/* When rail is absent (guest), concierge goes full-width */
.top-row:has(> :only-child) {
  grid-template-columns: 1fr;
}

/* Left column: concierge on top and, for first-run users and guests, the
   onboarding/empty-state block beneath it. As a grid item it stretches to the
   rail's height (align-items: stretch on .top-row); the concierge then fills
   the slack so the column bottom-aligns with the rail. */
.leftCol {
  display: flex;
  flex-direction: column;
  gap: 20px;       /* spacing between the concierge and the onboarding block */
  min-width: 0;    /* let flex children shrink instead of overflowing the track */
}

/* The concierge fills the left column so the column bottom-aligns with the rail
   (its chat — flex: 1 1 auto — grows to take up the slack). When an onboarding
   block is present (first-run / guests) it sits at its natural height directly
   beneath the concierge. */
.leftCol > .panel {
  flex: 1 1 auto;
}

/* ==================== CONCIERGE PANEL (v6 orange-tinted feature card) ==================== */
.panel {
  background: linear-gradient(160deg, #16120a 0%, #120e1a 100%);
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.06), 0 8px 40px rgba(249, 115, 22, 0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 20% -10%, rgba(249, 115, 22, 0.09), transparent);
}

.panel > * { position: relative; }

.panelHead { margin-bottom: 14px; }

.panelHead h2 {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.panelHead h2 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.panelSub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

/* ==================== CHAT (flex column, composer pinned inside frame) ==================== */
.chat {
  margin-top: 0;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  max-height: 60vh;
  overflow: hidden;
  flex: 1 1 auto;
}

.chatMessages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
}

.chatMessages::-webkit-scrollbar { width: 5px; }
.chatMessages::-webkit-scrollbar-track { background: transparent; }
.chatMessages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 3px; }

.chatComposer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel2);
  flex-shrink: 0;
}

.chatComposer input {
  flex: 1;
  /* Allow the field to shrink below its ~20-char intrinsic size. Without this,
     min-width:auto keeps the input wide enough to push .sendBtn past the
     overflow:hidden edge of .chat/.panel, clipping the "Ask Gifted" label on
     narrow viewports. */
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  padding: 8px 0;
  font-family: inherit;
}

.chatComposer input::placeholder { color: var(--soft); }

.sendBtn {
  background: var(--grad);
  color: #020617;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  box-shadow: 0 3px 12px rgba(249, 115, 22, 0.3);
  transition: opacity 0.14s;
}

.sendBtn:hover { opacity: 0.9; }
.sendBtn:disabled { opacity: 0.5; cursor: not-allowed; }

.chatGAvatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 2px;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(249, 115, 22, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* The logo image (server-rendered greeting + JS-appended bot messages both use
   .chatGAvatar > img) fills the rounded 30px box edge-to-edge, so there is no
   black gap and every bot avatar matches the greeting. */
.chatGAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.msg {
  display: flex;
  margin: 10px 0;
  gap: 10px;
  align-items: flex-start;
}

.msg.user { justify-content: flex-end; }

.bubble {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: 13px;
  background: var(--panel3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 14px;
  line-height: 1.5;
}

.bubble strong { color: var(--text); }

.msg.user .bubble {
  background: var(--goldfade);
  border-color: var(--goldfade2);
  color: var(--text);
}

.msg.typing .bubble {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
}

.typing-dots { display: inline-flex; gap: 4px; align-items: center; }

.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  animation: dotPulse 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dotPulse {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-3px); opacity: 0.95; }
}

/* R-ENG-06: Pulse nudge strip — proactive, dismissible cards that sit
   above the Quick Start chips and explain themselves before linking
   the user to an action. Each card is intentionally short — heading +
   one-line "why" + CTA — so the strip reads as a glance, not a panel. */
.pulseStrip {
  display: flex; flex-direction: column; gap: 10px;
  margin: 6px 0 14px;
}
.pulseLabel {
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--soft); font-weight: 700; margin: 0 0 2px;
}
.pulseCard {
  position: relative;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(255, 159, 85, 0.08));
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 12px;
  padding: 12px 36px 12px 14px;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.pulseCard.is-dismissed { opacity: 0; transform: translateY(-4px); }
.pulseCard .pulseHead {
  font-weight: 600; font-size: 14px; color: var(--text);
  margin-bottom: 4px;
}
.pulseCard .pulseBody {
  font-size: 12.5px; color: var(--text2); line-height: 1.45;
  margin-bottom: 10px;
}
.pulseCard .pulseCta {
  display: inline-block; padding: 6px 12px;
  background: #8b5cf6; color: #fff; text-decoration: none;
  border-radius: 6px; font-size: 12.5px; font-weight: 600;
}
.pulseCard .pulseCta:hover { background: #7c3aed; }
.pulseCard .pulseDismiss {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 6px;
  background: transparent; border: none;
  color: var(--text2); cursor: pointer; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pulseCard .pulseDismiss:hover {
  background: rgba(139, 92, 246, 0.12); color: var(--text);
}

/* ==================== CHIPS (Quick start strip, above chat, rescue first) ==================== */
/* Micro-label that groups the chip strip under the panel title. */
.qsLabel {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
  margin: 16px 0 9px;
}

/* Sits above the chat now, so no top border/separator — the strip reads as
   grouped under the "Quick start" label, with breathing room before the chat. */
.chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--panel3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.14s;
}

.chip:hover { border-color: var(--goldfade2); color: var(--text); }

.chip .chipIcon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
  background: var(--panel);
}

.chip .cd {
  font-size: 11px;
  font-feature-settings: "tnum" 1;
  margin-left: 2px;
  color: var(--muted);
}

.chip .cd.soon {
  color: var(--rescue);
  font-weight: 700;
}

.chipRescue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #fca5a5;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.14s;
}

.chipRescue:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
}

.hint {
  font-size: 12px;
  color: var(--soft);
  margin-top: 11px;
  line-height: 1.5;
}

/* ==================== PRODUCT RECOMMENDATION CARDS ==================== */
.product-recs {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.product-recs::-webkit-scrollbar { height: 6px; }
.product-recs::-webkit-scrollbar-track { background: transparent; }
.product-recs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }

/* FTC affiliate disclosure shown above chat gift cards that carry a "Buy on
   Amazon" link. Muted but legible — conspicuous without competing with the
   product cards themselves. */
.product-recs-disclosure {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

.product-card {
  flex: 0 0 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s, opacity 0.2s;
  /* Anchor the dismiss button to the top-right corner. */
  position: relative;
}

.product-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
}

/* Paired feedback controls (♥ love + × dismiss) anchored top-right of every
   chat product card (R-FEEDBACK-01 + R-X-OUT). Either click locks the other
   and visually flags the card; both then post a structured chat message that
   pivots the next concierge batch toward (♥) or away from (×) similar items. */
.product-card-feedback {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  z-index: 2;
}

.product-card-love,
.product-card-dismiss {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.product-card-love:hover {
  background: rgba(244, 114, 182, 0.85);
  border-color: rgba(244, 114, 182, 0.85);
  color: #fff;
}

.product-card-dismiss:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: rgba(239, 68, 68, 0.85);
  color: #fff;
}

.product-card-love:disabled,
.product-card-dismiss:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Loved state — gentler than dismiss (no greyscale); a pink/gold accent
   border + subtle backlight signals "we'll lean into more like this". */
.product-card.is-loved {
  border-color: rgba(244, 114, 182, 0.55);
  box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.3) inset;
}

.product-card.is-loved .product-card-love {
  background: rgba(244, 114, 182, 0.85);
  border-color: rgba(244, 114, 182, 0.85);
  color: #fff;
}

.product-card.is-dismissed {
  opacity: 0.45;
  filter: grayscale(0.6);
}

.product-card.is-dismissed .product-card-title,
.product-card.is-dismissed .product-card-price {
  text-decoration: line-through;
}

.product-card.is-dismissed .product-card-cta {
  pointer-events: none;
}

.product-card-img {
  width: 100%;
  height: 120px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.product-card-img .placeholder-icon { font-size: 48px; }

/* Real product photo (when a rec carries image_url) covers the 120px banner;
   falls back to the category emoji via the img onerror handler. */
.product-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card-body { padding: 14px; }

.product-card-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Why this gift" rationale (R-ENG-01). Tinted to read as the user's
   receipt — "I used real facts about your recipient" — rather than another
   marketing line. Subtle gold left-rule visually anchors it as a different
   class of copy from the description above. */
.product-card-why {
  font-size: 11.5px;
  color: var(--gold2);
  line-height: 1.4;
  margin: 0 0 8px;
  padding: 4px 0 4px 8px;
  border-left: 2px solid var(--goldfade2);
  font-style: italic;
}

/* Social proof on chat gift cards (R-ENG-02): rating, popular badge, maker
   chips. Single flex row, wraps when crowded. Each chip is self-contained
   and rendered only when its source field exists, so the row stays clean
   when only some signals are available. */
.product-card-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 11px;
}

.product-card-rating {
  color: #fcd34d;
  font-weight: 600;
}

.product-card-popular {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.18);
  border: 1px solid rgba(249, 115, 22, 0.45);
  color: var(--gold2);
  font-weight: 600;
  font-size: 10.5px;
}

.product-card-maker {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
  font-size: 10.5px;
}

.product-card-review {
  margin: 0 0 8px;
  padding: 4px 8px;
  background: rgba(15, 23, 42, 0.4);
  border-left: 2px solid rgba(168, 85, 247, 0.45);
  color: var(--text-secondary);
  font-size: 11px;
  font-style: italic;
  line-height: 1.4;
}

.product-card-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}

.product-card-cta {
  display: inline-block;
  background: var(--gradient-primary);
  color: #020617;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  width: 100%;
  text-align: center;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25);
}

.product-card-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.35);
}

/* ==================== CONCIERGE PEOPLE CARD ====================
   Compact card the concierge auto-renders inside the chat when a recipient is
   ready_to_save. Persistence is one explicit click on "Add to my people"
   (POST /dashboard/save_recipients). Shares the chat/product-card vocabulary. */
.people-card {
  max-width: 78%;
  background: var(--panel3);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px 14px;
}

.people-card-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 3px;
}

.people-card-summary {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.45;
  margin-bottom: 10px;
}

.people-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.people-card-save.is-saved {
  background: rgba(74, 222, 128, 0.15);
  color: var(--status);
  box-shadow: none;
  cursor: default;
}

.people-card-status {
  font-size: 11.5px;
  color: var(--muted);
}

.people-card-status.is-error { color: #fca5a5; }

/* Legacy .rail-card* — retained for recommendations/show.html.erb until that
   view is migrated to the v6 vocabulary. Dashboard's rail uses .railCard. */
.rail-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.rail-card-title { font-weight: 600; font-size: 14px; }

.rail-note { color: var(--text-muted); font-size: 12px; line-height: 1.45; margin-top: 10px; }

/* ==================== RIGHT RAIL (v6) ==================== */
.rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.railCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.railCard h3 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}

.railCard h3 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.railSub {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 10px;
}

.railNote {
  font-size: 11px;
  color: var(--soft);
  line-height: 1.5;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.statRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}

.statRow:first-of-type {
  border-top: none;
  padding-top: 0;
}

.statRow .k { font-size: 12px; color: var(--text2); }

.statRow .v {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 17px;
  color: var(--gold2);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}

.statRow .v.plain { color: var(--text); font-size: 14px; }

/* Year stats grid */
.yearStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.yStat {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px;
}

.yStat .yn {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  color: var(--gold2);
  line-height: 1;
  margin-bottom: 2px;
}

.yStat .yl { font-size: 11px; color: var(--muted); }

/* Coming Up list + shared dot/days utility tokens (reused on My People card dates in PR 5) */
.occList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.occItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 10px;
  transition: background 0.12s;
}

.occItem:hover { background: var(--panel2); }

.occDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-hot  { background: var(--rescue); box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.dot-warm { background: var(--gold2);  box-shadow: 0 0 5px rgba(251, 146, 60, 0.4); }
.dot-cool { background: var(--status); }

.occInfo { flex: 1; min-width: 0; }
.occName { font-size: 13px; font-weight: 600; color: var(--text2); }
.occMeta { font-size: 11px; color: var(--muted); margin-top: 1px; }

.occDays {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.days-hot  { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
.days-warm { background: var(--goldfade); color: var(--gold2); }
.days-cool { background: rgba(74, 222, 128, 0.12); color: var(--status); }

.occCalBtn {
  padding: 3px 7px;
  border-radius: 7px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--soft);
  flex-shrink: 0;
  transition: all 0.14s;
  cursor: pointer;
  font-family: inherit;
  /* The "add to calendar" affordance is rendered as a <a download> for real
     occasions and a <button> for the "+ not added yet" stub — keep both
     visually identical and centred. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}

.occCalBtn:hover { border-color: var(--goldfade2); color: var(--gold2); }

/* SMS toggle (also reused in alerts rows) */
.smsToggle {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--panel3);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.smsToggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: all 0.18s;
}

.smsToggle.on {
  background: var(--grad);
  border-color: transparent;
}

.smsToggle.on::after {
  left: 21px;
  background: #020617;
}

/* History rows (recent gifts + wishlists share shell) */
.historyList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.historyItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid var(--border);
}

.historyAv {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.historyInfo { flex: 1; min-width: 0; }

.historyName {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historyMeta { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Group gifting */
.groupExample {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px;
}

.groupExName { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.groupExMeta { font-size: 11.5px; color: var(--muted); margin-bottom: 9px; }

.groupStartBtn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  transition: all 0.14s;
  font-family: inherit;
  cursor: pointer;
}

.groupStartBtn:hover:not([disabled]) {
  border-color: var(--goldfade2);
  color: var(--gold2);
}

/* Expandable 2-col quick-access grid */
.expandGridLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--soft);
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 8px;
}

.expandGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.expandCard {
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
  cursor: pointer;
}

.expandCard:hover {
  border-color: rgba(249, 115, 22, 0.35);
  background: var(--panel3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.expandCard.open {
  border-color: rgba(249, 115, 22, 0.4);
  background: var(--panel3);
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.08);
}

.expandHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  user-select: none;
}

.expandHeader:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: -2px;
}

.expandIcon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.14s;
}

.expandCard:hover .expandIcon,
.expandCard.open .expandIcon { transform: scale(1.06); }

.expandLabel {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.expandMeta { font-size: 11px; color: var(--muted); margin-top: 1px; }

.expandChev {
  font-size: 10px;
  color: var(--soft);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: auto;
}

.expandCard.open .expandChev {
  transform: rotate(180deg);
  color: var(--gold2);
}

.expandBody {
  display: none;
  padding: 0 13px 13px;
  border-top: 1px solid var(--border);
}

.expandCard.open .expandBody { display: block; }

.expandBody .railSub {
  margin-bottom: 10px;
  margin-top: 10px;
}

/* ==================== UPCOMING OCCASIONS SECTION ==================== */
.section {
  margin-top: 28px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.section-head h3 {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.section-head h3 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-head .sub {
  font-size: 13px;
  color: var(--text2);
  margin-top: 4px;
}

.rangePill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text2);
  font-feature-settings: "tnum" 1;
}

/* ==================== EVENT CARD ==================== */
.event {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 20px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 14px;
  transition: border-color 0.15s;
}

.event:hover { border-color: var(--border2); }
.event:last-child { margin-bottom: 0; }

.rxAv {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 18px;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.rxAv.c1 { background: linear-gradient(135deg, #fed7aa, #fb923c); color: #431407; }
.rxAv.c2 { background: linear-gradient(135deg, #fdba74, #ea580c); color: #431407; }
.rxAv.c3 { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #451a03; }
.rxAv.c4 { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); color: #2e1065; }

.rxMain { min-width: 0; }

.rxHead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.rxName {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.rxName em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 18px;
  margin-left: 2px;
}

.rxRel {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel3);
}

.rxOcc { font-size: 13px; color: var(--text2); }

.rxOcc .dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--soft);
  margin: 0 8px 2px;
  vertical-align: middle;
}

.rxActions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rxCount {
  text-align: right;
  min-width: 84px;
}

/* v6 countdown badge — colored rounded square replaces the plain serif number. */
.rxBadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  margin-left: auto;
  font-family: "DM Serif Display", Georgia, serif;
}

.rxBadge .num {
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

.rxBadge .lbl {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

.rxBadge.hot {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.rxBadge.hot .num { color: var(--rescue); }

.rxBadge.warm {
  background: var(--goldfade);
  border: 1px solid rgba(249, 115, 22, 0.3);
  color: var(--gold2);
}

.rxBadge.cool {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: var(--violet2);
}

.rxBadge.cool .num {
  font-size: 16px;
  font-style: italic;
}

.rxBadge.neutral {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.15s;
}

.btn:hover { border-color: var(--border-hover); color: var(--text); }

.btn.primary {
  background: var(--gradient-primary);
  color: #020617;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25);
}

.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.35);
}

/* ==================== SUGGESTED GIFT PICKS ==================== */
.picks {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

.picksTitle {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.picksLayout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}

@media (max-width: 780px) {
  .picksLayout { grid-template-columns: 1fr; }
}

/* Pick hero card (left column of picksLayout) */
.pickHero {
  background: var(--panel3);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.14s;
}

.pickHero:hover { border-color: var(--border2); }

.pickHero .ph-img {
  aspect-ratio: 16 / 10;
  position: relative;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(249, 115, 22, 0.08) 0 10px,
      rgba(139, 92, 246, 0.04) 10px 20px
    ),
    var(--panel4);
  border-bottom: 1px solid var(--border);
  display: grid;
  place-items: center;
}

.pickHero .ph-img::after {
  content: attr(data-label);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 11px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.7);
  backdrop-filter: blur(6px);
}

.pickHero .ph-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.pickHero .ph-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 2px;
}

.pickHero .ph-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
}

.pickHero .ph-meta { font-size: 12px; color: var(--text2); }

/* Pick-card "why this gift" rationale (R-ENG-01). Mirrors the chat card's
   gold-tinted treatment so the rationale reads as the user's receipt that
   real facts informed the pick, distinct from the marketing description
   above it. */
.pickHero .ph-why {
  font-size: 12px;
  color: var(--gold2);
  line-height: 1.4;
  margin: 4px 0 0;
  padding: 4px 0 4px 8px;
  border-left: 2px solid var(--goldfade2);
  font-style: italic;
}

/* Pick-card social-proof chip row (R-ENG-02). Same chip palette as the
   chat-card row above; lives between .ph-why and .ph-price. */
.pickHero .ph-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 11px;
}

.pickHero .ph-rating {
  color: #fcd34d;
  font-weight: 600;
}

.pickHero .ph-popular {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.18);
  border: 1px solid rgba(249, 115, 22, 0.45);
  color: var(--gold2);
  font-weight: 600;
  font-size: 10.5px;
}

.pickHero .ph-maker {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
  font-size: 10.5px;
}

.pickHero .ph-review {
  margin: 6px 0 0;
  padding: 4px 8px;
  background: rgba(15, 23, 42, 0.4);
  border-left: 2px solid rgba(168, 85, 247, 0.45);
  color: var(--text-secondary);
  font-size: 11px;
  font-style: italic;
  line-height: 1.4;
}

.pickHero .ph-price {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  color: var(--gold2);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}

.pickHero .ph-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.pickHero .ph-actions .btn { flex: 1; }

/* Pick alternates list (right column of picksLayout) */
.pickAlts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pickAlt {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--panel3);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.14s;
}

.pickAlt:hover { border-color: var(--border2); }

.pickAlt .pa-sw {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(249, 115, 22, 0.12) 0 6px,
      rgba(139, 92, 246, 0.04) 6px 12px
    ),
    var(--panel4);
}

.pickAlt .pa-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pickAlt .pa-meta { font-size: 11px; color: var(--text2); margin-top: 2px; }

.pickAlt .pa-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.pickAlt .pa-price {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 16px;
  color: var(--gold2);
  font-feature-settings: "tnum" 1;
}

/* Source provenance badge (maker vs affiliate wired in PR3) */
.srcBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.srcBadge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.srcBadge.maker {
  background: rgba(139, 92, 246, 0.14);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.32);
}

.srcBadge.maker::before {
  background: #a78bfa;
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.8);
}

.srcBadge.affiliate {
  background: rgba(148, 163, 184, 0.08);
  color: var(--text2);
  border: 1px solid var(--border);
}

.srcBadge.affiliate::before { background: #94a3b8; }

/* ==================== AUTH-ADAPTIVE PROVENANCE ==================== */
.provBanner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin-top: 14px;
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.45;
}

.provBanner .icn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(249, 115, 22, 0.22);
  color: var(--gold2);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

.provBanner strong { color: var(--text); font-weight: 600; }

.provBanner a {
  color: var(--gold2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Green success variant — reused for approved / purchased confirmations
   on recommendations/show. */
.provBanner.success {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.28);
}

.provBanner.success .icn {
  background: rgba(74, 222, 128, 0.22);
  color: var(--status);
}

/* Grid of recommendation tiles — each item renders as a .pickHero card.
   Auto-fill keeps the v5 behaviour of flowing into multiple columns on wide
   screens and collapsing to a single column on mobile. */
.picksGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* button_to forms inside .ph-actions need to sit flat + share width so the
   approve / dismiss buttons align with plain <a> siblings. */
.ph-actions form { flex: 1; margin: 0; }
.ph-actions form .btn { width: 100%; }

/* Vendor emoji placement inside the striped .ph-img banner. The label chip
   (rendered via .ph-img::after from content: attr(data-label)) moves to the
   bottom-right corner so the emoji owns the centre. */
.pickHero .ph-img { position: relative; }

.pickHero .ph-img::after {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.pickHero .ph-emoji {
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Tertiary "ghost" variant of .btn — used for destructive/dismiss actions
   where the affordance should feel lighter than the default bordered btn. */
.btn.ghost {
  border-color: transparent;
  color: var(--soft);
}

.btn.ghost:hover {
  border-color: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}

/* Status-panel variant — constrains the pending/failed/empty .panel blocks
   so they don't stretch the full 1440px page when used alone. */
.panel.status {
  max-width: 560px;
}

/* Legacy pick grid — retained for recommendations/show.html.erb */
.picks-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pick-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: border-color 0.15s;
}

.pick-card:hover { border-color: var(--border-hover); }

.pick-img {
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 8px;
}

.pick-name { font-weight: 600; font-size: 13px; line-height: 1.25; margin-bottom: 6px; }
.pick-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }

.pick-actions { display: flex; gap: 8px; }

.btn.small { padding: 7px 10px; font-size: 12px; border-radius: var(--radius-sm); }
.pick-actions .btn { flex: 1; }

/* ==================== SETTINGS MODAL ==================== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.overlay.open { display: flex; }

/* ==================== RESCUE OVERLAY (v6 PR6) ==================== */
/* Stacks above the settings overlay if both ever open simultaneously. */
#rescueOverlay { z-index: 60; padding: 20px; }

.rescueModal {
  background: var(--panel);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.rescueModal h3 {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 26px;
  color: #fca5a5;
  margin: 0 0 6px;
  font-weight: 400;
}

.rescueModal p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

.rescueOpts {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rescueOpt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
  transition: all 0.14s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}

.rescueOpt:hover,
.rescueOpt:focus-visible {
  border-color: rgba(239, 68, 68, 0.3);
  background: var(--panel3);
  outline: none;
}

.rescueOptIcon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.12);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}

.rescueOptText strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.rescueOptText span {
  font-size: 12px;
  color: var(--muted);
}

.rescueClose {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all 0.14s;
  font-family: inherit;
  cursor: pointer;
}

.rescueClose:hover,
.rescueClose:focus-visible {
  color: var(--text);
  border-color: var(--border2);
  outline: none;
}

/* ==================== SETTINGS MODAL ==================== */
.settings-modal {
  width: min(820px, 96vw);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-head .title { font-weight: 600; font-size: 15px; }

.close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  height: 32px;
  min-width: 32px;
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: all 0.15s;
}

.close:hover { border-color: var(--border-hover); color: var(--text); }

.modal-body { padding: 20px; }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.set-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.set-card .h { font-weight: 600; font-size: 14px; margin: 0 0 6px 0; }
.set-card .d { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin: 0 0 12px 0; }

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.set-row-label { font-size: 12px; color: var(--text-secondary); }

.toggle {
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all .18s ease;
}

.toggle.on {
  background: var(--gradient-primary);
  border-color: transparent;
}

.toggle.on::after { left: 19px; background: #020617; }

.linkbtn {
  font-weight: 600;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.linkbtn:hover { border-color: var(--border-hover); color: var(--text); }

.linkbtn.primary {
  background: var(--grad);
  color: #020617;
  border-color: transparent;
}

.linkbtn.primary:hover { color: #020617; opacity: 0.92; }

/* Inputs used inside the Settings modal (shipping & preferences form). The
   modal uses .set-row for label / control pairs; .set-input keeps each control
   visually consistent with the bordered .linkbtn pill alongside it. */
.set-input {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  min-width: 160px;
}

.set-input:focus {
  outline: none;
  border-color: var(--gold2);
}

.set-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}

.set-checkbox input[type="checkbox"] { accent-color: var(--gold2); }

.settings-note {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 12px;
}

/* ==================== WISHLIST VIEW ==================== */
.wishlist-view { padding: 24px 0; }
.wishlist-view h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.wishlist-view p { margin: 0 0 20px; color: var(--text-secondary); font-size: 14px; }

.wishlist-form {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.wishlist-form input {
  flex: 2;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.wishlist-form input:focus { border-color: var(--border-accent); }

.wishlist-form button {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--gradient-primary);
  border: none;
  color: #020617;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25);
}

.wishlist-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.35);
}

.wishlist-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 13px;
}

.wishlist-table th,
.wishlist-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.wishlist-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wishlist-table td { color: var(--text); }
.wishlist-table tr:hover { background: rgba(255, 255, 255, 0.02); }

/* ==================== MY PEOPLE (v6 PR5) ==================== */
.pageHead {
  margin-bottom: 22px;
}

.pageHead h1 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--text);
}

.pageHead h1 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pageHead p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.peopleGrid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.personCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.14s;
}

.personCard:hover { border-color: var(--border2); }

.personCardTop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

.personCardTop:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: -2px;
}

.personAv {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.personInfo { flex: 1; min-width: 0; }

.personName {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.personRel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--panel2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
}

.personBudget { font-size: 11.5px; color: var(--muted); }

.personQuickActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.personQuickActions form { margin: 0; }

/* Expand affordance for a person card. A bordered circular control reads as an
   obvious "open me" toggle (the whole card top is the tap target), instead of
   the previous bare 11px chevron that gave no signal the card opens an editor. */
.personCardChev {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--panel2);
  transition: transform 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
}

.personCardTop:hover .personCardChev {
  border-color: var(--border-hover);
  color: var(--text);
}

.personCard.open .personCardChev {
  transform: rotate(180deg);
  color: var(--gold2);
  border-color: var(--goldfade2);
}

.personCardBody {
  display: none;
  border-top: 1px solid var(--border);
}

.personCard.open .personCardBody { display: block; }

.personDates {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.personDatesLabel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--soft);
  font-weight: 600;
  margin-bottom: 10px;
}

.dateRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.dateRow:last-of-type { border-bottom: none; }

.dateIcon {
  font-size: 16px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.dateInfo { flex: 1; min-width: 0; }
.dateName { font-size: 13px; font-weight: 600; color: var(--text2); }
.dateVal  { font-size: 12px; color: var(--muted); margin-top: 1px; }

.dateBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  /* color variants reuse .days-hot/.days-warm/.days-cool from the rail */
}

.dateEdit {
  font-size: 11px;
  color: var(--soft);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.14s;
  font-family: inherit;
}

.dateEdit:hover { border-color: var(--goldfade2); color: var(--gold2); }

.addDateRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 2px;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  transition: color 0.14s;
}

.addDateRow:hover { color: var(--gold2); }

.addDatePlus {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px dashed var(--border2);
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: all 0.14s;
  flex-shrink: 0;
}

.addDateRow:hover .addDatePlus {
  border-color: rgba(249, 115, 22, 0.4);
  color: var(--gold2);
}

.personPrefs {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.prefBox {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.prefLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--soft);
  font-weight: 600;
  margin-bottom: 5px;
}

.prefVal {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.45;
}

.prefInput {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text2);
  font-size: 12.5px;
  font-family: inherit;
  resize: none;
  line-height: 1.45;
}

/* "Avoid" visible-memory chips on each My People card (R-ENG-05). Each chip
   reads as a pill with a × remove control; the free-text input at the end of
   the row commits a new chip on Enter or comma. Vanilla-DOM controller in
   app/views/layouts/dashboard.html.erb. */
.avoidChips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.avoidChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-size: 11.5px;
  line-height: 1.3;
  font-family: inherit;
}

.avoidChipLabel { font-weight: 500; }

.avoidChipRemove {
  background: transparent;
  border: none;
  padding: 0 2px;
  margin-left: 2px;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.avoidChipRemove:hover { color: #ef4444; }

.avoidChipInput {
  flex: 1 1 160px;
  min-width: 160px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text2);
  font-size: 12.5px;
  font-family: inherit;
  padding: 4px 0;
}

.avoidChipInput::placeholder { color: var(--muted); font-style: italic; }

.personFooter {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border);
}

.personFooter form { margin: 0; }

/* Dashed "add someone new" tile at the end of the grid */
.addPersonCard {
  background: transparent;
  border: 1.5px dashed var(--border2);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.14s;
  text-decoration: none;
  color: inherit;
}

.addPersonCard:hover {
  border-color: rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.04);
}

.addPersonIcon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px dashed rgba(249, 115, 22, 0.3);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: rgba(249, 115, 22, 0.4);
  flex-shrink: 0;
}

.addPersonCard p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

.addPersonCard p strong {
  color: var(--text2);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

@media (max-width: 600px) {
  .personPrefs { grid-template-columns: 1fr; }
  .personCardTop { flex-wrap: wrap; }
  .personQuickActions { margin-left: auto; }
  .pageHead h1 { font-size: 26px; }
}

/* Keep gradient-clipped headings visible in forced-colors/high-contrast modes
   (where backgrounds are suppressed) and when background-clip: text isn't
   supported. */
@media (forced-colors: active) {
  .panelHead h2,
  .wishlist-view h2,
  .pageHead h1 em {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }
}

/* ==================== HERO — compact card ==================== */
.hero {
  margin-top: 18px;
  margin-bottom: 20px;
  padding: 28px 32px 22px;
  border: 1px solid rgba(249, 115, 22, 0.18);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at 30% -10%, rgba(249, 115, 22, 0.07), transparent);
}

.heroEye {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold2);
  font-weight: 700;
  margin-bottom: 14px;
  position: relative;
}

/* One line, left-aligned, baseline-aligned so the rolling word sits with the rest. */
.heroH1 {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 18px;
  position: relative;
  font-family: "DM Serif Display", serif;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}

.heroH1Pre { padding-right: 8px; white-space: nowrap; }
.heroH1Suf { padding-left: 10px; white-space: nowrap; }

.heroH1SR {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rollingSlot {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
  line-height: 1.12;
  flex-shrink: 0;
  transition: width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.rollingInner {
  display: flex;
  flex-direction: column;
  /* align-items defaults to `stretch`, which forced every rolling word to the
     width of the widest one ("housewarming") — so the slot stayed that wide for
     short words too, leaving a big gap before "again." (most visible on mobile)
     and defeating the per-word width animation the JS measures for. flex-start
     lets each word size to its own content so the slot tracks the live word. */
  align-items: flex-start;
  will-change: transform;
}

/* Solid brand orange — NOT the full gradient the big hero used. */
.rollingWord {
  font-style: italic;
  white-space: nowrap;
  display: block;
  line-height: 1.12;
  color: var(--gold2);
}

/* Steps on the left, social proof on the right — one row. */
.heroFootRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
  position: relative;
}

.howSteps {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.howStep {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
}

.howN {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--goldfade2);
  border: 1px solid rgba(249, 115, 22, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--gold2);
}

.howArr {
  font-size: 11px;
  color: var(--soft);
  padding: 0 1px;
  flex-shrink: 0;
}

.heroProof {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.proofAvatars { display: flex; }

.proofAv {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  margin-left: -7px;
  flex-shrink: 0;
}

.proofAv:first-child { margin-left: 0; }

.av1 { background: #4a7c6a; color: #c8e8d8; }
.av2 { background: #6a5a2a; color: #eacd7a; }
.av3 { background: #5a3a4a; color: #e8b8d0; }
.av4 { background: #3a5a7a; color: #a8d0f0; }
.av5 { background: #5a6a3a; color: #c8d8a8; }

.proofText {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.proofText strong {
  color: var(--text2);
  font-weight: 600;
}

@media (max-width: 760px) {
  .hero { padding: 22px 18px 18px; }
  .heroH1 { flex-wrap: wrap; }            /* let the headline wrap instead of overflowing */
  .heroFootRow { align-items: flex-start; gap: 14px; }
  .howSteps { flex-wrap: wrap; }          /* steps wrap; arrows stay inline */

  /* Social proof was `flex-shrink: 0`, so the long "14,000+ … 98% on-time …"
     line kept its full single-line width and pushed the page ~28px wider than
     the viewport (horizontal scroll, line clipped). Let the block shrink and
     its text wrap so it stays inside the screen. */
  .heroProof {
    flex-shrink: 1;
    min-width: 0;
    flex-wrap: wrap;
    max-width: 100%;
  }
  .proofText { white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .rollingInner { transition: none !important; }
  .rollingSlot  { transition: none !important; }
}

/* ==================== EMPTY STATE (v6 mock) ====================
   First-run users and guests see this in the left column (.leftCol) beneath
   the concierge; populated users get event cards in #peopleSection instead.
   Ghost avatars + import buttons + ghost preview cards.
*/
.emptyState {
  border: 1.5px dashed rgba(180, 215, 195, 0.12);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
}

.emptyIll {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.ghostAv {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  border: 2px dashed var(--goldfade2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--goldfade2);
}

.emptyState h4 {
  font-family: "DM Serif Display", serif;
  font-size: 22px;
  color: var(--text2);
  margin-bottom: 8px;
}

.emptyState p {
  font-size: 14px;
  color: var(--muted);
  max-width: 400px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.importGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.importBtn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 600;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text2);
  transition: all 0.14s;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.importBtn:hover {
  border-color: var(--goldfade2);
  color: var(--text);
  background: var(--panel3);
}

.iIcon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.i-fb   { background: var(--fbfade);              color: var(--fb); }
.i-g    { background: rgba(66, 133, 244, 0.15);   color: #6ab0ff; }
.i-o    { background: rgba(0, 120, 212, 0.15);    color: #5ab0ff; }
.i-csv  { background: var(--sagefade);            color: var(--sage); }
.i-plus { background: var(--goldfade);            color: var(--gold); }

.previewDiv {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}

.previewDiv::before,
.previewDiv::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.previewDiv span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--soft);
  /* Wrap instead of nowrap: the uppercase, letter-spaced label is ~330px wide
     and would otherwise overflow the viewport on phones, forcing horizontal
     page scroll. Centered so a 2-line wrap stays tidy between the divider
     rules. */
  text-align: center;
}

.ghostCards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ghostCard {
  border: 1px dashed rgba(180, 215, 195, 0.09);
  border-radius: 15px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  pointer-events: none;
}

.ghostCard:nth-child(1) { opacity: 0.38; }
.ghostCard:nth-child(2) { opacity: 0.22; }

.ghostCardAv {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--panel3);
}

.ghostLines {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ghostLine {
  height: 9px;
  border-radius: 5px;
  background: var(--panel3);
}

.ghostRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.ghostTag {
  width: 58px;
  height: 20px;
  border-radius: 999px;
  background: var(--panel3);
}

.ghostBtns {
  display: flex;
  gap: 6px;
}

.ghostBtn {
  height: 26px;
  border-radius: 999px;
  background: var(--panel3);
}

@media (max-width: 760px) { .importGrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .importGrid { grid-template-columns: 1fr; } }

/* Guest CTA strip — only renders inside .emptyState when the dashboard is
   shown to a logged-out visitor. Reuses existing .btn / .btn.primary /
   .btn.ghost vocabulary; no new colors. */
.guestCta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--goldfade2);
  background: var(--goldfade);
  text-align: left;
}

.guestCtaCopy {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}

.guestCtaCopy strong { color: var(--text); }

.guestCtaActions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .guestCta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  /* Stack the CTA buttons full-width. Side-by-side, the pill-shaped
     "Sign up — it's free" button collapses to its min-content width on narrow
     screens, wrapping to several lines inside the border-radius:999px pill and
     rendering as a circle. Full-width stacking keeps each as a clean pill. */
  .guestCtaActions { flex-direction: column; }
}

/* First-run single-column layout. Rail is conditionally unrendered in the
   view so this rule only governs the hero and optional body reflow. */
#viewDashboard.is-first-run .top-row { grid-template-columns: 1fr; }

/* ==================== TOAST (import stubs) ==================== */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel3);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 13px;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 1;
}

.toast.is-leaving {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

/* ==================== FOOTER ==================== */
.dashboard-footer {
  text-align: center;
  margin-top: 32px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.dashboard-footer p { margin: 0; }

/* Persistent affiliate disclosure line in the dashboard footer. */
.dashboard-footer-disclosure {
  margin-bottom: 6px !important;
  font-size: 11px;
  line-height: 1.5;
}

/* FTC affiliate disclosure for event-card picks (Approve & ship + alternates). */
.picks-disclosure {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* ==================== RESPONSIVE ==================== */

/* Large desktop */
@media (min-width: 1200px) {
  .top-row { grid-template-columns: 1fr 340px; }
  /* Concierge gets more vertical room on large displays but stays capped so the
     transcript scrolls instead of pushing the page when the conversation runs long. */
  .chat { max-height: 70vh; }
}

/* Default desktop: handled by base styles */

/* Tablet landscape / small desktop */
@media (max-width: 1024px) {
  .top-row { grid-template-columns: 1fr 280px; gap: 16px; }
  .panel { padding: 20px; }
  .panelHead h2 { font-size: 22px; }
  .chat { min-height: 220px; }}

/* Tablet portrait */
@media (max-width: 860px) {
  .top-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Rail keeps its v6 stacked flex layout when it reflows below the concierge. */
  .chat { min-height: 200px; max-height: 360px; }
  .settings-grid { grid-template-columns: 1fr; }
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 600px) {
  .wrap { padding: 0 16px 32px; }
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; margin: 0 -16px 16px; }
  .brand { min-width: auto; margin-right: 0; }
  /* Tighten the brand on mobile so the header doesn't dominate the viewport. */
  .brand-badge { width: 34px; height: 34px; }
  .brand-text .tag { display: none; }
  /* The "All systems on" pill is decorative — drop it on small screens so the
     top row has room for the brand + actions without crowding. */
  .statusPill { display: none; }

  /* Tabs become a single-line, horizontally-scrollable strip instead of
     wrapping each multi-word label onto two lines. */
  .tabs {
    margin-left: 0;
    order: 3;
    /* flex-basis:100% (overriding the base `flex:1`) forces the strip onto its
       own full-width row beneath the brand/actions instead of being squeezed
       in beside them. */
    flex: 0 0 100%;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    padding: 9px 14px;
    font-size: 13px;
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .top-actions { margin-left: auto; }

  .top-row { gap: 12px; }
  .panel { padding: 16px; }
  .panelHead h2 { font-size: 20px; }
  .chat { min-height: 200px; max-height: 360px; }

  .expandGrid { grid-template-columns: 1fr; }
  .bottom { padding: 16px; }
  .pick-grid { grid-template-columns: 1fr; }
  .product-card { flex: 0 0 180px; }

  .avatar-label { display: none; }
}

/* ============================================================
   Dashboard "apps" (QA #6) — additive modules layered onto the
   existing slate-950 + brand-gradient rail. First-run banner,
   gifting score, and the guest "Why Gifted?".
   ============================================================ */

/* First-run nudge banner */
.firstRunBanner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 4px;
  padding: 16px 18px;
  border: 1px solid var(--goldfade2);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(168, 85, 247, 0.10));
}
.firstRunBanner .frbIcon {
  font-size: 24px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--panel2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.firstRunBanner .frbBody { flex: 1; min-width: 0; }
.firstRunBanner .frbTitle { color: var(--text); font-size: 15px; }
.firstRunBanner .frbSub { color: var(--text2); font-size: 13px; margin-top: 3px; line-height: 1.5; }
.firstRunBanner .frbCta { white-space: nowrap; flex-shrink: 0; }

/* Gifting score rail card */
.scoreCard .scoreHead { display: flex; align-items: center; gap: 14px; }
.scoreCard .scoreNum {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 44px;
  line-height: 1;
  flex-shrink: 0;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.scoreCard .scoreTier { color: var(--text); font-weight: 600; font-size: 14px; }
.scoreCard .scorePct { color: var(--gold2); font-size: 12px; font-weight: 600; margin-top: 2px; }
.scoreCard .scoreBlurb { color: var(--text2); font-size: 12.5px; line-height: 1.5; margin-top: 10px; }
.scoreCard .scoreLink {
  display: inline-block;
  margin-top: 10px;
  color: var(--gold2);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.scoreCard .scoreLink:hover { text-decoration: underline; }

/* R-RET-05: streak chips + next-best-action list on the gifting-score card */
.scoreCard .scoreStreak {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 12.5px;
}
.scoreCard .scoreStreakChip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 159, 85, 0.14); color: var(--gold2);
  font-weight: 600;
}
.scoreCard .scoreStreakLifetime { color: var(--text2); }

.scoreCard .scoreActions { margin-top: 14px; }
.scoreCard .scoreActionsHead {
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 11px; font-weight: 600; color: var(--text2);
  margin-bottom: 6px;
}
.scoreCard .scoreActionList { list-style: none; margin: 0; padding: 0; }
.scoreCard .scoreActionItem + .scoreActionItem { margin-top: 6px; }
.scoreCard .scoreActionLink {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(139, 92, 246, 0.08); color: var(--text);
  text-decoration: none; font-size: 13px;
  border: 1px solid rgba(139, 92, 246, 0.18);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.scoreCard .scoreActionLink:hover {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.32);
}
.scoreCard .scoreActionLabel { line-height: 1.35; }
.scoreCard .scoreActionPoints {
  margin-left: 12px; font-weight: 700; color: #8b5cf6; flex-shrink: 0;
}

/* "Why get Gifted?" value card (guest rail) */
.whyCard .whyEyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gold2);
}
.whyCard .whyTitle {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin: 6px 0 12px;
  line-height: 1.2;
}
.whyCard .whyTitle em { font-style: italic; color: var(--gold2); }
.whyCard .whyList { display: flex; flex-direction: column; gap: 10px; }
.whyCard .whyItem { display: flex; gap: 10px; align-items: flex-start; }
.whyCard .whyCheck {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--goldfade);
  color: var(--gold2);
  font-size: 11px;
  font-weight: 700;
}
.whyCard .whyText { font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.whyCard .whyText strong { color: var(--text); font-weight: 600; }
.whyCard .whyCta { width: 100%; text-align: center; display: block; box-sizing: border-box; margin-top: 14px; }

@media (max-width: 720px) {
  .firstRunBanner { flex-direction: column; align-items: flex-start; }
  .firstRunBanner .frbCta { width: 100%; text-align: center; }
}

/* Thumbs feedback on a curated pick card (R-FEEDBACK-01). Anchored top-right;
   pink accent when activated mirrors the chat card's loved state so the
   visual language is consistent across surfaces. Lives at the file end so it
   doesn't collide with the R-ENG-02 social-proof block when those branches
   merge in either order. */
.pickHero { position: relative; }

.pickHero .ph-feedback {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 2;
}

.pickHero .ph-love {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.pickHero .ph-love:hover,
.pickHero .ph-love.is-active {
  background: rgba(244, 114, 182, 0.85);
  border-color: rgba(244, 114, 182, 0.85);
  color: #fff;
}

.pickHero.is-loved {
  border-color: rgba(244, 114, 182, 0.55);
  box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.3) inset;
}

/* Honest "order by" cutoff line on gift pick cards (R-CONV-02). Derived from
   the linked occasion's order_by_date helper — only rendered when the cutoff
   is still in the future, so a past occasion / inside-window case omits the
   line entirely rather than rendering stale urgency. */
.pickHero .ph-order-by {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #f97316;
  font-weight: 600;
  letter-spacing: 0.01em;
/* Tappable follow-up chips rendered after a gift_recommendations card row
   (R-ENG-03). One row, wraps when crowded. Each chip mirrors the quick-start
   chip style but at a smaller scale so the row reads as "next move" not as
   primary navigation. */
.followUpsRow .followUps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.followUpChip {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--panel3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.followUpChip:hover {
  border-color: var(--goldfade2);
  color: var(--gold2);
}

.followUpChip:disabled {
  opacity: 0.55;
  cursor: default;
}