/* Reusable setting help. Paint comes from the existing semantic theme tokens. */
.rako-help-field { display: grid; gap: 7px; min-width: 0; }
.rako-help-label, .rako-help-checkbox { display: flex; align-items: center; gap: 5px; }
.rako-help-label > label, .rako-help-checkbox > label { min-width: 0; }
.rako-help-checkbox > label.checkbox { display: inline-flex; align-items: center; gap: 7px; }
.rako-help { display: inline-flex; flex: 0 0 auto; vertical-align: middle; }
.rako-help .rako-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--link-text);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.rako-help-trigger .rako-icon { width: 18px; height: 18px; }
.rako-help-trigger:hover, .rako-help-trigger[aria-expanded="true"] {
  background: var(--soft-bg-strong);
  border-color: var(--input-focus-border);
}
.rako-help-trigger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rako-help-popup {
  position: fixed;
  z-index: 20001;
  box-sizing: border-box;
  width: max-content;
  max-width: min(300px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 11px 13px;
  border: 1px solid var(--input-focus-border);
  border-radius: 10px;
  color: var(--text-primary);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-large);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.rako-help-popup[hidden] { display: none; }
.rako-help-title { display: block; margin-bottom: 4px; color: var(--heading-text); font-weight: 800; }

/* Let the existing game-start rows fit the viewport when help is added. */
.select-participants-card .compact-add-player-card { flex-wrap: wrap; min-width: 0; }
.select-participants-card .select-top-layout,
.select-participants-card .select-lower-layout,
.select-participants-card .participant-panel,
.select-participants-card .participant-choice-help { min-width: 0; }

/* Caption-only additions keep controls inside their original labels. */
.rako-help-caption { padding-inline-end: 31px; box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; }
.rako-help-attached { position: absolute; z-index: 20000; }
.rako-help-scroll-anchor { position: relative; }
.rako-help-attached[hidden] { display: none !important; }