/*
 * Login panel + Cyber Dome branding for login.php.
 *
 * Extracted from dome/a123a/scripts/analytics/analytics-dark.css and the <style> block of
 * changeCurrentLoggedInUser.php, so the public login form reads as the same component as
 * the analyst one. Only the panel, the hero mark and the logo strip were taken: that file
 * also repaints body, every global input/select/label and all tables, which would fight
 * Bootstrap and wipe out the .contact-us background image on this page.
 *
 * Everything here is scoped under .login-dome. index.css is shared with 2FA.php,
 * analytics-account.php, cip/login.php and the maintance login/ copies - all of which use
 * .form-container-login - so nothing in this file may apply without that wrapper.
 *
 * Loaded AFTER bootstrap and index.css: the .btn rules below are what override Bootstrap's.
 */

.login-dome {
  --dc-green: #03d503;
  --dc-green-ring: rgba(3, 213, 3, 0.18);

  --dc-panel: #0a0a0a;
  --dc-panel-3: #151515;

  --dc-border: rgba(255, 255, 255, 0.1);
  --dc-border-soft: rgba(255, 255, 255, 0.06);

  --dc-text: #e8e8e8;
  --dc-muted: rgba(255, 255, 255, 0.46);
  --dc-muted-dim: rgba(255, 255, 255, 0.28);

  --dc-field-bg: #0d0d0d;
  --dc-field-bg-focus: #111411;

  --dc-danger: #ff6b6b;
  --dc-danger-bg: rgba(255, 107, 107, 0.08);
  --dc-danger-border: rgba(255, 107, 107, 0.3);

  --dc-radius: 10px;

  /*
   * Dark native widgets: scrollbars, the caret, and - the reason it is here - the colour
   * Chrome and Safari resolve for the autofill highlight. Without it they take the LIGHT
   * branch of their internal light-dark() and fill a saved username/password field pale
   * blue on this otherwise black panel. It is scoped here rather than on :root to keep the
   * whole-file rule that nothing applies without the .login-dome wrapper; color-scheme
   * inherits, so the fields below still get it. The autofill block further down is what
   * actually repaints the field - this only stops the wrong colour being picked first.
   */
  color-scheme: dark;

  /*
   * Vertical room the fixed navbar needs - ZERO on this page, because login.php no longer
   * loads js_menu.js and so has no navbar at all. The variable is kept rather than deleted
   * because the padding below is written in terms of it: restoring the bar is a matter of
   * putting the script back and giving this a value again (71px, and calc(4vh + 76px) at
   * >=991px, where index.css floats a taller pill).
   *
   * This is what lets the stack start at the top of the viewport instead of 71-110px down.
   */
  --dc-nav-clear: 0px;
}

/* ---------------------------------------------------------------- page backdrop
 * index.css paints every .contact-us with background-image:url(./img/image.png). The login
 * views do not want it - they are a plain black field, matching the analyst login at
 * dome/a123a/scripts/analytics/changeCurrentLoggedInUser.php, which has no .contact-us at
 * all and so just takes body's #000.
 *
 * :has() is unavoidable here and is the one exception to this file's "everything under
 * .login-dome" rule: .contact-us is the PARENT of the wrapper, so a descendant selector
 * cannot reach it. The condition is what keeps it honest - it matches only a .contact-us
 * that contains a login view, so the authenticated analytics dashboard and every other
 * page using .contact-us keep the image. analytics-account.php already leans on the same
 * pattern for its dashboard (.contact-us:has(.analytics-section)).
 */
.contact-us:has(.login-dome) {
  background-image: none;
  background-color: #000;
}

/* ---------------------------------------------------------------- page stack
 * hero on top, then the form panel, then the logo strip across the full width.
 *
 * index.css pins .form-container-login to height:calc(100vh - 71px), which cannot hold
 * three stacked blocks - so it becomes a min-height here. Written on the compound selector
 * so the pages that share .form-container-login keep the fixed height.
 *
 * NOT justify-content:center, which index.css sets. When centred content grows taller than
 * its box the excess spills out of BOTH ends, and whatever overflows past the start edge of
 * a scroll container cannot be scrolled back to - so on a short viewport the top of the
 * hero mark was being clipped away for good, not merely hidden behind the navbar.
 *
 * Centring is done instead by auto margins on the first and last child (see .hero and
 * .logo-section below). They soak up leftover space exactly like centring when the stack
 * fits, and collapse to zero when it does not, so the page simply scrolls.
 *
 * The stack is still centred, not top-aligned - it just sits higher now that there is no
 * navbar to clear and the hero is a short emblem over a wordmark rather than a 200px mark
 * over a line of type.
 */

