/* ============================================================
   osmenu.css  ::  the NTLDR operating system menu
   ------------------------------------------------------------
   The black text screen Windows NT 4, 2000, XP and Server 2003
   showed at startup when boot.ini listed more than one system.

   NOT the Vista and 7 Windows Boot Manager, which is a different
   screen with a different layout, and NOT the F8 Advanced Boot
   Options list, which this file also draws but as a separate
   view.

   ------------------------------------------------------------
   WHAT MAKES IT LOOK RIGHT
   ------------------------------------------------------------

   It is a VGA text mode screen, 80 columns by 25 rows. Every
   consequence of that is the look:

     - One monospace face, one size, no bold, no italics.
     - Pure white on pure black. Not grey, not near white. There
       were sixteen colours and it used two of them.
     - The selected entry is INVERSE VIDEO: a solid white bar
       with black text, running a fixed width rather than hugging
       the label. That bar is the single most recognisable detail
       on the whole screen. A coloured left marker or an arrow is
       the usual mistake.
     - No borders, no rounding, no shadows, no gradients. There
       was no graphics mode running yet to draw any of them with.

   The block sits high, roughly a third down, with the two
   instruction paragraphs anchored near the bottom, and a lot of
   black in between. Resisting the urge to centre it vertically
   is most of the accuracy.

   Safari 7 rules: no grid, no flexbox gap, no :has(), prefixes
   on everything that needs them.
   ============================================================ */

.osmenu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 940;
  display: none;
  overflow: hidden;

  background: #000000;
  color: #ffffff;

  /* The same VGA font as the BIOS, and named on the descendants
     for the same reason: css/chrome.css has a universal font rule
     that targets every element directly, and a direct match beats
     an inherited one whatever its specificity. Without this the
     entries in the list were drawn PROPORTIONAL while their
     container was monospace, which is why the selection bar never
     lined up with the text in it.

     NTLDR ran in the same 80x25 text mode as the BIOS before it,
     so it gets the same size and the same line height. */
  font-family: "VGA", "Lucida Console", Consolas, Monaco, monospace;

  /* vmin, NOT vw. The same fault the POST had: with vw, the size
     of a screen that has a fixed number of ROWS on it is decided
     by the width, so an ultrawide monitor gets text scaled to a
     dimension the text does not use, and the bottom of the screen
     goes past the bottom of the window. 2.8vmin is 22.4px at
     1280x800, which is what 1.75vw was on the machines this is
     built for. */
  font-size: 2.8vmin;
  line-height: 1;

  /* A boot menu is not a document. Dragging a selection across
     it looks wrong and gets in the way of the arrow keys. */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;

  cursor: url("../img/cursors/normal.png") 0 0, default;
}
.osmenu.is-active { display: block; }

/* The 80 column text area, held to a real character measure and
   pushed down from the top the way the original sat. */
.osmenu,
.osmenu * {
  font-family: "VGA", "Lucida Console", Consolas, Monaco, monospace;
}

/* 80 columns of the same grid the BIOS used: 80 x 0.5625em = 45em. */
.osmenu__inner {
  width: 45em;
  margin: 0 auto;
  padding: 13vh 0 0;
}

.osmenu__head {
  margin: 0 0 1.5em;
  white-space: pre;
}

/* ---------- the entries ---------------------------------------
   The row is a fixed width block so the inverse bar is a clean
   rectangle. Padding lives on the row rather than the container
   so the highlight starts where the text does. */
.osmenu__list {
  margin: 0 0 2.4em;
  padding: 0;
  list-style: none;
}

.osmenu__row {
  display: block;
  width: 38em;
  padding: 0 6px;
  white-space: pre;
  color: #ffffff;
  background: transparent;
}

/* INVERSE VIDEO. This is the whole thing. */
.osmenu__row.is-on {
  background: #ffffff;
  color: #000000;
}

/* ---------- the footer paragraphs ------------------------------
   Two blocks: how to drive it, then the countdown, then the F8
   line last with a gap above it. */
.osmenu__help {
  margin: 0 0 1.4em;
  white-space: pre;
}

.osmenu__count {
  margin: 0 0 3.2em;
  white-space: pre;
}

.osmenu__f8 {
  margin: 0;
  white-space: pre;
}

/* The countdown number sits in its own element so only the digits
   are rewritten each second, rather than the whole sentence. */
.osmenu__secs { color: #ffffff; }


/* ---------- the F8 view ----------------------------------------
   Advanced Boot Options. Same screen, different contents: a
   centred title, a longer list, and its own footer. */
.osmenu__adv { display: none; }
.osmenu.is-adv .osmenu__adv { display: block; }
.osmenu.is-adv .osmenu__main { display: none; }


/* ---------- the F1 view ----------------------------------------
   Help. The same screen again, with prose on it.

   is-help and is-adv are never set together: js/osmenu.js clears
   one when it sets the other, so there is no third combination to
   have an opinion about here. */
.osmenu__hlp { display: none; }
.osmenu.is-help .osmenu__hlp { display: block; }
.osmenu.is-help .osmenu__main,
.osmenu.is-help .osmenu__adv { display: none; }

/* The body of it. A pre rather than a stack of paragraphs,
   because the two column key lists in it are aligned with spaces
   the way every other screen on this boot chain is, and a
   paragraph with white-space: pre is a pre wearing a hat. */
.osmenu__pre {
  margin: 0 0 1.4em;
  font-family: "VGA", "Lucida Console", Consolas, Monaco, monospace;
  font-size: 1em;

  /* Loose enough to read a paragraph in, tight enough that the
     whole screen still fits above the fold on a 1280x800 laptop,
     which is the shortest of the two machines this is built for.
     There is no scrolling on the boot chain: a help screen you
     have to scroll is a help screen with its second half hidden. */
  line-height: 1.25;
  color: #ffffff;
  white-space: pre;
}

/* Help is the longest of the three views, so it starts higher up
   the screen than the menu does. */
.osmenu.is-help .osmenu__inner { padding-top: 5vh; }

.osmenu__title {
  margin: 0 0 1.6em;
  text-align: center;
  white-space: pre;
}


/* ---------- the curtain ----------------------------------------
   #bootlayer wraps both the network boot and this menu. It is
   HIDDEN BY DEFAULT and only shown when a script adds is-booting
   to <html>.

   That direction matters. With JavaScript switched off, or for a
   crawler, or if any of these files fail to load, the site simply
   appears with no boot at all. The opposite default would leave a
   black rectangle nailed over the home page forever. Fail open,
   never fail closed, when the thing being gated is decorative. */
#bootlayer { display: none; }

html.is-booting #bootlayer,
html.logon-root #bootlayer { display: block; }

/* While the curtain is down the page underneath must not scroll
   or show through. visibility rather than display, so the home
   page still lays out and its images still decode behind the
   curtain and are ready the moment it lifts. */
html.is-booting body { overflow: hidden; }

html.is-booting .wrap,
html.is-booting .wallpaper,
html.is-booting .wallpaper-scrim { visibility: hidden; }


/* ---------- reduced motion --------------------------------------
   Nothing here moves in the first place. The countdown is a
   number being rewritten once a second, which is information
   rather than animation, so it stays. js/osmenu.js does give the
   countdown longer under this setting, because a timed gate is a
   barrier and a barrier should not be a stopwatch. */