/* SM-300: Session Tuning Prompt -- the ONE shared modal, both hosts (PRB + Exercise
   Routines). Every color below is an existing site theme variable (theme.css) -- no new
   hex literals, no private token namespace (AGENTS.md's theme rule). */

.stp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

.stp-dialog {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 20px;
  width: 480px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.stp-title {
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .05em;
  color: var(--text);
  font-size: clamp(18px, 3vw, 22px);
  margin: 0 0 14px;
  text-align: center;
}

.stp-tuning-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}

.stp-note-btn {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: .03em;
  color: var(--text);
  background: transparent;
  border: 2px solid var(--card-border);
  border-radius: 8px;
  min-width: 46px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.stp-note-btn:hover { border-color: var(--accent-light); }

.stp-note-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.stp-helper {
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  color: var(--text-mid);
  text-align: center;
  margin-bottom: 16px;
}

.stp-section-hdr {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .05em;
  font-size: 13px;
  color: var(--text-mid);
  margin: 14px 0 6px;
}

.stp-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stp-pill {
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.stp-pill:hover { border-color: var(--accent-light); color: var(--accent-light); }

.stp-confirm {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .05em;
  font-size: 15px;
  padding: 10px 14px;
  margin-bottom: 4px;
}

.stp-confirm:hover { background: var(--accent-light); border-color: var(--accent-light); color: var(--text); }

.stp-custom { border-style: dashed; }

/* ── Custom Tuning panel ── */

.stp-stepper-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.stp-stepper-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--text-mid);
  min-width: 80px;
  text-align: center;
}

.stp-custom-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow-x: auto;
  margin-bottom: 14px;
}

.stp-board-host {
  flex: 1 1 auto;
  min-width: 0;
}

.stp-board-host svg { max-width: 100%; height: auto; }

.stp-side-rows {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stp-side-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stp-side-str-num {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: var(--text-dim);
  width: 14px;
  text-align: right;
}

.stp-side-pitch {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: var(--text);
  min-width: 24px;
  text-align: center;
}

/* SM-636: the site-standard tuning button. Tuning is deliberately secondary,
   so each host colors its label/icon orange or green -- whichever is NOT that
   interface's highlight color. The one shared fork stays mask-painted from the
   served Picking Display asset, and currentColor guarantees that the icon and
   label can never drift. The square box contains the very tall 157x998 source
   without growing the button; the -90deg transform turns it counterclockwise. */
.sm-tuning-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sm-tuning-btn--accent {
  color: var(--accent);
}

.sm-tuning-btn-icon {
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url('/app/static/tools/shared/tuning-fork.svg');
  mask-image: url('/app/static/tools/shared/tuning-fork.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform: rotate(-90deg);
}

/* Phones: dialog goes full-width-minus-margin, note buttons wrap tighter -- no horizontal
   scrollbar (AGENTS.md's standing rule). */
@media (max-width: 480px) {
  .stp-dialog { padding: 14px; }
  .stp-custom-body { flex-direction: column; }
}