/* The "update the app" announcement (crew only; app-update-announcement.js).
   Restyled to the Apple-style contract (2026-09-05): a scrim over the page, a
   white sheet with the sheet shadow, the accent for the kicker, the step numbers
   and the primary button. Every colour, weight, radius and shadow is a system.css
   token — nothing is typed here. Weights are on the 400/500/600/700 scale (the
   950/900/800 this file used to ask for are not in the design). */
.app-update-lock {
  overflow: hidden;
}

.app-update-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  /* THE CARD RUNS UNDER THE CLOCK AND THE HOME INDICATOR OTHERWISE (2026-09-19).
     This is position:fixed; inset:0 on a page the shell draws edge to edge, and the
     card below is capped at max-height:100% of this box — so on a tall card the
     overlay's own 18px was all that stood between the heading and the Dynamic
     Island, and between the last line and the home indicator. The inset belongs on
     the overlay rather than the card because the cap is measured against this box.
     Companions below, as everywhere else in the app. */
  padding: calc(18px + var(--sys-safe-t)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--sys-scrim, rgba(0, 0, 0, .34));
  color: var(--sys-ink, #1D1D1F);
  font-family: var(--sys-font, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif);
}
/* The other halves of the pair, keyed on html.ni-top / html.ni-bottom
   (public/native-inset.js): on the builds where the shell has already put the page
   below the status bar or above the home indicator, the overlay must not pay it a
   second time. Never html.native-app — that class is on in every state inside the
   app, including the ones where the shell has paid nothing. */
html.ni-top .app-update-overlay { padding-top: 18px; }
html.ni-bottom .app-update-overlay { padding-bottom: 18px; }

.app-update-overlay.show {
  display: flex;
}

/* THE CARD SCROLLS INSIDE THE SCREEN. Centred in a flex overlay with no height
   cap, a card taller than the screen overflowed both ways: in landscape (375 tall)
   it ran from -250 to 625 and its Done sat below the bottom edge, where no scroll
   could reach — the overlay does not scroll and the page behind it is locked. So
   the card is capped to the space the overlay leaves and scrolls on its own. */
.app-update-card {
  width: min(100%, 460px);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--sys-r-sheet, 20px);
  background: var(--sys-panel, #FFFFFF);
  box-shadow: var(--sys-shadow-sheet, 0 18px 44px rgba(0, 0, 0, .18));
  padding: 24px;
}

.app-update-icon {
  width: 76px;
  height: 76px;
  border-radius: var(--sys-r-card, 18px);
  background: var(--sys-fill, #F5F5F7);
  box-shadow: var(--sys-shadow-card, 0 1px 2px rgba(0, 0, 0, .04));
  object-fit: cover;
}

.app-update-kicker {
  margin: 18px 0 8px;
  color: var(--sys-accent, #0071E3);
  font-size: var(--sys-t-body, 13px);
  font-weight: var(--sys-w-semibold, 600);
  letter-spacing: 0;
  text-transform: none;
}

.app-update-card h1 {
  margin: 0;
  color: var(--sys-ink, #1D1D1F);
  font-size: var(--sys-t-large-title, 32px);
  font-weight: var(--sys-w-bold, 700);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.app-update-card p {
  margin: 14px 0 0;
  color: var(--sys-muted, #6E6E73);
  font-size: var(--sys-t-lead, 15px);
  font-weight: var(--sys-w-regular, 400);
  line-height: 1.45;
}

.app-update-steps {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.app-update-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: var(--sys-r-control, 12px);
  background: var(--sys-fill, #F5F5F7);
  padding: 11px;
  color: var(--sys-ink, #1D1D1F);
  font-size: var(--sys-t-lead, 15px);
  font-weight: var(--sys-w-regular, 400);
}

.app-update-step span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--sys-r-pill, 100px);
  background: var(--sys-accent, #0071E3);
  color: #fff;
  font-weight: var(--sys-w-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.app-update-actions {
  display: grid;
  gap: 10px;
}

.app-update-actions button,
.app-update-actions a {
  min-height: 48px;
  border: 0;
  border-radius: var(--sys-r-pill, 100px);
  padding: 0 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: var(--sys-t-lead, 15px);
  font-weight: var(--sys-w-semibold, 600);
}

.app-update-primary {
  background: var(--sys-accent, #0071E3);
  color: #fff;
}

.app-update-secondary {
  background: var(--sys-panel, #FFFFFF);
  color: var(--sys-accent, #0071E3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

.app-update-note {
  margin-top: 12px;
  color: var(--sys-muted, #6E6E73);
  font-size: var(--sys-t-body, 13px);
  font-weight: var(--sys-w-regular, 400);
  line-height: 1.35;
}