/* Next Play — design system v2: warm, organic, human */

/* ============================================================
   PHILOSOPHY
   - Forest, not office. Trail map, not spreadsheet.
   - Warm cream backgrounds, not clinical gray.
   - Soft organic radii, generous spacing.
   - Fraunces display font used boldly for warmth.
   - Subtle texture and depth, not flat cards.
   ============================================================ */

/* ---- Global ---- */
html, body { overflow-x: hidden; max-width: 100vw; }
.font-display { font-family: 'Fraunces', Georgia, serif; }

/* Subtle paper-grain texture overlay on the body */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Rustic vignette — warm darkened edges like aged paper */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  box-shadow: inset 0 0 120px 40px rgba(60,42,20,0.15),
              inset 0 0 300px 80px rgba(40,30,15,0.06);
}

/* ---- Header / breadcrumbs ---- */
/* np-header: display is controlled by Tailwind classes (hidden sm:flex) on the element.
   Do NOT set display here — it would fight with Tailwind's responsive visibility. */
.np-header {
  align-items: center; gap: 10px;
  padding: 14px 0 24px; flex-wrap: nowrap;
}
.np-header .trail-dash { flex-shrink: 0; }

/* Mobile nav pill — tappable pill bar at top of onboarding/results pages */
.np-mobile-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 9999px;
  background: #fffefa; border: 1px solid #e8e2d6;
  font-size: 0.875rem; font-weight: 500; color: #5c5347;
  cursor: pointer; user-select: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(120,100,60,0.04);
}
.np-mobile-pill:hover {
  background: #f9f6ef; border-color: #d5cfc3;
  box-shadow: 0 2px 6px rgba(120,100,60,0.08);
}

/* Mobile dropdown popup — visible when pill is tapped */
.np-mobile-dropdown {
  background: #fffefa; border: 1px solid #e8e2d6;
  box-shadow: 0 6px 20px rgba(60,50,30,0.15);
  animation: mobile-dropdown-in 0.2s ease;
}
.np-mobile-dropdown.hidden { display: none !important; }

