@import url("../../elastic/styles/styles.min.css");
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

/* ==========================================================================
   Vistero — Roundcube Elastic login theme
   v4 — exact transcription of the Claude Design handover spec
   (architecture: form-as-card, proven against Elastic's forced layout)

   Vertical rhythm per spec:
   card top → logo 44 · logo → heading 24 · heading → field 18 ·
   field → field 10 · field → button 24 · button → helper 16 ·
   helper → divider 22 · divider → card bottom 26
   ========================================================================== */

/* --- tokens ---------------------------------------------------------------- */
body.task-login{
  --v-orange:#DC6A30;
  --v-orange-deep:#C25A25;
  --v-ink:#17140F;
  --v-paper:#FBF7EF;
  --v-card:#FFFDF9;
  --v-field:#F5F1E9;
  --v-line:#E6DECF;
  --v-soft:#6F6555;
  --v-display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --v-ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--v-paper);
  color:var(--v-ink);
  font-family:var(--v-ui);
  -webkit-font-smoothing:antialiased;
}

/* --- signature: ring field + one ring broadcasting outward ------------------ */
body.task-login::before,
body.task-login::after{
  content:"";position:fixed;left:50%;top:50%;
  width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;
  border-radius:50%;pointer-events:none;z-index:0;
}
body.task-login::before{
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(220,106,48,.14) 0 1px,rgba(220,106,48,0) 1px 62px),
    repeating-radial-gradient(circle at 50% 50%,rgba(23,20,15,.05) 0 1px,rgba(23,20,15,0) 1px 248px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 8%,rgba(0,0,0,.55) 26%,transparent 52%);
  mask-image:radial-gradient(circle at 50% 50%,#000 8%,rgba(0,0,0,.55) 26%,transparent 52%);
  opacity:.9;
}
body.task-login::after{
  width:34vmax;height:34vmax;margin:-17vmax 0 0 -17vmax;
  border:1px solid rgba(220,106,48,.55);
  opacity:0;
  animation:v-broadcast 9s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes v-broadcast{
  0%{transform:scale(.14);opacity:0}
  8%{opacity:.5}
  100%{transform:scale(2.2);opacity:0}
}

/* --- page layout (spec: 24px 16px) ------------------------------------------ */
body.task-login #layout{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;min-height:100dvh;
  padding:24px 16px;
  background:transparent;
  position:relative;z-index:1;
}

/* --- invisible centering box ------------------------------------------------ */
body.task-login #layout-content{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  width:min(440px,100%);
  overflow:visible !important;
}
/* copyright (spec: 11.5/500/+0.2, 18px from viewport bottom) */
body.task-login #layout::after{
  content:"© 2026 Vistero. All rights reserved.";
  position:fixed;left:0;right:0;bottom:18px;
  font-family:var(--v-ui);
  font-size:11.5px;font-weight:500;letter-spacing:.2px;
  color:var(--v-soft);
  text-align:center;
  pointer-events:none;
}

/* --- app icon (spec: 68×68, r18; card top → logo = 44) ----------------------- */
/* margin-bottom -112 = -(68 logo + 44 gap): card's top edge lands 44px above  */
body.task-login #logo{
  display:block;
  position:relative;z-index:2;
  width:68px;height:68px;max-width:68px;max-height:68px;
  margin:0 auto -135px;
  border-radius:18px;
  object-fit:cover;
  box-shadow:
    0 8px 20px -6px rgba(220,106,48,.45),
    0 0 0 0 rgba(220,106,48,.28);
  animation:v-logo-pulse 9s ease-out infinite;
}
@keyframes v-logo-pulse{
  0%,72%,100%{box-shadow:0 8px 20px -6px rgba(220,106,48,.45),0 0 0 0 rgba(220,106,48,.28)}
  12%{box-shadow:0 8px 20px -6px rgba(220,106,48,.45),0 0 0 12px rgba(220,106,48,0)}
}

