/* auth.css
   Authentication pages (Login + Register) + optional legacy panel styles
   Romantic parchment styling to match landing theme.
*/

/* --- Full-page auth layout --- */
.authPage .page{
  padding-top: 0;
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.authWrap{
  min-height: calc(100vh - var(--topbarH, 88px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 18px 64px;
}

/* Short viewports (landscape phones, split panes) */
@media (max-height: 520px){
  .authWrap{
    align-items: flex-start;
    padding-top: 18px;
    padding-bottom: 28px;
  }
}

.authCard{
  width: min(540px, 94vw);
  position: relative;
  border-radius: 22px;
  padding: 18px 18px 16px;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 46%, rgba(255,255,255,0.46) 100%);
  border: 1px solid rgba(90, 60, 40, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 22px 50px rgba(18, 10, 6, 0.16);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

/* Subtle compass watermark behind card content */
.authCard::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image: url("/static/img/motifs/compass-soft.svg");
  background-repeat: no-repeat;
  background-position: 80% 10%;
  background-size: 520px auto;
  opacity: 0.10;
  pointer-events:none;
  transform: rotate(-8deg);
}

/* Romantic corner flourishes */
.authCard::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 18px;
  pointer-events:none;
  background:
    url("/static/img/motifs/corner-flourish.svg") left top / 78px no-repeat,
    url("/static/img/motifs/corner-flourish.svg") right top / 78px no-repeat,
    url("/static/img/motifs/corner-flourish.svg") left bottom / 78px no-repeat,
    url("/static/img/motifs/corner-flourish.svg") right bottom / 78px no-repeat;
  opacity: 0.34;
}

.authTabs{
  position: relative;
  display:flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(90, 60, 40, 0.16);
  background: rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  margin-bottom: 14px;
  z-index: 1;
}

.authTab{
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 10px 10px;
  border-radius: 999px;
  color: rgba(60,40,25,0.75);
  border: 1px solid transparent;
}

.authTab.is-active{
  color: rgba(40, 26, 16, 0.95);
  background: linear-gradient(180deg, rgba(211,168,98,0.55), rgba(176,128,58,0.40));
  border-color: rgba(176,128,58,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 10px 18px rgba(20, 12, 6, 0.10);
}

.authHeader{
  text-align: center;
  padding: 6px 4px 6px;
  position: relative;
  z-index: 1;
}

.authKicker{
  display: inline-block;
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(60, 40, 25, 0.70);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.30);
  border: 1px solid rgba(90, 60, 40, 0.14);
}

.authTitle{
  margin: 10px 0 6px;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: .05em;
  color: rgba(45, 30, 18, 0.95);
}

.authOrnament{
  height: 12px;
  margin: 6px auto 8px;
  width: min(360px, 86%);
  background: url("/static/img/motifs/ornament-rule.svg") center / contain no-repeat;
  opacity: 0.55;
}

.authSub{
  margin: 0 auto;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(45, 30, 18, 0.76);
}

/* Notices */
.authNotice{
  position: relative;
  z-index: 1;
  margin: 10px 2px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(90, 60, 40, 0.16);
  background: rgba(255,255,255,0.40);
  color: rgba(45, 30, 18, 0.84);
  font-size: 13px;
}
.authNotice.error{
  border-color: rgba(155, 70, 55, 0.30);
  background: rgba(155, 70, 55, 0.10);
}

/* Form */
.authForm{
  position: relative;
  z-index: 1;
  margin-top: 14px;
}

.authLabel{
  display:block;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(45, 30, 18, 0.86);
  margin: 10px 0 6px;
}

.authInput{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(90, 60, 40, 0.20);
  background: rgba(255,255,255,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70);
  padding: 0 12px;
  color: rgba(25, 18, 10, 0.92);
  font-size: 14px;
  outline: none;
}

.authInput:focus{
  border-color: rgba(176,128,58,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 0 0 4px rgba(176,128,58,0.16);
}

.authActions{
  display:flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}

.authActions .btn{
  min-width: 160px;
}

@media (max-width: 420px){
  .authActions{
    flex-direction: column;
    align-items: stretch;
  }
  .authActions .btn{
    width: 100%;
    min-width: 0;
  }
  .authTitle{
    font-size: 22px;
  }
}

/* --- Legacy landing auth panel styles (kept for compatibility, currently unused) --- */
.authPanel{ margin-top: 18px; margin-bottom: 10px; }
.authPanelInner{ display:grid; grid-template-columns:1fr; gap:14px; }
.field{ margin-top: 10px; }
.fieldLabel{ display:block; font-family:var(--serif); font-weight:900; font-size:12px; color:rgba(45,30,18,.86); margin-bottom:6px; }
.fieldInput{ width:100%; height:40px; border-radius:12px; border:1px solid rgba(90,60,40,.20); background:rgba(255,255,255,.55); padding:0 12px; }
.fieldInput:focus{ border-color: rgba(176,128,58,.55); box-shadow: 0 0 0 4px rgba(176,128,58,.16); outline:none; }
.fieldHint{ margin-top:6px; font-size:12px; color:rgba(45,30,18,.62); }
.authLink{ font-family:var(--serif); font-weight:900; font-size:12px; text-decoration:none; color:rgba(60,40,25,.74); padding:8px 10px; border-radius:12px; }