/* Accounts (Go-Live b5): the invitation page (join.html) and the account screen of the settings (#account in index.html).
   Same parts as the rest of the menu (menu.css): glass panel with one sunlit edge, light lanes, points of light, the text line on
   the sky – no stock text boxes, no card grid. The invitation page has no WebGL: its sky is two drifting star layers and a breathing
   nebula in CSS (STYLEGUIDE §6: the sky always lives; still with "reduced motion"). */

/* ---------- account screen (settings) ---------- */
body[data-screen="account"] #account,
body[data-screen="account"] #topbar,
body[data-screen="help"] #help,
body[data-screen="help"] #topbar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 460ms var(--ease) 140ms, visibility 0s;
}
body[data-screen="account"] #home, body[data-screen="help"] #home { opacity: .35; visibility: visible; }
#account .panel, #help .panel {
  position: absolute;
  right: 0; top: 10vh;
  width: 52vw;
  padding: calc(var(--u) * 36) calc(var(--u) * 48) calc(var(--u) * 28);
  background: var(--glass);
  border-radius: 6px;
}
#account .title, #help .title { font-size: calc(var(--u) * 44); margin-bottom: calc(var(--u) * 18); }
#account .eyebrow, #help .eyebrow { margin-bottom: calc(var(--u) * 18); }
/* Deleting: the edge turns to ember (STYLEGUIDE §2: warning, delete) while the question is asked */
#account[data-phase="confirm"] .panel, #account[data-phase="deleting"] .panel, #account[data-phase="failed"] .panel { box-shadow: inset 0 0 0 1px rgba(255, 122, 89, .4); } /* danger: a quiet red outline, no bar (finding 49) */
#account-choices, #help-choices { margin-top: calc(var(--u) * 18); }
/* the support address is meant to be copied: selectable text on the help page */
#help-lines p { user-select: text; -webkit-user-select: text; }
#account-now, #join-now { min-height: 1.3em; margin: calc(var(--u) * 10) 0 0; font-size: calc(var(--u) * 24); color: var(--nebula); }
#account-now.is-failed, #join-now.is-failed { color: var(--ember); }
.lane-danger.is-focus { background: var(--ember); color: var(--ink); } /* deleting: the focused row fills with ember instead of milk */

/* ---------- invitation page ---------- */
.join-page { overflow-y: auto; user-select: auto; }
.join-sky { position: fixed; inset: 0; overflow: hidden; background: var(--space-deep); }
.join-sky i { position: absolute; inset: -20%; display: block; }
.join-sky .far {
  background-image: radial-gradient(1px 1px at 12% 18%, rgba(243, 234, 216, .8), transparent 60%), radial-gradient(1px 1px at 68% 32%, rgba(243, 234, 216, .6), transparent 60%),
    radial-gradient(1px 1px at 38% 74%, rgba(243, 234, 216, .7), transparent 60%), radial-gradient(1px 1px at 84% 86%, rgba(243, 234, 216, .5), transparent 60%),
    radial-gradient(1px 1px at 52% 8%, rgba(111, 214, 255, .6), transparent 60%), radial-gradient(1px 1px at 22% 52%, rgba(243, 234, 216, .5), transparent 60%);
  background-size: 260px 260px;
  animation: join-drift 240s linear infinite;
}
.join-sky .near {
  background-image: radial-gradient(2px 2px at 30% 40%, rgba(243, 234, 216, .9), transparent 60%), radial-gradient(1.5px 1.5px at 76% 62%, rgba(255, 199, 107, .7), transparent 60%),
    radial-gradient(2px 2px at 58% 88%, rgba(243, 234, 216, .7), transparent 60%);
  background-size: 420px 420px;
  animation: join-drift 140s linear infinite reverse;
}
/* the milky band: one soft light, not a colour gradient between two hues */
.join-sky .glow {
  background: radial-gradient(ellipse 55% 22% at 62% 38%, rgba(243, 234, 216, .07), transparent 70%);
  transform: rotate(-18deg);
  animation: join-breathe 9s ease-in-out infinite;
}
@keyframes join-drift { to { transform: translate3d(-260px, 120px, 0); } }
@keyframes join-breathe { 50% { opacity: .8; } }
.join-page.reduced .join-sky i { animation: none; }
@media (prefers-reduced-motion: reduce) { .join-sky i { animation: none; } }

