/* Globe app: arriving and leaving. The calm loading state shown while the family loads (a still globe with Salatiga
   glowing), the friendly failure with Try again, the site notice, and the account rows. */

/* static words in both languages, before the app's own words take over */
html[lang="id"] .boot [lang="en"], html[lang="id"] .skip [lang="en"],
html:not([lang="id"]) .boot [lang="id"], html:not([lang="id"]) .skip [lang="id"] { display: none; }

.boot {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px 16px calc(24px + var(--safe-b));
  background: radial-gradient(120% 90% at 60% 35%, var(--sky-1), var(--sky-2)); background-color: var(--sky-2);
  transition: opacity 400ms var(--ease), visibility 0s linear 0s;
}
.boot[data-state="done"] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
.boot-card { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 30rem; }

/* the globe: ocean, cool white land as a soft cap, a hairline atmosphere, and the first family place */
.boot-orb {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  background:
    radial-gradient(60% 46% at 62% 64%, var(--boot-land) 0 58%, transparent 61%),
    radial-gradient(34% 26% at 30% 34%, var(--boot-land) 0 55%, transparent 60%),
    radial-gradient(circle at 36% 30%, var(--boot-sea-hi), var(--boot-sea) 70%);
  box-shadow: 0 0 0 1px var(--boot-line) inset, 0 18px 48px rgba(22, 34, 51, 0.12);
  --boot-sea: #c9d6e3; --boot-sea-hi: #e3ebf3; --boot-land: #f8fafc; --boot-line: rgba(60, 80, 105, 0.16); --boot-glow: #ff3b30;
}
.boot-rim { position: absolute; inset: -10px; border-radius: 50%; box-shadow: 0 0 0 1px var(--atmo), 0 0 28px 6px var(--atmo); }
.boot-pin { position: absolute; left: 61%; top: 60%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--boot-glow); box-shadow: 0 0 0 3px var(--boot-land); }
.boot-pin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--boot-glow); opacity: 0; animation: boot-ping 2.4s var(--ease-out) infinite; }
@keyframes boot-ping { 0% { transform: scale(0.4); opacity: 0.7; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
:root[data-theme="dark"] .boot-orb { --boot-sea: #121822; --boot-sea-hi: #1b2431; --boot-land: #2a313b; --boot-line: rgba(200, 215, 235, 0.12); --boot-glow: #ff453a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .boot-orb { --boot-sea: #121822; --boot-sea-hi: #1b2431; --boot-land: #2a313b; --boot-line: rgba(200, 215, 235, 0.12); --boot-glow: #ff453a; }
}
@media (prefers-reduced-motion: reduce) { .boot-pin::after { animation: none; opacity: 0.5; transform: scale(1.2); } }

.boot-name { margin-top: 28px; font-size: var(--s-t2); line-height: var(--l-t2); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.boot-wait { margin-top: 8px; color: var(--label-2); font-size: var(--s-body); line-height: var(--l-body); }
.boot-fail { display: none; margin-top: 24px; }
.boot-title { font-size: var(--s-t2); line-height: var(--l-t2); font-weight: 600; text-wrap: balance; }
.boot-body { margin-top: 8px; color: var(--label-2); max-width: 34ch; margin-left: auto; margin-right: auto; }
.boot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.boot[data-state="error"] .boot-wait { display: none; }
.boot[data-state="error"] .boot-fail { display: block; }
.boot[data-state="error"] .boot-pin::after { animation: none; opacity: 0; }

/* the site notice an administrator can set, at the top of the Family view */
.notice { display: flex; gap: 12px; align-items: flex-start; margin: 12px var(--gutter) 0; padding: 14px 16px; border-radius: var(--rad-cell); background: var(--accent-soft); color: var(--label); font-size: var(--s-sub); line-height: var(--l-sub); }
.notice .ph { flex: none; font-size: 22px; color: var(--accent); }
.notice.is-warning { background: rgba(254, 144, 0, 0.14); }
.notice.is-warning .ph { color: var(--b1-ink, #a64b00); }
.notice p { min-width: 0; overflow-wrap: anywhere; }

/* account rows: My information, Admin, Sign out */
.acct-row { --inset: 68px; }
.acct-row.sign-out .row-title { color: var(--accent); }
.acct-row.sign-out[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.account-group .group-foot { overflow-wrap: anywhere; }