/* The Phone showcase (docs/js/phone.js). Every phone view is a size container and sizes what is
   in it in its own units. The phone's font is the system's, never a webfont: SnapDOM captures
   these screens, and a webfont costs ~100 ms per capture. */

.ph { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.35; letter-spacing: normal; text-align: left; }
.ph h1, .ph h2, .ph h3, .ph p { color: inherit; letter-spacing: normal; }
.ph-view { width: var(--ph-w, 100cqw); height: var(--ph-h, 100cqh); container-type: size; overflow: hidden; }
/* A view's own box (its padding, its background) is measured in the container around it, not
   in itself: those take --ph-w and --ph-h, the screen it is on (.ph-screen sets them; on the
   page, the screen is the container around the canvas). What is inside a view is measured in
   the view, in cqw. */

/* ── The whole phone, the demo's first view (and its card) ─────────── */
.ph-stage { display: grid; place-items: center; padding: 0; background: radial-gradient(circle at 30% 20%, #232a52, #0b0d16 70%); }
.ph-device { height: 92cqh; aspect-ratio: 418 / 872; padding: 1.4cqh; border-radius: 6.4cqh; background: linear-gradient(145deg, #3b3e48, #111217); box-shadow: 0 0 0 .25cqh #5a5d6855, 0 4cqh 12cqh #000b; }
.ph-screen { position: relative; width: 100%; height: 100%; border-radius: 5.3cqh; overflow: hidden; container-type: size; --ph-w: 100cqw; --ph-h: 100cqh; }
.ph-fill { position: absolute; inset: 0; }
.ph-status { position: absolute; z-index: 5; inset: 0 0 auto; height: 14cqw; padding: 1cqw 9cqw 0 10cqw; display: flex; align-items: center; color: #fff; font-weight: 600; font-size: 4.2cqw; pointer-events: none; transition: color .3s; }
.ph-island { position: absolute; z-index: 6; top: 2.8cqw; left: 50%; width: 31cqw; height: 9cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
/* The demo's phone runs a Zumly of its own on its screen: the canvas fills it, under the bars. */
.ph-screen > .ph-canvas { position: absolute; inset: 0; }
.ph-home-bar { position: absolute; z-index: 6; bottom: 1.6cqw; left: 50%; width: 36cqw; height: 5cqw; transform: translateX(-50%); border: 0; padding: 0; background: none; cursor: pointer; }
.ph-home-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1cqw; height: 1.4cqw; border-radius: 99px; background: #fff; opacity: .85; transition: background .3s; }
.ph-screen.light .ph-status { color: #000; }
.ph-screen.light .ph-home-bar::after { background: #000; opacity: .7; }

/* ── Home screen ──────────────────────────────────────────────────── */
.ph-home {
  padding: calc(var(--ph-w, 100cqw) * .17) calc(var(--ph-w, 100cqw) * .06) 0; color: #fff;
  background:
    radial-gradient(calc(var(--ph-w, 100cqw) * .8) calc(var(--ph-h, 100cqh) * .6) at 15% 8%, #ff8a5c, transparent 60%),
    radial-gradient(calc(var(--ph-w, 100cqw) * .9) calc(var(--ph-h, 100cqh) * .7) at 95% 42%, #7b5cff, transparent 60%),
    radial-gradient(calc(var(--ph-w, 100cqw) * 1.1) calc(var(--ph-h, 100cqh) * .8) at 25% 105%, #19b4ff, transparent 60%),
    #1b1238;
}
.ph .widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 5.5cqw; }
.ph .widget { aspect-ratio: 1; border-radius: 6cqw; padding: 4.5cqw; display: flex; flex-direction: column; box-shadow: 0 2cqw 6cqw #0003; cursor: pointer; }
.ph .widget.weather { background: linear-gradient(#4aa0f5, #1f62d6); }
.ph .widget.weather b { font-size: 4.2cqw; }
.ph .widget.weather .temp { font-size: 12cqw; font-weight: 300; line-height: 1.1; }
.ph .widget.weather small { margin-top: auto; font-size: 3.2cqw; opacity: .9; }
.ph .widget.calendar { background: #fff; color: #111; }
.ph .widget.calendar .day { color: #e0261c; font-weight: 700; font-size: 3.4cqw; line-height: 1; text-transform: uppercase; }
.ph .widget.calendar .date { font-size: 12cqw; font-weight: 300; line-height: 1.1; }
.ph .widget.calendar small { margin-top: auto; font-size: 3.2cqw; color: #555; border-left: 1cqw solid #34c759; padding-left: 1.6cqw; }
.ph .widget-label { text-align: center; font-size: 3cqw; margin-top: 1.4cqw; }
.ph .icons { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 5cqw; margin-top: 6cqw; justify-items: center; }
.ph .app { width: 18cqw; text-align: center; font-size: 3cqw; }
.ph .app > i {
  display: grid; place-items: center; width: 15.5cqw; aspect-ratio: 1; margin: 0 auto; border-radius: 3.8cqw;
  font: normal 8cqw/1 -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; box-shadow: 0 .6cqw 2cqw #0004; cursor: pointer; position: relative; overflow: hidden;
}
.ph .app > span { display: block; margin-top: 1.4cqw; white-space: nowrap; text-shadow: 0 .3cqw 1cqw #0006; }
.ph .dots { position: absolute; left: 0; right: 0; bottom: 31cqw; display: flex; justify-content: center; gap: 2cqw; }
.ph .dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #fff; opacity: .4; }
.ph .dots i:first-child { opacity: 1; }
.ph .dock {
  position: absolute; left: 3.5cqw; right: 3.5cqw; bottom: 4.5cqw; height: 24cqw; border-radius: 8cqw;
  display: flex; justify-content: space-around; align-items: center;
  background: #ffffff38; backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
}
.ph .dock .app > span { display: none; }

/* Icons with a picture of their own */
.ph .ic-clock { background: #111 !important; }
.ph .ic-clock::before { content: ''; position: absolute; inset: 1.6cqw; border-radius: 50%; background: #fff; }
.ph .ic-clock b { position: absolute; left: 50%; bottom: 50%; width: .7cqw; margin-left: -.35cqw; border-radius: 1cqw; background: #111; transform-origin: 50% 100%; }
.ph .ic-clock b.h { height: 3.6cqw; transform: rotate(300deg); }
.ph .ic-clock b.m { height: 5.2cqw; transform: rotate(60deg); }
.ph .ic-photos { background: #fff !important; }
.ph .ic-photos::before { content: ''; position: absolute; inset: 2.6cqw; border-radius: 50%; background: conic-gradient(#f9c74f, #f9844a, #f94144, #c9184a, #7209b7, #4361ee, #4cc9f0, #43aa8b, #90be6d, #f9c74f); }
.ph .ic-calendar { background: #fff !important; color: #111 !important; display: flex !important; flex-direction: column; justify-content: center; gap: .6cqw; }
.ph .ic-calendar em { font-size: 2.4cqw; font-weight: 700; line-height: 1; color: #e0261c; font-style: normal; text-transform: uppercase; }
.ph .ic-calendar strong { font-size: 7.6cqw; font-weight: 300; line-height: 1; }
.ph .ic-notes { background: linear-gradient(#ffd60a 0 26%, #fff 26%) !important; }
.ph .ic-notes::before { content: ''; position: absolute; inset: 7cqw 2.6cqw 2.6cqw; background: repeating-linear-gradient(#ddd 0 .3cqw, transparent .3cqw 2cqw); }
.ph .ic-folder { background: #ffffff40 !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid !important; grid-template-columns: repeat(3, 1fr); place-items: stretch; align-content: center; gap: .9cqw; padding: 2cqw; }
.ph .ic-folder s { display: block; width: 100%; aspect-ratio: 1; border-radius: .8cqw; text-decoration: none; }

/* ── App screens ──────────────────────────────────────────────────── */
.ph-app { padding-top: calc(var(--ph-w, 100cqw) * .15); }
.ph-app h1 { margin: 0 5cqw 3cqw; font-size: 8.5cqw; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.ph-light { background: #f2f2f7; color: #000; }
.ph .group { margin: 0 4cqw 6cqw; border-radius: 3.4cqw; background: #fff; overflow: hidden; }
.ph .row { display: flex; align-items: center; gap: 3cqw; padding: 0 4cqw; height: 12cqw; font-size: 4.2cqw; border-bottom: 1px solid #e5e5ea; }
.ph .row:last-child { border-bottom: 0; }
.ph .row > i { width: 7.2cqw; height: 7.2cqw; border-radius: 1.8cqw; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 4.2cqw; line-height: 1; }
.ph .row > span { flex: 1; }
.ph .row > em { color: #8e8e93; font-style: normal; }
.ph .row.more::after { content: '›'; color: #c4c4c7; font-size: 6cqw; margin-left: 1cqw; }
.ph .row.zoom-me { cursor: pointer; }
.ph .toggle { width: 13cqw; height: 7.8cqw; border-radius: 99px; background: #34c759; position: relative; }
.ph .toggle::after { content: ''; position: absolute; top: .6cqw; right: .6cqw; width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: #fff; box-shadow: 0 .4cqw 1cqw #0003; }
.ph .toggle.off { background: #e9e9eb; }
.ph .toggle.off::after { right: auto; left: .6cqw; }

.ph-weather { background: linear-gradient(#3a8ef0, #1b4fae 60%, #142f6b); color: #fff; text-align: center; }
.ph-weather .city { font-size: 8cqw; margin-top: 4cqw; }
.ph-weather .big { font-size: 25cqw; font-weight: 200; line-height: 1; margin-left: 4cqw; }
.ph-weather .sky { font-size: 4.6cqw; opacity: .9; }
.ph-weather .card { margin: 6cqw 4cqw 0; padding: 3.5cqw 4cqw; border-radius: 4cqw; background: #ffffff1f; text-align: left; font-size: 3.8cqw; }
.ph-weather .card h3 { margin: 0 0 2cqw; font-size: 3cqw; font-weight: 600; line-height: 1; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.ph-weather .hours { display: flex; justify-content: space-between; text-align: center; }
.ph-weather .hours b { display: block; font-size: 5.6cqw; font-weight: 400; margin: 1.4cqw 0; }
.ph-weather .days div { display: flex; justify-content: space-between; padding: 1.8cqw 0; border-top: 1px solid #ffffff22; }
.ph-weather .days div:first-child { border-top: 0; }

.ph-clock { background: #000; color: #fff; text-align: center; }
.ph-clock h1 { text-align: left; }
.ph .face { position: relative; width: 58cqw; aspect-ratio: 1; margin: 4cqw auto 2cqw; border-radius: 50%; background: radial-gradient(#1c1c1e 60%, #2c2c2e); }
.ph .face::before { content: ''; position: absolute; inset: 3cqw; border-radius: 50%; background: repeating-conic-gradient(from -.75deg, #c7c7cc 0 1.5deg, transparent 1.5deg 30deg); -webkit-mask: radial-gradient(transparent 90%, #000 90.5%); mask: radial-gradient(transparent 90%, #000 90.5%); }
.ph .face b { position: absolute; left: 50%; bottom: 50%; border-radius: 2cqw; transform-origin: 50% 100%; }
.ph .face .h { width: 2.2cqw; margin-left: -1.1cqw; height: 14cqw; background: #fff; }
.ph .face .m { width: 1.6cqw; margin-left: -.8cqw; height: 22cqw; background: #fff; }
.ph .face .s { width: .6cqw; margin-left: -.3cqw; height: 25cqw; background: #ff9f0a; }
.ph .face::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3cqw; height: 3cqw; margin: -1.5cqw; border-radius: 50%; background: #ff9f0a; }
/* A value that changes all the time, on a solid background of its own: each capture repaints
   only it (the heavy views guide, "Good to know"). */
.ph .digital { display: table; margin: 0 auto; background: #000; font-size: 13cqw; font-weight: 200; font-variant-numeric: tabular-nums; }
.ph-clock .group { margin-top: 5cqw; background: #1c1c1e; text-align: left; }
.ph-clock .row { border-color: #2c2c2e; }
.ph-clock .row > em { color: #fff; font-variant-numeric: tabular-nums; }

.ph-photos { background: #fff; color: #000; }
.ph .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6cqw; }
.ph .shots i { aspect-ratio: 1; cursor: pointer; }
.ph-photo { color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 calc(var(--ph-w, 100cqw) * .06) calc(var(--ph-w, 100cqw) * .14); }
.ph-photo h2 { margin: 0; font-size: 7cqw; }
.ph-photo p { margin: 1cqw 0 0; opacity: .8; font-size: 3.8cqw; }

.ph-notes { background: #f2f2f7; color: #000; }
.ph .note-row { display: block; padding: 3cqw 4cqw; border-bottom: 1px solid #e5e5ea; cursor: pointer; }
.ph .note-row b { display: block; font-size: 4.2cqw; }
.ph .note-row small { color: #8e8e93; font-size: 3.4cqw; }
.ph-note { background: #fffdf5; color: #222; padding: calc(var(--ph-w, 100cqw) * .15) calc(var(--ph-w, 100cqw) * .06) 0; font-size: calc(var(--ph-w, 100cqw) * .044); line-height: 1.5; }
.ph-note h2 { font-size: 7cqw; margin: 0 0 3cqw; }

/* The folder is 84% of a screen wide and sizes what is in it in its own width: its numbers are
   a screen's divided by .84, so its icons match the home screen's. */
.ph-folder { width: calc(var(--ph-w, 100cqw) * .84); height: var(--ph-w, 100cqw); container-type: size; color: #fff; }
.ph-folder h2 { margin: 0 0 6cqw; font-size: 8.3cqw; font-weight: 700; text-align: center; }
.ph-folder .panel {
  display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 6cqw; padding: 8.3cqw 3.6cqw; border-radius: 10.7cqw;
  background: #ffffff40; backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.ph-folder .app { width: auto; font-size: 3.6cqw; }
.ph-folder .app > i { width: 18.5cqw; border-radius: 4.5cqw; font-size: 9.5cqw; }
.ph-folder .app > span { margin-top: 1.7cqw; }

.ph-calc { background: #000; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 calc(var(--ph-w, 100cqw) * .04) calc(var(--ph-w, 100cqw) * .12); }
.ph-calc output { display: block; text-align: right; font-size: 20cqw; font-weight: 300; padding: 0 3cqw; overflow: hidden; white-space: nowrap; }
.ph-calc .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.4cqw; margin-top: 3cqw; }
.ph-calc .keys button { aspect-ratio: 1; border: 0; border-radius: 50%; font: 400 8cqw/1 -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; background: #333; cursor: pointer; }
.ph-calc .keys button.op { background: #ff9f0a; }
.ph-calc .keys button.fn { background: #a5a5a5; color: #000; }
.ph-calc .keys button.wide { grid-column: span 2; aspect-ratio: auto; border-radius: 99px; text-align: left; padding-left: 7cqw; }

.ph-generic { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(var(--ph-w, 100cqw) * .34); }
.ph-generic .glyph { width: 30cqw; aspect-ratio: 1; border-radius: 7cqw; display: grid; place-items: center; font: normal 15cqw/1 -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; box-shadow: 0 2cqw 6cqw #0003; }
.ph-generic h2 { margin: 6cqw 0 1cqw; font-size: 7cqw; }
.ph-generic p { margin: 0 10cqw; font-size: 4cqw; opacity: .65; }