/* Start Your Family (live.js) and the First Week card on Today (first-week.js). */

/* sign-in screen: the way in for new families */
.gate-new{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ece3d3;padding-top:14px;margin-top:4px;font-size:14px;color:#4a4f57}
.gate-new .outline{min-height:44px;padding:0 18px;border-radius:999px;font-weight:700}

/* step header */
.su-head{display:flex;flex-direction:column;gap:8px}
.su-step{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1e6e68}
.su-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.su-bar i{height:5px;border-radius:3px;background:#e8e0d0}
.su-bar i.on{background:var(--primary,#0a60a2)}
.su-hint{font-weight:400;color:#5f6670;font-size:12.5px}
.gate-card select{font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid #e4d8c4;border-radius:12px;background:#fbf7f0;color:inherit}
.su-back{align-self:center!important}
.su-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.su-row .primary{width:auto;flex:1}

/* pill choices (radio buttons that look like chips) */
.su-pills{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.su-pills legend{font-size:13px;font-weight:600;padding:0;margin-bottom:8px}
.gate-card .su-pill{flex-direction:row;align-items:center;gap:0;font-size:15px;font-weight:500;cursor:pointer}
.su-pill input{position:absolute;opacity:0;width:1px;height:1px}
.su-pill span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid #e2d9c8;border-radius:999px;background:#fff}
.su-pill input:checked+span{background:#dce8f4;border-color:var(--primary,#0a60a2);color:#0f3554;font-weight:700}
.su-pill input:focus-visible+span{outline:3px solid #6fb3ea;outline-offset:2px}

/* step 2: people */
.su-people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.su-people li{display:flex;align-items:center;gap:12px;background:#fbf7f0;border:1px solid #ece3d3;border-radius:14px;padding:10px 12px}
.su-face{width:38px;height:38px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-weight:700;background:#dce8f4;color:#0f3554}
.su-people li:nth-child(5n+2) .su-face{background:#fbe1d8;color:#9c3d27}
.su-people li:nth-child(5n+3) .su-face{background:#d8eeea;color:#1d5e56}
.su-people li:nth-child(5n+4) .su-face{background:#e8deec;color:#674e71}
.su-people li:nth-child(5n+5) .su-face{background:#f6ebcd;color:#7a5a14}
.su-person{display:flex;flex-direction:column;flex:1;min-width:0}
.su-person small{color:#5f6670;font-size:12.5px}
.su-people .textbtn{align-self:center!important;padding:10px 4px!important}
.su-add{background:#fbf7f0;border:1px solid #ece3d3;border-radius:16px;padding:14px}
.su-addbtn{min-height:48px;border:1.5px dashed #b9c9da;border-radius:14px;background:none;color:var(--primary,#0a60a2);font:inherit;font-weight:700;cursor:pointer}

/* step 3: chores */
.su-kid{display:flex;flex-direction:column;gap:6px}
.su-kid h2{margin:6px 0 2px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5f6670}
.su-chore{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 12px;border-radius:12px;font:inherit;font-size:15px;text-align:left;cursor:pointer;background:transparent;border:1.5px dashed #d5ccba;color:#5f6670}
.su-chore span:nth-child(2){flex:1}
.su-chore small{font-weight:700;color:#7a5a14}
.su-check{width:22px;height:22px;flex-shrink:0;border-radius:6px;display:grid;place-items:center;font-size:13px;font-weight:700;border:1.5px solid #c9bfad;background:#fff}
.su-chore.on{background:#fff;border:1.5px solid var(--primary,#0a60a2);color:var(--ink,#2e3238);font-weight:500}
.su-chore.on .su-check{background:var(--primary,#0a60a2);border-color:var(--primary,#0a60a2);color:#fff}

/* step 4: faith */
.su-faith{background:#f3e3c3;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.su-faith p{margin:0;font-size:13px;line-height:1.5;color:#4a3a12}
.su-faith-card{background:#fff;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px}
.su-faith-card b{font:400 19px var(--font-display,Georgia,serif)}
.su-faith-card span{font-size:13.5px;color:#4a4f57}
.su-faith-k{font-size:12.5px;font-weight:700;color:#b8461f!important}
.su-rtt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.su-rtt span{background:#fff;border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:700;font-size:14px}
.su-rtt i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--primary,#0a60a2);color:#fff;font-size:12px}
.gate-card #suTime{flex-direction:row;align-items:center;justify-content:space-between;background:#fff;border:1.5px solid #e2d9c8;border-radius:12px;padding:6px 6px 6px 14px;font-size:15px;font-weight:500}
.gate-card #suTime[hidden]{display:none}
.gate-card #suTime input{font-weight:700;width:auto;flex:0 0 auto}
.gate-card #suTime{white-space:nowrap;gap:12px}

/* step 5 */
.su-later{display:flex;flex-direction:column;gap:2px;border-top:1px solid #ece3d3;padding-top:12px;font-size:13.5px;color:#4a4f57}
.su-later b{color:var(--ink,#2e3238)}

/* ---------- Today: Your First Week ---------- */
.first-week{background:#fff;border:1px solid #e8e0d0;border-radius:22px;padding:18px 20px;margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
.fw-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fw-top h2{margin:0;font:400 22px var(--font-display,Georgia,serif)}
.fw-count{font-size:13px;font-weight:700;color:#1e6e68}
.fw-bar{height:6px;border-radius:3px;background:#eee7da;overflow:hidden}
.fw-bar i{display:block;height:100%;background:#299492;border-radius:3px}
.fw-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 18px}
.fw-list li{display:flex;align-items:center;gap:10px;min-height:44px}
.fw-check{width:28px;height:28px;flex-shrink:0;border-radius:50%;border:1.5px solid #c9bfad;background:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;cursor:pointer;padding:0}
.fw-list li.done .fw-check{background:#299492;border-color:#299492}
.fw-go{background:none;border:0;padding:6px 0;font:inherit;font-size:15px;font-weight:500;color:var(--ink,#2e3238);text-align:left;cursor:pointer}
.fw-list li.done .fw-go{color:#5f6670;text-decoration:line-through;font-weight:400}
.fw-hide{align-self:flex-end;background:none;border:0;color:var(--primary,#0a60a2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 0}

/* password boxes: Show / Hide */
.pw-wrap{position:relative;display:block}
.gate-card .pw-wrap input{width:100%;box-sizing:border-box;padding-right:74px!important}
.pw-show{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:36px;min-width:56px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--primary,#0a60a2);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.pw-show:hover{background:#eef3f9}
.pw-show:focus-visible{outline:3px solid #6fb3ea;outline-offset:1px}
.gate-card .pw-show{color:var(--primary,#0a60a2)}

/* Settings → Family: Delete Our Family / Delete My Login */
.danger-zone{border-color:#f0c9bb}
.danger-zone h2{color:#9c3d27}
.danger-zone form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.danger-zone label:not(.approval-toggle){display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.danger-zone input[name=confirm]{font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid #e4d8c4;border-radius:12px;background:#fbf7f0;max-width:360px}
.danger-btn{align-self:flex-start;min-height:46px;padding:0 20px;border-radius:999px;border:0;background:#b4361b;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.danger-btn:disabled{opacity:.7;cursor:progress}
.danger-zone .danger-btn{color:#fff!important;background:#b4361b!important}