/**
 * Treatly Design System v2
 * One brand accent · one gradient language · neutral surfaces · pulse identity
 */

:root {
  --tl-gradient-hero: linear-gradient(
    132deg,
    color-mix(in srgb, var(--brand) 88%, #0d5c63) 0%,
    var(--brand) 52%,
    color-mix(in srgb, var(--brand) 82%, #3d9aa3) 100%
  );
  --tl-gradient-hero-deep: linear-gradient(
    132deg,
    #3d4f52 0%,
    #5a7a80 48%,
    #7a9a9e 100%
  );
  --tl-gradient-soft: linear-gradient(
    132deg,
    #B8A8C8 0%,
    #A898B8 48%,
    #B0A0C0 100%
  );
  --tl-gradient-fill: linear-gradient(
    180deg,
    rgba(var(--brand-rgb), 0.28) 0%,
    rgba(var(--brand-rgb), 0) 100%
  );
  --r-hero: 24px;
  --r-card: 18px;
  --r-chip: 12px;
  --r-btn: 11px;
  --elev-1: 0 2px 10px rgba(28, 25, 23, 0.05);
  --elev-2: 0 10px 32px rgba(28, 25, 23, 0.08);
  --elev-hero: 0 8px 24px rgba(var(--brand-rgb), 0.14);
}

/* Signature: ambient pulse on shell */
#app::before {
  content: '';
  position: absolute;
  top: -12%;
  left: 50%;
  width: 140%;
  max-width: 520px;
  height: 42%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 70% 55% at 50% 0%,
    rgba(var(--brand-rgb), 0.06),
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
  animation: tlPulseAmbient 8s ease-in-out infinite;
}
body.tab-home #app::before {
  display: none;
}
#main,
.nav {
  position: relative;
  z-index: 1;
}
@keyframes tlPulseAmbient {
  0%,
  100% {
    opacity: 0.85;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.04);
  }
}

/* Typography hierarchy */
.tl-kicker,
.treats-pulse-kicker,
.treats-shop-kicker,
.prof-section-title,
.mood-graph-tabs .mood-graph-tab {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--t4) !important;
}
.tl-title,
.treats-section-title,
.screen-hdr-title,
.friends-hero-title,
.stats-hero-title {
  font-family: Manrope, sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--text) !important;
  line-height: 1.15 !important;
}
.tl-sub,
.treats-section-sub,
.screen-hdr-sub,
.friends-hero-sub {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
}
.tl-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--t4);
}

/* One gradient language — heroes only */
.stats-hero-banner,
.treats-pulse-card,
.treats-shop-hero-card {
  background: var(--tl-gradient-hero) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--r-hero) !important;
  box-shadow: var(--elev-hero) !important;
  color: #fff !important;
}
.treats-shop-hero-card {
  position: relative;
  overflow: hidden;
}
.treats-shop-hero-card::after {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
  pointer-events: none;
  animation: tlPulseGlow 4s ease-in-out infinite;
}
@keyframes tlPulseGlow {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
.stats-hero-glow,
.treats-pulse-glow {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 70%) !important;
}
.stats-hero-kicker {
  margin: 0 0 4px;
  position: relative;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.stats-hero-title,
.treats-shop-title {
  color: #fff !important;
  font-size: 22px !important;
}
.stats-hero-sub,
.stats-hero-forecast,
.treats-shop-lead,
.treats-shop-kicker {
  color: rgba(255, 255, 255, 0.82) !important;
}
.treats-shop-kicker,
.stats-hero-banner .tl-kicker {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Neutral stats metrics (no rainbow tiles) */
.vessel-metrics--adventure {
  display: none !important;
}
.vessel-metric,
.stat-box {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--elev-1) !important;
  color: var(--text) !important;
}
.vessel-metric--grad-a,
.vessel-metric--grad-b,
.vessel-metric--grad-c,
.vessel-metric--grad-d {
  background: var(--surface) !important;
}
.vessel-metric-num,
.stat-box-num {
  color: var(--text) !important;
  font-size: 22px !important;
}
.vessel-metric-lbl,
.stat-box-lbl {
  color: var(--t4) !important;
  opacity: 1 !important;
}
.vessel-metric-num:first-child {
  color: var(--brand) !important;
}
.vessel-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.vessel-forecast-card,
.vessel-patterns,
.stats-wb-card,
.treats-wb-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
  padding: 14px;
}
.vessel-forecast-card h3,
.vessel-patterns h3,
.stats-wb-card h3 {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--t4) !important;
  margin: 0 0 8px !important;
}
.vessel-forecast-card p,
.vessel-patterns li {
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  line-height: 1.45;
}

