/* =========================================================================
   Production shell. Loaded after styles.css, which is the demo's stylesheet
   kept untouched so the two can be diffed. Everything here undoes the phone
   mock-up: the real device draws its own status bar and home indicator.
   ========================================================================= */

:root{ --top: env(safe-area-inset-top, 0px); --bot: env(safe-area-inset-bottom, 0px); }

html,body{height:100%;background:var(--bg)}
body{background-image:none;overflow:hidden}

/* the app fills the viewport; on a desktop browser it sits in a centred column */
.screen{position:fixed;inset:0;margin:0 auto;max-width:480px;width:100%;height:100dvh;border-radius:0}
@media (min-width:481px){ .screen{box-shadow:0 0 0 1px var(--line)} }

/* the demo reserved 50px for a drawn status bar — use the real safe area */
.app{padding-top:var(--top);overscroll-behavior:contain}
.screen:before{height:calc(var(--top) + 10px)}
.hero{margin-top:calc(-1 * var(--top));height:calc(220px + var(--top))}
.dhero{margin-top:calc(-1 * var(--top));height:calc(240px + var(--top))}
.push{top:calc(var(--top) + 8px)}

/* no drawn home indicator; the tab bar clears the real one */
.homebar{display:none}
.tabbar{padding-bottom:calc(4px + var(--bot))}
.toast{bottom:calc(76px + var(--bot))}
.tail{height:calc(100px + var(--bot))}
.sheet{border-radius:22px 22px 0 0;max-height:88%}
.sh-f{padding-bottom:calc(18px + var(--bot))}

/* ---- sign in, profile, waiver, family (auth.js) ---- */
.fld{display:block;margin-top:12px}
.fld>span{display:block;font-size:12px;color:var(--dim);margin-bottom:6px}
.fld input{display:block;width:100%;min-width:0;height:46px;border-radius:var(--r-sm);border:1px solid var(--line2);
  background:var(--s1);color:var(--tx);font:500 16px var(--f);padding:0 14px;outline:none;color-scheme:dark}
.fld textarea{display:block;width:100%;min-width:0;border-radius:var(--r-sm);border:1px solid var(--line2);resize:vertical;
  background:var(--s1);color:var(--tx);font:500 16px var(--f);padding:12px 14px;outline:none;color-scheme:dark}
.fld input:focus,.fld textarea:focus{border-color:var(--navy3);box-shadow:0 0 0 3px rgba(29,67,128,.35)}
.fld input.code-in{font-family:var(--fc);font-size:26px;font-weight:600;letter-spacing:.16em;text-align:center;padding:0 8px}
.au-count{font-size:12px;color:var(--dim);margin-top:6px;text-align:right}
.au-err{color:var(--stop);font-size:13px;line-height:1.45;margin-top:10px}
.au-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.au-links button{background:none;border:0;color:var(--tx2);font:500 13px var(--f);text-decoration:underline;cursor:pointer;padding:6px 0}
.waiver{max-height:200px;overflow-y:auto;font-size:13px;line-height:1.55;color:var(--tx2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 13px;background:var(--s0)}
.waiver p+p{margin-top:8px}
.waiver b{color:var(--tx)}
#au-guardian[hidden]{display:none}
.opt.off{opacity:.55}
button.row{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
button.row:last-of-type{border-bottom:0}

/* You -> Delete account: quiet, below Sign out; the sheet lists what goes */
.del-link{display:block;margin-top:18px;padding:8px 0;background:none;border:0;color:var(--stop);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.del-list{margin:6px 0 0;list-style:none;padding:0;font-size:12.5px;color:var(--tx2);line-height:1.5}
.del-list li{margin-top:4px}
/* privacy / terms / support / deletion links (You footer, sign-in sheet) */
.legal-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.legal-links a,.au-legal a{color:var(--dim);font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.legal-links a{padding:6px 0}