/* Welcome / sign-up screen, re-accept screen, install steps, "Back to sign up" bar and "Update now" banner (welcome.js). */
html.dcbs-gated, html.dcbs-gated body { overflow: hidden; }
.welcome { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg); background-image: radial-gradient(ellipse at top, var(--bg2), var(--bg) 60%);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(1.2rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom)); box-sizing: border-box; }
.welcome[hidden], .wl-backbar[hidden], .wl-update[hidden] { display: none; }
.wl-card { width: 100%; max-width: 30rem; margin: auto 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 22px;
  box-shadow: var(--shadow-lift); padding: 1.5rem 1.35rem 1.35rem; box-sizing: border-box; }
.wl-card h1 { font-family: var(--display); font-size: 2rem; line-height: 1.1; margin: .9rem 0 .5rem; }
.wl-card p { margin: .5rem 0; }
.wl-brand { display: flex; align-items: center; gap: .75rem; }
.wl-brand img { border-radius: 14px; flex: none; }
.wl-name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 0 !important; line-height: 1.1; }
.wl-sub { color: var(--muted); font-size: .85rem; margin: .15rem 0 0 !important; letter-spacing: .02em; }
#wl-email-form, #wl-code-form, #wl-terms-form { display: grid; gap: .55rem; margin-top: 1rem; }
.wl-label { font-weight: 600; }
.wl-check { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: start; padding: .55rem .65rem; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--bg); cursor: pointer; line-height: 1.4; }
.wl-check input { width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; accent-color: var(--accent); cursor: pointer; }
.wl-check:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.wl-opt { color: var(--muted); font-size: .9em; }
.wl-status { min-height: 1.2em; margin: 0 !important; color: #a3302a; font-weight: 600; }
:root[data-theme="dark"] .wl-status { color: #f0a49c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wl-status { color: #f0a49c; } }
.wl-status:empty { min-height: 0; }
.wl-go { width: 100%; justify-content: center; font-size: 1.05rem; padding-top: .8rem; padding-bottom: .8rem; margin-top: .2rem; }
.wl-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-top: .3rem; }
.wl-fine { color: var(--muted); font-size: .85rem; margin-top: 1rem !important; }
.wl-h2 { font-family: var(--display); font-size: 1.3rem; margin: 1.2rem 0 .3rem; }
.wl-steps { padding-left: 1.3rem; margin: .4rem 0 1rem; } .wl-steps li { margin: .45rem 0; } .wl-steps li::marker { color: var(--gold); font-weight: 700; }
.wl-ico svg { width: 1.1em; height: 1.1em; vertical-align: -.15em; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-note { background: var(--gold-soft); border-radius: 10px; padding: .5rem .7rem; }
.acct-email { word-break: break-all; }
/* On the Terms / Privacy / Copyright pages while signed out */
.wl-backbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap;
  background: var(--paper); border-top: 1px solid var(--rule); box-shadow: var(--shadow-lift); padding: .7rem 1rem max(.7rem, env(safe-area-inset-bottom)); }
.wl-backbar span { color: var(--ink-soft); font-size: .95rem; }
html:has(.wl-backbar:not([hidden])) .ask-fab, html:has(.wl-backbar:not([hidden])) .totop { display: none; }
html:has(.wl-backbar:not([hidden])) body { padding-bottom: 5rem; }
/* "A new version is ready" */
.wl-update { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1100;
  display: flex; align-items: center; gap: .8rem; background: var(--ink); color: var(--bg); border-radius: 999px; padding: .5rem .55rem .5rem 1.1rem;
  box-shadow: var(--shadow-lift); max-width: calc(100vw - 2rem); box-sizing: border-box; white-space: nowrap; }
.wl-update .btn { padding: .45rem .95rem; }
/* Header "Sign in" / "Account" button */
.acct-btn { gap: .35rem; padding: 0 .75rem; white-space: nowrap; font-family: var(--body, inherit); font-size: .92rem; font-weight: 600; }
.acct-btn.on { border-color: var(--gold); }
@media (max-width: 1199px) { .acct-btn { padding: 0; } .acct-btn .acct-btn-t { display: none; } }
@media (max-width: 380px) { .tools .iconbtn.acct-btn { min-width: 2rem; } }
/* One-row header between tablet and wide desktop: a little less padding so the extra button fits. */
@media (min-width: 641px) and (max-width: 1199px) { .topbar .mainnav a { padding-left: .5rem; padding-right: .5rem; } .topbar .tools { gap: .25rem; } }
@media (min-width: 641px) and (max-width: 979px) { .topbar .mainnav a { padding-left: .36rem; padding-right: .36rem; } .topbar .brand-sub { display: none; } }
.wl-invited { margin: 1.1rem 0 -.4rem !important; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }