/* White everywhere, dark mode or not: the reader's camera needs black on white. */
:root { color-scheme: only light; --link: #1d4ed8; --ink: #000; --grey: #505050; --line: #d0d0d0; --yellow: #ffd600; --soft: #fff3c4; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--ink); }
body {
  font: 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
}
main { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
p { margin: 8px 16px; }
.hidden { display: none; }

.head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 16px 0 12px; text-align: left; }
.head.end { justify-content: flex-end; }
.byte { width: 88px; height: 88px; flex: none; }
.hello { flex: 1; min-width: 0; }
.hello h1 { font-size: 22px; margin: 4px 0 2px; }
.hello p { margin: 0 0 4px; }
.flags { display: flex; flex: none; align-self: flex-start; }
.flag { font-size: 28px; line-height: 1; padding: 8px 6px; border: 0; background: none; opacity: .35; cursor: pointer; }
.flag.on { opacity: 1; }

.banners { width: 100%; }
.banner { margin: 8px 0 0; padding: 12px 16px; background: var(--yellow); text-align: left; font-size: 17px; }
.banner.soft { background: var(--soft); font-size: 15px; }

.qr { display: block; margin: 20px auto; image-rendering: pixelated; }
.hold { font-size: 24px; font-weight: bold; }
.hint { color: var(--grey); font-size: 14px; }
.steps { align-self: stretch; margin: 0 16px; padding-left: 26px; text-align: left; font-size: 16px; line-height: 1.3; }
.steps li { margin: 3px 0; }
.mono { font: 20px/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; }
/* Link screen: a blue frame round the whole screen, so staff can tell it from the daily code at a
   glance. Blue: not a colour the reader's lights use. The QR keeps its white margin. */
body.linking::after { content: ''; position: fixed; inset: 0; border: 10px solid var(--link); pointer-events: none; z-index: 10; }
.link-head { align-self: stretch; display: flex; align-items: flex-start; gap: 8px; padding: 18px 14px 4px 22px; text-align: left; }
.link-title { flex: 1; margin: 6px 0 0; font-size: 21px; line-height: 1.2; }
body.linking .qr { margin: 8px auto 4px; }
.key-id { margin: 0 16px; font-size: 17px; }
/* Short screens (older phones): a little less text above the QR, so Listo still fits. */
@media (max-height: 640px) {
  .link-head { padding-top: 14px; }
  .link-title { font-size: 18px; }
  .steps { font-size: 15px; line-height: 1.25; }
  .steps li { margin: 2px 0; }
}
body.linking .button { margin: 8px 16px 16px; }

button { font: inherit; color: inherit; }
.link { margin-top: 32px; min-height: 48px; padding: 8px 16px; border: 0; background: none; color: var(--grey); font-size: 15px; text-decoration: underline; cursor: pointer; }
.button { margin: 12px 16px 0; min-height: 48px; min-width: 160px; padding: 10px 20px; border: 1px solid var(--line); border-radius: 8px; background: #f2f2f2; font-size: 17px; cursor: pointer; }
.button.primary { background: #111; color: #fff; border-color: #111; }
.button:disabled { opacity: .5; }

.logo { width: 96px; height: 96px; border-radius: 22px; margin-top: 8px; }
.title { font-size: 26px; margin: 16px 16px 4px; }

/* Install screen: written for people new to phones. Big text, one action per line, two steps. */
.install-head { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 12px 8px 0 16px; }
.install-head .logo { width: 56px; height: 56px; border-radius: 13px; margin: 0; flex: none; }
.install-title { flex: 1; min-width: 0; margin: 0; font-size: clamp(19px, 6.4vw, 25px); text-align: left; white-space: nowrap; }
.lead { align-self: stretch; margin: 12px 16px 0; font-size: 18px; text-align: left; }
.foot-flags { margin: 8px 0 20px; }
@media (max-width: 330px) {
  .install-head .logo { width: 44px; height: 44px; border-radius: 10px; }
  .flag { font-size: 24px; padding: 6px 4px; }
}
.card { align-self: stretch; margin: 14px 12px 0; padding: 16px; border: 2px solid var(--line); border-radius: 14px; text-align: left; font-size: 19px; }
.card.next { border-color: #111; }
.card.done { opacity: .75; }
.card h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 21px; line-height: 1.2; }
.card p { margin: 8px 0; }
.num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #111; color: #fff; font-size: 22px; }
.num.ok { background: #1a7f37; }
.saved { color: #1a7f37; font-weight: bold; }
.option-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 18px; }
.brand { width: 32px; height: 32px; flex: none; }
.howto { margin: 0; padding-left: 28px; line-height: 1.5; }
.howto li { margin: 10px 0; padding-left: 4px; }
.aside { color: var(--grey); font-size: 16px; }
/* The buttons members have to find, drawn as they look: ⋮, ⋯ and Safari's Share. */
.key { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; margin: 0 2px; padding: 0 6px; border: 2px solid #111; border-radius: 9px; font-weight: bold; font-size: 22px; line-height: 1; vertical-align: middle; }
.key img { width: 24px; height: 24px; }
.button.big { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin: 12px 0 4px; font-size: 20px; text-decoration: none; }
.address { font: 16px/1.3 ui-monospace, Menlo, monospace; word-break: break-all; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 4px; }
.tile img { width: 72px; height: 72px; border-radius: 16px; }
.tile span { font-size: 15px; }
details { align-self: stretch; text-align: left; }
summary { min-height: 48px; padding: 12px 0; font-size: 18px; text-decoration: underline; cursor: pointer; }
.other { margin: 18px 12px 0; padding: 0 4px; }
.other .option { margin: 8px 0 20px; font-size: 18px; }
.byhand { margin-top: 8px; }
.allow { font-size: 17px; }
.nudge { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff3e6; }
.nudge .option-head { margin: 0; }
.button.firefox { margin: 10px 0 0; background: #fff; border: 2px solid #ff7139; color: #111; font-weight: bold; }
.or-stay { margin: 4px 0 6px; color: var(--grey); }
/* The animated phone: one picture per step, the matching step highlighted. */
.demo { display: flex; justify-content: center; margin: 4px 0 14px; }
.demo-phone { height: min(313px, 42vh); width: auto; cursor: pointer; } /* smaller on short screens, so the steps show sooner */
.demo-phone text { font-family: system-ui, -apple-system, Roboto, sans-serif; }
.demo-frame { opacity: 0; transition: opacity .4s; }
.demo-frame.on { opacity: 1; }
.tap, .tap-box { transform-box: fill-box; transform-origin: center; animation: tap 1.5s ease-out infinite; }
.tap-box { animation-name: tap-box; }
@keyframes tap { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes tap-box { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.15, 1.45); opacity: 0; } }
.howto li { cursor: pointer; border-radius: 8px; transition: background .3s; }
.howto li.now { background: #fde3d3; font-weight: bold; }
.center { text-align: center; }
.tile { position: relative; }
.tile .ring { position: absolute; top: 0; width: 72px; height: 72px; border: 3px solid #e8590c; border-radius: 18px; animation: ring 1.8s ease-out infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tap, .tap-box, .tile .ring { animation: none; opacity: 0; }
  .demo-frame, .howto li { transition: none; }
}
.small { color: var(--grey); font-size: 14px; margin-top: 16px; }
.warn { background: var(--yellow); padding: 12px 16px; }