.form-container-login.login-dome {
  /*
   * index.css holds .form-container-login to width:60% (90% below 991px), which leaves the
   * logo strip about 778px on a 1366 screen - some 120px short of what 9 captions need to
   * sit on one line. Widened here to fit the strip at its 900px cap plus this block's own
   * 16px padding. The panel is not affected: .box is a fixed 440px and centres itself, so
   * a wider column only gives the strip underneath it more room.
   */
  width: 100%;
  max-width: 932px;
  /*
   * EXACTLY one viewport, not a minimum: the stack must never scroll, so it is given a
   * fixed box and every piece inside it is sized to fit that box (see the vh clamps on the
   * hero, the panel and the logo strip below). overflow:hidden is the guarantee - nothing
   * can produce a scrollbar - which is only safe BECAUSE of those clamps. Add a fixed-px
   * block to this stack and it will be cut off rather than scrolled to, so anything new
   * here needs a vh term too.
   *
   * dvh tracks the collapsing mobile URL bar; the vh line above it is the fallback for
   * browsers that lack dvh.
   */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  justify-content: flex-start;
  /* the gaps give way first on a short screen - cheaper than shrinking the content */
  gap: clamp(4px, 1.8vh, 15px);
  padding: calc(var(--dc-nav-clear) + clamp(6px, 2.6vh, 32px)) 16px clamp(6px, 2.6vh, 32px);
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- hero
 * mark and wordmark as one block, so the gap between them never depends on the stack's gap
 */

.login-dome .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  text-align: center;
  /*
   * Half of the stack's vertical centring - the other half is on .logo-section. An auto
   * margin eats the free space left over in the flex line, so the stack sits centred while
   * it fits and sticks to the top once it no longer does. See the page stack block above
   * for why justify-content:center cannot be used for this.
   */
  margin-top: auto;
}

/*
 * When the lockup is a link this, not .hero, is what stacks the two marks: the <a> is then
 * .hero's only child, so the column has to be re-declared here or the mark and the wordmark
 * sit side by side. Both carry the gap so the spacing holds either way.
 */
.login-dome .hero,
.login-dome .hero-link {
  gap: clamp(2px, 0.8vh, 6px);
}

.login-dome .hero-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

/*
 * The emblem is sized in its own right rather than from the grid's plate height. It is
 * round, so it is sized by width and left square - a wide plate would only pad it with
 * empty space. Kept deliberately small: the wordmark below carries the name now, so the
 * emblem only has to read as a mark, and every pixel here is page height the login panel
 * does not get.
 *
 * No opacity/filter/transform on this element or its ancestors, and no entrance animation:
 * .is-blend below screen-blends against the PAGE backdrop, and any of those creates a
 * stacking context that silently kills the blend. The current .png has its own alpha so it
 * does not use the class, but a swap back to the .jpeg would.
 */
.login-dome .hero-mark {
  /*
   * vw/vh, not a %: the lockup shrink-wraps its contents, so a % here would resolve against
   * a width that these very marks are what determine.
   *
   * The 11vh term is what makes a short viewport work. This is a square image, so its width
   * IS its height - cap it against the viewport's height and the emblem gets out of the
   * way on a laptop instead of pushing the panel off the bottom. 84px stays the ceiling.
   */
  width: min(84px, 18vw, 11vh);
}

.login-dome .hero-mark img {
  width: 100%;
  height: auto;
  display: block;
}

/* for art exported without transparency - maps its black backdrop onto the page */
.login-dome .hero-mark.is-blend img {
  mix-blend-mode: screen;
}

.login-dome .hero-mark.is-dark img {
  filter: invert(1) brightness(1.8) contrast(0.9);
}

