/* The break-glass page's own stylesheet.
 *
 * SHARES NOTHING with app.css, on purpose. This page exists for when something is
 * broken, and a stylesheet that imported the console's tokens would go down with it.
 * It is about forty lines and it should stay that way — every rule here is one more
 * thing that can be wrong on the page you reach when everything else is.
 *
 * Colours are literal rather than tokens for the same reason. There is no second
 * palette to keep in step because there is no palette.
 */
:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #F4F6F8;
  color: #1B2129;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
main {
  width: 100%;
  max-width: 22rem;
  padding: 1.75rem;
  background: #FFF;
  border: 1px solid #D7DCE3;
  border-radius: 6px;
}
h1 { margin: 0 0 .35rem; font-size: 1.15rem; }
p { margin: 0 0 1.1rem; color: #5B6472; font-size: .875rem; }
p.bad { color: #8C1D18; }
label { display: block; margin-bottom: .8rem; font-size: .8125rem; color: #5B6472; }
input {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .5rem .6rem;
  font: inherit;
  color: #1B2129;
  background: #FFF;
  border: 1px solid #C2C9D2;
  border-radius: 4px;
}
input:focus { outline: 2px solid #2B6CB0; outline-offset: 1px; border-color: #2B6CB0; }
button {
  width: 100%;
  padding: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  font-weight: 500;
  color: #FFF;
  background: #2B6CB0;
  border: 1px solid #2B6CB0;
  border-radius: 4px;
  cursor: pointer;
}
button:hover { background: #245A94; }
/* The Entra mark, inline in the button. Sized here rather than by width/height
 * attributes so the two never disagree, and flex-shrink:0 because a flex child with
 * intrinsic size collapses before the text does. */
.mark { width: 20px; height: 20px; flex-shrink: 0; }

/* The identity-provider button is WHITE, and that is legibility rather than taste.
 * The mark's two darkest fills are #225086 and #074793; on the blue primary button
 * (#2B6CB0) they disappear into it, which a screenshot shows and no assertion about
 * markup ever would. Microsoft's own brand guidance specifies a white or black
 * button carrying their mark for the same reason.
 *
 * Scoped to this button so the break-glass form keeps a primary one: that page has
 * no mark to protect and its button IS the action. */
button.idp {
  color: #1B2129;
  background: #FFF;
  border-color: #C2C9D2;
}
button.idp:hover { background: #F4F6F8; border-color: #8F9AA8; }