/* Login page (Views/LoginPage.cshtml, Views/Partials/member/login.cshtml, member/login-status.cshtml) in the intranet
   design language: one card in the middle of the page, the menu's logo on a navy band at the top, then the sign-in
   button, its errors, or (signed in without groups) the group choice.
   Only LoginPage loads this file (both states: the login card, and the system picker with system-picker.css), so it
   lives in layer kb.pages.
   Only kb tokens: the page follows light and dark (the OS, or the kb-theme cookie; there is no member yet).
   The logo's own parts (.kb-logo__mark, __company, __stripe, __word) and their keyframes live in shell.css. */
@layer kb.pages {

  /* ---------- no shell ----------
     The view sets KbShellHidden, so <html> has no kb-shell. A signed-in member (picker, group choice) still gets the
     menu, topbar and breadcrumbs from masterTemplate: hide them. Legacy main.css makes body a grid with the
     menu column and gives main a padding, a width and a light background: undo that. */
  .kb-menu,
  .kb-topbar,
  .breadcrumbs,
  .breadcrumb-nav {
    display: none;
  }

  body {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .kb-main {
    grid-area: auto;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  /* ---------- page ---------- */
  .kb-login {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 32px 16px;
    box-sizing: border-box;
  }

  /* The system picker is wide and can be tall: from the top, not centred. */
  .kb-login--picker {
    display: block;
  }

  /* The mood image from Umbraco (property "image"), under a veil of the page colour, so the card stands out
     the same way in light and dark. */
  .kb-login__mood {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .kb-login__mood img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .kb-login__mood::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--kb-page) 45%, transparent);
  }

  /* ---------- card ---------- */
  .kb-login__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    border: 0;
    border-radius: var(--kb-radius-card);
    /* the menu's navy in both themes (the card is data-theme="dark", so everything inside uses the dark tokens) */
    background: linear-gradient(180deg, var(--kb-menu-from) 0%, var(--kb-menu-to) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent), var(--kb-shadow-pop);
    color: var(--kb-text);
  }

  /* the editors' logo on a white tile, the menu's INTRANET mark beside it */
  .kb-login__brand {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 26px 0;
  }

  .kb-login__tile {
    flex: none;
    display: grid;
    place-items: center;
    padding: 8px 10px;
    border-radius: var(--kb-radius);
    background: #fff; /* the navy shield needs a white ground to be seen */
  }

  /* The logo editors set in Umbraco (property "logo"), in its own colours. */
  .kb-login__logo {
    display: block;
    height: 54px;
    width: auto;
    max-width: 100%;
  }

  .kb-login__body {
    display: grid;
    gap: 20px;
    padding: 22px 26px 26px;
  }

  /* for screen readers only: the card shows the logo and the mark instead */
  .kb-login__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    margin: 0;
  }

  .kb-login__body form {
    margin: 0;
  }

  .kb-login__text {
    margin: 0;
    color: var(--kb-text-muted);
    font-size: 15px;
    line-height: 1.5;
  }

  .kb-login__heading {
    margin: 0;
    color: var(--kb-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
  }

  /* ---------- sign-in buttons ---------- */
  .kb-login__providers {
    display: grid;
    gap: 12px;
  }

  .kb-login__providers > form {
    display: grid;
    gap: 10px;
  }

  .kb-login__submit {
    width: 100%;
  }

  /* ---------- errors ---------- */
  .kb-login__error {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--kb-status-err) 35%, transparent);
    border-radius: var(--kb-radius-card);
    background: var(--kb-status-err-bg);
    color: var(--kb-status-err-ink);
    font-size: 14px;
    line-height: 1.45;
  }

  .kb-login__error-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .kb-login__error-head > svg,
  .kb-login__error-head > .kb-icon {
    flex: none;
    margin-top: 1px;
  }

  .kb-login__error-title {
    margin: 0;
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
  }

  .kb-login__error-text {
    overflow-wrap: anywhere;
  }

  /* ---------- no providers, group choice ---------- */
  .kb-login__empty,
  .kb-login__intro {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }

  .kb-login__intro-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--kb-status-new-bg);
    color: var(--kb-status-new-ink);
  }

  .kb-login__intro-icon--err {
    background: var(--kb-status-err-bg);
    color: var(--kb-status-err-ink);
  }

  .kb-login__empty .kb-login__heading {
    color: var(--kb-status-err-ink);
  }

  .kb-login__groups {
    display: grid;
    gap: 18px;
  }

  .kb-login__groups > form {
    display: grid;
    gap: 18px;
  }

  .kb-login__group-list {
    display: grid;
    gap: 8px;
  }

  .kb-login__group {
    display: block;
    padding: 11px 12px 11px calc(22px + 22px);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-card);
    color: var(--kb-text);
    font-weight: 600;
  }

  .kb-login__group > input,
  .kb-login__group > .kb-check__box {
    inset-block-start: 11px;
    inset-inline-start: 12px;
  }

  .kb-login__group:hover {
    background: var(--kb-hover);
  }

  .kb-login__group:has(input:checked) {
    border-color: var(--kb-status-new);
  }

  /* ---------- signed in: name and log out ---------- */
  .kb-login__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--kb-line);
  }

  .kb-login__member {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ---------- the logo's entrance, every time the card shows (the shell plays it once per session) ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .kb-login__brand .kb-logo__company {
      opacity: 0;
      transform: translateX(-6px);
      animation: kb-logo-in .5s var(--kb-ease-out) .05s forwards;
    }

    .kb-login__brand .kb-logo__stripe i {
      transform: translateX(-105%) skewX(var(--kb-skew));
      animation: kb-logo-stripe .75s var(--kb-ease-momentum) .25s forwards;
    }

    .kb-login__brand .kb-logo__word b {
      opacity: 0;
      transform: translateX(-8px);
      animation: kb-logo-in .45s var(--kb-ease-out) forwards;
      animation-delay: calc(var(--kb-i) * 45ms + .55s);
    }

    .kb-login__card {
      animation: kb-login-in .4s var(--kb-ease-out);
    }

    .kb-login__group {
      transition: background-color .15s, border-color .15s;
    }
  }

  @keyframes kb-login-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}