/* Website-only control recipes from the approved restyle showcase.
   Pane elevation belongs to the page surfaces, never these controls. */
:root {
  --preview-font: var(--font-body);
  --preview-control: var(--color-surface);
  --preview-control-edge: var(--color-surface-container-highest);
  --preview-selected: var(--color-surface-container);
  --preview-segment: #0b0c0d;
  --preview-focus: var(--color-telemetry);
  --preview-pill-bg: rgba(44,232,152,.1);
  --preview-pill-edge: rgba(44,232,152,.24);
  --preview-field: var(--color-brand-charcoal);
  --preview-field-lit: #1a4a3d;
}
.button, .text-button, .whole-hole-preview button, :where(#swing-preview) button,
:is(.demo-options,.group-switch,.rp-picker,.wh-views,.sw-views) button {
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:10px 14px;border:1px solid var(--preview-control-edge);
  border-radius:8px;background:var(--preview-control);color:var(--ink);
  font:500 13px/1.4 var(--preview-font);cursor:pointer;
}
.button {min-height:52px;padding:12px 24px;font-size:15px;gap:20px}
.button.primary {background:var(--orange);border-color:var(--orange);color:#0b0c0d}
.text-button {background:transparent}
:is(.demo-options,.group-switch,.rp-picker,.wh-views,.sw-views) {
  display:flex;flex-wrap:wrap;gap:4px;padding:4px;
  background:var(--preview-segment);border:1px solid var(--preview-control);
  border-radius:9px;
}
.demo-options {margin:0 24px 19px}
.group-switch {margin:24px 24px 0}
.rp-picker {margin:0 0 20px;width:fit-content;max-width:100%}
:is(.demo-options,.group-switch,.rp-picker,.wh-views,.sw-views) button {
  flex:1 1 auto;background:transparent;border-color:transparent;padding:9px 12px;
  color:var(--soft);font-size:12px;border-radius:6px;
}
:is(.demo-options,.group-switch,.rp-picker,.wh-views,.sw-views) button[aria-pressed=true],
.whole-hole-preview .wh-shot[aria-pressed=true],#swing-preview button[aria-pressed=true] {
  background:var(--preview-selected);color:var(--ink);border-color:var(--preview-control-edge);
}
.button:hover:not(:disabled),.text-button:hover:not(:disabled),
.whole-hole-preview button:hover:not(:disabled),#swing-preview button:hover:not(:disabled),
:is(.demo-options,.group-switch,.rp-picker) button:hover:not(:disabled) {border-color:var(--soft)}
:is(button,a,input,[tabindex]):focus-visible {outline:3px solid var(--preview-focus);outline-offset:3px}
button:disabled {opacity:.45;cursor:not-allowed}
/* 12px type stays here for marketing density; the showcase reference uses 10px for these chips. */
.preview-pill,.feature-status,.hole-meta span:first-child,.card-top b,.sw-phase {
  display:inline-flex;align-items:center;width:fit-content;padding:4px 9px;
  border:1px solid var(--preview-pill-edge);border-radius:6px;
  background:var(--preview-pill-bg);color:var(--mint);
  font:500 12px/1.4 var(--preview-font);
}
.preview-pill,.feature-status {border-radius:9999px}
.feature-status {flex-shrink:0;color:var(--muted);background:var(--preview-control);border-color:var(--preview-control-edge)}
.feature-status.experimenting {color:var(--blue);background:rgba(110,179,247,.1);border-color:rgba(110,179,247,.24)}
/* Alpha/Beta feature-stage tags (M24-06): a small inline pill sitting beside the
   feature it describes, following the showcase's .status pill shape (design/restyle-
   reference/showcase.html) with alpha and beta each a distinct token colour. The
   !important overrides are needed because some preview cards (#shot-trajectory-preview,
   #ar-putt-preview) scope a plain <button>/<select> rule to their own id, which
   otherwise outranks a class selector and turns this pill back into a full-size button. */
.stage-tag {display:inline-flex!important;align-items:center;vertical-align:middle;margin-left:8px;margin-top:0;padding:2px 8px!important;border:0!important;border-radius:9999px!important;min-height:0!important;width:auto!important;font-size:12px!important;font-weight:600!important;line-height:1.4!important;white-space:nowrap;cursor:pointer}
.stage-tag.stage-alpha {color:var(--color-accent-hazard)!important;background:rgba(255,159,28,.15)!important}
.stage-tag.stage-beta {color:var(--mint)!important;background:rgba(44,232,152,.15)!important}
.stage-tag-tip {display:block;margin-top:6px;font-size:12px;color:var(--soft)}
.stage-tag-tip[hidden] {display:none}
.telemetry {position:absolute;top:13px;left:13px;color:var(--blue);font:12px/1.4 var(--preview-font);background:rgba(52,68,58,.88);border:1px solid rgba(50,58,68,.8);padding:5px 10px;border-radius:9999px;backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.practice-preview-single {width:100%;min-width:0}
#shot-trajectory-preview .tr-stage,#ar-putt-preview .pt-green,#ar-putt-preview .pt-stroke-3d,#swing-preview .sw-stage {user-select:none}
#shot-trajectory-preview canvas,#ar-putt-preview canvas {cursor:grab}
#shot-trajectory-preview canvas.is-orbiting,#ar-putt-preview canvas.is-orbiting {cursor:grabbing}
.shot-learning {padding-bottom:64px}
#shot-trajectory-preview {margin-top:24px}
@media(max-width:760px) {
  #ar-putt-preview .pt-presets button {flex-direction:column;gap:2px;padding-inline:6px}
  .section-heading>p {margin-top:20px}
  header {gap:12px}
  header .button {white-space:nowrap;min-height:44px;padding:10px 12px;gap:8px;font-size:14px}
  header nav {flex-shrink:0}
  .demo-options {margin-inline:16px}
  .group-switch {margin:16px 16px 0}
  .rp-picker {width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .rp-picker button {padding:8px 4px;min-height:48px}
}