/* Mobile submenus keep the back arrow, selected label, and value in fixed lanes. */
.setting-trigger > .setting-selected-label {display:none;}
@media(max-width:1023px) {
  .pomelo-body .watch-prototype #player .player-options {
    width:min(232px,calc(100% - 32px));
    padding:8px;
    border:1px solid #ffffff12;
    border-radius:14px;
    background:#242424;
    box-shadow:0 8px 28px #0005;
  }
  .pomelo-body .watch-prototype #player .player-options .setting-trigger[aria-expanded=true] {
    grid-template-columns:20px minmax(0,1fr) auto;
    column-gap:12px;
    min-height:44px;
    padding:0 12px;
    margin-bottom:6px;
    border-radius:0;
    border-bottom:1px solid #ffffff0f;
    background:transparent;
  }
  .pomelo-body .watch-prototype #player .setting-trigger[aria-expanded=true] > svg {
    grid-column:1;
    grid-row:1;
    justify-self:start;
    width:18px;
    height:18px;
    color:#e8e8e8;
  }
  .pomelo-body .watch-prototype #player .setting-trigger[aria-expanded=true] > .setting-name {
    display:none;
  }
  .pomelo-body .watch-prototype #player .setting-trigger[aria-expanded=true] > .setting-selected-label {
    display:block;
    grid-column:2;
    grid-row:1;
    justify-self:start;
    color:#a6a6a6;
    font:400 13px/20px var(--font-sans);
    white-space:nowrap;
  }
  .pomelo-body .watch-prototype #player .setting-trigger[aria-expanded=true] > [data-setting-label] {
    grid-column:3;
    grid-row:1;
    justify-self:end;
    min-width:0;
    max-width:none;
    margin:0;
    color:#f4f4f4;
    font:500 14px/20px var(--font-sans);
    white-space:nowrap;
  }
  .pomelo-body .watch-prototype #player .player-options .setting-menu {
    padding:0;
    border:0;
    background:transparent;
  }
  .pomelo-body .watch-prototype #player .player-options .setting-menu button {
    gap:12px;
    min-height:44px;
    padding:10px 12px;
    border-radius:8px;
    color:#d4d4d4;
    font:400 14px/20px var(--font-sans);
    white-space:nowrap;
  }
  .pomelo-body .watch-prototype #player .player-options .setting-menu button[aria-checked=true] {
    color:#fff;
    background:#ffffff10;
  }
  .pomelo-body .watch-prototype #player .player-options .setting-menu button[aria-checked=true]::after {
    flex-shrink:0;
    width:6px;
    height:10px;
    border-color:var(--brand-flesh);
    margin-inline:4px;
  }
}