/* The sign-in pages (layouts/public_auth.html: auth.html, auth_password_change.html).
   Ported from reference/nuviolive-sign-in-main.html on top of console.css: the
   grain gradient (design.md 2.9) across the whole page, the form on a flat
   card, the design's fields and button. Loaded only by public_auth.html.
   Owner: Agent 3. */

/* ============================================================
   Grain gradient across the page (design.md 2.9, re-proportioned
   for a wide canvas exactly as the reference does)
   ============================================================ */
body.auth-body{margin:0;min-height:100vh;background-color:#E8E9EC}
:root[data-theme="dark"] body.auth-body{background-color:#121419}

.auth-page{
  /* Text on the gradient uses the sidebar's text tokens (design.md 2.9). */
  --side-ink:#0F1724; --side-ink-2:#1F2A3A; --side-ink-3:#2A3444;
  --side-hover:rgba(255,255,255,.55);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29' opacity='.55'/%3E%3C/svg%3E");
  --g-main-stops:rgba(37,99,235,.5) 0%, rgba(52,112,238,.42) 28%, rgba(96,140,242,.26) 55%, rgba(160,184,238,.1) 80%, transparent 100%;
  --g-haze-stops:rgba(80,130,242,.25) 0%, rgba(110,152,242,.12) 55%, transparent 100%;
  --g-corner-stops:rgba(96,150,244,.55) 0%, rgba(130,170,242,.36) 40%, rgba(180,200,238,.13) 72%, transparent 100%;
  --g-base-stops:#E8E9EC 0%, #E5E7EB 45%, #E3E6EB 65%, #DCE2EE 100%;
  --g-base-color:#E8E9EC;
  --g-main-shape:ellipse 62% 42% at 58% 30%;
  --g-haze-shape:ellipse 48% 52% at 18% 58%;
  --g-corner-shape:ellipse 48% 42% at 98% 100%;

  position:relative;
  box-sizing:border-box;
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:100vh;
  min-height:100dvh;
  padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(32px + env(safe-area-inset-bottom,0px));
  color:var(--side-ink);
  background-color:var(--g-base-color);
  background-image:
    var(--grain),
    radial-gradient(var(--g-main-shape), var(--g-main-stops)),
    radial-gradient(var(--g-haze-shape), var(--g-haze-stops)),
    radial-gradient(var(--g-corner-shape), var(--g-corner-stops)),
    linear-gradient(to bottom, var(--g-base-stops));
  background-size:200px 200px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode:overlay, normal, normal, normal, normal;
}
:root[data-theme="dark"] .auth-page{
  --side-ink:#F3F5F8; --side-ink-2:#D2D8E1; --side-ink-3:#B9C1CD;
  --side-hover:rgba(255,255,255,.09);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29' opacity='.5'/%3E%3C/svg%3E");
  --g-main-stops:rgba(61,123,247,.5) 0%, rgba(50,110,235,.34) 30%, rgba(40,90,200,.14) 60%, transparent 100%;
  --g-haze-stops:rgba(61,123,247,.18) 0%, transparent 100%;
  --g-corner-stops:rgba(70,130,245,.34) 0%, rgba(55,105,220,.15) 45%, transparent 100%;
  --g-base-stops:#15171C 0%, #13151A 60%, #12151B 100%;
  --g-base-color:#121419;
}

.auth-top{display:flex;justify-content:flex-end;align-items:center;height:36px}
.auth-top .icon-btn{width:34px;height:34px;border-radius:999px;color:var(--side-ink-2)}
.auth-top .icon-btn:hover{background:var(--side-hover);color:var(--side-ink)}

.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:32px 0 60px}

/* The opaque, flat surface for the form, so no text sits on the glow. */
.auth-card{box-sizing:border-box;width:100%;max-width:440px;padding:36px 40px 40px;border-radius:24px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-pop)}

.auth-brand{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;margin-bottom:28px}
.auth-mark{box-sizing:border-box;display:block;flex:none;width:42px;height:42px;padding:5px;border-radius:12px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(15,23,36,.08),0 1px 2px rgba(15,23,36,.06);object-fit:contain}
.auth-brand-name{min-width:0;color:var(--text);font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}

.auth-title{margin:0 0 24px;color:var(--text);font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.02em}

/* ============================================================
   Fields (design.md 4.22, validation in 4.21)
   ============================================================ */
