/* TLRD 25-Day Challenge — clickable prototype styles
   Mobile-first; on desktop the phone column is centered (not stretched). */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font-body);
  color: var(--foreground-primary);
  background: var(--surface-primary);
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

#desktop-banner { display: none; }

/* The phone frame. On phones it fills the dynamic viewport; on desktop it's a centered column. */
.phone {
  width: 100%;
  max-width: 440px;
  height: 100dvh;
  flex: 1 1 auto;
  background: var(--surface-primary);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#app { min-height: 0; }
@media (min-width: 760px) {
  body {
    padding: 24px;
    gap: 28px;
    align-items: center;
    background:
      radial-gradient(circle at 18% 18%, rgba(217,71,63,.16), transparent 30%),
      radial-gradient(circle at 90% 10%, rgba(232,169,82,.22), transparent 30%),
      #E8DECE;
  }
  #desktop-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: min(360px, calc(100vw - 520px));
    min-width: 280px;
    color: var(--foreground-primary);
  }
  .desktop-banner-card {
    position: relative;
    background: rgba(255,250,242,.86);
    border: 1px solid rgba(120,98,74,.16);
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(40,30,20,.16);
    padding: 28px;
  }
  .qr-collapse {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: 0;
    color: var(--foreground-muted);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px;
  }
  .qr-show {
    display: none;
    align-items: center;
    background: rgba(255,250,242,.92);
    border: 1px solid rgba(120,98,74,.18);
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(40,30,20,.12);
    color: var(--foreground-primary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    cursor: pointer;
  }
  #desktop-banner.collapsed .desktop-banner-card { display: none; }
  #desktop-banner.collapsed .qr-show { display: inline-flex; }
  .desktop-banner-card h2 { font-size: 26px; margin-top: 8px; }
  .desktop-banner-card p { font-size: 16px; }
  .desktop-kicker {
    color: var(--accent-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  #desktop-qr {
    display: block;
    margin-top: 20px;
    padding: 10px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(40,30,20,.10);
  }
  .phone {
    flex: 0 0 440px;
    height: min(900px, calc(100dvh - 32px));
    border-radius: 38px;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
  }
}

/* Wide desktop: center the phone in the viewport and float the QR box
   into the left margin (taken out of flex flow so it doesn't offset the phone). */
@media (min-width: 1080px) {
  #desktop-banner {
    position: fixed;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: min(320px, calc((100vw - 480px) / 2 - 40px));
    min-width: 240px;
  }
}

/* ---- View scaffolding ---- */
.view { display: none; flex-direction: column; height: 100%; min-height: 0; flex: 1; }
.view.active { display: flex; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pad { padding: 14px 20px 28px; }

/* ---- Typography ---- */
h1, h2, h3 { font-family: var(--font-heading); margin: 0; line-height: 1.15; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 700; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-red); }
.muted { color: var(--foreground-secondary); }
.hint { color: var(--foreground-muted); font-size: 14px; line-height: 1.45; }
p { line-height: 1.55; color: var(--foreground-secondary); margin: 6px 0 0; font-size: 17px; }

/* ---- Buttons ---- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 17px; font-weight: 700;
  padding: 16px 20px; border-radius: var(--radius-full);
  background: var(--accent-red); color: var(--on-accent);
  box-shadow: 0 8px 18px rgba(217,71,63,.28);
  transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(.98); background: var(--accent-red-dark); }
.btn.secondary { background: var(--surface-card); color: var(--foreground-primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); border: 1px solid var(--border-subtle); }
.btn.ghost { background: transparent; color: var(--foreground-secondary); box-shadow: none; font-weight: 600; }
.btn.gold { background: var(--surface-card); color: var(--foreground-primary); }
.btn.dark { background: #1c1916; color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.btn:focus-visible, .row:focus-visible, .tab:focus-visible, .skip:focus-visible, .field:focus-visible {
  outline: 3px solid var(--accent-gold);
  outline-offset: 3px;
}

/* ---- Cards ---- */
.card {
  background: var(--surface-card); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: 0 2px 12px rgba(40,30,20,.05);
  border: 1px solid rgba(231,221,205,.6);
}
.chip {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 11px; border-radius: var(--radius-full);
  background: var(--accent-red-soft); color: var(--accent-red);
}
.chip.gold { background: var(--accent-gold-soft); color: #9a6a1e; }
.chip.green { background: var(--success-green-soft); color: #2f7a55; }

/* ---- Progress ring ---- */
.ring-wrap { display: flex; align-items: center; gap: 16px; }
.ring { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); }
.ring .label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring .pct { font-family: var(--font-heading); font-weight: 800; font-size: 22px; }
.ring .sub { font-size: 10px; color: var(--foreground-muted); font-weight: 600; }

/* ---- Hero images ---- */
.hero { width: 100%; border-radius: var(--radius-xl); overflow: hidden; position: relative; background: var(--surface-secondary); }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero.tall { aspect-ratio: 4/5; }
.hero.wide { aspect-ratio: 16/10; }
.play {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(217,71,63,.92); border-radius: 50%; color: #fff; font-size: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.video-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.55); color:#fff; font-size: 11px; font-weight:600; padding: 4px 9px; border-radius: var(--radius-full); }
.video-time { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.55); color:#fff; font-size: 11px; font-weight:600; padding: 4px 9px; border-radius: var(--radius-full); }

/* ---- Lists ---- */
.list { display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--surface-card); border: 1px solid rgba(231,221,205,.6);
  border-radius: var(--radius-md); padding: 13px 14px; cursor: pointer;
  min-height: 56px;
  text-align: left; font-family: var(--font-body);
  color: var(--foreground-primary); /* iOS Safari tints unstyled <button> text blue otherwise */
}
.row:active { background: #faf4ea; }
.row .num { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-secondary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:0 0 auto; color: var(--foreground-secondary); }
.row.done .num { background: var(--success-green); color:#fff; }
.row.current { border-color: var(--accent-red); background: var(--accent-red-soft); }
.row.current .num { background: var(--accent-red); color:#fff; }
.row > span:not(.num):not(.chev), .row .rtext { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.row .rtitle { display:block; font-weight: 700; font-size: 16px; line-height: 1.25; }
.row .rsub { display:block; font-size: 13px; line-height: 1.35; color: var(--foreground-muted); }
.row .chev { margin-left: auto; color: var(--foreground-muted); }
.phase-head { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing:.04em; text-transform: uppercase; color: var(--foreground-muted); margin: 18px 2px 4px; }

/* Info rows (onboarding bullets / day goal+challenge) */
.info { display:flex; gap:12px; align-items:flex-start; }
.info .ic { width:38px; height:38px; border-radius:50%; background: var(--accent-red-soft); color: var(--accent-red); display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; }
.info .ic.gold { background: var(--accent-gold-soft); color:#9a6a1e; }
.info .ic.green { background: var(--success-green-soft); color:#2f7a55; }
.info .body strong { display:block; font-size:16px; color: var(--foreground-primary); }
.info .body span { font-size: 15px; line-height: 1.4; }

/* Sticky footer CTA inside a view */
.footer-cta {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--surface-primary) 82%, rgba(255,250,242,.92));
  border-top: 1px solid rgba(231,221,205,.55);
}

/* ---- Bottom tab bar ---- */
.tabbar {
  flex: 0 0 auto; display: flex; justify-content: space-around; align-items: center;
  position: sticky; bottom: 0; z-index: 20;
  /* Sit low near the bottom edge. Tuck into the home-indicator inset rather than
     stacking a full extra band on top of it, so the icons don't float high. */
  padding: 8px 8px max(8px, calc(env(safe-area-inset-bottom) - 10px));
  background: var(--surface-card); border-top: 1px solid var(--border-subtle);
}
.tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:none; border:none; cursor:pointer; font-family: var(--font-body); font-size: 12px; font-weight:600; color: var(--foreground-muted); padding: 4px 10px; min-width: 64px; min-height: 48px; border-radius: var(--radius-md); }
.tab .ti { font-size: 20px; line-height:1; }
.tab.active { color: var(--accent-red); }

/* ---- Login ---- */
.brandbar {
  display:flex; align-items:center; gap:10px;
  padding: calc(12px + env(safe-area-inset-top)) 20px 8px;
  flex: 0 0 auto; position: sticky; top: 0; z-index: 20;
  background: rgba(255,250,242,.96); border-bottom: 1px solid rgba(231,221,205,.55);
}
.brandbar img { width: 30px; height: 30px; border-radius:50%; }
.brandbar span { font-family: var(--font-heading); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }

/* ---- Milestone ---- */
.celebrate {
  flex: 1 1 auto; min-height: 100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 40px 32px calc(40px + env(safe-area-inset-bottom)); color:#fff;
  background: linear-gradient(155deg, var(--accent-red), var(--accent-red-dark));
  position: relative; overflow:hidden;
}
.celebrate-inner { align-items:center; width:100%; max-width:360px; position:relative; z-index:1; }
.celebrate h1 { color:#fff; font-size: 34px; }
.celebrate p { color: rgba(255,255,255,.9); }
.celebrate .ms-note { font-size:14px; color:#fff; background:rgba(0,0,0,.14); border-radius:var(--radius-md); padding:12px 14px; line-height:1.45; }
.celebrate .seal { width: 96px; height: 96px; border-radius:50%; background: var(--accent-gold); display:flex; align-items:center; justify-content:center; font-size:42px; box-shadow: 0 0 0 10px rgba(255,255,255,.12); margin-bottom: 8px; }
.celebrate .eyebrow { color: var(--accent-gold); }
.confetti { position:absolute; font-size: 14px; opacity:.8; }

/* Onboarding dots */
.dots-prog { display:flex; gap:6px; }
.dots-prog i { width: 22px; height:5px; border-radius:3px; background: var(--border-subtle); display:block; }
.dots-prog i.on { background: var(--accent-red); }
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(12px + env(safe-area-inset-top)) 20px 8px;
  flex: 0 0 auto; position: sticky; top: 0; z-index: 20;
  background: rgba(255,250,242,.96); border-bottom: 1px solid rgba(231,221,205,.55);
}
.skip { background:none;border:none;color:var(--foreground-muted); font-weight:600; font-size:14px; cursor:pointer; font-family:var(--font-body); }

/* Text input */
.field { width:100%; font-family:var(--font-body); font-size:18px; font-weight:600; padding: 15px 16px; border-radius: var(--radius-md); border: 2px solid var(--accent-red); background: var(--surface-card); color: var(--foreground-primary); }
.field::placeholder { color: var(--foreground-muted); font-weight:500; }

.center { text-align:center; }
.stack { display:flex; flex-direction:column; }
.gap8>*+* { margin-top:8px; }
.gap12>*+* { margin-top:12px; }
.gap16>*+* { margin-top:16px; }
.gap20>*+* { margin-top:20px; }
.spread { display:flex; align-items:center; justify-content:space-between; }
.iconcircle { width:64px;height:64px;border-radius:50%;background:var(--accent-red-soft);color:var(--accent-red);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto; }
.join-icon { background: var(--accent-gold-soft); color: #8a5b10; }
.join-card { text-align: left; }
.library-note strong { font-family: var(--font-heading); font-size: 18px; }
.bonus-row.done { border-color: var(--accent-gold); background: #fffaf1; }

@media (max-width: 360px) {
  .pad { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 26px; }
  .ring-wrap { align-items: flex-start; }
  .tab { min-width: 58px; padding-left: 6px; padding-right: 6px; }
}


.iconcircle.calm { background: var(--success-green-soft); color: #2f7a55; }
.daily-complete { justify-content: center; min-height: 100%; padding-top: 44px; padding-bottom: 44px; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(28,25,22,.34);
}
.modal { width: min(100%, 360px); background: var(--surface-primary); box-shadow: 0 18px 60px rgba(0,0,0,.24); }
.modal p { margin-top: 0; }

.install-prompt {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Sit low, close to the bottom edge (KCRW-style). On notched phones we pull
     into the home-indicator inset rather than stacking the full ~34px on top,
     while keeping a 10px floor on devices without a safe-area inset. */
  padding: 18px 14px max(10px, calc(env(safe-area-inset-bottom) - 14px));
  background: linear-gradient(to top, rgba(28,25,22,.28), rgba(28,25,22,0));
}
.install-card {
  width: min(100%, 390px);
  position: relative;
  background: var(--surface-primary);
  box-shadow: 0 18px 60px rgba(0,0,0,.24);
}
.install-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-secondary);
  color: var(--foreground-secondary);
  font-size: 22px;
  line-height: 1;
}
.install-card p { margin-top: 0; }

.toast {
  position: fixed; left:50%; bottom: 96px; transform: translateX(-50%);
  background:#1c1916; color:#fff; padding:11px 18px; border-radius: var(--radius-full);
  font-size:14px; font-weight:600; z-index:100; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none;
}
.toast.show { opacity:1; transform: translateX(-50%) translateY(-6px); }