/* ============================================================================
   Sign in — TradeSeq's front door.

   Always the dark ground, whatever the room theme: it is the first thing a
   customer sees and it should look like the instrument they are about to
   open. One compact card, a restrained glass edge (a hairline and a faint
   top highlight, not a frosted slab), the mark, two fields, one action.
   No orbs, no glow halos, no motion that is not feedback.
   ========================================================================= */
.signin{
  --sx-bg:#0a0c0f;
  --sx-card:rgba(16,20,25,.78);
  --sx-card-2:rgba(13,16,21,.78);
  --sx-edge:rgba(226,232,240,.085);
  --sx-edge-2:rgba(226,232,240,.15);
  --sx-input:#12161c;
  --sx-input-2:#151a21;
  --sx-tx:#f2f4f7;
  --sx-tx-2:#a3abb7;
  --sx-tx-3:#858e9b;
  --sx-blue:#0164fd;
  --sx-blue-hover:#1a74ff;
  --sx-blue-lift:#4d8dff;
  --sx-red:#f0776b;
  position:relative; min-height:100vh; min-height:100dvh; overflow-x:clip;
  display:flex; align-items:center; justify-content:center;
  padding:max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  background:var(--sx-bg); color:var(--sx-tx); color-scheme:dark;
  font-family:var(--sans); font-size:14px;
}
html.is-signin, html.is-signin body{ background:#0a0c0f; }

/* The ground: a very faint instrument grid, fading out from the card, and
   one soft wash of the brand blue from above. Both well under the
   threshold of "decoration". */
.signin-ground{ position:absolute; inset:0; pointer-events:none; }
.signin-ground::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(226,232,240,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,232,240,.028) 1px, transparent 1px);
  background-size:44px 44px; background-position:center center;
  -webkit-mask-image:radial-gradient(ellipse 55% 50% at 50% 46%, #000 0%, transparent 75%);
          mask-image:radial-gradient(ellipse 55% 50% at 50% 46%, #000 0%, transparent 75%);
}
.signin-ground::after{
  content:''; position:absolute; left:50%; top:-30vh; width:min(900px, 140vw); height:60vh; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(1,100,253,.10), transparent);
}

.signin-stack{ position:relative; width:100%; max-width:400px; display:flex; flex-direction:column; align-items:center; gap:18px; }

.signin-card{
  position:relative; width:100%; padding:30px 30px 22px;
  border-radius:16px; border:1px solid var(--sx-edge);
  background:linear-gradient(180deg, var(--sx-card), var(--sx-card-2));
  -webkit-backdrop-filter:blur(14px) saturate(1.05); backdrop-filter:blur(14px) saturate(1.05);
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset, 0 40px 90px -40px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.35);
  opacity:0; transform:translateY(6px);
  transition:opacity .36s var(--ease-out), transform .36s var(--ease-out), border-color .3s var(--ease);
}
/* the glass edge: one highlight along the top, brightest at the middle */
.signin-card::before{
  content:''; position:absolute; left:18%; right:18%; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(226,232,240,.22), transparent);
}
.signin-card.is-in{ opacity:1; transform:none; }
.signin-card.is-success{ border-color:rgba(77,141,255,.32); }

.signin-brand{ display:flex; align-items:center; justify-content:center; gap:11px; margin:2px 0 22px; }
.signin-mark{ height:40px; width:auto; display:block; }
.signin-word{ font-size:25px; }
.signin-word .t{ color:var(--sx-tx); }
.signin-word .s{ color:var(--sx-blue); }

.signin-head{ text-align:center; margin-bottom:20px; }
.signin-head h1{ font-size:20px; font-weight:600; letter-spacing:-.022em; line-height:1.2; color:var(--sx-tx); }
.signin-sub{ margin-top:6px; font-size:13.5px; line-height:1.5; color:var(--sx-tx-2); }
.signin-sub b{ color:var(--sx-tx); font-weight:600; }

