/* Full screens over the desktop (boot, lock, shut down): their frame, hazard band and status lines. */
@layer shell {
  .kos-screen {
    position: fixed;
    inset: 0;
    z-index: var(--k-z-screen);
    background: var(--k-bg);
    display: flex;
    flex-direction: column;
    transition: opacity var(--k-dur-7) ease;
  }
  .kos-screen.out {
    opacity: 0;
    pointer-events: none;
  }
  .kos-scr-top,
  .kos-scr-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--k-space-8) var(--k-space-12);
    font-family: var(--k-mono);
    font-size: var(--k-text-3);
    letter-spacing: var(--k-track-11);
    text-transform: uppercase;
    color: var(--k-dim);
    gap: var(--k-space-8);
  }
  .kos-scr-top b {
    color: var(--k-intel);
    font-weight: var(--k-weight-medium);
  }
  .kos-scr-bot {
    border-top: 1px solid var(--k-line);
  }
  .kos-scr-hz {
    height: 6px;
  }
  .kos-hint {
    font-family: var(--k-mono);
    font-size: var(--k-text-3);
    letter-spacing: var(--k-track-9);
    color: var(--k-dim);
    text-align: center;
    text-transform: uppercase;
  }
  .kos-off {
    flex: 1;
    display: grid;
    place-items: center;
    text-align: center;
  }
  .kos-off b {
    display: block;
    font-family: var(--k-display);
    font-size: var(--k-display-8);
    letter-spacing: var(--k-track-13);
    color: var(--k-muted);
    margin-bottom: var(--k-space-11);
  }
  .kos-off .kos-primary {
    padding: 0 var(--k-space-14);
  }
}