/* liveactivity.css — Dynamic Island Live Activity + Home/Lock surfaces */

.system-surface, .dynamic-island-slot {
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, "Geist Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
:where(.system-surface, .dynamic-island-slot) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dynamic-island-slot button.dynamic-island { background: #000; }
:where(.system-surface, .dynamic-island-slot) button:focus-visible { outline: 2px solid rgb(100 210 255 / 0.7); outline-offset: 3px; }

.pm-app { transition: transform 0.5s var(--ease-glide), filter 0.5s ease, border-radius 0.5s var(--ease-glide); }
.pm-app.backgrounded { transform: scale(0.84); filter: blur(10px) brightness(0.5); border-radius: 46px; pointer-events: none; }

.island-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-radius: 999px;
  animation: island-grow 0.5s var(--ease-bouncy);
  cursor: pointer;
}
@keyframes island-grow { from { transform: scaleX(0.78); } }
.island-compact-lead, .island-compact-trail { display: flex; align-items: center; min-width: 28px; }
.island-compact-trail { justify-content: flex-end; color: #64d2ff; font: 400 11px/1 -apple-system, "SF Pro Text", "Inter", sans-serif; font-variant-numeric: tabular-nums; }
.island-compact::after { right: 50% !important; transform: translate(50%, -50%) !important; }

.island-expanded {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 22px 18px;
  border-radius: 44px;
  color: #fff;
  box-shadow: 0 0 0 1px rgb(100 210 255 / 0.25), 0 12px 40px rgb(0 0 0 / 0.5);
  animation: island-expand 0.5s var(--ease-bouncy);
  transform-origin: 50% 0;
  cursor: pointer;
}
.island-expanded::after { display: none; }
@keyframes island-expand { from { transform: scale(0.55, 0.4); opacity: 0.6; border-radius: 999px; } }
.island-exp-top { display: flex; align-items: center; justify-content: space-between; }
.island-exp-lead { display: inline-flex; align-items: center; gap: 6px; color: #64d2ff; font: 400 17px -apple-system, "SF Pro Text", "Inter", sans-serif; letter-spacing: -0.4px; }
.island-rate { color: #64d2ff; font: 600 15px var(--font-mono, ui-monospace); font-variant-numeric: tabular-nums; }
.island-exp-bottom { display: flex; align-items: center; gap: 10px; font: 400 12px -apple-system, "SF Pro Text", "Inter", sans-serif; color: #fff; padding-top: 4px; }
.island-timer { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }

.system-surface { position: absolute; inset: 0; z-index: 140; opacity: 0; transition: opacity 0.45s ease; display: flex; flex-direction: column; }
.system-surface.shown { opacity: 1; }
.surface-wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 50% at 20% 20%, rgb(64 120 210 / 0.55), transparent 60%),
    radial-gradient(70% 45% at 85% 75%, rgb(120 70 200 / 0.5), transparent 60%),
    radial-gradient(60% 40% at 30% 95%, rgb(30 150 160 / 0.45), transparent 60%),
    linear-gradient(180deg, #0a1020, #080a14);
}
.surface-lock .surface-wallpaper { filter: saturate(1.1) brightness(0.9); }
.lock-clock { position: relative; margin-top: 92px; text-align: center; color: rgb(255 255 255 / 0.92); }
.lock-date { font: 600 20px -apple-system, "SF Pro Text", "Inter", sans-serif; letter-spacing: -0.2px; opacity: 0.85; }
.lock-time { font: 700 96px/1 -apple-system, "SF Pro Rounded", "Inter", sans-serif; letter-spacing: -2px; margin-top: 2px; }
.lock-activity {
  position: relative;
  margin: auto 14px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  background: #000;
  color: #fff;
  text-align: left;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.4);
  animation: toast-in 0.5s var(--ease-glide);
}
.lock-activity-text { display: flex; flex-direction: column; gap: 4px; }
.lock-activity-title { font: 600 17px -apple-system, "SF Pro Text", "Inter", sans-serif; letter-spacing: -0.4px; }
.lock-activity-phase { font: 400 15px -apple-system, "SF Pro Text", "Inter", sans-serif; letter-spacing: -0.2px; }
.lock-activity-rate { color: #64d2ff; font: 600 15px var(--font-mono, ui-monospace); font-variant-numeric: tabular-nums; }
.lock-hint { position: relative; margin: auto 24px 0; text-align: center; font-size: 13px; color: rgb(255 255 255 / 0.6); }
.lock-unlock { position: relative; margin: 26px auto calc(var(--safe-bottom) + 30px); font-size: 14px; color: rgb(255 255 255 / 0.75); }

.home-grid { position: relative; margin-top: 88px; padding: 0 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px; }
.home-app { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 400 11px -apple-system, "SF Pro Text", "Inter", sans-serif; color: #fff; }
.home-app img, .home-app i { width: 62px; height: 62px; border-radius: 15px; display: block; box-shadow: 0 4px 12px rgb(0 0 0 / 0.35); }
.home-app img { animation: icon-pop 0.5s var(--ease-bouncy); }
@keyframes icon-pop { from { transform: scale(1.6); opacity: 0; } }
.home-app.placeholder { opacity: 0.55; }
.home-dock { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-bottom) + 6px); height: 90px; border-radius: 34px; display: flex; justify-content: space-around; align-items: center; background: rgb(255 255 255 / 0.12); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.home-dock span { width: 60px; height: 60px; border-radius: 15px; background: rgb(255 255 255 / 0.1); }
.home-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 118px); text-align: center; font-size: 12px; color: rgb(255 255 255 / 0.6); }