/* The device around the app: frame, screen, safe areas, status bar, home
   indicator, and the controls the platform draws itself (the iOS switch). These
   colours are the phone's, not the app's, so the colour check skips this file.

   Default: 390 x 844 dp with iOS safe areas (47 top, 34 bottom), the size and
   platform of the reference captures. .k-compact is 360 x 780, a Galaxy S, which
   is below the app's 390 dp compact breakpoint (Home's hero shrinks there). */
.k-phone {
  --k-w: 390px;
  --k-h: 844px;
  --k-safe-top: 47px;
  --k-safe-bottom: 34px;
  --k-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  flex: none;
  width: calc(var(--k-w) + 18px);
  height: calc(var(--k-h) + 18px);
  padding: 9px;
  border-radius: 56px;
  background: #0E1014;
  box-shadow: 0 28px 56px -22px rgba(40, 20, 40, .38), 0 8px 18px rgba(40, 20, 40, .10);
}
.k-phone.k-compact { --k-w: 360px; --k-h: 780px; --k-safe-top: 32px; --k-safe-bottom: 16px; }
.k-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--k-w);
  height: var(--k-h);
  overflow: hidden;
  border-radius: 47px;
  isolation: isolate;
}
/* the home indicator the system draws over every app */
.k-screen::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 50;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  border-radius: 3px;
  background: #111111;
  pointer-events: none;
}
.k-screen.k-dark-bottom::after { background: #FFFFFF; }
.k-compact .k-screen::after { width: 108px; height: 4px; margin-left: -54px; bottom: 6px; }

/* the system draws it above the app, so overlays never dim it; give it `dark`
   (light glyphs) over a scrim or a dark screen */
k-status-bar {
  position: relative;
  z-index: 40;
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--k-safe-top);
  padding: 4px 32px 0 40px;
  font: 600 16px/1 var(--k-font);
  letter-spacing: 0;
  color: #111111;
}
.k-compact k-status-bar { padding: 2px 24px 0 28px; font-size: 13px; }
k-status-bar[dark] { color: #FFFFFF; }
.k-status-glyphs { width: 62px; height: 14px; fill: currentColor; }

/* SwitchListTile.adaptive on iOS ignores the app's switch theme: the stock
   Cupertino switch, 51 x 31, green track, 27 dp thumb. */
.k-ios-switch { flex: none; position: relative; width: 51px; height: 31px; border-radius: 16px; background: #E9E9EA; }
.k-ios-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); }
.k-ios-switch.on { background: #34C759; }
.k-ios-switch.on::after { left: 22px; }