/* Hide the static "Loading…" once the app has drawn its first screen. */
body:has(.shell) #web-boot, body:has(.auth-shell) #web-boot, body:has(.boot:not(#web-boot)) #web-boot { display: none; }

/* Website-only tweaks on top of the shared app.css. Steady is designed for a phone,
   so on a wide screen it sits in a centred phone-width column. */
@media (min-width: 720px) {
    html, body { background: #DCD6C8; }
    .shell { max-width: 560px; margin: 0 auto; background: var(--sand); box-shadow: 0 0 28px rgba(31, 42, 44, .12); }
    .tabbar { max-width: 560px; margin: 0 auto; }
    .auth-shell { background: var(--sand); }
}

/* ---------- admin portal ---------- */
.admin-shell { min-height: 100vh; background: var(--sand); }
@media (min-width: 720px) { .admin-shell { max-width: 1100px; margin: 0 auto; box-shadow: 0 0 28px rgba(31, 42, 44, .12); } }
.admin-bar { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.2rem; background: var(--teal); color: #fff; }
.admin-bar a { color: #fff; text-decoration: none; }
.admin-bar .brand { font-weight: 700; font-size: 1.15rem; }
.admin-tag { font-size: .75rem; padding: .1rem .5rem; border-radius: 99px; background: rgba(255,255,255,.2); }
.admin-bar .grow { flex: 1; }
.admin-content { padding: 1.2rem; }
.admin-content .card { margin-bottom: 1rem; }
.admin-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th, .admin-table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { font-weight: 600; color: var(--muted); font-size: .8rem; }
.admin-table tr.selected td { background: rgba(47, 93, 98, .08); }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.join-code { font: 700 1.6rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .12em; color: var(--teal); }
.trend-bar { height: .7rem; background: var(--coral); border-radius: 4px; min-width: 2px; }
.form-row { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.contact-edit { display: grid; gap: .4rem; grid-template-columns: 1fr 1fr 2fr auto; align-items: center; margin-bottom: .4rem; }
@media (max-width: 719px) { .contact-edit { grid-template-columns: 1fr; } .admin-table { font-size: .8rem; } }