/* Lock screen: the clock, the big eye, the session card. */
@layer shell {
  .kos-lock-eye {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(56vw, 760px);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .kos-lock-eye .kos-eye {
    width: 100%;
    height: auto;
    color: var(--k-intel);
    opacity: 0.07;
    stroke-width: 0.8;
  }
  .kos-lock-time,
  .kos-card {
    position: relative;
  }
  .kos-lock {
    flex: 1;
    min-height: 0;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    padding: 0 7vw;
    gap: var(--k-space-20);
  }
  .kos-lock-time b {
    display: block;
    font-family: var(--k-display);
    font-weight: var(--k-weight-semibold);
    font-size: clamp(90px, 13vw, 180px);
    line-height: var(--k-leading-display);
    letter-spacing: var(--k-track-1);
  }
  .kos-lock-time small {
    display: block;
    margin-top: var(--k-space-7);
    font-family: var(--k-display);
    font-size: var(--k-display-6);
    letter-spacing: var(--k-track-9);
    text-transform: uppercase;
    color: var(--k-muted);
  }
  .kos-lock-time .k-code {
    display: block;
    margin-top: var(--k-space-13);
    color: var(--k-intel);
  }
  .kos-card {
    background: var(--k-chrome);
    border: 1px solid var(--k-line-2);
    padding: var(--k-space-13);
    display: flex;
    flex-direction: column;
    gap: var(--k-space-9);
    max-width: 420px;
    width: 100%;
    justify-self: end;
    position: relative;
  }
  .kos-card-user {
    display: flex;
    align-items: center;
    gap: var(--k-space-7);
  }
  .kos-card-user .kos-avatar {
    width: 54px;
    height: 54px;
    font-size: var(--k-text-11);
  }
  .kos-card-user b {
    display: block;
    font-family: var(--k-display);
    font-size: var(--k-display-6);
    font-weight: var(--k-weight-semibold);
    letter-spacing: var(--k-track-5);
    text-transform: uppercase;
  }
  .kos-card-user small {
    color: var(--k-muted);
  }
  .kos-card dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--k-space-3) var(--k-space-8);
    font-size: var(--k-text-7);
  }
  .kos-card dt {
    color: var(--k-muted);
  }
  .kos-card dd {
    margin: 0;
    font-family: var(--k-mono);
    font-size: var(--k-text-5);
    text-align: right;
  }
  .kos-card-hz {
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 4px;
  }
}