/* BPF 12.5.12.47.30.1 — Sleep-Strength interaction clarity repair.
   Purpose: instant, persistent selection feedback without changing program logic. */
:root{--ssi-line:#69dcf2;--ssi-fill:#123f58;--ssi-fill-2:#0b2a3d;--ssi-glow:rgba(77,202,239,.26)}

/* The broad universal blue CTA layer must not make selection controls look identical. */
#ssPage .ss-option-grid button.ss-option,
#ssPage .phases button.ph.ss-option,
#ssPage .ss-choice-row button.ss-choice,
#ssPage .ss-scale button{
  background:var(--ssi-fill-2)!important;
  border:1px solid rgba(102,204,235,.42)!important;
  color:#eefaff!important;
  -webkit-text-fill-color:#eefaff!important;
  box-shadow:none!important;
  transition:border-color .08s ease,background .08s ease,box-shadow .08s ease,transform .08s ease!important;
}
#ssPage .ss-option-grid button.ss-option:hover,
#ssPage .ss-choice-row button.ss-choice:hover,
#ssPage .ss-scale button:hover,
#ssPage .tracks .trk:hover,
#ssPage .ss-path>a:hover,
#ssPage .bpf-hub-guide__step:hover{
  border-color:rgba(105,220,242,.82)!important;
}
#ssPage .ss-option-grid button.ss-option:active,
#ssPage .ss-choice-row button.ss-choice:active,
#ssPage .ss-scale button:active,
#ssPage .tracks .trk:active,
#ssPage .ss-path>a:active,
#ssPage .bpf-hub-guide__step:active,
#ssPage .bpf-hub-guide__step.is-pressed{
  transform:translateY(1px) scale(.995)!important;
  box-shadow:0 0 0 3px var(--ssi-glow)!important;
}

/* Persistently selected options: clearly different from unselected buttons. */
#ssPage .ss-option-grid button.ss-option.sel,
#ssPage .phases button.ph.ss-option.sel,
#ssPage .ss-choice-row button.ss-choice.sel,
#ssPage .ss-scale button.on,
#ssPage .tracks .trk.sel{
  position:relative!important;
  background:linear-gradient(180deg,#164e68,#103b53)!important;
  border:2px solid var(--ssi-line)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 0 0 3px rgba(105,220,242,.18),inset 0 0 0 1px rgba(255,255,255,.05)!important;
}
#ssPage .ss-option-grid button.ss-option.sel::after,
#ssPage .phases button.ph.ss-option.sel::after{
  content:"✓ ACTIVE";
  position:absolute;
  right:10px;
  top:9px;
  padding:3px 7px;
  border-radius:999px;
  background:#69dcf2;
  color:#052739;
  font:900 10px/1 Arial,sans-serif;
  letter-spacing:.5px;
  -webkit-text-fill-color:#052739;
}
#ssPage .ss-choice-row button.ss-choice.sel::after{content:"  ✓";font-weight:1000;color:#83e8f8}
#ssPage .ss-scale button.on{background:#48bce9!important;color:#06283a!important;-webkit-text-fill-color:#06283a!important}
#ssPage .tracks .trk{cursor:pointer;transition:border-color .08s ease,background .08s ease,box-shadow .08s ease,transform .08s ease}
#ssPage .tracks .trk.sel::after{content:"✓ ACTIVE";position:absolute;right:10px;top:10px;background:#69dcf2;color:#052739;border-radius:999px;padding:3px 7px;font:900 10px/1 Arial,sans-serif;letter-spacing:.5px}

/* Make both the injected 1/2/3 guide and the native 1/2/3 path visibly actionable. */
#ssPage .bpf-hub-guide__step{cursor:pointer!important;transition:border-color .08s ease,background .08s ease,box-shadow .08s ease,transform .08s ease!important}
#ssPage .bpf-hub-guide__step:hover{background:rgba(47,139,255,.11)!important;box-shadow:0 0 0 2px rgba(105,220,242,.12)!important}
#ssPage .ss-path>a{position:relative;background:rgba(4,20,30,.45);border:1px solid rgba(92,184,220,.28);border-radius:13px;padding:12px 13px;display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:inherit;transition:border-color .08s ease,background .08s ease,box-shadow .08s ease,transform .08s ease}
#ssPage .ss-path>a em{font-style:normal;margin-left:auto;align-self:center;color:#65d8ef;font-size:11px;font-weight:900;white-space:nowrap}
#ssPage .ss-path>a:hover{background:rgba(16,58,80,.72)}

/* Disabled continues remain obvious, and enabled state appears immediately after a selection. */
#ssPage button:disabled{opacity:.42!important;filter:saturate(.55)!important;box-shadow:none!important}
#ssPage button:not(:disabled){transition:opacity .08s ease,filter .08s ease,box-shadow .08s ease,transform .08s ease!important}

@media(max-width:760px){
  #ssPage .ss-option-grid button.ss-option.sel::after,#ssPage .phases button.ph.ss-option.sel::after{top:8px;right:8px}
  #ssPage .ss-path>a em{display:none}
}