/*
 * The name as art. The file is a wide lockup (roughly 4:1), so it is sized by width and
 * left to find its own height; clamp() keeps it off the edges on a phone without ever
 * growing past its native size, where it would go soft.
 *
 * The type here is not for the image - it dresses the alt text for when the file does not
 * load, so the fallback still reads as a wordmark rather than as a stray line of link text,
 * in a box already the right width for it.
 */
.login-dome .hero-wordmark {
  /*
   * The art is about 4:1, so 46vh of width is roughly 11vh of height - the same budget the
   * emblem above gets. That vh term is what keeps the lockup off the panel on a short
   * screen; 330px is still the ceiling, and it never grows past its native size.
   */
  width: min(330px, 72vw, 46vh);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: clamp(17px, 5vw, 25px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
}

.login-dome .hero-wordmark img {
  width: 100%;
  height: auto;
  display: block;
}

/*
 * Text version of the name, used when no 'wordmark' image is set. Wide tracking and
 * small-ish caps are what keep a three-word name looking deliberate under a round emblem.
 * clamp() so the line never outgrows a phone - it must stay on one line for the tracking to
 * read evenly.
 */
.login-dome .hero-title {
  margin: 0;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: clamp(17px, 5vw, 25px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.2em;
  /* tracking is added after every glyph, the last one included, so a centred line sits
     half a space left of true centre. An indent equal to the tracking balances it. */
  text-indent: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- panel */

.login-dome .dc-panel {
  background: var(--dc-panel);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7);
}

.login-dome .box {
  width: 440px;
  max-width: 100%;
  padding: 0px 16px;
  box-sizing: border-box;
  text-align: center;
  color: var(--dc-text);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
}

.login-dome .box h3 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

/* the single green accent on the heading, instead of colouring the whole word */
.login-dome .box h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 10px auto 0;
  background: var(--dc-green);
}

.login-dome .box form label {
  display: block;
  /* vh so the form concertinas on a short screen rather than overflowing the stack */
  margin-top: clamp(3px, 1.7vh, 15px);
  margin-bottom: 0;
  text-align: left;
  color: var(--dc-text);
  font-size: 13px;
  font-weight: 600;
}

/* ---------------------------------------------------------------- fields */

.login-dome input[type="text"],
.login-dome input[type="password"] {
  background: var(--dc-field-bg);
  border: 1px solid var(--dc-border);
  border-radius: 6px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  /* vertical padding gives way on a short screen; the font size does not, so the field
     stays readable and tappable - it just gets slimmer */
  padding: clamp(5px, 1.1vh, 9px) 11px;
  box-sizing: border-box;
  transition: 0.2s all ease-out;
}

/* green shows up on intent, not at rest */
.login-dome input[type="text"]:focus,
.login-dome input[type="password"]:focus {
  background: var(--dc-field-bg-focus);
  border-color: var(--dc-green);
  outline: none;
  box-shadow: 0 0 0 3px var(--dc-green-ring);
}

.login-dome input:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.18);
}

.login-dome ::placeholder {
  color: var(--dc-muted-dim);
}

/* ---------------------------------------------------------------- autofilled fields
 * A field Chrome/Edge/Safari have filled from a saved login is painted by the UA with its
 * OWN background and text colour, applied above author CSS - the `background` rule above
 * loses to it, and so would an !important one. The single property they leave alone is
 * box-shadow, so a 1000px inset shadow is what actually repaints the field, and
 * -webkit-text-fill-color is the matching lever for the text, since `color` is overridden
 * too.
 *
 * Firefox does it differently: it keeps the author background and layers a filter() over
 * the control instead, so there `filter: none` is the entire fix.
 *
 * The prefixed and standard selectors are kept as SEPARATE rules on purpose. A browser
 * that cannot parse one selector in a list drops the WHOLE list, so pairing :autofill with
 * :-webkit-autofill would lose both on an engine that knows only one of them.
 *
 * The 9999s background-color transition is the belt to that braces: it stops the UA colour
 * flashing in before the shadow covers it, by starting a transition that never lands.
 *
 * No border declarations here deliberately - autofill does not touch the border, so
 * leaving it alone lets the :hover and :focus rules above keep their edge treatment.
 */