#join { position: relative; min-height: 100vh; padding: 5vh 5vw; }
.join-brand { font: 600 calc(var(--u) * 26)/1 var(--font-display); letter-spacing: .3em; color: var(--milk); margin-bottom: 8vh; }
.join-panel {
  max-width: calc(var(--u) * 1040);
  padding: calc(var(--u) * 36) calc(var(--u) * 48) calc(var(--u) * 32);
  background: var(--glass);
  border-radius: 6px;
}
.join-panel .title { font-size: calc(var(--u) * 48); margin-bottom: calc(var(--u) * 20); }
#join-lines { margin-bottom: calc(var(--u) * 16); }
#join-field { margin: calc(var(--u) * 10) 0 calc(var(--u) * 6); }
#join-field[hidden], #join-field2[hidden] { display: none; }
#join-field2 { margin: calc(var(--u) * 12) 0 calc(var(--u) * 6); }
#join-input2 { letter-spacing: .04em; }
input[data-kind="code"] { text-transform: uppercase; letter-spacing: .12em; }
input[data-kind="code"]::placeholder { text-transform: none; letter-spacing: 0; }
/* the nickname for password managers on the password-only steps: in the form, never seen or reached by Tab */
.join-user { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
/* the recovery code, shown once: big display letters on the glass, selectable so it can be copied */
.join-code {
  margin: calc(var(--u) * 14) 0 calc(var(--u) * 10);
  font: 600 calc(var(--u) * 56)/1.1 var(--font-display);
  letter-spacing: .14em;
  color: var(--milk);
  user-select: all; -webkit-user-select: all;
  overflow-wrap: anywhere;
}
.join-code[hidden] { display: none; }
#join-input { letter-spacing: .04em; }
body[data-step="code"] #join-input { text-transform: uppercase; letter-spacing: .12em; }
body[data-step="code"] #join-input::placeholder { text-transform: none; letter-spacing: 0; }
.join-lanes { margin-top: calc(var(--u) * 14); }
#join-choices.lightpoints { margin-top: calc(var(--u) * 22); flex-wrap: wrap; row-gap: calc(var(--u) * 20); }
#join-choices > [data-index]:focus-visible { outline: none; }
#join-choices > .lp:focus-visible { color: var(--milk); }

/* phones: the menu's own raster (menu.css), safe areas, the page scrolls when the keyboard is open */
@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 600px) {
  #account .panel, #help .panel { position: relative; top: auto; right: auto; left: auto; width: auto; margin: 56px 0 0 auto; }
  body[data-screen="account"] #topbar, body[data-screen="help"] #topbar { opacity: 0; visibility: hidden; }
  #join { padding: max(env(safe-area-inset-top), 16px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 24px) max(env(safe-area-inset-left), 16px); }
  .join-brand { margin-bottom: 28px; font-size: max(13px, calc(var(--u) * 22)); }
  .join-panel { padding: 22px 18px 20px; }
  .join-panel .title { font-size: max(24px, calc(var(--u) * 44)); }
  .join-panel .consent-text { font-size: max(16px, calc(var(--u) * 26)); }
  #join-now, #account-now { font-size: max(15px, calc(var(--u) * 24)); }
  .join-code { font-size: max(26px, calc(var(--u) * 48)); letter-spacing: .08em; }
  .join-page .lp { min-height: 48px; font-size: max(17px, calc(var(--u) * 30)); }
  .join-page .lane-choice { min-height: 52px; font-size: max(17px, calc(var(--u) * 30)); }
}

/* link to the privacy policy under the invitation (go-live b16): readable before an account exists */
.join-legal { margin-top: 3vh; font-size: calc(var(--u) * 20); }
.join-legal a { color: var(--milk-dim); }