/* KibbiSave — Website layout & theme (replaces phone mockup) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  --kb-primary: #00008b;
  --kb-primary-dark: #00008b;
  --kb-primary-light: #f0f2ff;
  --kb-accent: #ffd700;
  --kb-accent-light: #fff3cd;
  --kb-bg: #f4f6fb;
  --kb-surface: #ffffff;
  --kb-text: #111111;
  --kb-muted: #7a85a0;
  --kb-border: #dde3f0;
  --kb-success: #1a6e35;
  --kb-success-bg: #e6f4ea;
  --kb-danger: #c0392b;
  --kb-danger-bg: #fdecea;
  --kb-warning: #d4a017;
  --kb-shadow: 0 1px 4px rgba(0, 0, 56, 0.06), 0 4px 24px rgba(0, 0, 56, 0.04);
  --kb-radius: 12px;
  --kb-radius-lg: 16px;
  --kb-max: 1140px;
  --kb-nav-h: 64px;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--kb-bg);
  color: var(--kb-text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Site header (original blue bar) ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--kb-primary);
  border-bottom: none;
  box-shadow: 0 2px 12px rgba(0, 0, 139, 0.2);
}

.site-header-inner {
  max-width: var(--kb-max);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: var(--kb-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-logo {
  font-size: 1.35rem;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.site-logo span { color: var(--kb-accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
}

.site-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

.site-nav a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.site-auth-btn {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background 0.15s, border-color 0.15s;
}

.site-auth-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.site-btn-deposit {
  background: var(--kb-accent);
  color: var(--kb-primary);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}

.site-btn-deposit:hover { background: #e6c200; }

.site-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.site-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

.site-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-menu-toggle.open span:nth-child(2) { opacity: 0; }
.site-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Main content ── */
.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--kb-max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

/* Kill phone mockup chrome */
.wrap {
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
  margin-bottom: 2rem;
}

.phone {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  border-radius: var(--kb-radius-lg) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: var(--kb-shadow) !important;
}

.site-main > .wrap:last-child { margin-bottom: 0; }

/* Multi-step pages: section labels between phones */
.divider-label,
body > div[style*="text-align:center"] {
  max-width: var(--kb-max);
  margin-left: auto;
  margin-right: auto;
}

/* Hide mobile bottom tab bars — replaced by header nav */
.tab-bar { display: none !important; }

/* ── Original theme (dark blue + gold) ── */
.topbar,
.hero,
.hero-bg,
.page-hero,
.step-bar,
.step-bar-wrap,
.cal-head,
.summ-head,
.summ-total,
.sc-head,
.ms-head {
  background: var(--kb-primary) !important;
}

.logo-save,
.step-lbl.done,
.step-seg.done,
.hero-prog {
  color: var(--kb-accent) !important;
}

.step-seg.done { background: var(--kb-accent) !important; }

.deposit-btn {
  background: var(--kb-accent) !important;
  color: var(--kb-primary) !important;
}

