/* Power mode's pill and card over the Yacht view (shift-desk.js): a small glass pill at the lower left, a card above it. */
.shift-pill { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; min-height: 38px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(16, 18, 24, 0.9); color: #f3efe6; font: 700 13px system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.shift-pill:hover, .shift-pill:focus-visible { background: rgba(255, 255, 255, 0.18); }
.shift-pill.on { border-color: #e5af4f; color: #e5af4f; }
.shift-card { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 48px); z-index: 41; width: min(300px, calc(100vw - 24px)); padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(16, 18, 24, 0.92); color: #f3efe6; font: 13px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.shift-card[hidden], .shift-pill[hidden], .shift-form[hidden] { display: none; }
.shift-title { margin: 0 0 4px; font-weight: 700; font-size: 14px; }
.shift-line { margin: 0 0 10px; opacity: 0.85; }
.shift-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.shift-row input { width: 76px; min-height: 34px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: inherit; font: inherit; text-align: right; }
.shift-go { width: 100%; min-height: 40px; margin-top: 4px; border-radius: 999px; border: 1px solid #e5af4f; background: rgba(229, 175, 79, 0.18); color: #e5af4f; font: 700 14px system-ui, sans-serif; cursor: pointer; }
.shift-go:disabled { opacity: 0.5; }
.shift-msg { margin: 8px 0 0; min-height: 1em; color: #ff9d8a; }
.shift-row span, .shift-title, .shift-line { color: #f3efe6; }
.shift-row input { color: #f3efe6; -webkit-text-fill-color: #f3efe6; }
/* On a phone the Desk/Yacht pill takes the foot's middle: the power pill stands above it, as the Player pill does. */
@media (max-width: 640px) {
  .shift-pill { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 64px); }
  .shift-card { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 112px); }
}