.auth-fields{display:grid;gap:16px}
.auth-field{min-width:0}
.auth-label{display:block;margin-bottom:7px;color:var(--text);font-size:13px;font-weight:500}
.auth-field .control{position:relative}
.auth-field .control .lead{position:absolute;left:14px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:var(--text-3);pointer-events:none;transition:color .15s var(--ease)}
.auth-input{box-sizing:border-box;display:block;width:100%;height:42px;padding:0 12px 0 40px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background-color .15s var(--ease)}
.control.has-trail .auth-input{padding-right:46px}
.auth-input::placeholder{color:var(--text-3);opacity:1}
.auth-input:focus{border-color:var(--brand)}
/* Inputs show focus as the 1px border alone, not console.css's global focus outline (design.md 4.22). */
.auth-field .auth-input:focus-visible{outline:none}
.auth-field .control:focus-within .lead{color:var(--brand)}
/* Keep browser autofill on the flat surface instead of a tinted fill. */
.auth-input:-webkit-autofill{-webkit-text-fill-color:var(--text);caret-color:var(--text);box-shadow:0 0 0 1000px var(--surface) inset;transition:background-color 9999s linear 0s,border-color .15s var(--ease)}
.auth-input:-webkit-autofill:focus{box-shadow:0 0 0 1000px var(--surface) inset}
/* Edge's own reveal button: the field has the design's. */
.auth-input::-ms-reveal,.auth-input::-ms-clear{display:none}
/* form-validation.js marks the input aria-invalid and puts its message after .control. */
.auth-input[aria-invalid="true"]{border-color:var(--danger)}
.auth-input[aria-invalid="true"]:focus{border-color:var(--danger)}
.auth-input[aria-invalid="true"]:-webkit-autofill:focus{box-shadow:0 0 0 1000px var(--surface) inset}
.auth-field .control:has(.auth-input[aria-invalid="true"]) .lead{color:var(--danger)}
.auth-field .fv-error{margin-top:6px}
.auth-hint{display:block;margin-top:6px;color:var(--text-3);font-size:12.5px;line-height:1.4}

/* The reveal button inside the password input. */
.auth-field .control .trail{position:absolute;top:4px;right:4px;border-radius:8px;color:var(--text-3)}
.auth-field .control .trail .i{width:17px;height:17px}
.auth-field .control .trail:hover{background:var(--hover);color:var(--text)}
.auth-field .control .trail:focus-visible{outline-offset:-2px}

/* ============================================================
   Button (design.md 4.1): full width, busy with a spinner
   ============================================================ */
.auth-submit{margin-top:24px}
.auth-submit[aria-busy="true"]{opacity:1;cursor:progress}
.auth-submit[aria-busy="true"]:active{transform:none}
.auth-submit .spinner{width:16px;height:16px}

/* ============================================================
   Interview link status (pages/join_status.html): cancelled,
   expired or completed -- a tinted status tile, the message,
   the booking's details and what to do next.
   ============================================================ */
.ls-status{display:flex;flex-direction:column;align-items:center;text-align:center}
.ls-status-ico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:16px;background:var(--tone-soft);color:var(--tone)}
.ls-status-ico .i{width:24px;height:24px}
.ls-title{margin-bottom:10px}
.ls-lead{margin:0;color:var(--text-2);font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.ls-details{margin-top:24px;padding:16px 18px;border-radius:16px;background:var(--sunk)}
.ls-details > div{grid-template-columns:minmax(96px,120px) minmax(0,1fr);padding:9px 0;border-bottom-color:var(--line)}
.ls-details dt{font-size:13px}
.ls-details dd{font-size:13.5px;font-weight:500}
.ls-next{margin:20px 0 0}

/* ============================================================
   Footer links (on the gradient)
   ============================================================ */
.auth-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:24px;font-size:13px}
.auth-foot a{border-radius:4px;color:var(--side-ink-2);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px;transition:color .15s var(--ease),text-decoration-color .15s var(--ease)}
.auth-foot a:hover{color:var(--side-ink);text-decoration-color:currentColor}

/* ============================================================
   Responsive (design.md 9)
   ============================================================ */
/* Portrait screens: the page is tall like the sidebar, so the glow returns to
   the sidebar's vertical composition, nudged up so it shows above the card and
   the corner glow shows below it. */
@media (max-aspect-ratio:4/5){
  .auth-page{
    --g-main-shape:ellipse 150% 22% at 58% 16%;
    --g-haze-shape:ellipse 120% 34% at 30% 30%;
    --g-corner-shape:ellipse 95% 26% at 96% 100%;
  }
}
@media (max-width:720px){
  .auth-page{padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
  .auth-top{height:40px}
  .auth-top .icon-btn{width:40px;height:40px}
  .auth-main{padding:16px 0 24px}
  .auth-card{padding:28px 24px;border-radius:20px}
  .auth-brand{gap:10px;margin-bottom:24px}
  .auth-mark{width:36px;height:36px;padding:4px;border-radius:10px}
  .auth-brand-name{font-size:24px}
  .auth-title{margin-bottom:20px;font-size:22px}
  .ls-title{margin-bottom:10px}
  .ls-details{padding:12px 14px}
}