/* ── Login ─────────────────────────────────────────────────────────────────────
   What a refused token lands on (public/js/login.js). The whole screen, in the
   page's own colours: it is still agency, just before it knows who you are.
   The field and the button are the ones the app already draws — Settings'
   handle field and the New Session dialog's filled button — so nothing here is
   a style of its own. */
#login-view {
  position: fixed;
  inset: 0;
  /* Above the app and the lightbox (1000). Open dialogs are closed on the way
     in, since the top layer would sit above any z-index. */
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}
#login-form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* The app icon's mark, filled rather than stroked: it is not one of the sprite's
   line icons but the icon itself, so it wears the icon's green and sits on the
   theme's surface the way the icon's mark sits on its plate. The svg is written
   by scripts/gen-icons.py; its viewBox is square, so this is its width. */
.login-mark {
  align-self: center;
  width: 40px;
  height: 40px;
  fill: currentColor;
  color: var(--green);
}
#login-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
#login-reason {
  font-size: 13px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
#login-token {
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  /* 16, not 13: iOS zooms the page into any field set smaller. */
  font-size: 16px;
  outline: none;
}
#login-token:focus { border-color: var(--accent); }
#login-submit {
  padding: 8px 20px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
  cursor: pointer;
}
#login-submit:hover:not(:disabled) { background: var(--accent-hover); }
#login-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.login-hint {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
/* Empty until a try is refused; kept in the flow at a line's height so the
   form does not jump when it fills. */
#login-error {
  min-height: 1.4em;
  font-size: 13px;
  color: var(--red);
  text-align: center;
}

/* Settings → Access. */
.access-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.access-row button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
@media (hover: hover) {
  .access-row button:hover:not(:disabled) { background: var(--bg-hover); }
}
.access-row button:disabled { opacity: 0.4; cursor: not-allowed; }