/* Installed app only: safe areas on iPhone and iPad, and the unlock screen.
   The unlock screen uses the page's own tokens: paper ground, ink, hairline
   rule under the field, Inter Tight title. */
html { -webkit-text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

.unlock { position: fixed; inset: 0; z-index: 100; background: var(--page, #f6f1e8); color: var(--ink, #121110);
  display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px); }
.unlock form { width: min(360px, 100%); display: grid; gap: 22px; }
.unlock h1 { font: 600 44px/1 "Inter Tight", Inter, system-ui, sans-serif; letter-spacing: -0.03em; margin: 0 0 6px; }
.unlock label { display: grid; gap: 6px; }
.unlock label span { font: 500 11px/1 Inter, system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--muted, #85807a); }
.unlock input { font: 400 18px/1.3 Inter, system-ui, sans-serif; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--rule, #d9d3c9);
  border-radius: 0; padding: 8px 0; outline: none; }
.unlock input:focus { border-bottom-color: var(--ink, #121110); }
.unlock button { justify-self: start; height: 42px; padding: 0 22px; border-radius: 21px; border: 0; cursor: pointer;
  background: var(--ink, #121110); color: var(--page, #f6f1e8); font: 500 16px/1 Inter, system-ui, sans-serif; }
.unlock button:disabled { opacity: .5; }
.unlock .msg { margin: 0; min-height: 1.4em; font: 400 14px/1.4 Inter, system-ui, sans-serif; color: var(--muted, #85807a); }