.signin-alert{
  margin:0 0 14px; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.45;
  color:#f8c4bd; background:rgba(240,119,107,.09); border:1px solid rgba(240,119,107,.24);
}
.signin-alert.is-empty, .signin-alert:empty{ display:none; }
.signin-note{
  display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; padding:10px 12px; border-radius:10px;
  font-size:12.5px; line-height:1.5; color:var(--sx-tx-2);
  background:rgba(226,232,240,.035); border:1px solid var(--sx-edge);
}
.signin-note svg{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--sx-blue-lift); }
.signin-note b{ display:block; color:var(--sx-tx); font-weight:600; }

.signin-form{ display:flex; flex-direction:column; gap:14px; }
.sfield-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.sfield label{ font-size:12.5px; font-weight:500; color:var(--sx-tx-2); }
.sinput{ position:relative; }
.sinput input{
  width:100%; height:44px; padding:0 13px; border-radius:10px;
  background:var(--sx-input); color:var(--sx-tx); font-size:14.5px; letter-spacing:-.005em;
  border:1px solid rgba(226,232,240,.07); outline:none; caret-color:var(--sx-blue-lift);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sinput.has-reveal input{ padding-right:46px; }
.sinput input::placeholder{ color:#5d6673; }
.sinput input:hover{ background:var(--sx-input-2); border-color:var(--sx-edge-2); }
.sinput input:focus{ background:var(--sx-input-2); border-color:var(--sx-blue-lift); box-shadow:0 0 0 3px rgba(1,100,253,.26); }
.sinput input[readonly]{ opacity:.75; }
/* a password manager's fill stays readable on the dark field */
.sinput input:-webkit-autofill,
.sinput input:-webkit-autofill:hover,
.sinput input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--sx-tx); caret-color:var(--sx-tx);
  -webkit-box-shadow:0 0 0 1000px var(--sx-input-2) inset; transition:background-color 9999s ease-out 0s;
}
.sfield.is-invalid input{ border-color:rgba(240,119,107,.65); }
.sfield.is-invalid input:focus{ box-shadow:0 0 0 3px rgba(240,119,107,.2); }
.sfield-err{ font-size:12px; line-height:1.4; color:var(--sx-red); margin-top:6px; }
.sfield-err:empty{ display:none; }