/* Mood charts — expressive, not spreadsheet */
.mood-graph-wrap,
.tl-chart-panel {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-card);
  padding: 12px 12px 8px;
  box-shadow: var(--elev-1);
  margin-bottom: 12px;
}
.tl-chart-panel--inset {
  padding: 6px 2px 2px !important;
  margin: 0 0 8px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.mood-graph-wrap canvas,
.stats-chart,
.treats-chart {
  display: block;
  width: 100% !important;
  height: auto;
  border-radius: var(--r-chip);
  background: transparent !important;
}
.vessel-bar-fill {
  background: linear-gradient(180deg, var(--brand2), var(--brand)) !important;
  border-radius: 8px 8px 4px 4px !important;
}
.vessel-chart-card {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
}

/* Feed mood headers use inline gradients from wellbeing.js + feed-social.css */

/* Treat collection cards — layered, alive */
.tstore-card {
  border-radius: var(--r-card) !important;
  min-height: 148px !important;
  padding: 12px 12px 10px !important;
  box-shadow: var(--elev-1) !important;
  border: 1px solid var(--border2) !important;
  background: var(--surface) !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tstore-card:hover {
  box-shadow: var(--elev-2) !important;
}
.tstore-card--owned {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--border2)) !important;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface)) !important;
}
.tstore-preview {
  width: 100%;
  min-height: 52px;
  border-radius: var(--r-chip);
  margin-bottom: 8px;
  background: var(--s2);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.tstore-preview--note {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tstore-preview-line {
  display: block;
  height: 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand) 35%, var(--border));
}
.tstore-preview-line.short {
  width: 55%;
  opacity: 0.7;
}
.tstore-preview--voice {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 10px 8px 8px;
}
.tstore-preview-bar {
  width: 4px;
  border-radius: 3px;
  background: var(--brand);
  opacity: 0.55;
}
.tstore-preview--photo {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand) 18%, var(--s2)),
    var(--s3)
  );
}
.tstore-preview--photo::after {
  content: '📷';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  opacity: 0.45;
}
.tstore-preview--gif {
  background: repeating-linear-gradient(
    -12deg,
    var(--s2),
    var(--s2) 6px,
    var(--s3) 6px,
    var(--s3) 12px
  );
}
.tstore-preview--spotify {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
}
.tstore-preview-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1db954;
  opacity: 0.85;
  flex-shrink: 0;
}
.tstore-preview--spotify::after {
  content: '';
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--border);
}
.tstore-preview--promise {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  opacity: 0.5;
}
.tstore-emoji {
  font-size: 22px !important;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}
.tstore-name {
  font-size: 14px !important;
  margin-top: 2px !important;
}
.tstore-desc {
  font-size: 11px !important;
  color: var(--t3) !important;
  flex: 0 !important;
}
.tstore-meta {
  margin: 4px 0 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.02em;
}
.tstore-foot {
  margin-top: auto !important;
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
  color: var(--t4) !important;
}

/* Radius hierarchy */
.shovl .sheet {
  border-radius: var(--r-hero) var(--r-hero) 0 0 !important;
}
.finput,
.ainput,
.chip {
  border-radius: var(--r-btn) !important;
}
.person-feed-card {
  border-radius: var(--r-hero) !important;
}
.cta,
.abtn {
  border-radius: var(--r-chip) !important;
}