@keyframes mobile-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.np-actions { display: flex; gap: 10px; padding: 4px 0 18px; }
.np-actions button {
  padding: 7px 16px; border: 1px solid #ddd6c9; border-radius: 12px;
  font-size: 0.8125rem; color: #5c5347; background: #fffefa; cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(120,100,60,0.04);
}
.np-actions button:hover {
  background: #f5f0e8; border-color: #c9c0b0;
  box-shadow: 0 2px 6px rgba(120,100,60,0.08);
  transform: translateY(-0.5px);
}
.np-actions .btn-brand { color: #3d6b45; border-color: #b5d3bb; }
.np-actions .btn-brand:hover { background: #eef5ef; border-color: #8fc09a; }

/* Trail dashes — the path connecting steps */
.trail-dash {
  width: 1.5rem; height: 2px; flex-shrink: 1; min-width: 0.5rem;
  background: repeating-linear-gradient(90deg, #b5d3bb 0, #b5d3bb 5px, transparent 5px, transparent 10px);
  opacity: 0.7;
}
.trail-dash-sm {
  width: 1.4rem; height: 1px; flex-shrink: 0;
  background: repeating-linear-gradient(90deg, #d5cfc3 0, #d5cfc3 3px, transparent 3px, transparent 7px);
}

/* ---- Panel transitions (slide-in detail panels) ---- */
body.detail-open { overflow: hidden; }

.detail-backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(30,28,22,0.32);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.detail-backdrop.visible { opacity: 1; pointer-events: auto; }

.detail-panel {
  position: fixed; top: 0; right: 0;
  width: min(580px, 92vw); height: 100vh; height: 100dvh;
  background: #fdfbf7;
  border-left: 1px solid #e8e2d6;
  box-shadow: -12px 0 40px rgba(60,50,30,0.08);
  z-index: 100; transform: translateX(100%);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 32px 36px;
}
.detail-panel.visible { transform: translateX(0); }

.cluster-panel-backdrop {
  position: fixed; inset: 0; z-index: 97;
  background: rgba(30,28,22,0.32);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.cluster-panel-backdrop.visible { opacity: 1; pointer-events: auto; }

.cluster-panel {
  position: fixed; top: 0; right: 0;
  width: min(500px, 88vw); height: 100vh; height: 100dvh;
  background: #fdfbf7;
  border-left: 1px solid #e8e2d6;
  box-shadow: -12px 0 40px rgba(60,50,30,0.08);
  z-index: 98; transform: translateX(100%);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 28px 32px;
}
.cluster-panel.visible { transform: translateX(0); }

.detail-grab {
  display: none; width: 40px; height: 4px;
  background: #d5cfc3; border-radius: 2px;
  margin: 0 auto 16px; opacity: 0.6;
}

/* ---- Cluster card grid ---- */
.cluster-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.cluster-card {
  background: #fffefa;
  border: 1px solid #e8e2d6;
  border-radius: 16px;
  padding: 22px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(120,100,60,0.04);
}
.cluster-card:hover {
  box-shadow: 0 6px 20px rgba(60,50,30,0.08);
  border-color: #d5cfc3;
  transform: translateY(-2px);
}
.cluster-size-bar {
  height: 3px; border-radius: 2px;
  margin: -22px -22px 0; min-width: 20%;
  transition: width 0.3s ease;
}
.cluster-count-bubble {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 0.85rem; font-weight: 600; flex-shrink: 0;
}
.cluster-action-btn {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid #e8e2d6;
  font-size: 0.85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; transition: all 0.2s;
}
.cluster-action-btn:hover { background: #f5f0e8; }
.cluster-position {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0; cursor: pointer;
  transition: color 0.15s;
}
.cluster-position:hover .text-sm { color: #3d6b45; }
.cluster-position-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; margin-top: 6px;
}

/* ---- List view cards ---- */
.list-card {
  padding: 20px 24px;
  background: #fffefa;
  border: 1px solid #e8e2d6;
  border-radius: 16px;
  cursor: pointer; transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(120,100,60,0.04);
}
.list-card:hover {
  background: #f9f6ef;
  box-shadow: 0 4px 12px rgba(60,50,30,0.08);
}
@media (hover: hover) {
  .list-card:hover { padding-left: 28px; }
}

/* Great match — warm golden glow */
.great-match-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: #92400e; background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d;
  padding: 3px 10px; border-radius: 9999px; margin-left: 8px; vertical-align: middle;
  box-shadow: 0 1px 4px rgba(245,158,11,0.15);
}
.great-match-badge::before { content: "\2605"; font-size: 0.65rem; }
.list-card.great-match {
  border: 1px solid #fcd34d;
  border-left: 3px solid #f59e0b;
  background: linear-gradient(135deg, #fffbeb, #fef8e0);
}
.list-card.great-match:hover { background: linear-gradient(135deg, #fef3c7, #fdefc7); }
.cluster-position.great-match .text-sm { color: #92400e; font-weight: 600; }
.great-match-dot { color: #f59e0b; font-size: 0.7rem; margin-left: 4px; }
.cluster-panel-item.great-match { background: #fffbeb; border-left: 3px solid #f59e0b; }

/* Liked / declined states */
.pos-liked {
  border: 1px solid #86efac;
  border-left: 3px solid #4ade80;
  background: linear-gradient(135deg, #f0fdf4, #ecfce8);
}
.pos-liked:hover { background: linear-gradient(135deg, #dcfce7, #d4fcd0); }
.pos-declined { opacity: 0.4; }
.pos-declined .pos-title { text-decoration: line-through; }
.cluster-position.pos-liked .text-sm { color: #16a34a; font-weight: 600; }
.cluster-position.pos-declined .text-sm { text-decoration: line-through; color: #9ca3af; }
.cluster-position.pos-declined .text-xs { color: #d1d5db; }
.cluster-panel-item.pos-liked { background: #f0fdf4; border-left: 3px solid #22c55e; }
.cluster-panel-item.pos-declined { opacity: 0.45; }
.cluster-panel-item.pos-declined .text-gray-900 { text-decoration: line-through; }

.list-tag {
  display: inline-block; padding: 3px 10px; border-radius: 8px;
  font-size: 0.72rem; background: #f0ece3; color: #6b6256;
}
.list-tag-salary {
  display: inline-block; padding: 4px 12px; border-radius: 10px;
  font-size: 0.72rem; font-weight: 600;
  background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0;
}
.list-tag-location {
  display: inline-block; padding: 3px 10px; border-radius: 8px;
  font-size: 0.72rem; background: #eef4fb; color: #3b7fcf;
}
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Journey log — trail journal feel ---- */
.journey-log {
  max-height: 55vh; overflow-y: auto;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.journey-entry {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 8px; font-size: 0.8rem; line-height: 1.5;
  color: #6b6256; border-bottom: 1px solid #f5f0e8;
  animation: journey-fade-in 0.35s ease;
}
.journey-entry:last-child { border-bottom: none; }
.journey-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  margin-top: 2px; stroke-width: 2;
}
.journey-system { color: #a09888; }
.journey-system .journey-icon { stroke: #c9c0b0; }
.journey-like { color: #2d7a3e; }
.journey-like .journey-icon { stroke: #4ade80; }
.journey-dislike { color: #c43333; }
.journey-dislike .journey-icon { stroke: #ef4444; }
.journey-discovery { color: #6d3eb5; }
.journey-discovery .journey-icon { stroke: #8b5cf6; }
.journey-search { color: #4338ca; }
.journey-search .journey-icon { stroke: #6366f1; }
.journey-compass { color: #6b6256; }
.journey-compass .journey-icon { stroke: #a09888; }
.journey-insight {
  color: #874a17;
  background: linear-gradient(135deg, #fefaf0, #fdf5e3);
  border-radius: 12px; padding: 12px 14px; margin: 6px 0; border-bottom: none;
  border: 1px solid #f5e6c8;
}
.journey-insight .journey-icon { stroke: #e49720; }

/* Journal links inherit the entry's color by default */
.journey-entry a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.journey-entry a:hover { opacity: 0.8; }

@keyframes journey-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Dislike toast ---- */
.dislike-toast {
  background: #fffefa; border-radius: 16px; padding: 16px 18px;
  width: min(380px, 90vw);
  box-shadow: 0 12px 40px rgba(60,50,30,0.15); border: 1px solid #e8e2d6;
  animation: toast-in 0.3s ease;
}
.dislike-toast.toast-out { animation: toast-out 0.3s ease forwards; }

/* ---- Animations ---- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}
@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(61,107,69,0.3); }
  70% { box-shadow: 0 0 0 10px rgba(61,107,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,107,69,0); }
}
/* Gentle glow for reach-out step when user has 3+ saves */
.animate-pulse-soft {
  animation: pulse-glow 2s ease infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
/* Gentle breathing animation for loading states */
@keyframes breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

.panel-pulse { animation: pulse-glow .6s ease; }
.toast { animation: toast-in .3s ease forwards; }
.toast.toast-out { animation: toast-out .25s ease forwards; }
.skeleton {
  background: linear-gradient(90deg, #e8e2d6 25%, #f0ece3 50%, #e8e2d6 75%);
  background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease infinite;
  border-radius: 8px;
}

/* ---- Chip states ---- */
.chip {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: 9999px; font-size: 0.875rem;
  cursor: pointer; transition: all 0.2s ease;
  border: 1px solid #ddd6c9; background: #fffefa; user-select: none;
  box-shadow: 0 1px 2px rgba(120,100,60,0.04);
}
.chip:hover {
  border-color: #c9c0b0; background: #f9f6ef;
  box-shadow: 0 2px 6px rgba(120,100,60,0.08);
}
.chip.included {
  background: linear-gradient(135deg, #dcfce7, #d4fcd0);
  border-color: #4ade80; color: #166534;
}
.chip.excluded {
  background: #fee2e2; border-color: #ef4444;
  color: #991b1b; text-decoration: line-through;
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
  .detail-panel {
    width: 100%; height: 92vh; height: 92dvh;
    top: auto; bottom: 0; right: 0;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%); border-left: none;
    border-top: 1px solid #e8e2d6;
    padding: 18px 22px;
  }
  .detail-panel.visible { transform: translateY(0); }
  .detail-grab { display: block; }
  .cluster-panel { width: 100%; padding: 18px 22px; }
}

@media (max-width: 640px) {
  .cluster-card-grid { grid-template-columns: 1fr; }
  .list-card { padding: 16px 18px; }
}

/* ---- Topo-pattern hero — richer, warmer ---- */
.topo-hero {
  background-color: #f5f1e8;
  background-image:
    radial-gradient(ellipse at 15% 45%, rgba(61,107,69,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 25%, rgba(228,151,32,0.05) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 85%, rgba(139,92,246,0.02) 0%, transparent 40%);
}
.card-warm {
  background: #fffefa;
  border: 1px solid #e8e2d6;
  box-shadow: 0 1px 3px rgba(120,100,60,0.04);
}

/* Progress dots — trail markers */
.src-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ddd6c9; transition: all 0.3s;
}
.src-dot-done {
  background: #3d6b45;
  box-shadow: 0 0 0 2px rgba(61,107,69,0.15);
}
.src-dot-active {
  background: #4ade80;
  animation: pulse-dot 1.2s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

/* ============================================================
   GLOBAL OVERRIDES — warm up Tailwind defaults
   These affect elements styled via Tailwind utility classes
   in the templates, without changing the HTML.
   ============================================================ */

/* Make all white bg cards warmer */
.bg-white {
  background-color: #fffefa !important;
}

/* Soften all gray borders */
.border-gray-200 {
  border-color: #e8e2d6 !important;
}

/* Warmer input focus rings */
input:focus, textarea:focus, select:focus {
  --tw-ring-color: rgba(61,107,69,0.25) !important;
  border-color: #8fc09a !important;
}

/* Buttons: softer corners, warmer shadows */
button[type="submit"],
a[class*="bg-brand-600"] {
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(61,107,69,0.2) !important;
  transition: all 0.25s ease !important;
}
@media (hover: hover) {
  button[type="submit"]:hover,
  a[class*="bg-brand-600"]:hover {
    box-shadow: 0 4px 16px rgba(61,107,69,0.25) !important;
    transform: translateY(-1px) !important;
  }
}

/* Direction cards in onboarding: warmer (no !important on background — JS sets it for accept/reject states) */
.direction-card {
  border-color: #e8e2d6 !important;
  border-radius: 16px !important;
}

/* Softer rounded corners globally on cards */
.rounded-xl { border-radius: 16px !important; }
.rounded-lg { border-radius: 12px !important; }

/* Footer: blend into the warm bg */
footer {
  border-color: #e8e2d6 !important;
  color: #a09888 !important;
}

/* Warm up the shadow-sm utility */
.shadow-sm {
  box-shadow: 0 1px 3px rgba(120,100,60,0.06), 0 1px 2px rgba(120,100,60,0.04) !important;
}