/* 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 {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 1.25rem;
  height: var(--kb-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.35rem;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.site-logo-mark {
  display: block;
  height: 1.75rem;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  object-fit: contain;
  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;
  min-width: 0;
}

.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: none;
  margin: 0;
  padding: 1.5rem 1.25rem 3rem;
}

/* Kill phone mockup chrome (override per-page inline 320px mockup styles) */
.site-main .wrap {
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 auto 2rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

.site-main .phone {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !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 .phone > * {
  min-width: 0;
}

.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,
a.oas-join, a.gc-join {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.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) {
  html,
  body {
    overflow-x: clip;
  }

  .site-header-inner {
    padding: 0 2rem;
  }

  .site-nav {
    justify-content: center;
    gap: 0.35rem;
    flex: 1;
  }

  .site-nav a {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }

  .site-main {
    padding: 2rem 2rem 3rem;
    width: 100%;
    max-width: none;
  }

  .site-main .wrap {
    width: 100% !important;
    max-width: none !important;
  }

  .site-main .phone {
    width: 100% !important;
    max-width: none !important;
    border-radius: var(--kb-radius-lg) !important;
  }

  /* ── Home dashboard (see kibbisave-home.css) ── */
  .site-main--home {
    padding: 1.5rem 1.5rem 2rem !important;
  }

  /* ── Community ── */
  .site-main--community .page-hero {
    padding: 1.25rem 1.5rem 1.5rem !important;
  }

  .site-main--community .cat-scroll {
    flex-wrap: wrap;
    overflow: visible;
    padding: 1rem 1.5rem 0 !important;
    gap: 0.5rem;
  }

  .site-main--community .sec-head,
  .site-main--community .sec-head2 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

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

  .site-main--community .cause-card {
    width: auto !important;
    max-width: none !important;
  }

  /* ── Leaderboard (FPL-style table) ── */
  .site-main--leaderboard {
    padding: 0 !important;
  }

  .site-main--leaderboard .lb-board {
    border-radius: 0;
    min-height: calc(100vh - var(--kb-nav-h) - 4rem);
  }

  .site-main--leaderboard .lb-toolbar,
  .site-main--leaderboard .lb-updated {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .site-main--leaderboard .lb-table thead th.col-rank,
  .site-main--leaderboard .lb-table td.col-rank {
    padding-left: 1.5rem !important;
  }

  .site-main--leaderboard .lb-table thead th.col-total,
  .site-main--leaderboard .lb-table td.col-total {
    padding-right: 1.5rem !important;
  }

  .site-main--leaderboard .col-gw,
  .site-main--leaderboard .col-total {
    width: 5.5rem;
  }

  .site-main--leaderboard .lb-badge {
    width: 36px;
    height: 36px;
  }

  .site-main--leaderboard .lb-team-name {
    font-size: 0.95rem;
  }

  .site-main--leaderboard .lb-table td {
    padding: 1rem 0.75rem;
  }

  /* ── Profile ── */
  .site-main--profile .phone {
    display: grid !important;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    grid-template-areas: "hero body";
    align-items: start;
  }

  .site-main--profile .hero {
    grid-area: hero;
    min-height: 100%;
    border-right: 1px solid var(--kb-border);
  }

  .site-main--profile .body {
    grid-area: body;
    overflow: visible !important;
  }

  .site-main--profile .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 1.25rem 1.5rem 0 !important;
  }

  .site-main--profile .badges-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.75rem;
    overflow: visible;
  }

  .site-main--profile .badge-card {
    min-width: 0 !important;
  }

  .site-main--profile .menu-sec {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.5rem 0 !important;
  }

  .site-main--profile .menu-row {
    margin-bottom: 0 !important;
  }

  .site-main--profile .signout {
    margin: 1rem 1.5rem 1.5rem !important;
  }

  /* ── Groups ── */
  .site-main--groups .dur-wrap {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .site-main--groups .dur-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.35rem !important;
  }

  .site-main--groups .dur-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  .site-main--groups .dur-pill.dp-all {
    flex: 0.9 1 0 !important;
  }

  .site-main--groups .dur-others-sub {
    display: none;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.35rem !important;
  }

  .site-main--groups .dur-others-sub.show {
    display: flex !important;
  }

  .site-main--groups .dur-other-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .site-main--groups .sec-toggle {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .site-main--groups .stg {
    width: 100% !important;
    justify-content: center !important;
  }

  .site-main--groups .range-sec {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .site-main--groups .swipe-screen {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1rem !important;
    align-content: start;
    padding: 0 0 1rem !important;
  }

  .site-main--groups .groups-empty {
    grid-column: 1 / -1;
  }

  .site-main--groups .create-prompt {
    grid-column: 1 / -1;
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }

  .site-main--groups .swipe-outer {
    overflow: visible !important;
  }

  .site-main--groups .swipe-inner {
    width: 100% !important;
    transform: none !important;
    display: block !important;
  }

  .site-main--groups .swipe-screen {
    width: 100% !important;
  }

  .site-main--groups .swipe-inner:not(.show-private) .swipe-screen:last-child {
    display: none;
  }

  .site-main--groups .swipe-inner.show-private .swipe-screen:first-child {
    display: none;
  }

  .site-main--groups .swipe-hint,
  .site-main--groups .page-dots {
    display: none !important;
  }

  /* ── Group detail ── */
  .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: minmax(0, 1fr) minmax(280px, 380px);
  }

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

  .site-main--group-detail .deposit-cta {
    grid-column: 1;
  }

  /* ── Forms ── */
  .site-main--deposit .wrap,
  .site-main--create .wrap {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .site-main--deposit .phone,
  .site-main--create .phone {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .site-main--profile .phone {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "hero"
      "body" !important;
  }

  .site-main--profile .hero {
    border-right: none !important;
    border-bottom: 1px solid var(--kb-border);
  }
}

@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; }

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

  .site-main--community .cards-hscroll {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !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 {
  width: 100%;
  border-top: 1px solid var(--kb-border);
  background: var(--kb-surface);
  padding: 1.25rem 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--kb-muted);
}

/* ── Mobile nav drawer ── */
@media (max-width: 767px) {
  .site-header-inner {
    justify-content: flex-start;
  }

  .site-menu-toggle {
    display: flex;
    margin-left: auto;
    flex-shrink: 0;
  }

  .site-header-actions {
    flex-shrink: 0;
  }

  .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:not(.open) {
    display: none;
  }

  .site-nav.open {
    display: flex;
    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; }