/*
 * Page styling for the CMS sign-in, on the campaign site's own palette.
 *
 * Everything inside the form comes from the framework: main.css supplies the design tokens
 * and <de-login> ships its own stylesheet. This file remaps those tokens to the campaign
 * colours and paints the surface the card sits on.
 *
 * A separate file rather than an inline <style> so the page needs no 'unsafe-inline'
 * exemption for a document-level stylesheet in its Content-Security-Policy. This is the one
 * page where a password is typed; see the landing headers policy in the admin CDK stack.
 *
 * ── The palette is read from the live site, not invented ────────────────────────────────
 * These are the custom properties www.bmowrapthegood.com actually declares:
 *
 *   --primary-color    #0075BE   the blue field the whole site sits on
 *   --secondary-color  #005587
 *   --color-dark       #001928   body copy and headings
 *   --font-color       #003758   secondary copy
 *   --color-light      #E6F9FE
 *   --background-color #EEF7FC
 *
 * ── The typeface is NOT matched, deliberately ───────────────────────────────────────────
 * The site loads Heebo and Lato from fonts.googleapis.com. This page keeps the framework's
 * self-hosted Inter Tight instead, because pulling a third-party stylesheet onto a credential
 * form is the exact hole the strict CSP exists to close: attacker-controlled CSS here is not
 * cosmetic — attribute selectors (`input[value^="a"]{background:url(…)}`) exfiltrate what is
 * being typed. Self-hosting Heebo's woff2 would match the site and keep `font-src 'self'`; it
 * is a deliberate follow-up, not an oversight.
 *
 * ── Why the ramp and not just --de-color-primary ────────────────────────────────────────
 * The framework derives four tokens from one blue ramp:
 *
 *   --de-color-primary        <- --de-blue-500    buttons, links, focus
 *   --de-color-primary-hover  <- --de-blue-600
 *   --de-color-primary-soft   <- --de-blue-50     tinted surfaces
 *   --de-color-primary-border <- --de-blue-200
 *
 * Overriding only `--de-color-primary` would leave the hover state, the tinted surfaces and
 * the borders on the framework's own blue, so the button would shift hue the moment anyone
 * moused over it. Redefining the ramp keeps the four in step.
 *
 * Custom properties inherit THROUGH shadow DOM, which is what lets a page-level stylesheet
 * reach inside <de-login> at all. Nothing else here can: the component exposes no CSS parts
 * and no slots, so the token ramp is the whole theming surface. It also only works because
 * the component is mounted with `surface: 'host'` — `surface: 'brand'` redefines every one of
 * these tokens inside its own shadow root and none of this would apply. See src/main.ts.
 */

/*
 * Both selectors, and that is not redundant. index.html sets `data-mode="light"` so the
 * framework's own `[data-mode="light"]` block wins over its dark-mode media query; that
 * selector and a bare `:root` have equal specificity, so `:root[data-mode='light']` is what
 * reliably lands on top of it. The bare `:root` covers the attribute ever being dropped.
 *
 * There is no dark variant below, deliberately: the campaign site is a blue field in every
 * context and has no dark mode, so a branded sign-in page should not flip with the visitor's
 * OS. This page is the brand, not a document.
 */
:root,
:root[data-mode='light'] {
  --de-blue-50: #eef7fc; /* the site's --background-color */
  --de-blue-100: #e6f9fe; /* --color-light */
  --de-blue-200: #b3d8ec;
  --de-blue-300: #7fbce0;
  --de-blue-400: #3f98cf;
  --de-blue-500: #0075be; /* --primary-color */
  --de-blue-600: #005587; /* --secondary-color */
  --de-blue-700: #00426a;
  --de-blue-800: #003758; /* --font-color */
  --de-blue-900: #001928; /* --color-dark */

  /* Copy inside the card, taken from the site rather than left on the framework's greys. */
  --de-color-fg: #001928;
  --de-color-fg-muted: #003758;
}

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

/*
 * The blue field the site sits on.
 *
 * Flat on the live site; here it carries a slight vertical fall towards the secondary blue so
 * a white card has something to lift off rather than floating on an even wash. Fixed
 * attachment so it belongs to the viewport rather than scrolling with a short page.
 *
 * Stated on `body` rather than left to the component, which also covers the moment before the
 * module loads — otherwise the page flashes white before turning blue.
 */