.login-dome input:-webkit-autofill,
.login-dome input:-webkit-autofill:hover,
.login-dome input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--dc-field-bg) inset;
  box-shadow: 0 0 0 1000px var(--dc-field-bg) inset;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  transition: background-color 9999s ease-in-out 0s;
}

.login-dome input:autofill,
.login-dome input:autofill:hover,
.login-dome input:autofill:active {
  box-shadow: 0 0 0 1000px var(--dc-field-bg) inset;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  filter: none;
  transition: background-color 9999s ease-in-out 0s;
}

/*
 * Autofilled AND focused. The green focus ring above is itself a box-shadow, and one
 * box-shadow declaration replaces another outright rather than stacking with it - so the
 * ring has to be restated here as a second layer, or focusing a filled field drops it.
 */
.login-dome input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--dc-field-bg-focus) inset, 0 0 0 3px var(--dc-green-ring);
  box-shadow: 0 0 0 1000px var(--dc-field-bg-focus) inset, 0 0 0 3px var(--dc-green-ring);
}

.login-dome input:autofill:focus {
  box-shadow: 0 0 0 1000px var(--dc-field-bg-focus) inset, 0 0 0 3px var(--dc-green-ring);
}

/* full-width field, as used by the stacked login form */
.login-dome .field {
  width: 100%;
  box-sizing: border-box;
  margin-top: clamp(2px, 0.7vh, 6px);
  display: block;
}

.login-dome .captcha-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: clamp(4px, 1.6vh, 14px);
}

/* captcha.php renders a 100x30 grey-on-black png, so it needs no inversion - just a frame.
   Kept at its native size to stay sharp. */
.login-dome .captcha-row img {
  width: 100px;
  height: clamp(24px, 4.6vh, 40px);
  flex: none;
  padding: 6px;
  background: var(--dc-field-bg);
  border: 1px solid var(--dc-border);
  border-radius: 6px;
  display: block;
}