/* --- THE CARD (spec: 392w · pad 44/38/26 · r24 · line border · card shadow) --- */
/* padding-top 136 = 44 (top→logo) + 68 (logo) + 24 (logo→heading)             */
body.task-login #login-form{
  position:relative;
  display:block;
  width:min(392px,100%);
  margin:0;
  padding:136px 38px 26px;
  background:var(--v-card);
  border:1px solid var(--v-line);
  border-radius:24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(48,34,18,.04),
    0 24px 60px -20px rgba(48,34,18,.22);
  text-align:left;
}
/* heading (spec: 24/800/−0.7/1.15, margin-bottom 18) */
body.task-login #login-form::before{
  content:"Vistero Webmail";
  white-space:nowrap;
  display:block;
  margin:0 0 18px;
  font-family:var(--v-display);
  font-weight:800;font-size:24px;line-height:1.15;
  letter-spacing:-.7px;
  color:var(--v-ink);
  text-align:center;
}
/* helper line ABOVE the divider (spec: button→helper 16, helper 12.5/500/1.55,
   helper→divider 22, divider→card bottom = 26 card padding) */
body.task-login #login-form::after{
  content:"Sign in with your Vistero email address.";
  display:block;
  margin-top:24px;
  padding-bottom:22px;
  border-bottom:1px solid var(--v-line);
  font-family:var(--v-ui);
  font-size:12.5px;font-weight:500;line-height:1.55;
  color:var(--v-soft);
  text-align:center;
}

/* --- LOGIN chip (spec: pad 5×15 · r999 · 1px orange · 10.5/700/+1.8/upper) ---- */
body.task-login #login-footer{
  display:block;
  position:absolute;left:50%;top:0;
  transform:translate(-50%,-50%);
  width:max-content;
  margin:0;padding:5px 15px;
  background:var(--v-card);
  color:var(--v-orange);
  border:1px solid var(--v-orange);
  border-radius:999px;
  font-size:0; /* hides the element's own "Vistero" text node */
}
body.task-login #login-footer::before{
  content:"Login";
  font-family:var(--v-ui);
  font-size:10.5px;font-weight:700;line-height:1.4;
  letter-spacing:1.8px;text-transform:uppercase;
}

/* --- pre-JS fallback: raw table, acceptable for the brief flash --------------- */
body.task-login #login-form table{width:100%;border-collapse:collapse}
body.task-login #login-form td{display:block;width:100%;padding:0;border:0}
body.task-login #login-form td.title{
  font-size:12px;font-weight:600;color:var(--v-soft);
  margin:0 0 4px;
}
body.task-login #login-form td.input{margin:0 0 10px}

/* --- fields (spec: h52 · r13 · icon cell 46 · 15.5/500 · gap 10) -------------- */
body.task-login #login-form .input-group{
  display:flex;align-items:stretch;
  width:100%;margin:0 0 10px;
  background:var(--v-field);
  border:1px solid var(--v-line);
  border-radius:13px;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
body.task-login #login-form .input-group:hover{border-color:#D9CFBC}
body.task-login #login-form .input-group:focus-within{
  background:#fff;
  border-color:var(--v-orange);
  box-shadow:0 0 0 3px rgba(220,106,48,.20);
}
body.task-login #login-form .input-group-text{
  display:flex;align-items:center;justify-content:center;
  width:46px;flex:0 0 46px;
  margin:0;padding:0;
  background:transparent;border:0;
  color:var(--v-soft);
  font-size:14px;
  transition:color .18s ease;
}
body.task-login #login-form .input-group:focus-within .input-group-text{color:var(--v-orange)}
body.task-login #login-form .form-control{
  flex:1 1 auto;width:100%;min-width:0;
  height:52px;
  padding:0 16px;
  border:1px solid var(--v-line);
  border-radius:13px;
  background:var(--v-field);
  font-family:var(--v-ui);
  font-size:15.5px;font-weight:500;letter-spacing:.1px;
  color:var(--v-ink);
  box-shadow:none;
}
body.task-login #login-form .input-group .form-control{
  border:0;background:transparent;border-radius:0 13px 13px 0;
  width:1%;padding:0 16px 0 0;
}
body.task-login #login-form .form-control::placeholder{color:var(--v-soft);font-weight:400}
body.task-login #login-form .form-control:focus{outline:0;box-shadow:none;color:var(--v-ink)}
body.task-login #login-form .input-group .form-control:focus{border:0;background:transparent}
body.task-login #login-form .form-control:focus-visible{outline:0}
body.task-login #login-form .form-control:-webkit-autofill,
body.task-login #login-form .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--v-ink);
  -webkit-box-shadow:0 0 0 60px #fff inset;
  caret-color:var(--v-ink);
}

