/* Music Creator watch mock — app-specific styles (on top of kit/watch-kit.css).
 * Palette from the live MC app: bg #121212, surfaces #1a1a1a/#282828, accent #1db954. */

.mc-art { --h: 150; width: 2.6em; height: 2.6em; border-radius: 0.45em; flex: none; display: grid; place-items: center; color: rgba(255,255,255,.85);
  background: linear-gradient(135deg, hsl(var(--h) 70% 52%), hsl(calc(var(--h) + 40) 60% 24%)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.mc-art .ic { width: 45%; height: 45%; }
.mc-art-sm { width: 2.5em; height: 2.5em; }
.mc-art-row { width: 1.95em; height: 1.95em; border-radius: 0.35em; }
.mc-art-lg { width: 3.4em; height: 3.4em; border-radius: 0.6em; }
.mc-st { display: inline-flex; align-items: center; gap: 0.3em; }
.mc-st i { width: 0.5em; height: 0.5em; border-radius: 50%; display: inline-block; }
.mc-cur .wk-row-title { color: #1db954; }
.mc-eq { display: inline-flex; align-items: flex-end; gap: 0.1em; height: 0.85em; }
.mc-eq i { width: 0.18em; height: 30%; background: #1db954; border-radius: 0.1em; }
.mc-eq.on i { animation: mc-eq .7s ease-in-out infinite alternate; }
.mc-eq.on i:nth-child(2) { animation-delay: .2s; animation-duration: .55s; }
.mc-eq.on i:nth-child(3) { animation-delay: .35s; }
@keyframes mc-eq { from { height: 25%; } to { height: 100%; } }

/* now playing */
.mc-npscreen { background: radial-gradient(85% 55% at 25% 12%, hsl(var(--h) 65% 32% / .6), transparent 75%), #000; }
.mc-np { position: relative; height: 100%; display: flex; flex-direction: column; padding: 0 1.05em 0.5em 0.55em; }  /* right gutter: page dots + crown volume */
.mc-head { display: flex; align-items: center; gap: 0.5em; min-width: 0; }
.mc-headtxt { display: flex; flex-direction: column; min-width: 0; }
.mc-headtxt b { font-size: 1em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-headtxt span { font-size: 0.8em; color: rgba(235,235,245,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-transport { display: flex; align-items: center; justify-content: space-between; margin: auto 0 0; padding: 0 0.1em; }
.mc-transport .wk-circ .ic { width: 62%; height: 62%; }
.mc-play { position: relative; width: 3.7em; height: 3.7em; display: grid; place-items: center; border-radius: 50%; }
.mc-play .wk-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-play span { width: 2.85em; height: 2.85em; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.mc-play .ic { width: 1.35em; height: 1.35em; }
.mc-play:active span { background: rgba(255,255,255,.3); }
.mc-times { display: flex; justify-content: space-between; align-items: center; font-size: 0.72em; color: rgba(235,235,245,.6); font-variant-numeric: tabular-nums; margin: 0.25em 0.2em 0; }
.mc-tools { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 0.2em; }
.mc-device { font-size: 0.72em; color: #1db954; display: flex; align-items: center; gap: 0.2em; font-weight: 600; }
.mc-vol { position: absolute; right: 0.05em; top: 18%; bottom: 22%; width: 1.4em; display: flex; flex-direction: column; align-items: center; gap: 0.3em; opacity: 0; transition: opacity .3s; pointer-events: none; }
.mc-vol.show { opacity: 1; }
.mc-npscreen:has(.mc-vol.show) .wk-pagedots { opacity: 0; }
.mc-vol .ic { width: 0.95em; height: 0.95em; color: #1db954; }
.mc-vol span { flex: 1; width: 0.42em; border-radius: 1em; background: rgba(255,255,255,.2); display: flex; align-items: flex-end; overflow: hidden; }
.mc-vol span i { display: block; width: 100%; background: #1db954; border-radius: 1em; }

/* library */
.mc-mini { width: 100%; display: flex; align-items: center; gap: 0.5em; padding: 0.45em 0.65em; margin-bottom: 0.45em; border-radius: 0.78em; background: linear-gradient(90deg, rgba(29,185,84,.22), rgba(29,185,84,.08)); text-align: left; }
.mc-mini .mc-mtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-mini b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-mini small { font-size: 0.78em; color: rgba(235,235,245,.6); font-variant-numeric: tabular-nums; }
.mc-pl { width: 1.95em; height: 1.95em; border-radius: 0.4em; display: grid; place-items: center; flex: none; color: #fff; }
.mc-pl .ic { width: 1.1em; height: 1.1em; }
.mc-plbtns { display: flex; gap: 0.3em; }
.mc-plbtns .wk-pill { padding: 0.4em 0.5em; }
.mc-ideaic { width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255,69,58,.22); color: #ff453a; }
.mc-ideaic.on { background: #ff453a; color: #000; }
.mc-ideaic .ic { width: 0.85em; height: 0.85em; }
.mc-mt { margin-top: 0.4em; }
.mc-info { display: flex; gap: 0.6em; align-items: center; margin: 0 0.4em 0.2em; }
.mc-info > div { display: flex; flex-direction: column; font-size: 0.85em; color: rgba(235,235,245,.7); gap: 0.15em; }
.mc-latest { font-size: 0.7em; font-weight: 700; color: #1db954; background: rgba(29,185,84,.18); padding: 0.05em 0.4em; border-radius: 1em; vertical-align: 0.15em; }
.mc-check { color: #1db954; }
.mc-check .ic { width: 1.2em; height: 1.2em; stroke-width: 3; }

/* capture */
.mc-cap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 0.6em 0.6em; gap: 0.2em; }
.mc-cap b { font-size: 1.05em; font-weight: 600; margin-top: 0.35em; }
.mc-cap small { font-size: 0.8em; color: rgba(235,235,245,.6); }
.mc-recbtn { width: 4.4em; height: 4.4em; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 0.22em rgba(255,255,255,.85); transition: transform .12s; }
.mc-recbtn i { width: 3.4em; height: 3.4em; border-radius: 50%; background: #ff453a; transition: all .2s; }
.mc-recbtn:active { transform: scale(.93); }
.mc-stop { width: 3.3em; height: 3.3em; flex: none; }
.mc-stop i { width: 1.2em; height: 1.2em; border-radius: 0.3em; }
.mc-capon { justify-content: space-between; padding-top: 0.2em; }
.mc-rectime { font-size: 1.75em; font-weight: 600; font-variant-numeric: tabular-nums; color: #ff453a; display: flex; align-items: center; gap: 0.3em; }
.mc-rectime i { width: 0.35em; height: 0.35em; border-radius: 50%; background: #ff453a; animation: cd-blink 1s infinite; }
.mc-wave { width: 100%; height: 3.2em; display: flex; align-items: center; justify-content: space-between; gap: 0.08em; }
.mc-wave i { flex: 1; min-height: 0.15em; border-radius: 1em; background: #ff453a; transition: height .18s; }
.mc-wave-static i { background: #1db954; }
.mc-toast { color: #1db954; font-weight: 600; }
.mc-toast .ic { stroke-width: 3; }
.mc-review { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0.3em 0.5em; }
.mc-review b { font-size: 1.05em; font-weight: 600; }
.mc-review small { font-size: 0.75em; color: rgba(235,235,245,.6); margin-bottom: 0.4em; }