/* Faith Forward — style.css (New Life-like) */
:root{
  --teal:#30D5C8;
  --teal2:#1fb9ae;
  --bg:#eef3f4;
  --panel:#ffffff;
  --panel2:rgba(255,255,255,.74);
  --ink:#1f2430;
  --muted:rgba(31,36,48,.65);
  --line:rgba(31,36,48,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
  --radius2: 24px;
  --content: min(1050px, 92vw);
}

*{ box-sizing:border-box; }
html, body{overflow-x:hidden; height:100%; }
body{overflow-x:hidden;
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 700px at 15% 0%, rgba(48,213,200,.20), transparent 55%),
              radial-gradient(900px 600px at 85% 10%, rgba(48,213,200,.12), transparent 60%),
              var(--bg);
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(90deg, var(--teal), var(--teal2));
  color:#fff;
  padding: 14px 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  max-width: var(--content);
  margin: 0 auto;
}
.brand .mark{
  width:40px; height:40px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.18);
  font-weight: 800;
}
.brandText{ flex:1; }
.brandName{ font-size: 1.1rem; font-weight: 800; line-height: 1.1; }
.brandTag{ font-size: .85rem; opacity: .92; }

/* Shell */
.shell{
  max-width: var(--content);
  margin: 0 auto;
  padding: 12px 0 40px;
}

/* Tabs */
.tabs{
  position: sticky;
  top: 68px;
  z-index: 40;
  display:flex;
  gap:8px;
  padding: 10px 12px;
  overflow:auto;
  background: rgba(238,243,244,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.6);
}
.tab{
  border:1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.65);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  color: rgba(31,36,48,.78);
  cursor:pointer;
  white-space: nowrap;
}
.tab.active{
  background: #fff;
  border-color: rgba(255,255,255,.95);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* Screens */
.screen{ display:none; padding: 12px 12px 0; }
.screen.active{ display:block; }

/* Layout */
.grid{ display:grid; grid-template-columns: 1.2fr .9fr; gap: 14px; }
@media (max-width: 920px){
  .grid{ grid-template-columns: 1fr; }
  .tabs{ top: 64px; }
}
.col{ display:flex; flex-direction: column; gap: 14px; }

/* Cards */
.card{
  background: var(--panel);
  border-radius: var(--radius2);
  padding: 14px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.75);
}
.card.hero{
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(48,213,200,.22), transparent 60%),
    rgba(255,255,255,.85);
}
.card.tip{
  background: linear-gradient(180deg, rgba(48,213,200,.14), rgba(255,255,255,.85));
}

.cardHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.cardTitle{ font-weight: 900; }
.cardNote{ font-size: .88rem; color: var(--muted); }

/* Text */
.kicker{ font-size:.9rem; color: var(--muted); font-weight: 700; }
.h1{ margin: 6px 0 0; font-size: 1.45rem; letter-spacing: -0.02em; }
.h2{ font-size: 1.15rem; font-weight: 900; }
.muted{ color: var(--muted); }
.small{ font-size: .85rem; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; overflow-wrap:anywhere; word-break:break-word; }
.verse{ font-size: 1.02rem; line-height: 1.5; margin: 6px 0 0; }
.list{ margin: 10px 0 0; padding-left: 20px; }
.prose{ line-height: 1.55; }

/* Buttons */
.rowWrap{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
.btn{
  border:none;
  cursor:pointer;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  color: rgba(31,36,48,.86);
  background: rgba(48,213,200,.12);
}
.btn:hover{ filter: brightness(0.98); }
.btn.primary{
  background: linear-gradient(90deg, var(--teal), var(--teal2));
  color: #fff;
}
.btn.ghost{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(31,36,48,.10);
}
.btn.danger{
  background: rgba(255, 64, 64, .12);
  color: rgba(145, 18, 18, .95);
  border: 1px solid rgba(255, 64, 64, .18);
}

/* Pills */
.pill{
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .85rem;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(31,36,48,.10);
  color: rgba(31,36,48,.72);
}
.heroTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

/* Stats */
.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.stat{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(31,36,48,.08);
  border-radius: 16px;
  padding: 10px;
}
.statNum{ font-weight: 950; font-size: 1.35rem; }
.statLbl{ color: var(--muted); font-weight: 700; font-size: .85rem; }

/* Inputs */
.input{
  width: min(520px, 100%);
  border-radius: 14px;
  border: 1px solid rgba(31,36,48,.12);
  background: rgba(255,255,255,.78);
  padding: 10px 12px;
  font-weight: 650;
}
textarea.input{ width: 100%; resize: vertical; }

.field{ flex:1; min-width: 220px; }
.label{ font-size: .85rem; font-weight: 900; color: rgba(31,36,48,.72); margin-bottom: 6px; display:block; }

/* Stacks */
.stack{ display:flex; flex-direction:column; gap: 10px; margin-top: 12px; }

/* Progress grid */
.progressGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:100%;max-width:100%}
@media (max-width: 520px){
  .progressGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:100%;max-width:100%}
}
.dayChip{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(31,36,48,.10);
  background: rgba(255,255,255,.70);
}
.dayChip.done{
  background: rgba(48,213,200,.18);
  border-color: rgba(48,213,200,.30);
}
.dayChip .d{ font-weight: 950; }
.dayChip .t{ font-size: .82rem; color: var(--muted); overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Modals */
.modal{
  border:none;
  border-radius: 20px;
  width: min(980px, 92vw);
  max-height: 86vh;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.25);
}

