/*
 * Shared primary Start control.
 *
 * Geometry and colors are the exact combined legacy .ev-btn +
 * .rv-start-routine-btn declarations. Label is Jason's canonical wording,
 * "Practice Now" (SM-473, 2026-08-18: "instead of ANY of the other
 * wording") -- consumers no longer carry a leading text-entity glyph in
 * their markup; the play symbol is delivered here, once, via ::before.
 *
 * SM-473: the play glyph is the shared /static/icons/play-button.svg (the
 * canon PLAY/STOP glyph pair -- see play-stop-button.css), masked with
 * background-color: currentColor so it inherits this control's own
 * green/black state-change for free -- no separate hover rule, no filter,
 * and no per-page fork of the icon-coloring technique.
 */
.sm-start-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #00b140;
  color: #00b140;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  transition: background .15s, color .15s;
  padding: 10px 24px;
  font-size: 15px;
  line-height: 1;
}

.sm-start-control::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('../../icons/play-button.svg') no-repeat center / contain;
  mask: url('../../icons/play-button.svg') no-repeat center / contain;
}

.sm-start-control:hover {
  background: #00b140;
  color: #000;
}