/* ============================================================================================================
   WELCOME TO QUANTA: the sign-in window (founder 10-17: "a beautiful state-of-the-art sign-in process with that
   orb ... that beautiful square window will pop up ... Quanta can guide them through ... Apple kind of style ... the
   orb can move around on the little sign-in page and move over to where you're working"). Design and every word:
   docs/design/welcome (FLOW.md and the artboards). welcome.js turns the account panel into this window whenever it
   opens for someone signed out, and runs the four questions after a first sign-in. Nothing here changes how signing
   in works: the same fields, buttons and handlers in app.js, dressed and guided.
   ============================================================================================================ */

.account-dropdown-wrapper.qw-on {
  justify-content: center;
  align-items: center;
  padding: 16px;
}
.account-dropdown-wrapper.qw-on .account-dropdown-backdrop {
  background: rgba(3, 4, 8, 0.62);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.account-dropdown-wrapper.qw-on .account-auth-panel {
  width: min(520px, calc(100vw - 32px));
  max-width: 520px !important;
  max-height: calc(var(--app-h, 100dvh) - 32px);
  padding: 196px 44px 30px;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(22, 27, 46, 0.94), rgba(11, 14, 26, 0.97)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(124, 92, 245, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transform-origin: center;
  animation: qwIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-x: hidden;
  color: #F1F5F9;
  scrollbar-width: none;
}
.account-dropdown-wrapper.qw-on .account-auth-panel::-webkit-scrollbar { display: none; }
@keyframes qwIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.qw-on.qw-email .account-auth-panel,
.qw-on.qw-small .account-auth-panel { padding-top: 34px; }
.qw-on.qw-questions .account-auth-panel { padding: 28px 36px 28px; }

/* The old header and tabs are the panel's own furniture; the window has its own close. */
.qw-on .popover-header,
.qw-on .account-tabs { display: none !important; }
.qw-close {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  width: 36px; height: 36px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94A3B8; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.qw-close:hover { background: rgba(255, 255, 255, 0.1); color: #F1F5F9; }
.qw-close:focus-visible { outline: 2px solid #38BDF8; outline-offset: 2px; }
.qw-on .qw-close { display: flex; }
.qw-on.qw-questions .qw-close { display: none; }
.qw-on.qw-questions.qw-edit .qw-close { display: flex; }

/* THE ORB. One live orb (voice-orb.js) in a 300 px canvas that never changes size; it travels and shrinks with a
   transform, so the renderer never resizes mid flight. */
.qw-orbwrap {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 300px; height: 300px;
  pointer-events: none;
  transform-origin: 150px 150px;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
  opacity: 0;
}
.qw-on .qw-orbwrap { opacity: 1; }
.qw-orbwrap canvas, .qw-orbwrap img { position: absolute; inset: 0; width: 300px; height: 300px; display: block; }
.qw-orbwrap img { width: 132px; height: 132px; inset: 84px; filter: drop-shadow(0 0 22px rgba(167, 139, 250, 0.45)); }
.qw-orbwrap.live img { display: none; }

/* THE STAGE: title, Quanta's line, the voice. */
.qw-stage { display: none; text-align: center; position: relative; z-index: 2; }
.qw-on:not(.qw-email):not(.qw-small) .qw-stage { display: block; }
.qw-title { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.qw-say { margin: 12px auto 18px; max-width: 40ch; font-size: 15.5px; line-height: 1.55; color: #C9D3E3; text-wrap: pretty; }
.qw-voice {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px 0 6px;
  border-radius: 999px; cursor: pointer; font: inherit; color: inherit;
  background: rgba(124, 92, 245, 0.12); border: 1px solid rgba(167, 139, 250, 0.28);
  transition: background 0.2s, border-color 0.2s;
}
.qw-voice:hover { background: rgba(124, 92, 245, 0.18); border-color: rgba(167, 139, 250, 0.42); }
.qw-voice:focus-visible { outline: 2px solid #38BDF8; outline-offset: 3px; }
.qw-play {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #a78bfa, #38bdf8); color: #06070A;
  box-shadow: 0 6px 20px -4px rgba(124, 92, 245, 0.7);
}
.qw-play svg { width: 14px; height: 14px; }
.qw-wave { display: flex; align-items: center; gap: 3px; height: 20px; }
.qw-wave i { display: block; width: 3px; border-radius: 2px; background: rgba(203, 213, 255, 0.75); transform-origin: center; }
.qw-voice.playing .qw-wave i { animation: qwWave 0.9s ease-in-out infinite alternate; }
.qw-voice.playing .qw-wave i:nth-child(3n) { animation-delay: -0.3s; }
.qw-voice.playing .qw-wave i:nth-child(3n+1) { animation-delay: -0.6s; }
@keyframes qwWave { from { transform: scaleY(0.45); } to { transform: scaleY(1.15); } }
.qw-time { font-family: 'Quanta Geneva Mono', ui-monospace, monospace; font-size: 12px; color: #7A8798; min-width: 30px; }

/* THE WAYS IN: Apple first and white, Google dark, email as a quiet link. */
.qw-on #auth-section-login .auth-doors,
.qw-on #auth-section-register .auth-doors { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 0; position: relative; z-index: 2; }
/* Google draws its own button (a 360 wide pill, about 40 tall, app.js renderButton), so Apple matches it: the two
   ways in read as one pair. */
.qw-on .btn-auth-door {
  order: -1; height: 44px; border-radius: 999px; width: 360px; max-width: 100%; margin: 0 auto;
  background: #F5F7FB !important; color: #06070A !important; border: none !important;
  font-size: 15px; font-weight: 600; justify-content: center;
}
.qw-on .auth-door-google { min-height: 44px; justify-content: center; }
.qw-on .auth-or { display: none !important; }
.qw-link {
  display: block; margin: 14px auto 0; background: none; border: 0; cursor: pointer; font: inherit;
  color: #38BDF8; font-size: 14.5px; font-weight: 500; padding: 8px 10px; border-radius: 10px;
}
.qw-link:hover { color: #7DD3FC; }
.qw-link:focus-visible { outline: 2px solid #38BDF8; outline-offset: 2px; }
.qw-quiet { color: #94A3B8; font-weight: 400; font-size: 14px; }
.qw-fine { margin: 16px 0 0; font-size: 11.5px; line-height: 1.55; color: #7A8798; text-align: center; position: relative; z-index: 2; }
.qw-fine a { color: #94A3B8; text-decoration: underline; text-underline-offset: 2px; }
.qw-link, .qw-fine, .qw-guide, .qw-sub { display: none; }
.qw-on .qw-link, .qw-on .qw-fine { display: block; }

/* Stage mode hides the email form; email mode shows only the form. */
.qw-on:not(.qw-email) #login-step-credentials .auth-field-group,
.qw-on:not(.qw-email) #login-step-credentials #btn-submit-login,
.qw-on:not(.qw-email) #login-step-credentials #login-error-msg,
.qw-on:not(.qw-email) .qw-email-only { display: none !important; }
.qw-on.qw-email .auth-doors,
.qw-on.qw-email .qw-stage-only { display: none !important; }
.qw-on .qw-save-only { display: none !important; }
.qw-on.qw-save .qw-save-only { display: block !important; }
.qw-on.qw-save .qw-voice { display: none; }

/* THE GUIDE: the orb's spot and Quanta's line beside it. */
.qw-on.qw-email .qw-guide, .qw-on.qw-small .qw-guide { display: flex; }
.qw-guide { align-items: flex-start; gap: 14px; margin: 6px 0 20px; position: relative; z-index: 2; }
.qw-slot { flex: none; width: 56px; height: 56px; }
.qw-bubble {
  flex: 1; font-size: 15px; line-height: 1.5; color: #DCE4F2; padding: 12px 15px;
  border-radius: 16px 16px 16px 6px; background: rgba(124, 92, 245, 0.1); border: 1px solid rgba(167, 139, 250, 0.22);
  transition: opacity 0.25s;
}
.qw-h { margin: 0 0 4px; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; }
.qw-on.qw-email .qw-sub { display: block; margin: 0 0 18px; color: #94A3B8; font-size: 14.5px; }

/* Fields and the primary button, in the window's own scale. */
.qw-on .auth-field-group { margin-bottom: 14px; position: relative; z-index: 2; }
.qw-on .auth-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #7A8798; }
.qw-on .key-input {
  flex: none; /* the field group is a flex column whose inputs grow from 0; the window sets their height */
  height: 54px; border-radius: 16px; padding: 0 18px; font-size: 16px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: #F1F5F9;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.qw-on .key-input:focus { border-color: rgba(56, 189, 248, 0.75); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14); background: rgba(56, 189, 248, 0.05); outline: none; }
.qw-on .btn-auth-primary {
  height: 52px; border-radius: 16px; font-size: 16px; font-weight: 600; margin-top: 6px; position: relative; z-index: 2;
  background: linear-gradient(100deg, #7B5CF0, #22C7EA) !important; color: #fff !important; border: none !important;
  box-shadow: 0 14px 34px -10px rgba(124, 92, 245, 0.8);
}
.qw-on .auth-error-msg { position: relative; z-index: 2; }
.qw-on .auth-mfa-mark { display: none; }
.qw-on .auth-mfa-lead { color: #C9D3E3; font-size: 15px; line-height: 1.55; position: relative; z-index: 2; }

/* THE FOUR QUESTIONS and DONE, drawn by welcome.js inside the same window. */
.qw-q { display: none; position: relative; z-index: 2; }
.qw-on.qw-questions .qw-q { display: block; }
.qw-on.qw-questions .auth-section,
.qw-on.qw-questions .qw-stage { display: none !important; }
.qw-qhead { display: flex; align-items: center; justify-content: space-between; height: 28px; }
.qw-count { font-family: 'Quanta Geneva Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.12em; color: #7A8798; }
.qw-skip { background: none; border: 0; color: #94A3B8; font: inherit; font-size: 14px; cursor: pointer; padding: 8px; border-radius: 8px; }
.qw-skip:hover { color: #F1F5F9; }
.qw-bar { display: flex; gap: 6px; justify-content: center; margin: 10px 0 22px; }
.qw-bar i { display: block; width: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); transition: all 0.3s; }
.qw-bar i.done { background: rgba(167, 139, 250, 0.6); }
.qw-bar i.on { width: 34px; background: linear-gradient(90deg, #a78bfa, #38bdf8); }
.qw-qbody { min-height: 0; }
.qw-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qw-tile, .qw-row {
  position: relative; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border-radius: 18px; padding: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.09);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.qw-tile:hover, .qw-row:hover { border-color: rgba(255, 255, 255, 0.18); }
.qw-tile:active, .qw-row:active { transform: scale(0.985); }
.qw-tile[aria-pressed="true"], .qw-row[aria-checked="true"] {
  border-color: rgba(56, 189, 248, 0.55); background: rgba(56, 189, 248, 0.07); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}
.qw-tile:focus-visible, .qw-row:focus-visible { outline: 2px solid #38BDF8; outline-offset: 2px; }
.qw-tile b, .qw-row b { display: block; font-size: 16px; font-weight: 600; margin: 6px 0 3px; }
.qw-row b { margin-top: 0; }
.qw-tile span, .qw-row span { display: block; font-size: 13px; color: #94A3B8; line-height: 1.45; }
.qw-tile .qw-ico { font-size: 20px; color: #A78BFA; line-height: 1; }
.qw-tick {
  position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #06070A;
  background: linear-gradient(135deg, #a78bfa, #38bdf8);
}
/* (.qw-tile span would otherwise show every tick: these outrank it.) */
.qw-tile .qw-tick, .qw-row .qw-tick { display: none; color: #06070A; font-size: 13px; line-height: 1; }
.qw-row[aria-checked="true"] .qw-tick { display: flex; top: 50%; transform: translateY(-50%); }
.qw-tile[aria-pressed="true"] .qw-tick { display: flex; top: 12px; transform: none; }
.qw-rows { display: grid; gap: 12px; }
.qw-note { margin: 16px 2px 0; font-size: 14px; color: #94A3B8; line-height: 1.6; }
.qw-name {
  width: 100%; height: 54px; border-radius: 16px; padding: 0 18px; font: inherit; font-size: 17px; color: #F1F5F9;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
}
.qw-name:focus { outline: none; border-color: rgba(56, 189, 248, 0.75); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14); }
.qw-qfoot { margin-top: 20px; }
.qw-shield { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: #94A3B8; margin-bottom: 14px; }
.qw-shield svg { flex: none; margin-top: 1px; }
.qw-go {
  width: 100%; height: 52px; border-radius: 16px; border: 0; cursor: pointer; font: inherit; font-size: 16px; font-weight: 600;
  background: linear-gradient(100deg, #7B5CF0, #22C7EA); color: #fff; box-shadow: 0 14px 34px -10px rgba(124, 92, 245, 0.8);
}
.qw-go:focus-visible { outline: 2px solid #F1F5F9; outline-offset: 3px; }
.qw-go:disabled { opacity: 0.6; cursor: default; }
.qw-done { text-align: center; padding: 150px 0 40px; }
.qw-done h2 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.qw-done p { margin: 10px 0 0; color: #C9D3E3; font-size: 16px; }

/* PHONES: the window becomes a sheet from the bottom. */
@media (max-width: 600px) {
  .account-dropdown-wrapper.qw-on { align-items: flex-end; padding: 0; }
  .account-dropdown-wrapper.qw-on .account-auth-panel {
    width: 100%; max-width: none !important; border-radius: 28px 28px 0 0 !important;
    max-height: calc(var(--app-h, 100dvh) - 24px);
    padding: 186px 24px calc(26px + env(safe-area-inset-bottom, 0px));
    animation: qwUp 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .qw-on.qw-email .account-auth-panel, .qw-on.qw-small .account-auth-panel { padding-top: 30px; }
  .qw-on.qw-questions .account-auth-panel { padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); }
  @keyframes qwUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .qw-title { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .qw-orbwrap { transition: none; }
  .account-dropdown-wrapper.qw-on .account-auth-panel { animation: none; }
  .qw-voice.playing .qw-wave i { animation: none; }
}

/* Settings, About you: its own heading and breathing room under the account card. */
.set-about { margin-top: 26px; }

/* The home: a standing suggestion stands aside for one that follows the picks (welcome.js paintPicks). */
.hero-prompt-chips .hero-chip[hidden] { display: none !important; }