body {
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: var(--de-font-sans);
  background-color: #0075be;
  background-image: linear-gradient(170deg, #0f82c8 0%, #0075be 46%, #005587 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Purely the width container — the card holds everything now. */
.shell {
  width: 100%;
  max-width: 520px;
}

/*
 * The campaign name, as the card's masthead.
 *
 * Red `#df0027`, which is the campaign's own — sampled from the "Good" script in the live
 * site's hero-logo, not picked by eye. That artwork is an embedded bitmap rather than vector
 * fills, so the value comes from counting its opaque pixels: #df0027 accounts for ~10,600 of
 * them and is unambiguously the script. (#ed1c25 also appears, but that is the BMO roundel,
 * which this page does not use.)
 *
 * Contrast is 5.04:1 on white — clear of the 4.5:1 AA threshold at any size, so the colour is
 * safe here even though the type is large. Worth having checked: a saturated red is the one
 * brand colour that often is not.
 *
 * No rule beneath it. The gap alone separates the masthead from the copy, and at this size the
 * name carries enough weight that a line under it read as a divider the page did not need.
 *
 * `.card .wordmark`, not `.wordmark`: on the sign-in page this element is the <h1>, and a bare
 * class (0,1,0) loses to `.card h1` (0,1,1) below — the masthead would silently inherit the
 * heading's size and near-black. Two classes (0,2,0) beat it.
 */
.card .wordmark {
  margin: 0 0 9px;
  color: #df0027;
  font-size: 1.75rem;
  font-weight: 700;
  /* Tightened to match the campaign lockup, which sets the name close. */
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/*
 * The card, drawn here rather than by the component's own `card` layout.
 *
 * <de-login> exposes no slots and no CSS parts, so anything it draws is closed to the page —
 * including its card, which opens straight onto an unlabelled input with no heading. Mounting
 * it `embedded` (see src/main.ts) makes it size to its content and drop its own chrome, which
 * leaves this element free to be the card and to carry the heading above the fields.
 */
.card {
  box-sizing: border-box;
  padding: 40px 44px 38px;
  background: #ffffff;
  border-radius: 14px;
  /*
   * Two shadows: a tight contact edge, and a wide soft pool. On a saturated field a single
   * mid-sized shadow reads as a blurred outline rather than as a raised surface. Both are
   * tinted with the deep brand blue rather than neutral black, so the card sits IN the field
   * instead of on top of a grey one.
   */
  box-shadow:
    0 2px 4px rgb(0 25 40 / 0.12),
    0 24px 48px -16px rgb(0 25 40 / 0.4);
}

.card h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #001928;
}

/*
 * The card's only copy on the sign-in page, so it is sized to be read rather than skimmed
 * past. It says what signing in is FOR, deliberately without naming what the CMS manages —
 * that list will change, and a sign-in page should not have to be redeployed when it does.
 */
.lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #001928;
}

/*
 * The component in embedded mode already pays 22px of top padding inside its own shell (that
 * inset is the whole gap between a host's copy and the flow, per its stylesheet), so this only
 * tops it up to the gap the heading wants. A full gap here would double it.
 */
#login {
  margin-top: 8px;
}

noscript {
  display: block;
  margin-top: 20px;
  font-size: 0.9375rem;
  color: #003758;
}

@media (max-width: 560px) {
  .card {
    padding: 30px 24px 28px;
  }

  .card .wordmark {
    margin-bottom: 8px;
    font-size: 1.5rem;
  }
}

/*
 * ── The gated placeholder at /console ───────────────────────────────────────────────────
 * Shares this stylesheet so it stands on the same field and reuses `.card`. It is what a
 * signed-in visitor lands on until the CMS ships, so it should read as the same product
 * rather than as a page from somewhere else.
 */
.shell:has(.tag) {
  max-width: 600px;
}

.tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 10px;
  border: 1px solid #b3d8ec;
  border-radius: 999px;
  background: #eef7fc;
  color: #005587;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Two paragraphs of prose need space between them; the sign-in page's single line does not. */
.card .lede + .lede {
  margin-top: 12px;
}

.card form {
  margin-top: 26px;
}

.card form button {
  font: inherit;
  font-weight: 700;
  color: #005587;
  background: none;
  border: 1px solid #b3d8ec;
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
}

.card form button:hover {
  color: #ffffff;
  background: #0075be;
  border-color: #0075be;
}