/* The board in a phone's browser (src/core/pwa.ts adds this sheet to the page it serves through
   tailscale serve and through the owner's domain; the board on 127.0.0.1 never loads it). Full
   screen as an app: clear of the notch, the status bar and the home indicator. Nothing that acts
   on the computer's screen: the board would refuse it. And the screens before the board: pairing,
   signing in, no connection. */

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
.toolbar { padding-top: calc(10px + env(safe-area-inset-top)); }
.toasts { bottom: calc(28px + var(--room-bottom, 0px) + env(safe-area-inset-bottom)); }
@media (max-width: 760px) {
  .sheet {
    top: calc(12px + env(safe-area-inset-top));
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .ql-win { height: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

/* A long notice wraps on a phone's narrow screen instead of running off its edges. */
.toast { white-space: normal; text-align: center; }

/* The paste-picture button's one-time hint (sheet/Composer.tsx): a bubble pointing at it. */
.paste-picture { position: relative; display: inline-flex; flex: none; }
.paste-hint {
  position: absolute;
  bottom: calc(100% + 12px);
  left: -14px;
  z-index: 5;
  width: max-content;
  max-width: 220px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font: 500 13px/1.3 var(--font);
  text-align: left;
  box-shadow: var(--shadow-lift);
  animation: hint-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.paste-hint::after { content: ""; position: absolute; top: 100%; left: 15px; border: 7px solid transparent; border-top-color: var(--accent); }
.paste-hint:active { transform: scale(0.97); }
@keyframes hint-in { from { opacity: 0; transform: translateY(4px) scale(0.96); } }

/* Focus herdr, open on the computer, show in its folder: only at the computer. */
[data-act="focus"],
[data-launch="focus"],
[data-qa-focus],
.ql-open,
.ql-reveal,
[data-ql="open"] { display: none !important; }

/* ------------------------------------------------------------ pairing, no connection */
.phone-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
  text-align: center;
  animation: phone-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.phone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(360px, 100%);
}
.phone-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.1);
}
.phone-card h1 {
  margin: 0 0 8px;
  font: 600 24px/1.15 var(--font-display);
  letter-spacing: -0.02em;
}
.phone-card p {
  margin: 0;
  color: var(--label-2);
  font-size: 15px;
  line-height: 1.45;
}
.phone-card .phone-note {
  margin-top: 14px;
  color: var(--label);
  font-weight: 500;
}
.phone-action {
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 28px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
}
.phone-foot {
  max-width: 340px;
  margin: 0;
  color: var(--label-3);
  font-size: 13px;
  line-height: 1.4;
}
/* Waiting for the computer: a quiet ring, still under reduced motion. */
.phone-spinner {
  width: 28px;
  height: 28px;
  margin-top: 28px;
  border: 2.5px solid var(--fill);
  border-top-color: var(--label-2);
  border-radius: 50%;
  animation: phone-spin 900ms linear infinite;
}
.phone-spinner + .phone-action { margin-top: 20px; }
@keyframes phone-spin { to { transform: rotate(360deg); } }
@keyframes phone-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .phone-screen { animation: phone-fade 200ms ease both; }
  .paste-hint { animation: phone-fade 200ms ease both; }
  .phone-spinner { animation: none; border-top-color: var(--fill); background: radial-gradient(circle, var(--label-2) 3px, transparent 3.5px); }
}
@keyframes phone-fade { from { opacity: 0; } }

/* ------------------------------------------------------------ signing in through the domain */
/* The login screen (components/remote/LoginScreen.tsx): the password and code, and the offer of a
   passkey with the next code. Fields at 17px, so that iOS does not zoom into them. */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin-top: 24px;
  text-align: left;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-label {
  color: var(--label-2);
  font-size: 13px;
  font-weight: 500;
}
.login-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  outline: 0;
  background: var(--fill);
  color: var(--label);
  font: 400 17px/1.3 var(--font);
  transition: box-shadow 150ms ease;
}
.login-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
/* "Use password and code" under the passkey, Not now under Add: the lesser way, close by. */
.login-other { margin-top: 12px; }
.login-form .phone-action { margin-top: 6px; }
.login-form .login-other { margin-top: 0; }
.phone-action + .login-form { margin-top: 20px; }