/* First visit and settings: tip cards, paint-first nudge, ready notice, settings rows.
   --v-* tokens only. Sizes carry --pc-ui-scale (0.7694 above 600px) like the map chrome. */
:root {
  --mm-s: var(--pc-ui-scale, 1);
  /* Motion: design-tokens.css only (--v-dur-fast/base/slow, --v-ease-out). The step fade-out is
     --v-dur-fast; onboarding.js reads that same token for its swap timer. */
}

/* Reduce motion (player setting or device setting): one switch, every CSS animation. */
html[data-mm-reduce-motion="1"] *,
html[data-mm-reduce-motion="1"] *::before,
html[data-mm-reduce-motion="1"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}

/* The older first-visit line under the dock repeats step 1 while the tips are up. */
body.mm-tips-on #pc-onboard-hint { display: none; }

.mm-tips { position: fixed; inset: 0; z-index: 58; pointer-events: none; transition: opacity var(--v-dur-base) var(--v-ease-out); }
.mm-tips[hidden] { display: none; }
/* A full view or the sign-in prompt is open: the tips step aside instead of covering it. */
.mm-tips.mm-away { opacity: 0; visibility: hidden; }
.mm-tips.mm-away .mm-card { pointer-events: none; }
.mm-tips.mm-away .mm-ring { animation: none; }
.mm-ring {
  position: fixed; box-sizing: border-box; border-radius: calc(14px * var(--mm-s));
  border: 2px solid var(--v-acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--v-acc) 28%, transparent);
  transition: left var(--v-dur-base) var(--v-ease-out), top var(--v-dur-base) var(--v-ease-out), width var(--v-dur-base) var(--v-ease-out), height var(--v-dur-base) var(--v-ease-out), opacity var(--v-dur-base) var(--v-ease-out);
  animation: mm-ring-pulse calc(var(--v-dur-slow) * 6) var(--v-ease-out) infinite;
}
.mm-ring.mm-off { opacity: 0; }
@keyframes mm-ring-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--v-acc) 10%, transparent); } }

.mm-card {
  position: fixed; box-sizing: border-box; pointer-events: auto;
  width: max(320px, calc(380px * var(--mm-s))); max-width: calc(100vw - 24px);
  padding: calc(18px * var(--mm-s)) calc(20px * var(--mm-s)) calc(16px * var(--mm-s));
  border-radius: calc(20px * var(--mm-s)); background: var(--v-surf); color: var(--v-ink);
  border: 1px solid var(--v-line); box-shadow: var(--v-sh);
  font: 500 max(15px, calc(18px * var(--mm-s))) / 1.4 var(--v-font, Inter, system-ui, sans-serif);
  transition: left var(--v-dur-base) var(--v-ease-out), top var(--v-dur-base) var(--v-ease-out), opacity var(--v-dur-base) var(--v-ease-out), transform var(--v-dur-base) var(--v-ease-out);
}
/* Step done: out quickly, in place (no slide across the screen), then the next step eases in. */
.mm-card.mm-out {
  opacity: 0; transform: translateY(calc(6px * var(--mm-s)));
  transition: opacity var(--v-dur-fast) var(--v-ease-out), transform var(--v-dur-fast) var(--v-ease-out);
}
/* The dots show the step; "1 of 4" stays for screen readers only. */
.mm-count {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  font: 700 12px / 1.2 var(--v-font, Inter, system-ui, sans-serif);
}
.mm-title { display: flex; align-items: center; gap: calc(10px * var(--mm-s)); margin: 0 0 calc(4px * var(--mm-s)); font-weight: 800; font-size: calc(24px * var(--mm-s)); line-height: 1.2; }
.mm-ic { width: 24px; height: 24px; flex: none; display: block; color: var(--v-ink); }
.mm-body { margin: 0 0 calc(14px * var(--mm-s)); color: var(--v-ink); opacity: .86; }
.mm-row { display: flex; align-items: center; gap: calc(10px * var(--mm-s)); }
.mm-grow { flex: 1; }
.mm-dots { display: flex; gap: calc(6px * var(--mm-s)); }
.mm-dots i { width: calc(8px * var(--mm-s)); height: calc(8px * var(--mm-s)); border-radius: 50%; background: var(--v-line); display: block; }
.mm-dots i.past { background: var(--v-mut); }
.mm-dots i.on { background: var(--v-acc); }

.mm-btn {
  font: 700 max(13px, calc(17px * var(--mm-s))) / 1 var(--v-font, Inter, system-ui, sans-serif);
  padding: calc(11px * var(--mm-s)) calc(18px * var(--mm-s)); border-radius: 999px; border: 1px solid var(--v-line);
  cursor: pointer; white-space: nowrap;
}
/* Skip and Next/Got it are a pair: one width, one height. */
.mm-row .mm-btn { box-sizing: border-box; min-width: 6.5em; min-height: 2.5em; display: inline-flex; align-items: center; justify-content: center; }
.mm-btn-p { background: var(--v-acc); color: var(--v-accink); border-color: transparent; }
.mm-btn-q { background: var(--v-surf2); color: var(--v-ink); }
.mm-btn:disabled { opacity: .5; cursor: default; }
.mm-btn:focus-visible, .mm-nudge-x:focus-visible { outline: 2px solid var(--v-acc); outline-offset: 2px; }

/* Phone card: compact, so it is three lines of copy at most and fits above the controls. */
@media (max-width: 600px) {
  .mm-card {
    width: calc(100vw - 24px); max-width: 366px;
    padding: 12px 14px 10px; border-radius: 16px; font-size: 15px; line-height: 1.35;
  }
  .mm-title { gap: 8px; margin: 0 0 2px; font-size: 18px; line-height: 1.2; }
  .mm-body { margin: 0 0 8px; }
  .mm-row { gap: 8px; }
  .mm-dots i { width: 7px; height: 7px; }
  .mm-btn { font-size: 14px; padding: 8px 14px; }
}

.mm-ready {
  position: fixed; z-index: 57; box-sizing: border-box; display: flex; align-items: center; gap: calc(10px * var(--mm-s));
  padding: calc(9px * var(--mm-s)) calc(14px * var(--mm-s)); border-radius: 999px;
  background: var(--v-card); color: var(--v-ink); border: 1px solid var(--v-line); box-shadow: var(--v-sh);
  font: 600 calc(18px * var(--mm-s)) / 1.2 var(--v-font, Inter, system-ui, sans-serif);
}
.mm-ready[hidden] { display: none; }
.mm-ready { left: 50%; bottom: calc(150px * var(--mm-s)); transform: translateX(-50%); max-width: min(92vw, 640px); }
.mm-ready .mm-btn { padding: calc(8px * var(--mm-s)) calc(14px * var(--mm-s)); font-size: calc(16px * var(--mm-s)); }
.mm-nudge-x {
  width: calc(26px * var(--mm-s)); height: calc(26px * var(--mm-s)); padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--v-mut); font: 700 calc(22px * var(--mm-s)) / 1 var(--v-font, Inter, system-ui, sans-serif); cursor: pointer;
}

/* Settings rows (full view cards and the compact card). */
.mm-set-note { margin: 0 0 6px; color: var(--v-mut); font: 500 13px / 1.4 var(--v-font, Inter, system-ui, sans-serif); }
.mm-dis .pc-fs-label, .mm-dis > span:first-child { color: var(--v-mut); }
.pc-srow .mm-btn { padding: 7px 14px; font-size: 14px; }