.deposit-btn:hover { background: #e6c200 !important; }

/* Primary color replacements */
.prog-pct, .prog-bar, .gc-prog, .m-bar, .cc-prog, .cc-pct,
.stat-val, .gc-val, .m-amt, .saved-amt, .sec-link, .oas-join,
.gc-join, .explore-btn:not(.full-btn), .join-btn, .dep-btn,
.cta-btn:not(.secondary), .cp-btn, .msg-send, .tab.act .tab-lbl,
.oas-join, .site-nav a.active {
  /* handled individually below */
}

.prog-bar, .gc-prog, .m-bar, .cc-prog, .prog-bar {
  background: var(--kb-primary) !important;
}

.prog-pct, .gc-prog-pct, .gc-val, .stat-val, .m-amt, .saved-amt,
.cc-pct, .cc-target, .sec-link, .ms-val, .summ-val.blue, .sc-val.blue {
  color: var(--kb-primary) !important;
}

.oas-join, .gc-join, .explore-btn:not(.full-btn), .join-btn, .dep-btn,
.cta-btn:not(.secondary):not(.cta-btn-secondary), .cp-btn, .msg-send {
  background: var(--kb-primary) !important;
  color: #fff !important;
}

.cta-btn.secondary, .cta-btn.sec {
  background: var(--kb-surface) !important;
  color: var(--kb-primary) !important;
  border: 1.5px solid var(--kb-primary) !important;
}

.you-tag, .gc-my-rank.gold { background: var(--kb-primary) !important; }

.radio.checked {
  border-color: var(--kb-primary) !important;
  background: var(--kb-primary) !important;
}

.gs-row.selected, .pay-opt.selected, .cat-opt.selected,
.field-input.active-input, .amount-box, .saving-input,
.chip:hover, .dur-pill.act, .cat-pill.active, .stg.act, .seg.act, .tsw.act {
  border-color: var(--kb-primary) !important;
}

.gs-row.selected, .pay-opt.selected, .cat-opt.selected,
.field-input.active-input, .saving-input, .dur-pill.act, .cat-pill.active {
  background: var(--kb-primary-light) !important;
}

.range-pill, .stg.act, .seg.act, .tsw.act {
  color: var(--kb-primary) !important;
}

.stg.act { border-bottom-color: var(--kb-primary) !important; }
.seg.act, .tsw.act { border-bottom-color: var(--kb-primary) !important; }

.cat-pill.active { background: var(--kb-primary) !important; color: #fff !important; }
.cat-pill { border-color: var(--kb-primary) !important; color: var(--kb-primary) !important; }

.dur-pill.act { background: var(--kb-primary) !important; border-color: var(--kb-primary) !important; color: #fff !important; }

.dot.act { background: var(--kb-primary) !important; }

.hero-pct { color: var(--kb-primary) !important; }

.lb-card.me, .my-summary {
  border-color: var(--kb-primary) !important;
}

.me-you, .you-tag {
  background: var(--kb-primary) !important;
}

.member-row[style*="f0f2ff"], .lb-card.me {
  background: var(--kb-primary-light) !important;
}

.msg-bubble.me { background: var(--kb-primary) !important; }

.amount-input, .amount-input-row { color: var(--kb-primary) !important; border-color: var(--kb-primary) !important; }
.cursor-blink { background: var(--kb-primary) !important; }
.qa.active { background: var(--kb-primary) !important; border-color: var(--kb-primary) !important; }

.gc-icon, .gs-icon { background: var(--kb-primary-light) !important; }
.gc-period-badge { background: #e8eaf8 !important; color: var(--kb-primary) !important; }

.av, .av-edit { border-color: var(--kb-primary) !important; }
.av { background: var(--kb-accent) !important; color: var(--kb-primary) !important; }

.summ-tval { color: var(--kb-accent) !important; }

/* Success / danger — keep semantic greens/reds, slightly refreshed */
.mv-up, .gc-lb-arrow.up, .gc-lead.ahead, .mv-up, .lead-val.green,
.stat-chg, .deadline-text, .gc-slots.open, .cc-access.open,
.pay-badge, .rank-nudge, .success-circle, .rn-icon {
  /* greens */
}

.mv-up, .gc-lb-arrow.up, .gc-lead.ahead, .lead-val.green, .stat-chg, .deadline-text,
.gc-slots.open, .cc-access.open, .pay-badge {
  color: var(--kb-success) !important;
}

.gc-lead.ahead { background: var(--kb-success-bg) !important; color: var(--kb-success) !important; }
.cc-access.open { background: var(--kb-success-bg) !important; }

.mv-dn, .gc-lb-arrow.down, .gc-lead.behind, .lead-val.red, .gc-date-chip.closes span,
.cc-closes-date, .sc-val.red {
  color: var(--kb-danger) !important;
}

.gc-lead.behind { background: var(--kb-danger-bg) !important; color: var(--kb-danger) !important; }

/* Page-level inner headers become card headers */
.topbar {
  padding: 1rem 1.5rem !important;
  border-bottom: none !important;
}

/* ── Responsive content grids ── */
@media (min-width: 768px) {
  .site-main--home .phone {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "topbar topbar"
      "hero hero"
      "oas oas"
      "pct stats"
      "groups groups";
  }

  .site-main--home .topbar { grid-area: topbar; }
  .site-main--home .hero-bg { grid-area: hero; }
  .site-main--home .oas-wrap { grid-area: oas; }
  .site-main--home .hero-pct-section { grid-area: pct; border-right: 1px solid var(--kb-border); }
  .site-main--home .stat-row {
    grid-area: stats;
    padding: 1.5rem !important;
    align-content: center;
  }
  .site-main--home .sec { grid-area: groups; grid-column: 1 / -1; }

  .site-main--home .group-card {
    display: inline-block;
    width: calc(50% - 0.5rem);
    vertical-align: top;
  }

  .site-main--home .sec { display: flex; flex-wrap: wrap; gap: 1rem; }
  .site-main--home .sec-head { width: 100%; }
  .site-main--home .group-card { flex: 1 1 calc(50% - 0.5rem); margin-bottom: 0 !important; }

  .cards-hscroll {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
    overflow: visible !important;
    padding: 0 1.5rem 1.5rem !important;
  }

  .cause-card { width: auto !important; }

  .stat-row { grid-template-columns: repeat(4, 1fr) !important; }

  .site-main--profile .phone > .body .stat-row {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .site-main--group-detail .phone {
    min-height: auto !important;
    max-height: none !important;
  }

  .site-main--group-detail .scroll-body {
    display: grid !important;
    grid-template-columns: 1fr 380px;
  }

  .site-main--group-detail .standings-section { border-right: 1px solid var(--kb-border); }
  .site-main--group-detail .deposit-cta { grid-column: 1; }

  .site-main--leaderboard .list-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .site-main--groups .swipe-outer { overflow: visible !important; }
  .site-main--groups .swipe-inner { width: 100% !important; transform: none !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .site-main--groups .swipe-screen { width: 100% !important; }
  .site-main--groups .sec-toggle,
  .site-main--groups .swipe-hint,
  .site-main--groups .page-dots { display: none !important; }

  .site-main--deposit .wrap { max-width: 520px; margin-left: auto; margin-right: auto; }

  .site-main--create .wrap { max-width: 560px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 1024px) {
  .hero-pct { font-size: 5rem !important; }
  .hero-val { font-size: 2.25rem !important; }
  .hero-name { font-size: 1.75rem !important; }
  .page-title { font-size: 1.5rem !important; }
}

/* Hide redundant in-page app bars where site header exists */
.site-main--home .topbar,
.site-main--community .topbar,
.site-main--leaderboard .topbar,
.site-main--groups .topbar,
.site-main--profile .topbar {
  display: none !important;
}

/* ── Page footer links (replaces sendPrompt bar) ── */
.page-links {
  margin-top: 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.page-links a {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border-radius: 20px;
  border: 1.5px solid var(--kb-primary);
  background: var(--kb-surface);
  color: var(--kb-primary);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.page-links a:hover {
  background: var(--kb-primary-light);
  border-color: var(--kb-primary);
}

.site-footer {
  border-top: 1px solid var(--kb-border);
  background: var(--kb-surface);
  padding: 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--kb-muted);
}

/* ── Mobile nav drawer ── */
@media (max-width: 767px) {
  .site-menu-toggle { display: flex; }

  .site-nav {
    position: fixed;
    top: var(--kb-nav-h);
    left: 0;
    right: 0;
    background: var(--kb-primary);
    border-bottom: none;
    flex-direction: column;
    padding: 0.75rem;
    gap: 0.25rem;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s, opacity 0.25s;
    box-shadow: var(--kb-shadow);
  }

  .site-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav a {
    width: 100%;
    padding: 0.75rem 1rem;
  }

  .site-header-actions .site-btn-deposit { display: none; }

  .site-nav .nav-deposit-mobile {
    display: block;
    background: var(--kb-accent);
    color: var(--kb-primary) !important;
    text-align: center;
    margin-top: 0.5rem;
  }

  .site-nav .nav-deposit-mobile:hover { background: #e6c200 !important; }

  .site-nav .nav-sign-in-mobile {
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.35);
    text-align: center;
    margin-top: 0.25rem;
  }
}

@media (min-width: 768px) {
  .site-nav .nav-deposit-mobile { display: none; }
  .site-nav .nav-sign-in-mobile { display: none; }
}

/* Typography scale-up for website readability */
.sec-title, .gc-name, .card-name, .s-title, .section-title { font-size: 1rem !important; }
.hero-cat, .stat-lbl, .gc-sub, .m-group { font-size: 0.75rem !important; }
.member-row { padding: 0.75rem 0 !important; }
.sec, .prog-section, .info-row, .join-section { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }