/* Focus: a black screen, one ring, big digits; the session's colour rises from the bottom of the glass and
   drains to dark as the minutes run. Pieces are placed by the Adaptive (morph.js); everything below styles
   their insides at their natural size. */
.app-focus { background: #000; color: #fff; font-family: var(--sf); }

.fx-fill, .fx-glow, .fx-fill > i { position: absolute; inset: 0; }

/* Siri: the edge of the screen lights up while it listens */
.fx-glow { pointer-events: none; }
.fx-glow > i {
  position: absolute; inset: 0; opacity: 0;
  border: 5px solid transparent; border-image: conic-gradient(from 210deg, #ff6aa0, #a36bff, #39c4ff, #6cf2d0, #ffd25c, #ff8a5c, #ff6aa0) 1;
  background:
    linear-gradient(to bottom, rgba(163, 107, 255, 0.34), transparent) top / 100% 70px no-repeat,
    linear-gradient(to top, rgba(255, 138, 92, 0.34), transparent) bottom / 100% 70px no-repeat,
    linear-gradient(to right, rgba(57, 196, 255, 0.3), transparent) left / 54px 100% no-repeat,
    linear-gradient(to left, rgba(255, 106, 160, 0.3), transparent) right / 54px 100% no-repeat;
}

/* status bar: iPhone with its island; iPad with the date beside the time */
.fx-sb {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--sbh, 54) * 1px);
  display: flex; align-items: center; justify-content: space-between; color: #fff; font-weight: 600; letter-spacing: -0.01em;
  padding: calc(var(--pt, 15) * 1px) calc(var(--px, 34) * 1px) 0; font-size: calc(var(--fs, 16) * 1px);
}
.fx-sb-t em { font-style: normal; font-weight: 500; margin-left: 0.55em; opacity: var(--dt, 0); }
.fx-isl { display: none; } /* the glass draws the island for every app */
.fx-sb-i { display: flex; align-items: center; gap: 6px; }
.fx-sb-i svg { height: 0.7em; fill: currentColor; }
.fx-batt { width: 1.55em; height: 0.75em; border-radius: 0.25em; border: 1.2px solid rgba(255, 255, 255, 0.75); padding: 1.5px; }
.fx-batt i { display: block; width: 78%; height: 100%; border-radius: 2px; background: #fff; }

/* rounds */
.fx-dots { width: 300px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.fx-slot { position: relative; width: 30px; height: 40px; }
.fx-d, .fx-c { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.fx-d { width: 14px; height: 14px; margin: -7px 0 0 -7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.fx-c {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; background: #0b0b0b; display: grid; place-items: center;
  box-shadow: 0 0 0 2.5px currentColor, 0 0 0 4px rgba(0, 0, 0, 0.9);
}
.fx-c b { width: 16px; height: 16px; border-radius: 50%; background: currentColor; }
.fx-c svg { width: 20px; height: 20px; }

.fx-label { position: relative; width: 300px; height: 22px; }
.fx-label span { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 15px; font-weight: 750; letter-spacing: 0.16em; white-space: nowrap; }

/* the ring: what is left of the session, from twelve o'clock */
.fx-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.fx-trk { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 26; }
.fx-arc { fill: none; stroke: var(--rc, #ff3b30); stroke-width: 26; stroke-linecap: round; stroke-dasharray: 100 200; }

.fx-digits { position: relative; width: 300px; height: 160px; }
.fx-dg { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; font-variant-numeric: tabular-nums; }
.fx-dg b { font-size: 128px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.fx-dg sup { align-self: flex-start; margin: 20px 0 0 8px; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }

/* Siri's answer, while the phone lies on the desk */
.fx-siri { width: 333px; height: 78px; }
.fx-siri-in {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 13px; padding: 0 20px 0 14px; border-radius: 26px; opacity: 0;
  background: rgba(30, 30, 33, 0.97); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.45);
}
.fx-orb {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.95) 0 14%, rgba(255, 255, 255, 0) 40%), conic-gradient(from 30deg, #ff5f9e, #9b6bff, #36c6ff, #61f0c8, #ffcf5a, #ff7f5a, #ff5f9e);
}
.fx-siri-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-siri-t b { font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.fx-siri-t small { font-size: 13px; color: rgba(255, 255, 255, 0.62); white-space: nowrap; }

/* controls */
.fx-play { width: 70px; height: 70px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--pc, #fff); display: flex; align-items: center; justify-content: center; gap: 9px; }
.fx-play i { width: 7px; height: 24px; border-radius: 3px; background: var(--pc, #fff); }
.fx-play.is-paused { gap: 0; }
.fx-play.is-paused i:first-child { width: 0; height: 0; border-radius: 0; background: none; border-left: 22px solid var(--pc, #fff); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.fx-play.is-paused i:last-child { display: none; }
.fx-gear { width: 28px; height: 28px; color: #8e8e93; }
.fx-gear svg { width: 100%; height: 100%; }

/* the durations panel (iPad), after the app's own settings card */
.fx-panel {
  width: 440px; height: 590px; border-radius: 30px; padding: 40px 38px 34px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #46191a 0%, #2a1212 42%, #160b0b 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.fx-panel h4 { color: #ff3b30; font-size: 40px; font-weight: 800; line-height: 1.06; letter-spacing: -0.012em; margin-bottom: 8px; }
.fx-row { margin-top: 30px; }
.fx-row p { display: flex; justify-content: space-between; align-items: baseline; font-size: 19px; font-weight: 650; color: #f2f2f2; }
.fx-row em { font-style: normal; font-size: 21px; font-weight: 600; color: var(--c); font-variant-numeric: tabular-nums; }
.fx-track { position: relative; display: block; height: 3px; margin-top: 18px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.fx-track i { position: absolute; inset: 0; border-radius: 2px; background: var(--c); transform-origin: 0 50%; transform: scaleX(0); }
.fx-track b { position: absolute; left: -14px; top: -13px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45); }
.fx-begin { margin-top: auto; align-self: center; display: flex; align-items: center; gap: 10px; color: #ff3b30; font-size: 22px; font-weight: 800; letter-spacing: 0.05em; }
.fx-begin svg { width: 26px; height: 26px; }