/* Single sign-on: the Microsoft control on the sign-in dialog, the refusal
   that comes back in the address bar, and the linked-directory list in
   Settings.

   Every colour is a custom property declared on :root in app.css. A literal
   hex here would be right in one scheme and wrong in the other, because the
   dark palette redefines the properties and cannot redefine a hex.

   The class prefix is `sso-` throughout. Nothing here restyles a shared class:
   the button is a plain .btn, the refusal sits in the shared .callout, and the
   spacing below is the only thing this file owns. A rule on a container class
   that another view also uses would lay out that view instead, silently. */

/* ---------- the sign-in dialog ---------- */

/* The block sits under the password submit and above the demo offer, so it
   needs the same separation from the button above it that .auth-demo has. */
.sso-signin { margin-top: 16px; }

/* The mount is in the document whether or not this installation has a
   directory, so it has to take up no room when nothing was drawn into it -
   the same reason .toast:empty exists. */
.sso-signin:empty { margin-top: 0; }

.sso-signin .auth-or { margin-bottom: 8px; }

/* The Microsoft mark is not vendored, so the button is text. It is a plain
   button rather than a primary one because the password form above it is the
   default path on an installation that has both. */
.sso-button { margin-top: 0; }

.sso-hint {
  margin-top: 7px;
  text-align: center;
}

/* ---------- the refusal ---------- */

/* Given room of its own above the controls rather than squeezed between them:
   it is several sentences, it arrives after a page load, and it is the first
   thing on the panel a reader needs. */
.sso-refusal { margin-bottom: 16px; }

/* What to do next, set apart from what happened. Still --warn on --warn-soft,
   which is the pair the callout is checked against. */
.sso-refusal-hint { margin-top: 2px; }

/* ---------- settings ---------- */

/* The panel in Settings > Security, below the sign-in list. Spaced like the
   sibling blocks in that section rather than given a border of its own: it is
   one more thing about this account, not a separate card. */
.sso-panel { margin-top: 22px; }

.sso-panel .callout { margin: 8px 0 10px; }

.sso-mount { margin-top: 8px; }

.sso-links {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sso-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.sso-link-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

/* A tenant id is a GUID. Monospaced so it can be compared character by
   character against the one in the Azure portal, and allowed to wrap so it
   cannot widen the panel on a narrow screen. */
.sso-tenant {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.sso-link-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 620px) {
  /* The pill would otherwise push the dates into a column one word wide. */
  .sso-link { flex-direction: column; }
}