/* Arkheim Winter - login styles loaded after main.css */

/* Backdrop tint + blur */
dialog#loginPanel::backdrop{
  background:
    radial-gradient(80% 60% at 20% 15%, rgba(116,192,255,.14), transparent 50%),
    radial-gradient(70% 60% at 80% 20%, rgba(177,151,252,.12), transparent 55%),
    rgba(8,12,18,.70);
  backdrop-filter: blur(6px);
}

/* Dialog chrome (transparent so we can see the art beneath) */
dialog#loginPanel{
  width: min(1050px, calc(100% - 28px));
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;                 /* key for floating look */
  box-shadow: var(--shadow);
  color: var(--text);
  overflow: hidden;                         /* clip rounded corners */
  transform: translateY(6px) scale(.98);
  opacity: 0;
  animation: loginIn .18s var(--ease, cubic-bezier(.2,.9,.2,1)) forwards;
}
@keyframes loginIn{ to { transform: translateY(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  dialog#loginPanel{ animation: none; opacity: 1; transform: none; }
}

/* Close button */
#loginPanel .close-x{
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,.06); color: #c7af40;
  cursor: pointer; z-index: 3;
  transition: transform .18s var(--ease), background .18s var(--ease), opacity .18s;
}
@media (hover:hover){
  #loginPanel .close-x:hover { background: rgba(255,255,255,.10); transform: translateY(-1px); }
  #loginPanel .close-x:active{ transform: translateY(0); }
}
#loginPanel .close-x:focus-visible { box-shadow: var(--ring); outline: none; }
@media (max-width: 740px){ #loginPanel .close-x{ top: 8px; right: 8px; width: 34px; height: 34px; } }

/* Grid: art | form (don't center the text column) */
#loginPanel .login-shell{
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(380px, .95fr);
  align-items: stretch;                 /* keep left copy where it is */
  column-gap: 0;
  position: relative;
}

#loginPanel .login-views{
  position: relative;
}

/* mobile: stack and keep comfy */
@media (max-width: 860px){
  #loginPanel .login-shell{ grid-template-columns: 1fr; align-items: start; }
  #loginPanel .login-form{
    justify-self: stretch; align-self: start;
    transform: none; width: auto; margin: 14px 12px 18px;
  }
}


/* Left art column (no divider) */
#loginPanel .login-art{
  padding: 0 18px;
  color: var(--text);
  z-index: 0;                 /* sits under the glass form */
  border-right: 0;
}

/* TEXTLESS art anchored left, BLEEDS under the form */
#loginPanel .login-art.sigil::before{
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width: 100%;                                     /* bleed into form side */
  background-image: url("/assets/img/ui/login-sigil-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 28% center;                 /* focal point (logo) */
  filter: saturate(.95);
  pointer-events:none;
}

/* Soft glows over the image (stay in left column) */
#loginPanel .login-art.sigil::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 20% 30%, rgba(116,192,255,.12), transparent 60%),
    radial-gradient(120% 90% at 85% 10%, rgba(177,151,252,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* Captions on top */
#loginPanel .login-art .art-title,
#loginPanel .login-art .art-sub{ position: relative; z-index: 1; }

/* Floating glass form card */
#loginPanel .login-form{
  z-index: 1;                                /* above art bleed */
  align-self: start;
  margin: 85px 18px;
  padding: 20px;
  display: grid; gap: .65rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12, 16, 22, 0.36);            /* alpha required for blur */
  /*backdrop-filter: blur(12px) saturate(1.06);*/
  box-shadow: 0 18px 40px rgba(0,0,0,.35),
              0 1px 0 rgba(255,255,255,.04) inset;
}
#loginPanel .login-title{ margin: 2px 0 .4rem; font-weight: 900; letter-spacing: .01em; }
#loginPanel .login-panel-head{
  display: grid;
  gap: .35rem;
}
#loginPanel .login-panel-copy{
  margin: 0;
  color: var(--muted);
}
#loginPanel .login-subform{
  display: grid;
  gap: .75rem;
}
#loginPanel .form-row{
  display: grid;
  gap: .45rem;
}
#loginPanel .form-row > span{
  color: #d0dae6;
  font-size: .92rem;
}
#loginPanel .input-textarea{
  min-height: 132px;
  resize: vertical;
}
#loginPanel .login-success-state{
  display: grid;
  gap: .85rem;
}

