/* Watch Sim — watchOS 11/26-style UI kit.
 * Everything inside the watch screen is sized in CSS px == watch points (pt),
 * then the whole watch is scaled by the simulator zoom. Type is in em so the
 * 42mm size (16pt body) and 46mm/Ultra (17pt body) scale together. */

.wk-host {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: #000; color: #fff;
  font-family: -apple-system, "SF Compact Text", "SF Pro Text", BlinkMacSystemFont, "Inter Variable", Inter, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.22;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.wk-host.wk-s42 { font-size: 16px; }
/* resets use :where() (zero specificity) so component classes like .wk-row always win */
:where(.wk-host *) { box-sizing: border-box; }
:where(.wk-host button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
.wk-host .ic { width: 1em; height: 1em; display: inline-block; flex: none; vertical-align: -0.14em; }

/* ---------- screen + chrome ---------- */
.wk-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; }
.wk-top {
  position: relative; z-index: 3; flex: none;
  height: 2.05em; padding: 0.42em 0.85em 0 0.5em;
  display: flex; align-items: center; gap: 0.3em;
}
.wk-s42 .wk-top { padding-left: 0.45em; }
.wk-time { margin-left: auto; font-size: 0.94em; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.wk-navtitle {
  font-size: 0.94em; font-weight: 600; color: var(--tint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto;
  padding-left: 0.25em; transition: opacity .18s;
}
.wk-navtitle-hidden { opacity: 0; }
.wk-scrolled .wk-navtitle-hidden { opacity: 1; }
/* watchOS 10+ glass back button */
.wk-backbtn {
  width: 1.85em; height: 1.85em; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.17); color: #fff;
}
.wk-backbtn .ic { width: 0.95em; height: 0.95em; stroke-width: 2.6; }
.wk-backbtn:active { background: rgba(255,255,255,.3); }

.wk-body {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 0.1em 0.3em 1.6em;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.wk-body::-webkit-scrollbar { display: none; }
.wk-noscroll { overflow: hidden; }
.wk-full .wk-body { padding: 0; }
.has-bottom .wk-body { padding-bottom: 3.6em; }

.wk-large { font-size: 1.65em; font-weight: 600; line-height: 1.1; margin: 0 0 0.3em 0.36em; letter-spacing: -0.01em; }

.wk-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.9em 1.35em 0.5em;
  background: linear-gradient(to top, #000 62%, rgba(0,0,0,0));
}
.wk-bottom .wk-circ { --bg: #2a2a2d; }

/* vertical page dots (TabView .verticalPage) */
.wk-pagedots {
  position: absolute; right: 0.12em; top: 50%; transform: translateY(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: 0.05em;
}
.wk-dot { width: 0.9em; height: 0.9em; display: grid; place-items: center; }
.wk-dot::after { content: ""; width: 0.3em; height: 0.3em; border-radius: 50%; background: rgba(255,255,255,.35); }
.wk-dot.on::after { height: 0.95em; border-radius: 0.2em; background: #fff; width: 0.3em; }

/* ---------- list rows (watchOS platter rows) ---------- */
.wk-row {
  width: 100%; min-height: 2.9em; margin: 0 0 0.3em;
  display: flex; align-items: center; gap: 0.55em;
  padding: 0.5em 0.65em; border-radius: 0.78em;
  background: #222224; text-align: left;
  transition: transform .12s, background .12s;
}
.wk-row:active { transform: scale(.97); background: #2e2e31; }
.wk-row-ic { width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.12); color: var(--tint); }
.wk-row-ic .ic { width: 1.05em; height: 1.05em; }
.wk-row-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wk-row-title { font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-row-sub { font-size: 0.82em; color: rgba(235,235,245,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.05em; }
.wk-row-right { flex: none; font-size: 0.82em; color: rgba(235,235,245,.55); display: flex; align-items: center; gap: 0.3em; }
.wk-row.wk-row-clear { background: transparent; }

.wk-sechead { font-size: 0.82em; font-weight: 600; margin: 0.55em 0.6em 0.35em; color: rgba(235,235,245,.6); display: flex; align-items: center; gap: 0.35em; }
.wk-foot { font-size: 0.78em; color: rgba(235,235,245,.5); text-align: center; margin: 0.6em 0.8em 0.2em; display: flex; justify-content: center; gap: 0.35em; align-items: center; }

/* ---------- buttons ---------- */
.wk-pill {
  width: 100%; min-height: 2.75em; margin: 0 0 0.35em;
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  border-radius: 999px; padding: 0.45em 0.9em; font-weight: 600; text-align: center;
  --c: var(--tint);
  transition: transform .12s, filter .12s;
}
.wk-pill:active { transform: scale(.96); filter: brightness(1.2); }
.wk-pill .ic { width: 1.1em; height: 1.1em; }
.wk-pill-tinted { background: color-mix(in srgb, var(--c) 26%, #000); color: var(--c); }
.wk-pill-filled { background: var(--c); color: #000; }
.wk-pill-plain { background: #222224; color: #fff; }
.wk-pill-glass { background: rgba(255,255,255,.17); color: #fff; }

.wk-circ {
  --sz: 2.6em; --bg: rgba(255,255,255,.17); --c: #fff;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  display: grid; place-items: center; background: var(--bg); color: var(--c); flex: none;
  transition: transform .12s, filter .12s;
}
.wk-circ:active { transform: scale(.92); filter: brightness(1.25); }
.wk-circ .ic { width: 46%; height: 46%; }

.wk-ring { display: block; }

/* ---------- transitions ---------- */
.wk-in-push { animation: wk-push .26s cubic-bezier(.2,.8,.2,1); }
.wk-in-pop  { animation: wk-pop .24s cubic-bezier(.2,.8,.2,1); }
.wk-in-up   { animation: wk-up .3s cubic-bezier(.2,.8,.2,1); }
.wk-in-down { animation: wk-down .3s cubic-bezier(.2,.8,.2,1); }
.wk-in-zoom { animation: wk-zoom .32s cubic-bezier(.2,.8,.2,1); }
.wk-in-home { animation: wk-homeani .3s cubic-bezier(.2,.8,.2,1); }
.wk-in-fade { animation: wk-fade .2s ease-out; }
.wk-in-sheet { animation: wk-sheet .3s cubic-bezier(.2,.8,.2,1); }
@keyframes wk-push { from { transform: translateX(45%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes wk-pop { from { transform: translateX(-30%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes wk-up { from { transform: translateY(40%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes wk-down { from { transform: translateY(-40%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes wk-zoom { from { transform: scale(.35); opacity: 0; border-radius: 50%; } to { transform: none; opacity: 1; } }
@keyframes wk-homeani { from { transform: scale(1.25); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wk-sheet { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wk-host *, .wk-host *::before, .wk-host *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------- home (watch face) ---------- */
.home-face { position: absolute; inset: 0; padding: 0.7em 0.85em 0.6em; display: flex; flex-direction: column; background: radial-gradient(120% 70% at 50% 0%, #10141c 0%, #000 60%); }
.home-date { font-size: 0.9em; font-weight: 600; color: #FF9F0A; letter-spacing: .02em; display: flex; justify-content: space-between; padding: 0.15em 0.35em 0; }
.home-date span:last-child { color: rgba(235,235,245,.6); font-weight: 500; }
.home-time { font-size: 4em; font-weight: 300; line-height: 1; letter-spacing: -0.03em; text-align: center; margin: 0.12em 0 0.06em; font-variant-numeric: tabular-nums; }
.home-glance { text-align: center; font-size: 0.78em; color: rgba(235,235,245,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.25em; }
.home-apps { margin-top: auto; display: flex; justify-content: space-around; align-items: flex-start; gap: 0.2em; padding-bottom: 0.35em; }
.home-app { display: flex; flex-direction: column; align-items: center; gap: 0.25em; width: 33%; }
.home-app:active .app-icon { transform: scale(.9); }
.home-app span { font-size: 0.7em; color: rgba(235,235,245,.78); white-space: nowrap; }
.app-icon { width: 3.05em; height: 3.05em; border-radius: 50%; display: grid; place-items: center; transition: transform .12s; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.app-icon .ic { width: 52%; height: 52%; }
.home-badge { position: absolute; }