/* Sonic Freedom inline player. 150px fits the tightest table cell (167px)
   with no page reflow -- measured; 165px+ widens the page. */
.sfp{display:inline-flex;align-items:center;gap:4px;width:150px;height:30px;
  vertical-align:middle;box-sizing:border-box;padding:0 5px;
  border:1px solid #6a6a6a;border-radius:4px;
  background:linear-gradient(#fdfdfd,#dcdcdc);
  font:11px/1 Arial,Helvetica,sans-serif;color:#222;
  -webkit-user-select:none;user-select:none}

.sfp-btn{flex:none;width:18px;height:18px;padding:0;margin:0;cursor:pointer;
  border:1px solid #5a5a5a;border-radius:3px;
  background:linear-gradient(#f6f6f6,#c8c8c8);
  display:flex;align-items:center;justify-content:center;position:relative}
.sfp-btn:hover{background:linear-gradient(#ffffff,#d4d4d4)}
.sfp-btn:active{background:linear-gradient(#c8c8c8,#f6f6f6)}
.sfp-btn[disabled]{opacity:.4;cursor:default}
/* 30px strip is under the 44px touch minimum: grow the hit area, not the art */
.sfp-btn::after{content:"";position:absolute;top:-13px;bottom:-13px;left:-6px;right:-6px}
.sfp-btn:focus-visible{outline:2px solid #0a6cff;outline-offset:1px}
.sfp-btn svg{width:9px;height:9px;fill:#222;pointer-events:none}

.sfp-bar{flex:1;min-width:0;height:8px;border:1px solid #8a8a8a;border-radius:3px;
  background:#efefef;overflow:hidden;cursor:pointer;position:relative;touch-action:none}
.sfp-bar:focus-visible{outline:2px solid #0a6cff;outline-offset:2px}
.sfp-buf{position:absolute;inset:0 auto 0 0;width:0;background:#cfcfcf}
.sfp-fill{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(#7ab4ff,#2f6fd0)}
.sfp-time{flex:none;min-width:27px;text-align:right;
  font-variant-numeric:tabular-nums;font-size:10px;color:#444}

/* opt-in: add class="sfp-src sfp-wide" for cells with room to spare */
.sfp.sfp-w{width:230px}
.sfp-vol{flex:none;width:38px;height:12px;margin:0;cursor:pointer;accent-color:#2f6fd0}
.sfp:not(.sfp-w) .sfp-vol{display:none}

@media(prefers-color-scheme:dark){
  .sfp{border-color:#555;background:linear-gradient(#3a3a3a,#2a2a2a);color:#eee}
  .sfp-btn{border-color:#666;background:linear-gradient(#4a4a4a,#333)}
  .sfp-btn:hover{background:linear-gradient(#565656,#3c3c3c)}
  .sfp-btn svg{fill:#eee}
  .sfp-bar{background:#1e1e1e;border-color:#555}
  .sfp-buf{background:#3a3a3a}
  .sfp-time{color:#bbb}}