/*
  Sign in, full height. The left is the office's identity, a portrait against
  deep navy with the national tricolour above and a lotus drawn as a quiet
  watermark. The right is the work: two fields and a button, nothing else.
  On a phone the two stack, with the portrait cropped to a banner so the
  fields still open above the fold.
*/

body.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  /* The office screens reserve room for the bottom tab bar; sign in has none. */
  padding-bottom: 0;
  background: var(--navy-900);
  display: flex;
  flex-direction: column;
}

.tricolour { display: flex; height: 5px; flex: none; }
.tricolour span { flex: 1; }
.tricolour span:nth-child(1) { background: #ff9933; }
.tricolour span:nth-child(2) { background: #ffffff; }
.tricolour span:nth-child(3) { background: #138808; }

.login-grid {
  flex: 1 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: stretch;
  min-height: 0;
}


/* ---------- Portrait side ------------------------------------------------ */

.portrait {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #16255f 0%, var(--navy-900) 62%),
    var(--navy-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: var(--s5) var(--s4) var(--s4);
  min-height: 250px;
}

.portrait .lotus {
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  max-width: 620px;
  color: rgba(240, 220, 134, .12);
  pointer-events: none;
}

.portrait .crest {
  position: absolute;
  top: var(--s5);
  left: var(--s6);
  z-index: 2;
  text-align: center;
}
.portrait .crest .emblem { height: 96px; display: block; }
.portrait .crest .crest-label {
  display: block;
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-300);
}

.portrait .photo {
  position: relative;
  z-index: 1;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--gold-500), 0 18px 40px rgba(0, 0, 0, .38);
}

.portrait .who { position: relative; z-index: 1; text-align: center; margin-top: var(--s4); }
.portrait .who p { margin: 0; }
.portrait .who .name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-200);
}
html[lang="gu"] .portrait .who .name { font-family: var(--font-gu); letter-spacing: .5px; font-size: 23px; }
.portrait .who .role { font-size: var(--text-base); color: #d7dcf0; margin-top: 4px; }
.portrait .who .place { font-size: var(--text-sm); color: #98a2c8; margin-top: 2px; }

/* ---------- Form side ---------------------------------------------------- */

.form-side {
  background: var(--paper);
  background-image: radial-gradient(120% 70% at 50% 0%, rgba(212, 178, 92, .12), transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s6) var(--s4) var(--s7);
  overflow: hidden;
}

/* The Ashoka Chakra, drawn rather than fetched, so it costs nothing and scales
   cleanly. Held faint: it is the ground the form stands on, not an ornament. */
.form-side::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 460px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<g fill='none' stroke='%230b1548' stroke-width='.7'>\
<circle cx='50' cy='50' r='46'/><circle cx='50' cy='50' r='40'/><circle cx='50' cy='50' r='6.5'/>\
<g id='s'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(15 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(30 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(45 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(60 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(75 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(90 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(105 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(120 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(135 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(150 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
<g transform='rotate(165 50 50)'><line x1='50' y1='10' x2='50' y2='90'/></g>\
</g></svg>") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
.form-inner, .form-foot { position: relative; z-index: 1; }
.form-inner { width: 100%; max-width: 380px; }

.form-side .lang-toggle {
  display: flex; gap: var(--s2); justify-content: flex-end;
  font-size: var(--text-sm); margin-bottom: var(--s5); color: var(--ink-3);
}
.form-side .lang-toggle a[aria-current="true"] { font-weight: 600; color: var(--navy-700); }

.form-side h1 { font-size: var(--text-2xl); margin: 0 0 2px; letter-spacing: -.4px; }
.form-side .sub { margin: 0 0 var(--s5); }
.form-side form button[type="submit"] { width: 100%; margin-top: var(--s2); }
.form-side .citizen {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* ---------- Two columns once there is room ------------------------------- */

@media (min-width: 900px) {
  .login-grid {
    /* One full-height row, so both panels reach the bottom of the window. */
    grid-template-rows: 1fr;
    grid-template-columns: 1.05fr 1fr;
  }
  /* Both panels own their full row, whatever the window height. */
  .login-grid > section { min-height: 100%; }
  .portrait { padding: var(--s7) var(--s6); justify-content: center; min-height: 100%; }
  .portrait .photo { width: 260px; height: 260px; }
  .portrait .who { margin-top: var(--s5); }
  .portrait .who .name { font-size: 26px; }
  html[lang="gu"] .portrait .who .name { font-size: 30px; }
  .portrait .lotus { width: 108%; bottom: -6%; }
}

@media (min-width: 1400px) {
  .portrait .photo { width: 300px; height: 300px; }
}

/* A short phone screen: keep the fields reachable without scrolling. */
@media (max-width: 899px) and (max-height: 720px) {
  .portrait { min-height: 190px; padding-top: var(--s4); }
  .portrait .photo { width: 116px; height: 116px; }
  .portrait .who .name { font-size: 17px; }
  .portrait .crest { top: var(--s3); left: var(--s4); }
  .portrait .crest .emblem { height: 62px; }
  .portrait .crest .crest-label { font-size: 8px; letter-spacing: 1.6px; }
}

/* A quiet line at the foot of the working side, so the panel is not a bare
   field of cream below the form. */
.form-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  font-size: 11.5px;
  letter-spacing: .3px;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
}
.form-foot .motto {
  font-family: var(--font-hi, inherit);
  color: var(--gold-700);
  letter-spacing: 1.4px;
}
.form-side { position: relative; }
@media (max-width: 899px) {
  .form-foot { position: static; margin-top: var(--s5); }
}