/* ==========================================================================
   Windows XP "Log On to Windows" dialog.

   Every number in this file was measured from a native-resolution
   reconstruction of a reference screenshot (see reference-native.png,
   417x241 px). Layout is expressed in native XP pixels; --scale blows the
   whole dialog up without disturbing any of the internal geometry.
   ========================================================================== */

:root {
  --scale: 2;
  /* sampled from the reference */
  --desktop-blue: #00309c;
  --surface: #ece9d8;
  --field-border: #7f9db9;
  --btn-border: #003c74;
  --disabled-text: #aca899;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.hidden { display: none !important; }

.desktop {
  width: 100%;
  min-height: 100%;
  background: var(--desktop-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The dialog is authored at exactly 417x241 native px and scaled as a unit,
   so no rounding creeps into any of the internal measurements. */
.scaler {
  width: 417px;
  height: 241px;
  transform: scale(var(--scale));
  transform-origin: center center;
}

#logon-window {
  width: 417px;
  height: 241px;
  box-sizing: border-box;
  padding: 0 0 3px 0;
  font-family: "Pixelated MS Sans Serif", Arial;
}

/* ---------- title bar ------------------------------------------------ */
/* Gradient sampled row-by-row from the reference (29 rows tall). */
#logon-window > .title-bar {
  height: 29px;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: linear-gradient(
    180deg,
    #003aa9   0%,
    #2886ff   3.57%,
    #3897fe   7.14%,
    #0c76fe  10.71%,
    #0062f3  14.29%,
    #025ce8  17.86%,
    #0055e3  21.43%,
    #0050df  28.57%,
    #0050df  32.14%,
    #0051e1  35.71%,
    #0050e3  42.86%,
    #0051e6  50.00%,
    #0053ea  57.14%,
    #0056f3  64.29%,
    #005bf7  67.86%,
    #0060fb  75.00%,
    #0267fd  82.14%,
    #0267fd  85.71%,
    #0164fd  89.29%,
    #0060fb  92.86%,
    #004be8  96.43%,
    #003acf 100%
  );
  display: flex;
  align-items: flex-start;
}

/* Caption is Trebuchet MS Bold in the original. It is not redistributable,
   so the string is carried as a pixel-exact alpha graphic lifted from the
   reference (shadow included) and the text itself is kept for a11y. */
#logon-window > .title-bar .title-bar-text {
  width: 119px;
  height: 17px;
  margin: 9px 0 0 6px;
  padding: 0;
  background: url("assets/title-caption.png") no-repeat 0 0 / 119px 17px;
  text-indent: -9999px;
  overflow: hidden;
  font-size: 0;
}

/* ---------- client area ---------------------------------------------- */
/* The 3px window frame is drawn by xp.css as inset shadows, which do not
   displace content, so the client area has to be inset by hand. */
#logon-window > .window-body {
  margin: 0 3px;
  padding: 0;
  width: 411px;
  height: 208px;
  box-sizing: border-box;
  background: var(--surface);
  overflow: hidden;
}

/* ---------- banner --------------------------------------------------- */
/* The backdrop is a pure horizontal ramp -- every column of the reference is
   the same colour top to bottom -- so it is CSS, not bitmap, and the lockup,
   the logotype and the copyright line ride on top of it.  Stops are
   the reference profile fitted piecewise-linearly to within 1/255
   (winxp/reference/split_banner.py).  Positions are in px because the box is
   authored at its native 411px width. */
