/* The JOV apps' picker: a Mac-style login window over the site's wallpaper (os.css draws the
   wallpaper and holds the tokens; this adds the rest). On phones and small screens the apps are
   a plain vertical list. Logical properties throughout. */

html, body { min-height: 100%; }
body { background: #1d1b33; }
.st {
  --st-text: #ffffff; --st-text-2: rgb(255 255 255 / 82%); --st-glass: rgb(255 255 255 / 16%); --st-glass-line: rgb(255 255 255 / 34%);
  --st-shade: rgb(18 14 44 / 34%);
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  padding: max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  color: var(--st-text); overflow: hidden;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st { --st-shade: rgb(4 3 14 / 46%); } }
:root[data-theme="dark"] .st { --st-shade: rgb(4 3 14 / 46%); }
.st-wallpaper { position: fixed; inset: 0; z-index: -2; background: var(--wp-base); }
.st-wallpaper svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st::before {
  content: ""; position: fixed; inset: 0; z-index: -1; background: var(--st-shade);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.st, .st a { text-shadow: 0 1px 12px rgb(0 0 0 / 28%); }

/* Date and time */
.st-top { text-align: center; }
.st-date { font-size: 19px; font-weight: 600; color: var(--st-text-2); }
.st-time { font-size: clamp(64px, 11vw, 112px); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.st-time:empty, .st-date:empty { display: none; }

/* The users */
.st-main { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 0; }
.st-company { line-height: 1; }
.st-jov { font-size: 22px; font-weight: 750; letter-spacing: .5em; padding-inline-start: .5em; color: var(--st-text-2); }
.st-lead { font-size: 15px; color: var(--st-text-2); margin-bottom: 18px; }
.st-users { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: clamp(20px, 5vw, 64px); flex-wrap: wrap; }
.st-user {
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: 168px; padding: 14px 8px 12px;
  border-radius: 22px; color: var(--st-text); text-decoration: none; outline: none;
  transition: transform .25s ease, opacity .3s ease, background-color .2s ease;
}
.st-avatar {
  display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%;
  background: var(--st-glass); border: 1px solid var(--st-glass-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px -14px rgb(0 0 0 / 50%); transition: box-shadow .2s ease, transform .25s ease;
}
.st-avatar img, .st-avatar svg { width: 88px; height: 88px; display: block; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 30%)); }
.st-avatar img { border-radius: 22.5%; }
.st-text { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.st-name { font-size: 16px; font-weight: 650; }
.st-desc { font-size: 12.5px; color: var(--st-text-2); }
.st-user:hover .st-avatar { transform: scale(1.04); box-shadow: 0 0 0 3px rgb(255 255 255 / 55%), 0 16px 36px -14px rgb(0 0 0 / 55%); }
.st-user:focus-visible { background: rgb(255 255 255 / 12%); }
.st-user:focus-visible .st-avatar { box-shadow: 0 0 0 3px #ffffff, 0 16px 36px -14px rgb(0 0 0 / 55%); }
.st-status { min-height: 1.5em; font-size: 15px; font-weight: 600; color: var(--st-text-2); }

/* Signing in: the chosen app stays, the others fade, a ring turns under it. */
.st.is-signing-in .st-user:not(.is-chosen) { opacity: 0; transform: scale(.85); pointer-events: none; }
.st.is-signing-in .st-user.is-chosen .st-avatar { transform: scale(1.08); box-shadow: 0 0 0 3px rgb(255 255 255 / 70%), 0 18px 40px -14px rgb(0 0 0 / 60%); }
.st.is-signing-in .st-user.is-chosen .st-desc { visibility: hidden; }
.st.is-signing-in .st-status::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-inline-end: 8px; vertical-align: -2px;
  border: 2px solid rgb(255 255 255 / 35%); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite;
}
.st.is-signing-in .st-lead, .st.is-signing-in .st-foot { opacity: .35; transition: opacity .3s ease; }

/* Footer */
.st-foot { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px 22px; flex-wrap: wrap; font-size: 13px; color: var(--st-text-2); }
.st-links { display: flex; gap: 4px 16px; flex-wrap: wrap; justify-content: center; }
.st-links a { color: var(--st-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.st-links a:hover { text-decoration: underline; }
.st-controls { display: flex; gap: 8px; }
.st-ctl {
  min-width: 36px; height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--st-glass-line);
  background: var(--st-glass); color: var(--st-text); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.st-ctl[hidden] { display: none; }
.st-ctl:hover { background: rgb(255 255 255 / 24%); }
.st a:focus-visible, .st-ctl:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Phones and small or touch screens: a clean vertical list. */
@media (max-width: 819.98px), (pointer: coarse) {
  .st { padding-top: max(20px, env(safe-area-inset-top)); }
  .st-date { font-size: 15px; }
  .st-time { font-size: clamp(48px, 16vw, 72px); }
  .st-main { justify-content: flex-start; padding: 22px 0 18px; gap: 8px; }
  .st-lead { margin-bottom: 8px; }
  .st-users { flex-direction: column; flex-wrap: nowrap; width: 100%; max-width: 480px; gap: 10px; }
  .st-user {
    flex-direction: row; width: 100%; min-height: 76px; padding: 10px 14px; gap: 14px; border-radius: 18px;
    background: var(--st-glass); border: 1px solid var(--st-glass-line);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .st-avatar { flex: none; width: 56px; height: 56px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .st-avatar img, .st-avatar svg { width: 52px; height: 52px; }
  .st-text { align-items: flex-start; text-align: start; min-width: 0; flex: 1; }
  .st-name { font-size: 17px; }
  .st-desc { font-size: 14px; }
  .st-user::after { content: "›"; font-size: 26px; line-height: 1; color: var(--st-text-2); }
  [dir="rtl"] .st-user::after { content: "‹"; }
  .st-user:hover .st-avatar { transform: none; box-shadow: none; }
  .st-foot { flex-direction: column; gap: 10px; }
  .st-links a, .st-ctl { min-height: 44px; }
  .st-ctl { min-width: 44px; height: 44px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-user, .st-avatar, .st-lead, .st-foot { transition: none; }
  .st.is-signing-in .st-status::before { animation: none; }
}