/* --- action (spec: field→button 24 = 10 gap + 14 margin; h52 · r13 · 13.5/700) - */
body.task-login #login-form p.formbuttons{margin:14px 0 0;padding:0}
body.task-login button.mainaction,
body.task-login .button.mainaction{
  display:block;width:100%;
  height:52px;margin:0;padding:0 20px;
  border:0;border-radius:13px;
  background:var(--v-orange);
  color:#fff;
  font-family:var(--v-ui);
  font-size:13.5px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(220,106,48,.75);
  transition:background-color .16s ease,transform .12s ease,box-shadow .16s ease;
}
body.task-login button.mainaction:hover,
body.task-login .button.mainaction:hover{background:var(--v-orange-deep);box-shadow:0 10px 22px -8px rgba(220,106,48,.85)}
body.task-login button.mainaction:active,
body.task-login .button.mainaction:active{transform:translateY(1px);box-shadow:0 4px 12px -8px rgba(220,106,48,.8)}
body.task-login button.mainaction:focus-visible,
body.task-login .button.mainaction:focus-visible{outline:3px solid var(--v-ink);outline-offset:2px}
body.task-login button.mainaction[disabled],
body.task-login .button.mainaction[disabled]{background:#D8CFC1;color:#fff;box-shadow:none;cursor:default}

/* --- error / notice messages ------------------------------------------------------ */
body.task-login #messagestack,
body.task-login #messagestack div{font-family:var(--v-ui)}
body.task-login #messagestack div.error{
  background:#fff;color:#8C2F12;
  border:1px solid rgba(140,47,18,.28);
  border-radius:12px;
  box-shadow:0 12px 28px -14px rgba(48,34,18,.4);
}

/* --- ≤420px (spec: card pad 34/22/22 · r20 · logo 60 · heading 21 · input 16) --- */
/* mobile padding-top 114 = 34 + 60 + 20; logo margin-bottom -94 = -(60 + 34)     */
@media (max-width:420px){
  body.task-login #layout{padding:16px 12px}
  body.task-login #login-form{padding:114px 22px 22px;border-radius:20px}
  body.task-login #logo{width:60px;height:60px;max-width:60px;max-height:60px;margin:0 auto -94px}
  body.task-login #login-form::before{font-size:21px}
  body.task-login #login-form .form-control{font-size:16px}
}
/* short windows (spec: <600px tall — copyright flows 22px under the card) */
@media (max-height:600px){
  body.task-login #layout::after{position:static;margin-top:22px;pointer-events:auto}
}

/* --- motion & contrast preferences ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body.task-login::after{display:none}
  body.task-login #logo,
  body.task-login button.mainaction,
  body.task-login .button.mainaction,
  body.task-login #login-form .input-group{animation:none;transition:none}
}
@media (prefers-contrast:more){
  body.task-login #login-form,
  body.task-login #login-form .input-group{border-color:var(--v-ink)}
  body.task-login::before{opacity:.4}
}
body.task-login #layout-content{transform:translateY(-120px)}