.reveal{
  position:absolute; right:6px; top:6px; width:32px; height:32px; border-radius:8px;
  display:grid; place-items:center; color:var(--sx-tx-3);
}
.reveal svg{ width:16px; height:16px; }
.reveal:hover{ color:var(--sx-tx); background:rgba(226,232,240,.06); }
.slink{ font-size:12.5px; color:var(--sx-blue-lift); font-weight:500; }
.slink:hover{ color:#8fb6ff; text-decoration:underline; text-underline-offset:2px; }

.signin-status{ font-size:12.5px; line-height:1.45; color:var(--sx-tx-2); margin:-2px 0 0; }
.signin-status:empty, .signin-status.is-empty{ display:none; }

.signin-submit{
  position:relative; height:44px; margin-top:4px; border-radius:10px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--sx-blue); color:#fff; font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 6px 18px -8px rgba(1,100,253,.55);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.signin-submit:hover:not(:disabled){ background:var(--sx-blue-hover); }
.signin-submit:active:not(:disabled){ transform:translateY(1px); }
.signin-submit:disabled{ cursor:progress; }
.signin-submit.is-busy{ opacity:.88; }
.signin-submit .spin, .signin-submit .done{ display:none; }
.signin-submit.is-busy .spin{
  display:block; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:signin-spin .7s linear infinite;
}
.signin-submit.is-done .done{ display:block; }
.signin-submit.is-done .done svg{ width:16px; height:16px; }
@keyframes signin-spin{ to{ transform:rotate(360deg); } }

.signin-or{ display:flex; align-items:center; gap:12px; color:var(--sx-tx-3); font-size:11.5px; margin:2px 0; }
.signin-or::before, .signin-or::after{ content:''; flex:1; height:1px; background:var(--sx-edge); }
.signin-alt{
  height:44px; width:100%; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid var(--sx-edge-2); background:rgba(226,232,240,.03); color:var(--sx-tx); font-weight:500;
}
.signin-alt:hover:not(:disabled){ background:rgba(226,232,240,.06); }

.sfield-hint{ font-size:12px; line-height:1.4; color:var(--sx-tx-3); margin-top:6px; }
.sfield.is-invalid .sfield-hint{ display:none; }

/* Check your email / Reset sent: one quiet icon above the title */
.signin-icon{
  display:grid; place-items:center; width:42px; height:42px; margin:0 auto 14px; border-radius:12px;
  color:var(--sx-blue-lift); background:rgba(1,100,253,.10); border:1px solid rgba(77,141,255,.22);
}
.signin-icon svg{ width:20px; height:20px; }
.signin-head h1:focus{ outline:none; }
.signin-addr{
  display:block; margin:8px 0 10px; padding:9px 12px; border-radius:9px; font-weight:600; color:var(--sx-tx);
  background:rgba(226,232,240,.04); border:1px solid var(--sx-edge); overflow-wrap:anywhere; word-break:break-word;
}
.signin-fine{ font-size:12px; line-height:1.5; color:var(--sx-tx-3); text-align:center; }
.signin-info{
  display:flex; gap:9px; align-items:flex-start; margin:0 0 14px; padding:10px 12px; border-radius:10px;
  font-size:13px; line-height:1.45; color:#bfe8d6; background:rgba(58,184,138,.08); border:1px solid rgba(58,184,138,.24);
}
.signin-info svg{ width:15px; height:15px; flex:none; margin-top:1px; color:#3ab88a; }
.signin-alt svg{ width:16px; height:16px; flex:none; }
.signin-alt:disabled{ opacity:.6; cursor:default; }
.signin-alt.is-busy{ cursor:progress; }
.signin-back{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:var(--sx-blue-lift);
}
.signin-back svg{ width:14px; height:14px; }
.signin-back:hover{ color:#8fb6ff; }
.signin-foot .slink{ margin-left:3px; }
.signin-status .slink{ font-size:12.5px; }

.signin-foot{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--sx-edge);
  text-align:center; font-size:12.5px; line-height:1.5; color:var(--sx-tx-3);
}
.signin-demo{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--sx-tx-3); }
.signin-demo svg{ width:13px; height:13px; }
.signin-demo:hover{ color:var(--sx-tx); text-decoration:none; }

.signin :focus-visible{ outline:2px solid var(--sx-blue-lift); outline-offset:2px; border-radius:6px; }
.signin .sinput input:focus-visible{ outline:none; }

/* a phone: the card is the screen's width less the gutter, the fields are
   16px so iOS does not zoom into them, and the brand stays the same size */
@media (max-width:480px){
  .signin{ align-items:flex-start; padding-top:max(9vh, env(safe-area-inset-top)); }
  .signin-card{ padding:26px 20px 18px; border-radius:14px; }
  .signin-brand{ margin-bottom:18px; }
  .sinput input{ font-size:16px; height:46px; }
  .signin-submit{ height:46px; }
}

@media (prefers-reduced-motion:reduce){
  .signin-card{ transform:none; transition:opacity .2s linear; }
  .signin-submit.is-busy .spin{ animation-duration:1.6s; }
}

/* before the stored session has been checked: the ground, nothing else */
.boot{ min-height:100vh; min-height:100dvh; background:var(--bg); }

/* the person, in the profile menu */
.pop-who{ display:flex; flex-direction:column; gap:1px; text-transform:none; letter-spacing:0; }
.pop-who b{ font-size:12.5px; color:var(--ink); font-weight:600; }
.pop-who span{ font-size:11px; color:var(--ink-4); font-weight:400; }
.pop-who .pop-ws{ display:flex; align-items:center; gap:5px; margin-top:4px; color:var(--ink-3); }
.pop-who .pop-ws svg{ width:11px; height:11px; }
.pop-note{ margin-left:auto; font-size:10.5px; color:var(--ink-4); padding-left:10px; }