/* The installed app (PWA): safe areas, standalone behaviour, and the pieces pwa.js and the sign-in screens add
   (the offline banner, the update bar, the install card, the iPhone steps, the code field, passkeys).
   Loaded after mce.css, so equal selectors here win. */

/* Safe areas. index.html sets viewport-fit=cover and, on iOS, a translucent status bar, so the page draws under
   the notch and the home indicator; env() is 0 wherever there is nothing to avoid. */
.fnav{bottom:calc(20px + env(safe-area-inset-bottom))}
.sheet{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.toast{top:calc(16px + env(safe-area-inset-top))}
html{-webkit-tap-highlight-color:transparent}

/* Running from the home screen: no browser bar above, so the screen starts below the status bar, and the page
   does not rubber-band or pull-to-refresh like a web page. */
@media (display-mode:standalone){
  #app{padding-top:env(safe-area-inset-top)}
  .pwa-offline:not([hidden])~#app{padding-top:0}
  html,body{overscroll-behavior-y:none}
  /* iOS draws the status bar's text white over the page (black-translucent): in Paper, a dark band keeps it
     readable. Android keeps its status bar outside the page, where the inset is 0. */
  .light body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:#100E0D;z-index:60}
}

/* Offline: a dashed thread, the same as a story's unwritten future */
.pwa-offline{position:sticky;top:0;z-index:45;max-width:440px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 24px 10px;background:var(--ink-2);color:var(--paper);font:500 13px/1.35 var(--f-ui);box-shadow:0 1px 0 var(--line)}
.pwa-thread{width:40px;flex:none}
.pwa-thread .kn.now{width:10px;height:10px;outline-width:3px}

/* "A new version is ready", when the toast has no button of its own */
.pwa-x{width:36px;height:36px;border-radius:10px;background:transparent;color:var(--paper-3)}
.pwa-x:hover{background:var(--ink-3);color:var(--paper)}

/* Install card (home) and row (Me) */
.pwa-card{display:flex;flex-direction:column;gap:14px;box-shadow:inset 0 0 0 1px var(--line-2)}
.pwa-card .btn{align-self:flex-start}
.pwa-icon{flex:none;border-radius:11px}
.pwa-icon-s{border-radius:7px}
.pwa-row{width:100%;padding:14px 0;text-align:left}

/* iPhone: the Add to Home Screen steps, as knots on a thread */
.pwa-steps{list-style:none;margin:0;padding:0}
.pwa-steps li{position:relative;display:flex;gap:14px;align-items:flex-start;padding-bottom:18px;font:400 15px/1.45 var(--f-ui);color:var(--paper-2)}
.pwa-steps li:last-child{padding-bottom:0}
.pwa-steps li:not(:last-child)::before{content:"";position:absolute;left:11px;top:26px;bottom:2px;border-left:2px solid var(--line-2)}
.pwa-steps b{color:var(--paper);font-weight:600}
.pwa-k{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ember);color:var(--ember);font:700 12px/1 var(--f-ui)}
.pwa-k.now{background:var(--ember);color:var(--ember-ink);box-shadow:none}
.pwa-share{display:inline-flex;vertical-align:-3px;color:var(--ember)}

/* Sign-in: the 6-digit code, and passkeys */
.input.otp{font:600 26px/1 var(--f-ui);letter-spacing:.42em;text-align:center;padding-left:calc(14px + .42em);font-variant-numeric:tabular-nums}
.input.otp::placeholder{color:var(--line-2)}
.pk-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--ember-soft);color:var(--ember)}
.pk-del{height:36px;color:var(--paper-3)}
.pk-del[data-armed="1"]{color:var(--danger)}