/*
 * Tumbo — login layout fixes.
 *
 * Loaded last in the head, on top of the export. The export styles everything
 * inline, so anything that competes with an inline declaration needs
 * `!important` — that is the cost of correcting a generated artifact from the
 * outside, and it is preferable to editing the export by hand, which the next
 * publish would silently overwrite.
 *
 * Structure of the login screen, verified in the rendered DOM:
 *
 *   #dc-root > .sc-host > div          the shell: min-height:100vh, flex, wrap
 *     > .sc-host-x > div               the red PatternPanel
 *         > div                        its content wrapper (logo, headline, copy)
 *     > div                            the login column
 */

/* The template authors `flex:1 1 380px` on the panel, but the component is also
   given a `style` object through dc-props, and that object replaces the
   attribute — so the flex never reaches the element and the panel sizes to its
   content (304px), at every width. Restore what the template asked for. */
#dc-root > .sc-host > div[style*="min-height: 100vh"] > .sc-host-x > div {
  flex: 1 1 380px;
}

/* Phones and small tablets: the brand panel becomes a header rather than a
   column. Untouched it is 304px wide on a 390px screen — a dead white strip
   down the side — and 503px tall, so the form it is introducing starts below
   the fold and the whole page runs to 1585px. */
@media (max-width: 899px) {
  #dc-root > .sc-host > div[style*="min-height: 100vh"] > .sc-host-x > div {
    flex: 1 1 100%;
    min-height: 0 !important;
    padding: 26px 22px 24px !important;
  }

  /* The panel's own content wrapper: space-between with a 40px gap makes sense
     in a full-height column, not in a header band. */
  #dc-root > .sc-host > div[style*="min-height: 100vh"] > .sc-host-x > div > div {
    gap: 12px !important;
    justify-content: flex-start !important;
  }

  #dc-root > .sc-host > div[style*="min-height: 100vh"] h1 {
    font-size: 26px !important;
  }

  #dc-root > .sc-host > div[style*="min-height: 100vh"] .sc-host-x p {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  #dc-root > .sc-host > div[style*="min-height: 100vh"] > div:not(.sc-host-x) {
    padding: 22px 18px 32px !important;
  }
}

/* Narrow phones: the PIN pad and the tab pills are the two things that get
   cramped first. */
@media (max-width: 420px) {
  #dc-root > .sc-host > div[style*="min-height: 100vh"] h1 {
    font-size: 24px !important;
  }
}