.login-dome .captcha-row input {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

/* ---------------------------------------------------------------- button
 * The one place green is allowed to fill a shape: the primary action. These properties are
 * all ones Bootstrap's .btn also sets, so the selector is scoped rather than bare - it has
 * to win on specificity, not just on load order.
 */

.login-dome .box .btn {
  display: inline-block;
  width: 100%;
  margin-top: clamp(6px, 2.2vh, 20px);
  padding: clamp(5px, 1.3vh, 10px) 18px;
  border: 1px solid var(--dc-green);
  border-radius: 24px;
  background: var(--dc-green);
  color: #000000;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: 0.3s all ease-out;
  margin-bottom: 15px;
}

.login-dome .box .btn:hover,
.login-dome .box .btn:focus {
  background: transparent;
  color: var(--dc-green);
  border-color: var(--dc-green);
}

/* ---------------------------------------------------------------- messages */

.login-dome .error {
  color: var(--dc-danger);
  background: var(--dc-danger-bg);
  border: 1px solid var(--dc-danger-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  text-align: left;
}

.login-dome .error ul {
  margin: 0;
  padding-left: 18px;
}

/* ---------------------------------------------------------------- logo strip
 * Project logos shown under the login form. Fed by the $projectLogos array at the top of
 * login.php. The hero mark above the panel is separate, further up this file.
 *
 * One row at every width: the grid is given an explicit column count, so it has nowhere to
 * wrap to - the tiles compress instead. The strip lives OUTSIDE the form panel, so it is
 * free to be wider than it.
 */

.login-dome .logo-section {
  width: 100%;
  /*
   * Capped, and the cap is set by the captions rather than the art: at 9 columns this is
   * about what the longest name ("Web IPS & RASP") needs to sit on one line at full size.
   * It is also the point past which these small supporting marks start looking stranded,
   * each in its own empty column. Pulling it back in is safe - the names wrap rather than
   * clip - but they will start doubling up.
   *
   * This only binds because the page stack above widens the column to match; index.css on
   * its own holds .form-container-login to 60%, which is ~120px short of it.
   */
  max-width: 900px;
  /*
   * bottom:auto is the other half of the stack's vertical centring, paired with .hero's
   * margin-top. It has to ride on this shorthand rather than sit in the page stack block
   * above: a later `margin: 0 auto` would reset it back to zero.
   */
  margin: 0 auto auto;
}

.login-dome .logo-section-title {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dc-muted-dim);
  text-align: center;
  margin-bottom: 18px;
}

/*
 * --logo-count is set inline on the element by renderProjectLogos(), so the column count
 * always matches the number of rows in $projectLogos - add a logo and the row absorbs it
 * with no CSS change. The 9 fallback only applies if that inline style goes missing.
 *
 * minmax(0, 1fr) rather than 1fr: a grid item's automatic minimum is its content, so a
 * plain 1fr would let the longest unbreakable word in a caption push the row wider than
 * the viewport instead of letting the column shrink.
 */
.login-dome .logo-grid {
  display: grid;
  grid-template-columns: repeat(var(--logo-count, 9), minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  margin-top: clamp(5px, 1.7vh, 16px);
}

.login-dome .logo-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.8vh, 7px);
  box-sizing: border-box;
  /* --i is set per tile in PHP, so the row fades up left-to-right rather than at once */
  animation: logoIn 0.5s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes logoIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * The strip is deliberately inert: no lift, no dimming of the other tiles, no scale-up and
 * no caption underline on hover. These are static supporting marks, not controls - nothing
 * here is clickable, so hover feedback only suggested otherwise.
 */

/*
 * A WIDE plate, not a square. Wordmarks ("VECTRA AI") are far wider than they are tall, so
 * object-fit inside a square box would fit them to the width and leave them a few px tall.
 * The rectangle is what lets a short plate still render a wordmark legibly.
 *
 * Fixed height, identical for every tile: the logos sit on one optical line and the
 * captions below them on another. Varying this per tile is what breaks the row's rhythm.
 */
.login-dome .logo-thumb {
  width: 100%;
  /*
   * Still identical for every tile, so the row keeps one optical line - it is the whole
   * row that shrinks together on a short screen, not individual plates. The vh term is
   * what lets the strip survive alongside the hero and the panel in one viewport.
   */
  height: clamp(20px, 6.2vh, 54px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/*
 * width/height 100% rather than max-*: max-* only caps, so a logo smaller than its plate
 * would sit at its natural size and look lost. These force every mark to fill the plate,
 * and object-fit:contain keeps the aspect ratio intact.
 */
.login-dome .logo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* --logo-scale is the per-logo optical nudge ('scale' => 0.85 on a $projectLogos row) */
  transform: scale(var(--logo-scale, 1));
}

/* opt-in for marks that ship black-only: set 'dark' => true on the $projectLogos row */
.login-dome .logo-thumb.is-dark img {
  filter: invert(1) brightness(1.8) contrast(0.9);
}

/*
 * 'blend' => true. Screen blending maps black to transparent, so art exported without an
 * alpha channel stops reading as a rectangle floating on the page. Only works while no
 * ancestor has opacity/filter/transform creating a stacking context. Note .logo-tile's
 * entrance animation is exactly that for the half-second it runs, so a blended mark in this
 * grid shows its black box until the fade-up settles - which is one reason the hero mark
 * sits in its own un-animated .hero-mark instead.
 */
.login-dome .logo-thumb.is-blend img {
  mix-blend-mode: screen;
}

/* fallback monogram when a logo file is missing (see the img onerror hook) */
.login-dome .logo-thumb.is-missing {
  border: 1px dashed var(--dc-border);
  background: var(--dc-panel-3);
}

.login-dome .logo-thumb.is-missing::after {
  content: attr(data-initial);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--dc-muted-dim);
}

/*
 * Names are shown in full - no nowrap, no ellipsis. A caption that will not fit its column
 * wraps onto a second line instead of being cut off, which is the one thing these labels
 * exist to avoid: "Web IPS & RASP" clipped to "Web IPS..." tells the reader nothing.
 *
 * Captions align at their FIRST line, not their last, which is why there is no
 * margin-top:auto here: the plate above is a fixed height and the tile's gap is fixed, so
 * every caption already starts at the same offset. Pinning them to the bottom instead would
 * make a one-line name sit level with the SECOND line of its neighbour.
 *
 * break-word is the floor, for a column too narrow for even a single word - it breaks
 * mid-word rather than letting the name spill out over the tiles either side. balance
 * splits a two-line caption evenly instead of leaving one word stranded below.
 */
.login-dome .logo-name {
  padding-bottom: clamp(1px, 0.8vh, 7px);
  width: 100%;
  font-family: "Open Sans", Arial, sans-serif;
  /*
   * Tracks the column, which below ~930px is tracking the viewport: the strip holds its 9
   * columns at every width, so the type has to give instead. 11px is the design size and
   * the cap - it never grows past it; 8.5px is about the floor for 600-weight text this
   * small before it stops being readable at all.
   */
  font-size: clamp(8.5px, 1.3vw, 11px);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--dc-muted);
  overflow-wrap: break-word;
  text-wrap: balance;
}