/* Bottom nav — same grey as app background */
.nav {
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: none !important;
  box-shadow: none !important;
}
.ni.active {
  background: transparent !important;
}
.ni.active::before {
  display: none !important;
}
.nav--product .ni-add .ni-add-ring {
  background: var(--btn-ink, #1c1917) !important;
  border-color: var(--bg) !important;
  box-shadow: 0 4px 16px rgba(var(--btn-ink-rgb, 28, 25, 23), 0.2) !important;
}

/* Section depth on scroll screens */
body.tab-vessel .vessel-scroll,
body.tab-rewards .treats-tab-scroll {
  background: transparent;
}
.treats-collection-section {
  margin-top: 8px;
  padding: 14px 12px 12px;
  border-radius: var(--r-hero);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border2);
  box-shadow: var(--elev-1);
}
.treat-pack-card {
  border-radius: var(--r-card) !important;
  box-shadow: var(--elev-1) !important;
}

/* Pro / max accents → brand only */
.treats-plan-banner--max,
.treats-plan-card--max,
.tstore-card--max.tstore-card--locked {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--border2)) !important;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface)) !important;
}
.treats-plan-btn--max,
.treat-detail-max-link {
  background: var(--brand) !important;
  color: #fff !important;
}

/* ── Home feed: calmer spacing (mood colours from feed-social.css) ── */
#s-home,
#home-scroll {
  background: transparent;
}
.home-top-bar--social {
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-bottom: 0 !important;
}
.home-mood-panel--rail {
  border-radius: var(--r-card) !important;
  border-color: var(--border2) !important;
  background: var(--surface) !important;
  box-shadow: var(--elev-1) !important;
}
.feed-section-hdr--feed {
  max-width: min(400px, calc(100vw - 32px));
  margin: 10px auto 0;
  padding: 0 6px 4px;
}
.feed-section-hdr--feed .feed-section-title {
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}

.feed-stream--ig {
  gap: 8px !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}
.feed-stream--social .person-feed-card,
.feed-stream--ig .person-feed-card {
  border-radius: var(--r-hero) !important;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
  box-shadow: var(--elev-2) !important;
  overflow: visible !important;
}
.feed-stream--social .person-feed-card--live,
.feed-stream--ig .person-feed-card--live {
  box-shadow: 0 14px 40px rgba(var(--brand-rgb), 0.18) !important;
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border)) !important;
}
.feed-stream--social .person-feed-tasks {
  padding: 6px 10px 8px !important;
  margin-top: -4px;
}
.feed-stream--social .task-row {
  border-radius: var(--r-chip) !important;
  box-shadow: var(--elev-1) !important;
  margin-bottom: 6px !important;
  transform: translateZ(0);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.feed-stream--social .task-row:active {
  transform: scale(0.99);
}
.feed-stream--social .person-feed-foot {
  background: color-mix(in srgb, var(--s2) 70%, var(--surface)) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--r-hero) var(--r-hero);
}
.feed-stream--social .person-feed-score {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  font-size: 15px !important;
  padding: 5px 9px !important;
  border-radius: var(--r-chip) !important;
}
.feed-stream--social .person-feed-hdr--muted .person-feed-score {
  background: var(--s2) !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}
.feed-tail {
  margin-top: 18px !important;
  border-radius: var(--r-hero) !important;
  box-shadow: var(--elev-1) !important;
}
.feed-tail-card {
  border-radius: var(--r-card) !important;
  transition: transform 0.14s ease;
}
.feed-tail-card:active {
  transform: scale(0.99);
}
.momentum-card {
  border-radius: var(--r-card) !important;
}
.momentum-card--live .momentum-card-bg,
.momentum-card--warm .momentum-card-bg,
.momentum-card--alert .momentum-card-bg,
.momentum-card--social .momentum-card-bg,
.momentum-card--calm .momentum-card-bg,
.momentum-card--challenge .momentum-card-bg {
  background: linear-gradient(
    135deg,
    rgba(var(--brand-rgb), 0.1),
    var(--surface) 58%
  ) !important;
}
.momentum-card--live .momentum-cta {
  background: var(--brand) !important;
}