/* ============================================================
   MARGIN LEVEL / MARGIN USED (js/margin-view.js) - the figure a tap or a
   click switches: the desktop header's block and the phone row's cell.
   A small two-arrow mark after the label says it switches; the colours are
   the theme's, amber near a margin call and red at it, in either view.
   ============================================================ */

.mv-switch { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mv-switch:focus { outline: none; }
.mv-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }

/* The mark: two arrows, in the label's colour (a mask, so every theme and
   high contrast colour it). Not in the label's text: i18n.js rewrites that. */
.mv-switch .metric-label::after,
.mv-switch .m-st-l::after {
  content: ''; display: inline-block; width: 9px; height: 9px;
  margin-inline-start: 4px; vertical-align: -1px;
  background-color: currentColor; opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5h11M10 2l3 3-3 3M14 11H3M6 8l-3 3 3 3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5h11M10 2l3 3-3 3M14 11H3M6 8l-3 3 3 3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Desktop header: the block lights up under the pointer; its figure amber
   or red as the margin level stands. */
.topbar-metrics .mv-switch { border-radius: 4px; }
.topbar-metrics .mv-switch:hover { background: var(--bg-tertiary); }
.topbar-metrics .mv-switch:hover .metric-label { color: var(--text-secondary); }
.topbar-metrics .mv-switch[data-state="warn"] .metric-value { color: var(--orange); }
.topbar-metrics .mv-switch[data-state="danger"] .metric-value { color: var(--red); }

/* Phone row (css/mobile-stats.css colours the figure): the cell answers a
   tap over the row's whole 28px height, not only its 16px line. */
.m-st.mv-switch { position: relative; }
.m-st.mv-switch::before { content: ''; position: absolute; inset: -6px 0; }