/* The unread count on the phone dock's Messages tab (v1).

   Fresh filename: hCDN caches css/* for a week and ignores query strings, so the badge cannot be
   added to dock-solid-v1.css. The badge is out of the grid flow on purpose — the dock item is a
   centred grid, and a third row would push the icon and label off-centre. */

@media (max-width: 820px) {
  .mtv-dock a { position: relative; }

  .mtv-dock__badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 4px);
    min-width: 16px;
    height: 16px;
    box-sizing: border-box;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--mtv-magenta);
    color: #fff;
    font: 700 10px/16px var(--mtv-font-ui);
    font-variant-numeric: tabular-nums;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
  }
}

/* The dock keeps painting even when the solid bar is off, so dark mode needs the same ring. */
:root[data-theme="dark"] .mtv-dock__badge { box-shadow: 0 0 0 2px #0d1723; }