/* Inputs/buttons */
#loginPanel .input{
  --input-height: 48px;
  --input-padding-x: 14px;
  --input-padding-y: 11px;
  --input-radius: 12px;
  --input-font-size: 15px;
  --input-border: rgba(255,255,255,.12);
  --input-border-hover: rgba(255,255,255,.18);
  --input-border-focus: rgba(116,192,255,.55);
  --input-border-invalid: rgba(214,124,124,.58);
  --input-bg: rgba(12,17,13,.06);
  --input-bg-hover: rgba(255,255,255,.072);
  --input-bg-focus: rgba(255,255,255,.08);
  --input-bg-disabled: rgba(255,255,255,.03);
  --input-placeholder: color-mix(in oklab, var(--muted) 86%, white);
  --input-ring: 0 0 0 3px rgba(116,192,255,.18);
  --input-ring-invalid: 0 0 0 3px rgba(214,124,124,.16);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#loginPanel input.input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  transition: background-color 10000s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset;
}
#loginPanel .btn.primary{
  width: 100%;
  padding: .7rem .9rem;
  font-weight: 800;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
#loginPanel .login-remember{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;
  margin-top: .1rem;
  color: #a9bacb;
  cursor: pointer;
  user-select: none;
}
#loginPanel .login-remember input{
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #7bc1f6;
  cursor: pointer;
}

/* Helper row & inline status */
#loginPanel .login-tools{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .2rem; color: var(--muted);
  gap: 1rem;
}
#loginPanel .login-tools a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#loginPanel .login-inline-action{
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#loginPanel .login-inline-action:hover,
#loginPanel .login-inline-action:focus-visible{
  color: var(--text);
  outline: none;
}
#loginPanel .login-msg{ min-height: 1.2em; margin-top: .25rem; color: var(--muted); }

/* Page lock while open */
html.modal-open { overflow: hidden; }
html.modal-open::before {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background:
    radial-gradient(1200px 800px at 50% 80%, rgba(0,0,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(6,9,14,.85), rgba(6,9,14,.78));
  backdrop-filter: blur(3px) saturate(.95);
  transition: opacity 160ms var(--ease);
}

/* Mobile */
@media (max-width: 860px){
  #loginPanel .login-shell{ grid-template-columns: 1fr; }
  #loginPanel .login-art{ min-height: 160px; border-bottom: 1px solid var(--border); }
  #loginPanel .login-art.sigil::before{
    width: 100%;                                /* no bleed on small screens */
    background-position: 18% 60%;
  }
  #loginPanel .login-form{
    margin: 14px 12px 18px; border-radius: 14px;
  }
  #loginPanel .login-tools{
    align-items: flex-start;
    flex-direction: column;
  }
}

#loginDesc {
  color: #b8c6ca;
  text-shadow: 1px 1px 4px #000;
  margin-top: -1em;
}

h4.art-title {
  color: #567e8a;;
  text-shadow: 1px 1px 4px #000;
}

.signup-request-page{
  display: grid;
  gap: 20px;
}

.signup-request-head{
  margin-bottom: 0;
}

.signup-request-shell{
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(380px, .95fr);
  align-items: stretch;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(8,12,18,.3);
  box-shadow: var(--shadow);
}

.signup-request-art{
  position: relative;
  min-height: 640px;
  padding: 28px 24px;
  color: var(--text);
}

.signup-request-art::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/ui/login-sigil-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 28% center;
  filter: saturate(.95);
  pointer-events: none;
}

.signup-request-art::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 20% 30%, rgba(116,192,255,.12), transparent 60%),
    radial-gradient(120% 90% at 85% 10%, rgba(177,151,252,.1), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  pointer-events: none;
}

.signup-request-art .art-title,
.signup-request-art .art-sub{
  position: relative;
  z-index: 1;
}

.signup-request-panel{
  align-self: start;
  z-index: 1;
  margin: 85px 18px;
  padding: 20px;
  display: grid;
  gap: .65rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,16,22,.36);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
}

@media (max-width: 860px){
  .signup-request-shell{
    grid-template-columns: 1fr;
  }

  .signup-request-art{
    min-height: 180px;
    border-bottom: 1px solid var(--border);
  }

  .signup-request-panel{
    margin: 14px 12px 18px;
    border-radius: 14px;
  }
}