.modal::backdrop{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
}
.modalTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 14px;
  background: rgba(48,213,200,.16);
  border-bottom: 1px solid rgba(31,36,48,.08);
}
.modalBody{ padding: 14px; overflow:auto; -webkit-overflow-scrolling: touch; }
.modalBottom{
  padding: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  border-top: 1px solid rgba(31,36,48,.08);
  background: rgba(255,255,255,.8);
}
.block{ margin-bottom: 14px; }
.verseLine{ display:flex; flex-direction:column; gap: 6px; }

/* QR */
.qrWrap{ margin-top: 10px; }
.qrWrap.hidden{ display:none; }
.qrBox{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(31,36,48,.10);
  background: rgba(255,255,255,.75);
}
.qrText{ display:flex; flex-direction:column; gap: 6px; }

/* Settings rows */
.settingRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(31,36,48,.08);
  background: rgba(255,255,255,.70);
}
.settingTitle{ font-weight: 950; }

/* Footer */
.foot{ padding: 18px 12px 30px; text-align:center; }


/* Journey (Progress) */
.progressJourney{margin:14px 0 12px; padding:14px; border-radius:18px; background:rgba(255,255,255,.72); box-shadow: 0 12px 30px rgba(0,0,0,.06);}
.journeyHead{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px;}
.journeyTitle{font-weight:800;}
.journeyNote{font-size:.9rem; opacity:.75;}

.weekGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px;}
.weekCard{border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:12px; background:rgba(255,255,255,.78);}
.weekCard.current{outline:2px solid rgba(48,213,200,.45); box-shadow: 0 14px 34px rgba(0,0,0,.07);}
.weekTop{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px;}
.weekLabel{font-weight:800;}
.weekRange{font-weight:600; font-size:.85rem; opacity:.65; margin-left:6px;}
.weekStats{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(48,213,200,.16); font-weight:700; font-size:.8rem;}
.pill.ghost{background:rgba(0,0,0,.05); font-weight:700;}
.weekBar{height:10px; border-radius:999px; background:rgba(0,0,0,.06); overflow:hidden;}
.weekFill{height:100%; border-radius:999px; background:rgba(48,213,200,.9);}
.weekLine{margin-top:10px; font-size:.92rem; opacity:.85;}
.weekMilestone{margin-top:6px; font-size:.85rem; font-weight:800; opacity:.75;}

.dayChip .badge{margin-left:8px; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:999px; font-weight:900; font-size:.75rem; background:rgba(0,0,0,.07);}
.dayChip.done .badge{background:rgba(48,213,200,.25);}
.dayChip.current .badge{background:rgba(48,213,200,.22);}
.dayChip .noteDot{margin-left:8px; font-size:.8rem; opacity:.85;}
.dayChip.hasNote{border-color: rgba(0,0,0,.10);}


/* Dialog backdrop */
dialog::backdrop{background: rgba(0,0,0,.35); backdrop-filter: blur(2px);}

/* Mobile dialogs: use a bottom sheet */
@media (max-width:720px){
  .modal{
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-radius: 18px 18px 0 0;
    position: fixed;
    inset: auto 0 0 0; /* bottom */
    max-height: 88vh;
  }
  .modalTop{
    padding: 12px 12px;
  }
  .modalTop .btn{
    padding: 10px 12px;
    border-radius: 999px;
  }
  .modalBody{
    padding: 12px;
    max-height: calc(88vh - 64px);
  }
}


/* Mobile polish: QR + Invite buttons */
@media (max-width: 520px){
  .rowWrap{ gap: 8px; }
  .rowWrap .btn{ flex: 1 1 auto; }
  .qrBox{ flex-direction:column; align-items:flex-start; }
  #qrCanvas{ width: 200px; height: 200px; max-width: 80vw; }
  .qrText{ width: 100%; }
}