/*
 * Still one row on a phone - only tighter. No min-width/max-width or horizontal padding
 * here: anything that sets a floor on the column width would make the row overflow the
 * viewport rather than wrap, which is the whole point of the explicit column count above.
 */
@media (max-width: 560px) {
  .login-dome .logo-grid {
    gap: 5px;
  }

  .login-dome .logo-tile {
    gap: 5px;
  }

  .login-dome .logo-thumb {
    height: 36px;
  }

  /*
   * No font-size override here any more - the clamp() on .logo-name already scales with the
   * viewport, and a flat value at this breakpoint would only undo it. What this width does
   * need is room to wrap: captions run to two or three lines down here, so the tiles get a
   * little more air between the plate and the text.
   */
  .login-dome .logo-name {
    padding-bottom: 4px;
    line-height: 1.25;
  }
}

/*
 * ---------------------------------------------------------------- short viewports
 * The stack is overflow:hidden, so on a short screen "too tall" means CLIPPED, not
 * scrolled. The vh clamps above carry it down to roughly 420px of viewport height; below
 * that their vh terms are still generous enough to overrun by a few px, mostly because the
 * captions have wrapped to two lines by then and the strip is paying for it twice.
 *
 * So this block squeezes the two things that cost the most height and matter the least:
 * the spacing, and the logo strip. The panel is left alone on purpose - the fields and the
 * button are what the page is FOR, and they are already at their vh floors here.
 *
 * max-height, not max-width: this is about the height budget, so it has to fire on a short
 * wide window (a 1920x400 one included), which a width query would miss entirely.
 */
@media (max-height: 520px) {
  .form-container-login.login-dome {
    gap: 4px;
    padding: calc(var(--dc-nav-clear) + 6px) 16px 6px;
  }

  .login-dome .hero-mark {
    width: min(84px, 18vw, 9vh);
  }

  .login-dome .hero-wordmark {
    width: min(330px, 72vw, 38vh);
  }

  .login-dome .box form label {
    margin-top: 4px;
  }

  .login-dome .logo-grid {
    margin-top: 4px;
  }

  .login-dome .logo-tile {
    gap: 2px;
  }

  .login-dome .logo-thumb {
    height: 20px;
  }

  .login-dome .logo-name {
    font-size: 8px;
    line-height: 1.15;
    padding-bottom: 0;
  }
}

/*
 * Second tier, for a phone held in landscape: the viewport there is often only 300-360px
 * tall once the browser chrome is taken off, and the block above still overran it by about
 * 14px. Everything is squeezed one more notch rather than dropping the logo strip, which
 * would be the easy way out but would stop the page showing what it is there to show.
 *
 * This is the floor. Below roughly 290px there is nothing left to give and the strip would
 * have to go - but no real device reports a viewport that short in either orientation.
 */
@media (max-height: 380px) {
  .form-container-login.login-dome {
    gap: 3px;
    padding: calc(var(--dc-nav-clear) + 4px) 16px 4px;
  }

  .login-dome .hero-mark {
    width: min(84px, 18vw, 8vh);
  }

  .login-dome .hero-wordmark {
    width: min(330px, 72vw, 34vh);
  }

  .login-dome .box form label {
    margin-top: 3px;
  }

  .login-dome .logo-thumb {
    height: 16px;
  }

  .login-dome .logo-name {
    font-size: 7.5px;
    line-height: 1.1;
  }
}

/* the entrance fade-up is the only motion left in the strip, so this drops all of it */
@media (prefers-reduced-motion: reduce) {
  .login-dome .logo-tile {
    animation: none;
  }
}