/* ==========================================================================
   MGT2E DATAPAD — Sign-in, operator button and menu, change-password dialog
   The sign-in screen is a terminal prompt centred over the blurred page: boot lines typing in, operator ID
   and passcode, ACCESS DENIED / ACCESS GRANTED. The change-password dialog reuses its look.
   Uses the shared .input / .btn (components layer) and .nav-btn (base layer).
   ========================================================================== */

@layer components {

  /* ---------- Operator button ---------- */
  /* The last tab in the nav, in the top-right corner, showing who is signed in; opens the user menu.
     The server link light is its first part. Full bar height, like the module tabs. A full-strength
     divider sets it apart from the module tabs (in place of the last tab's soft one). */
  .operator-btn {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 16px;
    gap: 10px;
    border-left: 1px solid var(--glass-border);
  }

  .nav-btn:has(+ .operator-btn) {
    border-right: none;
  }

  /* Two lines like the Module readout: "Operator" over the name. The link light and arrow are centred beside it. */
  .operator-btn {
    align-items: center;
    text-align: left;
  }

  .operator-btn__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .operator-btn__name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .operator-btn__caret {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur) var(--ease);
  }

  .operator-btn[aria-expanded="true"] .operator-btn__caret {
    transform: rotate(180deg);
  }

  .operator-btn.is-active {
    color: var(--c-ice-bright);
    background: linear-gradient(to bottom, var(--wash-active), rgba(127, 216, 255, 0.03));
  }

  .operator-btn.is-active::before {
    transform: scaleX(1);
  }

  .operator-btn:disabled .operator-btn__caret {
    display: none;
  }

  /* ---------- User menu ---------- */
  .user-menu {
    position: absolute;
    top: calc(100% + 1px);
    z-index: 30;
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--surface-raised);
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop), inset 2px 0 0 var(--c-orange);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }

  .user-menu__item {
    flex: 0 0 auto;
    height: var(--control-h);
    text-align: left;
  }

  .user-menu__item:focus-visible {
    outline: 1px solid var(--c-ice);
    outline-offset: 2px;
  }

  /* ---------- Overlay ---------- */
  .login {
    position: fixed;
    inset: 0;
    z-index: 900;                /* over card panels (21); under the portrait lock (1000) */
    display: grid;
    place-items: center;
    padding: 16px;
    background: var(--scrim);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    overflow-y: auto;
  }

  .login[hidden] {
    display: none;
  }

  .login.is-granted {
    animation: login-out 0.45s var(--ease) 0.32s forwards;  /* after the card's wiggle */
  }

  /* Touch screens: the sign-in sits about 10% of the screen height higher (the card stays centred in what's left,
     so it moves by half of this), leaving more room for the on-screen keyboard. */
  @media (pointer: coarse) {
    .login--raised {
      padding-bottom: calc(16px + 20vh);
    }
  }

  /* ---------- Card ---------- */
  .login__card {
    position: relative;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 24px 20px;
    background: var(--surface-raised);
    border-color: var(--glass-border-hi);
    box-shadow: var(--shadow-drop), inset 2px 0 0 var(--c-orange);
  }

  /* Corner ticks, like the frame of a targeting display */
  .login__card::before,
  .login__card::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 0 solid var(--c-ice);
  }

  .login__card::before { top: -1px;    right: -1px; border-width: 2px 2px 0 0; }
  .login__card::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

  .login__card.is-shake {
    animation: login-shake 0.32s steps(6) 1;
  }

  .login__card.is-wiggle {
    animation: login-wiggle 0.32s ease-in-out 1;
  }

  .login__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--glass-border);
  }

  .login__brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .login__title {
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-ice-bright);
  }

  /* ---------- Boot lines: typed in one after another ---------- */
  .login__boot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 3.6em;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--c-ice-dim);
  }

  .login__line {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: login-type 0.5s steps(28, end) forwards;
  }

  .login__line:nth-child(2) { animation-delay: 0.45s; }
  .login__line:nth-child(3) { animation-delay: 0.9s; color: var(--c-ice-bright); }

  .login__line .is-warn {
    color: var(--c-orange);
  }

  /* ---------- Fields ---------- */
  .login__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .login__field .input {
    height: 40px;
    padding: 0 12px;
    font-size: var(--fs-md);
    letter-spacing: 0.08em;
  }

  .login__field .input:focus {
    box-shadow: var(--glow-ice);
  }

  /* Sign-in fields carry their name as a placeholder, in the same style as the .caps labels elsewhere */
  .login__field .input::placeholder {
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
  }

  /* ---------- Status and button ---------- */
  .login__status {
    min-height: 1.2em;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  /* Blinking block cursor after the waiting status */
  .login__status::after {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 1em;
    margin-left: 6px;
    vertical-align: -2px;
    background: currentColor;
    animation: pulse 1s steps(2) infinite;
  }

  .login__status.is-denied {
    color: var(--c-red);
    text-shadow: 0 0 8px rgba(255, 69, 69, 0.5);
  }

  .login__status.is-granted {
    color: var(--c-green);
  }

  .login__status.is-denied::after,
  .login__status.is-granted::after,
  .login__status.is-ready::after {
    display: none;
  }

  /* Both sign-in fields filled in: the button's own orange */
  .login__status.is-ready {
    color: inherit;
  }

  .login__submit {
    flex: 0 0 auto;
    height: 42px;
    border-color: var(--c-orange);
    color: var(--c-orange);
    background: var(--wash-orange);
  }

  .login__submit:hover:not(:disabled) {
    border-color: var(--c-orange);
    background: rgba(255, 138, 31, 0.2);
    box-shadow: var(--glow-orange);
  }

  /* The sign-in button carries the status. It's only orange when it's ready to press, and stays readable while
     disabled (verifying, locked out). */
  .login__submit.login__submit--status:disabled {
    opacity: 1;
  }

  .login__submit--status:not(:has(.is-ready)),
  .login__submit--status:not(:has(.is-ready)):hover:not(:disabled) {
    border-color: var(--glass-border);
    background: none;
    box-shadow: none;
    cursor: default;
    pointer-events: none;       /* can't be pressed until both fields have something in them */
  }

  .login__submit--status:has(.is-denied),
  .login__submit--status:has(.is-denied):hover:not(:disabled) {
    border-color: var(--c-red);
    background: var(--wash-danger);
  }

  .login__submit--status:has(.is-granted),
  .login__submit--status:has(.is-granted):hover:not(:disabled) {
    border-color: var(--c-green);
    background: rgba(94, 230, 154, 0.1);
  }

  /* Two buttons side by side (change-password dialog) */
  .login__actions {
    display: flex;
    gap: 8px;
  }

  .login__actions .btn {
    flex: 1;
    height: 42px;
  }

  /* ---------- Password rules (change-password dialog) ---------- */
  /* Each rule is ticked off live as the new password meets it */
  .pw-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-top: -6px;
    list-style: none;
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .pw-rules li::before {
    content: "□ ";
  }

  .pw-rules li.is-met {
    color: var(--c-green);
  }

  .pw-rules li.is-met::before {
    content: "■ ";
  }

  /* ---------- Motion ---------- */
  @keyframes login-type {
    to { width: 100%; }
  }

  @keyframes login-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-8px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-5px); }
    80%      { transform: translateX(5px); }
  }

  /* Access granted, a happy little waggle: the shake's timing and size, but smooth, tipping side to side and hopping.
     On the 420px card, 2.2° moves the sides about 8px and 1.4° about 5px, as the shake does; so do the hops. */
  @keyframes login-wiggle {
    0%, 100% { transform: none; }
    20%      { transform: rotate(-2.2deg) translateY(-2.5%); }
    40%      { transform: rotate(2.2deg); }
    60%      { transform: rotate(-1.4deg) translateY(-1.5%); }
    80%      { transform: rotate(1.4deg); }
  }

  @keyframes login-out {
    to { opacity: 0; }
  }

  /* Reduced motion: lines show at once (base.css turns animations off, so set the end state) */
  @media (prefers-reduced-motion: reduce) {
    .login__line { width: auto; }
  }
}