/* The iPhone Lock Screen and the notification card, drawn the way iOS draws them. This is an ILLUSTRATION OF ANOTHER
   SYSTEM'S SCREEN: its colours, blur and proportions are Apple's, not the site's, so they are fixed on purpose and do
   not follow the theme (a theme-fixed exception; tests/test_the_nowlark_sheet_uses_only_tokens.py names this file and
   checks it only for tokens that do not exist). Ported from the home page's earlier stylesheet, unchanged in what it draws. */
/* The phone. Its colours are the Lock Screen's, not the page's, so it looks the
   same in both themes. */
.phone-wrap { display: flex; justify-content: center; margin: 0; }
.phone {
  --w: clamp(270px, 25vw, 330px);
  --nt-gap: calc(var(--w) * .024);
  width: var(--w); aspect-ratio: 9 / 19.3; border-radius: calc(var(--w) * .17);
  padding: calc(var(--w) * .035); background: #1a1a1c; position: relative;
  box-shadow: 0 0 0 1.5px #3a3a3e inset, 0 0 0 1px #0000001a, 0 40px 80px -30px #0000006e, 0 18px 36px -18px #00000059;
}
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2a2e; }
.phone::before { left: -3px; top: 22%; height: 9%; }
.phone::after { right: -3px; top: 27%; height: 14%; }
.screen {
  position: relative; height: 100%; border-radius: calc(var(--w) * .135); overflow: hidden;
  color: #fff; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  background: #0b0f1c;
}
.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; }
.island { position: absolute; top: 3%; left: 50%; width: 32%; height: 4.4%; transform: translateX(-50%); background: #000; border-radius: 999px; z-index: 2; }
.status { position: absolute; top: 3.6%; left: 9%; right: 8%; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; z-index: 1; }
.status svg { height: 11px; width: auto; }
.status .sb { display: flex; gap: 5px; align-items: center; }
.lock { position: relative; text-align: center; padding-top: 17%; }
.lock .date { font-size: calc(var(--w) * .052); font-weight: 600; opacity: .9; }
.lock .clock { font-size: calc(var(--w) * .27); font-weight: 700; line-height: 1; letter-spacing: -.02em; margin-top: 2px; font-stretch: 90%; }
/* The stack. Anchored at the top and growing downwards, so a notification
   arriving pushes the older ones down and the one that leaves does it from the
   bottom, where nothing sits below it to jump. The version before this laid
   the three out from the bottom and slid each one over the card above, which
   covered that card's title for as long as the animation ran. */
.notes { position: absolute; left: 3.6%; right: 3.6%; top: 30%; }
.nt {
  display: grid; grid-template-columns: calc(var(--w) * .097) minmax(0, 1fr);
  gap: calc(var(--w) * .026); align-items: center;
  padding: calc(var(--w) * .0324);
  border-radius: calc(var(--w) * .0524); font-size: calc(var(--w) * .0324);
  line-height: 1.29; letter-spacing: -.01em;
  margin-bottom: var(--nt-gap); overflow: hidden;
  /* The card carries its own colour and font. Inside the phone it inherited
     both from `.screen`; the one in the request section is not inside a phone,
     and inherited the page's dark ink for its title, which measured 1.8:1 on
     the material. A card is self-contained now, wherever it is put. */
  color: #fff; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* A Lock Screen card reads lighter than the wallpaper behind it, not
     darker: it is a light material over a blur, with the half point border
     every iOS material has. A flat near black panel was the main reason
     these did not look like notifications. */
  background: rgba(124, 124, 134, .3);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .11);
  --nt-pile: 0;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
}
.nt .nt-icon { width: calc(var(--w) * .097); height: calc(var(--w) * .097);
  border-radius: calc(var(--w) * .022); display: block; }
.nt-head {
  display: flex; align-items: baseline; gap: calc(var(--w) * .018);
  text-transform: uppercase; letter-spacing: .02em; font-weight: 600;
  font-size: calc(var(--w) * .0244);
  /* iOS puts its secondary label at 60% white, which measures 3.5:1 on this
     material and fails WCAG AA for text this size. Raised until it passes,
     measured on the rendered pixels rather than guessed at. */
  color: rgba(235, 235, 245, .88);
}
/* A long sender is cut rather than allowed to take a second line. */
.nt-src { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* iOS colours the second word of the label, not the whole of it. */
.nt-head em { font-style: normal; color: #ff453a; white-space: nowrap; }
.nt-head time { margin-left: auto; padding-left: calc(var(--w) * .012);
  font-size: calc(var(--w) * .0282); letter-spacing: 0; text-transform: none;
  font-weight: 400; white-space: nowrap; }
.nt-title { display: block; font-weight: 590; margin-top: 1px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* One line of body, so the stack's height does not depend on what arrives. */
.nt p { margin: 0; font-weight: 400; color: rgba(255, 255, 255, .92);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-btns { display: flex; gap: calc(var(--w) * .016); margin-top: calc(var(--w) * .014); }
.nt-btns span { flex: 1; text-align: center; padding: calc(var(--w) * .011) 0; border-radius: calc(var(--w) * .02);
  background: rgba(255, 255, 255, .16); font-weight: 590; font-size: calc(var(--w) * .0295); }
.nt-btns span:first-child { background: rgba(255, 255, 255, .92); color: #111; }
.dock { position: absolute; bottom: 5.2%; left: 10%; right: 10%; display: flex; justify-content: space-between; }
.dock span { width: calc(var(--w) * .145); aspect-ratio: 1; border-radius: 50%; background: rgba(38, 38, 44, .55); display: grid; place-items: center;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.dock svg { width: 44%; height: 44%; }
.home { position: absolute; bottom: 1.6%; left: 50%; width: 36%; height: 4px; border-radius: 4px; background: #fff; transform: translateX(-50%); opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  /* The reel moves by transform and opacity only. The script starts each card
     back where it was before the stack dropped and releases it, so the
     distances are measured from the cards and no size is written here. */
  .js .phone .nt { transition: transform .62s var(--ease-out), opacity .3s linear; }
  /* `backwards`, never `both`: a filling animation wins over inline style for
     the properties it touches, so `both` would leave the three cards served
     with the page unable to fade out when their turn came. It held them at
     opacity 1 while the rest of the reel faded correctly. */
  .js .phone .nt[data-seed] { animation: nt-in .6s var(--ease-out) backwards; animation-delay: calc(.5s + var(--i, 0) * .14s); }
}
@keyframes nt-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }