/* Right-click menu, stats overlay and hold-for-2× pill (menu.js, gestures.js).
   Dark and rounded like YouTube's player menu, with the site's green for checks and the active speed.
   Loaded by the video page and the song player, so it brings its own fallbacks for the theme. */
.cm {
  --cm-g: var(--g, #cbef4a);
  --cm-ink: var(--ink, #0d0e0c);
  position: fixed; z-index: 2147483000; width: max-content; min-width: 232px; max-width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 16px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 6px; border-radius: 14px; outline: none;
  background: rgb(20 22 16 / 0.92); color: #fff;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 48px rgb(0 0 0 / 0.5);
  font: 500 0.875rem/1.2 var(--font, ui-sans-serif, system-ui, sans-serif);
  user-select: none; -webkit-user-select: none;
  transform-origin: var(--cm-ox, 0) var(--cm-oy, 0);
  animation: cm-in 0.14s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes cm-in { from { opacity: 0; scale: 0.96; } }
.cm-row {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px;
  width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; outline: none;
}
.cm-row svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.cm-row:is(:hover, :focus-visible, .cm-on):not([aria-disabled="true"]) { background: rgb(255 255 255 / 0.1); }
.cm-row:focus-visible { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.55); }
.cm-row[aria-disabled="true"] { opacity: 0.38; cursor: default; }
.cm-hint { font: 500 0.75rem/1 var(--mono, ui-monospace, monospace); opacity: 0.6; white-space: nowrap; }
.cm-has-sub { grid-template-columns: 20px 1fr auto 16px; }
.cm-chev { width: 16px !important; height: 16px !important; opacity: 0.6 !important; }
.cm-sep { height: 1px; margin: 5px 6px; background: rgb(255 255 255 / 0.1); }
/* check and radio marks sit in the icon column */
.cm-row[aria-checked="true"] .cm-tick { color: var(--cm-g); opacity: 1; }
.cm-row[aria-checked="false"] .cm-tick { opacity: 0; }
.cm-row[role="menuitemradio"][aria-checked="true"] { color: var(--cm-g); }
.cm-sw { position: relative; width: 30px; height: 18px; border-radius: 9px; background: rgb(255 255 255 / 0.25); transition: background-color 0.2s; }
.cm-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: translate 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }
.cm-row[aria-checked="true"] .cm-sw { background: var(--cm-g); }
.cm-row[aria-checked="true"] .cm-sw::after { translate: 12px 0; background: var(--cm-ink); }
.cm-head { padding: 8px 10px 6px; font: 600 0.6875rem/1 var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; }

/* copy confirmations on pages without their own toast */
.cm-toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 2147483001; translate: -50% 12px;
  padding: 10px 16px; border-radius: 999px; background: rgb(20 22 16 / 0.94); color: #fff;
  font: 600 0.875rem/1.2 var(--font, system-ui, sans-serif); box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, translate 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.cm-toast.show { opacity: 1; translate: -50% 0; }

/* the ⋮ button: touch screens open the menu here, since a long press means 2× */
.cm-more {
  position: absolute; top: 8px; right: 8px; z-index: 6; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(0 0 0 / 0.32); color: #fff; transition: opacity 0.25s, background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.cm-more svg { width: 22px; height: 22px; fill: currentColor; }
.cm-more:active { background: rgb(0 0 0 / 0.55); }
.stage.idle .cm-more { opacity: 0; pointer-events: none; }
.stage:is([data-kind="none"], [data-kind="embed"]) .cm-more, .mini .cm-more { display: none; }
@media (hover: hover) and (pointer: fine) { .cm-more { display: none; } }

/* stats for nerds */
.cm-stats {
  position: absolute; top: 10px; left: 10px; z-index: 7; max-width: calc(100% - 20px); max-height: calc(100% - 80px); overflow: auto;
  padding: 10px 34px 10px 12px; border-radius: 10px; background: rgb(10 12 8 / 0.78); color: #e9eedb;
  font: 500 0.6875rem/1.55 var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); scrollbar-width: thin;
}
.cm-stats dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; margin: 0; }
.cm-stats dt { opacity: 0.6; white-space: nowrap; }
.cm-stats dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-stats button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; }
.cm-stats button:hover { background: rgb(255 255 255 / 0.12); }
@media (max-width: 480px) { .cm-stats { font-size: 0.625rem; } }

/* hold for 2× */
.hold-pill {
  position: absolute; top: 14px; left: 50%; z-index: 6; translate: -50% -6px;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 14px; border-radius: 999px;
  background: rgb(0 0 0 / 0.6); color: #fff; font: 700 0.875rem/1 var(--mono, ui-monospace, monospace);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity 0.15s, translate 0.25s cubic-bezier(0.2, 0, 0, 1);
}
.hold-pill.show { opacity: 1; translate: -50% 0; }
.hold-pill .hp-arrows { display: inline-flex; letter-spacing: -0.12em; }
.hold-pill .hp-arrows span { animation: hp-step 0.9s infinite both; }
.hold-pill .hp-arrows span:nth-child(2) { animation-delay: 0.15s; }
@keyframes hp-step { 0%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
.holding .shield, .holding video { cursor: ew-resize; }
.stage { -webkit-touch-callout: none; }
.stage .shield { -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .cm, .hold-pill .hp-arrows span { animation: none; } }