.banner {
  position: relative;
  width: 411px;
  height: 93px;
  background:
    /* orange rule, top lip: the rule's top edge lands mid-pixel, so this row
       is only ~83% covered */
    linear-gradient(to right,
      #6b8be1 0px, #6b89df 10px, #6c82ce 28px, #6f82ca 40px,
      #7783c1 50px, #7d85be 60px, #8a88b1 70px, #8e86a8 77px,
      #9387a2 85px, #9b8999 93px, #a18993 102px, #aa8a89 111px,
      #b9907f 126px, #bf9078 134px, #c79170 142px, #d59462 164px,
      #da955c 175px, #e09756 186px, #e29959 236px, #da9863 248px,
      #d89866 259px, #ce9771 270px, #c89779 280px, #bb978a 298px,
      #b49896 307px, #ab97a0 318px, #a395aa 328px, #9e94ad 336px,
      #9090b9 346px, #898fc2 356px, #8591ca 364px, #7f90d0 373px,
      #788fd8 382px, #6e8de2 402px, #6e8de2 410px)
      0 88px / 411px 1px no-repeat,
    /* orange rule */
    linear-gradient(to right,
      #6d8be1 0px, #6d8add 11px, #6f81cc 28px, #7381c5 40px,
      #8886af 64px, #96879e 77px, #a18890 89px, #ba8c76 113px,
      #ce9164 132px, #e6944a 159px, #f4963a 185px, #f3953b 233px,
      #e2934e 261px, #c39173 297px, #ba9384 308px, #b3928d 317px,
      #a8919b 327px, #9d8ea3 338px, #8d8cb5 353px, #858dc4 365px,
      #778dd6 385px, #6d8be1 402px, #6d8ce1 410px)
      0 89px / 411px 4px no-repeat,
    /* backdrop */
    linear-gradient(to right,
      #6386e2 0px, #6487e3 113px, #668ae2 127px, #698de5 133px,
      #698de5 136px, #6c8ee5 138px, #6c8ee5 142px, #6e91e5 144px,
      #7194e6 158px, #7494e7 159px, #7899ea 171px, #7ea0ea 187px,
      #80a0eb 189px, #82a2eb 199px, #87a5ed 203px, #8caaf0 218px,
      #8fadf0 224px, #96b4f3 245px, #9ab7f3 258px, #9ebaf5 277px,
      #9ebbf5 290px, #9ab7f3 315px, #95b3f3 331px, #92b0f1 340px,
      #90aef0 345px, #8caaf0 355px, #89a7ee 364px, #88a6ee 366px,
      #80a0eb 378px, #7fa0eb 384px, #7ea0ea 387px, #7d9eea 389px,
      #7899ea 400px, #7696e8 410px);
}

/* The whole lockup -- flag, "Microsoft", "Windows", "xp" and the product line
   -- as one image, recoloured for the blue backdrop by reference/make_lockup.py
   from Microsoft's own 664x151 x64 Edition artwork.  That is the same drawing
   the banner carries at ~2.9x the size and with a real alpha channel, so it
   beats anything liftable from the resampled screenshot.
   Fitted by matching the white type's alpha coverage against the reference's:
   scale 0.34950 native (0.6990 at 2x), source pixel (0,0) landing at native
   (112.5, 19.0).  That single fit predicts, in 2x banner coords, flag
   x225.0..343.1 / Microsoft x348.0..431.9 y42.2..56.9 / Windows x348.0..572.4
   y60.4..103.0 / xp x575.9..615.7 / Professional x359.9..523.5 y110.0..134.5,
   against measured 224..342 / 348..433 y43..57 / 348..574 y61..103 /
   577..616 / 359..522 y111..134.  Everything lands within ~1.5px at 2x. */
.banner-lockup {
  position: absolute;
  left: 112.5px;
  top: 19px;
  width: 232.07px;   /* 664 x 0.34950 */
  height: 52.77px;   /* 151 x 0.34950 */
}

/* The bottom-right logotype is the 1987-2012 Microsoft wordmark, which has a
   canonical vector form -- so it comes from that rather than from the resampled
   screenshot, and stays sharp at any --scale.  Uniformly scaled to the
   reference's measured ink box (46.2 x 7.66 native px at x356.65, y75.17); the
   (R) rides along in the same SVG because at ~2px it is a 4-pixel smudge in the
   reference, too small to read at 1x but legible once the dialog scales up. */
.banner-mark {
  position: absolute;
  left: 356.65px;
  top: 75.17px;
  width: 50.55px;
}

/* The copyright block is live text, not artwork.  Trebuchet MS (what msgina.dll drew it
   in) is not redistributable, so the stack degrades to whatever metric-alike is
   around; sizing is therefore pinned to the reference's ink rather than to any
   one font's em box.  Reference: ink 6.5px tall (-> 9px at a ~0.72em cap
   height), baselines on native banner rows 72 and 83, left ink edge at x5.5. */
.banner-copy {
  position: absolute;
  left: 5px;
  /* first baseline = top + half-leading + ascent, which is ~8.7px in for both
     Trebuchet and Arial, so this lands it on row 72 (verified against the
     reference ink rows, not just computed). */
  top: 64.4px;
  margin: 0;
/*   font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; */
  font-size: 9px;
  line-height: 11px;
  color: #fff;
}

/* ---------- fields --------------------------------------------------- */
.fields {
  margin: 0;
  padding: 0;
  position: relative;
  height: 115px;
}

/* Two class selectors so this outranks xp.css's
   [class^=field-row]+[class^=field-row]{margin-top:6px} (0,2,0). */
.fields > .field-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  margin: 0;
}
/* field 1 top = native y141; client starts at y122 -> 19px in */
.row-username { top: 19px; }
/* field 2 top = native y168 -> 46px in */
.row-password { top: 46px; }

.field-row label {
  position: absolute;
  left: 9px;              /* native x12, client starts at x3 */
  top: 0;
  height: 20px;
  line-height: 20px;
  font-size: 11px;
  color: #000;
  text-align: end:
}

.field-row input {
  position: absolute;
  left: 84px;             /* native x87 */
  top: 0;
  width: 243px;
  height: 20px;
  box-sizing: border-box;
  margin: 0;
  /* Reference: field border at native x87, text ink starts at x93 -> the
     content box (x88) is inset by 5px. */
  padding: 0 5px;
  border: 1px solid var(--field-border);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  font-size: 11px;
  line-height: 18px;
  color: #000;
}
.field-row input:focus {
  outline: none;
}

/* Status line sits in the gap opened up between the password field (bottom at
   66px) and the button row (pushed down to 90px) so a message never crowds
   the buttons. */
.error-row {
  position: absolute;
  left: 84px;
  top: 69px;
  font-size: 11px;
  color: #a00;
}

/* ---------- logged-in view --------------------------------------------
   loggedin.html's counterpart to .fields (login form); shares the same
   115px positioning box. Which page gets served is decided server-side
   by nginx, not by this stylesheet. */
.loggedin-message {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 19px;
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  color: #000;
}

/* ---------- buttons -------------------------------------------------- */
.button-row {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  padding-left: 84px;             /* native x87 */
  padding-right: 11px;
  top: 90px;              /* nudged down from native y205 to clear the status line */
  display: flex;
  gap: 8px;               /* borders 8px apart -> 73px button + 8px pitch gap */
  justify-content: right;
}

.button-row button {
  width: 73px;
  height: 21px;
  min-width: 0;
  min-height: 0;          /* xp.css defaults to 23px */
  margin: 0;
  /* The caption centres in the content box, so an asymmetric top padding
     nudges the baseline down 1px onto the reference's (native y219). */
  padding: 2px 0 0;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: normal;    /* iOS WebKit (incl. Firefox/Chrome on iOS) bolds
                             the form's default type="submit" button */
  color: #000;
}

.button-row button:disabled {
  color: var(--disabled-text);
  text-shadow: none;
}

/* Default-button ring, shown on whichever button actually holds focus rather
   than pinned to OK. xp.css's .focused approximation has the highlight
   inverted (light at the bottom); the real one is palest at the top and
   deepest along the bottom edge. Colours sampled row/column-wise from the
   reference OK button. Earlier shadows paint over later ones, so the 1px
   ring is listed before the 2px one. */
.button-row button:focus {
  box-shadow:
    inset  0  1px #b3d2ed,
    inset  1px 0  #6d96ce,
    inset -1px 0  #92b4e8,
    inset  0 -1px #4e70db,
    inset  0  2px #cfe2fc,
    inset  2px 0  #aec9f6,
    inset -2px 0  #b3cbf2,
    inset  0 -2px #93b2ee;
  outline: none;
}

/* ---------- responsive ----------------------------------------------- */
/* At scale 1 the dialog is a fixed 417px wide, so anything narrower than that
   (phones, slim windows) can't show it whole. Below the breakpoint the
   pixel-perfect absolute layout is abandoned for a fluid flow one: the
   transform scaling is switched off, the dialog fills the width, the banner
   keeps only the product lockup, field labels sit above full-width inputs,
   and the buttons stack. Every rule here just unwinds the native-px
   positioning set up above, matching each base rule's specificity so source
   order lets it win. */
@media (max-width: 460px) {
  .desktop {
    align-items: flex-start;
    padding: 12px;
    box-sizing: border-box;
  }

  .scaler {
    width: 100%;
    height: auto;
    transform: none;
  }

  #logon-window {
    width: 100%;
    height: auto;
  }

  #logon-window > .window-body {
    width: auto;
    height: auto;
  }

  /* Banner keeps the CSS backdrop and the lockup, centred; the copyright
     line and the corner wordmark are dropped to reclaim room. */
  .banner {
    width: auto;
  }
  .banner-copy,
  .banner-mark {
    display: none;
  }
  .banner-lockup {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Fields flow normally instead of being pinned to native coordinates. */
  .fields {
    height: auto;
    padding: 12px;
    box-sizing: border-box;
  }
  .fields > .field-row {
    position: static;
    display: flex;          /* label beside input, as in the native dialog */
    align-items: center;
    height: auto;
    margin: 0 0 12px;
  }
  /* Fixed-width label column so both input boxes share one left edge, no
     matter which label is longer. */
  .field-row label {
    position: static;
    flex: 0 0 56px;
    height: auto;
    line-height: 1.4;
  }
  .field-row input {
    position: static;
    left: auto;
    flex: 1 1 auto;
    min-width: 0;           /* let the box shrink inside the flex row */
    width: auto;
    height: 24px;
  }

  .error-row {
    position: static;
    left: auto;
    top: auto;
    margin: 0 0 12px;
  }

  /* loggedin.html's message, same treatment as .error-row above. */
  .loggedin-message {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin: 0 0 12px;
  }

  /* Buttons stack full-width for easy tapping. */
  .button-row {
    position: static;
    left: auto;
    top: auto;
    flex-direction: column;
    gap: 6px;
    padding-left: 11 px;
  }
  .button-row button {
    width: 100%;
    height: 26px;
  }
}